/* マーケット概況（/market）2026-09-23。.market-page の中だけに効かせる。
   色は既存の --cy-* をそのまま使う（ライト/ダークの切替に追従する）。数字は動かさない。 */

.market-page {
  --mk-line: var(--cy-ui-line, color-mix(in srgb, var(--cy-border) 30%, var(--cy-surface)));
  --mk-radius: var(--cy-ui-radius, 12px);
  --mk-pos: var(--cy-mint);
  --mk-neg: var(--cy-pink);
  --mk-warn: var(--cy-warning);
  --mk-pad: 24px;
  min-width: 0;
  color: var(--cy-text);
  font-family: var(--cy-font);
}
.market-page *, .market-page *::before, .market-page *::after { box-sizing: border-box; }

/* 見出し */
.market-hero { padding-block: 24px; }
.market-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cy-muted); font-size: .75rem; }
.market-eyebrow__mark { width: 8px; height: 8px; border-radius: 2px; background: var(--cy-mint); }
.market-hero h1 { max-width: 26ch; margin: 12px 0 0; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; line-height: 1.3; }
.market-intro { max-width: 64ch; margin: 12px 0 0; color: var(--cy-muted); font-size: .9375rem; line-height: 1.7; }

/* ページ内の 4 つの行き先 */
.market-localnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--mk-line); }
.market-localnav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; color: var(--cy-muted); text-align: center; text-decoration: none; border-bottom: 3px solid transparent; }
.market-localnav a:hover { color: var(--cy-text); }
.market-localnav a[aria-current="page"] { color: var(--cy-text); font-weight: 700; border-bottom-color: var(--cy-mint); }
/* マーケット一覧（/market/board）への行き先。4 つの表示とは別のページなので並びに入れない */
.market-board-link { margin: -12px 0 24px; text-align: end; }
.market-board-link a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; color: var(--cy-mint); font-size: .875rem; font-weight: 700; }
.market-board-link a + a { margin-inline-start: 16px; }

/* 面 */
.market-panel { min-width: 0; margin-bottom: 24px; padding: var(--mk-pad); border: 1px solid var(--mk-line); border-radius: var(--mk-radius); background: var(--cy-surface); }
.market-panel h2, .market-method h2 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.market-caption { margin: 0 0 12px; color: var(--cy-muted); font-size: .8125rem; line-height: 1.6; }
.market-meta { margin: 4px 0 0; color: var(--cy-muted); font-size: .8125rem; line-height: 1.6; }
.market-label { margin: 0 0 6px; color: var(--cy-muted); font-size: .8125rem; font-weight: 700; }
.market-note { margin: 12px 0 0; font-size: .875rem; line-height: 1.7; }
.market-empty, .market-reason { margin: 8px 0 0; color: var(--cy-text); font-size: .875rem; line-height: 1.7; }
.market-summary { margin: 0; font-weight: 700; }
.market-refresh-note { color: var(--cy-muted); font-size: .8125rem; }
.market-num { text-align: end; font-variant-numeric: tabular-nums; }
.market-pos { color: var(--mk-pos); }
.market-neg { color: var(--mk-neg); }
.market-flat { color: var(--cy-text); }
.market-direction { display: inline-block; margin-inline-start: 8px; padding: 2px 8px; border: 1px solid var(--mk-line); border-radius: 999px; font-size: .875rem; }

/* 状態。丸は補助で、必ず文字で状態を言う。点滅させない */
.market-status { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 700; }
.market-status__dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cy-muted); }
.market-status--realtime .market-status__dot, .market-status--fresh .market-status__dot, .market-status--policy_verified .market-status__dot,
.market-feed--streaming_realtime .market-status__dot, .market-feed--streaming_unknown .market-status__dot { background: var(--cy-mint); }
.market-status--delayed .market-status__dot, .market-feed--delayed .market-status__dot, .market-feed--delayed_unknown .market-status__dot { background: var(--cy-mint); box-shadow: inset 0 0 0 2px var(--cy-surface); outline: 1px solid var(--cy-mint); }
.market-status--stale, .market-status--policy_stale, .market-status--policy_unit_unknown, .market-status--unconfirmed,
.market-feed--connected_stale, .market-feed--unconfirmed { color: var(--mk-warn); }
.market-status--stale .market-status__dot, .market-status--policy_stale .market-status__dot, .market-status--policy_unit_unknown .market-status__dot,
.market-status--unconfirmed .market-status__dot, .market-feed--unconfirmed .market-status__dot,
.market-feed--connected_stale .market-status__dot, .market-feed--reconnecting .market-status__dot { background: var(--mk-warn); }
/* 読み直しに失敗している間の案内（market.js が出す）。値は薄くしない */
.market-notice { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--mk-warn); border-inline-start-width: 4px; border-radius: 8px; background: var(--cy-surface); color: var(--cy-text); font-size: .875rem; line-height: 1.7; }
.market-notice[hidden] { display: none; }
.market-status--closed .market-status__dot, .market-status--daily .market-status__dot { background: transparent; border: 2px solid var(--cy-muted); }
.market-feed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 12px; font-size: .875rem; font-weight: 700; }
.market-feed__meta { color: var(--cy-muted); font-weight: 400; font-size: .8125rem; }
.market-pending p { line-height: 1.7; }

/* 期間・グラフの切替（本物のリンク。JS なしで動く） */
.market-control { margin-bottom: 8px; }
.market-segmented { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.market-segmented a, .market-segmented__off { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--mk-line); border-radius: var(--cy-ui-control-radius, 8px); color: var(--cy-text); text-decoration: none; }
.market-segmented a[aria-current="true"] { border-color: var(--cy-mint); box-shadow: inset 0 -3px 0 var(--cy-mint); font-weight: 700; }
.market-segmented__off { color: var(--cy-muted); border-style: dashed; }
.market-reasons { padding-inline-start: 1.2em; }

/* 通貨強弱 */
.market-fx-grid { display: grid; gap: 24px; }
.market-fx-grid > .market-panel { margin-bottom: 0; }
.market-fx-grid + .market-panel { margin-top: 24px; }
/* 強弱の列は 20rem を下回らせない（960px で 31% だと約 225px になり、行の最小幅 約 245px に足りなかった）。
   ヒートマップ側は枠より広ければ横スクロールになり、案内が出る */
@media (min-width: 960px) {
  .market-fx-grid { grid-template-columns: minmax(20rem, 31fr) minmax(0, 69fr); align-items: start; }
}
.market-strength { margin: 12px 0 0; padding: 0; list-style: none; }
/* 通貨名は長い言語（ロシア語など）では折り返す。名前の列が行を押し広げない */
.market-strength__row { display: grid; grid-template-columns: minmax(4.5em, 9em) minmax(48px, 1fr) auto; align-items: center; gap: 8px; min-height: 36px; border-bottom: 1px solid var(--mk-line); }
.market-strength__code { min-width: 0; font-weight: 700; }
.market-strength__name { display: block; color: var(--cy-muted); font-size: .75rem; font-weight: 400; overflow-wrap: anywhere; }
.market-strength__track { position: relative; height: 12px; }
.market-strength__zero { position: absolute; inset-block: -4px; inset-inline-start: 50%; width: 1px; background: var(--cy-muted); }
.market-strength__bar { position: absolute; top: 0; height: 12px; border-radius: 2px; }
.market-strength__bar--pos { left: 50%; background: var(--mk-pos); }
.market-strength__bar--neg { right: 50%; background: var(--mk-neg); }
.market-strength__value { font-variant-numeric: tabular-nums; font-weight: 700; text-align: end; white-space: nowrap; }
.market-unavailable .market-metric { margin-top: 0; }

/* 横スクロールしてよいのは、名前のついたこの領域だけ。
   position: relative は必須。表のセルの中の読み上げ用テキスト（.sr-only = position: absolute）の
   基準をこの枠にして、枠の外（ページ全体）へはみ出させないため。これが無いと、ヒートマップの
   右端の対角セルの .sr-only がページの横幅を広げていた（390px の画面で文書幅 624px） */
.market-scroll { position: relative; max-width: 100%; overflow-x: auto; border-radius: 8px; }
.market-scroll:focus-visible { outline: 3px solid var(--cy-mint); outline-offset: 2px; }
/* 案内は、表の最小幅が枠に収まらないときだけ出す。画面幅ではなく枠の幅で判断する（コンテナクエリ）。
   対応していないブラウザでは常に出る（隠れるより安全） */
.market-scrollbox { container-type: inline-size; min-width: 0; }
.market-hint { margin: 0 0 8px; color: var(--cy-muted); font-size: .8125rem; }
@container (min-width: 640px) { .market-scrollbox--heatmap .market-hint { display: none; } }
@container (min-width: 880px) { .market-scrollbox--policy .market-hint { display: none; } }

.market-heatmap { min-width: 620px; width: 100%; border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; }
.market-heatmap caption { padding-bottom: 8px; color: var(--cy-muted); font-size: .8125rem; text-align: start; }
.market-heatmap th { padding: 8px; font-size: .8125rem; }
.market-heatmap tbody th { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--cy-surface); text-align: start; }
.market-heat { padding: 8px 6px; border-radius: 4px; font-size: .875rem; text-align: end; color: var(--cy-text); }
.market-heat--zero { background: transparent; box-shadow: inset 0 0 0 1px var(--mk-line); }
.market-heat--pos1 { background: color-mix(in srgb, var(--mk-pos) 14%, var(--cy-surface)); }
.market-heat--pos2 { background: color-mix(in srgb, var(--mk-pos) 30%, var(--cy-surface)); }
.market-heat--neg1 { background: color-mix(in srgb, var(--mk-neg) 14%, var(--cy-surface)); }
.market-heat--neg2 { background: color-mix(in srgb, var(--mk-neg) 30%, var(--cy-surface)); }
.market-heat--diag, .market-heat--none { color: var(--cy-muted); text-align: center; background: var(--cy-raised); }
.market-heat-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: .8125rem; }
.market-heat-legend li { display: inline-flex; align-items: center; gap: 6px; }
.market-heat-legend .market-heat { display: inline-block; width: 16px; height: 16px; padding: 0; }

/* 表 */
.market-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .875rem; }
.market-table th, .market-table td { padding: 10px 8px; border-bottom: 1px solid var(--mk-line); text-align: start; vertical-align: top; }
.market-table thead th { color: var(--cy-muted); font-size: .8125rem; font-weight: 700; }
.market-table .market-num { text-align: end; }
.market-policy { min-width: 860px; }
/* 国・地域の列は横スクロールしても残す。背景は不透明にして、下を流れる値と重ならない */
.market-policy th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; min-width: 8em; max-width: 11em; background: var(--cy-surface); box-shadow: inset -1px 0 0 var(--mk-line); }

/* 比率・金利差の見出しと構成要素 */
.market-pair__row { display: grid; gap: 16px; }
@media (min-width: 760px) { .market-pair__row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.market-headline, .market-leg { min-width: 0; padding: 16px; border: 1px solid var(--mk-line); border-radius: 8px; background: var(--cy-raised); }
.market-metric { margin: 0; line-height: 1.2; }
.market-metric strong { font-size: clamp(2.25rem, 1.8rem + 1.4vw, 2.75rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.market-metric--empty strong { color: var(--cy-muted); }
.market-unit { font-size: .9375rem; color: var(--cy-muted); }
.market-leg__value { margin: 0; }
.market-leg__value strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* グラフ。値が無い所は線を切る */
.market-chart { margin: 20px 0 0; }
.market-chart__cap { margin-bottom: 8px; font-size: .9375rem; font-weight: 700; }
.market-chart__unit { margin: 0 0 4px; color: var(--cy-muted); font-size: .8125rem; }
/* 左に縦軸の目盛り（HTML の文字なので 320px でも 12px のまま読める）、右にグラフ、下に時刻 */
.market-chart__frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; }
.market-chart__yaxis { position: relative; height: 220px; border-block: 1px solid transparent; color: var(--cy-muted); font-size: .75rem; line-height: 1; font-variant-numeric: tabular-nums; text-align: end; }
/* 幅を決めるための見えない一覧（目盛りの文字は絶対配置なので幅に効かない） */
.market-chart__sizer { display: flex; flex-direction: column; gap: 2px; visibility: hidden; }
.market-chart__tick { position: absolute; inset-inline-end: 0; transform: translateY(-50%); white-space: nowrap; }
.market-chart__tick--zero { color: var(--cy-text); font-weight: 700; }
.market-chart__svg { display: block; width: 100%; height: 220px; border: 1px solid var(--mk-line); border-radius: 8px; background: var(--cy-bg); }
.market-chart__grid { stroke: var(--mk-line); stroke-width: 1; }
.market-chart__line { stroke-width: 2; }
.market-chart__line--1 { stroke: var(--cy-mint); }
.market-chart__line--2 { stroke: var(--cy-text); stroke-dasharray: 6 4; }
.market-chart__dot--1 { fill: var(--cy-mint); }
.market-chart__dot--2 { fill: var(--cy-text); }
.market-chart__zero { stroke: var(--cy-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.market-chart__axis { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; min-width: 0; margin-top: 4px; color: var(--cy-muted); font-size: .75rem; }
.market-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: .8125rem; }
.market-legend li { display: inline-flex; align-items: center; gap: 6px; }
.market-legend__swatch { display: inline-block; width: 24px; height: 0; border-top: 2px solid var(--cy-mint); }
.market-legend__swatch--2 { border-top: 2px dashed var(--cy-text); }

/* 開閉 */
.market-details { margin-top: 12px; }
.market-details > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--cy-mint); font-size: .875rem; font-weight: 700; }
.market-details > summary:focus-visible, .market-page a:focus-visible { outline: 3px solid var(--cy-mint); outline-offset: 2px; }
.market-details p { line-height: 1.8; }
.market-formula { overflow-x: auto; padding: 8px 12px; border-radius: 6px; background: var(--cy-raised); font-family: var(--cy-mono); font-size: .8125rem; }

.market-method { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--mk-line); }

/* 狭い画面 */
@media (max-width: 639px) {
  .market-page { --mk-pad: 16px; }
  .market-hero { padding-block: 16px; }
  .market-hero h1 { font-size: 1.75rem; }
  .market-localnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-panel { margin-bottom: 16px; }
  .market-fx-grid { gap: 16px; }
}

/* 無料モード（公式公表データ）。頻度・定義 → 観測日/対象月 → 出典 → 取得時刻 の順で並べる */
.market-ref-notice { display: inline-block; max-width: 100%; margin: 12px 0 0; padding: 6px 12px; border: 1px solid var(--mk-line); border-radius: 8px; background: var(--cy-raised); font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.market-ref-meta { margin: 0 0 12px; }
.market-ref-meta__list { display: grid; gap: 4px 16px; margin: 0; font-size: .8125rem; line-height: 1.6; }
@media (min-width: 760px) { .market-ref-meta__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.market-ref-meta__list > div { display: flex; flex-wrap: wrap; gap: 0 8px; min-width: 0; }
.market-ref-meta__list dt { color: var(--cy-muted); font-weight: 700; }
.market-ref-meta__list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.market-ref-meta__fetch dd { color: var(--cy-muted); }
.market-ref-warn { margin: 8px 0 0; padding: 8px 12px; border: 1px solid var(--mk-warn); border-inline-start-width: 4px; border-radius: 8px; font-size: .8125rem; line-height: 1.6; }
.market-ref-warn strong { color: var(--mk-warn); }
.market-ref-def { display: block; margin-top: 4px; color: var(--cy-muted); font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.market-ref-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 6px; border: 1px solid var(--mk-line); border-radius: 999px; color: var(--cy-muted); font-size: .75rem; font-weight: 400; white-space: nowrap; }
.market-page--ref .market-table { min-width: 0; }
.market-page--ref .market-policy { min-width: 720px; }

@media (prefers-reduced-motion: reduce) {
  .market-page * { transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  .market-status__dot, .market-strength__bar { forced-color-adjust: none; background: CanvasText; }
  .market-notice { border-color: CanvasText; }
  .market-heat { border: 1px solid CanvasText; }
  .market-localnav a[aria-current="page"] { border-bottom-color: Highlight; }
}