[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}
/* 情報欄に置く「問題一覧」。頻出度バッジや区分ラベルと並ぶので、
   .btn.sm より一段小さくして高さを揃える。狭い画面では qhead ごと折り返る
   （.qhead は flex-wrap:wrap）ので、はみ出したり問題数表示と重なったりしない。 */
.qhead .qlistbtn{padding:4px 12px;font-size:.85em;min-height:30px;white-space:nowrap;flex:0 0 auto}
.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;
  position:relative;font-family:inherit;
}
/* 触れる範囲だけを 44px 四方へ広げる。枠線も並びも動かさないので、見た目は同じ。 */
.choice .kill::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;
}
.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;
  /* <button> にしたので、ブラウザー既定の字体・色・行送りを打ち消す（監査 F14） */
  font-family:inherit;color:inherit;line-height:1.35;margin:0;text-align:left;
  /* 触って押せる高さを確保する。見た目の丸みと余白は変えない */
  min-height:32px;
}
.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}
/* 描き起こした図（本文にじかに描いた SVG）の拡大。#lbImg と同じく、実寸（--w）を上限に画面幅へ合わせ、押すと等倍 */
#lbSvg{display:block;width:var(--w);max-width:100%;height:auto;cursor:zoom-in;letter-spacing:normal}
#lbSvg.zoom{max-width:none;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 200 より上）。
   画面全体を不透明に覆い、決まった文言だけを出す。解除されると隠れて元の画面が残っている。 */
#maintOverlay{position:fixed;inset:0;z-index:300;background:var(--bg);color:var(--ink);
  display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
#maintOverlay .maintmsg{margin:0;font-size:1.08em;line-height:1.9;max-width:34em}
#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{
  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;
}
.freq.fA{background:#fdecea;border-color:#f0b3ad;color:#a3271f}
.freq.fB{background:#fff2dd;border-color:#f0d3a2;color:#8a5b00}
.freq.fC{background:#eef3f8;border-color:#cfdcea;color:#3f5a75}
.freq.fD{background:#f2f3f5;border-color:#dde0e4;color:#636b75}

/* 解答後の「出題傾向」 */
.freq-sec{margin-top:20px;padding-top:16px;border-top:2px solid var(--line)}
.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}

/* ---------- 回数別（回の選択） ---------- */
/* 幅に応じて列数が変わる。狭い画面でも最低2列は入る大きさにしてある。 */
.years{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.yearbtn{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{border-color:var(--accent);background:var(--accent-w)}
.yearbtn b{font-size:1.12em}

/* ---------- 今日の優先テーマ ---------- */
.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}
/* 折りたたみの中に入れる小さなカード。
   カードの中にカードを入れると枠が二重に見えるので、こちらは薄い枠にする。 */
.subcard{border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-top:12px}

/* 類題確認モードの帯 */
.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}

/* AIが整理した比較表。画像ではなくHTMLなので検索・選択・折返しができる。 */
.gentable{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 16px;background:var(--card)}
.gt-title{padding:9px 14px;background:var(--accent-w);color:var(--accent);font-weight:700;font-size:.94em}
.gentable table{font-size:.92em}
.gentable th,.gentable td{padding:8px 11px;border-bottom:1px solid var(--line)}
.gentable th{background:#f7f9fb;white-space:normal}
.gentable tr:last-child td{border-bottom:0}
.gt-src{padding:6px 14px 9px;font-size:.8em;color:var(--sub)}

/* 参考資料から切り出した図表 */
.reffig{margin:0 0 18px;padding:0}
.reffig .imgwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
.reffig img{
  display:block;max-width:100%;height:auto;cursor:zoom-in;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
}
.reffig .zoomhint{margin-left:8px;font-size:.9em;opacity:.7;white-space:nowrap}
.reffig .zoomhint::before{content:"🔍 "}
.reffig figcaption{margin-top:6px;font-size:.86em;color:var(--sub);line-height:1.7}
.reffig .lab{color:var(--ink);font-weight:700}
/* 出典は解説本体より目立たせない */
.reffig .refsrc{font-size:.92em;opacity:.85}

.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){
  /* 横長の図表は幅に合わせて縮めると字が読めない。
     高さを抑えたうえで横スクロールさせ、読める大きさを保つ。 */
  .reffig.wide .imgwrap img{max-height:300px;width:auto;max-width:none;min-width:0}
  .reffig .imgwrap{box-shadow:inset -14px 0 12px -14px rgba(0,0,0,.25)}
  .gentable table{font-size:.88em}
  .gentable th,.gentable td{padding:7px 9px}
  /* 表は潰さず横スクロールさせる（.tablewrap が overflow-x:auto） */
  .gentable .tablewrap table{min-width:460px}
}
@media(min-width:900px){
  /* PCでは小さい図を無駄に引き伸ばさない */
  .reffig img{max-width:min(100%,860px)}
}

/* ---------- 参考図の出所を分ける（監査 F05） ---------- */
/* この問題そのものに対して選ばれた図と、同じテーマの代表問題向けに選ばれて
   転用された図を分けて出す。後者は畳んでおき、読む負担を増やさない。 */
.themerefs{
  margin:14px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);
}
.themerefs>summary{cursor:pointer;font-weight:700;font-size:.94em}
.themerefs>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.themerefs>p{margin:8px 0 4px;line-height:1.6}

/* 正答の扱いについての一行注意（監査 F04）。長い解説を読む前に見える位置へ置く。 */
.uncertain{
  margin:0 0 12px;padding:9px 12px;border-radius:8px;font-size:.9em;line-height:1.6;
  background:#fff6e0;border:1px solid #f0d99a;color:#6b4e08;
}

/* 異議の詳細。受験者の主張を厚生労働省の取扱いと同列に見せないよう、畳んで出す。 */
.uncertain .disputebody{margin-top:8px;padding-top:8px;border-top:1px solid #e8d6a4}
.uncertain .disputebody>summary{cursor:pointer;font-weight:700}
.uncertain .disputebody>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.uncertain .disputebody p{margin:8px 0 0;line-height:1.65}

/* 否定形の設問で ○ の意味を補う一行（監査 F15）。
   選択肢のすぐ下に置き、記号の意味だけを確定させる。 */

/* 解説の「核」（監査 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; }

/* ---------- 基準値パネル（問題画面の「基準値」ボタン。app.js の refval*） ----------
   狭い画面を基本にして、1100px 以上だけ右端の固定パネルに切り替える（app.js の REFVAL_WIDE と同じ幅）。
   狭い画面 … 全面のシート（タブレット幅では右から 440px、残りに幕）。背後のスクロールは body.refval-open で止める。
   広い画面 … 右端に 420px。本文（main）を左へ寄せて並べ、幕は出さない（問題を解きながら見るため）。
   重なり順: 更新の案内 .reloadprompt(60) < 幕(69) < パネル(70) < 問題一覧・保存の確認 .modalback(80)
            < 画像拡大 #lightbox(100) < #toast(200)。パネルから図を拡大しても拡大が上に来る。 */
:root{--rv-w:420px}
.refvalbtn[aria-expanded="true"]{background:var(--accent-w);border-color:var(--accent)}
/* タッチ端末の標準のタップ強調は、押した直後に開いたパネルより手前に一瞬描かれてちらつく。
   押した状態は aria-expanded の地色で見えるので、強調は消す。 */
.refvalbtn{-webkit-tap-highlight-color:transparent}
#refvalPanel{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(440px,100%);display:flex;flex-direction:column;
  background:var(--bg);border-left:1px solid var(--line);box-shadow:-6px 0 24px rgba(16,24,40,.14);line-height:1.6;
  padding-right:env(safe-area-inset-right,0px)}
#refvalPanel:focus,#refvalTitle:focus{outline:none}
#refvalScrim{position:fixed;inset:0;z-index:69;background:rgba(16,24,40,.4)}
body.refval-open{overflow:hidden}
.rv-head{flex:none;display:flex;align-items:center;gap:8px;padding:6px 10px;background:#e6ebf1;border-bottom:1px solid var(--line);
  padding-top:calc(6px + env(safe-area-inset-top,0px))}
.rv-x{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:8px;background:none;color:#3d4650;cursor:pointer}
.rv-x:hover{background:rgba(16,24,40,.08)}
/* 見出しは帯の中央に置く。左の閉じるボタンと同じ幅（44px）を右に空けて釣り合わせる */
#refvalTitle{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 44px 0 0;font-size:1.12em;line-height:1.3}
.rv-badge{display:inline-grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:#3d4650;color:#fff;font-size:.9em;font-weight:700}
.rv-chips{flex:none;display:flex;flex-wrap:wrap;gap:5px;padding:8px 10px;background:var(--card);border-bottom:1px solid var(--line)}
.rv-chip{font:inherit;font-size:.8em;line-height:1.3;min-height:30px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer}
.rv-chip:hover{border-color:var(--accent);color:var(--accent)}
/* スクロールするのはここだけ。端まで来ても後ろのページを動かさない（overscroll-behavior） */
.rv-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px}
.rv-body:focus{outline:none}
.rv-body:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.rv-msg{text-align:center;padding:24px 8px}
/* 列の幅を固定し、長い値は折り返す。表が画面からはみ出して横スクロールになることがない */
.rv-table{table-layout:fixed;width:100%;border-collapse:collapse;background:var(--card);font-size:.88em;line-height:1.55}
.rv-table col.rv-c1{width:3.8em}
.rv-table col.rv-c2{width:38%}
.rv-table th,.rv-table td{border:1px solid var(--line);padding:6px 8px;vertical-align:middle;overflow-wrap:anywhere}
.rv-table th.rv-sec{background:#eef1f5;color:var(--ink);font-size:1em;font-weight:700;text-align:center;white-space:normal;padding:6px 3px;line-height:1.35}
/* 分類名はふだんはセルの真ん中（参考の QBオンラインと同じ）。セルが見える高さより長い分類（生化学・血液）では、
   上端・下端に来たところで止まってセルの中を付いてくるので、途中を読んでいても何の分類かが見える */
.rv-secname{position:sticky;top:4px;bottom:4px;display:block}
.rv-val{white-space:pre-line}
.rv-note{display:block;margin-top:2px;font-size:.84em;color:var(--sub);line-height:1.45}
/* 分画・基準の内訳の行。「・」を字下げの外に出し、折り返した2行目も本文の頭にそろえる */
.rv-sub .rv-item{padding-left:1.4em;color:var(--sub)}
.rv-sub .rv-item::before{content:"・";margin-left:-1em}
.rv-foot{flex:none;display:flex;justify-content:center;padding:8px 10px;background:var(--card);border-top:1px solid var(--line);
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
.rv-foot .btn{min-width:8em;min-height:40px}
.rv-x:focus-visible,.rv-chip:focus-visible,.refvalbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(min-width:1100px){
  /* 上端は上部バーの下（--rv-top は app.js の refvalPlace が入れる）。上部バーはスクロールで流れるので、そのぶん伸びる */
  #refvalPanel{top:var(--rv-top,0px);width:var(--rv-w);box-shadow:-2px 0 10px rgba(16,24,40,.08)}
  #refvalScrim{display:none}
  body.refval-open{overflow:visible}
  .rv-head{padding-top:6px}
  /* 本文はパネルの左の残りに収める。上限は元と同じ 1000px で、残りの幅の中央に置く */
  body.refval-open main{margin-left:max(0px,calc((100% - var(--rv-w) - 1000px) / 2));margin-right:var(--rv-w)}
  body.refval-open .reloadprompt{right:calc(var(--rv-w) + 12px)}
}
/* 背の低い画面（スマホの横向きなど）。見出し帯・分類ボタン・下の閉じるが高さの半分を取り、表が 200px ほどしか
   見えなくなるので、分類ボタンを1段の横スクロールにし、上下の帯を細くする。閉じる手段（左上のアイコン・下の
   閉じる・Esc）は減らさない。広い画面の .rv-head の指定より後ろに置いて、こちらを効かせる。 */
@media(max-height:500px){
  .rv-head{padding-top:calc(2px + env(safe-area-inset-top,0px));padding-bottom:2px}
  .rv-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding:5px 10px;scrollbar-width:thin}
  .rv-chip{flex:none;white-space:nowrap}
  .rv-foot{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
}
@media print{ #refvalPanel,#refvalScrim{display:none!important} body.refval-open main{margin:0 auto} }

/* 焦点の輪郭（監査 F14）。どこにいるかがキーボード利用者に常に見えるようにする。
   :focus-visible なので、マウスで押しただけでは出ない。 */
.chip:focus-visible,.choice:focus-visible,.choice .kill:focus-visible,
.fig img:focus-visible,.reffig img:focus-visible,#lbImg:focus-visible,#lbClose:focus-visible,
.lec-body figure svg.lec-redrawn:focus-visible,#lbSvg:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;
}
#lbImg:focus-visible,#lbClose:focus-visible,#lbSvg:focus-visible{outline-color:#fff}

/* 押すと出る説明（監査 F14）。title= は触って使う画面に出ないので、その代わり。 */
.hashint{position:relative;cursor:help}
.hintpop{
  position:absolute;left:0;top:calc(100% + 6px);z-index:30;
  min-width:min(260px,78vw);max-width:min(340px,88vw);
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;font-size:.82rem;font-weight:400;line-height:1.5;text-align:left;
  box-shadow:0 6px 22px rgba(16,24,40,.16);white-space:normal;
}
.simlegend{margin-top:6px}

/* 保存できたことの印（監査 F17）。サーバーが解答IDを返したときだけ出る。 */
.pill.saved{background:var(--ok-bg);color:var(--ok);border-color:#bfe3c8}

/* 解く前の手ごたえ／誤答の理由（監査 F08）。どちらも任意の1タップ。 */
.preconfwrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 2px}
.preconf{display:flex;gap:6px;flex-wrap:wrap}
.preconf button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.reasonwrap{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));gap:6px}
.reasons button{
  font-family:inherit;font-size:.86em;line-height:1.25;min-height:40px;padding:6px 8px;
  border:1.5px solid var(--line);background:var(--card);color:inherit;border-radius:8px;cursor:pointer;
  width:100%;min-width:0;box-sizing:border-box;
}
.reasons button:hover{border-color:#b9c6d4}
.reasons button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.reasons button:focus-visible,.preconf button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.reasondesc{margin-top:6px}
.pill.pc.sure{background:var(--ng-bg);color:var(--ng);border-color:#f3c6c2}
.pill.pc.unsure{background:#fff6e5;color:#8a5a00;border-color:#f0d9a8}

/* 本番形式（監査 F12） */
.exambar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:10px 0 14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#f7f9fb;
}
/* 「問題一覧」と右隣の「基準値」。帯が狭い画面で折り返すとき、2つを離さず一緒に次の段へ送る（app.js の examListButtons） */
.exambtns{display:inline-flex;align-items:center;gap:10px;flex-wrap:nowrap}
.examclock{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.15em}
.examclock.low{color:var(--ng)}
.examgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin-top:10px;
  max-height:52vh;overflow:auto}
.examcell{
  font-family:inherit;font-size:.85em;min-height:40px;border-radius:6px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);color:inherit;
}
.examcell.done{background:var(--accent);color:#fff;border-color:var(--accent)}
.examcell.part{background:#fff6e5;border-color:#f0d9a8}
.examcell.flag{box-shadow:inset 0 -4px 0 var(--ng)}
/* いま表示している問題。色ではなく枠で示す（解答の有無の色をつぶさない） */
/* 背景色（未解答＝白／選びかけ＝薄い黄／解答済み＝青）のどれに重なっても見えるよう、
   薄い色ではなく本文と同じ濃さの枠にする。 */
.examcell.cur{border-color:var(--fg);border-width:2.5px;font-weight:700}
.examcell:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.examcell.mini{min-height:0;width:20px;height:14px;padding:0;vertical-align:-2px;cursor:default}
.examlegend{margin-top:10px;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.qbar button.on{background:var(--ng-bg);color:var(--ng);border-color:#f3c6c2}

/* 習得の段階（監査 F10） */
.pill.m0{background:#f1f3f5;color:var(--sub)}
.pill.m1{background:#fff6e5;color:#8a5a00;border-color:#f0d9a8}
.pill.m2{background:var(--accent-w);color:var(--accent);border-color:#c3d6ea}
.pill.m3{background:var(--ok-bg);color:var(--ok);border-color:#bfe3c8}

/* 読み方の説明（監査 F10）。閉じておき、押すと開く。 */
.howto{margin:8px 0 4px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fbfcfd}
.howto summary{cursor:pointer;font-size:.9em}
.howto ul{margin:8px 0 0;padding-left:1.2em;line-height:1.7}

/* 「対象N問 → 今回M問」（監査 F11）。優先度ではなく、こなせる量を見せる。 */
.quick .amount{display:block;margin-top:3px;font-size:.85em;color:var(--accent);font-weight:600}
.quick .amount .muted{font-weight:400;color:var(--sub)}
.timebox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding:10px;border:1px solid var(--line);border-radius:8px;background:#f7f9fb}
.timebox .pace{font-size:.85em;color:var(--sub)}

/* ホームの挨拶（オーナー指示 2026-09-13）。
   h1 の既定（1.5em）だと主張が強いので、この見出しだけ一段落とす。
   下のメインコンテンツより目立たず、開いたときに自然に目へ入る大きさ。 */
.greetbox{min-width:0}
.greet{font-size:1.22em;margin:.1em 0 .15em;line-height:1.35}
.greetsub{font-size:.9em;color:var(--sub);line-height:1.5}
@media(max-width:640px){
  .greet{font-size:1.1em}
  .greetsub{font-size:.86em}
}

/* ---------- 管理コンソール ---------- */
/* 既存の .card / .grid / .bar / .pill / .tablewrap をそのまま使う。
   ここで足すのは、この画面にしか出てこない並び（絞り込みの行と、数字の右寄せ）だけ。 */

/* 検索・並び替え・絞り込みの1行。狭い画面では自然に折り返す。 */
/* 総数など、母数を持たない数字を横に並べる */
.adminhead{display:flex;flex-wrap:wrap;gap:26px;align-items:baseline;margin-top:10px}
.adminbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.adminbar input[type=search],.adminbar select{
  padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font-family:var(--font);font-size:.92em;min-width:0
}
.adminbar input[type=search]{flex:1 1 200px}

/* 数字は右寄せ。桁が揃わないと多い少ないが読み取れない。
   管理コンソールと、学習者自身が見る進捗の詳細で共用する（以前の .admintable）。 */
.datatable td.num,.datatable th.num{text-align:right;white-space:nowrap}
/* 列が多いので、狭い画面では横スクロールにする（.tablewrap が overflow-x:auto）。
   min-width を入れないと各列が潰れて折り返し、かえって読めなくなる。 */
.datatable table{min-width:720px}
.datatable td .bar{min-width:60px}

@media(max-width:640px){
  /* 390px で確かめている。表は横スクロール、それ以外は縦に積む。 */
  .adminbar input[type=search]{flex:1 1 100%}
  .adminbar select,.adminbar .btn{flex:1 1 auto}
}

/* ---------- 参考書（MEC総まとめの本文） ---------- */
.rb-red{color:var(--ng);font-weight:700}
.rb-b{background:linear-gradient(transparent 62%,#ffe58a 62%)}
.rb-note{color:var(--sub);font-size:.93em}
.rb-arrow{color:var(--accent);font-weight:700;padding:0 .1em}
.rb-star{color:#d48a00;margin-right:4px}
.rb-page mark,.rb-result mark{background:#fff3a0;color:inherit;border-radius:3px;padding:0 1px}
.rb-nav{gap:8px;margin:4px 0 10px}
.rb-h{margin:26px 0 10px;padding:8px 12px;border-left:5px solid var(--accent);background:var(--accent-w);border-radius:0 8px 8px 0}
.rb-h h2{margin:0;font-size:1.2em}
.rb-hnote{margin:2px 0 0;color:var(--sub);font-size:.9em}
.rb-p{line-height:1.9}
.rb-list,.rb-table,.rb-fig,.rb-photo{margin:0 0 16px}
.rb-list{border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:var(--card)}
.rb-list.star2{border-left:4px solid #d48a00}
.rb-list.star1{border-left:4px solid #ecd08a}
.rb-list h3,.rb-table h3,.rb-fig h3{margin:0 0 6px;font-size:1.04em}
.rb-list ul{margin:0;padding-left:1.2em;line-height:1.85}
.rb-list ul ul{color:var(--sub)}
.rb-table table{border-collapse:collapse;width:100%;min-width:640px;font-size:.95em;line-height:1.75}
.rb-table th,.rb-table td{border:1px solid var(--line);padding:7px 9px;vertical-align:top;text-align:left}
.rb-table thead th{background:var(--topbar-bg);white-space:nowrap}
.rb-table tbody th{background:#f3f6fa;color:var(--ink);font-weight:700;min-width:6em}
.rb-table tbody tr:nth-child(even) td{background:#fbfcfd}
.rb-fig{border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:var(--card)}
.rb-svg{overflow-x:auto;color:var(--ink)}
.rb-svg svg{display:block;width:100%;max-width:720px;height:auto;margin:0 auto;font-family:var(--font)}
.rb-fig figcaption{font-size:.88em;color:var(--sub);margin-top:6px}
.rb-photo{border:1px dashed var(--line);border-radius:8px;padding:8px 12px;background:#fafbfc}
.rb-photo p{margin:4px 0 0;color:var(--sub)}
/* 実画像が入った写真枠。枠線を実線にして「中身がある」ことを見た目でも分けている。 */
.rb-photo.hasimg{border-style:solid;background:var(--card);margin:0 0 16px}
.rb-photo.hasimg .rb-phead{margin-bottom:6px}
.rb-pimgs{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
/* 光顕と電顕の組など、2枚で1つの所見を示すものは横に並べる */
.rb-pimgs.two .rb-pimg{flex:1 1 300px;min-width:min(100%,280px)}
.rb-pimgs.two .rb-pimg img{width:100%}
.rb-pimg{position:relative;display:inline-block;max-width:100%;line-height:0}
.rb-pimg img{display:block;width:auto;height:auto;max-width:100%;max-height:440px;border-radius:4px;background:#fff;cursor:zoom-in}
/* 出典。借りものを出すための条件なので、消えないよう画像と同じ枠に置く。
   字は小さくてよいが、拡大せずに読める大きさ（10px）より下げない。 */
.rb-credit{position:absolute;right:2px;bottom:2px;max-width:calc(100% - 4px);
  font-size:10px;line-height:1.35;color:#f2f4f6;background:rgba(20,24,30,.62);
  padding:1px 5px;border-radius:3px;text-decoration:none;box-sizing:border-box;
  text-align:right;word-break:break-word}
.rb-credit:hover,.rb-credit:focus{background:rgba(20,24,30,.9);text-decoration:underline}
.rb-photo.hasimg figcaption{margin-top:6px}
.rb-photo.hasimg figcaption .rb-pdesc{margin:0;font-size:.92em}
@media (max-width:560px){.rb-pimg img{max-height:300px}}
.rb-hit{outline:3px solid #f2c200;outline-offset:2px}
tr.rb-hit td,tr.rb-hit th{background:#fff9d6 !important}
.rb-crops{margin-top:18px;border-top:1px solid var(--line);padding-top:10px}
.rb-crops summary{cursor:pointer;color:var(--accent)}
.rb-sug{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.rb-sugbtn{cursor:pointer;font:inherit}
.rb-result{padding:12px 0;border-top:1px solid var(--line)}
.rb-rtitle{font-weight:700;font-size:1.05em}
.rb-result ul{margin:6px 0 0;padding-left:1.2em;line-height:1.8;font-size:.95em}
.rb-result li a{text-decoration:none;color:var(--ink)}
.rb-result li a:hover b{text-decoration:underline}
.rb-toch{font-size:1.05em;margin:18px 0 8px}
.rb-book{border-top:1px solid var(--line);padding:8px 0}
.rb-book summary{cursor:pointer}
.rb-book ul{margin:6px 0 0;padding-left:1.4em;line-height:1.9}

/* 参考書の見出しに添える「β版」。まだ作りかけであることを一目で分かるようにする。 */
.rb-beta{color:var(--accent);font-size:.62em;font-weight:700;margin-left:.5em;vertical-align:.18em;letter-spacing:.02em}
.rb-qs{margin:18px 0 4px;border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--card)}
.rb-qs .simlist{margin-top:4px}
.rb-links ul{margin:6px 0 0;padding-left:1.2em;line-height:1.8}
.rb-links .rb-why{margin:2px 0 8px}
.rb-secqs{margin:10px 0 18px;padding:8px 12px}
.rb-groups{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.rb-groups>span{flex-basis:100%}
.rb-grp{cursor:pointer;font:inherit;font-size:.9em;color:var(--ink)}
.rb-grp b{margin-left:6px;color:var(--accent);font-weight:600}

/* ---------- 講義（読む授業） ----------
   Q-Assist 総まとめ講座の講義を書き起こした読み物。本文は .lec-body の中だけで効かせる
   （本文の class は reference/lectures/sanitize.mjs の OK_CLASSES に限られている）。
   元は単独のサイトとして作ったもので、その見た目をQBの配色と文字に合わせて移した。 */
.lec-page h1{margin:.2em 0 .5em;line-height:1.45}
.lec-toplink{margin:4px 0 2px}
.lec-entry{margin:4px 0 18px;padding:10px 14px;border:1px solid #c5ddf6;border-left:4px solid var(--accent);
  border-radius:0 8px 8px 0;background:var(--accent-w)}
.lec-entry-h{display:block;font-size:.84em;font-weight:700;color:var(--accent);margin-bottom:6px;letter-spacing:.04em}
.lec-chips{display:flex;flex-wrap:wrap;gap:6px}
.lec-chip{display:inline-flex;align-items:baseline;gap:.6em;padding:4px 12px;border-radius:999px;
  background:var(--card);border:1px solid #c5ddf6;color:var(--ink);text-decoration:none;font-size:.92em;line-height:1.6}
.lec-chip b{color:var(--accent);font-weight:700;white-space:nowrap}
.lec-chip:hover{border-color:var(--accent)}
.lec-bookrow{margin:6px 0 4px;padding:8px 12px;border-radius:8px;background:var(--accent-w)}
.lec-refs{margin-top:28px}
.lec-list,.lec-toc{margin:6px 0 0;padding-left:1.6em;line-height:2}
.lec-subs{margin:0 0 14px;border:1px solid var(--line);border-radius:8px;padding:6px 14px;background:var(--card)}
.lec-subs summary{cursor:pointer;color:var(--accent);font-weight:700}
.lec-subs ol{margin:4px 0 6px;padding-left:1.4em;line-height:1.9}
.lec-subs .linkbtn{text-decoration:none;text-align:left;padding:0;font:inherit;color:var(--accent)}

.lec-body{line-height:1.95;letter-spacing:.01em}
.lec-body p{margin:.85em 0}
.lec-body h3{margin:2.1em 0 .4em;padding-bottom:6px;font-size:1.16em;font-weight:800;color:#1b4a6e;
  border-bottom:2px solid #dde8f2;scroll-margin-top:12px}
.lec-body h4{margin:1.6em 0 .2em;font-size:1em;font-weight:700;color:#b45309}
.lec-body figure{margin:18px 0 22px;text-align:center}
.lec-body figure img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:zoom-in}
.lec-body figure.narrow img{max-width:min(100%,660px)}
.lec-body figcaption{margin-top:6px;font-size:.82em;color:var(--sub);line-height:1.6}
/* 描き起こした図（SVG）。原本の切り抜きは figcaption の小さな入口から拡大表示で見る */
.lec-body figure img.lec-redrawn{border-color:#d3dde8}
/* 本文の中にじかに描く SVG（取れなかったときは上の img で出す）。見え方は img とそろえる：
   実寸を上限（app.js が図ごとに max-width を付ける）に、狭い画面では縮む。
   本文の字間（.lec-body の letter-spacing）が図の文字に移ると文字幅が変わるので、図の中は元に戻す */
.lec-body figure svg.lec-redrawn{width:100%;height:auto;border:1px solid #d3dde8;border-radius:6px;background:#fff;
  cursor:zoom-in;letter-spacing:normal}
.lec-body .lec-orig{font:inherit;font-size:.92em;color:var(--sub);padding:0 2px;text-decoration:underline dotted;white-space:nowrap}
.lec-body .lec-orig:hover{color:var(--accent)}
.lec-body .note,.lec-body .key,.lec-body .warn,.lec-body .memo{border-radius:10px;padding:12px 18px;margin:18px 0;font-size:.97em}
.lec-body .note{background:#eef5fa;border-left:5px solid #2f6f9f}
.lec-body .key{background:#fff8ec;border-left:5px solid #e0a800}
.lec-body .warn{background:#fdf2f4;border-left:5px solid #d83a56}
.lec-body .memo{background:#f2f7fd;border:1px dashed #4a7fc1}
.lec-body .note p,.lec-body .key p,.lec-body .warn p,.lec-body .memo p{margin:.4em 0}
.lec-body .t{display:block;font-weight:800;font-size:.8em;letter-spacing:.08em;margin-bottom:4px}
.lec-body .note .t,.lec-body .memo .t{color:#2f6f9f}
.lec-body .key .t{color:#a97400}
.lec-body .warn .t{color:#c02640}
.lec-body .lec-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0}
.lec-body table{border-collapse:collapse;width:100%;font-size:.93em;line-height:1.7;margin:0}
.lec-body caption{caption-side:top;text-align:left;font-weight:700;margin-bottom:6px;color:#1b4a6e}
.lec-body th,.lec-body td{border:1px solid #cddcea;padding:7px 10px;vertical-align:top;text-align:left;min-width:4.5em}
.lec-body th{background:#e6f0f8;font-weight:700}
.lec-body tbody th{background:#f4f9fd}
.lec-body td.c,.lec-body th.c{text-align:center}
.lec-body ul.plain,.lec-body ol.plain{margin:.7em 0;padding-left:1.35em}
.lec-body ul.plain li,.lec-body ol.plain li{margin:.3em 0}
.lec-body .hl{background:linear-gradient(transparent 58%,#ffe680 58%);font-weight:700}
.lec-body .rd{color:#c8102e;font-weight:700}
.lec-body .bl{color:#0f6fb5;font-weight:700}
.lec-body .gr{color:#1a7f37;font-weight:700}
.lec-body hr.sep{border:0;border-top:1px dashed var(--line);margin:32px 0}
/* 講義中の過去問ブロック（元の講義に入っていたもの） */
.lec-body .q{border:1px solid var(--line);border-left:5px solid #7a6ea8;border-radius:10px;padding:12px 16px;margin:18px 0;font-size:.96em}
.lec-body .q .qid{margin:0 0 6px;font-size:.76em;font-weight:800;letter-spacing:.06em;color:#5b4f8a}
.lec-body .q .qstem{margin:0 0 8px;font-weight:700}
.lec-body .q ol.qch{margin:.4em 0 .6em;padding-left:1.6em}
.lec-body .q ol.qch li{margin:.15em 0}
.lec-body .q .qa{margin:.6em 0 .2em;font-weight:800}
.lec-body .q .qex{margin:.5em 0 0;line-height:1.9}
.lec-body .q .qex .lbl{display:inline-block;font-size:.74em;font-weight:800;letter-spacing:.06em;color:#5b4f8a;margin-right:8px}
@media (max-width:560px){
  .lec-body figure.narrow img{max-width:100%}
  .lec-body .note,.lec-body .key,.lec-body .warn,.lec-body .memo{padding:10px 14px}
}

/* ---------- 医師国試版：数値で答える問題・問題原本へのリンク・頻出度未評価 ---------- */
.numeric-answer{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.numeric-answer input{font:inherit;font-size:1.2rem;max-width:100%;width:240px;padding:12px;border:1px solid var(--line);border-radius:8px}
.source-link{overflow-wrap:anywhere}
/* 頻出度（A〜D）がまだ付いていない知識単位。段階の色を持たせない */
.freq.fN{background:#f7f8fa;border-color:#dde0e4;color:#636b75;font-weight:400}