[hidden]{display:none!important}
:root{
  --bg:#f6f7f9; --card:#fff; --ink:#1a1d21; --sub:#5b6570; --line:#dfe3e8;
  --accent:#1668c4; --accent-w:#e8f1fb;
  --ok:#0f7a44; --ok-bg:#e6f5ec; --ng:#c0261f; --ng-bg:#fdecea;
  --warn:#8a5b00; --warn-bg:#fff4dd;
  /* 上部バー（薄黄色）。線とホバーも黄系で揃える */
  --topbar-bg:#fdf4cd; --topbar-line:#e9dcaa; --topbar-hover:#f6ebbe;
  /* アプリ全体の基本フォント。ここ1か所で管理する（§34-37）。
     BIZ UDPGothic は Google Fonts から配信（index.html, display=swap）。
     端末にインストールされていない環境でも同じ表示になる。 */
  --font:"BIZ UDPGothic","BIZ UDPGothic Fallback","BIZ UDPゴシック",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --r:10px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --fs:16.5px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-family:var(--font);
  /* ページ内移動したときに、移動先が画面の一番上に貼り付かないよう少しだけ空ける */
  scroll-padding-top:12px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs); line-height:1.85;
}
/* フォーム部品はブラウザ既定フォントへ戻るため明示的に継承させる（§36）。
   font:inherit だけだと一部ブラウザで family が戻ることがあるので family も直接指定する。 */
button,input,select,textarea,optgroup,option{font:inherit;color:inherit;font-family:var(--font)}
/* 表・見出し・引用なども UA 既定に落ちないよう明示（§37） */
table,th,td,caption,thead,tbody,tfoot,h1,h2,h3,h4,h5,h6,summary,legend,label,figcaption{font-family:var(--font)}
/* コード類だけは等幅にする必要があるが、このアプリでは使っていないので基本フォントで揃える */
pre,code,kbd,samp{font-family:var(--font)}
a{color:var(--accent)}

/* ---------- top bar ---------- */
/* 上部バーはページ先頭に置くだけの通常の要素。
   固定も追従もせず、スクロールすれば本文と一緒に上へ流れて消える。
   画面の一部を占有し続けないようにするため。 */
#topbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:10px 16px;background:var(--topbar-bg);border-bottom:1px solid var(--topbar-line);
  /* viewport-fit=cover なので、ノッチ側にも背景色を回り込ませる */
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  padding-left:calc(16px + env(safe-area-inset-left,0px));
  padding-right:calc(16px + env(safe-area-inset-right,0px));
}
.brand{font-weight:700;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand span{color:var(--accent)}
#topbar nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
#topbar nav a{
  text-decoration:none;color:var(--sub);padding:6px 12px;border-radius:999px;font-size:.94em;
}
#topbar nav a:hover{background:var(--topbar-hover)}
#topbar nav a.on{background:var(--accent-w);color:var(--accent);font-weight:700}
.who{display:flex;align-items:center;gap:10px;font-size:.9em;color:var(--sub)}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;padding:4px;text-decoration:underline}

main{max-width:1000px;margin:0 auto;padding:20px 16px 72px}

/* ---------- generic ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
h1{font-size:1.5em;margin:.2em 0 .6em}
h2{font-size:1.18em;margin:1.2em 0 .5em}
h3{font-size:1.02em;margin:1em 0 .35em;color:var(--sub)}
.muted{color:var(--sub)}
.small{font-size:.88em}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;border:1px solid transparent;border-radius:8px;
  padding:11px 20px;cursor:pointer;font-weight:700;text-decoration:none;
}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:var(--card);color:var(--accent);border-color:var(--line)}
.btn.ghost:hover{background:var(--accent-w)}
.btn.sm{padding:7px 13px;font-size:.9em;font-weight:400}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:.84em;color:var(--sub)}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:#bfe3cd}
.pill.ng{background:var(--ng-bg);color:var(--ng);border-color:#f3c6c2}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:#eddab0}
.pill.acc{background:var(--accent-w);color:var(--accent);border-color:#c5ddf6}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
/* 項目が1つしかない grid。放っておくと広い画面で1列ぶんの幅を丸ごと使ってしまうので、
   他の列と同じくらいの幅で止める。スマートフォンでは画面幅のほうが狭いので効かない。 */
.onecol{max-width:360px}
/* 170px を下限にするが、親がそれより狭いときは親に合わせる。
   min() を挟まないと、文字を大きくしたときに列が親からはみ出して横スクロールになる。 */
.g3{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
table{width:100%;border-collapse:collapse;font-size:.94em}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--sub);font-weight:700;font-size:.9em;white-space:nowrap}
.bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;min-width:80px}
.bar>i{display:block;height:100%;background:var(--accent)}
.tablewrap{overflow-x:auto}

/* ---------- login ---------- */
.login{max-width:440px;margin:8vh auto}
.login input[type=text],.login input[type=password]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#fff}
.login .btn{width:100%;margin-top:14px}
/* 未認証時は「ハンドルネーム」「アクセスパスワード」「はじめる」が自然に縦並びになる */
.login .field{display:block;margin-top:14px}
.login .field>span{display:block;font-size:.88em;color:var(--sub);margin-bottom:5px}
.login .pwtoggle{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:.85em;color:var(--sub);cursor:pointer}
.login .pwtoggle input{width:auto;margin:0}
.login .formerr{
  margin:12px 0 0;padding:9px 12px;border-radius:8px;font-size:.9em;
  background:var(--ng-bg);border:1px solid #f3c6c2;color:var(--ng);
}
/* エラーは「何が起きたか」＋「次にどうするか」の2段。行き止まりを作らない。 */
.login .formerr .errmsg{margin:0;font-weight:700}
.login .formerr .errhelp{
  margin-top:9px;padding-top:9px;border-top:1px solid #f3c6c2;
  font-weight:400;line-height:1.6;
}
.login .formerr .errhelp p{margin:0 0 9px}
.login .formerr .errhelp .btn{width:auto;margin:0}
/* 移行の案内。ログインタブでも設定タブでも同じ見た目にする。 */
.login .note{
  margin:14px 0 0;padding:11px 13px;border-radius:8px;
  background:var(--accent-bg,#eef4ff);border:1px solid #cfe0ff;
  font-size:.88em;line-height:1.65;color:var(--fg);
}
.login .note p{margin:0 0 7px}
.login .note p:last-child{margin-bottom:0}
.login .note .linkbtn{padding:0;font-size:1em}
.login .field .fieldhelp{
  display:block;margin-top:6px;font-size:.82em;color:var(--sub);line-height:1.55;
}
.login input[placeholder^="xxxx"]{letter-spacing:.06em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.login .notice{
  margin:12px 0 0;padding:9px 12px;border-radius:8px;font-size:.9em;
  background:#fff6e0;border:1px solid #f0d99a;color:#7a5a12;
}
.login .pill{margin-right:6px}

/* ログイン / はじめて使う の切り替えタブ。ユーザー名だけで入れる旧仕様は無い。 */
.login .tabs{display:flex;gap:6px;margin:14px 0 4px;border-bottom:1px solid var(--line)}
.login .tab{
  flex:1;background:none;border:0;border-bottom:2px solid transparent;
  padding:9px 6px;font:inherit;font-size:.9em;color:var(--sub);cursor:pointer;line-height:1.35;
}
.login .tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.login .tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px 6px 0 0}
/* パスワード変更フォームなど、ログイン画面以外でも同じ入力欄を使う */
.card .field{display:block;margin-top:14px;max-width:420px}
.card .field>span{display:block;font-size:.88em;color:var(--sub);margin-bottom:5px}
.card .field input[type=password],.card .field input[type=text]{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:#fff;
}
.card .field .pwtoggle{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:.85em;color:var(--sub);cursor:pointer}
.card .field .pwtoggle input{width:auto;margin:0}
.card>.formerr{
  margin:12px 0 0;padding:9px 12px;border-radius:8px;font-size:.9em;max-width:420px;
  background:var(--ng-bg);border:1px solid #f3c6c2;color:var(--ng);
}

/* ---------- quick start ---------- */
.quick{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.quick button{
  text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;cursor:pointer;box-shadow:var(--shadow);
}
.quick button:hover:not(:disabled){border-color:var(--accent);background:var(--accent-w)}
.quick button:disabled{opacity:.45;cursor:not-allowed}
.quick b{display:block;font-size:1.04em}
.quick span{color:var(--sub);font-size:.88em}

/* ---------- question ---------- */
.qhead{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.qhead .n{font-weight:700;font-size:1.14em}
.stem{white-space:pre-wrap;line-height:2.0;margin:.2em 0 1em}
/* 設問本文に含まれる表。狭い画面ではつぶさず横スクロールさせる（.tablewrap と併用） */
.stemtable{margin:.2em 0 1em}
.stemtable table{font-size:.95em}
.stemtable th,.stemtable td{white-space:nowrap}
.shared{
  white-space:pre-wrap;line-height:1.95;background:#fbfcfd;border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:6px;padding:12px 16px;margin-bottom:14px;
}
.shared summary{cursor:pointer;font-weight:700;color:var(--accent);white-space:normal}
.figs{display:grid;gap:14px;margin:16px 0}
.fig{border:1px solid var(--line);border-radius:8px;padding:10px;background:#fcfcfd}
.fig img{display:block;width:100%;height:auto;border-radius:4px;cursor:zoom-in;background:#fff}
.fig figcaption{font-size:.86em;color:var(--sub);margin-top:8px}
.fig .lab{font-weight:700;color:var(--ink)}

.choices{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.choice{
  display:flex;align-items:flex-start;gap:12px;border:1.5px solid var(--line);border-radius:9px;
  background:var(--card);padding:11px 12px 11px 14px;cursor:pointer;
}
.choice:hover{border-color:#b9c6d4}
.choice .lab{
  flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;font-weight:700;font-size:.92em;background:var(--bg);
}
.choice .txt{flex:1;white-space:pre-wrap;padding-top:1px}
.choice.sel{border-color:var(--accent);background:var(--accent-w)}
.choice.sel .lab{background:var(--accent);color:#fff;border-color:var(--accent)}
.choice.gone{opacity:.42}
.choice.gone .txt{text-decoration:line-through}
.choice .kill{
  flex:none;border:1px solid var(--line);background:var(--card);border-radius:6px;
  width:34px;height:30px;cursor:pointer;color:var(--sub);font-size:.95em;line-height:1;
}
.choice .kill:hover{background:var(--ng-bg);color:var(--ng);border-color:#f3c6c2}
.choice.gone .kill{background:var(--ng-bg);color:var(--ng);border-color:#f3c6c2}
.choice.correct{border-color:var(--ok);background:var(--ok-bg)}
.choice.correct .lab{background:var(--ok);color:#fff;border-color:var(--ok)}
.choice.wrong{border-color:var(--ng);background:var(--ng-bg)}
.choice.wrong .lab{background:var(--ng);color:#fff;border-color:var(--ng)}
.choice .mark{flex:none;font-weight:700;width:1.4em;text-align:center}

.qbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
.qbar .spacer{flex:1}

/* 解答直後にここへ自動スクロールする。上部バーは固定していないので、
   画面の一番上に貼り付かないぶんの余白だけを取る。 */
.result{border-radius:var(--r);padding:14px 18px;margin:18px 0 6px;border:1px solid;
  scroll-margin-top:12px}
.result.ok{background:var(--ok-bg);border-color:#bfe3cd}
.result.ng{background:var(--ng-bg);border-color:#f3c6c2}
/* 解説閲覧モード。正誤の判定が無いので、正解・不正解のどちらの色でもない中立の色にする */
.result.view{background:var(--accent-w);border-color:#c3dcf4}
.result b.big{font-size:1.22em}
.rate{margin-left:auto}

/* 解説の一番下に置く前後移動。上部の qbar と同じ操作を再掲するもの。 */
.bottomnav{display:flex;gap:12px;margin:26px 0 4px;padding-top:18px;border-top:1px solid var(--line)}
.bottomnav .btn{flex:1;justify-content:center;text-align:center}
.bottomnav .btn[disabled]{opacity:.45}
.rating{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}
.rating button{
  min-width:52px;padding:8px 12px;border:1.5px solid var(--line);background:var(--card);
  border-radius:8px;cursor:pointer;font-size:1.05em;
}
.rating button:hover{border-color:var(--accent)}
.rating button.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.expl h3{margin-top:1.1em;color:var(--accent);font-size:.97em;letter-spacing:.02em}
.expl p{margin:.25em 0 .7em;white-space:pre-wrap}
.expl ul{margin:.2em 0 .8em;padding-left:1.3em}
.expl li{margin:.18em 0}
.expl .ce{display:grid;gap:6px;margin:.3em 0 .8em}
.expl .ce div{display:flex;gap:9px;padding:7px 10px;border-radius:7px;background:var(--bg);border:1px solid var(--line)}
.expl .ce .m{font-weight:700;flex:none}
.expl .ce.on div.y{background:var(--ok-bg);border-color:#bfe3cd}
.kv{display:flex;gap:8px;flex-wrap:wrap;margin:.4em 0 0}

/* ---------- filters ---------- */
fieldset{border:1px solid var(--line);border-radius:8px;padding:10px 14px 14px;margin:0 0 14px}
legend{font-weight:700;font-size:.92em;color:var(--sub);padding:0 6px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--card);
  border-radius:999px;padding:5px 13px;cursor:pointer;font-size:.9em;user-select:none;
}
.chip:hover{border-color:#b9c6d4}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip .c{opacity:.72;font-size:.9em}
select,input[type=text],input[type=number]{padding:8px 11px;border:1px solid var(--line);border-radius:7px;background:#fff}
/* <select> は「最も長い選択肢」の幅まで自分から広がる。上限を決めておかないと親の枠を突き抜ける
   （実測: 320px幅で「閲覧方法」の select が fieldset から 62px はみ出していた）。
   親の幅で頭打ちにし、行に残った幅を使って伸びるようにする。
   flex-basis を 12em にしてあるので、横に並べる余地が無い狭い画面では
   自然に次の行へ回り、そこで1行を丸ごと使う（文字を小さくして誤魔化さない）。 */
select{max-width:100%;min-width:0}
.row>select{flex:1 1 12em;min-width:0}
.target{font-size:1.06em}
.target b{font-size:1.35em;color:var(--accent)}

/* ---------- lightbox ---------- */
#lightbox{position:fixed;inset:0;background:rgba(12,14,18,.94);z-index:100;display:flex;flex-direction:column}
#lbStage{flex:1;overflow:auto;display:grid;place-items:center;padding:12px;-webkit-overflow-scrolling:touch}
#lbImg{max-width:100%;height:auto;cursor:zoom-in}
#lbImg.zoom{max-width:none;width:auto;cursor:zoom-out}
#lbClose{position:absolute;top:10px;right:14px;z-index:2;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:8px;width:44px;height:44px;font-size:1.6em;cursor:pointer}
#lbCap{color:#e7eaee;padding:10px 16px 18px;font-size:.9em;text-align:center}

#toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;
  background:#242a31;color:#fff;padding:11px 20px;border-radius:8px;box-shadow:var(--shadow);font-size:.94em;max-width:90vw;
}

.empty{text-align:center;color:var(--sub);padding:36px 12px}

@media(max-width:640px){
  :root{--fs:16px}
  main{padding:14px 12px 64px}
  .card{padding:14px 14px}
  #topbar{
    gap:8px;padding:8px 12px;
    padding-top:calc(8px + env(safe-area-inset-top,0px));
    padding-left:calc(12px + env(safe-area-inset-left,0px));
    padding-right:calc(12px + env(safe-area-inset-right,0px));
  }
  /* flex:1 の basis:0 が width:100% に勝ってしまうので basis で1行を確保する */
  #topbar nav{order:3;flex:0 0 100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  #topbar nav a{white-space:nowrap}
  .brand{flex:1}
  .who{font-size:.84em}
  .bottomnav{gap:10px;margin-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .bottomnav .btn{padding:12px 10px}
  .choice{padding:10px 10px 10px 12px;gap:9px}
  .choice .lab{width:26px;height:26px}
}
@media print{ #topbar,.qbar,.rating,.bottomnav{display:none} }

/* ---------- 学習優先度・根拠・ランクのバッジ ---------- */
/* 問題本文より目立たせない。段階だけを示し、詳細は hover / 解答後に出す。
   .freq は関西共通試験QBでの頻出度バッジの名前。この教材では「優先度」を出すが、
   見た目の作りは同じなので同じ土台を使う（.badge を新しい呼び名とし、.freq も残す）。 */
.badge,.freq{
  display:inline-block;padding:1px 9px;border-radius:999px;font-size:.78em;font-weight:700;
  border:1px solid;white-space:nowrap;line-height:1.7;
  background:var(--bg);border-color:var(--line);color:var(--sub);
}
/* 優先度 T1〜T5。T1 が最優先。段階が下がるほど色を抜いていく。 */
.badge.tier-T1{background:#fdecea;border-color:#f0b3ad;color:#a3271f}
.badge.tier-T2{background:#fff2dd;border-color:#f0d3a2;color:#8a5b00}
.badge.tier-T3{background:#eef3f8;border-color:#cfdcea;color:#3f5a75}
.badge.tier-T4{background:#f2f3f5;border-color:#dde0e4;color:#636b75}
.badge.tier-T5{background:#f7f8f9;border-color:#e5e8eb;color:#828a94}

/* ランク（本命/準本命/対抗/補欠）。優先度と並べて出るので、色は T1〜T4 と揃える。
   クラス名は日本語を避け、本命=r1 … 補欠=r4 の順で対応させる。 */
.badge.rank-r1{background:#fdecea;border-color:#f0b3ad;color:#a3271f}
.badge.rank-r2{background:#fff2dd;border-color:#f0d3a2;color:#8a5b00}
.badge.rank-r3{background:#eef3f8;border-color:#cfdcea;color:#3f5a75}
.badge.rank-r4{background:#f2f3f5;border-color:#dde0e4;color:#636b75}

/* 根拠 S/A/B/C/C′/E/F。C′ はクラス名に使えないので ev-Cp と綴る。
   S（教員明言）だけを強く、あとは段階的に薄くする。E/F は推定なので枠線だけにする。 */
.badge.ev-S{background:#e9f0fb;border-color:#b9cfee;color:#12488f}
.badge.ev-A{background:#e6f5ec;border-color:#bfe3cd;color:#0f7a44}
.badge.ev-B{background:#eef3f8;border-color:#cfdcea;color:#3f5a75}
.badge.ev-C,.badge.ev-Cp{background:#f2f3f5;border-color:#dde0e4;color:#636b75}
.badge.ev-E,.badge.ev-F{background:transparent;border-color:#dde0e4;color:#828a94}

/* 出題区分（過去問／過去問改変／予想問題／授業内容再現問題）。
   区別が目的で順位ではないので、全部同じ中立色にする。 */
.badge.kind{background:var(--bg);border-color:var(--line);color:var(--sub);font-weight:400}

/* 検証状態の小さいバッジ。帯（.statusband）ほど強くは出さない。 */
.badge.st-verified{background:var(--ok-bg);border-color:#bfe3cd;color:var(--ok)}
.badge.st-consistent,.badge.st-source_only{background:var(--bg);border-color:var(--line);color:var(--sub)}
.badge.st-conflict{background:var(--ng-bg);border-color:#f3c6c2;color:var(--ng)}

/* ---------- 検証状態の帯 ---------- */
/* 解説の先頭に置く。verified は通常（帯を出さないか、出しても控えめ）、
   consistent / source_only は「確認の度合いが違う」だけなので目立たせない、
   conflict（疑義あり）だけを赤で強く出す。色だけに頼らず必ず文言も入れること。 */
.statusband{
  margin:0 0 12px;padding:9px 12px;border-radius:8px;font-size:.9em;line-height:1.65;
  border:1px solid var(--line);background:var(--bg);color:var(--sub);
}
.statusband b{color:var(--ink)}
.statusband.status-verified{background:var(--ok-bg);border-color:#bfe3cd;color:#14603a}
.statusband.status-verified b{color:var(--ok)}
.statusband.status-consistent,.statusband.status-source_only{
  background:var(--bg);border-color:var(--line);color:var(--sub);
}
.statusband.status-conflict{background:var(--ng-bg);border-color:#f3c6c2;color:#8d2019}
.statusband.status-conflict b{color:var(--ng)}

/* 注意書き（warn）。「画像が別症例」など、読む前に知っておく必要があるもの。
   検証状態とは別に出るので、帯が2本並んでも潰れない余白にしてある。 */
.warnband{
  margin:0 0 12px;padding:9px 12px;border-radius:8px;font-size:.9em;line-height:1.65;
  background:var(--warn-bg);border:1px solid #ecd7a8;color:#6b4e08;
}
.warnband b{color:#7a5a12}
.warnband::before{content:"⚠ ";font-weight:700}

/* 解説を書き直したときに気づいた、この問題そのものの不備。
   元資料の注意書き（.warnband）とは出どころが違うので、色を分けて控えめにする。 */
.concernband{
  margin:14px 0 0;padding:9px 12px;border-radius:8px;font-size:.88em;line-height:1.65;
  background:#f4f6f8;border:1px solid #dde2e7;color:#4d5660;
}
.concernband b{color:#39424c}

/* ---------- 画像所見（imageCheck） ---------- */
/* この教材の中心。解説の中で最初に目に入るよう、左に太い線を引いて塊にする。
   .core と同じ作りだが、色を accent にして「画像を見る」場所だと分かるようにする。 */
.imgcheck{
  border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;
  padding:10px 14px;margin:12px 0 16px;background:var(--accent-w);
}
.imgcheck h3{margin:0 0 6px;font-size:1.02em;color:var(--accent)}
.imgcheck p{margin:.25em 0 0;white-space:pre-wrap;line-height:1.85}
.imgcheck ul{margin:.3em 0 0;padding-left:1.2em}
.imgcheck li{margin:.2em 0}

/* ---------- 教員発言の引用（quotes） ---------- */
/* 本文と地の文が混ざらないよう、引用であることを線と背景で示す。
   発言そのものは書き換えない（S番号で原本に戻れるようにしてある）。 */
.quotes{display:flex;flex-direction:column;gap:8px;margin:.4em 0 .9em}
.quote{
  border:1px solid var(--line);border-left:3px solid var(--sub);border-radius:8px;
  padding:9px 13px;background:#fbfcfd;
}
.quote p{margin:0;white-space:pre-wrap;line-height:1.8}
.quote .qtext::before{content:"「"}
.quote .qtext::after{content:"」"}
/* 発言のID（L01-S01）と種別。発言本体より小さく、下に置く。 */
.quote .qsrc{display:block;margin-top:5px;font-size:.84em;color:var(--sub)}
.quote .qnote{display:block;margin-top:3px;font-size:.86em;color:var(--sub);line-height:1.6}

/* ---------- 画像のサムネイル横並び ---------- */
/* 1問に複数枚ある。並べて全体を見せ、クリックでライトボックスへ渡す。
   minmax(0,…) にしないと、横長の画像が入ったときに列が親からはみ出す。 */
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.thumb{
  flex:0 1 auto;min-width:0;border:1px solid var(--line);border-radius:8px;
  padding:6px;background:#fcfcfd;cursor:zoom-in;
}
.thumb img{display:block;max-width:100%;width:auto;max-height:200px;height:auto;border-radius:4px;background:#fff}
.thumb figcaption{margin-top:5px;font-size:.82em;color:var(--sub);line-height:1.5;max-width:260px}
/* 画像の来歴（差し替えた理由など）。キャプションの下に、行を変えて控えめに。 */
.thumb .imgnote{display:block;margin-top:4px;color:#6b7480;font-size:.85em;line-height:1.55}

.thumb:hover{border-color:var(--accent)}

/* 解答後の「出題テーマ」 */
.freq-sec{margin-top:20px;padding-top:16px;border-top:2px solid var(--line)}
/* テーマ1件ぶんの塊（関西共通試験QBの「知識単位クラスタ」に当たる） */
.kucard{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:12px 0;background:#fbfcfd}
.kuname{font-weight:700;margin:8px 0 4px;font-size:1.02em}
.kufacts{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:.88em;color:var(--sub)}
.kufacts span::before{content:"・"}
.kufacts span:first-child::before{content:""}

/* 類題リンク */
.simlist{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.simq{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);font-size:.88em;color:var(--accent);
}
.simq:hover{border-color:var(--accent)}
.simq i{font-style:normal;font-size:.82em;padding:0 5px;border-radius:5px;background:var(--bg);color:var(--sub)}
.simq.y i{background:var(--ok-bg);color:var(--ok)}
.simq.x i{background:var(--ng-bg);color:var(--ng)}
.simq.n i{background:var(--warn-bg);color:var(--warn)}
/* 答えだけ見た（未演習）。正解・不正解のどちらでもないので中間の色にする */
.simq.v i{background:var(--accent-w);color:var(--accent)}

/* ---------- 演習セット（最近の演習・演習リスト） ---------- */
/* 狭い画面では縦に積む。ボタンは折り返して並ぶので、はみ出さない。 */
.setlist{display:flex;flex-direction:column;gap:10px}
.setcard{border:1px solid var(--line);border-radius:9px;padding:11px 13px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.setmain{flex:1 1 220px;min-width:0}
.setname{font-weight:700;display:flex;gap:7px;align-items:center;flex-wrap:wrap;word-break:break-word}
.setprog{display:flex;gap:9px;align-items:center;margin-top:6px}
.setprog .bar{flex:1 1 auto;min-width:0}
.setacts{flex:0 1 auto;gap:7px}
.setacts .btn{white-space:nowrap}
.btn.danger{color:var(--ng);border-color:#f0c8c4}

/* ---------- 講義選び（L01〜L20） ---------- */
/* 関西共通試験QBでは「年度選び」だった場所。この教材では講義20コマを並べる。
   幅に応じて列数が変わる。狭い画面でも最低2列は入る大きさにしてある。
   .years/.yearbtn は移植元の名前。新しい名前 .lessons/.lessonbtn でも同じ見た目になる。 */
.years,.lessons{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.yearbtn,.lessonbtn{display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1.5px solid var(--line);background:var(--card);border-radius:9px;
  padding:11px 6px;cursor:pointer;font:inherit;color:inherit;min-width:0}
.yearbtn:hover,.lessonbtn:hover{border-color:var(--accent);background:var(--accent-w)}
.yearbtn b,.lessonbtn b{font-size:1.12em}
/* 講義名は「放射線治療」のように長い。省略せず折り返す（数文字しか読めないのを避ける）。 */
.lessonbtn .lname{font-size:.84em;line-height:1.45;word-break:break-word;text-align:center}

/* ---------- 今日の優先テーマ ---------- */
.todaylist{display:flex;flex-direction:column;gap:9px}
.todayrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.todaymain{flex:1 1 200px;min-width:0}
.todayname{font-weight:700;display:flex;gap:7px;align-items:center;flex-wrap:wrap;word-break:break-word}
.todayname .no{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:.8em;flex:0 0 auto}

/* ---------- 横棒グラフ（学習優先度・忘却検出） ---------- */
/* 棒そのものがボタン。テーマ名は省略せず折り返す（数文字しか読めないのを避ける）。 */
.tbars{display:flex;flex-direction:column;gap:7px}
.tbar{display:grid;grid-template-columns:1fr;gap:4px;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  background:var(--card);cursor:pointer;font:inherit;color:inherit;min-width:0}
.tbar:hover{border-color:var(--accent);background:var(--accent-w)}
.tbname{font-weight:700;word-break:break-word;line-height:1.4}
.tbtrack{display:block;height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.tbtrack>i{display:block;height:100%;background:var(--accent)}
.tbval{white-space:normal}

/* 全体正答率。円グラフではなく数字＋バーで示す。 */
.bigrate{margin-top:14px;border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.bigrate .big{font-size:1.7em;color:var(--accent)}

/* ---------- 散布図 ---------- */
.scatterwrap{margin:10px 0 4px}
.scatter{width:100%;height:auto;display:block;overflow:visible}
.scatter .ax{stroke:var(--sub);stroke-width:1}
.scatter .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.scatter .lb{fill:var(--sub);font-size:9px}
.scatter .dot{fill:var(--accent);fill-opacity:.45;stroke:var(--accent);cursor:pointer}
.scatter .dot.bad{fill:var(--ng);stroke:var(--ng)}
.scatter .dot:hover,.scatter .dot:focus{fill-opacity:.85;outline:none;stroke-width:2}

/* ---------- 誤答肢の繰り返し ---------- */
.misslist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.missrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:8px;padding:8px 11px;background:var(--card);
  cursor:pointer;font:inherit;color:inherit;min-width:0}
.missrow:hover{border-color:var(--accent);background:var(--accent-w)}
.missid{font-weight:700}
.misspick{color:var(--ng)}
details.detail>summary{font-weight:700;cursor:pointer;padding:2px 0}

/* 類題確認モードの帯 */
.peekbar{background:var(--warn-bg);border-color:#ecd7a8}

/* 解説閲覧モードの帯。通常演習と見分けがつくよう、毎問いちばん上に出す。
   .spread は狭い画面で縦に折り返すので、ボタンがはみ出すことはない。 */
.modebar{background:var(--accent-w);border-color:#c3dcf4}
.modebar .spread{gap:10px}

/* 出題テーマ一覧。PCでは行、スマホではカードとして読める形にする。 */
.themelist{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.theme{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--card)}
.theme .th1{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.theme .th1 .rk{font-weight:700;color:var(--sub);font-size:.86em;min-width:3.2em}
.theme .th2{margin:7px 0 9px;font-weight:700;line-height:1.6}
.theme .th3{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.theme .th3 .spacer{flex:1}
.bar.mini{width:110px;flex:none}

@media(max-width:640px){
  .kufacts{gap:4px 10px;font-size:.85em}
  .theme .th3{gap:8px}
  .theme .th3 .spacer{flex:0 0 100%;height:0}
  .theme .th3 .btn{flex:1}
  .bar.mini{width:100%;flex:1 1 100%}
  .simq{font-size:.92em;padding:7px 11px}
}

/* ---------- 解説の追加セクション ---------- */
.expl ul.findings li{margin:.2em 0}
/* 図表の前に置く「なぜこれを見るのか」の一文 */
.expl p.leadin{margin:.9em 0 .5em}

.reviewnote{
  margin-top:16px;padding:10px 14px;border-radius:var(--r);
  background:var(--warn-bg);border:1px solid #ecd7a8;font-size:.9em;
}

@media(max-width:640px){
  /* 画像は幅に合わせて縮めると所見が読めない。高さだけ少し抑える。
     細かく見るのはライトボックス（クリックで拡大）の役目。 */
  .thumb img{max-height:160px}
  .thumb figcaption{max-width:100%}
}
@media(min-width:900px){
  /* PCでは小さい画像を無駄に引き伸ばさない */
  .thumb img{max-width:min(100%,860px);max-height:260px}
}

/* 否定形の設問で ○ の意味を補う一行（監査 F15）。
   選択肢のすぐ下に置き、記号の意味だけを確定させる。 */
.negnote { margin: 6px 0 0; padding: 6px 8px; border-left: 3px solid var(--line); background: var(--bg); }

/* 解説の「核」（監査 F09）。長い解説の前に置く短い要点。
   根拠を一次資料まで確認した問題にだけ出る。 */
.core { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px;
        padding: 10px 14px; margin: 12px 0; background: var(--card); }
.core h3 { margin: 0 0 6px; font-size: 1.02em; }
.core h4 { margin: 10px 0 4px; font-size: .95em; color: var(--sub); }
.core ul { margin: 4px 0; padding-left: 1.2em; }
.core li { margin: 3px 0; }
.expl-full > summary { cursor: pointer; font-weight: 700; padding: 8px 0; }

/* ---- 今日の復習 v2 ----
   検証幅は 390px。左右余白16px・card内16pxのまま、横スクロールを起こさない。 */

/* いま押すと出る件数。大きい数は32px。総母数は横に並べない。 */
.reviewcard .deckbig { font-size: 32px; font-weight: 700; line-height: 1.15; margin: 2px 0 2px; }
.reviewcard .deckbig .unit { font-size: 18px; font-weight: 700; margin-left: 2px; }
.reviewcard .muted { font-size: 14px; }
.btn.wide { display: block; width: 100%; box-sizing: border-box; margin: 10px 0 6px;
  min-height: 44px; }
.reviewcard .link { display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 2px; color: var(--accent); text-decoration: underline; }

/* 自己評価。2列×2行で固定し、各タップ領域を44px以上にする。
   日数・日付・段階はここに出さない（解説を読む邪魔になるため）。 */
.ratingwrap { margin: 14px 0; }
/* 横一列。2列×2行だとボタンが大きくなりすぎて、解説の前を占領していた。
   4つとも同じ幅にして、記号の下に短い言葉を置く。
   幅が狭い端末でも 1fr が均等に縮むので、はみ出さない。 */
/* minmax(0,1fr) にしないと、各列の下限が中身の幅（min-content）になり、
   文字を大きくした狭い画面でページごと横へはみ出す（実測: 195px幅で 233px になった）。 */
.rating.anki2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
.rating.anki2 button { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; min-height: 44px; padding: 6px 2px; line-height: 1.2;
  width: 100%; min-width: 0; box-sizing: border-box; }
.rating.anki2 button b { font-size: 1em; }
/* 狭いときは折り返させる。nowrap にすると列が縮まずにはみ出す。 */
.rating.anki2 .rlabel { font-size: .78em; }
.rating.anki2 button[disabled] { opacity: .45; cursor: not-allowed; }
.ratingnote { margin-top: 8px; }

/* 復習の設定。入力は必ず親幅に収める（date は min-width:0 が要る）。 */
.card .field input[type=number], .card .field input[type=date] {
  width: 100%; box-sizing: border-box; min-width: 0; min-height: 44px;
}
/* 日付と「解除」を1行に収める。date は min-width:0 が無いと縮まない。 */
.card .field .row { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.card .field .row input[type=date] { flex: 1 1 auto; width: auto; min-width: 0; }
.card .field .row .btn { flex: 0 0 auto; min-height: 44px; }
.ivrow { display: flex; gap: 8px; margin: 6px 0; }
.ivrow input { flex: 1 1 0; width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px;
  text-align: center; }
.formmsg { margin: 8px 0 0; color: var(--sub); font-size: .9em; }
/* 直したい入力のそばに出す指摘。色だけで示さず、文言で理由を書く。 */
.fielderr { display: block; margin-top: 6px; font-size: .88em; color: #b3261e; font-weight: 700; }

.reviewhow { margin-top: 8px; }
.reviewhow > summary { cursor: pointer; padding: 8px 0; min-height: 44px;
  display: flex; align-items: center; }
.reviewhow p { margin: 6px 0; }
.reviewhow ul { margin: 6px 0; padding-left: 1.2em; }
.reviewhow li { margin: 3px 0; }

/* 画面が古いままサーバーに拒否されたときの更新の導線（428）。
   選んだ内容は消さないので、更新してから押し直せば解答は1回だけ記録される。 */
.reloadprompt {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 14px; border-radius: 10px;
  background: var(--card); border: 2px solid var(--accent);
  box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: .95em;
}
.reloadprompt .btn { min-height: 44px; }

/* 未保存の変更があるまま離れようとしたときの確認。
   保存・破棄・編集を続ける の3択。2択にすると保存したい人の編集が消える。 */
.modalback {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(16,24,40,.45);
}
.modal {
  background: var(--card); border-radius: var(--r); padding: 18px 20px;
  max-width: 420px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.modal .row { margin-top: 14px; }
.modal .btn { min-height: 44px; flex: 1 1 auto; }