/* MEC shared CSS custom properties */
.qt-context {
  display:block;
  background:rgba(96,165,250,0.08);
  border-left:3px solid rgba(96,165,250,0.4);
  padding:6px 10px;
  margin-bottom:6px;
  font-size:.9em;
  color:var(--ts);
  border-radius:0 4px 4px 0;
  white-space:pre-line;
}
.series-label {
  display:inline-block;
  background:rgba(255,255,255,0.15);
  color:#fff;
  font-size:.75em;
  font-weight:700;
  padding:1px 6px;
  border-radius:3px;
  margin-bottom:4px;
  margin-right:4px;
  vertical-align:middle;
  letter-spacing:.03em;
}
/* ══════════ ベース配色トークン（2026-07-20 トークン化 / 2026-07-23 確定）══════════
   ベース色を構成していた即値を全てここへ集約してある。以後ベース色を変えるときは
   このブロックだけを触れば全ページに伝播する。
   ⚠️ 演出7テーマ（study_exam.js の EXAM_EFFECT_THEMES）の配色はベース色ではないので
      ここには含めない＝テーマ側は独立して維持される。 */
:root {
  /* ベース＝「鮮やか」（旧 html.pal-indigo-vivid）。2026-07-23 に採用し確定させた。
     以前はここが紺で、候補は html.pal-* として並走させていたが、
     採用にあたり候補ブロックと _palette_preview.js ごと撤去してある。
     没にした12案の実値が要るときは git 履歴（撤去コミットの vars.css）を見ること。 */
  --bg-root:#0B033B;                                  /* html の下地（iOS白wash対策の最下層） */
  --bg-g0:#08031F; --bg-g1:#0D0541; --bg-g2:#09004F;  /* 固定背景グラデーションの3停止点 */
  --hdr-rgb:8,3,29;                                   /* 各ページの sticky ヘッダー（透過度は使用箇所ごと） */
  --surf-1:#100840;                                   /* モーダル箱（セルフチェック/音/ヘルプ/エラー/同期） */
  --surf-2:#130846;                                   /* スコアリング内側 */
  --surf-3:#0E0633;                                   /* gamify レベルリング内側 */
  --surf-4:#13063A;                                   /* select の option 背景 */
  --loader-g0:#08031F; --loader-g1:#0D053C; --loader-g2:#09004D; /* 読込オーバーレイ */
  --exam-modal-a:34,19,121; --exam-modal-b:17,7,55;   /* 試験の開始/結果モーダルのグラデ */
  --ov-rgb:5,0,22;                                    /* モーダル背後の暗幕 */
  --toast-rgb:14,4,49;                                /* 取消/通知トースト・並べ替えバー */
  --panel-a:28,18,74; --panel-b:14,5,41;              /* gamify パネルのグラデ */
  --gmtoast-a:39,23,85; --gmtoast-b:19,10,50;         /* gamify 実績トーストのグラデ */
  --glass-rgb:175,161,247;                            /* カード・チップ等の重ね塗り。面にも下地の色を回す */
  /* 問題カード内の解説ブロック配色（ep=病態 ee=鑑別 ept=国試ポイント em=選択肢別 ec=計算 ei=画像）。
     ＝「寒色回避」（旧 html.cs-warm）を採用。青紫を暖色／ティール側へ逃がし、
     インディゴの下地と同じ色域でカードが埋もれるのを避けている。 */
  --eb-ep:45,212,191;  --eb-ep-h:#2DD4BF;
  --eb-ee:61,214,140;  --eb-ee-h:#3DD68C;
  --eb-ept:255,154,60; --eb-ept-h:#FF9A3C;
  --eb-em:244,114,182; --eb-em-h:#F472B6;
  --eb-ec:156,204,101; --eb-ec-h:#9CCC65;
  --eb-ei:251,191,36;  --eb-ei-h:#FBBF24;
  --tbl-th:17,94,89;   --qn-col:#5EEAD4;
}

/* ══════════ ベース配色テーマ（2026-07-23）══════════
   html.th-* が上の :root を上書きする。付与は theme.js（<head>で同期実行）。
   既定「深夜のインディゴ」はクラス無し＝上の :root がそのまま効くのでここには無い。

   ⚠️ 追加・変更時の制約 ── 破ると科目色が読めなくなる:
     カード面（ページ地 --bg-g1 の上に --glass-rgb を6%重ねた色）の
     相対輝度を **0.0235 以下** に保つこと。
     chapters_meta.js の科目18色は、この明るさを「許容しうる最も明るい暗色テーマ」と
     想定して 4.5:1 を満たすよう導出されている。ここを超えると全科目色が基準割れする。
   ⚠️ 明色テーマは作れない。study.css 等に rgba(255,255,255,.0x) の重ね塗りが
     178箇所あり、明るい地では全て消える。設計をやり直す規模になる。
   ⚠️ カード内の解説ブロック配色（--eb-*）はテーマで振らない。
     あの6色は病態/鑑別/国試ポイント…と意味を持っており、テーマ毎に変えると
     意味の学習がやり直しになるため、全テーマ共通で固定する。
   検証: node _work/check_themes.js （全テーマの面輝度・文字・科目色を実測） */

/* 炭 — 無彩色。色を主張せず問題文だけが立つ */
html.th-charcoal {
  --bg-root:#16181C;
  --bg-g0:#0E0F12; --bg-g1:#17191E; --bg-g2:#1B1E24;
  --hdr-rgb:10,11,13;
  --surf-1:#1A1D22; --surf-2:#1B1E23; --surf-3:#131519; --surf-4:#16181D;
  --loader-g0:#0E0F12; --loader-g1:#16181C; --loader-g2:#1B1E24;
  --exam-modal-a:58,62,72; --exam-modal-b:24,26,31;
  --ov-rgb:8,9,11; --toast-rgb:22,24,28;
  --panel-a:34,37,43; --panel-b:20,22,26;
  --gmtoast-a:44,47,54; --gmtoast-b:26,28,33;
  --glass-rgb:214,218,226;

  /* 冷たい銀白のアクセント。字間を広げ、背景は縦のごく浅いグラデだけ＝ほぼ無地。粒子も無し */
  --or:#98A8B8; --ord:#AEC0D3; --orl:rgba(152,168,184,0.14);
  --font-display-ls:.045em;
  --bg-gradient:linear-gradient(180deg,var(--bg-g0) 0%,var(--bg-g1) 55%,var(--bg-g2) 100%);

  /* 角を落とし影も消す＝製図された道具の顔 */
  --r-sm:2px; --r-md:3px; --r-lg:4px;
  --shadow-card:none;
}
html.th-charcoal body { --tx:#E8EAEE; --ts:#93999F; }

/* 深緑 — 落ち着いた森。長時間でも疲れにくい */
html.th-forest {
  --bg-root:#0C1D16;
  --bg-g0:#06120D; --bg-g1:#0D2018; --bg-g2:#0A251A;
  --hdr-rgb:5,15,11;
  --surf-1:#0F2419; --surf-2:#10251B; --surf-3:#0A1B13; --surf-4:#0D2016;
  --loader-g0:#06120D; --loader-g1:#0C1D16; --loader-g2:#0A2519;
  --exam-modal-a:30,74,55; --exam-modal-b:11,32,23;
  --ov-rgb:3,14,10; --toast-rgb:12,29,22;
  --panel-a:20,45,34; --panel-b:10,25,18;
  --gmtoast-a:26,58,43; --gmtoast-b:13,32,23;
  --glass-rgb:170,222,196;

  /* 若草のアクセント。上から光が差す放射グラデ */
  --or:#69B857; --ord:#78D364; --orl:rgba(105,184,87,0.14);
  --bg-gradient:radial-gradient(120% 95% at 50% 0%,var(--bg-g2) 0%,var(--bg-g1) 48%,var(--bg-g0) 100%);

  /* 標準寄り。柔らかく浮かせる */
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow-card:0 4px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);
}
html.th-forest body { --tx:#E4EFE8; --ts:#8FAE9C; }

/* 深海 — インディゴから最も遠い寒色。上限に収めるため元案より一段沈めてある */
html.th-teal {
  --bg-root:#061D25;
  --bg-g0:#031016; --bg-g1:#08202A; --bg-g2:#052531;
  --hdr-rgb:3,11,14;
  --surf-1:#08222C; --surf-2:#09242E; --surf-3:#051921; --surf-4:#08202A;
  --loader-g0:#031016; --loader-g1:#061D25; --loader-g2:#052531;
  --exam-modal-a:26,66,84; --exam-modal-b:9,32,42;
  --ov-rgb:2,12,16; --toast-rgb:10,34,43;
  --panel-a:16,50,63; --panel-b:8,30,38;
  --gmtoast-a:22,64,80; --gmtoast-b:11,38,48;
  --glass-rgb:160,214,230;

  /* シアンのアクセント。深く沈む縦グラデ＋薄い粒子で水中の質感 */
  --or:#0AB6D3; --ord:#0DD0F1; --orl:rgba(10,182,211,0.14);
  --bg-gradient:linear-gradient(180deg,var(--bg-g0) 0%,var(--bg-g1) 45%,var(--bg-g2) 100%);
  --bg-grain:var(--grain-tile);

  /* やや締めた角＋深い影で水中の奥行き */
  --r-sm:6px; --r-md:9px; --r-lg:12px;
  --shadow-card:0 8px 30px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.05);
}
html.th-teal body { --tx:#E1EEF2; --ts:#8AA8B2; }

/* 琥珀の書斎 — 暖色。夜に紙の本を読む雰囲気 */
html.th-amber {
  --bg-root:#241413;
  --bg-g0:#170B0A; --bg-g1:#281614; --bg-g2:#301715;
  --hdr-rgb:18,9,8;
  --surf-1:#2A1817; --surf-2:#2C1A18; --surf-3:#1F1211; --surf-4:#271615;
  --loader-g0:#170B0A; --loader-g1:#241413; --loader-g2:#301715;
  --exam-modal-a:84,46,42; --exam-modal-b:40,20,18;
  --ov-rgb:14,6,5; --toast-rgb:36,20,19;
  --panel-a:52,30,28; --panel-b:30,17,16;
  --gmtoast-a:66,38,35; --gmtoast-b:36,20,18;
  --glass-rgb:240,203,178;

  /* ★見出しを明朝体に。琥珀のアクセントと粒子で、夜に紙の本を読む質感を作る */
  --or:#DE9816; --ord:#FEAF1B; --orl:rgba(222,152,22,0.14);
  --font-display:'Hiragino Mincho ProN','Yu Mincho',YuMincho,'MS PMincho',serif;
  --font-display-ls:.01em;
  --bg-gradient:linear-gradient(150deg,var(--bg-g0) 0%,var(--bg-g1) 55%,var(--bg-g2) 100%);
  --bg-grain:var(--grain-tile);

  /* ★角をほぼ落とし影を消す＝印刷された紙面。明朝と粒子に揃える */
  --r-sm:3px; --r-md:5px; --r-lg:7px;
  --shadow-card:none;
}
html.th-amber body { --tx:#F4EAE6; --ts:#B89A92; }

/* 薔薇 — ピンク寄りのローズ。彩度を抑え、面輝度を上限内に収めてある */
html.th-rose {
  --bg-root:#2B111F;
  --bg-g0:#1E0815; --bg-g1:#301423; --bg-g2:#39182C;
  --hdr-rgb:26,10,20;
  --surf-1:#341927; --surf-2:#361B29; --surf-3:#27101D; --surf-4:#2E1623;
  --loader-g0:#1E0815; --loader-g1:#2B111F; --loader-g2:#39182C;
  --exam-modal-a:104,44,74; --exam-modal-b:46,18,32;
  --ov-rgb:20,6,14; --toast-rgb:44,16,30;
  --panel-a:66,28,48; --panel-b:36,14,26;
  --gmtoast-a:84,36,60; --gmtoast-b:46,18,32;
  --glass-rgb:244,186,214;

  /* ★見出しを丸ゴシックに。ローズゴールドのアクセントと柔らかい放射グラデ */
  --or:#E2918A; --ord:#FFA69E; --orl:rgba(226,145,138,0.14);
  --font-display:'Hiragino Maru Gothic ProN','Yu Gothic UI','Meiryo',sans-serif;
  --font-display-ls:.01em;
  --bg-gradient:radial-gradient(115% 90% at 30% 0%,var(--bg-g2) 0%,var(--bg-g1) 50%,var(--bg-g0) 100%);

  /* ★大きく丸め、内側ハイライトを外して柔らかい影だけに */
  --r-sm:14px; --r-md:18px; --r-lg:24px;
  --shadow-card:0 6px 26px rgba(0,0,0,.30);
}
html.th-rose body { --tx:#F7EAF0; --ts:#C09FAE; }

/* ⚠️ iOS Safari/Brave は position:fixed の背景(下の html::before)を、動的ツールバーで
   ビューポート高が変わると下半分ぶん塗り残し、そこにブラウザ既定の白が出る（カード0枚でも
   発生・スクロールで一緒に動く＝白washの真因・2026-07-08）。root要素 html に暗色を敷くと
   iOS でもビューポート全体へ確実に伝播（root background propagation＝コンポジタ最下層）し、
   固定背景やタイルの塗り残し部が「白」でなく暗色になって症状が消える。 */
html { background-color:var(--bg-root); }
/* Fixed page gradient — shows through transparent/glass elements.
   2レイヤー構成: 上が粒子（テーマが --bg-grain を none 以外にした時だけ出る）、
   下がグラデーション本体。テーマは --bg-gradient / --bg-grain だけを差し替える。 */
html::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:var(--bg-grain),var(--bg-gradient);
  background-size:120px 120px,cover;
  background-repeat:repeat,no-repeat;
  z-index:-1;
}
:root {
  --nv:#1E3F72; --nvl:#2A5494;
  --gr:#3DD68C; --grl:rgba(61,214,140,0.12);
  --yl:#FFB830; --yll:rgba(255,184,48,0.12);
  --rd:#FF6B6B; --rdl:rgba(255,107,107,0.12);
  --pu:#A78BFA; --pul:rgba(167,139,250,0.12);
  --bl:rgba(96,165,250,0.15);
  --gb:rgba(var(--glass-rgb),0.04); --cb:rgba(var(--glass-rgb),0.07);
  --bd:rgba(255,255,255,0.12); --tx:#E2EAF4; --ts:#8099B8;
  --or:#FF9A3C; --orl:rgba(255,154,60,0.12); --ord:#FFB870;
  --blu:#60A5FA;
  /* z-index 名前付きスケール（即値の 9999 等を使わずこれを参照する） */
  --z-tip:10;
  --z-hdr:200; --z-modal:5000; --z-mfx:6000; --z-toast:9000; --z-ov:9100;
  --z-lightbox:9500; --z-gm-ov:9500; --z-gm-cer:9550; --z-gm-toast:9600;
  --z-fx:9990; --z-loader:9999;
  /* --z-tip=セクション内に閉じたツールチップ（低い値でよい・全画面系と競合させない）
     --z-mfx=モーダル上の演出テキスト / --z-gm-*=gamifyのモーダル・セレモニー・実績トースト */

  /* イージング名前付き3種（ブラウザ既定の ease や行き過ぎ戻りの
     cubic-bezier(...,1.2,...) を直に書かず、必ずこれを参照する）。
     --ease-out は指数イーズアウト＝UIの状態遷移の既定。 */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  /* 押した手応え用の行き過ぎ戻り（押す・段が上がる・印が付く、の3つだけに使う）。
     ⚠️ 入退場には使わない（跳ねる入場は2回目から邪魔になる）。 */
  --ease-spring:cubic-bezier(.3,1.4,.5,1);
  /* 時間3段。イージング4種と対で使う（2026-09-24 に index.html から移した）。
     ⚠️ JS 側の写しは study_exam.js の MO（WAAPI は var() を読めない）。値を変えたら両方直す
        （_work/test_rf_polish.js が一致を見張る）。 */
  --dur-micro:120ms; --dur-short:220ms; --dur-long:420ms;

  /* 明るい面に載せる暗インク。科目色（chapters_meta.js の color）と
     ブランドアクセント（--or）の両方に使う。
     ⚠️ これらを地にするときは #fff ではなくこれを使うこと
     （明るい地に白文字だと 2〜3:1 まで落ちる）。
     科目18色で 5.6:1 以上、全テーマのアクセントで 7.6:1 以上を確認済み。 */
  --subj-ink:#1A1206;

  /* 見出し用の書体。テーマごとに振る（本文は振らない＝長文の可読性を優先）。
     Webフォントは使わない。明朝は iOS/macOS の Hiragino Mincho ProN と
     Windows の Yu Mincho、丸ゴは Hiragino Maru Gothic ProN（Windows には
     等価物が無いので通常のゴシックへ落ちる）。 */
  --font-display:-apple-system,'Noto Sans JP','Helvetica Neue',sans-serif;
  --font-display-ls:0;

  /* 固定背景。テーマごとにグラデーションの形と粒子の有無を振る。
     ⚠️ 新しい position:fixed 要素は足さないこと。既存の html::before の
     背景レイヤーを差し替えるだけにしてある（iOS の白wash対策を壊さないため）。 */
  --bg-gradient:linear-gradient(135deg,var(--bg-g0) 0%,var(--bg-g1) 50%,var(--bg-g2) 100%);
  --bg-grain:none;

  /* 構造面の角丸3段。カード・ボタン・入力・モーダルが参照する。
     ⚠️ ピル（20px以上のバッジ・チップ）と極小チップ（5px以下）はここに含めない。
        あれらは形そのものが意味なので、テーマで振ると別物になってしまう。
     ⚠️ 棒グラフ上端のような複数値指定（border-radius:2px 2px 0 0）も対象外。 */
  --r-sm:8px;   /* 小さめの面: チップ・入力・小ボタン */
  --r-md:11px;  /* 標準: ボタン・パネル */
  --r-lg:15px;  /* 大きい面: カード・セクション・モーダル */

  /* カードの高さ表現。テーマごとに「浮かせる/紙のように平ら」を振る */
  --shadow-card:0 4px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07);
}
/* 粒子（紙のような質感）。テーマ側が --bg-grain にこれを指定する。
   グレースケール化した fractalNoise を極低不透明度でタイル敷きする。
   120px の小タイルなので描画は一度きりで済む。 */
:root{
  --grain-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}
/* 2段階タップ確認のarmed状態（confirm()代替。_tapConfirm がbtnに付与し3秒で自動解除）。
   study.html とハブの「♻️ 最新に更新」で共用するため全ページ共通の vars.css に置く。 */
button.tap-arm{background:#C0392B!important;border-color:#C0392B!important;color:#fff!important;}

/* キーボードフォーカスリング（全ページ共通・アニメ無しで即時表示）。
   個別に上書きしたい要素は色を直に書かず --focus-ring を参照すること */
:root{--focus-ring:#7BB3FF;}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
/* 動きを減らす設定のユーザーには装飾アニメ・フラッシュ・スムーススクロールを止める。
   （JS駆動のWeb Animations/Canvas粒子は study.html 側でガード） */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}