/* 遠回しリーディング — アプリ共通スタイル。PRD 側は prd.css を使う。 */
:root{--ink:#12161c;--sub:#5b6673;--line:#e3e7ec;--soft:#f6f8fa;--accent:#1e5f9e;
--hot:#c2410c;--ok:#15803d;--ng:#b91c1c}
*{box-sizing:border-box}
body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
color:var(--ink);background:#fff;line-height:1.7;-webkit-text-size-adjust:100%}
.wrap{max-width:640px;margin:0 auto;padding:0 18px 90px}
header{padding:20px 0 11px;border-bottom:1px solid var(--line);
display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
h1{font-size:1.12rem;margin:0 0 4px}
.sub{color:var(--sub);font-size:.81rem;margin:0}
.lang{display:flex;gap:4px;flex-shrink:0}
.lang button{font:inherit;font-size:.72rem;padding:4px 8px;border:1px solid #cfd8e2;
background:#fff;border-radius:6px;cursor:pointer;color:var(--sub)}
.lang button.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}

.tabs{display:flex;gap:5px;margin:14px 0 4px}
.tabs button{flex:1;font:inherit;font-size:.78rem;padding:8px 4px;border:1px solid #cfd8e2;
background:#fff;border-radius:8px;cursor:pointer;line-height:1.35}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}

.banner{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--soft);
padding:12px 14px;border-radius:0 8px 8px 0;font-size:.82rem;line-height:1.7;margin:14px 0}
.banner b{color:var(--accent)}
.banner.hot{border-left-color:var(--hot)}.banner.hot b{color:var(--hot)}

.prog{display:flex;align-items:center;gap:10px;margin:14px 0 6px;font-size:.77rem;color:var(--sub)}
.prog .track{flex:1;height:6px;background:#eceff3;border-radius:3px;overflow:hidden}
.prog .fill{height:100%;background:var(--accent);width:0;transition:width .3s}
.score{font-variant-numeric:tabular-nums;white-space:nowrap}

.q{border:1px solid var(--line);border-radius:11px;padding:15px 17px;margin:13px 0;background:#fcfdfe}
.situ{font-size:.78rem;color:var(--sub);margin-bottom:9px;line-height:1.6}
.said{font-size:1rem;font-weight:600;line-height:1.65;padding:12px 14px;background:#f1f4f7;
border-radius:9px;margin-bottom:13px;
font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
.ask{font-size:.82rem;color:var(--sub);margin-bottom:8px}
.opts button{display:block;width:100%;text-align:left;font:inherit;font-size:.87rem;
padding:11px 13px;margin:7px 0;border:1px solid #cfd8e2;background:#fff;border-radius:9px;
cursor:pointer;line-height:1.6}
.opts button:hover:not(:disabled){border-color:var(--accent);background:#f6faff}
.opts button:disabled{cursor:default}
.opts button.correct{border-color:var(--ok);background:#f2fbf4}
.opts button.wrong{border-color:var(--ng);background:#fdf5f5}
.opts button.picked{border-color:var(--accent);background:#e8f0f8}
.opts button .mk{float:right;font-size:.75rem;font-weight:700;margin-left:8px}
.opts button.correct .mk{color:var(--ok)}
.opts button.wrong .mk{color:var(--ng)}

.exp{margin-top:11px;padding:12px 14px;border-left:3px solid var(--accent);background:var(--soft);
border-radius:0 8px 8px 0;font-size:.85rem;line-height:1.72}
.exp b{color:var(--accent)}
.exp .cue{margin-top:7px;font-size:.8rem;color:var(--sub)}
.tag{float:right;font-size:.72rem;color:var(--sub);font-weight:400;margin-left:8px}
.next{width:100%;font:inherit;font-size:.88rem;font-weight:600;padding:11px;margin-top:11px;
border:none;background:var(--ink);color:#fff;border-radius:9px;cursor:pointer}
.ghost{background:#fff;color:var(--ink);border:1px solid #cfd8e2;font-weight:500}

.result{border:1px solid var(--line);border-radius:11px;padding:19px;text-align:center;background:#fcfdfe}
.result .big{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.result .lbl{font-size:.81rem;color:var(--sub);margin-top:4px}
.bd{text-align:left;margin-top:17px;font-size:.82rem}
.bd .row{display:flex;align-items:center;gap:9px;margin:6px 0}
.bd .nm{width:10em;flex-shrink:0;color:var(--sub);font-size:.76rem}
.bd .bar{height:7px;border-radius:4px;background:var(--accent);min-width:3px}
.bd .v{font-size:.75rem;color:var(--sub);font-variant-numeric:tabular-nums}

.f{margin:13px 0}
.f>label{display:block;font-size:.78rem;color:var(--sub);font-weight:600;margin-bottom:5px}
textarea,input[type=text],input[type=password],select{width:100%;font:inherit;font-size:.87rem;
padding:9px 11px;border:1px solid #cfd8e2;border-radius:8px;background:#fff}
textarea{min-height:56px;resize:vertical;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:inherit;font-size:.78rem;padding:6px 11px;border:1px solid #cfd8e2;
background:#fff;border-radius:15px;cursor:pointer}
.chips button.on{background:#e8f0f8;border-color:var(--accent);color:var(--accent);font-weight:600}
.go{width:100%;font:inherit;font-size:.88rem;font-weight:600;padding:11px;margin-top:11px;
border:none;background:var(--ink);color:#fff;border-radius:9px;cursor:pointer}
.go:disabled{background:#c8ced6;cursor:default}
.read{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:.86rem}
.pct{font-size:.74rem;color:var(--sub);width:3.2em;text-align:right;flex-shrink:0}
.rbar{height:7px;border-radius:4px;background:var(--hot);flex-shrink:0;min-width:4px}

details.d{margin:11px 0}
details.d summary{cursor:pointer;font-size:.78rem;color:var(--sub);list-style:none;
display:flex;gap:6px;align-items:center}
details.d summary::-webkit-details-marker{display:none}
details.d summary::before{content:"▶";font-size:.62em;transition:transform .15s}
details.d[open] summary::before{transform:rotate(90deg)}
details.d .body{border:1px solid var(--line);border-radius:9px;padding:12px;margin-top:8px;background:var(--soft)}
details.d label{display:block;font-size:.74rem;color:var(--sub);margin:6px 0 3px}
.hint{font-size:.73rem;color:var(--sub);line-height:1.62;margin-top:8px}
.hint code{background:#eceff3;padding:1px 4px;border-radius:3px;font-size:.95em}
.err{border:1px solid #e8c4c4;background:#fdf5f5;color:#9c3d3d;padding:11px 13px;
border-radius:9px;font-size:.82rem;margin:11px 0;line-height:1.6}
.load{color:var(--sub);font-size:.83rem;padding:13px 0;text-align:center}
.card{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin:10px 0;background:#fcfdfe}
.card h3{margin:0 0 8px;font-size:.84rem;color:var(--sub)}
.logbox{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;
min-height:130px;white-space:pre;overflow:auto}
footer{margin-top:30px;padding-top:13px;border-top:1px solid var(--line);
font-size:.73rem;color:var(--sub);line-height:1.68}
footer a{color:var(--accent)}
@media(max-width:520px){.wrap{padding:0 14px 60px}h1{font-size:1rem}.said{font-size:.94rem}
 .tabs button{font-size:.7rem}.bd .nm{width:7.5em}}