/* おやじの為替ページ（/kawase）専用。配色は site.css の変数を使う。トップの予告は site.css にある */

.kawase-body {
  background: linear-gradient(180deg, var(--cream), var(--paper) 38%);
  min-height: 100vh;
}

.kawase-page {
  margin: auto;
  padding: 34px 0 40px;
  width: min(880px, calc(100% - 40px));
}

/* site.css の header / footer の共通指定を打ち消す */
.kawase-head {
  padding: 0;
  text-align: center;
}

.kawase-brand img {
  margin: 0 auto;
  width: 86px;
}

.kawase-lead {
  font-size: 11px;
  letter-spacing: 0.2em;
  margin: 10px 0 0;
}

.kawase-head h1 {
  font-size: 32px;
  letter-spacing: 0.16em;
  margin: 4px 0 0;
}

.kawase-head h1::before,
.kawase-head h1::after {
  color: var(--green);
  content: '❧';
  font-size: 15px;
  margin: 0 14px;
  vertical-align: 3px;
}

.kawase-date {
  font-size: 12px;
  letter-spacing: 0.08em;
  margin: 8px 0 0;
}

.kawase-date::after {
  background: var(--orange);
  content: '';
  display: block;
  height: 2px;
  margin: 18px auto 0;
  width: 44px;
}

.kawase-section {
  margin-top: 30px;
}

.kawase-section h2 {
  font-size: 17px;
  letter-spacing: 0.14em;
  margin: 0 0 12px;
}

.kawase-section h2::before {
  color: var(--green);
  content: '❧';
  font-size: 13px;
  margin-right: 8px;
}

/* 回る地球。器は正方形で、Canvas の上に首都の札を HTML で重ねる。JS が起こすまで hidden */
.kawase-globe {
  margin: 26px auto 0;
  max-width: 520px;
  /*
   * **器から出たものは切る。** 札が外へはみ出すと頁に横スクロールが生まれ、
   * 回すたびにその幅が変わって、狭い画面では中身ごと縮んで見える。
   * 向きを返して収めるのは `globe.js` の仕事で、ここはその取りこぼしの受け皿。
   */
  overflow: hidden;
  position: relative;
  /* 下の説明は2行。札も器の下へ少し出るので、そのぶんの余白 */
  padding-bottom: 46px;
}

.kawase-globe-canvas {
  aspect-ratio: 1;
  cursor: grab;
  display: block;
  /* 横のドラッグは回転、縦は頁のスクロールに渡す */
  touch-action: pan-y;
  width: 100%;
}

.kawase-globe.is-dragging .kawase-globe-canvas {
  cursor: grabbing;
}

.kawase-marks {
  inset: 0 0 46px;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
}

.kawase-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
}

.kawase-mark-dot {
  background: var(--navy);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(18, 55, 106, 0.18);
  display: block;
  height: 10px;
  width: 10px;
}

.kawase-mark.is-home .kawase-mark-dot {
  background: #c2410c;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.22);
}

/* 脇役の値札。旗と円価格だけの小さな帯。押すと国名の吹き出しが開く。
   主役は点を中心に置くが、こちらは帯の左端の点を首都に合わせる */
.kawase-mark--extra {
  pointer-events: auto;
  transform: translate(-6px, -50%);
}

.kawase-mark--extra .kawase-mark-dot {
  display: inline-block;
  height: 8px;
  margin-right: 4px;
  vertical-align: -1px;
  width: 8px;
}

.kawase-mark-tag {
  align-items: center;
  background: rgba(255, 253, 250, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin: 0;
  padding: 1px 7px 1px 3px;
  white-space: nowrap;
}

.kawase-mark-tag:hover,
.kawase-mark--extra.is-open .kawase-mark-tag {
  border-color: var(--navy);
}

/* 日本より安い・高い・同じくらい。点の色 */
.kawase-mark--extra.is-cheap .kawase-mark-dot,
.kawase-globe-key.is-cheap {
  background: var(--green);
  color: var(--green);
}

.kawase-mark--extra.is-dear .kawase-mark-dot,
.kawase-globe-key.is-dear {
  background: #c2410c;
  color: #c2410c;
}

.kawase-mark--extra.is-same .kawase-mark-dot,
.kawase-globe-key.is-same {
  background: #6b7a88;
  color: #6b7a88;
}

.kawase-globe-key {
  background: none !important;
  display: inline-block;
  font-size: 10px;
  margin: 0 3px 0 8px;
}

/* 脇役の吹き出しは押されたときだけ。値札の上に出す */
.kawase-mark--extra .kawase-mark-card {
  bottom: 14px;
  display: none;
  left: 6px;
}

/* 右の縁に寄った値札は左へ開く。点は首都に置いたまま、帯だけを裏返す */
.kawase-mark--extra.is-w {
  transform: translate(calc(-100% + 6px), -50%);
}

.kawase-mark--extra.is-w .kawase-mark-tag {
  flex-direction: row-reverse;
  padding: 1px 3px 1px 7px;
}

.kawase-mark--extra.is-w .kawase-mark-dot {
  margin-left: 4px;
  margin-right: 0;
}

.kawase-mark--extra.is-w .kawase-mark-card {
  left: auto;
  right: 6px;
}

.kawase-mark--extra.is-open {
  z-index: 2;
}

.kawase-mark-note {
  color: #96a3af;
  display: block;
  font-size: 9px;
  margin-top: 2px;
}

.kawase-mark--extra.is-open .kawase-mark-card {
  display: block;
}

/* 主役の吹き出し。既定は点の右上。is-w で左に、is-s で下に開く（向きは SSR の data-side と JS が決める） */
.kawase-mark-card {
  background: rgba(255, 253, 250, 0.94);
  border: 1px solid var(--line);
  border-radius: 6px;
  bottom: 9px;
  box-shadow: 0 2px 6px rgba(18, 55, 106, 0.12);
  display: block;
  font-size: 11px;
  left: 9px;
  line-height: 1.45;
  padding: 3px 8px 4px;
  position: absolute;
  white-space: nowrap;
}

.kawase-mark.is-w .kawase-mark-card {
  left: auto;
  right: 9px;
}

.kawase-mark.is-s .kawase-mark-card {
  bottom: auto;
  top: 9px;
}

.kawase-mark-city {
  display: block;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.kawase-mark-rate {
  display: block;
  font-variant-numeric: tabular-nums;
}

.kawase-mark-bigmac {
  color: #6b7a88;
  display: block;
  font-variant-numeric: tabular-nums;
}

/* 説明の1行。操作の話と色の凡例を分ける */
.kawase-globe-line {
  display: block;
}

.kawase-globe-hint {
  bottom: 0;
  color: #96a3af;
  font-size: 11px;
  left: 0;
  margin: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

/* 表。狭い画面では横にスクロールさせ、本文は折らない */
.kawase-table-wrap {
  overflow-x: auto;
}

.kawase-table {
  border-collapse: collapse;
  font-size: 14px;
  min-width: 100%;
  white-space: nowrap;
}

.kawase-table th,
.kawase-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  vertical-align: baseline;
}

.kawase-table thead th {
  border-bottom: 1px solid var(--navy);
  color: #6b7a88;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.kawase-table tbody th {
  font-weight: 700;
}

.kawase-num {
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

.kawase-table strong {
  font-size: 18px;
  letter-spacing: 0.02em;
}

.kawase-quote {
  color: #6b7a88;
  font-size: 11px;
  margin-right: 6px;
}

.kawase-flag {
  margin-right: 6px;
}

.kawase-missing {
  color: #96a3af;
  font-size: 12px;
}

.kawase-range {
  color: #6b7a88;
  font-size: 12px;
}

/* 前営業日比。▲ は円安（数字が増えた）、▼ は円高 */
.kawase-change {
  font-variant-numeric: tabular-nums;
}

.kawase-change small {
  color: #96a3af;
  font-size: 11px;
  margin-left: 2px;
}

.kawase-change.is-up {
  color: #c2410c;
}

.kawase-change.is-down {
  color: #1d5fa8;
}

.kawase-change.is-flat {
  color: #6b7a88;
}

.kawase-legend,
.kawase-caption,
.kawase-chart-note {
  color: #6b7a88;
  font-size: 11px;
  line-height: 1.7;
  margin: 8px 0 0;
}

.kawase-caption {
  margin: 0 0 8px;
}

.kawase-home {
  background: rgba(255, 255, 255, 0.5);
}

.kawase-verdict small {
  color: #96a3af;
  font-size: 11px;
}

/* 円の強さ。地球の値札（is-cheap / is-dear）とは名前の向きが逆で、円が弱い＝値札が高い */
.kawase-verdict.is-weak {
  color: #c2410c;
}

.kawase-verdict.is-strong {
  color: #1d5fa8;
}

/* 金利の表。行の見出しに「中央銀行が決める」などの小さい説明を添える */
.kawase-interest tbody th small {
  color: #96a3af;
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 1px;
}

/* 「6月17日から」。値にくっつけず下に置く */
.kawase-interest td small {
  color: #96a3af;
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 1px;
}

/* 差。アメリカのほうが高ければ橙、日本のほうが高ければ紺 */
.kawase-spread {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.kawase-spread.is-us {
  color: #c2410c;
}

.kawase-spread.is-jp {
  color: #1d5fa8;
}

.kawase-spread.is-flat {
  color: #6b7a88;
}

/* 読み方。本文より少し小さく、左に橙の線 */
.kawase-lesson {
  background: rgba(255, 255, 255, 0.62);
  border-left: 3px solid var(--orange);
  font-size: 13px;
  line-height: 1.9;
  margin: 18px 0 0;
  padding: 10px 16px 10px 14px;
}

.kawase-lesson p {
  margin: 0;
}

.kawase-lesson p + p {
  margin-top: 8px;
}

.kawase-lesson em {
  font-style: normal;
  border-bottom: 2px solid var(--orange);
}

/* 期間の切り替え。ラジオは隠してラベルを札にし、選ばれた期間の図だけ見せる（JS なし） */
.kawase-spans {
  position: relative;
}

.kawase-span-radio {
  height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
}

.kawase-span-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
}

.kawase-span-tab {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #6b7a88;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 3px 14px;
}

#kawase-span-1y:checked ~ .kawase-span-tabs [for='kawase-span-1y'],
#kawase-span-3m:checked ~ .kawase-span-tabs [for='kawase-span-3m'],
#kawase-span-1m:checked ~ .kawase-span-tabs [for='kawase-span-1m'] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.kawase-span-radio:focus-visible ~ .kawase-span-tabs .kawase-span-tab {
  outline: 1px dotted #9aa7b3;
}

.kawase-chart {
  display: none;
}

/* 金利の図の見出し。為替の枠と続けて出るので、区切りが要る */
.kawase-chart--rate {
  border-top: 1px dashed #cfd9df;
  margin-top: 18px;
  padding-top: 14px;
}

.kawase-chart-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
}

#kawase-span-1y:checked ~ .kawase-chart--1y,
#kawase-span-3m:checked ~ .kawase-chart--3m,
#kawase-span-1m:checked ~ .kawase-chart--1m {
  display: block;
}

/* 折れ線。通貨ごとに1枠、月の目盛は下に1本 */
.kawase-pane + .kawase-pane {
  margin-top: 12px;
}

.kawase-pane-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.4;
  margin: 0 0 2px;
}

.kawase-pane-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.kawase-pane-quote {
  color: #6b7a88;
  font-size: 11px;
}

.kawase-pane-range {
  color: #96a3af;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.kawase-plot {
  position: relative;
}

.kawase-svg {
  display: block;
  height: calc(var(--fx-h) * 1px);
  width: 100%;
}

@media (min-width: 640px) {
  .kawase-svg {
    height: calc(var(--fx-h) * 1.3px);
  }
}

.kawase-line {
  fill: none;
  stroke: var(--navy);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

/* 政策金利が動いた日。線と紛れないよう、目盛より濃く線より薄い橙にする */
.kawase-policy {
  stroke: var(--orange);
  stroke-dasharray: 3 2;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.kawase-policy-note {
  color: #8a97a3;
}

.kawase-grid {
  stroke: #e8eef3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.kawase-month-line {
  stroke: #e8eef3;
  stroke-dasharray: 2 3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.kawase-month-line.is-year {
  stroke: #cfd9df;
  stroke-dasharray: none;
}

.kawase-grid-label {
  background: var(--paper);
  color: #a8b4bf;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  left: 0;
  line-height: 1.2;
  padding: 0 3px;
  position: absolute;
  transform: translateY(-50%);
}

/* 最新の点。線の終わりに丸と値 */
.kawase-last {
  position: absolute;
  transform: translate(-50%, -50%);
}

.kawase-last-dot {
  background: var(--orange);
  border: 2px solid var(--paper);
  border-radius: 50%;
  display: block;
  height: 9px;
  width: 9px;
}

/* 値は丸の左に、線と反対の側へ。線が上から降りてくれば下、上がってくれば上。
   右に置く余地は無い（線の終わりは右端）。1年の枠で直近の急落に文字が重なった */
.kawase-last-label {
  background: rgba(255, 253, 250, 0.85);
  border-radius: 3px;
  bottom: 6px;
  color: var(--navy);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 0 3px;
  position: absolute;
  right: 7px;
  white-space: nowrap;
}

.kawase-last.is-below .kawase-last-label {
  bottom: auto;
  top: 6px;
}

/* ホバーとタップの案内（kawase.js）。線は枠の高さいっぱい、値は線の上の点に、日付は軸に */
.kawase-chart {
  /* 横の動きは案内線に、縦は頁のスクロールに */
  touch-action: pan-y;
}

.kawase-probe-line,
.kawase-probe-value,
.kawase-probe-date {
  display: none;
}

.kawase-chart.is-probing .kawase-probe-line,
.kawase-chart.is-probing .kawase-probe-value:not([hidden]),
.kawase-chart.is-probing .kawase-probe-date {
  display: block;
}

/* 案内中は最新の値の札を引き、月の目盛は薄くする。日付の札と重なって読めない */
.kawase-chart.is-probing .kawase-last-label {
  display: none;
}

.kawase-chart.is-probing .kawase-tick {
  opacity: 0.3;
}

.kawase-probe-line {
  border-left: 1px dashed var(--orange);
  bottom: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-0.5px);
}

.kawase-probe-value {
  background: var(--navy);
  border-radius: 3px;
  color: #fff;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.4;
  padding: 0 5px;
  pointer-events: none;
  position: absolute;
  transform: translate(6px, -50%);
  white-space: nowrap;
}

.kawase-probe-value.is-w {
  transform: translate(calc(-100% - 6px), -50%);
}

.kawase-probe-date {
  background: var(--orange);
  border-radius: 3px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  padding: 0 6px;
  position: absolute;
  top: -1px;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1;
}

.kawase-probe-date.is-w {
  transform: translateX(-100%);
}

.kawase-probe-date.is-e {
  transform: none;
}

.kawase-axis {
  height: 14px;
  margin: 4px 0 0;
  position: relative;
}

.kawase-tick {
  color: #9aa7b3;
  font-size: 9px;
  line-height: 1.4;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.kawase-tick.is-year {
  color: #6b7a88;
  font-weight: 700;
}

.kawase-empty {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  font-size: 14px;
  padding: 20px;
  text-align: center;
}

.kawase-empty p {
  margin: 0;
}

.kawase-note {
  color: #6b7a88;
  font-size: 11px;
  line-height: 1.7;
  margin: 26px 0 0;
}

.kawase-source {
  display: block;
  margin-top: 2px;
}

.kawase-source a {
  border-bottom: 1px solid #b9c6d0;
}

.kawase-foot {
  background: none;
  border-top: 1px solid var(--line);
  color: inherit;
  margin-top: 28px;
  padding: 16px 0 0;
  text-align: center;
}

.kawase-foot span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-top: 8px;
  opacity: 0.72;
}

.kawase-foot small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.14em;
  margin-top: 4px;
  opacity: 0.55;
}

.kawase-back {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.kawase-back:hover {
  color: var(--orange);
}

@media (max-width: 640px) {
  .kawase-page {
    padding: 22px 0 30px;
    width: min(100% - 28px, 680px);
  }

  .kawase-head h1 {
    font-size: 26px;
  }

  /* 4〜5列は横に収まらない。見出しと言葉の列は折り返しを許し、数字の列は折らない
     （「154.04」と「円」が別の行に割れると読めない）。1年の高安は図が持っているので列ごと消す */
  .kawase-table {
    font-size: 12px;
    white-space: normal;
  }

  .kawase-table td.kawase-num,
  .kawase-table tbody th {
    white-space: nowrap;
  }

  .kawase-table th,
  .kawase-table td {
    padding: 8px 6px;
  }

  .kawase-table strong {
    font-size: 16px;
  }

  .kawase-rates .kawase-range {
    display: none;
  }

  .kawase-quote {
    display: block;
    margin: 0;
  }

  /* 月の目盛は12本だと重なる。残す印のある目盛だけ（1年は四半期、短い枠は全部） */
  .kawase-tick:not(.is-narrow) {
    display: none;
  }

  .kawase-mark-card {
    font-size: 10px;
    padding: 2px 6px 3px;
  }

  /* 狭い画面では説明が折り返して3行になることがある */
  .kawase-globe {
    padding-bottom: 58px;
  }

  .kawase-marks {
    inset: 0 0 58px;
  }
}