/* OpenQB スタイル。docs/design のモックアップを大枠として採用し、
   レスポンシブ化・不要要素の削除を行った自前CSS（外部CDN非依存 §8.6）。
   配色はすべて CSS カスタムプロパティ化し、:root[data-theme="dark"] で上書きしてダーク対応する。 */

:root {
  --sidebar-w: 240px;
  --font-scale: 1;
  /* プライマリ（役割色） */
  --primary: #0D47A1;
  --primary-dark: #0a3880;
  --primary-fg: #fff;          /* プライマリ塗り上のテキスト/アイコン */
  --primary-text: #0D47A1;     /* テキスト/アイコンとして使うプライマリ（背景の上に載る） */
  --primary-soft: #e4ecf7;     /* アクティブなナビ背景・下線 */
  --primary-border: #9db8de;   /* カードホバー時の枠 */
  --header-bg: #bfdcf0;
  /* テキスト */
  --text: #1f2937;
  --text-strong: #111827;
  --text-soft: #374151;
  --muted: #6b7280;
  /* 罫線・トラック */
  --line: #e5e7eb;
  --line-soft: #f1f5f9;
  --track: #d1d5db;            /* ステータスバー/進捗バー/スピナーの地色 */
  --btn-border: rgba(0,0,0,.08);
  /* 面（背景） */
  --bg: #f3f4f6;
  --surface: #fff;             /* カード・行・選択肢の背景 */
  --surface-2: #fafafa;        /* サイドバー */
  --surface-hover: #f3f4f6;
  --surface-hover-strong: #e5e7eb;
  --surface-tint: #eef3fb;     /* プライマリ寄りのホバー/選択背景 */
  --surface-muted: #f8fafc;    /* テーブル行ホバー・サマリ枠 */
  --surface-accent: #eef2f7;   /* サイドバーホバー・タグ・基準値ボタン背景 */
  --bottombar-bg: rgba(255,255,255,.96);
  /* セマンティック（正誤・警告） */
  --pos: #0284c7;             /* 情報/正解（青） */
  --pos-strong: #16a34a;       /* 選択肢の正解（緑） */
  --pos-bg: #f0fdf4;
  --neg: #ef4444;             /* 不正解（赤） */
  --neg-bg: #fef2f2;
  --warn: #c2410c;            /* 複数選択タグ文字 */
  --warn-bg: #fff7ed;
  /* 影 */
  --shadow: rgba(0,0,0,.06);
  /* 演習ヒートマップ（検証済みランプ。0=空セル、1..4=濃度） */
  --heat-0: #e8edf3;
  --heat-1: #8db3e2;
  --heat-2: #5c8ecd;
  --heat-3: #2f66b0;
  --heat-4: #0d47a1;
  /* 検索ヒットのハイライト背景 */
  --mark-bg: #fde68a;
}

/* ダークパレット（役割はライトと同一。コントラストは本文4.5:1目安を確保） */
:root[data-theme="dark"] {
  --primary-fg: #fff;
  --primary-text: #7fb0e6;
  --primary-soft: #1e2b3f;
  --primary-border: #3b5578;
  --header-bg: #141b24;
  --text: #e5e7eb;
  --text-strong: #f8fafc;
  --text-soft: #cbd5e1;
  --muted: #94a3b8;
  --line: #2b3442;
  --line-soft: #232b37;
  --track: #374151;
  --btn-border: rgba(255,255,255,.12);
  --bg: #060809;          /* 右ペイン（ページ地色）は黒系。ヘッダー(--header-bg)より暗くして分離 */
  --surface: #1a212b;
  --surface-2: #0b0e12;   /* サイドバーも黒系。カード(--surface)を載せると浮き上がる */
  --surface-hover: #232b37;
  --surface-hover-strong: #2b3442;
  --surface-tint: #1e2b3f;
  --surface-muted: #202834;
  --surface-accent: #212a36;
  --bottombar-bg: rgba(22,28,36,.96);
  --pos: #38bdf8;
  --pos-strong: #22c55e;
  --pos-bg: #14271c;
  --neg: #f87171;
  --neg-bg: #2b1717;
  --warn: #fdba74;
  --warn-bg: #2a1c0f;
  --shadow: rgba(0,0,0,.5);
  /* 演習ヒートマップ（ダーク用ランプ） */
  --heat-0: #232b37;
  --heat-1: #2e5581;
  --heat-2: #3f6ea3;
  --heat-3: #5a8fc7;
  --heat-4: #7fb0e6;
  --mark-bg: #92400e;
}

* { box-sizing: border-box; }
html { font-size: calc(16px * var(--font-scale, 1)); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ===== Header ===== */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; height: 60px; z-index: 30;
  background: var(--header-bg); display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.header-left, .header-right { display: flex; align-items: center; gap: 12px; }
.icon-btn { background: none; border: 0; color: var(--text-soft); padding: 8px; cursor: pointer; display: flex; border-radius: 8px; }
.icon-btn:hover { background: rgba(127,127,127,.18); }
/* ハンバーガー：3本バーを開時に×へトランジション */
.hamburger .hb-box { position: relative; display: block; width: 24px; height: 24px; }
.hamburger .hb-bar { position: absolute; left: 3px; right: 3px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
.hamburger .hb-bar:nth-child(1) { top: 6px; }
.hamburger .hb-bar:nth-child(2) { top: 11px; }
.hamburger .hb-bar:nth-child(3) { top: 16px; }
body.drawer-open .hamburger .hb-bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.drawer-open .hamburger .hb-bar:nth-child(2) { opacity: 0; }
body.drawer-open .hamburger .hb-bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.brand { display: flex; align-items: center; }
.brand-logo { height: 36px; width: auto; display: block; }
/* ダークモードではロゴを白抜きにして視認性を確保 */
:root[data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); }
/* ダークモードでは月アイコンを塗りにする（現在ダーク適用中であることを示す） */
:root[data-theme="dark"] #theme-btn svg path { fill: currentColor; }
.text-btn {
  background: var(--surface); border: 1px solid var(--btn-border); color: var(--text-soft); cursor: pointer;
  padding: 7px 14px; border-radius: 8px; font-size: .82rem; font-weight: 600;
}
.text-btn:hover { background: var(--surface-hover); }
.text-btn sup { font-size: .6em; }
/* 固定ヘッダの操作ボタン（ハンバーガー/テーマ/文字サイズ/ログアウト）は高さを統一 */
.app-header .icon-btn, .app-header .text-btn { height: 38px; display: inline-flex; align-items: center; justify-content: center; }

/* ===== Sidebar ===== */
.app-sidebar {
  position: fixed; top: 60px; bottom: 0; left: 0; width: var(--sidebar-w, 240px); z-index: 20;
  background: var(--surface-2); border-right: 1px solid var(--line); padding: 20px 14px;
  transition: transform .22s ease;
}
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-link {
  display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 10px;
  font-size: .95rem; color: var(--text-soft);
}
.side-link:hover { background: var(--surface-accent); color: var(--primary-text); }
.side-link.active { background: var(--primary-soft); color: var(--primary-text); font-weight: 700; }
.scrim { position: fixed; inset: 60px 0 0 0; background: rgba(0,0,0,.35); z-index: 15; opacity: 0; pointer-events: none; transition: opacity .22s ease; }

/* ===== Main ===== */
.app-main {
  margin-left: var(--sidebar-w, 240px); padding: 76px 28px 48px; min-height: 100vh;
}
/* サブヘッダーは固定(position:fixed)なので、その実高さ(--subhead-h)分だけ本文を下げてパネルに隠れないようにする
   （固定サブヘッダーを使うのはカテゴリ/問題一覧。演習画面はスクロール型の .ex-head に戻したため通常パディング） */
body[data-route="c"] .app-main,
body[data-route="list"] .app-main { padding-top: calc(60px + var(--subhead-h, 52px)); }
body.has-storage-banner[data-route="c"] .app-main,
body.has-storage-banner[data-route="list"] .app-main { padding-top: calc(60px + var(--storage-banner-h, 48px) + var(--subhead-h, 52px)); }
/* 問題一覧は固定シェル(list-shell)で全面を覆うため本文自体はスクロールさせない（画面スクロール廃止）。
   overflow:hidden をルート(body)にも掛けてビューポートへ伝播させ、モバイルの 100vh 端数等でも
   ページ全体がスクロールしないよう確実に抑止する（リロード直後も含む）。 */
body[data-route="list"] .app-main { overflow: hidden; }
body[data-route="list"] { overflow: hidden; }
/* 解答直後のスクロール先。ヘッダー＋サブヘッダーパネル(実測 --subhead-h)の直下に結果カードが来るよう揃える */
.result-mount { scroll-margin-top: calc(60px + var(--subhead-h, 52px)); }
body.has-storage-banner .result-mount { scroll-margin-top: calc(60px + var(--storage-banner-h, 48px) + var(--subhead-h, 52px)); }
/* カテゴリ/一覧の固定ヘッダーはタイトル行＋進捗＋達成度/正解率で背が高い。syncSubhead 反映前の
   初回描画で本文が潜り込まないよう、実測に近い高さをフォールバックとして置く。 */
body[data-route="c"], body[data-route="list"] { --subhead-h: 128px; }
/* ホーム・カテゴリ・問題一覧・ダッシュボードも検索・問題演習・復習等と同じページ地色（var(--bg)）に統一する。
   幅は固定ステータスバー(.fixhead-inner)／問題一覧(.list-inner)の実効内容幅（1040 − 左右28px = 984px）に合わせ、
   本文リストの左右端がステータスバー・問題一覧と一致するようにする（.container は内側 padding を持たないため 984 を直接指定）。 */
.container { max-width: 984px; margin: 0 auto; }

/* ===== Common bits ===== */
.card { background: var(--surface); border-radius: 12px; box-shadow: 0 1px 3px var(--shadow); }
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; min-height: 26px; }
.page-title { font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 0; }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; background: none; border: 0; font-size: .9rem; }
.back-link:hover { color: var(--text); }

/* サブヘッダー（演習画面 /q 専用）。タイトル行＋任意の追従行を 1 つのパネル＝1 枚板にまとめる。
   メインヘッダーと同じく position:fixed とし、
   スクロールの慣性（オーバースクロール）でも動かないようにする。left/right でメイン幅いっぱいに広げ、
   下線（divider）を端まで届かせる。パネル実高さは JS(syncSubhead)が --subhead-h に反映し本文を押し下げる。 */
.subhead {
  position: fixed; top: 60px; left: var(--sidebar-w, 240px); right: 0; z-index: 25;
  background: var(--surface-2); border-bottom: 1px solid var(--line); box-shadow: 0 2px 4px -2px var(--shadow);
}
.subhead-row {
  position: relative; height: var(--subhead-row-h, 52px);
  display: flex; align-items: center; gap: 14px; padding: 0 28px;
}
.subhead-extra { padding: 2px 28px 14px; }
.subhead .back-link { flex: none; }
.subhead-title { font-size: 1.15rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subhead-spacer { flex: 1; }
.subhead-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--track); }
.subhead-progress > div { height: 100%; background: var(--primary); }
/* 演習ヘッダー右端の "x/y" 表示：現在番号を大きく、総数を小さく */
.ex-count { flex: none; display: flex; align-items: baseline; gap: 2px; font-weight: 700; color: var(--text-strong); }
.ex-count-cur { font-size: 1.3rem; }
.ex-count-sep { font-size: .95rem; color: var(--muted); font-weight: 600; }
.ex-count-total { font-size: .85rem; color: var(--muted); font-weight: 600; }
/* 保存バナー表示中はパネルをバナー直下へずらす */
body.has-storage-banner .subhead { top: calc(60px + var(--storage-banner-h, 48px)); }

.muted { color: var(--muted); }
.crumb { color: var(--muted); font-size: .85rem; }

.statusbar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--track); flex: 1; min-width: 80px; }
.statusbar-seg { height: 100%; }

.legend { display: flex; align-items: center; gap: 6px; }
.legend-badges { display: flex; }
.legend-badges-inner { display: flex; align-items: center; gap: 6px; }
/* スマホ専用の開閉ボタン。デスクトップは常時展開のため非表示 */
.legend-toggle { display: none; }
.legend-badge, .rating-badge {
  width: 26px; height: 26px; border-radius: 6px; color: #fff; font-size: .8rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
/* button要素の既定paddingで中のSVGが横方向に潰れるのを防ぐ */
.legend-badge svg, .rating-badge svg, .eval-opt svg { flex: none; }

/* ===== List rows (category / subcategory) ===== */
.row-list { display: flex; flex-direction: column; gap: 12px; }
.row {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
/* 復習タブ：カードをグリッド配置に */
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.review-grid .row-title { width: auto; flex: none; }
.review-grid .row-remain { width: auto; }
.row-title { font-weight: 700; color: var(--text-strong); flex: none; width: 220px; min-width: 0; }
.row-title small { color: var(--muted); font-weight: 500; }
.row-remain { flex: none; width: 92px; text-align: right; color: var(--primary-text); font-weight: 700; font-size: .9rem; }
.row-go {
  flex: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  display: flex; align-items: center; justify-content: center; color: var(--muted); pointer-events: none;
}
/* カード全体をボタン化 */
.row.clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .05s; }
/* ホバー演出はマウス等ホバー可能な端末のみ。タッチではタップ後に :hover が固着するため除外 */
@media (hover: hover) {
  .row.clickable:hover { border-color: var(--primary-border); box-shadow: 0 3px 12px rgba(13,71,161,.10); }
  .row.clickable:hover .row-go { color: var(--primary-text); background: var(--surface-tint); }
}
.row.clickable:active { transform: translateY(1px); }
.row.disabled { opacity: .4; cursor: not-allowed; }
.row.disabled:hover { border-color: var(--line); box-shadow: none; }
/* 「すべて」（集約カード）は分野カードと区別するためプライマリ寄りの見た目に */
.row.row-all { background: var(--surface-tint); border-color: var(--primary-border); }
.row.row-all .row-title { color: var(--primary-text); }
.row.row-all .row-go { background: var(--surface); }

/* 大分類アコーディオン（囲いなし・灰色文字＋灰色下線のシンプルなトグル） */
.accordion { margin-bottom: 6px; }
.accordion-head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 2px;
  background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left;
  color: var(--text);
}
.accordion:last-child .accordion-head { border-bottom: 0; }
.accordion-head:hover { color: var(--text-strong); }
.accordion-head .chev { display: flex; color: var(--text-soft); transition: transform .18s; }
.accordion-head.open .chev { transform: rotate(90deg); }
/* タイトルが余白を吸収し、進捗バー・問数は固定幅で右寄せ揃え（開始/終了位置を全大分類で統一） */
.accordion-title { font-weight: 700; color: inherit; font-size: 1rem; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accordion-head .statusbar { flex: none; width: 220px; }
.accordion-count { font-size: .85rem; flex: none; width: 8em; text-align: right; white-space: nowrap; }
/* 開閉アニメーション：grid-template-rows 0fr→1fr で内容の高さを測らずに滑らかに開閉 */
.accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.accordion-body.open { grid-template-rows: 1fr; }
.accordion-inner { min-height: 0; overflow: hidden; }
/* 余白はクリップ内側の要素に持たせる（閉時は余白ごとクリップされて枠線が覗かず、開閉でガタつかない） */
.accordion-rows { display: flex; flex-direction: column; gap: 12px; padding: 12px 2px 8px; }
@media (prefers-reduced-motion: reduce) { .accordion-body { transition: none; } }

/* 文字サイズ / 配色 ポップアップ */
.font-wrap { position: relative; }
.font-menu {
  position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 6px; min-width: 140px; z-index: 40;
  display: flex; flex-direction: column; gap: 2px;
}
.font-menu[hidden] { display: none; }
.font-menu-title { font-size: .72rem; color: var(--muted); padding: 4px 10px; }
.font-opt, .theme-opt, .year-opt { text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: .9rem; color: var(--text-soft); }
.font-opt:hover, .theme-opt:hover, .year-opt:hover { background: var(--surface-hover); }
.font-opt.on, .theme-opt.on, .year-opt.on { background: var(--surface-tint); color: var(--primary-text); font-weight: 700; }

/* 状況フィルタ（凡例をボタン化） */
.legend-btn { border: 2px solid transparent; cursor: pointer; opacity: .4; transition: opacity .12s, border-color .12s; }
.legend-btn:hover { opacity: .75; }
.legend-btn.on { opacity: 1; border-color: color-mix(in srgb, var(--rc, var(--text-strong)) 60%, black); }

/* ===== Category summary ===== */
.summary {
  display: flex; align-items: center; gap: 24px; padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.summary-stats { display: flex; gap: 40px; flex-wrap: wrap; flex: none; }
.summary-stat { display: flex; flex-direction: column; gap: 4px; }
.summary-stat-label { font-size: .78rem; color: var(--text-soft); }
.summary-stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.05; }
.summary-stat-value small { font-size: .85rem; font-weight: 500; color: var(--text-soft); }
.summary-stat-value.rate { color: var(--pos); }
.summary-stat-value.muted { color: var(--text-soft); }

/* ===== 固定ヘッダー（カテゴリ／問題一覧）：写真UI =====
   .subhead 機構(position:fixed)を流用してスクロール慣性でも動かない上部固定パネルにする。
   内側はタブ画面の本文と同じく container 幅(1040px)で中央寄せし、タイトル/リストと左右を揃える。 */
.fixhead-inner { max-width: 1040px; margin: 0 auto; padding: 16px 28px; }
.fixhead-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fixhead-title {
  font-size: 1.3rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* パネル下端の区切りは .subhead の border-bottom に任せ、内側の .summary の枠線/余白は消す */
.fixhead-summary { margin: 0; padding: 12px 0 0; border-bottom: 0; }

/* ===== Toolbar / filters ===== */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--text-soft); border-radius: 999px;
  padding: 5px 12px; font-size: .76rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.chip.on { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.chip .dot { width: 12px; height: 12px; border-radius: 3px; }

/* ===== Question table ===== */
/* global の table-wrap は月別記録/基準値用。overflow:visible を維持（auto はスクロールコンテナ化して
   sticky 表ヘッダーの追従を壊すため）。メイン幅いっぱいへ広げる（内容は 28px 内側）。 */
.table-wrap { overflow: visible; margin: 0 -28px; padding: 0 28px; background: var(--surface); }

/* ===== 問題一覧：固定シェル（画面スクロール廃止・カード内部だけスクロール） =====
   固定パネル(.subhead)の直下からビューポート下端までを fixed で満たす。内側は縦フレックスで
   見出し行(固定)／カード(可変・内部スクロール)／フッター(カード下・非固定)を積む。 */
.list-shell {
  position: fixed; z-index: 5;
  top: calc(60px + var(--subhead-h, 128px)); bottom: 0;
  left: var(--sidebar-w, 240px); right: 0;
  display: flex;   /* 内側を中央寄せ（container 幅） */
}
body.has-storage-banner .list-shell { top: calc(60px + var(--storage-banner-h, 48px) + var(--subhead-h, 128px)); }
.list-inner {
  width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 28px;
  display: flex; flex-direction: column; min-height: 0;
}
/* 戻る/問題一覧/ソース：シェル上部に固定（スクロールしない）。デスクトップは nowrap で常に1行に保ち、
   幅が折返し閾値付近でも高さが変動しないよう安定させる（モバイルは下の @media で折返し許可）。 */
.list-pagehead { flex: none; flex-wrap: nowrap; }

/* 白カード：内部の list-scroll だけがスクロール。overflow:hidden で角丸をクリップ（スクロールは内側担当）。 */
.table-wrap.list-card {
  flex: 1; min-height: 0; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface);
}
.list-scroll { flex: 1; min-height: 0; overflow: auto; }

/* フッター（モード／演習スタート）：固定を解除しカード下へ。地色の上に置くので背景・上罫線なし。 */
.bottombar.list-footer {
  position: static; left: auto; right: auto; z-index: auto;
  flex: none; background: transparent; backdrop-filter: none; border-top: 0; padding: 12px 0;
}

table.qlist { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.qlist th, table.qlist td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); }
/* カード端に合わせ先頭/末尾セルへ左右余白、最終行の区切り線は消す（角丸に沿わせる） */
.qlist th:first-child, .qlist td:first-child { padding-left: 18px; }
.qlist th:last-child, .qlist td:last-child { padding-right: 18px; }
.qlist tbody tr:last-child td { border-bottom: 0; }
/* 列見出しはカード内スクロール領域(list-scroll)の top:0 に sticky（行だけがスクロール） */
table.qlist thead th {
  position: sticky; top: 0; z-index: 5;
  font-weight: 700; color: var(--text-soft); white-space: nowrap;
  background: var(--surface); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line);
}
table.qlist td.num { color: var(--primary-text); font-weight: 600; white-space: nowrap; cursor: pointer; }
table.qlist td.qtext { color: var(--text-soft); cursor: pointer; }
/* ホバー演出はホバー可能な端末のみ（タッチでの :hover 固着を防ぐ） */
@media (hover: hover) {
  table.qlist tr:hover { background: var(--surface-muted); }
  table.qlist td.num:hover { text-decoration: underline; }
  table.qlist td.qtext:hover { color: var(--primary-text); }
}
.result-marks { display: inline-flex; gap: 10px; }
/* 問題一覧の列幅（デスクトップ既定。モバイルは @media で上書き） */
.qlist .col-order { width: 52px; }
.qlist .col-sort { width: 120px; }
.qlist .col-date { width: 120px; }
.qlist .col-result { width: 110px; }
.qlist .col-src { width: 80px; }

/* ===== Sticky bottom bar ===== */
.bottombar {
  position: fixed; bottom: 0; left: var(--sidebar-w, 240px); right: 0; z-index: 10;
  background: var(--bottombar-bg); backdrop-filter: blur(6px); border-top: 1px solid var(--line);
  padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ===== Buttons ===== */
.btn {
  border: 0; border-radius: 10px; padding: 12px 20px; font-weight: 700; cursor: pointer; font-size: .95rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: var(--surface-hover); color: var(--text-soft); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--surface-hover-strong); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Exercise ===== */
.exercise { max-width: 760px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 16px; }
.progress { height: 6px; background: var(--track); border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: var(--primary); border-radius: 999px; }
/* 演習ヘッダー（旧版のスクロール型カード：科目名 N/M問目＋進捗バー） */
.ex-head { padding: 18px 20px; }
.ex-head .row1 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 12px; }
.ex-head .title { color: var(--primary-text); font-weight: 700; text-align: center; }

/* 画面左右の固定ページ送りボタン（スクロール追従） */
.page-nav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 12;
  width: 40px; height: 104px; border: 0; border-radius: 10px;
  background: rgba(148,163,184,.24); color: #64748b; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.page-nav svg { width: 24px; height: 24px; }
.page-nav:hover { background: rgba(148,163,184,.48); color: #334155; }
.page-nav:disabled { opacity: .25; cursor: default; }
.page-nav.left { left: calc(var(--sidebar-w, 240px) + 20px); }
.page-nav.right { right: 16px; }
/* カード左右の余白が足りない画面では隠す（カード内の前/次リンクで代替） */
@media (max-width: 1140px) { .page-nav { display: none; } }

.q-card { padding: 24px; }
.q-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
.q-no { color: var(--primary-text); font-weight: 700; font-size: 1.05rem; }
.q-tags { display: flex; gap: 8px; align-items: center; }
.q-no-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.q-actions { display: flex; align-items: center; gap: 8px; }
.refval-btn { background: var(--surface-accent); color: var(--text-soft); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.refval-btn:hover { background: var(--surface-hover-strong); }
.bm-btn { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bm-btn:hover { background: var(--surface-hover); color: var(--primary-text); }
.bm-btn.on { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }

/* 基準値の右スライドポップアップ */
.drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 50; opacity: 0; transition: opacity .2s; }
.drawer-scrim.open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(520px, 94vw); z-index: 51;
  background: var(--surface); box-shadow: -8px 0 30px rgba(0,0,0,.18); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease;
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--primary); color: var(--primary-fg); }
.drawer-title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.drawer-close { background: none; border: 0; color: var(--primary-fg); font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.drawer-body { padding: 16px 20px 48px; overflow-y: auto; }
.refval-cat { font-size: .95rem; font-weight: 700; color: var(--primary-text); margin: 22px 0 8px; border-bottom: 2px solid var(--primary-soft); padding-bottom: 4px; }
.refval-cat:first-child { margin-top: 0; }
.refval-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.refval-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: .76rem; }
.refval-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.refval-table td.abbr { color: var(--muted); white-space: nowrap; }
.refval-table td.val { font-weight: 600; white-space: nowrap; }
.tag { background: var(--surface-accent); color: var(--text-soft); font-size: .7rem; padding: 4px 10px; border-radius: 6px; font-weight: 600; }
/* ソースの色付きチップ（全ページ共通・中抜き外枠・横幅統一・細字） */
.src-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 64px;
  padding: 3px 10px; border-radius: 999px; font-size: .66rem; font-weight: 500; letter-spacing: .3px;
  white-space: nowrap; background: transparent; border: 1px solid currentColor; font-family: inherit;
}
.src-filter { cursor: pointer; }
.q-body { font-size: 1rem; margin-bottom: 20px; }

.options { display: flex; flex-direction: column; gap: 10px; }
.option-row { display: flex; align-items: stretch; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; text-align: left; background: var(--surface); cursor: pointer; flex: 1; min-width: 0; font-size: .98rem;
  color: #000;
}
/* 選択肢除外ボタン（自分用の目印。採点に影響しない） */
.exclude-btn {
  flex: none; width: 52px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.exclude-btn:hover { background: var(--surface-hover); color: var(--text-soft); }
.exclude-btn:disabled { opacity: .3; cursor: default; }
.aa-strike { font-weight: 700; font-size: .92rem; letter-spacing: 1px; text-decoration: line-through; text-decoration-thickness: 2px; }
.option-row.excluded .option { opacity: .5; }
.option-row.excluded .option .rich { text-decoration: line-through; }
.option-row.excluded .exclude-btn { border-color: var(--primary-border); color: var(--primary-text); background: var(--surface-tint); }
.tag-multi { background: var(--warn-bg); color: var(--warn); }
@media (hover: hover) { .option:hover { border-color: var(--primary-border); } }
/* 上下キーで移動したフォーカス位置を明示（ライト/ダーク両対応） */
.option:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-border); }
.option .lab { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--text-soft); font-weight: 700; }
/* 選択・正誤とも枠＋カード全体をハイライト（アルファベットバッジには色を付けない・ライト/ダーク両対応）*/
.option.selected { border-color: var(--primary); background: var(--surface-tint); box-shadow: inset 0 0 0 1px var(--primary); }
.option.correct { border-color: var(--pos-strong); background: var(--pos-bg); box-shadow: inset 0 0 0 1px var(--pos-strong); }
.option.wrong { border-color: var(--neg); background: var(--neg-bg); box-shadow: inset 0 0 0 1px var(--neg); }
.option.locked { cursor: default; }
/* ダークモードでは選択肢の本文を白字に */
:root[data-theme="dark"] .option { color: #fff; }

.ex-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ex-nav .left { justify-self: start; } .ex-nav .center { justify-self: center; } .ex-nav .right { justify-self: end; }
.linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: .92rem; }
.linkbtn:hover { color: var(--text); } .linkbtn:disabled { opacity: .4; cursor: not-allowed; }

/* キーボードショートカットの説明（「解答する」下） */
.shortcut-hint {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px;
  margin: 10px 0 4px; font-size: .8rem; color: var(--muted);
}
.sc { display: inline-flex; align-items: center; gap: 5px; }
/* ボタン直下（ex-nav 内）のキー案内は控えめな色・サイズで */
.ex-nav .sc { font-size: .8rem; color: var(--muted); }
kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 6px; font-family: inherit; font-size: .78rem; font-weight: 700; line-height: 1;
  color: var(--text-strong); background: var(--surface); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 6px; box-shadow: 0 1px 0 var(--shadow);
}

/* result + eval */
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.result-panel { padding: 18px 20px; font-size: .95rem; }
.result-verdict { text-align: center; font-size: 1.5rem; font-weight: 800; padding: 6px 0 16px; }
.result-correct { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; }
.result-correct-line { display: flex; justify-content: center; align-items: flex-start; gap: 12px; text-align: left; }
.result-correct-line .lab { flex: none; white-space: nowrap; color: var(--text-soft); font-weight: 700; }
.result-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.result-line:last-child { border-bottom: 0; }
.result-line.eval-line { justify-content: center; }
.eval-picker { display: flex; gap: 8px; }
.eval-opt { width: 34px; height: 34px; border-radius: 8px; border: 2px solid transparent; color: #fff; font-size: .95rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: .45; }
.eval-opt.on { opacity: 1; border-color: color-mix(in srgb, var(--rc, var(--text-strong)) 60%, black); }
/* 解答履歴カード：ラベル行を廃止しテーブルのみを内包。ヘッダー行は sticky でスクロール時も固定表示 */
.history-panel { max-height: 280px; overflow-y: auto; padding-bottom: 6px; }
.history-table { width: 100%; font-size: .85rem; text-align: center; border-collapse: collapse; }
.history-table th, .history-table td { padding: 9px 20px; }
.history-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  color: var(--muted); font-weight: 600; box-shadow: 0 1px 0 var(--line);
}
.history-table tbody tr { border-bottom: 1px dashed var(--line); }
.history-table tbody tr:last-child { border-bottom: 0; }

/* 解説閲覧モード：問題エリアと解説エリアの間に置く正解表示 */
.answer-banner {
  padding: 14px 20px; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--pos-strong); background: var(--pos-bg);
}
.answer-line { display: flex; justify-content: center; align-items: flex-start; gap: 12px; text-align: left; font-size: .95rem; }
.answer-line .lab { flex: none; white-space: nowrap; color: var(--pos-strong); font-weight: 700; }
:root[data-theme="dark"] .answer-banner { color: #fff; }

.explain { overflow: hidden; }
.explain-head { background: var(--primary); color: var(--primary-fg); font-weight: 700; padding: 10px 18px; }
.explain-body { padding: 22px; }
.explain-body h3 { color: var(--muted); font-size: .95rem; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 18px 0 10px; font-weight: 600; }
.explain-body h3:first-child { margin-top: 0; }

/* rich content from data (HTML本文) */
.rich { line-height: 1.7; word-break: break-word; }
.rich img { max-width: 100%; max-height: 70vh; height: auto; object-fit: contain; border-radius: 6px; margin: 8px 0; }
.rich table { max-width: 100%; }
.rich p { margin: 0 0 10px; }

/* ===== データ管理（エクスポート/インポート） ===== */
.data-card { padding: 20px 22px; margin-bottom: 16px; }
/* インポートカードのドラッグ＆ドロップ検知時：破線枠でドロップ可能を明示（レイアウトに影響しない outline を使用） */
.dropzone { position: relative; transition: background .12s; }
.dropzone.dragover { background: var(--surface-tint); outline: 2px dashed var(--primary); outline-offset: -8px; }
.dropzone.dragover > *:not(.drop-hint) { visibility: hidden; }
.drop-hint {
  display: none; position: absolute; inset: 0; border-radius: inherit;
  align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem; color: var(--primary); pointer-events: none;
}
.dropzone.dragover .drop-hint { display: flex; }
.data-card-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; color: var(--text); }
.data-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.data-stat { display: flex; flex-direction: column; gap: 2px; }
.data-stat-num { font-size: 1.6rem; font-weight: 700; color: var(--primary-text); }
.data-card-actions { text-align: center; }
.data-msg { font-size: .85rem; margin: 10px 0 0; min-height: 1.2em; }
.data-msg.ok { color: var(--pos); }
.data-msg.err { color: var(--neg); }
.import-summary { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; margin-top: 14px; padding: 12px 14px; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 8px; }

/* ===== 保存アラート・バナー ===== */
/* ヘッダー(60px)直下に固定。警告色は --warn/--warn-bg でライト/ダーク両対応。 */
.storage-banner {
  position: fixed; top: 60px; left: var(--sidebar-w, 240px); right: 0; z-index: 25;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--warn-bg); color: var(--warn);
  border-bottom: 1px solid var(--warn);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  font-size: .88rem; font-weight: 600;
}
.storage-banner-msg { flex: 1 1 240px; min-width: 0; line-height: 1.45; }
.storage-banner-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.storage-banner-btn {
  background: var(--warn); color: var(--surface); border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: 8px; font-size: .82rem; font-weight: 700; white-space: nowrap;
}
.storage-banner-btn:hover { opacity: .9; }
.storage-banner-close {
  background: none; border: 0; color: var(--warn); cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 2px 8px; border-radius: 6px;
}
.storage-banner-close:hover { background: rgba(127,127,127,.18); }
/* バナー表示中はコンテンツ先頭がバナーに隠れないよう本文を押し下げる（バナー高さは JS で計測）。 */
body.has-storage-banner .app-main { padding-top: calc(76px + var(--storage-banner-h, 48px) + var(--subhead-h, 0px)); }

/* loading / message */
.center-msg { text-align: center; padding: 80px 20px; color: var(--muted); }
.spinner { width: 34px; height: 34px; border: 3px solid var(--track); border-top-color: var(--primary); border-radius: 50%; margin: 0 auto 16px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 学習統計ダッシュボード（境界線最小のフラットデザイン） ===== */
/* 箱をやめ、セクション見出し＋余白＋ヘアラインで区切る */
.stat-section-title { font-size: 1rem; font-weight: 700; margin: 0 0 16px; color: var(--text-strong); }
.stat-section + .stat-section { border-top: 1px solid var(--line-soft); margin-top: 28px; padding-top: 24px; }

/* 統計タイル：枠なし・値（大・semibold）が上、ラベル（小・muted）が下。
   等幅グリッドで揃え、広い画面では1行6列に並べて全幅を使う。 */
.stat-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 16px; }
@media (max-width: 1120px) { .stat-tiles { grid-template-columns: repeat(3, 1fr); } }
.stat-tile { display: flex; flex-direction: column; gap: 2px; }
.stat-tile-value { font-size: 1.9rem; font-weight: 600; line-height: 1.1; color: var(--text-strong); }
.stat-tile-value small { font-size: .82rem; font-weight: 500; color: var(--text-soft); }
.stat-tile-label { font-size: .78rem; color: var(--muted); }

/* 演習ヒートマップ（暦年固定・カード幅に1枚収まり／横スクロールなし） */
.heatmap-head { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 14px; }
/* 年セレクタ：固定ヘッダのテーマ/文字サイズと同じポップオーバー方式（.font-wrap/.font-menu）で統一 */
.year-wrap { flex: none; }
.year-btn { display: inline-flex; align-items: center; gap: 6px; }
.year-caret { display: inline-flex; color: var(--muted); }
/* 左寄せの操作なので、ボタン左端に揃えて開く */
.year-menu { left: 0; right: auto; min-width: 120px; }
.heatmap { display: flex; flex-direction: column; gap: 4px; }
.heatmap-months { display: grid; gap: 2px; font-size: .68rem; color: var(--muted); height: 14px; }
.heatmap-month { white-space: nowrap; grid-row: 1; }
.heatmap-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); gap: 2px; align-items: start; }
/* セルの正方形は padding-bottom（幅基準%）で確定させる。aspect-ratio はグリッドの
   stretch 配置と干渉して高さが潰れる（帯状に繋がって見える）ブラウザがあるため使わない。 */
.heat-cell { width: 100%; min-width: 0; height: 0; padding-bottom: 100%; border-radius: 2px; background: var(--heat-0); }
.heat-cell.heat-l1 { background: var(--heat-1); }
.heat-cell.heat-l2 { background: var(--heat-2); }
.heat-cell.heat-l3 { background: var(--heat-3); }
.heat-cell.heat-l4 { background: var(--heat-4); }
.heat-cell.heat-empty { visibility: hidden; }
.heatmap-legend { display: flex; align-items: center; gap: 3px; margin-top: 10px; font-size: .72rem; color: var(--muted); }
.heatmap-legend .heat-cell { width: 11px; height: 11px; padding-bottom: 0; margin: 0; }
.heat-tip {
  position: fixed; z-index: 60; display: none; pointer-events: none; white-space: nowrap;
  background: var(--text-strong); color: var(--surface); font-size: .76rem; font-weight: 600;
  padding: 5px 9px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.24);
}

/* 月別テーブル（ヒートマップのアクセシビリティ代替） */
.monthly-details { margin-top: 14px; }
.monthly-details > summary { cursor: pointer; font-size: .85rem; color: var(--primary-text); width: max-content; }
.monthly-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: 10px; }
.monthly-table th, .monthly-table td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.monthly-table th { color: var(--muted); font-weight: 600; }
.monthly-table th.r, .monthly-table td.r { text-align: right; white-space: nowrap; }

/* インサイト：箱なし。左＝単一値の行（ラベル左・値右）、右＝TOP3リスト。デスクトップ2列。 */
.stats-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; align-items: start; }
/* 左：単一値の行をヘアラインで区切る */
.insight-rows { display: flex; flex-direction: column; }
.insight-row-line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.insight-row-line:first-child { padding-top: 0; }
.insight-row-label { color: var(--muted); font-size: .85rem; }
.insight-row-value { text-align: right; font-weight: 600; color: var(--text-strong); }
.insight-row-value small { font-size: .82rem; font-weight: 500; color: var(--text-soft); }
.insight-diff.up { color: var(--pos); }
.insight-diff.down { color: var(--neg); }
/* 右：TOP3 リスト（小見出し＋行リスト） */
.insight-lists { display: flex; flex-direction: column; gap: 20px; }
.insight-list-title { font-size: .78rem; color: var(--muted); margin-bottom: 4px; }
.insight-list { display: flex; flex-direction: column; }
.insight-row { display: flex; align-items: baseline; gap: 10px; font-size: .9rem; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.insight-row:last-child { border-bottom: 0; }
.insight-row-name { flex: 1; min-width: 0; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insight-row-val { flex: none; text-align: right; font-weight: 600; color: var(--text-strong); }

/* 大分類の達成度メーター（.progress を流用・箱なしの行・細身） */
.achieve-list { display: flex; flex-direction: column; gap: 14px; }
.achieve-row { display: flex; align-items: center; gap: 14px; }
.achieve-label { flex: none; width: 180px; font-weight: 600; color: var(--text-strong); font-size: .9rem; }
.achieve-meter { flex: 1; height: 6px; }
.achieve-num { flex: none; width: 110px; text-align: right; color: var(--muted); font-weight: 600; font-size: .85rem; white-space: nowrap; }

/* ===== 検索 ===== */
.search-input {
  width: 100%; padding: 12px 16px; font-size: 1rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.search-controls { margin-top: 12px; }
.search-select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 6px 30px 6px 14px; font-size: .85rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  max-width: 100%;
}
.search-select:focus { outline: none; border-color: var(--primary); }
.search-hint {
  color: var(--muted); font-size: .9rem; line-height: 1.7;
  padding: 24px 4px; text-align: center;
}
.search-list { display: flex; flex-direction: column; }
.search-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 8px; border-bottom: 1px solid var(--line);
  cursor: pointer; text-align: left; width: 100%;
}
@media (hover: hover) { .search-row:hover { background: var(--surface-hover); } }
.search-row .search-status { flex: none; display: inline-flex; align-items: center; }
.search-row .num {
  flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; font-weight: 600; color: var(--primary-text); white-space: nowrap;
}
.search-row .search-snip {
  flex: 1; min-width: 0; color: var(--text-soft); font-size: .88rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-row mark { background: var(--mark-bg); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ===== Responsive (§8.3) ===== */
@media (max-width: 860px) {
  .app-sidebar { transform: translateX(-100%); box-shadow: 2px 0 12px rgba(0,0,0,.12); }
  body.drawer-open .app-sidebar { transform: translateX(0); }
  body.drawer-open .scrim { opacity: 1; pointer-events: auto; }
  .app-main { margin-left: 0; padding: 74px 16px 40px; }
  .exercise { margin-top: 12px; }
  /* 問題一覧/カテゴリの固定ヘッダー：絞り込みバッジは幅が足りないので既定で畳み、"<" で開閉する。
     .legend を position:relative にして、開いたバッジ列(.legend-badges)を "<" ボタンのすぐ下に
     ぶら下げる（絶対配置の containing block を .legend にする）。 */
  .legend { position: relative; flex-wrap: nowrap; min-width: 0; }
  .legend-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 26px; height: 26px; border: 1px solid var(--btn-border); border-radius: 6px;
    background: var(--surface); color: var(--text-soft); padding: 0; cursor: pointer;
  }
  /* ボタンの枠は動かさず、中の chevron アイコンだけを回転させる */
  .legend-toggle svg { transition: transform .18s ease; }
  .legend.open .legend-toggle svg { transform: rotate(180deg); }
  /* 開いたら見出し文字（絞り込み／ソース）は透明にして、その場所にバッジを重ねる。
     閉じて再び現れる時は opacity を transition して fade-in させる（display:none は transition 不可のため
     opacity で消す。要素は残るがバッジが上に重なるので見た目に影響しない）。 */
  .legend > span { transition: opacity .24s ease; }
  .legend.open > span { opacity: 0; }
  /* 絞り込みバッジ／ソースは、閉じた行にそのまま重ねて（オーバーレイ）表示する（レイアウトを押し広げない）。
     ">" トグルを起点(先頭)に、右→左へ clip-path で伸縮。containing block は position:relative の .legend。
     トグル(26px)＋隙間(6px)分だけ内側(right:32px)へ寄せ、トグル自身は常に見えて閉じられるようにする。
     同じ行の中央に載せる（top:50%）ため、下へドロップせず既存の見出し等に重なる。影は付けない。
     開閉は transition(クラス変化時のみ発火)で animate。バッジ選択時の view 再描画では新規要素が
     最初から open 状態でマウントされ transition は発火しないため、開いたまま静止する（開き直さない）。 */
  .legend-badges {
    position: absolute; top: 50%; transform: translateY(-50%); right: 32px; left: auto; z-index: 26;
    display: block; width: max-content; max-width: calc(100vw - 64px);
    clip-path: inset(0 0 0 100%);
    pointer-events: none;
    transition: clip-path .24s ease;
  }
  .legend.open .legend-badges {
    clip-path: inset(0 0 0 0); pointer-events: auto;
  }
  /* バッジ列は背景・枠・影なし。トグルボタンと同じ高さで出す（上下 padding を持たせず、
     バッジ自身の高さ＝ボタン高さのまま重ねる）。 */
  .legend-badges-inner {
    min-width: 0; flex-wrap: nowrap; white-space: nowrap;
    background: none; border: 0; padding: 0;
  }
  .result-mount { scroll-margin-top: calc(60px + var(--subhead-h, 52px)); }
  .storage-banner { left: 0; }   /* モバイルはサイドバーがドロワー化するため全幅 */
  /* モバイルはサイドバーがドロワー化するため固定サブヘッダー・固定シェルも全幅（left:0） */
  .subhead { left: 0; }
  .list-shell { left: 0; }
  .list-inner { padding: 0 16px; }
  .list-pagehead { flex-wrap: wrap; }   /* モバイルは幅が足りないので折返しを許可 */
  .subhead-row { padding: 0 16px; gap: 10px; }
  .subhead-extra { padding: 2px 16px 12px; }
  .subhead-title { font-size: 1rem; }
  /* 固定ヘッダー（カテゴリ/一覧）もモバイルは左右16px・タイトルを一段小さく */
  .fixhead-inner { padding: 12px 16px; }
  .fixhead-title { font-size: 1.1rem; }
  .fixhead-summary { padding-top: 10px; }
  /* 表はモバイル余白(16px)に合わせて全幅化。列は縮小して収まる設計なので overflow:visible を維持し
     sticky 表ヘッダーを機能させる（overflow:auto だとスクロールコンテナ化して固定が壊れるため） */
  .table-wrap { margin: 0 -16px; padding: 0 16px; }
  .bottombar { left: 0; padding: 12px 16px; }
  /* スマホ：進捗バーは下段に全幅。余白・バー高さ・文字は小さめに（縦幅圧縮） */
  .row-list { gap: 8px; }
  .row { flex-wrap: wrap; row-gap: 6px; padding: 10px 12px; gap: 10px; }
  .row-title { width: auto; flex: 1 1 auto; min-width: 0; font-size: .88rem; }
  .row-title small { font-size: .78em; }
  .row-remain { width: auto; font-size: .78rem; }
  .row .statusbar { order: 1; flex-basis: 100%; height: 12px; }
  /* 大分類の見出し：進捗バーは下段に全幅で回す（横詰まり防止） */
  .accordion-head { flex-wrap: wrap; }
  .accordion-head .statusbar { order: 1; flex-basis: 100%; height: 12px; }
  .row-go { width: 32px; height: 32px; }
  .row-go svg { width: 16px; height: 16px; }
  .result-grid { grid-template-columns: 1fr; }
  .brand-logo { height: 30px; }
  .col-src { display: none; }   /* モバイルの一覧では出典を非表示 */
  /* 問題一覧：文字を小さく・行を詰めて縦の冗長さを抑える */
  table.qlist { font-size: .74rem; }
  table.qlist th, table.qlist td { padding: 8px 6px; }
  .qlist .col-order { display: none; }              /* 順番は非表示 */
  .qlist .col-sort { width: 76px; white-space: nowrap; }   /* 問題番号をスリムに */
  .qlist .col-date { width: 64px; white-space: nowrap; font-size: .68rem; } /* 最終演習日をスリムに */
  .qlist .col-result { width: auto; }
  .result-marks { gap: 6px; }
  /* 下部バー：モードラベルを隠し、チップ・ボタンを詰めて1行に収める */
  .mode-label { display: none; }
  .bottombar { flex-wrap: nowrap; gap: 8px; padding: 10px 16px; }
  .bottombar .filter-group { flex-wrap: nowrap; gap: 6px; min-width: 0; }
  .bottombar .chip { padding: 5px 9px; font-size: .72rem; white-space: nowrap; }
  .bottombar .btn-primary { flex: none; padding: 9px 14px; font-size: .84rem; white-space: nowrap; }
  /* スマホではキーボード操作しないため、キー案内（Enter/←→/↑↓/1-9/Space）を全て非表示 */
  .shortcut-hint, .key-hints { display: none; }
  /* ダッシュボード：タイルは2列、インサイトは1列、達成度ラベルは可変幅に */
  .stat-tiles { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .stat-tile-value { font-size: 1.6rem; }
  .stats-insights { grid-template-columns: 1fr; gap: 24px; }
  /* ヒートマップ：セル間隔を詰めて横スクロールなしで収める */
  .heatmap-grid, .heatmap-months { gap: 1px; }
  .achieve-label { width: auto; flex: 1 1 auto; min-width: 0; font-size: .85rem; }
  .achieve-meter { flex-basis: 100%; order: 1; }
  .achieve-row { flex-wrap: wrap; row-gap: 6px; }
  .achieve-num { width: auto; }
  /* 検索：狭幅ではスニペットを2行まで折り返して読みやすくする */
  .search-row { align-items: flex-start; }
  .search-row .search-snip {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
}
@media (min-width: 861px) {
  #menu-toggle { display: none; }
}