/* クロコ先生の問題集 v0.1 ― 親しみ調・スマホ優先。色は画面案と同じ(暖色の紙+朱) */
:root{
  --bg:#f7f4ee; --surface:#ffffff; --fg:#2a2420; --muted:#6f655c; --line:#e3dcd2; --soft:#f0ebe2;
  --accent:#c8502a; --accent-soft:#fbe6dd; --ok:#2f8f4e; --ok-soft:#e1f2e6; --ng:#b7323c; --ng-soft:#f8e1e3; --star:#9a6b00; --star-soft:#fff3cc;
  --display:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --body:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#1b1715; --surface:#252019; --fg:#f0e9e0; --muted:#a79c90; --line:#3a332c; --soft:#2f2923;
  --accent:#f08a63; --accent-soft:#4a2a1d; --ok:#72cf8f; --ok-soft:#1d3a27; --ng:#f08a92; --ng-soft:#4a2227; --star:#f0c75e; --star-soft:#3d3214; color-scheme:dark }}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0; background:var(--bg); color:var(--fg)}
body{font-family:var(--body); font-size:15.5px; line-height:1.65; padding-bottom:max(24px, env(safe-area-inset-bottom,0px))}
.app{max-width:560px; margin:0 auto; padding-left:max(14px, env(safe-area-inset-left,0px)); padding-right:max(14px, env(safe-area-inset-right,0px))}
h1,h2{font-family:var(--display); font-weight:700; margin:0; line-height:1.3}
h1{font-size:19px} h2{font-size:16px}
p{margin:0}
button{font:inherit}
.top{display:flex; justify-content:space-between; align-items:center; gap:8px; padding-block:max(10px, env(safe-area-inset-top,0px)) 6px}
.brand{display:flex; align-items:center; gap:8px}
.logo{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--accent); color:#fff; font-weight:700; font-size:16px}
.today{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.tabs{position:sticky; top:0; z-index:5; display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; background:var(--soft); border-radius:12px; padding:3px; margin-block:4px 12px; box-shadow:0 2px 8px rgba(0,0,0,.05)}
.tabs button{border:0; background:transparent; color:var(--muted); padding:9px 6px; min-height:44px; border-radius:9px; cursor:pointer; font-size:14px}
.tabs button[aria-selected="true"]{background:var(--surface); color:var(--fg); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.1)}
.tabs button:focus-visible, .cta:focus-visible, .ghost:focus-visible, .link:focus-visible, .choice:focus-visible, input:focus-visible, textarea:focus-visible, .wrongitem:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.panel{display:grid; gap:12px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px 14px; display:grid; gap:8px}
.card.tint{background:var(--soft); border-color:transparent}
.kicker{font-size:12px; color:var(--muted); letter-spacing:.04em; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.title{font-weight:700; font-size:16px}
.sub{font-size:13px; color:var(--muted)}
.chip{display:inline-block; font-size:11px; font-weight:700; padding:0 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); line-height:1.7}
.chip.ok{background:var(--ok-soft); color:var(--ok)} .chip.ng{background:var(--ng-soft); color:var(--ng)} .chip.muted{background:var(--soft); color:var(--muted)}
.tasknav{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center}
.tasknav-mid{display:grid; justify-items:center; gap:2px; font-size:12.5px; color:var(--muted); text-align:center}
.ghost{background:var(--surface); border:1px solid var(--line); color:var(--fg); border-radius:10px; padding:8px 12px; cursor:pointer; min-height:44px}
.ghost.small,.cta.small{min-height:44px; padding:8px 14px; font-size:13.5px}
.link{background:none; border:0; color:var(--accent); cursor:pointer; padding:10px 12px; min-height:44px; font-size:12.5px; text-decoration:underline; text-underline-offset:3px}
.terms{display:grid; gap:4px; font-size:13.5px}
.terms .k{font-weight:500; color:var(--muted)}
.star{background:var(--star-soft); color:var(--star); border-radius:4px; padding:0 3px; font-weight:700}
details.note{font-size:13px; color:var(--muted)} details.note summary{color:var(--accent); cursor:pointer; font-weight:500}
details.note .nl{display:grid; gap:4px; margin-top:6px}
.q{display:grid; gap:7px; padding-block:8px; border-top:1px solid var(--line)}
.q:first-of-type{border-top:0; padding-top:0}
.stem{font-size:14.5px; line-height:1.6}
.qn{font-weight:700; color:var(--accent); margin-right:4px}
.choices{display:grid; gap:6px}
.choice{text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:9px 11px; color:var(--fg); cursor:pointer; display:grid; grid-template-columns:24px 1fr; gap:6px; line-height:1.5; min-height:44px; font-size:14px}
.choice b{color:var(--muted)}
.choice.ok{border-color:var(--ok); background:var(--ok-soft)} .choice.ng{border-color:var(--ng); background:var(--ng-soft)}
.choice[disabled]{cursor:default}
.verdict{font-size:13.5px; padding:8px 11px; border-radius:12px; background:var(--soft)}
.verdict .r{font-weight:700} .verdict .r.ok{color:var(--ok)} .verdict .r.ng{color:var(--ng)}
.verdict .trap{color:var(--muted); display:block; margin-top:4px; font-size:12.5px}
.prog{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.prog i{flex:1; height:7px; background:var(--soft); border-radius:99px; overflow:hidden; display:block}
.prog i b{display:block; height:100%; width:0; background:var(--accent); transition:width .3s}
.cta{background:var(--accent); color:#fff; border:0; border-radius:12px; padding:12px; font-weight:700; cursor:pointer; min-height:46px; font-size:15px}
.cta[disabled]{opacity:.45; cursor:default}
.cta.secondary{background:var(--surface); color:var(--accent); border:1px solid var(--accent)}
.toast{font-size:13px; color:var(--ok); min-height:1.2em; text-align:center}
.toast.ng{color:var(--ng)}
.done-banner{display:grid; gap:6px; text-align:center; padding:10px; border-radius:14px; background:var(--ok-soft); color:var(--ok); font-weight:700}
.done-banner .sub{color:var(--ok); font-weight:400}
.row{display:flex; flex-wrap:wrap; gap:8px}
.score{display:grid; grid-template-columns:minmax(0,1.2fr) 2fr auto; gap:8px; align-items:center; font-size:13.5px}
.score .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.score i{height:8px; background:var(--soft); border-radius:99px; overflow:hidden; display:block}
.score i b{display:block; height:100%; background:var(--accent)}
.score .n{font-variant-numeric:tabular-nums; color:var(--muted); font-size:12.5px; white-space:nowrap}
.list{display:grid; gap:6px; font-size:14px}
.wrongitem{display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:baseline; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px 10px; cursor:pointer; color:var(--fg); line-height:1.5}
.wrongitem .k{color:var(--ng); font-weight:700; font-size:12px}
.wrongitem small{color:var(--muted)}
.weak{display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:baseline; font-size:14px}
.weak .k{font-weight:700; font-size:12px; color:var(--star)} .weak .k.ng{color:var(--ng)}
.weak small{color:var(--muted)}
.big{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap}
.big b{font-family:var(--display); font-size:26px; font-weight:700; font-variant-numeric:tabular-nums}
.big .sub{font-size:13px}
input[type="date"], input[type="text"], textarea{font:inherit; font-size:14px; width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--fg)}
textarea{font-family:ui-monospace, Menlo, monospace; font-size:12px}
input[disabled]{opacity:.6}
.empty{font-size:13.5px; color:var(--muted); text-align:center; padding:8px}
@media (prefers-reduced-motion: reduce){ .prog i b{transition:none} }