/* V6.0 — clear, low-load, phone-first Japanese course. */
:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC",system-ui,sans-serif;
 --ink:#202b40;--muted:#687588;--line:#dce4ed;--blue:#2459ad;--blueSoft:#edf4ff;--white:#fff}
*{box-sizing:border-box}
body{margin:0;background:#f7f9fc;color:var(--ink);font-size:16px;line-height:1.7}
.header{background:#fff;border-bottom:1px solid var(--line);padding:13px 18px}
.header-inner{max-width:830px;margin:auto;display:flex;align-items:center;gap:12px;font-weight:750}
.logo{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#2459ad;color:white;font-size:22px}
main{max-width:830px;margin:20px auto 50px;padding:0 13px}
.wrap{display:grid;gap:15px}
.card{border:1px solid var(--line);border-radius:18px;background:var(--white);padding:25px 26px;box-shadow:0 4px 14px #172c4810}
h1{font-size:clamp(1.36rem,4vw,1.85rem);line-height:1.35;letter-spacing:.015em;margin:4px 0 15px}
h2{font-size:1.16rem;margin:12px 0}
p{margin:9px 0 14px}
.eyebrow{font-size:.82rem;letter-spacing:.05em;color:var(--blue);font-weight:800;margin:0 0 8px}
.muted,.foot{color:var(--muted);font-size:.91rem;line-height:1.65}
.progress{height:10px;background:#e3eaf3;border-radius:20px;overflow:hidden;margin:18px 0 4px}
.progress span{display:block;height:100%;background:var(--blue);transition:width .2s}
.lesson-preview{margin:20px 0 6px;padding-top:12px;border-top:1px solid var(--line)}
button{font:inherit;border-radius:11px;padding:11px 16px;min-height:47px;cursor:pointer;font-weight:690;letter-spacing:0;text-align:center}
button.primary{background:var(--blue);border:1px solid var(--blue);color:#fff}
button.secondary{background:#fff;border:1px solid #aabdd7;color:#20426e}
button:focus-visible,summary:focus-visible{outline:3px solid #f1a82d;outline-offset:2px}
button:hover{filter:brightness(.98)}
.steps{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 22px}
.steps span{border-radius:8px;border:1px solid var(--line);background:#f9fbff;color:var(--muted);font-size:.78rem;padding:5px 7px;line-height:1.45}
.steps span.current{background:var(--blueSoft);color:#194788;border-color:#90b3e6;font-weight:750}
.steps span.completed{background:#f0f5ee;color:#3c6744}
.words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.word{border:1px solid var(--line);border-radius:12px;padding:13px;background:#fcfdff}
.word strong{font-size:1.13rem;display:block}
.word small{font-size:.78rem;color:#52647c;display:block}
.word p{margin:5px 0 0}
.lead{font-size:1.12rem;font-weight:700;line-height:1.7;color:#15375e}
.explanation,.done-box,.feedback{border-radius:12px;padding:14px 16px;margin:15px 0}
.explanation{background:#f4f7fc;border:1px solid #d7e1ed}
.explanation p:last-child{margin-bottom:0}
.done-box{background:#f0f7f4;border:1px solid #b5d5be}
.feedback{background:#fff5ed;border:1px solid #e5b891}
.feedback.good{background:#f0f7f4;border-color:#b5d5be}
.jp{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:1.24rem;line-height:2.3;margin:18px 0 16px;overflow-wrap:anywhere}
ruby{ruby-position:over}
rt{font-size:.53em;font-weight:500;color:#52627c;line-height:1.2}
.answers{display:grid;grid-template-columns:1fr;gap:9px;margin:14px 0}
.answers button{text-align:left;white-space:normal;padding:13px 15px;line-height:1.6}
details{padding:12px 0 0;border-top:1px solid var(--line);margin-top:23px}
.recap-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.recap-list button{width:100%;text-align:left}
.recap-notes{margin:0 0 18px;padding-top:0;border:0}
summary{cursor:pointer;font-weight:680;color:#29496a}
footer{color:#77869b;font-size:.8rem;max-width:830px;margin:15px auto 28px;padding:0 14px;text-align:center}
.review-preview{padding-top:13px}
@media(max-width:650px){
 body{font-size:16px}
 .header{padding:9px 14px}
 main{padding:0 8px;margin:10px auto 33px}
 .card{padding:19px 15px;border-radius:14px}
 .words{grid-template-columns:1fr}
 .steps{gap:5px}
 .steps span{font-size:.7rem}
 .jp{font-size:1.15rem;line-height:2.3}
 button{width:100%;min-height:48px;margin:4px 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}