/* Reading comes first. Shared by the day course, topic lessons and news. */
:root { --reading-ink:#263e35; --reading-guide:#675777; --reading-paper:#fffefa; }
main { min-width:0; }
.loading-note { padding:16px 20px; border:1px solid #dce2d4; border-radius:14px; background:#eef2e7; color:#263e35; }
.result-count { margin:0 0 18px; min-height:1.6em; color:#526254; font-size:14px; }
.recovery-state { grid-column:1/-1; padding:clamp(24px,4vw,40px); border:1px solid #dce2d4; border-radius:22px; background:#fffefa; text-align:left; }
.recovery-state h2 { font-size:clamp(23px,3vw,30px); margin:18px 0 12px; }
.recovery-state p { max-width:55ch; line-height:1.75; margin:14px 0; }
.recovery-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:#365c49; background:#edf1e4; }
.recovery-icon svg { width:30px; height:30px; }
.recovery-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-top:24px; }
.recovery-actions :is(button,a) { min-height:44px; display:inline-flex; align-items:center; justify-content:center; white-space:normal; text-align:center; }
.recovery-actions .text-link { background:transparent; border:0; cursor:pointer; font:inherit; }
@media(max-width:480px){ .recovery-actions { align-items:stretch; flex-direction:column; } .recovery-actions :is(button,a) { width:100%; } }
main :is(h1,h2,h3,p) { text-wrap:pretty; }
main :is(h1,h2,h3) { text-wrap:balance; }
/* Keep edited English thoughts together when they fit; allow reflow at small widths. */
.english-chunk { display:inline-block; max-inline-size:100%; white-space:normal; vertical-align:baseline; word-break:normal; overflow-wrap:break-word; text-wrap:pretty; }
main :is(h1,h2,h3) .english-chunk { text-wrap:balance; }
[lang="ko"] { word-break:keep-all; overflow-wrap:break-word; }
.ko-reading-unit { display:inline-flex; flex-direction:column; vertical-align:baseline; min-width:0; max-width:100%; }
.romanization,
.ko-reading-unit>.romanization { font-size:14px!important; line-height:1.55!important; color:var(--reading-guide)!important; letter-spacing:.01em!important; overflow-wrap:break-word; word-break:normal; margin:5px 0 8px!important; }
.reading-phrase { display:block; min-width:0; max-width:100%; }
.reading-flow { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 20px; min-width:0; }
.reading-chunk { display:inline-flex; flex-direction:column; min-width:0; max-width:100%; }
.reading-phrase .topic-ko { font-size:26px; font-weight:500; line-height:1.55; letter-spacing:-.025em; }
.reading-phrase .topic-en { font-size:16px; line-height:1.65; color:#526254; margin-top:10px; max-width:64ch; }
.reading-flow .romanization { margin-bottom:0!important; }
.reading-phrase[data-layout="semantic-pairs"] .topic-en { border-top:1px solid #dce2d5; padding-top:12px; margin-top:16px; }
.topic-reader,.lesson-panel { background:var(--reading-paper); border-color:#dce2d4; box-shadow:0 8px 28px #243f3507; }
.topic-reader { max-width:960px; padding:36px clamp(20px,4vw,44px); }
.topic-reader>p,.topic-explanation,.step-help,.sound-workshop>p { max-width:68ch; font-size:16px; line-height:1.8; }
.topic-reader .expression-grid,.lesson-panel .expression-grid { grid-template-columns:1fr; gap:16px; }
.topic-reader .expression,.lesson-panel .expression { padding:24px; background:#f5f6ed; border:1px solid #e0e5d7; min-width:0; }
.expression .ko { font-size:26px; line-height:1.55; }
.expression .en { font-size:16px; line-height:1.65; }
.expression-note { max-width:64ch; font-size:14px; line-height:1.7; color:#596858; }
.expression-actions { margin-top:16px; padding-top:12px; border-top:1px solid #dce2d4; }
.expression-actions .text-link,.bubble .text-link,.sound-example .text-link,.line-reveal { min-height:44px; padding:10px 2px; font-size:14px; }
.dialogue-line { align-items:flex-start; gap:14px; min-width:0; }
.dialogue-line .speaker { flex:0 0 52px; max-width:72px; font-size:13px; overflow-wrap:break-word; padding-top:18px; }
.dialogue-line .bubble { min-width:0; flex:1; padding:24px; background:#f0f4e9; border:1px solid #dfe7d5; border-radius:4px 20px 20px; }
.dialogue-line:nth-child(even) .bubble { background:#f4eff8; border-color:#e8dfed; }
.topic-reader .dialogue,.lesson-panel .dialogue { display:grid; gap:20px; max-width:850px; }
.topic-reader .question { padding:24px 0; border-bottom:1px solid var(--line); }
.topic-reader .quiz-option,.lesson-panel .quiz-option { padding:16px 18px; font-size:16px; line-height:1.65; min-height:52px; white-space:normal; }
.topic-stepper { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.topic-stepper>button { min-width:0; white-space:normal; min-height:64px; padding:12px; font-size:13px; }
.topic-stepper>button[aria-current="step"] { box-shadow:0 0 0 3px #dce9be; }
.topic-controls,.lesson-controls { align-items:center; }
.topic-controls .btn,.lesson-controls .btn { min-height:48px; white-space:normal; line-height:1.5; }
.topic-recall-box .recall-input,.writing-area { width:100%; min-width:0; font-size:18px; line-height:1.7; }
.topic-checklist label { min-height:44px; padding:8px 0; font-size:15px; }
.topic-reader .task-note,.writing-workshop .task-note,.sound-workshop .task-note { font-size:14px; line-height:1.75; max-width:68ch; }
.topic-stage-help { margin:10px 0 0; color:#526254; font-size:14px; line-height:1.7; }
.parallel-line>div { min-width:0; }
.parallel-line [lang="ko"] { font-size:25px; line-height:1.65; }
.english-line { font-size:16px; line-height:1.75; max-width:68ch; }
.atlas-card p,.track-lesson p { font-size:15px; line-height:1.75; }
.atlas-card-top,.atlas-card-end { font-size:12px; line-height:1.6; }
.atlas-stamps span { font-size:11px; }
.world-intro p { max-width:54ch; }
.alphabet-layout>* { min-width:0; }
.alphabet-keys { align-items:stretch; }
.alphabet-key { min-width:0; }
.alphabet-key>small { font-size:13px; line-height:1.4; overflow-wrap:break-word; }
.letter-library .tip,.mouth-guide { font-size:15px; line-height:1.8; }
.sound-pairs>button { min-height:112px; }
.section-tabs a { min-height:44px; display:inline-flex; align-items:center; }
.mobile-nav a>span { font-size:11px; }
@media(min-width:1100px) {
  .topic-reader .expression { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,.45fr); column-gap:32px; align-items:start; }
  .topic-reader .expression>.reading-phrase { grid-row:span 2; }
  .topic-reader .expression .expression-actions { flex-wrap:wrap; }
}
@media(max-width:650px) {
  main { padding-left:18px; padding-right:18px; }
  .topic-reader,.lesson-panel { padding:26px 18px; border-radius:18px; }
  .topic-reader .expression,.lesson-panel .expression { padding:20px 16px; }
  .reading-phrase .topic-ko,.expression .ko { font-size:24px; }
  .reading-flow { gap:10px 14px; }
  .dialogue-line { gap:8px; flex-wrap:wrap; }
  .dialogue-line .speaker { flex-basis:100%; max-width:none; padding:0 0 0 3px; font-weight:600; }
  .dialogue-line .bubble { flex-basis:100%; padding:20px 16px; }
  .topic-stepper { gap:5px; overflow:visible; }
  .topic-stepper>button { padding:10px 3px; font-size:10px; min-width:0; min-height:76px; justify-content:flex-start; overflow-wrap:break-word; }
  .topic-controls,.lesson-controls { display:flex; flex-wrap:wrap; gap:10px; }
  .topic-controls .btn,.lesson-controls .btn { padding:13px 15px; font-size:14px; }
  .topic-controls .btn:last-child,.lesson-controls .btn:last-child { flex:1; }
  .topic-recall-box { padding:22px 16px; }
  .topic-stage-help { font-size:13px; }
  .track-hero { padding:26px 22px; }
  .track-lesson>div { min-width:0; }
  .atlas-card { min-height:240px; }
  .atlas-card p { font-size:15px; }
  .atlas-card-end { gap:12px; }
  .alphabet-keys,.letter-library .alphabet-keys { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .syllable-controls { grid-template-columns:1fr; }
  .syllable-controls label { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:12px; font-size:14px; }
  .syllable-controls select { min-width:0; }
  .syllable-result { flex-direction:column; gap:12px; }
  .syllable-result .btn { max-width:none; }
  .session-buttons { flex-wrap:wrap; }
  .session-buttons .btn { min-height:48px; white-space:normal; }
  .parallel-line { gap:10px; }
  .parallel-line [lang="ko"] { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) { .atlas-card { transform:none!important; } }

/* Size cards by the remaining content width, including the tablet sidebar. */
.course-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.course-grid>.week-card,.settings-grid>.card{min-width:0}
.settings-grid select{max-inline-size:100%;min-inline-size:0}
.settings-grid .btn,main .banner .btn{max-inline-size:100%;white-space:normal;overflow-wrap:anywhere}
main .banner{min-width:0;flex-wrap:wrap}
main .banner>*{min-width:0}
.dashboard-grid>*,.track-lessons>*,.track-lesson>div{min-width:0}.track-number{flex:0 0 36px;min-width:36px}.track-lesson{overflow-wrap:anywhere}