/* 漢検3級 対策システム 共通スタイル */
:root{
  --bg:#f3f1ec; --surface:#ffffff; --ink:#1f2328; --muted:#5f6670; --line:#d9d5cc; --soft:#ebe7de;
  --ai:#1f4e79; --shu:#b8402d; --ok:#2f7d4f; --mid:#a8741a; --ng:#b43a2c; --yomi:#1f4e79; --kaki:#b8402d;
  --kyo:"Klee One","UD Digi Kyokasho N-R","UD デジタル 教科書体 N-R","YuKyokasho","Hiragino Mincho ProN","Yu Mincho",serif;
  --display:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --body:"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#15171b; --surface:#1e2127; --ink:#e8e6e1; --muted:#a3a7ae; --line:#343841; --soft:#292d34;
  --ai:#8db6e3; --shu:#ec8a74; --ok:#6cc391; --mid:#e0b25a; --ng:#ee8072; --yomi:#8db6e3; --kaki:#ec8a74; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.7}
p{margin:0}
.wrap{max-width:560px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:18px 40px;display:flex;flex-direction:column;gap:14px}
header h1{font-family:var(--display);font-weight:900;font-size:1.5rem;margin:0;letter-spacing:.03em}
.crumb{font-size:.82rem;margin-bottom:2px}.crumb a{color:var(--muted)}
#view{display:flex;flex-direction:column;gap:14px}
.sub{color:var(--muted);font-size:.82rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.lbl{font-size:.75rem;letter-spacing:.08em;color:var(--muted);margin:0;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:.85rem;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ai);border-color:var(--ai);color:var(--bg)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stats b{display:block;font-size:1.6rem;line-height:1.2;font-variant-numeric:tabular-nums}
.stats span{font-size:.75rem;color:var(--muted)}
.stats em{font-style:normal;font-variant-numeric:tabular-nums}.stats em.up{color:var(--ok);font-weight:700}
.s-new b{color:var(--muted)} .s-learn b{color:var(--mid)} .s-done b{color:var(--ok)} .sched b{color:var(--ai)}
.stack{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--soft)}
.stack i{display:block;height:100%}
.today{font-size:.95rem}
.btn{font:inherit;font-weight:700;font-size:1rem;padding:14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;width:100%}
.btn.primary{background:var(--ai);border-color:var(--ai);color:var(--bg)}
.btn.small{font-size:.85rem;padding:10px;font-weight:400}
.btn:disabled{opacity:.4;cursor:default}
.btn.ok{color:var(--ok);border-color:var(--ok)}.btn.mid{color:var(--mid);border-color:var(--mid)}.btn.ng{color:var(--ng);border-color:var(--ng)}
.prog-btn{border-color:var(--ok);color:var(--ok);font-weight:700}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.row3 .btn{padding:12px 4px;font-size:.9rem}
.hint-txt{font-size:.8rem;color:var(--muted)}
.how{font-size:.85rem;color:var(--muted);margin:0;padding-left:1.2em}.how li{margin-bottom:2px}.how b{color:var(--ink)}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;font:inherit;font-size:.8rem;cursor:pointer;padding:4px;align-self:center}
.center{text-align:center}
.top{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:4px}.bar i{display:block;height:100%;background:var(--ai);transition:width .2s}
/* 問題カード */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px;min-height:240px}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
.hd{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tag{font-size:.75rem;font-weight:700;border-radius:3px;padding:0 8px;color:var(--surface)}
.t-y{background:var(--yomi)}.t-k{background:var(--kaki)}
.chip2{font-size:.72rem;font-weight:700;color:var(--ai);background:color-mix(in srgb,var(--ai) 12%,var(--surface));border-radius:3px;padding:0 6px}
.again{font-size:.72rem;color:var(--ng)}
.dots{display:flex;gap:3px;align-items:center}.dots i{width:8px;height:8px;border-radius:50%;border:1px solid var(--ok)}.dots i.on{background:var(--ok)}
.instr{font-size:.85rem;color:var(--muted)}.instr b{color:var(--ink)}
.qs{font-family:var(--display);font-weight:900;font-size:1.45rem;line-height:2.2;letter-spacing:.04em}
.qs.done{font-size:1.1rem;line-height:2.3}
.tg{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em;color:var(--ai)}
.tg.ans{color:var(--shu)}
.tg rt{font-family:var(--body);font-weight:700;font-size:.55em;color:var(--shu);letter-spacing:0}
.hintbox{font-size:.9rem;color:var(--mid);font-weight:700}
.note{font-size:.85rem;color:var(--muted)}
.paper{border:2px dashed var(--kaki);border-radius:10px;padding:10px 12px;color:var(--kaki);text-align:center;font-size:.95rem}
.paper small{color:var(--muted);font-size:.8rem}
.reveal{border-top:1px dashed var(--line);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.a{font-family:var(--display);font-weight:900;font-size:2rem;color:var(--shu);line-height:1.4}
.a.kyo{font-family:var(--kyo);font-weight:600;font-size:3rem;color:var(--ink);letter-spacing:.06em}
.a .me,.kyo .me{color:var(--shu)}
.kbox{display:flex;gap:14px;align-items:center;background:var(--soft);border-radius:10px;padding:10px 14px}
.kbig{font-family:var(--kyo);font-weight:600;font-size:4.2rem;line-height:1;width:1.2em;text-align:center;flex:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.08em 0;
  background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));background-size:1px 100%,100% 1px;background-position:center;background-repeat:no-repeat}
.kbig.sm{font-size:2.6rem}
.kdl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;font-size:.9rem;align-items:baseline}
.kdl dt{color:var(--muted);font-size:.75rem;font-weight:700}
.kdl dd{margin:0}.kdl dd b{font-size:1.15rem}
.kdl small{font-size:1em;color:var(--muted)}
.bu{font-family:var(--kyo);font-weight:600;font-size:1.25rem;color:var(--shu)}
.kaisetsu{border-left:3px solid var(--shu);padding:2px 10px;display:flex;flex-direction:column;gap:2px}
.kaisetsu span{font-size:.72rem;letter-spacing:.08em;color:var(--shu);font-weight:700}
.kaisetsu p{font-size:.92rem;line-height:1.75}
.exw{font-size:.88rem}.exw span{font-size:.72rem;font-weight:700;color:var(--muted);margin-right:8px;letter-spacing:.06em}
/* 漢字一覧 */
.klist{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px}
.kc{font-family:var(--kyo);font-weight:600;font-size:1.6rem;line-height:1;aspect-ratio:1;border-radius:8px;border:1px solid var(--line);cursor:pointer;color:var(--ink);background:var(--surface);padding:0}
.kc.sel{outline:3px solid var(--ai);outline-offset:1px}
/* 定着度 */
.score{font-family:var(--display);font-weight:900;font-size:3rem;color:var(--ai);font-variant-numeric:tabular-nums;text-align:center;line-height:1.2}
.score .of{font-size:1.2rem}
.scorebox{display:flex;flex-direction:column;align-items:center;border-top:1px dashed var(--line);padding-top:10px}
.msg{font-family:var(--display);font-weight:900;font-size:1.5rem;color:var(--ai)}
.era{display:flex;flex-direction:column;gap:6px}
.era-h{display:flex;justify-content:space-between;font-size:.9rem}
.num{font-variant-numeric:tabular-nums;color:var(--muted)}
.era-t{margin:4px 0 0;font-size:.85rem;font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.75rem;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:4px}
.legend i{width:14px;height:14px;border-radius:3px;border:1px solid var(--line)}
.map{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.cell{border-radius:6px;padding:6px 8px;display:flex;flex-direction:column;gap:2px;min-width:0;border:1px solid var(--line)}
.c-a{font-weight:700;font-size:.95rem;line-height:1.35}
.c-m{display:flex;justify-content:space-between;align-items:center;font-size:.62rem;gap:4px}
.c-m .dots i{width:6px;height:6px}
.lv0{background:var(--bg);border-style:dashed;color:var(--muted)}
.lv1{background:color-mix(in srgb,var(--mid) 16%,var(--surface));border-color:var(--mid)}
.lv3{background:color-mix(in srgb,var(--ok) 16%,var(--surface));border-color:var(--ok)}
.lv5{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.lv5 .dots i{border-color:var(--surface)} .lv5 .dots i.on{background:var(--surface)}
.miss{margin:0;padding-left:1.2em;font-size:.92rem}.miss li{margin-bottom:4px}
/* 書き直し練習 */
.mlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.mi{border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px}
.mi-top{display:flex;gap:6px;align-items:center}
.mi-q{font-family:var(--display);font-weight:900;font-size:1.05rem;line-height:2.3}
.mi-k{display:flex;gap:12px;align-items:center}
.w3{font:inherit;font-size:.9rem;display:flex;align-items:center;gap:8px;justify-content:center;padding:10px;border-radius:8px;border:1px solid var(--ok);background:var(--surface);color:var(--ok);cursor:pointer}
.w3 .box{width:16px;height:16px;border:2px solid var(--ok);border-radius:3px}
.w3[aria-pressed="true"]{background:var(--ok);color:var(--surface)}
.w3[aria-pressed="true"] .box{background:var(--surface);border-color:var(--surface)}
.foot{font-size:.75rem;color:var(--muted);text-align:center}
.btn:focus-visible,.chip:focus-visible,.link:focus-visible,.kc:focus-visible,.w3:focus-visible,.st:focus-visible{outline:3px solid var(--shu);outline-offset:2px}
/* ダッシュボード */
.goal-top{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.days{font-size:.9rem}.days b{font-size:1.9rem;color:var(--ai);font-variant-numeric:tabular-nums}
.pct{text-align:right;font-size:.85rem;color:var(--muted)}.pct b{font-size:1.9rem;color:var(--ok);font-variant-numeric:tabular-nums}
.bigbar{height:14px;border-radius:7px;background:var(--soft);overflow:hidden;display:flex}.bigbar i{display:block;height:100%}
.legend2{display:flex;gap:14px;font-size:.75rem;color:var(--muted);flex-wrap:wrap}
.legend2 span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px;background:var(--c)}
.pace{border-radius:8px;padding:8px 12px;font-size:.9rem;font-weight:700}
.pace small{display:block;font-weight:400;font-size:.8rem}
.pace.ok{background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok)}
.pace.mid{background:color-mix(in srgb,var(--mid) 16%,var(--surface));color:var(--mid)}
.pace.ng{background:color-mix(in srgb,var(--ng) 14%,var(--surface));color:var(--ng)}
.mission{border:2px solid var(--ai)}
.m-num{font-size:1.05rem}.m-num b{font-size:2rem;color:var(--ai);font-variant-numeric:tabular-nums}
.m-break{font-size:.85rem;color:var(--muted)}
.done-msg{color:var(--ok);font-weight:700;font-size:1.15rem}
.streak{display:flex;align-items:center;gap:14px}
.streak .fire{font-size:2rem;font-weight:900;color:var(--shu);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;flex:none}
.streak .fire small{font-size:.85rem;font-weight:700;margin-left:2px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal .dw{font-size:.68rem;color:var(--muted)}
.cal .c{aspect-ratio:1;border-radius:6px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--muted)}
.cal .c.full{background:var(--ok);color:var(--surface);font-weight:700}
.cal .c.part{background:color-mix(in srgb,var(--ok) 35%,var(--surface));color:var(--ink)}
.cal .c.today{outline:2px solid var(--ai);outline-offset:1px}
.cal .c.future{background:transparent;border:1px dashed var(--line)}
.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.st{position:relative;aspect-ratio:1;border-radius:10px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--ink);font-size:.72rem;line-height:1.25;overflow:hidden;background:var(--surface)}
.st b{font-size:1.15rem}
.st .p{font-variant-numeric:tabular-nums}
.st.locked{background:var(--bg);border-style:dashed;color:var(--muted)}
.st.master{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.st.master::after{content:"MASTER";position:absolute;bottom:4px;font-size:.58rem;font-weight:900;letter-spacing:.06em;border:1.5px solid currentColor;border-radius:3px;padding:0 3px;transform:rotate(-8deg)}
.st .fill,.st .fill2{position:absolute;left:0;right:0;bottom:0;z-index:0}
.st .fill{background:color-mix(in srgb,var(--mid) 22%,transparent)}
.st .fill2{background:color-mix(in srgb,var(--ok) 45%,transparent)}
.st .p{font-size:.68rem}
.st>*:not(.fill){position:relative;z-index:1}
.grow-in{animation:growin 1s ease-out;transform-origin:left}@keyframes growin{from{transform:scaleX(0)}}
.days{line-height:1.4}
.m-break b{color:var(--ink)}
.graph svg{width:100%;height:auto;display:block}
.res-big{font-size:1.4rem;font-weight:900;color:var(--ai);text-align:center}
.grow{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:6px}
.grow b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums}
.grow span{font-size:.75rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}.grow-in{animation:none}}

/* 答えの画面をコンパクトに・採点ボタンを画面下に固定 */
.card.rev{gap:10px;padding-bottom:0}
.card.rev .reveal{border-top:0;padding-top:0;gap:8px}
.ansrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.card.rev .a.kyo{font-size:2.6rem;line-height:1.2}
.card.rev .qs.done{font-size:1.15rem;line-height:2.2}
.card.rev .kbox{padding:8px 12px;gap:12px}
.card.rev .kbig{font-size:3.2rem}
.card.rev .kdl{font-size:.85rem;gap:0 10px}
.card.rev .kaisetsu p{font-size:.88rem;line-height:1.6}
.gradebar{position:sticky;bottom:0;margin:4px -18px 0;padding:10px 18px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:0 -6px 12px -8px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:6px;z-index:5}
.gnote{font-size:.75rem;color:var(--muted);text-align:center}
/* 練習の内訳 */
.bdrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bd{border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
.bd b{font-size:1.5rem;font-variant-numeric:tabular-nums;line-height:1.2}
.bd small{flex-basis:100%;font-size:.75rem;color:var(--muted)}
.bd.zero{opacity:.55}
.card.rev .tg rt{font-size:.62em}
.timer{display:flex;flex-direction:column;gap:4px}
.timer span{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.timer b{font-size:1.2rem;color:var(--ink)}
.tbar{height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.tbar i{display:block;height:100%;background:var(--ai);transition:width .1s linear}
.tbar i.low{background:var(--ng)}
.gnote.to{color:var(--ng);font-weight:700;font-size:.85rem}