/* ============================================================================
 * nk225-lab.com — 日経225手口ラボ
 *
 * 意匠の正本は docs/DESIGN.md（固有アイデンティティ「観測手帳」・2層カラートークン・
 * 形の規律・状態網羅）。第1層パレットの上流は config.yaml のチャート配色であり、
 * サイトはチャートPNG（白地matplotlib）へ同化する側に立つ。
 *
 * 規律:
 *   - 色・影・角丸は §1/§2 のトークン経由でのみ参照する（本ファイル中の直値は §1 のみ）
 *   - 影は1形（--shadow-raised）だけ。適用は浮上要素のみ
 *   - 角丸は梯子（chip 2px / control 4px / panel 8px / bubble 50%）以外を使わない
 *   - メディアクエリは min-width のみ（モバイルファースト）。720 / 1024 / 1280
 * ========================================================================== */

/* ============================================================================
 * §1 第1層パレット（正本: config.yaml のチャート配色。ここ以外に直値を置かない）
 * ========================================================================== */

:root {
  /* 中立灰 — データUIの主役。最も解像度を高く持つ */
  --palette-paper-0: #ffffff;   /* チャート panel_face と同一 */
  --palette-paper-1: #faf9f7;
  --palette-paper-2: #f3f1ed;
  --palette-gray-100: #e8e6e1;
  --palette-gray-200: #d5d2cc;
  --palette-gray-300: #b5b2ab;
  --palette-gray-400: #9a9a9a;  /* panel_edge */
  --palette-gray-500: #8f8f8f;  /* 陰線 candle_down */
  --palette-gray-600: #777777;  /* 遅行スパン */
  --palette-gray-700: #555555;  /* SQ線 sq_line */
  --palette-gray-800: #3a3a38;
  --palette-gray-900: #222222;  /* panel_text */
  /* アクセント: 陽線オレンジ系 */
  --palette-orange-500: #f39800;  /* candle_up */
  --palette-orange-600: #e8720c;  /* centroid_total */
  --palette-orange-100: #fdeed8;
  /* 騰落・CALL/PUT（チャートと完全同値） */
  --palette-call-500: #d7263d;
  --palette-call-700: #8f1523;
  --palette-call-100: #fbe4e7;
  --palette-put-500: #1e9e50;
  --palette-put-700: #136b36;
  --palette-put-100: #e2f3e9;
  /* 一目の雲 */
  --palette-cloud-blue: #a8d8ea;
  --palette-cloud-pink: #f2b6c0;
  /* ネット個人（凡例・グループ表示専用。UI一般には使わない） */
  --palette-populace-call: #f78fb3;
  --palette-populace-put: #7fd8be;
  --palette-populace-edge: #00acc1;
}

/* ============================================================================
 * §2 第2層セマンティック（コンポーネントはこの層だけを参照する）
 * ========================================================================== */

:root {
  --color-bg-page: var(--palette-paper-1);
  --color-bg-panel: var(--palette-paper-0);        /* チャート・表の額縁＝チャート地と同白 */
  --color-bg-section-alt: var(--palette-paper-2);
  --color-text-primary: var(--palette-gray-900);
  --color-text-secondary: var(--palette-gray-600);
  --color-text-note: var(--palette-gray-500);      /* ※印・鮮度の添え字 */
  --color-border-strong: var(--palette-gray-400);
  --color-border-subtle: var(--palette-gray-100);
  --color-border-sq: var(--palette-gray-700);      /* SQ点線罫。dashed で使う */
  --color-accent: var(--palette-orange-500);
  --color-accent-strong: var(--palette-orange-600);
  --color-accent-surface: var(--palette-orange-100);
  --color-up: var(--palette-call-500);             /* 上昇・CALL（日本の騰落色） */
  --color-up-strong: var(--palette-call-700);
  --color-up-surface: var(--palette-call-100);
  --color-down: var(--palette-put-500);            /* 下落・PUT */
  --color-down-strong: var(--palette-put-700);
  --color-down-surface: var(--palette-put-100);
  --color-focus-ring: var(--palette-orange-600);
  --color-shadow: rgb(34 34 34 / 0.14);

  /* 第2層の拡張（新色は作らず既存パレットへの別名のみ）:
     墨色の「面」と、その上の反転文字。主CTA・選択状態で使う */
  --color-surface-ink: var(--palette-gray-900);
  --color-surface-ink-hover: var(--palette-gray-800);
  --color-text-on-ink: var(--palette-paper-0);
  --color-text-on-accent: var(--palette-gray-900); /* 橙面の上は墨字（7.0:1） */
}

/* ============================================================================
 * §3 寸法・書体・時間のトークン
 * ========================================================================== */

:root {
  /* 4px グリッドの余白梯子 */
  --space-3xs: 0.25rem;   /*   4px */
  --space-2xs: 0.5rem;    /*   8px */
  --space-xs:  0.75rem;   /*  12px */
  --space-s:   1rem;      /*  16px */
  --space-m:   1.5rem;    /*  24px */
  --space-l:   2rem;      /*  32px */
  --space-xl:  3rem;      /*  48px */
  --space-2xl: 4rem;      /*  64px */
  --space-3xl: 6rem;      /*  96px */
  --space-4xl: 8rem;      /* 128px */

  /* 角丸の梯子（DESIGN.md §4。これ以外の値を使わない） */
  --radius-chip: 2px;     /* 限月タグ・チップ */
  --radius-control: 4px;  /* ボタン・入力 */
  --radius-panel: 8px;    /* カード・チャート額 */
  --radius-bubble: 50%;   /* 手口バブル */

  /* 影は1形のみ。浮上要素だけに使う */
  --shadow-raised: 0 2px 4px var(--color-shadow);

  --font-sans: "Hiragino Sans", "Yu Gothic UI", "Noto Sans CJK JP", Meiryo, sans-serif;
  --font-mono: ui-monospace, "Consolas", monospace;

  --duration-fast: 80ms;
  --duration-base: 140ms;
  --easing: ease-out;

  /* 版面 */
  --width-page: 72rem;    /* 1152px */
  --width-prose: 46rem;   /*  736px */
  --width-hero-copy: 42rem;
  --gutter: var(--space-s);

  /* 節のリズム（DESIGN.md: 96〜128px級） */
  --rhythm-section: var(--space-2xl);
  --rhythm-band: var(--space-xl);
}

/* ============================================================================
 * §4 リセットと素の要素
 * ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.85;
  /* DESIGN.md §3: 数値が出る面はすべて等幅数字。面ごとの取りこぼしを避けるため
     ルートで一括指定し、個別の面でも念のため再指定する */
  font-variant-numeric: tabular-nums lining-nums;
  /* DESIGN.md §3: 和文の折返しは文節単位。lang="ja" 前提でサイト全体へ効かせ、
     見出しは .phrase span で更に明示的に統制する */
  word-break: auto-phrase;
  text-underline-offset: 0.22em;
}

h1, h2, h3, p, dl, dd, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; }

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  transition:
    background-color var(--duration-base) var(--easing),
    text-decoration-color var(--duration-base) var(--easing),
    text-decoration-thickness var(--duration-base) var(--easing);
}

@media (any-hover: hover) {
  a:hover {
    background: var(--color-accent-surface);
    text-decoration-color: var(--color-accent-strong);
    text-decoration-thickness: 2px;
  }
}

a:active { text-decoration-color: var(--color-accent-strong); }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-chip);
}

::selection {
  background: var(--color-accent-surface);
  color: var(--color-text-primary);
}

/* ============================================================================
 * §5 レイアウト
 * ========================================================================== */

.container {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 版面はcontainerのまま、直下の各ブロックだけを本文幅へ収めて左揃えを保つ */
.prose > * { max-width: var(--width-prose); }

main { display: block; }

/* 記事内の節の縦リズム。fold以下の既存セクションにも一律で効かせる */
main section + section,
main .section + .section { margin-top: var(--rhythm-section); }

main > article > section:first-of-type { margin-top: var(--rhythm-band); }

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: 20;
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-surface-ink);
  color: var(--color-text-on-ink);
  border-radius: var(--radius-control);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ============================================================================
 * §6 タイポグラフィ
 * ========================================================================== */

h1 {
  font-size: 1.75rem;    /* 28px */
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: 0.005em;
}

h2 {
  position: relative;
  margin-top: 0;
  padding-left: 1.75rem;
  font-size: 1.25rem;    /* 20px */
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* 署名的装置: 見出し脇の2粒バブル（CALL赤・PUT緑の大小2粒）。
   チャートのバブル（淡い面＋濃い縁）と同じ組成で描く */
h2::before,
h2::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-bubble);
}
h2::before {
  left: 0;
  top: 0.42em;
  width: 0.7em;
  height: 0.7em;
  background: var(--color-up-surface);
  border: 1.5px solid var(--color-up);
}
h2::after {
  left: 0.56em;
  top: 0.92em;
  width: 0.44em;
  height: 0.44em;
  background: var(--color-down-surface);
  border: 1px solid var(--color-down);
}

h3 {
  margin-top: var(--space-l);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-2xs);
  font-size: 1.0625rem;  /* 17px */
  line-height: 1.5;
  font-weight: 700;
}

p + p { margin-top: var(--space-s); }

.lead {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.9;
  word-break: auto-phrase;
}

/* 和文見出しの折返しを文節単位で統制する共通規約 */
.phrase {
  display: inline-block;
  word-break: auto-phrase;
}

/* 数値の泣き別れ禁止（DESIGN.md §3）。数値は単位・括弧までで1つの読み取り単位とし、
   .nowrap span でくくって不可分にする。折返してよい位置は <wbr> だけで与える */
.nowrap { white-space: nowrap; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.02em;
}

.note {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.8;
}
.note::before {
  content: "※ ";
  color: var(--color-text-note);
}

/* モジュール冒頭の1行解説（用語の初出補足）。注記(.note)より半段だけ本文寄り */
.module-intro {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-block: calc(-1 * var(--space-xs)) var(--space-s);
}

/* 横スクロール台帳の操作示唆。スクロールが発生しない広い版面では出さない */
.scroll-hint { margin-bottom: var(--space-xs); }
@media (min-width: 1024px) {
  .scroll-hint { display: none; }
}

/* 空の状態の見た目は §7 の .observed（観測して0だった記帳）が持つ */

/* 一般の箇条書き。手口バブルをリストマーカーに使う */
main ul:not([class]) { list-style: none; }
main ul:not([class]) > li {
  position: relative;
  padding-left: var(--space-m);
}
main ul:not([class]) > li + li { margin-top: var(--space-2xs); }
main ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.72em;
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--radius-bubble);
  background: var(--color-up-surface);
  border: 1.5px solid var(--color-up);
}

/* ============================================================================
 * §7 部品
 * ========================================================================== */

/* ---- 限月タグ / チップ ---------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3xs);
  padding: 0.1875rem var(--space-2xs);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-chip);
  background: var(--color-bg-panel);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.chip__label {
  color: var(--color-text-secondary);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
.chip--fresh {
  background: var(--color-accent-surface);
  border-color: var(--color-accent);
}
.chip--sq {
  border-style: dashed;
  border-color: var(--color-border-sq);
}
/* 更新告知チップ: プロフィール画像＋ハンドル＋Xマーク。
   画像を含むので baseline ではなく中央で揃える */
.chip--x {
  align-items: center;
  gap: var(--space-3xs);
  color: var(--color-text-secondary);
}
/* リンクになった限月タグ（日付プレート・構造区分タグ）。プレート自体が的になる。
   下線はサイト共通のリンク表現（橙下線）を残し、プレート＝静的なタグと区別する */
a.chip {
  color: inherit;
  transition:
    background-color var(--duration-fast) var(--easing),
    border-color var(--duration-fast) var(--easing);
}
@media (any-hover: hover) {
  a.chip:hover {
    background: var(--color-accent-surface);
    border-color: var(--color-accent);
  }
}
a.chip:active { border-color: var(--color-accent-strong); }

/* ---- ボタン --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;   /* 46px */
  padding: 0.625rem var(--space-m);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--easing),
    border-color var(--duration-base) var(--easing),
    color var(--duration-base) var(--easing);
}
.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
}
.btn--secondary {
  background: var(--color-bg-panel);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}
/* X導線の主CTA。墨面トークン（既存）で置き、橙の主CTAと役割で色を分ける。
   Xの単色マークは反転（白）で載る */
.btn--x {
  gap: var(--space-2xs);
  background: var(--color-surface-ink);
  border-color: var(--color-surface-ink);
  color: var(--color-text-on-ink);
}

@media (any-hover: hover) {
  .btn:hover { text-decoration: none; }
  .btn--primary:hover {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
  }
  .btn--secondary:hover {
    background: var(--color-accent-surface);
    border-color: var(--color-accent);
  }
  .btn--x:hover {
    background: var(--color-surface-ink-hover);
    border-color: var(--color-surface-ink-hover);
  }
}
.btn--x:active {
  background: var(--color-surface-ink-hover);
  border-color: var(--color-surface-ink-hover);
}

/* Xの商標マーク。単色で置いた面の文字色に追随させる（黒地では白・白地では黒） */
.x-logo {
  flex: none;
  fill: currentColor;
}
/* Xのプロフィール画像。円形マスクはPNGへ焼き込み済みだが、
   画像が差し替わっても丸で収まるようCSS側でも丸める */
.x-avatar {
  flex: none;
  display: block;
  border-radius: var(--radius-bubble);
}
.btn--primary:active {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
}
.btn--secondary:active {
  background: var(--color-bg-section-alt);
  border-color: var(--color-accent-strong);
}

/* ---- パネル（面色＋1px境界で区切る。カードに影は付けない） ------------------ */
.panel {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
}

/* ---- 観測して0だった記帳（空の状態） --------------------------------------- */
/* 「データが無い」ではなく「観測した結果が0だった」ことを記帳として出す。
   点線＝定点観測の枠（DESIGN.md §4: dashed はSQ罫・区切りのアクセント）。
   .empty は数を持たない空、.observed は観測数を持つ空。 */
.empty,
.observed {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  /* 観測欄は記入内容のぶんだけ。空の広い箱は「欠落」に見える */
  width: fit-content;
  max-width: 100%;
  padding: var(--space-xs) var(--space-s);
  background: var(--color-bg-panel);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-panel);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.7;
}
/* 観測欄。方眼の1マスに数を書き入れた体で、0を「読める数値」として置く */
.observed__count {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 0.0625rem;
  min-width: 3.25rem;
  padding: var(--space-3xs) var(--space-2xs);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  justify-content: center;
}
.observed__unit {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* ---- 注記・補足の囲み（読ませる注記のかたまり） ------------------------------ */
.callout {
  padding: var(--space-m);
  background: var(--color-bg-section-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
}

/* ---- C/P（CALL赤・PUT緑）。手口バブルの粒子で瞬読させる --------------------- */
.cp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.cp::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border: 1.5px solid currentcolor;
  border-radius: var(--radius-bubble);
}
.cp--call { color: var(--color-up); }
.cp--call::before { background: var(--color-up-surface); }
/* 緑は500だと白地3.4:1で本文に足りない。文字・縁は700を使う */
.cp--put { color: var(--color-down-strong); }
.cp--put::before { background: var(--color-down-surface); }

/* ---- 可否フラグ（騰落・CALL/PUT以外に赤緑を使わない中立表現） ---------------- */
/* 面はすべて白（読みやすさを落とさない）。差は縁の強さと字の重みだけで作る:
   対象外=淡い実線＋灰字 / 対象=濃い実線＋墨の太字 / 未確認=点線（確認していない、の形） */
.flag {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem var(--space-3xs);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-chip);
  background: var(--color-bg-panel);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: nowrap;
}
.flag--on {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  font-weight: 700;
}
.flag--unknown {
  border-style: dashed;
  border-color: var(--color-border-strong);
}

/* ---- SQ点線罫 ------------------------------------------------------------- */
.rule-sq {
  border: 0;
  border-top: 1px dashed var(--color-border-sq);
  opacity: 0.45;
  margin: 0;
}

/* 見出しと右端のタグを1本の点線罫でつなぐ（台帳の行罫） */
.head-rule {
  flex: 1 1 2rem;
  min-width: 1.5rem;
  align-self: center;
  height: 0;
  border-top: 1px dashed var(--color-border-sq);
  opacity: 0.32;
}

/* ---- 2粒バブルマーク（インラインSVG用） ------------------------------------ */
.bubble-mark { flex: none; }
/* 面の濃度はチャートの bubble_alpha（0.5）に揃える */
.bubble-mark__call {
  fill: var(--color-up);
  fill-opacity: 0.45;
  stroke: var(--color-up-strong);
}
.bubble-mark__put {
  fill: var(--color-down);
  fill-opacity: 0.45;
  stroke: var(--color-down-strong);
}
.bubble-mark__rule {
  stroke: var(--color-border-strong);
  opacity: 0.38;
}

/* ---- 台帳の表 ------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
  background: var(--color-bg-panel);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums lining-nums;
}
caption {
  text-align: left;
  padding: var(--space-2xs) var(--space-xs);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}
th, td {
  padding: 0.5rem var(--space-xs);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border-subtle);
}
/* 列数の少ない台帳（手口・先物・アーカイブ）の幅は §13 で表ごとに抑える。
   狭い画面では版面いっぱいに使う */

/* 列数の多い台帳（ETF一覧）。列幅は colgroup で設計し（§11）、
   収まらない画面では横スクロールする */
.table-wrap--wide table { font-size: 0.8125rem; }
thead th {
  background: var(--color-bg-section-alt);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border-strong);
  position: relative;
}
tbody tr:last-child > * { border-bottom: 0; }
/* 数値列だけ折返しを止める。文字列列は折返して横スクロールを避ける */
td.num, th.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* 横スクロールする台帳はキーボードでもスクロールできるようにする（tabindex="0"）。
   フォーカス枠は共通の :focus-visible が与える */
.table-wrap[tabindex]:focus-visible { outline-offset: -2px; }

/* 騰落色（日本式: 上昇=赤・下落=緑）。符号と併記して色だけに依存させない */
.is-up { color: var(--color-up); }
.is-down { color: var(--color-down-strong); }

@media (any-hover: hover) {
  tbody tr { transition: background-color var(--duration-fast) var(--easing); }
  tbody tr:hover { background: var(--color-bg-section-alt); }
}

/* ============================================================================
 * §8 ヘッダー
 * ========================================================================== */

.site-header {
  background: var(--color-bg-panel);
  border-bottom: 1px solid var(--color-border-subtle);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  padding-block: var(--space-2xs);
}

/* ---- ワードマーク（専用SVGマーク＋和文＋英字mono の縦ロックアップ） ---------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  padding: var(--space-3xs);
  margin-inline-start: calc(var(--space-3xs) * -1);
  border-radius: var(--radius-control);
}
.wordmark__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.wordmark__ja {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}
.wordmark__en {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  color: var(--color-text-secondary);
  transition: color var(--duration-base) var(--easing);
}
@media (any-hover: hover) {
  .wordmark:hover { background: transparent; }
  .wordmark:hover .wordmark__en { color: var(--color-accent-strong); }
}
.wordmark:active .wordmark__en { color: var(--color-accent-strong); }

/* モバイルは1段目にワードマーク＋鮮度チップ、2段目にナビ。
   720px以上で1段へ畳む（ハンバーガーは作らない） */
.site-header__inner > .wordmark { order: 1; }
.site-header__inner > .site-header__fresh { order: 2; }
.site-header__inner > .site-nav { order: 3; flex-basis: 100%; }
/* 更新告知チップ。モバイルのヘッダーはワードマーク＋鮮度チップ＋ナビ2行で
   すでに3段あり、ここへ足すと4段目が丸ごと増えてファーストビューを押し下げる。
   狭い幅では畳み、フォロー導線はヒーローの行動列・チャート額の直後・
   フッターのカード（いずれもチップより強い）へ任せる */
.site-header__x { display: none; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  font-size: 0.875rem;
}
.site-nav a {
  padding-block: var(--space-3xs);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition:
    color var(--duration-base) var(--easing),
    border-color var(--duration-base) var(--easing);
}
@media (any-hover: hover) {
  .site-nav a:hover {
    background: transparent;
    color: var(--color-text-primary);
    border-bottom-color: var(--color-accent);
  }
}
.site-nav a:active { color: var(--color-accent-strong); }
.site-nav a[aria-current="page"] {
  color: var(--color-text-primary);
  font-weight: 700;
  border-bottom-color: var(--color-accent-strong);
}

/* ============================================================================
 * §9 ヒーロー（行使価格グリッドの気配の上に置く）
 * ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border-subtle);
  padding-block: var(--space-l) var(--space-l);
}
.hero__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.hero-grid__minor,
.hero-grid__tick { stroke: var(--color-border-subtle); }
.hero-grid__tick { opacity: 0.75; }
.hero-grid__major {
  stroke: var(--color-border-strong);
  opacity: 0.26;
}
.hero-grid__sq {
  stroke: var(--color-border-sq);
  opacity: 0.34;
}
.hero-grid__call {
  fill: var(--color-up);
  fill-opacity: 0.1;
  stroke: var(--color-up);
  stroke-opacity: 0.34;
}
.hero-grid__put {
  fill: var(--color-down);
  fill-opacity: 0.1;
  stroke: var(--color-down);
  stroke-opacity: 0.34;
}

.hero__copy { max-width: var(--width-hero-copy); }

.hero__title {
  font-size: 1.75rem;
  line-height: 1.42;
}
.hero__lead {
  margin-top: var(--space-s);
  color: var(--color-text-secondary);
  max-width: 34rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-m);
}
/* 狭幅では横並びで文字が詰まるため、親指の届く全幅ボタンとして積む */
.hero__actions .btn { flex: 1 1 100%; }

/* ---- 概況ストリップ -------------------------------------------------------- */
.strip { margin-top: var(--space-xl); }
.strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-s);
  margin-bottom: var(--space-xs);
}
.strip__title {
  font-size: 1rem;
  padding-left: 1.5rem;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
}
/* 5枚構成（終値・年初来比・前年同日比・次回SQ日・異常玉）: 2列グリッドでは
   2+2+1で最終枚が半端に欠けるため、5枚目（異常玉）を横長1枚にして整える */
.stat-grid > .stat:nth-child(5) { grid-column: 1 / -1; }
/* 狭幅の2列グリッドでは1タイル約174px。数値面（値＋単位・サブ行の括弧書き）を
   泣き別れさせずに収めるため、左右の余白は12pxに絞る（720px以上で16pxへ戻す） */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs) var(--space-xs) var(--space-s);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
}
.stat__label {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
/* 数値面は値と単位を分けない（.nowrap と同じ泣き別れ禁止の規約） */
.stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.stat__value--mono {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}
.stat__unit {
  margin-left: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-secondary);
}
/* サブ行が折返してよいのは <wbr> を置いた節の境界だけ。数値・単位・括弧書きは
   .nowrap でくくって不可分にする（テンプレート側の共通規約）。
   読ませる数値注記なので gray-500（3.2:1）ではなく secondary（4.6:1）を使う
   （SPEC-R2 §3 裁定: --color-text-note は ※記号と装飾ラベルのみ） */
.stat__sub {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.6;
}
.stat--up .stat__value { color: var(--color-up); }
.stat--down .stat__value { color: var(--color-down-strong); }
.strip__source {
  margin-top: var(--space-2xs);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.7;
}
.strip__source::before {
  content: "※ ";
  color: var(--color-text-note);
}

/* ============================================================================
 * §10 チャート額（チャート地と同白の面に1px境界。地続きに見えることが正）
 * ========================================================================== */

.chart-frame { scroll-margin-top: var(--space-l); }
.chart-frame__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-s);
}
.chart-frame__figure {
  margin-top: var(--space-s);
  display: grid;
  gap: var(--space-m);
  align-items: start;
}
.chart-frame__stage {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
  padding: var(--space-2xs);
  width: fit-content;
  margin-inline: auto;
  max-width: 100%;
  transition: border-color var(--duration-base) var(--easing);
}
.chart-frame__stage a {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-chip);
}
@media (any-hover: hover) {
  .chart-frame__stage a:hover { background: transparent; }
  /* 画像そのものが原寸リンクであることを額の縁で示す */
  .chart-frame__stage:has(a:hover) { border-color: var(--color-accent); }
}
.chart-frame__stage:has(a:active) { border-color: var(--color-accent-strong); }
.chart-frame__stage img {
  width: 100%;
  height: auto;
}
.chart-frame__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.8;
}
.chart-frame__caption { color: var(--color-text-secondary); }
.chart-frame__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  list-style: none;
  font-size: 0.8125rem;
}
.chart-frame__links a { color: var(--color-text-primary); }
/* 共有アクション。フッターの告知リンクと同じ表現で「Xへ戻る動作」を揃える */
.chart-frame__share {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.375rem var(--space-s);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-control);
  background: var(--color-accent-surface);
  color: var(--color-text-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color var(--duration-base) var(--easing),
    border-color var(--duration-base) var(--easing);
}
@media (any-hover: hover) {
  .chart-frame__share:hover {
    background: var(--color-bg-panel);
    border-color: var(--color-accent-strong);
  }
}
.chart-frame__share:active { border-color: var(--color-accent-strong); }

/* ============================================================================
 * §11 fold以下の共通モジュール
 * ========================================================================== */

.page-header {
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--color-border-subtle);
}
.page-header .lead { margin-top: var(--space-xs); }
/* 版面名の副題。h1が「何の台帳か」、副題が「どう読む台帳か」を1行で受ける */
.page-header__sub {
  margin-top: var(--space-3xs);
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  word-break: auto-phrase;
}
.page-header__sub + .lead { margin-top: var(--space-s); }
/* 導入文は版面いっぱいに伸ばさず、読める行長で止める */
.page-header__sub ~ .lead { max-width: 58rem; }

/* 列数の少ない台帳が広い画面で間延びしないよう、本文と同じ版面幅に収める */
.options,
.futures,
.anomalies,
.download,
.data-notes,
.recent { max-width: var(--width-prose); }

section > .table-wrap,
section > .note,
section > .empty,
section > .observed { margin-top: var(--space-xs); }

/* ---- 手口テーブル（参加者グループ別） --------------------------------------- */
/* 見出し・限月タグ・合計を1本の点線罫でつなぐ（台帳の行罫）。
   限月はグループ内で1種類のときだけ行から外して見出し脇のタグへ昇格させ、
   複数限月が混在する日はテンプレート側が限月列を残す */
.group { margin-top: var(--space-m); }
.group + .group { margin-top: var(--space-l); }
.group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
}
.group__head h3 { margin-top: 0; }
.group__month { flex: none; }

.group-totals {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-2xs);
  margin-top: var(--space-2xs);
  margin-bottom: var(--space-xs);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.tally {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3xs);
  white-space: nowrap;
}
.tally__key {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tally--call .tally__key { color: var(--color-up); }
.tally--put .tally__key { color: var(--color-down-strong); }
.tally__value {
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}
.tally__unit {
  margin-left: 0.0625rem;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: 0.75rem;
}
.tally__sep { color: var(--color-border-strong); }

/* 3〜4列の台帳。列幅の合計を抑え、右端の数値が表頭から遠く離れないようにする */
.teguchi-table,
.futures-table { table-layout: fixed; }
.teguchi-table :is(th, td):not(.num),
.futures-table :is(th, td):not(.num) {
  white-space: normal;
  word-break: auto-phrase;
}
.teguchi-table col.is-cp { width: 30%; }
.teguchi-table col.is-strike,
.teguchi-table col.is-volume { width: 35%; }
/* 限月列を残す日（複数限月が混在する日）の配分 */
.teguchi-table--month col.is-cp { width: 18%; }
.teguchi-table--month col.is-month { width: 32%; }
.teguchi-table--month col.is-strike,
.teguchi-table--month col.is-volume { width: 25%; }
.futures-table col.is-name { width: 58%; }
.futures-table col.is-volume { width: 42%; }

/* ---- 異常玉 --------------------------------------------------------------- */
.anomaly-list {
  list-style: none;
  margin-top: var(--space-xs);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
}
.anomaly-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
}
.anomaly-list > li + li { border-top: 1px solid var(--color-border-subtle); }
.anomaly__strike {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.anomaly__reason {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

/* ---- 直近アーカイブ（トップ） ----------------------------------------------- */
.archive-list {
  list-style: none;
  margin-top: var(--space-s);
  border-top: 1px solid var(--color-border-subtle);
}
.archive-list > li { border-bottom: 1px solid var(--color-border-subtle); }
.archive-list a {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-2xs);
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--easing),
    border-color var(--duration-fast) var(--easing);
}
.archive-list__date {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.archive-list__label {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}
@media (any-hover: hover) {
  .archive-list a:hover {
    background: var(--color-accent-surface);
    border-left-color: var(--color-accent);
  }
}
.archive-list a:active { border-left-color: var(--color-accent-strong); }

.recent p { margin-top: var(--space-s); }

/* ---- 日別アーカイブ一覧（/archive/） ---------------------------------------- */
.archive-table { table-layout: fixed; }
.archive-table col.is-date { width: 28%; }
.archive-table col.is-close { width: 27%; }
.archive-table col.is-change { width: 24%; }
.archive-table col.is-chart { width: 21%; }
.archive-table :is(th, td):not(.num) { white-space: normal; }

/* ---- 日別ページの前後ナビ --------------------------------------------------- */
.day-nav {
  margin-top: var(--rhythm-section);
  padding-top: var(--space-s);
  border-top: 1px dashed var(--color-border-strong);
}
/* ナビゲーションなので手口バブルのリストマーカーは付けない（クラス付きul） */
.day-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
  list-style: none;
  font-size: 0.875rem;
}

/* ---- 構造区分の解説（/etf/。表のタグからの着地点） --------------------------- */
.structure-notes { margin-top: var(--space-s); }
.structure-notes > div {
  padding: var(--space-2xs) var(--space-xs);
  border-left: 3px solid var(--color-border-subtle);
  scroll-margin-top: var(--space-2xl);
  transition:
    background-color var(--duration-base) var(--easing),
    border-color var(--duration-base) var(--easing);
}
.structure-notes > div + div { margin-top: var(--space-s); }
/* 表の構造区分タグから飛んできた項目を、着地したことが分かる形で示す */
.structure-notes > div:target {
  background: var(--color-accent-surface);
  border-left-color: var(--color-accent);
}
.structure-notes dt { font-weight: 700; }
.structure-notes dd {
  margin: var(--space-3xs) 0 0;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

/* ---- ETF一覧の台帳（9列） --------------------------------------------------- */
/* 列幅は「その列に入る最長の実データ」から設計する。合計100%＋min-widthで、
   収まらない画面では横スクロールし、コード列だけキー列として残す */
.etf-table {
  table-layout: fixed;
  min-width: 58rem;
  /* キー列を position: sticky で残すため、罫線は collapse せず各セルが自前で持つ。
     collapse したままだと固定セルの縦罫が描画されず、横スクロール中に
     下の列の文字と衝突して見える */
  border-collapse: separate;
  border-spacing: 0;
}
.etf-table :is(th, td) {
  padding: 0.5rem var(--space-2xs);
  vertical-align: top;
}
.etf-table :is(th, td):not(.num) {
  white-space: normal;
  word-break: auto-phrase;
}
.etf-table col.is-code { width: 9%; }
.etf-table col.is-name { width: 23%; }
.etf-table col.is-manager { width: 16%; }
.etf-table col.is-multiplier { width: 6%; }
.etf-table col.is-structure { width: 12%; }
.etf-table col.is-expense { width: 14%; }
.etf-table col.is-nisa-tsumitate { width: 8%; }
.etf-table col.is-nisa-growth { width: 7%; }
.etf-table col.is-source { width: 5%; }
/* キー列（コード）は横スクロール中も左端に残す。下の列の上に重なるので、
   縦罫は強い方の境界色で引いて「ここから先はスクロールしている」と分かる形にする */
.etf-table :is(th, td):first-child {
  position: sticky;
  left: 0;
  /* 表頭セルは position: relative を持つ（＝配置済み要素）ため、DOM順で後の列が
     固定セルの上に描かれる。固定セル側を1段持ち上げて確実に前面へ出す */
  z-index: 1;
  background: var(--color-bg-panel);
  border-right: 1px solid var(--color-border-strong);
}
.etf-table thead th:first-child { background: var(--color-bg-section-alt); }
.etf-table__code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0;
}
.etf-table__name { font-weight: 700; }
/* 構造区分は限月タグ型のプレートで出し、下の解説へ着地させる。
   狭い画面では列幅を越えないようプレートの中で折返す（列からはみ出させない） */
.etf-table .chip {
  font-size: 0.625rem;
  white-space: normal;
  word-break: auto-phrase;
}
@media (any-hover: hover) {
  /* 固定セルは行のhover面を覆うので、同じ面色を自分でも持つ */
  .etf-table tbody tr:hover > :first-child { background: var(--color-bg-section-alt); }
}

/* ---- データソース表（/about/） ---------------------------------------------- */
.source-table { table-layout: fixed; }
.source-table col.is-what { width: 44%; }
.source-table col.is-who { width: 34%; }
.source-table col.is-when { width: 22%; }
.source-table :is(th, td) { white-space: normal; word-break: auto-phrase; }

/* ---- 注記・データの読み方のかたまり ----------------------------------------- */
.data-notes ul { margin-top: var(--space-xs); }
.data-notes.callout > h2 { margin-bottom: var(--space-2xs); }

/* ---- サマリーJSON ---------------------------------------------------------- */
.download p {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
}
.download a { font-family: var(--font-mono); font-size: 0.875rem; }

/* ---- コラム（/column/・/column/{slug}/） ------------------------------------ */
/* 一覧: アーカイブ一覧（.archive-list）と同じ台帳の行罫＋左罫アクセントの文法 */
.column-list {
  list-style: none;
  margin-top: var(--space-s);
  border-top: 1px solid var(--color-border-subtle);
}
.column-list > li { border-bottom: 1px solid var(--color-border-subtle); }
.column-list a {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-s) var(--space-2xs);
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--easing),
    border-color var(--duration-fast) var(--easing);
}
@media (any-hover: hover) {
  .column-list a:hover {
    background: var(--color-accent-surface);
    border-left-color: var(--color-accent);
  }
}
.column-list a:active { border-left-color: var(--color-accent-strong); }
.column-list__date {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums lining-nums;
}
.column-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.column-list__title { font-weight: 700; }
.column-list__desc {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}
@media (min-width: 45rem) {          /* 720px */
  .column-list a {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-s);
  }
}

/* 記事: 節内のブロック間隔は一律（h2直後・表・注記を含む） */
.column-meta { margin-top: var(--space-xs); }
.column-article section > * + * { margin-top: var(--space-s); }
/* 記事内の表は本文向けの小さな台帳。文章セルは折返し、数値列だけ泣き別れを禁じる */
.column-article .table-wrap { max-width: var(--width-prose); }
.column-table :is(th, td) {
  white-space: normal;
  word-break: auto-phrase;
}
.column-table th.num,
.column-table td.num { white-space: nowrap; }
.column-cta { margin-top: var(--space-m); }
/* 記事末尾の一覧への戻り罫（日別ページの .day-nav と同じSQ点線の文法） */
.column-backnav {
  margin-top: var(--rhythm-section);
  padding-top: var(--space-s);
  border-top: 1px dashed var(--color-border-strong);
  font-size: 0.875rem;
}

/* ============================================================================
 * §12 フッター
 * ========================================================================== */

.site-footer {
  margin-top: var(--rhythm-section);
  background: var(--color-bg-section-alt);
  border-top: 1px solid var(--color-border-subtle);
}
.site-footer__inner { padding-block: var(--space-xl); }
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
  padding-bottom: var(--space-s);
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  font-size: 0.8125rem;
}
.site-footer__nav a {
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color var(--duration-base) var(--easing),
    border-color var(--duration-base) var(--easing);
}
@media (any-hover: hover) {
  .site-footer__nav a:hover {
    background: transparent;
    color: var(--color-text-primary);
    border-bottom-color: var(--color-accent);
  }
}
.site-footer__nav a:active { color: var(--color-accent-strong); }

/* ---- 更新告知（X） --------------------------------------------------------
   このサイトの主要な転換点（サク 2026-08-12決定）。チャート額の直後・記事末尾・
   フッターの3点へ同じ形で置く。面色＋1px境界で区切り、影は使わない。
   文面は更新頻度と投稿内容の事実だけを持つ（数値クレーム・煽りを書かない）。 */
.follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  margin-block: var(--rhythm-band);
  padding: var(--space-m);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-panel);
  background: var(--color-bg-panel);
}
.follow__id {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.follow__avatar { display: block; }
.follow__heading {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary);
  word-break: auto-phrase;
}
.follow__handle {
  margin-top: 0.125rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
}
/* モバイルは行が畳まれてボタンが宙に浮くため、フル幅の的にする。
   720px以上（横に並ぶ幅）で右端寄せへ戻す */
.follow__btn {
  flex-basis: 100%;
  white-space: nowrap;
}
.follow__note {
  flex-basis: 100%;
  max-width: var(--width-prose);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.8;
}
/* フッターは地が paper-2 なので、カードの白面がそのまま区切りになる */
.site-footer .follow { margin-block: var(--space-m); }

.disclaimer {
  margin-top: var(--space-s);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.85;
  max-width: var(--width-prose);
}
.disclaimer p + p { margin-top: var(--space-2xs); }
.copyright {
  margin-top: var(--space-m);
  /* SPEC-R2 §3 裁定: 読ませるテキストは secondary。note は ※記号のみ */
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

/* ============================================================================
 * §13 ブレークポイント（min-width のみ・720 / 1024 / 1280）
 * ========================================================================== */

@media (min-width: 45rem) {          /* 720px */
  :root {
    --gutter: var(--space-l);
    --rhythm-section: var(--space-3xl);
    --rhythm-band: var(--space-2xl);
  }
  body { font-size: 16px; }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.25rem; }

  .site-header__inner { padding-block: var(--space-xs); }
  .site-header__inner > .site-nav {
    order: 2;
    flex-basis: auto;
    margin-left: auto;
  }
  .site-header__inner > .site-header__fresh { order: 3; }
  /* 1段へ畳めるこの幅から告知チップを出す（最後尾） */
  .site-header__x {
    display: inline-flex;
    order: 4;
  }

  .follow__btn {
    flex-basis: auto;
    margin-left: auto;
  }

  .hero { padding-block: var(--space-2xl) var(--space-2xl); }
  .hero__title { font-size: 2rem; }
  .hero__lead { margin-top: var(--space-m); font-size: 1rem; }
  .hero__actions {
    gap: var(--space-xs);
    margin-top: var(--space-l);
  }
  .hero__actions .btn { flex: 0 0 auto; }

  .strip { margin-top: var(--space-2xl); }
  /* 5枚構成: 価格3枚（終値・年初来比・前年同日比）＋定点2枚（次回SQ日・異常玉）の
     3+2の2段で組む。この幅で5枚を1行に詰めると数値面が窮屈になるため1行にしない */
  .stat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-xs);
  }
  .stat-grid > .stat { grid-column: span 2; }
  .stat-grid > .stat:nth-child(4),
  .stat-grid > .stat:nth-child(5) { grid-column: span 3; }
  .stat { padding: var(--space-s) var(--space-s) var(--space-m); }
  .strip__source { text-align: right; }
  .stat__value { font-size: 1.625rem; }
  .stat__value--mono { font-size: 1.375rem; }

  .chart-frame { scroll-margin-top: var(--space-m); }
  .chart-frame__figure { margin-top: var(--space-m); }
  .chart-frame__stage { padding: var(--space-xs); }

  /* 列数の少ない台帳は、広い画面でも列幅の合計だけを占める。
     版面いっぱいに引き伸ばすと表頭と右端の数値が離れて読み取り単位が壊れる。
     見出し・限月タグ・合計も同じ幅に収め、点線罫が表の右端で終わるようにする */
  .group,
  .table-wrap:has(.teguchi-table) { max-width: 32rem; }
  .group:has(.teguchi-table--month),
  .table-wrap:has(.teguchi-table--month) { max-width: 38rem; }
  .futures .group-totals,
  .table-wrap:has(.futures-table) { max-width: 30rem; }
  .table-wrap:has(.archive-table) { max-width: 40rem; }

  .site-footer__inner { padding-block: var(--space-2xl); }
}

@media (min-width: 64rem) {          /* 1024px */
  :root { --gutter: var(--space-l); }

  /* 固定ヘッダーは DESIGN.md が影を許す唯一の浮上要素 */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--shadow-raised);
  }

  .hero { padding-block: var(--space-2xl) var(--space-xl); }
  .hero__title { font-size: 2.125rem; }

  /* 5枚を1行（約200px/枚）。終値→年初来比→前年同日比→SQ→異常玉を通しで読める */
  .stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stat-grid > .stat,
  .stat-grid > .stat:nth-child(4),
  .stat-grid > .stat:nth-child(5) { grid-column: auto; }

  .chart-frame { scroll-margin-top: var(--space-3xl); }
  .chart-frame__figure {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xl);
  }
  .chart-frame__stage { margin-inline: 0; }
  /* 9:16の縦長画像。高さ上限を視野基準で切り、原寸貼りで巨大化させない */
  .chart-frame__stage img {
    width: auto;
    height: auto;
    max-height: 78vh;
  }
  .chart-frame__notes {
    position: sticky;
    top: var(--space-3xl);
    max-width: 26rem;
  }
}

@media (min-width: 80rem) {          /* 1280px */
  :root { --gutter: var(--space-xl); }
  .hero__title { font-size: 2.125rem; }
}

/* ============================================================================
 * §14 モーションの配慮
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================================
 * §14 学術研究データベース（/research/）
 * ==========================================================================
 * 一覧は /etf/ の9列台帳と同じ骨格（page-header → 分類の入口 → colgroupで
 * 列幅を設計した横スクロール台帳 → 表の読み方）。研究側の固有性は
 * 「年で束ねる」「邦題と英題を読み分ける」「再現性と限界を色ではなく
 * 枠の強さで示す」の3点に置く。
 */

/* ---- パンくず ------------------------------------------------------------- */
.breadcrumb {
  padding-top: var(--space-m);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}
.breadcrumb__sep {
  margin-inline: var(--space-2xs);
  color: var(--color-text-note);
}
.breadcrumb + .page-header { padding-top: var(--space-xs); }

/* ---- カテゴリ別の入口 ------------------------------------------------------ */
.research-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-s);
  margin-top: var(--space-m);
}
.research-cats__label {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
}
.research-cats__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
}
/* 件数は限月タグの中の従属情報。ラベルとの間に薄い縦罫を入れて数と名前を分ける */
.chip__count {
  padding-left: var(--space-3xs);
  margin-left: var(--space-3xs);
  border-left: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
}

/* ---- 一覧台帳（6列） ------------------------------------------------------- */
/* h2 直下の1行解説。共通の .module-intro は見出しへ食い込む負マージンを持つので、
   台帳の前置きとしては見出しからの距離を戻す */
.research-cats + section .module-intro,
.research-table + .module-intro { margin-top: 0; }
section > h2 + .module-intro { margin-top: var(--space-2xs); }

.research-table {
  table-layout: fixed;
  min-width: 68rem;
  /* キー列（年）を sticky で残すため collapse しない（.etf-table と同じ理由） */
  border-collapse: separate;
  border-spacing: 0;
}
.research-table :is(th, td) {
  padding: var(--space-2xs);
  vertical-align: top;
  white-space: normal;
  word-break: auto-phrase;
}
.research-table col.is-year { width: 5%; }
.research-table col.is-title { width: 35%; }
.research-table col.is-category { width: 15%; }
.research-table col.is-market { width: 7%; }
.research-table col.is-period { width: 11%; }
.research-table col.is-replication { width: 11%; }
.research-table col.is-caveats { width: 16%; }
.research-table :is(th, td):first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-bg-panel);
  border-right: 1px solid var(--color-border-strong);
}
.research-table thead th:first-child { background: var(--color-bg-section-alt); }

/* 年が変わる行の上に強い罫を引き、年の束を作る。同じ年の行は年を繰り返さないので、
   この罫が「ここから下は別の年」を示す唯一の手がかりになる */
.research-table tbody tr.is-year-start > * { border-top: 1px solid var(--color-border-strong); }
.research-table__year {
  font-size: 0.875rem;
  font-weight: 700;
}

/* 邦題＝読む見出し（墨・太字）／英題＝同定用の原題（淡・小・等幅寄りの英文）。
   邦題が無い研究は英題そのものが見出しになるので、二重に出さない */
.research-table__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
}
.research-table__title--en {
  font-size: 0.875rem;
  line-height: 1.45;
}
.research-table__en {
  display: block;
  margin-top: 0.125rem;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.45;
}
.research-table__by {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--color-text-note);
  font-size: 0.75rem;
  line-height: 1.5;
}
.research-table__venue { margin-left: 0.25em; }
.research-table__period {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
/* カテゴリは限月タグ型のプレート。列幅を越えないようプレートの中で折返す。
   td自体をflexにすると表の列レイアウトから外れて隣の列へはみ出すので、
   セルは通常のブロック流のままプレート側をinline-blockで並べる */
.research-table__cats .chip {
  margin: 0 var(--space-3xs) var(--space-3xs) 0;
  max-width: 100%;
  font-size: 0.625rem;
  white-space: normal;
  /* 文節折返しが効かない長いカタカナ語（市場マイクロストラクチャー等）でも
     固定幅の列からはみ出させない */
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.research-table__caveats,
.research-table__market {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
/* 限界は1件1行。連ねて書くと固定幅の列で折返し位置が作れず、読みにも残らない */
.research-table__caveats > span { display: block; }
@media (any-hover: hover) {
  /* 固定セルは行のhover面を覆うので、同じ面色を自分でも持つ（.etf-table と同じ） */
  .research-table tbody tr:hover > :first-child { background: var(--color-bg-section-alt); }
}

/* ---- 対象市場 -------------------------------------------------------------- */
/* 日本の読者にとって「日本を含むか」が最初のスキャン軸。JPだけ墨の太字にし、
   他は淡字のまま。色は足さない（赤緑は騰落・CALL/PUT専用） */
.mkt--jp {
  color: var(--color-text-primary);
  font-weight: 700;
}
.mkt__sep { color: var(--color-border-strong); }

/* ---- 詳細ページ ------------------------------------------------------------ */
.research-paper { padding-bottom: var(--space-3xl); }
/* 詳細は「上から下へ一息に読ませる」記事なので、共通の節リズム（64px）より詰める。
   判定台帳は表題ブロックの続きなので、節の間隔ではなく行間の距離で置く */
.research-paper > section + section { margin-top: var(--space-xl); }
.research-paper > .paper-facts { margin-top: var(--space-s); }
.research-paper > .prose { max-width: var(--width-prose); }

.paper-head {
  max-width: var(--width-prose);
  padding-block: var(--space-xs) var(--space-m);
}
.paper-head h1 { font-size: 1.75rem; }
.paper-head__en {
  margin-top: var(--space-2xs);
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}
.paper-head__cite {
  margin-top: var(--space-xs);
  color: var(--color-text-note);
  font-size: 0.8125rem;
  line-height: 1.7;
}
.paper-head__venue { white-space: nowrap; }
.paper-head__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-s);
}
.chip--source { font-size: 0.75rem; }

/* 判定台帳。ファーストビューで「どの標本か」「日本で使えると断定できるか」を
   読み切らせる。チャート額と同じ白面＋1px境界で、本文と別の器であることを示す */
.paper-facts {
  max-width: var(--width-prose);
  margin-top: var(--space-s);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
  background: var(--color-bg-panel);
}
.paper-facts__grid {
  display: grid;
  grid-template-columns: 1fr;
}
.paper-facts__grid > div {
  display: grid;
  gap: var(--space-3xs) var(--space-s);
  padding: var(--space-2xs) var(--space-s);
  border-bottom: 1px solid var(--color-border-subtle);
}
.paper-facts dt {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
}
.paper-facts dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  word-break: auto-phrase;
}

/* 判定の2行だけは注記まで含めて1つの読み取り単位。台帳の下段として淡地に落とし、
   上段（事実）と下段（当サイトの判定）を面色で分ける */
.paper-verdicts {
  background: var(--color-bg-section-alt);
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}
.paper-verdicts > div {
  display: grid;
  gap: var(--space-3xs) var(--space-s);
  padding: var(--space-xs) var(--space-s);
}
.paper-verdicts > div + div { border-top: 1px dashed var(--color-border-sq); }
.paper-verdicts dt {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
}
.paper-verdicts dd { margin: 0; }
.paper-verdicts__note {
  display: block;
  margin-top: var(--space-3xs);
  font-size: 0.8125rem;
  line-height: 1.8;
  word-break: auto-phrase;
}

/* 自前要約は本文の中で最も読ませたい段落。行長は版面が持ち、行間だけ上げる */
.paper-summary {
  margin-top: var(--space-s);
  font-size: 1rem;
  line-height: 2;
  word-break: auto-phrase;
}

/* ---- 観測結果 -------------------------------------------------------------- */
.finding + .finding { margin-top: var(--space-l); }
.finding > p { margin-top: var(--space-2xs); }
.finding__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.875rem;
}
.finding__key {
  padding: 0.0625rem var(--space-3xs);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-chip);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}
.finding__basis { color: var(--color-text-note); font-size: 0.75rem; }
.finding__note {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.9;
  word-break: auto-phrase;
}

/* ---- 追試の根拠 ------------------------------------------------------------ */
.research-evidence {
  list-style: none;
  padding: 0;
  margin-top: var(--space-s);
}
.research-evidence > li {
  padding: var(--space-xs) 0 var(--space-xs) var(--space-s);
  border-left: 3px solid var(--color-border-subtle);
}
.research-evidence > li + li { margin-top: var(--space-2xs); }
.research-evidence__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}
.research-evidence__note {
  display: block;
  margin-top: var(--space-3xs);
  font-size: 0.875rem;
  line-height: 1.8;
  word-break: auto-phrase;
}
.research-evidence__link {
  display: inline-block;
  margin-top: var(--space-3xs);
  font-size: 0.8125rem;
}

/* ---- 限界タグ -------------------------------------------------------------- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
  margin-top: var(--space-s);
}
.tag-list li {
  padding: 0.125rem var(--space-2xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-chip);
  background: var(--color-bg-panel);
  font-size: 0.8125rem;
}

/* ---- 原典・利用条件 --------------------------------------------------------- */
.paper-sources {
  list-style: none;
  padding: 0;
  margin-top: var(--space-s);
}
.paper-sources > li + li { margin-top: var(--space-2xs); }
/* URLは同定のための一次情報なので隠さず全部出す。長いURLは折り返して版面から出さない */
.paper-sources__url {
  display: block;
  color: var(--color-text-note);
  font-size: 0.75rem;
  line-height: 1.5;
  word-break: break-all;
}
.paper-meta {
  margin-top: var(--space-m);
  border-top: 1px dashed var(--color-border-sq);
}
.paper-meta > div {
  display: grid;
  gap: var(--space-3xs) var(--space-s);
  padding: var(--space-3xs) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.paper-meta dt {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}
.paper-meta dd {
  margin: 0;
  font-size: 0.8125rem;
  word-break: break-all;
}

.research-disclaimer {
  display: block;
  max-width: var(--width-prose);
  margin-top: var(--space-xl);
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-surface);
  padding: var(--space-s) var(--space-m);
  font-size: 0.875rem;
}

/* 定義リストは既定で縦積み（モバイルファースト。DESIGN.md §5 は min-width のみ）。
   ラベル列を置ける幅になってから2列組みへ切り替える */
@media (min-width: 40rem) {
  .paper-facts__grid > div,
  .paper-verdicts > div { grid-template-columns: 8.5rem 1fr; }
  .paper-meta > div { grid-template-columns: 11rem 1fr; }
}

/* 初心者向け研究解説。読み物と構造化ファクトを視覚的に分ける。 */
.explainer-lead {
  margin-top: var(--space-l);
  padding: var(--space-m) var(--space-l);
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-panel);
}
.explainer-lead__label {
  margin: 0 0 var(--space-xs);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.explainer-lead > p:last-child { margin: 0; font-size: 1.125rem; line-height: 1.8; }
.explainer__section { padding-block: var(--space-m); border-top: 1px solid var(--color-border-subtle); }
.explainer__section:first-of-type { border-top: 0; }
.explainer__section h3 { margin-bottom: var(--space-xs); }
.explainer__section p { margin: 0; line-height: 1.95; }
.glossary { margin-top: var(--space-l); padding: var(--space-m); background: var(--color-bg-panel); }
.glossary h3 { margin-top: 0; }
.glossary dl { margin: 0; }
.glossary dl > div { display: grid; grid-template-columns: 1fr; gap: var(--space-3xs); padding-block: var(--space-xs); border-top: 1px solid var(--color-border-subtle); }
.glossary dt { font-weight: 700; }
.glossary dd { margin: 0; }
@media (min-width: 40rem) {
  .glossary dl > div { grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--space-s); }
}

/* ---- 研究解説図（docs/SPEC-RESEARCH-DIAGRAM.md） ---------------------------
   図は装飾ではなく「何と何を比べたか」「その差が利益からどれだけ遠いか」を
   一目で渡す器。実テキストのみで構成し、面積・棒長で大きさを暗示しない。
   モバイル先行で縦積みを既定とし、横並びは 40rem 以上でのみ与える。 */
.rdiag { max-width: var(--width-prose); }
.rdiag__h { margin: 0 0 var(--space-s); font-size: 1.125rem; }
.rdiag__fig {
  margin: 0;
  padding: var(--space-m) var(--space-s);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
  background: var(--color-bg-panel);
}
.rdiag__badges { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.rdiag__badge {
  padding: 2px var(--space-2xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-chip);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: nowrap;
}
/* 数値の有無はバッジの語で区別し、色は補助にとどめる */
.rdiag__badge--kind { border-color: var(--color-text-note); }
.rdiag__badge--quant {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-surface);
  color: var(--color-text-on-accent);
  font-weight: 700;
}
.rdiag__badge--dir { border-style: dashed; }
.rdiag__lead {
  margin: var(--space-xs) 0 var(--space-m);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
  word-break: auto-phrase;
}
.rdiag__foot {
  margin: var(--space-s) 0 0;
  color: var(--color-text-note);
  font-size: 0.75rem;
  line-height: 1.8;
}
.rdiag__cap {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px dashed var(--color-border-sq);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.9;
}

/* 群の比較。等サイズ2枠＋中央ラベル。枠の面積差で大きさを暗示しない */
.rdiag-groups { display: grid; grid-template-columns: 1fr; gap: var(--space-2xs); }
.rdiag-group {
  padding: var(--space-s);
  border: 1px solid var(--color-border-subtle);
  border-top: 3px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-bg-page);
}
.rdiag-group--up { border-top-color: var(--color-up); }
.rdiag-group--down { border-top-color: var(--color-down); }
.rdiag-group__name { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.rdiag-group__made {
  margin: var(--space-3xs) 0 var(--space-2xs);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.8;
}
.rdiag-group__out {
  margin: 0;
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.8125rem;
  line-height: 1.8;
}
.rdiag-group__arrow { margin-right: var(--space-3xs); font-size: 0.875rem; }
.rdiag-group--up .rdiag-group__arrow { color: var(--color-up-strong); }
.rdiag-group--down .rdiag-group__arrow { color: var(--color-down-strong); }
.rdiag-groups__vs {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  color: var(--color-text-note);
  font-size: 0.75rem;
  line-height: 1.7;
}
.rdiag-groups__vsline {
  flex: 0 0 var(--space-s);
  height: 1px;
  background: var(--color-border-strong);
}

/* 検定の絞り込み。棒長はYAML掲載値の比率にのみ対応する */
.rdiag-funnel { margin: 0; padding: 0; list-style: none; }
.rdiag-funnel__step + .rdiag-funnel__step {
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-border-subtle);
}
.rdiag-funnel__label { margin: 0; font-size: 0.8125rem; line-height: 1.8; word-break: auto-phrase; }
.rdiag-funnel__bar {
  margin: var(--space-2xs) 0;
  height: 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-chip);
  background: var(--color-bg-section-alt);
  overflow: hidden;
}
.rdiag-funnel__fill { display: block; height: 100%; background: var(--color-border-strong); }
.rdiag-funnel__step--base .rdiag-funnel__fill { background: var(--color-text-note); }
.rdiag-funnel__step--cut .rdiag-funnel__fill { background: var(--color-down); }
.rdiag-funnel__val {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-2xs);
  margin: 0;
  font-size: 0.8125rem;
}
.rdiag-funnel__num { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 700; }
.rdiag-funnel__share { color: var(--color-text-note); font-size: 0.75rem; }

/* 前後の対比（時系列）。段の幅は等しく、経過時間を表さない */
.rdiag-time { margin: 0; padding: 0 0 0 var(--space-s); list-style: none; border-left: 2px solid var(--color-border-subtle); }
.rdiag-time__step { position: relative; padding-bottom: var(--space-s); }
.rdiag-time__step:last-child { padding-bottom: 0; }
.rdiag-time__step::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-s) - 5px);
  top: 6px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-bg-panel);
  border-radius: var(--radius-bubble);
  background: var(--color-border-strong);
}
.rdiag-time__step--event::before { background: var(--color-accent-strong); }
.rdiag-time__step--up::before { background: var(--color-up); }
.rdiag-time__step--down::before { background: var(--color-down); }
.rdiag-time__t {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-2xs);
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
}
.rdiag-time__mark {
  padding: 1px var(--space-3xs);
  border: 1px solid currentColor;
  border-radius: var(--radius-chip);
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
}
.rdiag-time__step--event .rdiag-time__mark { color: var(--color-accent-strong); }
.rdiag-time__step--up .rdiag-time__mark { color: var(--color-up-strong); }
.rdiag-time__step--down .rdiag-time__mark { color: var(--color-down-strong); }
.rdiag-time__body {
  margin: var(--space-3xs) 0 0;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.85;
}

/* 前後の対比（補正前後）。2枠は等サイズ */
.rdiag-pair { display: grid; grid-template-columns: 1fr; gap: var(--space-2xs); }
.rdiag-pair__box {
  padding: var(--space-s);
  border: 1px solid var(--color-border-subtle);
  border-top: 3px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-bg-page);
}
.rdiag-pair__box--down { border-top-color: var(--color-down); }
.rdiag-pair__t { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.rdiag-pair__body {
  margin: var(--space-3xs) 0 var(--space-2xs);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.8;
}
.rdiag-pair__val {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  margin: 0;
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--color-border-subtle);
}
.rdiag-pair__key { color: var(--color-text-note); font-size: 0.75rem; font-weight: 700; }
.rdiag-pair__num { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; }
.rdiag-pair__read {
  margin: var(--space-3xs) 0 0;
  font-size: 0.8125rem;
  line-height: 1.8;
}
.rdiag-pair__arrow {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  margin: 0;
  color: var(--color-text-note);
  font-size: 0.75rem;
}

/* 仕組みの経路。原因→処理→帰結の連鎖を2レーン並置する */
.rdiag-mech { display: grid; grid-template-columns: 1fr; gap: var(--space-s); }
.rdiag-mech__lane {
  padding: var(--space-s);
  border: 1px solid var(--color-border-subtle);
  border-top: 3px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-bg-page);
}
.rdiag-mech__lane--up { border-top-color: var(--color-up); }
.rdiag-mech__lane--down { border-top-color: var(--color-down); }
.rdiag-mech__name { margin: 0 0 var(--space-2xs); font-size: 0.9375rem; font-weight: 700; line-height: 1.6; }
.rdiag-mech__chain { margin: 0; padding: 0; list-style: none; counter-reset: rdiag-mech; }
.rdiag-mech__node {
  position: relative;
  padding-left: var(--space-m);
  font-size: 0.8125rem;
  line-height: 1.8;
  counter-increment: rdiag-mech;
}
.rdiag-mech__node + .rdiag-mech__node { margin-top: var(--space-2xs); }
.rdiag-mech__node::before {
  content: counter(rdiag-mech);
  position: absolute;
  left: 0;
  top: 2px;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-bubble);
  color: var(--color-text-note);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.125rem;
  text-align: center;
}
.rdiag-mech__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
  margin: var(--space-2xs) 0 0;
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.875rem;
  font-weight: 700;
}
.rdiag-mech__vkey {
  color: var(--color-text-note);
  font-size: 0.75rem;
  font-weight: 700;
}
.rdiag-mech__lane--up .rdiag-mech__verdict { color: var(--color-up-strong); }
.rdiag-mech__lane--down .rdiag-mech__verdict { color: var(--color-down-strong); }

/* 利益への距離（4ゲート）。合成スコアにせず、独立した4つの関門として並べる。
   状態は色・記号・語の3重で示し、色だけに依存させない */
.rgate {
  margin-top: var(--space-m);
  padding: var(--space-s);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
  background: var(--color-bg-section-alt);
}
.rgate__title {
  margin: 0 0 var(--space-2xs);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.rgate__list { margin: 0; }
.rgate__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xs);
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-2xs);
  border-top: 1px solid var(--color-border-subtle);
  border-left: 3px solid var(--color-border-strong);
}
.rgate__row--supported { border-left-color: var(--color-up); }
.rgate__row--limited { border-left-color: var(--color-accent); }
.rgate__row--not_tested,
.rgate__row--not_applicable { border-left-color: var(--color-border-strong); }
.rgate__row--unsupported { border-left-color: var(--color-down); }
.rgate__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-size: 0.875rem;
  font-weight: 700;
}
.rgate__step {
  flex: none;
  color: var(--color-text-note);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.rgate__body { margin: 0; }
.rgate__state {
  display: flex;
  align-items: baseline;
  gap: var(--space-3xs);
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
}
.rgate__mark { font-size: 0.875rem; }
.rgate__row--supported .rgate__state { color: var(--color-up-strong); }
.rgate__row--limited .rgate__state { color: var(--color-accent-strong); }
.rgate__row--not_tested .rgate__state,
.rgate__row--not_applicable .rgate__state { color: var(--color-text-secondary); }
.rgate__row--unsupported .rgate__state { color: var(--color-down-strong); }
.rgate__why {
  margin: var(--space-3xs) 0 0;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.85;
  word-break: auto-phrase;
}
.rgate__frame {
  margin: var(--space-s) 0 0;
  padding-top: var(--space-2xs);
  border-top: 1px dashed var(--color-border-sq);
  color: var(--color-text-note);
  font-size: 0.75rem;
  line-height: 1.8;
}

@media (min-width: 40rem) {
  .rdiag__fig { padding: var(--space-m) var(--space-l); }
  /* 尺度が「方向のみ」でも「数値あり」でも、比較枠は常に等サイズ（1fr auto 1fr） */
  .rdiag-groups,
  .rdiag-pair {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: var(--space-s);
  }
  .rdiag-groups__vs,
  .rdiag-pair__arrow {
    flex-direction: column;
    justify-content: center;
    max-width: 7rem;
    text-align: center;
  }
  .rdiag-groups__vsline { flex: none; width: 100%; }
  .rdiag-mech { grid-template-columns: 1fr 1fr; gap: var(--space-s); }
  .rdiag-funnel__val { gap: var(--space-2xs); }
  .rgate__row {
    grid-template-columns: minmax(7rem, 10rem) 1fr;
    gap: var(--space-s);
    padding-block: var(--space-xs);
  }
  .rgate__label { align-items: baseline; }
}