/* Readable text at actual device width. Load after each concept's styling. */
html{font-size:clamp(16px,1.25vw,24px)}
body{line-height:1.5}
body[class] #app{height:auto;min-height:100dvh;overflow:visible;padding:1rem 1.6rem;gap:.7rem}
body[class] header{height:auto;min-height:3.5rem;gap:.75rem;flex-wrap:wrap}
body[class] .brand{font-size:1.6rem}body[class] .brand small{font-size:.85rem;letter-spacing:0}
body[class] .course{font-size:1rem}body[class] .icon-btn{width:3rem;height:3rem;flex-shrink:0}
body[class] .workspace{min-height:25rem;gap:1rem;padding:0}
body[class] .study{gap:1.25rem;grid-template-columns:1fr 1.2fr;min-width:0}
body[class] .picture-panel{padding:1rem;min-width:0}
body[class] .panel-caption{font-size:1rem}body[class] .picture-note{font-size:1.4rem;line-height:1.5}
body[class] .main-art{max-height:23rem;min-height:10rem}
body[class] .lesson-panel{padding:.8rem 1rem;min-width:0;justify-content:center}
body[class] .eyebrow{font-size:1rem;margin-bottom:.4rem;letter-spacing:0}
body[class] .lesson-panel h1,body[class] .game-top h1{font-size:1.8rem;line-height:1.35}
body[class] .character-stage{gap:1rem;margin:.3rem 0}
body[class] .hanja-build{width:8.6rem;height:9rem;flex-shrink:0}
body[class] .reading strong{font-size:2.6rem;margin-bottom:.25rem;white-space:nowrap}
body[class] .reading>span{font-size:1rem}
body[class] .components{gap:.6rem}body[class] .part{padding:.55rem .65rem;gap:.65rem;min-width:0}
body[class] .part>b{font-size:2.7rem;flex-shrink:0}body[class] .part>span{font-size:1.05rem;line-height:1.4}
body[class] .part small{font-size:1.1rem;margin-top:.1rem}body[class] .plus{font-size:1.6rem}
body[class] .explain{font-size:1.3rem;line-height:1.65;margin-top:.55rem;word-break:keep-all}
body[class] .phase-note{font-size:1.05rem;line-height:1.5;margin-top:.4rem;word-break:keep-all}
body[class] .steps{gap:.5rem;width:auto;max-width:100%;padding:.25rem;flex-wrap:wrap;align-self:stretch;justify-content:center}
body[class] .steps button{font-size:1rem;min-height:2.75rem;padding:.4rem .7rem;gap:.45rem;justify-content:center;flex:none}
body[class] .steps b{font-size:.9rem;width:1.65rem;height:1.65rem;flex-shrink:0}
body[class] footer{gap:.7rem;flex-wrap:wrap;min-height:3.25rem}
body[class] .primary,body[class] .secondary{font-size:1.2rem;min-height:3.25rem;padding:.65rem 1rem}
body[class] .footer-tip{font-size:.95rem}
body[class] .trail{width:4.6rem;padding:.8rem .4rem;gap:.8rem}body[class] .trail>b{font-size:1rem;text-align:center}
body[class] .trail small,body[class] .study-rail small,body[class] .collection small{display:none}
body[class] .island-tag{font-size:.9rem;position:static;align-self:center}
body[class] .study-rail{width:4.3rem;padding:.7rem .4rem}body[class] .study-rail>span{font-size:1rem}
body[class] .collection{width:5.8rem;padding:.65rem;gap:.7rem}body[class] .collection>span{font-size:1rem}
body[class] .collection>b{font-size:2rem}body[class] .collection>b span{font-size:1rem}
body[class] .game-top{gap:1rem;align-items:center}body[class] .game-top .eyebrow{font-size:1rem}
body[class] .score{font-size:1.5rem;white-space:nowrap}body[class] .score span{font-size:1rem}
body[class] .game-main{min-height:24rem;gap:1.25rem;grid-template-columns:1fr 1.2fr}
body[class] .question{padding:1rem;min-width:0}body[class] .question-tag{font-size:1rem}
body[class] .question h2{font-size:1.5rem;line-height:1.5;word-break:keep-all}
body[class] .quiz-art{max-height:23rem;min-height:8rem}body[class] .hint{font-size:1.05rem;text-align:center}
body[class] .answer-panel{gap:.75rem;min-width:0}body[class] .answers{min-height:20rem;gap:.75rem}
body[class] .answer-num{font-size:1rem;top:.5rem;left:.7rem}body[class] .answer>b{font-size:5.2rem}
body[class] .answer-caption{font-size:1.05rem;margin:0}body[class] .feedback{font-size:1.2rem;min-height:3rem;line-height:1.5;padding:.65rem;word-break:keep-all}
body[class].theme-c .answer{gap:1rem}body[class].theme-c .answer>b{font-size:3.5rem}
body[class] .question p{font-size:1.15rem;line-height:1.7}
body[class] .memory-grid{min-height:22rem;gap:.85rem}body[class] .memory-card{padding:.6rem}
body[class] .memory-card small{font-size:.85rem;letter-spacing:0}body[class] .memory-card b{font-size:4.5rem}body[class] .memory-card.word b{font-size:1.6rem}
body[class] .toast{position:fixed;bottom:1.5rem;font-size:1.1rem;max-width:90%;z-index:20}
@media(min-aspect-ratio:1/1) and (min-width:1101px){
 body[class] .brand{line-height:1.2}body[class] .brand small{line-height:1.25}
 body[class] .main-art{max-height:20rem}
 body[class] .quiz-art{max-height:19rem}
}
@media(max-width:1100px){
 body[class] .trail,body[class] .study-rail,body[class] .collection{display:none}
 body[class] .footer-tip{display:none}
}
@media(max-aspect-ratio:1/1){
 html{font-size:clamp(16px,2.22222vw,24px)}
 body[class] .workspace{min-height:0;flex-direction:column}
 body[class] .study{grid-template-columns:1fr;grid-template-rows:auto auto;gap:1rem;padding:0}
 body[class] .picture-panel{margin:0;transform:none;min-height:0}
 body[class] .main-art{flex:none;height:18rem;max-height:none;min-height:0}
 body[class] .lesson-panel{padding:1rem}
 body[class] .character-stage{gap:1rem}body[class] .hanja-build{width:9rem;height:9.4rem}
 body[class] .steps{order:2}body[class] .workspace{order:1}body[class] footer{order:3}
 body[class] .game-main{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0}
 body[class] .question{min-height:0;position:relative;align-items:center;padding:1rem}
 body[class] .quiz-art{flex:none;height:16rem;max-height:none;min-height:0}
 body[class] .game-friends{position:static;width:10rem;height:9rem;margin:.5rem 0;max-height:none}
 body[class] .question h2,body[class] .question p{text-align:center}
 body[class] .answers{min-height:22rem}body[class] .memory-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,minmax(9rem,1fr));min-height:29rem}
 body[class] .question p{margin-top:0}
}
@media(max-width:600px){
 html{font-size:16px}
 body[class] #app{padding:12px;gap:14px;min-height:100dvh}
 body[class] header{padding:10px;gap:10px}
 body[class] .brand{font-size:26px;letter-spacing:-1px;flex:1}
 body[class] .brand small{font-size:14px;margin-top:3px}
 body[class] .course{width:100%;order:4;justify-content:center;font-size:16px;gap:10px;margin:0}
 body[class] .icon-btn{width:44px;height:44px}
 body[class] .workspace,body[class] .study{display:flex;flex-direction:column;gap:16px;padding:0}
 body[class] .picture-panel{padding:14px;margin:0;border-radius:22px;transform:none}
 body[class] .panel-caption{font-size:16px}body[class] .main-art{height:230px;width:100%;min-height:0;flex:none;max-height:none}
 body[class] .picture-note{font-size:22px;padding:4px;line-height:1.5}
 body[class] .lesson-panel{padding:18px 14px}
 body[class] .lesson-panel h1{font-size:26px;letter-spacing:-.7px}
 body[class] .eyebrow{font-size:16px;margin-bottom:8px}
 body[class] .character-stage{margin:12px 0;gap:16px}
 body[class] .hanja-build{width:132px;height:140px}
 body[class] .reading strong{font-size:38px}body[class] .reading>span{font-size:17px}
 body[class] .components{gap:8px;align-items:stretch}
 body[class] .part{padding:12px 8px;gap:4px;flex-direction:column;text-align:center;justify-content:center}
 body[class] .part>b{font-size:46px;line-height:1.2}body[class] .part>span{font-size:18px}
 body[class] .part small{font-size:17px;margin-top:4px}body[class] .plus{align-self:center}
 body[class] .explain{font-size:22px;line-height:1.7;margin-top:16px}
 body[class] .phase-note{font-size:18px;line-height:1.65;margin-top:12px}
 body[class] .steps{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-radius:16px;padding:6px;order:2}
 body[class] .steps button{font-size:17px;padding:10px 4px;min-height:48px;border-radius:10px;gap:6px}
 body[class] .steps b{font-size:15px;width:24px;height:24px}
 body[class] footer{order:3;display:flex;gap:10px}
 body[class] .primary,body[class] .secondary{min-height:54px;font-size:19px;padding:12px 10px;flex:1}
 body[class] .game-top{flex-wrap:wrap;padding:16px;gap:12px}
 body[class] .game-top h1{font-size:27px}body[class] .score{font-size:24px;padding:8px 12px}
 body[class] .score span{font-size:17px}body[class] .game-top .eyebrow{font-size:16px}
 body[class] .game-main{display:flex;flex-direction:column;gap:16px;min-height:0}
 body[class] .question{padding:18px 14px;align-items:center;min-height:0}
 body[class] .question h2{font-size:24px;text-align:center}body[class] .question-tag{font-size:16px}
 body[class] .quiz-art{height:220px;min-height:0;max-height:none;flex:none}
 body[class] .hint{font-size:18px}body[class] .question p{font-size:20px;text-align:center}
 body[class] .answers{min-height:0;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(158px,auto);gap:12px;flex:none}
 body[class] .answer{padding:30px 10px 12px;gap:0;flex-direction:column;justify-content:center;border-radius:16px}
 body[class] .answer>b{font-size:76px;line-height:1.15}body[class] .answer-num{position:absolute;font-size:15px;top:8px;left:12px}
 body[class] .answer-caption{font-size:18px;margin:0}
 body[class] .feedback{font-size:20px;line-height:1.6;padding:14px;min-height:60px}
 body[class] .memory-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(154px,auto));gap:14px;flex:none;min-height:0;padding:3px}
 body[class] .memory-card small{font-size:14px}body[class] .memory-card b{font-size:72px}body[class] .memory-card.word b{font-size:25px}
 body[class] .game-friends{position:static;width:150px;height:140px;margin:12px auto}
 body[class] .toast{font-size:18px;width:calc(100% - 28px);max-width:none;padding:16px;bottom:14px}
}