/* ============================================================
   components.css — 本文コンポーネントの「単一の正」
   ------------------------------------------------------------
   読み込み順： style.css  →  components.css
   （章ローカルの <style> は、ここに無いものだけを書く）

   ★ このファイルの最重要ルール ★
   本文の箱は「役割トークン(--role-*)」だけを使う。
   章テーマ色(--theme-*)を本文の箱で参照してはいけない。
   ============================================================ */


/* ============================================================
   0. 欠けていたトークンの補完
   （--gray-600 は全10章 161箇所で使われていたが未定義だった。
     未定義の var() は「無効」になり、色指定そのものが消えていた）
   ============================================================ */
:root {
  --gray-800: #1f2937;
  --gray-600: #4b5563;   /* 補足文字。本文(--gray-900)より一段淡い */
  --gray-400: #9ca3af;

  --amber-100: #fdefd6;
  --amber-800: #6b3f07;
  --amber-900: #4a2b05;
  --coral-200: #e7a98f;
  --purple-200: #c7c3f0;
  --green-200: #86efac;
}


/* ------------------------------------------------------------
   アンカーの着地位置
   サイトヘッダーが position:sticky で 58px 居座るので、
   #id で飛ぶとその分だけ見出しが隠れる。飛び先に余白を持たせる。
   ------------------------------------------------------------ */
:target {
  scroll-margin-top: calc(var(--header-h) + 1.25rem);
}


/* ============================================================
   1. タイポグラフィ・スケール
   （旧：inline style で 0.72〜1.4rem の20段階が乱立していた。
     本文サイズは 3段階だけに固定する）
   ============================================================ */
:root {
  --fs-body: 0.95rem;   /* 本文・箱の中の本文 */
  --fs-sm:   0.86rem;   /* 補足・注記・箇条書きの下位 */
  --fs-xs:   0.78rem;   /* ラベル・キャプション・軸ラベル */

  --lh-body:  1.9;      /* 地の文 */
  --lh-box:   1.8;      /* 箱の中 */
  --lh-tight: 1.6;      /* キャプション・見出し */

  /* 余白のリズム */
  --space-block: 1.5rem;   /* 箱の前後（地の文とのあいだ） */
  --space-stack: 0.75rem;  /* 箱と箱が連続するとき（＝1つの塊に見せる） */
}


/* ============================================================
   2. 役割トークン（意味に固定。章が変わっても絶対に変えない）
   ============================================================ */
:root {
  /* 具体例：無彩色。最頻出なので主張させない */
  --role-example-bg: var(--gray-50);
  --role-example-bd: var(--gray-200);
  --role-example-tx: var(--gray-600);

  /* 公式：紫。第1章でも第10章でも紫 */
  --role-formula-bg: #f5f4fe;
  --role-formula-bd: var(--purple-200);
  --role-formula-tx: var(--purple-700);

  /* 定義・用語・まとめ：ティール */
  --role-def-bg: var(--teal-50);
  --role-def-bd: var(--teal-700);
  --role-def-tx: var(--teal-700);

  /* 注意・誤り：アンバー */
  --role-warn-bg: var(--amber-50);
  --role-warn-bd: var(--amber-700);
  --role-warn-tx: var(--amber-800);

  /* 補足・コラム：無彩色・塗りなし（いちばん軽い箱） */
  --role-note-bd: var(--gray-300);
  --role-note-tx: var(--gray-600);

  /* 持ち帰り（結論）：グリーン */
  --role-take-bg: #f2fdf6;
  --role-take-bd: var(--green-200);
  --role-take-tx: #15803d;

  /* 練習問題：コーラル */
  --role-quiz: var(--coral-700);
}


/* ============================================================
   3. 章テーマ色
   ------------------------------------------------------------
   <body class="theme-coral"> のように1回だけ宣言する。
   章ローカル <style> での色上書きは全廃する。

   テーマ色を使ってよい場所（＝本文の外側だけ）：
     chapter-hero / chapter-tag / section-num / h3.subsection の左線
     sidebar の active / motivation の見出し / sec-ref / xref
   使ってはいけない場所：
     本文中のすべての箱・図・表・強調
   ============================================================ */
body                { --theme-50: var(--teal-50);   --theme-700: var(--teal-700);   --theme-800: var(--teal-800);  --theme-bd: var(--teal-200); }
body.theme-teal     { --theme-50: var(--teal-50);   --theme-700: var(--teal-700);   --theme-800: var(--teal-800);  --theme-bd: var(--teal-200); }
body.theme-green    { --theme-50: var(--green-50);  --theme-700: var(--green-700);  --theme-800: var(--green-700); --theme-bd: #b9d99a; }
body.theme-purple   { --theme-50: var(--purple-50); --theme-700: var(--purple-700); --theme-800: var(--purple-800);--theme-bd: var(--purple-200); }
body.theme-coral    { --theme-50: var(--coral-50);  --theme-700: var(--coral-700);  --theme-800: var(--coral-800); --theme-bd: var(--coral-200); }
/* 番外編（電卓ページ）用。章の STEP には含まれない */
body.theme-amber    { --theme-50: #fffbeb;           --theme-700: #b45309;           --theme-800: #92400e;         --theme-bd: #fcd34d; }

/* テーマ色を受ける要素は、章ごとの上書きなしでこの1本だけで足りる */
body[class*="theme-"] .chapter-hero   { background: linear-gradient(135deg, var(--theme-50) 0%, var(--white) 70%); }
body[class*="theme-"] .chapter-tag    { background: var(--theme-700); color: var(--white); }
body[class*="theme-"] .section-num    { background: var(--theme-700); }
body[class*="theme-"] h3.subsection   { border-left-color: var(--theme-700); }
body[class*="theme-"] .sidebar-nav a.active { background: var(--theme-50); color: var(--theme-800); }
body[class*="theme-"] .topic-tag      { border-color: var(--theme-bd); color: var(--theme-800); }
body[class*="theme-"] .sec-ref        { background: var(--theme-700); }
body[class*="theme-"] .motiv-headline { color: var(--theme-800); }

/* 章をまたぐ参照リンク（本文の「第2章」→ 第2章の該当セクションへ飛ぶ）。
   sec-ref と同じくナビゲーション部品なので、章テーマ色を使ってよい。 */
.xref { color: var(--theme-700); text-decoration: underline; text-underline-offset: 0.15em; font-weight: 700; }
.xref:hover { text-decoration-thickness: 2px; }


/* ============================================================
   4. 地の文（囲まない）── これがデフォルト
   ============================================================ */
.chapter-main p            { font-size: var(--fs-body); line-height: var(--lh-body); }
.chapter-main p + p        { margin-top: 0.9rem; }
.chapter-main ul,
.chapter-main ol           { font-size: var(--fs-body); line-height: var(--lh-body); margin-left: 1.15rem; }
.chapter-main li + li      { margin-top: 0.3rem; }

/* 補足文字：地の文の中で一段落とす */
.sub { color: var(--gray-600); font-size: var(--fs-sm); }

/* 初出の専門用語：この場で定義したことを示す */
.term {
  font-weight: 700;
  border-bottom: 2px dotted var(--role-def-bd);
  padding-bottom: 1px;
}

/* 本文中の強調ハイライト（使いすぎ注意：1段落に1つまで） */
.hl {
  background: linear-gradient(transparent 62%, #fde68a 62%);
  font-weight: 700;
}

/* セクション冒頭の橋渡し文（「なぜ今これをやるか」を1〜2文）
   ＝「今どこにいるか」を毎セクション示すための定位置 */
.lead {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--gray-700);
  border-left: 3px solid var(--gray-200);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

/* アイコン（Lucide の線画。/images/icons.svg から <use> で呼ぶ）
   色は周りの文字色を継ぐ。置き換えは _tools/emoji_icons.py
   ⚠️ ✅ ❌ 🌟 ⭐ と色の丸は絵文字のまま
   各章の図用の指定（.chapter-main svg { height:auto } や
   .vs-card svg { width:100%; display:block } など）に負けないよう、
   大きさと配置だけ !important にしている */
svg.lc {
  display: inline-block !important;
  width: 1.1em !important; height: 1.1em !important;
  max-width: none !important; margin: 0 !important;
  vertical-align: -0.18em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.insight-icon { color: var(--role-take-tx); }


/* ============================================================
   5. 箱 ── 7種類だけ
   ------------------------------------------------------------
   形で系統を分ける：
     全周枠 ＝「まとまり」（example / formula / insight）
     左線   ＝「短い注記」（def / warn / note）
   ============================================================ */

/* --- 共通の余白リズム --------------------------------------- */
:is(.example-box,.formula-box,.def-box,.key-box,.warn-box,.note,.insight,
    .figure,.viz-wrap,.sim,.demo-box,.compare,.data-table,.quiz-list) {
  margin: var(--space-block) 0;
}
/* 箱が連続するときは詰める（＝1つの塊として読ませる） */
:is(.example-box,.formula-box,.def-box,.key-box,.warn-box,.note,.insight,
    .figure,.viz-wrap,.sim,.demo-box,.compare)
+ :is(.example-box,.formula-box,.def-box,.key-box,.warn-box,.note,.insight,
    .figure,.viz-wrap,.sim,.demo-box,.compare) {
  margin-top: var(--space-stack);
}

/* 箱の中の文字は一律この設定（inline style を書かないで済むように） */
:is(.example-box,.formula-box,.def-box,.key-box,.warn-box,.note,.insight) :is(p,li) {
  font-size: var(--fs-sm);
  line-height: var(--lh-box);
}
:is(.example-box,.def-box,.key-box,.warn-box,.note,.insight) > :last-child { margin-bottom: 0; }

/* 箱以外の「入れ物」の中の文字も、地の文より一段小さくそろえる。
   （inline style で font-size を書かなくて済むようにするための受け皿） */
:is(.figure,.viz-wrap,.sim,.demo-box,.compare,.deriv-content,.quiz-answer) :is(p,li) {
  font-size: var(--fs-sm);
  line-height: var(--lh-box);
}
:is(.figure,.viz-wrap) > p { text-align: left; }

/* 箱のタイトル行の共通形 */
.box-title {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: var(--lh-tight);
  margin-bottom: 0.5rem;
  /* text-transform: uppercase は禁止：μ→Μ、n→N と数式記号が化けるため */
}
.box-title mjx-container { letter-spacing: normal; }


/* --- 5-1. 具体例 ------------------------------------------- */
/*   いつ： 数字の入った具体例・計算例・場面設定
     アイコン： 内容に合わせて自由（coins vote stethoscope …）＝ここだけは自由でよい */
.example-box {
  background: var(--role-example-bg);
  border: 1px solid var(--role-example-bd);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.4rem;
}
.example-box-header, .example-box .box-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
  color: var(--role-example-tx);
  margin-bottom: 0.55rem;
}
.example-box-header .icon { font-size: 1rem; }
.example-box-header mjx-container { letter-spacing: normal; text-transform: none; }


/* --- 5-2. 公式 --------------------------------------------- */
/*   いつ： 覚えて使う式。★色は常に紫。章テーマで変えない★
     アイコン： なし（ラベルは「公式」または式の名前）                 */
.formula-box {
  background: var(--role-formula-bg);
  border: 1px solid var(--role-formula-bd);
  border-radius: var(--radius-sm);
  padding: 1.2rem 1.4rem;
  text-align: center;
  font-size: 1.05rem;
  overflow-x: auto;
}
/* 公式の下の説明文は左揃え（中央揃えのまま折り返すと読みにくい） */
.formula-box p,
.formula-box .formula-note { text-align: left; }
.formula-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--role-formula-tx);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  text-align: left;
}
/* uppercase 禁止の恒久対策：ラベル類はすべて明示的に打ち消す。
   （n→N、μ→Μ と数式記号が化けるため。章ごとの上書きはこれで不要になる） */
:is(.box-title,.formula-label,.def-box-title,.key-box-title,.warn-box-title,
    .note-title,.example-box-header,.sim-title,.demo-box-title,.answer-label,
    .sidebar-chapter-title,.figure-cap,.viz-cap) {
  text-transform: none;
}


/* ラベルを付けずに式だけを大きく見せたいとき（旧 .big-formula）。
   色は公式と同じ紫。章テーマでは変えない */
.big-formula {
  text-align: center;
  padding: 1rem 1.5rem;
  background: var(--role-formula-bg);
  border: 1px solid var(--role-formula-bd);
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  overflow-x: auto;
}
.big-formula p { text-align: left; }


/* --- 5-3. 導出（公式ボックスの中に畳む） -------------------- */
/*   いつ： 「なぜその式になるか」。読まなくても先へ進める内容        */
.deriv-toggle {
  width: 100%; margin-top: 0.9rem; padding: 0.6rem 1rem;
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--role-formula-bd);
  border-radius: var(--radius-sm);
  color: var(--purple-800);
  font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  transition: background 0.15s;
}
.deriv-toggle:hover { background: var(--white); }
.deriv-arrow { transition: transform 0.2s; font-size: 0.75rem; }
.deriv-toggle[aria-expanded="true"] .deriv-arrow,
.deriv-toggle.open .deriv-arrow { transform: rotate(180deg); }

.deriv-content {
  display: none;
  text-align: left;
  margin-top: 0.75rem;
  padding: 1rem 1.15rem;
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--role-formula-bd);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-box);
}
.deriv-content.open { display: block; }
.deriv-h {
  font-weight: 800; color: var(--purple-800);
  font-size: var(--fs-sm); margin: 0.9rem 0 0.3rem;
}
.deriv-h:first-child { margin-top: 0; }
.deriv-step { margin: 0.35rem 0 0.35rem 0.2rem; }
/* 導出の中に置く図 */
.deriv-svg-wrap { text-align: center; margin: 0.75rem 0; }
.deriv-svg-wrap > p { text-align: left; }
.deriv-svg { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
.deriv-svg-caption {
  font-size: var(--fs-xs); color: var(--gray-600);
  line-height: var(--lh-tight); margin-top: 0.4rem; text-align: left;
}

/* 導出の最後に置く「で、結局なにを言ったか」の一文 */
.deriv-intuition {
  margin-top: 0.9rem; padding: 0.7rem 0.9rem;
  background: var(--role-take-bg);
  border-left: 3px solid var(--role-take-bd);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm);
}


/* --- 5-4. 定義・用語・まとめ -------------------------------- */
/*   いつ： 読者が「後で参照しに戻ってくる」もの
       アイコン book-open：定義：／用語：／記号の約束
       アイコン map：まとめ：／対応表
     使わない： 「重要だから」という理由。覚え方・目安・直感は地の文へ  */
.def-box, .key-box {                 /* .key-box は旧名。当面のエイリアス */
  background: var(--role-def-bg);
  border-left: 4px solid var(--role-def-bd);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.95rem 1.2rem;
}
.def-box-title, .key-box-title {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--role-def-tx);
  letter-spacing: 0.04em;
  line-height: var(--lh-tight);
  margin-bottom: 0.4rem;
}


/* --- 5-5. 注意・誤り ---------------------------------------- */
/*   いつ： 読者が間違えやすい／誤読すると害があること だけ
     絵文字： ⚠️ に固定
     使わない： 単なる補足・コラム（→ .note へ）                     */
.warn-box {
  background: var(--role-warn-bg);
  border-left: 4px solid var(--role-warn-bd);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.95rem 1.2rem;
}
.warn-box-title {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--role-warn-tx);
  letter-spacing: 0.04em;
  line-height: var(--lh-tight);
  margin-bottom: 0.4rem;
}


/* --- 5-6. 補足・コラム（★新設：いちばん軽い箱） ------------- */
/*   いつ： 読み飛ばしてよい余談・背景・試験メモ
     アイコン： notebook-pen に固定（補足／コラム／試験では）
     ねらい： 「囲みたいが、注意ではない」の受け皿。
              塗りなし＝ページ全体の色数を増やさない                 */
.note {
  border-left: 2px solid var(--role-note-bd);
  padding: 0.15rem 0 0.15rem 1rem;
  color: var(--role-note-tx);
}
.note-title {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--gray-700);
  line-height: var(--lh-tight);
  margin-bottom: 0.3rem;
}
.note :is(p,li) { color: var(--role-note-tx); }
/* 試験メモだけは少し色を付けて拾いやすくする */
.note.exam { border-left-color: var(--role-quiz); }
.note.exam .note-title { color: var(--role-quiz); }


/* --- 5-7. 結論の一撃 ---------------------------------------- */
/*   いつ： そのセクションで持ち帰る1〜3行。★1セクションに1つまで★
     アイコン： 内容に合わせて1つ（lightbulb map-pin target …、絵文字の ⭐ も可） */
.insight {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1.5px solid var(--role-take-bd);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex; gap: 0.8rem; align-items: flex-start;
}
.insight-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: -0.1rem; line-height: 1.4; }
.insight-body { font-size: var(--fs-body); line-height: var(--lh-box); flex: 1; min-width: 0; }
.insight-body strong { color: var(--role-take-tx); }

/* 軽量版：式や概念の直後に置く「要するに（直感の言い換え）」。
   ------------------------------------------------------------
   §末の着地（塗りつきの .insight）と役割が違うので、見た目も一段落とす。
   塗りを外すことで、1ページに何個あっても色数が増えない。
   ★ セクションの最後の1つだけが塗りつき、それ以外は .soft を付ける ★ */
.insight.soft {
  background: none;
  border: none;
  border-left: 3px solid var(--role-take-bd);
  border-radius: 0;
  padding: 0.15rem 0 0.15rem 0.95rem;
  gap: 0.55rem;
}
.insight.soft .insight-icon { font-size: 1.05rem; margin-top: 0.1rem; }
.insight.soft .insight-body { font-size: var(--fs-body); }
/* スマホでは左のアイコン列が本文の幅を3割近く削るので、
   アイコンを回り込みにして、2行目以降は左端まで本文で使う */
@media (max-width: 600px) {
  .insight, .insight.soft { display: flow-root; }
  /* アイコンの高さを本文1行分より低くしないと、2行目もアイコンの横に押し出される */
  .insight-icon { float: left; margin: 0.2em 0.45rem 0 0; line-height: 1; }
  .insight.soft .insight-icon { margin: 0.25em 0.4rem 0 0; }
}


/* ============================================================
   6. 図
   ============================================================ */

/* --- 6-1. 静止図（SVG/canvas）------------------------------- */
/*   キャプションは必ず図の下。「何を見ればよいか」を1文で           */
.figure, .viz-wrap {                 /* .viz-wrap は旧名。エイリアス */
  margin: var(--space-block) 0;
}
.figure > svg, .viz-wrap > svg,
.figure > canvas, .viz-wrap > canvas {
  display: block; width: 100%; height: auto; margin: 0 auto;
}
.figure-cap, .viz-cap {
  font-size: var(--fs-sm);
  line-height: var(--lh-box);
  color: var(--gray-600);
  margin-top: 0.6rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--gray-200);
}
.figure-cap strong, .viz-cap strong { color: var(--gray-800); }


/* --- 6-1b. 色つきの箱の中に置く図 ---------------------------
   グラフの線・塗りの色は「白地に置く」前提で選んである。
   箱の地色（アンバー／紫／ティール…）が透けると図全体が色かぶりして、
   本来の色が読めなくなる。箱の中の図には必ず白を敷く。 */
:is(.example-box,.formula-box,.def-box,.key-box,.warn-box,.insight,.note,
    .motiv-tagline,.deriv-content)
  :is(.figure,.viz-wrap,.deriv-svg-wrap,.chart-wrap) {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 0.65rem;
  margin: 0.9rem 0;
}
/* ラッパーを介さず直に置かれている図も同じ扱いにする */
:is(.example-box,.formula-box,.def-box,.key-box,.warn-box,.insight,.note,
    .motiv-tagline,.deriv-content)
  > :is(svg, canvas) {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 0.65rem;
  display: block;
  margin: 0.9rem auto;
}


/* --- 6-2. 動かす図（スライダー等）--------------------------- */
/*   影で1段浮かせる ＝「ここは触れる」のサイン                     */
.sim, .demo-box {                    /* .demo-box は旧名。エイリアス */
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
}
/* flex にすると <u> や数式など子要素ごとに列になり、狭い画面で崩れる。block + inline の点で組む */
.sim-title, .demo-box-title {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--teal-700);
  letter-spacing: 0.04em;
  margin-bottom: 0.9rem;
  display: block; line-height: 1.5;
}
.sim-title::before, .demo-box-title::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem;
  position: relative; top: -1px;
  background: var(--teal-500);
}
/* 触れることを促す一文（スライダーの上に置く） */
.sim-prompt {
  font-size: var(--fs-sm); color: var(--gray-600);
  margin-bottom: 0.8rem;
}
/* 操作パネル。ラベル＋スライダー＋数値を横1列に並べる（章共通） */
.sim-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.7rem 1rem; margin: 0.8rem 0;
}
/* ラベルは折り返さない（グリッドの auto 列が潰れて縦積みになるのを防ぐ） */
.sim-lab {
  font-size: var(--fs-sm); font-weight: 700; color: var(--gray-700);
  white-space: nowrap;
}
.sim-controls input[type=range] { width: 200px; accent-color: var(--teal-700); }
.sim-controls .sim-val {
  font-size: var(--fs-sm); font-weight: 800; color: var(--teal-700);
  min-width: 3.2em; display: inline-block; text-align: right;
  font-variant-numeric: tabular-nums;
}
/* 行を縦に積みたいとき（ラベル位置を揃えたい長いラベル向け）。
   数値表示の幅は --out-w で固定でき、値が変わってもバーがずれない */
.sim-row {
  display: grid; align-items: center; gap: 0.5rem 0.75rem;
  grid-template-columns: auto minmax(120px, 1fr) var(--out-w, auto);
  width: 100%; max-width: 660px; margin: 0 auto;
}
.sim-row.has-btn { grid-template-columns: auto minmax(120px, 1fr) var(--out-w, auto) auto; }
.sim-row input[type=range] { width: 100%; min-width: 0; accent-color: var(--teal-700); }
.sim-row .sim-out {
  font-size: var(--fs-sm); font-weight: 700; color: var(--teal-800);
  text-align: left; white-space: nowrap;
}

/* 操作ボタン。色は「触れるもの＝ティール」で全章共通 */
.sim-btn {
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  padding: 0.4rem 0.85rem; border-radius: 99px;
  border: 1.5px solid var(--teal-700); background: var(--white);
  color: var(--teal-700); cursor: pointer; transition: all 0.12s;
}
.sim-btn:hover  { background: var(--teal-50); }
.sim-btn.active { background: var(--teal-700); color: var(--white); }
.sim-btn.resim  { border-color: var(--gray-400); color: var(--gray-700); }
.sim-btn.resim:hover { background: var(--gray-100); }

/* 実験結果の読み取り（sim の下に置く固定枠） */
.sim-read {
  margin-top: 0.9rem; padding-top: 0.8rem;
  border-top: 1px dashed var(--gray-200);
  font-size: var(--fs-sm); color: var(--gray-700);
}


/* ============================================================
   7. 対比（★4種類あったものを1本化）
   旧：compare-grid / ch-compare / vs-card / venn-card
   ============================================================ */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.compare.three { grid-template-columns: 1fr 1fr 1fr; }
.compare > div {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.15rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-box);
}
.compare h4 { font-size: var(--fs-body); font-weight: 800; margin-bottom: 0.35rem; }
/* 「前 → 後」の対比では、後ろ側だけを強調する */
.compare > div.from    { border-color: var(--gray-300); background: var(--gray-50); }
.compare > div.from h4 { color: var(--gray-600); }
.compare > div.to      { border-color: var(--role-take-bd); background: var(--role-take-bg); }
.compare > div.to h4   { color: var(--role-take-tx); }


/* ============================================================
   8. 表
   ============================================================ */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th {
  background: var(--gray-100); font-weight: 700;
  padding: 0.5rem 0.75rem; border: 1px solid var(--gray-200); text-align: center;
}
.data-table td {
  padding: 0.42rem 0.75rem; border: 1px solid var(--gray-200);
  text-align: center; background: var(--white);
}
.data-table tr:nth-child(even) td { background: var(--gray-50); }
.data-table caption {
  caption-side: bottom; text-align: left;
  font-size: var(--fs-xs); color: var(--gray-600); padding-top: 0.5rem;
}

/* セル修飾子：数表で「ここを見る」を数セルだけ示す／脇役を沈める／左寄せ。
   ★ td に必ず背景があるので、色つきの箱に入れても地色が透けない ★
   詳細度は上の nth-child（縞）より強くしておくこと（偶数行で色が消えるため） */
.data-table tr td.hi  { background: #fef3c7; color: #92400e; font-weight: 700; }
.data-table tr td.ok  { background: #f0fdf4; color: #15803d; font-weight: 700; }
.data-table tr td.ng  { background: #fef2f2; color: #b91c1c; font-weight: 700; }
.data-table tr td.dim { color: var(--gray-400); }
.data-table tr td.lft { text-align: left; }


/* ============================================================
   9. 章頭「なぜ学ぶか」（★全章共通化。章ローカル定義を廃止）
   ============================================================ */
.motivation-section {
  padding: 2.5rem 3rem 2rem;
  background: linear-gradient(180deg, #fafafa 0%, var(--white) 100%);
  border-bottom: 1px solid var(--gray-100);
}
.motiv-headline {
  font-size: 1.55rem; font-weight: 800;
  color: var(--theme-800); letter-spacing: -0.02em;
  line-height: 1.3; margin-bottom: 0.4rem;
}
.motiv-sub { font-size: var(--fs-body); color: var(--gray-600); margin-bottom: 1.4rem; }
/* 章を一言で言い切るコピー（章に1つだけ） */
.motiv-tagline {
  background: var(--role-take-bg);
  border-left: 4px solid var(--role-take-bd);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1rem 1.3rem; margin: 1.2rem 0;
  font-size: 1rem; line-height: 1.75;
}
.motiv-tagline .big { font-weight: 800; color: var(--role-take-tx); font-size: 1.12rem; }


/* ============================================================
   10. 練習問題（現状維持。色はコーラル固定）
   ============================================================ */
.quiz-num { background: var(--role-quiz); }
.answer-label { color: var(--teal-700); }


/* ============================================================
   11. 開発用リンター
   ------------------------------------------------------------
   <body class="... lint"> を付けると、箱の3連続に赤い破線が出る。
   章を直すときに「ビジーな場所」を目で探すための道具。
   本番では lint クラスを外す。
   ============================================================ */
/* 「重い箱」＝主張の強い3種。これが3つ以上続くとページが騒がしくなる。
   公式→直感→実験 のように役割の違う箱が続くのは問題ない（むしろ良い型）ので、
   単純な連続数ではなく「重い箱の連続」と「同種の連続」だけを検出する。 */
body.lint :is(.def-box,.key-box,.warn-box,.insight)
        + :is(.def-box,.key-box,.warn-box,.insight)
        + :is(.def-box,.key-box,.warn-box,.insight),
body.lint .def-box   + .def-box   + .def-box,
body.lint .warn-box  + .warn-box  + .warn-box,
body.lint .insight   + .insight   + .insight,
body.lint .example-box + .example-box + .example-box,
body.lint .formula-box + .formula-box + .formula-box {
  outline: 2px dashed #ef4444;
  outline-offset: 5px;
  position: relative;
}
body.lint :is(.def-box,.key-box,.warn-box,.insight)
        + :is(.def-box,.key-box,.warn-box,.insight)
        + :is(.def-box,.key-box,.warn-box,.insight)::after,
body.lint .def-box   + .def-box   + .def-box::after,
body.lint .warn-box  + .warn-box  + .warn-box::after,
body.lint .insight   + .insight   + .insight::after,
body.lint .example-box + .example-box + .example-box::after,
body.lint .formula-box + .formula-box + .formula-box::after {
  content: "強い箱が3連続 → 前に地の文を1文入れる";
  position: absolute; right: 0; top: -1.5rem;
  font-size: 0.68rem; font-weight: 700; color: #ef4444;
  background: var(--white); padding: 0 0.3rem;
}
/* .insight がセクション内に2つ以上あるとき（クイズの解答内は1問1つまでなので除外） */
body.lint .content-section .insight ~ .insight:not(.quiz-answer .insight) {
  outline: 2px dashed #f59e0b; outline-offset: 5px;
}
body.lint .content-section .insight ~ .insight:not(.quiz-answer .insight)::after {
  content: "§内の .insight が2つ以上";
  position: absolute; right: 0; top: -1.5rem;
  font-size: 0.68rem; font-weight: 700; color: #b45309;
  background: var(--white); padding: 0 0.3rem;
}
body.lint .insight { position: relative; }


/* ============================================================
   11-b. 長い数式の扱い
   ------------------------------------------------------------
   style.css は「スマホのときだけ」数式を枠内スクロールにしていたが、
   長いインライン数式（例：0.2×0+0.067+… と続くもの）は
   900〜1200px の中間幅でも本文からはみ出す。全幅で効くようにする。
   スクロールバーは出さない（指・トラックパッドでの横スワイプは効く）。
   ============================================================ */
mjx-container {
  /* max-width / overflow は inline のままでは効かないので箱にする。
     inline-block だと overflow を付けた時点でベースラインが箱の下端になり、
     vertical-align:middle でも数式ごとに ±2px ずれる（「100」は下がり「μ」は上がる）。
     inline-flex なら overflow があっても中身のベースラインで本文と揃う */
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: baseline;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
mjx-container::-webkit-scrollbar { display: none; }
/* 別行立ての式はブロックのまま中央寄せを保つ */
mjx-container[display="true"] { display: block; }

/* スマホ用の目次メニュー（js/toc-menu.js がボタンとパネルを作る）。
   幅900px以下でサイドバーが消えたときだけ出す */
.toc-toggle, .toc-backdrop, .toc-panel { display: none; }
@media (max-width: 900px) {
  .toc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    min-height: 40px;
    padding: 0 0.85rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 99px;
    background: var(--white);
    color: var(--gray-800);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }
  .toc-toggle-icon { display: inline-flex; flex-direction: column; gap: 3px; }
  .toc-toggle-icon i { display: block; width: 14px; height: 2px; border-radius: 1px; background: currentColor; }
  .toc-open .toc-toggle { border-color: var(--theme-bd, var(--gray-300)); color: var(--theme-800, var(--gray-900)); }

  .toc-backdrop {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 98;
    background: rgba(17, 24, 39, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
  }
  .toc-panel {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 99;
    max-height: calc(100vh - var(--header-h) - 2rem);
    max-height: calc(100dvh - var(--header-h) - 2rem);
    overflow-y: auto;
    padding: 1rem 1rem 1.25rem;
    background: var(--white);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 12px 24px rgba(17, 24, 39, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  .toc-open .toc-backdrop,
  .toc-open .toc-panel { opacity: 1; visibility: visible; }
  .toc-open .toc-panel { transform: none; }
  /* 開いている間は後ろのページを動かさない。
     body にも付けると body がスクロール枠になり、sticky のヘッダーが画面外へ消えるので html だけ */
  html.toc-open { overflow: hidden; }

  .toc-panel-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gray-500);
    margin: 0 0 0.5rem;
    padding: 0 0.75rem;
  }
  .toc-panel-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
  .toc-panel-nav a {
    display: block;
    padding: 0.7rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--gray-700);
    line-height: 1.4;
  }
  .toc-panel-nav a:active { background: var(--gray-100); }
  .toc-panel-nav a.active { background: var(--theme-50, var(--teal-50)); color: var(--theme-800, var(--teal-700)); font-weight: 700; }
}

/* 表の横スクロールの合図（js/table-scroll.js が見切れた表の直後に差し込む）。
   最初は表示し、スクロールを触ると 1.5 秒後にフェードアウトする。
   標準のスクロールバーは二重になるので消す */
.has-tbl-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.has-tbl-scrollbar::-webkit-scrollbar { display: none; }
.tbl-scrollbar {
  position: relative;
  height: 5px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--gray-200);
  opacity: 0;
  transition: opacity 0.4s;
  cursor: pointer;
  touch-action: none;
}
.tbl-scrollbar.is-visible { opacity: 1; transition-duration: 0.15s; }
.tbl-scrollbar-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: var(--gray-400);
}


/* ============================================================
   11.5 最終更新日・更新履歴
   ------------------------------------------------------------
   情報の鮮度を示す注記。読者の安心と検索結果の日付のため。
   箱にせず、補足文字の色の細字で添えるだけにする。
   日付の書き換えは python3 _tools/update_date.py で（JSON-LD も一緒に直る）。
   ============================================================ */
.page-updated {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: var(--gray-600);
}

/* トップ上部：最終更新日だけ */
.index-updated {
  max-width: 760px;
  margin: 1.25rem auto 0;
  padding: 0 2rem;
  font-size: 0.8rem;
  color: var(--gray-600);
}

/* トップ下部：更新履歴 */
.index-updates {
  max-width: 760px;
  margin: 2.5rem auto 2rem;
  padding: 0 2rem;
  font-size: 0.8rem;
  color: var(--gray-600);
}
.index-updates h2 {
  margin: 0 0 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gray-600);
}
.index-updates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}
.index-updates-list li {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  line-height: 1.6;
}
.index-updates-list time { font-variant-numeric: tabular-nums; }


/* ============================================================
   11.6 サイトフッター
   ------------------------------------------------------------
   全ページ共通。HTML は _tools/build_meta.py が差し込む。
   更新履歴と同じく、箱にせず補足文字の色の細字で置くだけ。
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--gray-200);
  background: var(--white);
  padding: 1.5rem 2rem 2rem;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--gray-600);
  text-align: center;
}
.site-footer p { max-width: 760px; margin: 0.6rem auto 0; }
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.5rem;
}
.site-footer-links a { color: var(--gray-700); }
.site-footer-links a:hover { color: var(--gray-900); text-decoration: underline; }
.site-footer-sign { color: var(--gray-500); }
@media (max-width: 600px) {
  .site-footer { padding: 1.25rem 1rem 1.5rem; text-align: left; }
  .site-footer-links { justify-content: flex-start; }
}

/* ============================================================
   11.7 運営者情報・プライバシーポリシー・お問い合わせ・404
   ------------------------------------------------------------
   本文だけの単純なページ。見出しはトップの「はじめに」と同じ左線。
   ============================================================ */
/* 本文が短くてもフッターを画面の下端に置く */
body:has(> .info-page) { display: flex; flex-direction: column; min-height: 100vh; }
.info-page {
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
  max-width: 760px;
  margin: 2.5rem auto 4rem;
  padding: 0 2rem;
  color: var(--gray-700);
  line-height: 1.85;
}
.info-page h1 { font-size: 1.5rem; color: var(--gray-900); margin: 0 0 1rem; }
.info-page h2 {
  margin: 2rem 0 0.4rem;
  padding-left: 0.7rem;
  border-left: 4px solid var(--teal-500);
  font-size: 1.05rem;
  color: var(--gray-900);
}
.info-page p { margin: 0.6rem 0 0; }
.info-page a { color: var(--teal-700); text-decoration: underline; }
.info-note { font-size: 0.85rem; color: var(--gray-600); }
.info-table {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 0.5rem 1rem;
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}
.info-table dt { font-weight: 700; color: var(--gray-900); }
.info-table dd { margin: 0; overflow-wrap: anywhere; }
.info-list { margin: 0.6rem 0 0; padding-left: 1.4rem; }
.info-cta { margin-top: 1.5rem !important; }
.info-cta a {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-sm);
  background: var(--teal-700);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.info-cta a:hover { background: var(--teal-800); }
@media (max-width: 600px) {
  .info-page { padding: 0 1rem; margin-top: 1.75rem; }
  .info-table { grid-template-columns: 4.8em minmax(0, 1fr); padding: 0.9rem 1rem; }
}

/* ============================================================
   12. レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare.three { grid-template-columns: minmax(0, 1fr); }

  /* グリッド／フレックスの子は既定が min-width:auto なので、
     長い数式や表に押されて親をはみ出す。0 にして縮められるようにする。
     （style.css の 1fr 指定も minmax(0,1fr) に上書きする） */
  .chapter-main [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .chapter-main [style*="grid-template-columns"] > *,
  .compare > *, .compare-3 > *,
  .insight-body, .quiz-q, .quiz-header > * { min-width: 0; }
  .motivation-section { padding: 2rem 1.25rem 1.5rem; }
  .motiv-headline { font-size: 1.3rem; }
  .sim-controls input[type=range] { width: 150px; }
  .sim-row, .sim-row.has-btn { grid-template-columns: 1fr; }
  .sim-row > * { justify-self: start; }
  .sim-row .sim-out { white-space: normal; }
}
