/* 行政書士2026 演習バンク 共通スタイル ─ モバイル1画面完結最適化 */
:root { --navy:#1f3a5f; --navy2:#2c5282; --accent:#c8a24b; --accent2:#d4af37; --bg:#f4f1ea; --card:#fff; --ink:#23272e; --muted:#6b7280; --line:#e2e0d8; --soft:#eef2f7; --good:#2f855a; --warn:#c05621; --bad:#c53030; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif; background:var(--bg); color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased; padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)); }

/* 上部（デスクトップは通常表示、モバイルではコンパクト化） */
header.h { background:linear-gradient(135deg,var(--navy),var(--navy2)); color:#fff; padding:16px 14px 12px; text-align:center; }
header.h .kicker { letter-spacing:.28em; font-size:10px; opacity:.85; font-weight:600; }
header.h h1 { font-size:18px; margin:3px 0 2px; }
header.h .sub { font-size:12px; opacity:.9; }
.back { max-width:860px; margin:8px auto 0; padding:0 14px; display:flex; gap:6px; flex-wrap:wrap; }
.back a { font-size:12px; color:var(--navy); text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:4px 11px; font-weight:600; }
.back a:hover { background:var(--navy); color:#fff; }

.wrap { max-width:860px; margin:0 auto; padding:12px 12px 12px; }

/* フィルタ ─ 常に1行、横スクロール可 */
.filters { display:flex; gap:6px; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:10px; padding-bottom:3px; scrollbar-width:none; }
.filters::-webkit-scrollbar { display:none; }
.sel { font-family:inherit; font-size:12px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px 8px; color:var(--ink); font-weight:600; cursor:pointer; flex-shrink:0; }
.btn { font-family:inherit; font-size:12.5px; background:var(--navy); color:#fff; border:none; border-radius:8px; padding:7px 14px; font-weight:700; cursor:pointer; flex-shrink:0; }
.btn:hover { background:var(--navy2); }
.btn.primary { background:var(--accent); color:#3a2900; }
.btn.primary:hover { background:var(--accent2); }
.btn.ghost { background:var(--card); color:var(--navy); border:1px solid var(--line); }
.btn.ghost:hover { background:var(--soft); }

/* 統計 ─ 1行チップ列 */
.stats { display:flex; gap:5px; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:10px; padding-bottom:3px; scrollbar-width:none; }
.stats::-webkit-scrollbar { display:none; }
.stats .s { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:5px 9px; text-align:center; flex-shrink:0; display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.stats .s .k { font-size:10px; color:var(--muted); letter-spacing:.03em; }
.stats .s b { font-size:14px; color:var(--navy); font-weight:700; }
.stats .s.ok b { color:var(--good); }
.stats .s.mid b { color:#b7791f; }
.stats .s.ng b { color:var(--bad); }

/* 問題カード */
.qcard { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 15px; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.qcard .meta { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px; font-size:11px; color:var(--muted); }
.qcard .meta .cat { background:var(--soft); color:var(--navy); padding:2px 7px; border-radius:10px; font-weight:700; }
.qcard .meta .type { padding:2px 7px; border-radius:10px; color:#fff; font-weight:700; font-size:10.5px; }
.qcard .meta .type.tox { background:var(--navy2); }
.qcard .meta .type.t5 { background:#6b46c1; }
.qcard .meta .src { font-size:10.5px; }
.qcard .meta .stat-pill { padding:2px 8px; border-radius:10px; font-weight:700; font-size:10.5px; border:1px solid; }
.qcard .meta .stat-pill.stat-good { background:#eaf5ec; color:var(--good); border-color:#bde4c6; }
.qcard .meta .stat-pill.stat-mid { background:#fff4e0; color:#b7791f; border-color:#f0d8a8; }
.qcard .meta .stat-pill.stat-bad { background:#fbeaea; color:var(--bad); border-color:#f0c4c4; }
.qcard .meta .stat-pill.stat-new { background:var(--soft); color:var(--muted); border-color:var(--line); }
.qcard .qq { font-size:14.5px; line-height:1.75; margin-bottom:11px; }
.qcard .lead { background:var(--soft); padding:8px 10px; border-radius:7px; margin-bottom:8px; font-size:13px; }

/* 選択肢 */
.opts { display:flex; gap:8px; flex-wrap:wrap; }
.opts.col { flex-direction:column; gap:6px; }
.opt { flex:1 1 40%; min-width:110px; font-family:inherit; font-size:16px; font-weight:700; padding:12px 10px; border:2px solid var(--line); background:var(--card); border-radius:10px; cursor:pointer; transition:.15s; text-align:center; }
.opt.ox:hover, .opt.ox:active { border-color:var(--good); color:var(--good); }
.opt.xx:hover, .opt.xx:active { border-color:var(--bad); color:var(--bad); }
.opt.picked { border-width:3px; }
.opt.correct { background:var(--good); color:#fff; border-color:var(--good); }
.opt.picked.ox:not(.correct) { background:#eaf5ec; }
.opt.picked.xx:not(.correct) { background:#fbeaea; }
.opt5 { display:flex; gap:8px; align-items:flex-start; text-align:left; font-family:inherit; font-size:13.5px; padding:9px 11px; border:2px solid var(--line); background:var(--card); border-radius:9px; cursor:pointer; transition:.15s; line-height:1.6; }
.opt5:hover { border-color:var(--navy2); }
.opt5 .n { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--soft); color:var(--navy); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; }
.opt5.picked { border-width:3px; }
.opt5.correct { background:#eaf5ec; border-color:var(--good); }
.opt5.correct .n { background:var(--good); color:#fff; }
.opt5.wrong { background:#fbeaea; border-color:var(--bad); }
.opt5.wrong .n { background:var(--bad); color:#fff; }
.hint { text-align:center; color:var(--muted); font-size:11.5px; margin-top:8px; }

/* 正誤・解説 */
.verdict { margin-top:10px; padding:7px 10px; border-radius:8px; font-weight:700; text-align:center; font-size:13.5px; }
.verdict.v-ok { background:#eaf5ec; color:var(--good); }
.verdict.v-ng { background:#fbeaea; color:var(--bad); }
.exp { margin-top:9px; background:var(--soft); border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.75; }

/* 各肢解説は折り畳み可（詳細タグ） */
details.exps { margin-top:9px; background:#fffdf5; border:1px solid #ece3c7; border-radius:8px; padding:8px 12px; font-size:12.5px; }
details.exps summary { cursor:pointer; font-weight:700; color:var(--navy); font-size:12.5px; padding:2px 0; list-style:none; }
details.exps summary::-webkit-details-marker { display:none; }
details.exps summary::before { content:"▶ "; font-size:10px; color:var(--muted); transition:transform .2s; display:inline-block; }
details.exps[open] summary::before { transform:rotate(90deg); }
details.exps ol { margin-left:20px; margin-top:6px; }
details.exps li { padding:3px 0; }

/* 自己申告 */
.self { margin-top:11px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.self > span { flex-shrink:0; }
.selfset { font-family:inherit; font-size:14px; font-weight:700; background:var(--card); border:2px solid var(--line); border-radius:8px; padding:5px 14px; cursor:pointer; }
.selfset.sok:hover, .selfset.sok.on { background:var(--good); color:#fff; border-color:var(--good); }
.selfset.smid:hover, .selfset.smid.on { background:#b7791f; color:#fff; border-color:#b7791f; }
.selfset.sng:hover, .selfset.sng.on { background:var(--bad); color:#fff; border-color:var(--bad); }
.selfclr { font-family:inherit; font-size:11px; background:transparent; border:none; color:var(--muted); cursor:pointer; text-decoration:underline; margin-left:auto; }

/* ナビは画面下に固定 */
.nav { position:fixed; left:0; right:0; bottom:0; background:rgba(255,255,255,.96); backdrop-filter:saturate(150%) blur(10px); border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); justify-content:center; z-index:100; }
.nav .btn { min-width:88px; padding:9px 14px; }
.nav .pos { font-weight:700; color:var(--navy); font-size:14px; min-width:76px; text-align:center; }
.empty { text-align:center; color:var(--muted); padding:30px 16px; font-size:13.5px; }

footer { text-align:center; color:var(--muted); font-size:11.5px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }

/* -------- モバイル最適化: ヘッダー/backを畳んで縦を稼ぐ -------- */
@media (max-width: 640px) {
  header.h { padding:10px 12px 8px; }
  header.h .kicker { display:none; }
  header.h h1 { font-size:15px; margin:0; }
  header.h .sub { font-size:11px; margin-top:1px; }
  .back { display:none; } /* ホームバーがあるので省略 */
  .wrap { padding:10px 12px 12px; }
  .qcard { padding:12px 13px; border-radius:11px; }
  .qcard .qq { font-size:14px; line-height:1.7; margin-bottom:9px; }
  .opt { min-width:0; padding:11px 8px; font-size:15px; }
  .opt5 { padding:8px 10px; font-size:13px; }
  .exp { padding:9px 11px; font-size:12.5px; }
  .stats .s b { font-size:13px; }
  .stats .s { padding:4px 8px; }
  .filters { gap:5px; }
  .sel { padding:5px 7px; font-size:11.5px; }
  .btn { padding:6px 12px; font-size:12px; }
  .nav .btn { min-width:80px; padding:8px 12px; font-size:12.5px; }
  .nav .pos { font-size:13px; min-width:66px; }
  footer { display:none; }
}