/* The lesson is a viewport, not a scrolling document. Space goes to learning content. */
html{height:100%;font-size:clamp(16px,min(1.25vw,2.222vh),24px)}
body{height:100%;min-height:0;margin:0;line-height:1.35}
body[class] #app{height:100dvh;min-height:0;padding:1rem 1.5rem;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:.6rem;overflow:visible}
body[class] #app>*{order:0}
body[class].game #app{grid-template-rows:auto auto auto minmax(0,1fr) auto}
body[class] header{height:3.4rem;min-height:0;flex-wrap:nowrap;padding:.35rem .6rem}
body[class] .brand{line-height:1.1}body[class] .brand small{line-height:1.2}
body[class] .course{width:auto;order:0;margin-left:auto;white-space:nowrap}
body[class] .workspace,body[class] .study,body[class] .game-main,body[class] .answer-panel{min-height:0;height:100%;min-width:0}
body[class] .workspace{padding:0;gap:.9rem}
body[class] .study{display:grid;grid-template-columns:1fr 1.2fr;grid-template-rows:minmax(0,1fr);gap:1.2rem}
body[class] .picture-panel{display:flex;flex-direction:column;min-height:0;padding:.7rem;margin:0;transform:none}
body[class] .main-art{flex:1;width:100%;height:0;min-height:0;max-height:none;object-fit:contain}
body[class] .picture-note{font-size:1.3rem;line-height:1.3;margin:.3rem 0;padding:.2rem}
body[class] .panel-caption{flex-shrink:0;line-height:1.2}
body[class] .lesson-panel{padding:.7rem .9rem;justify-content:center;gap:0}
body[class] .lesson-panel h1{font-size:1.7rem}body[class] .eyebrow{margin-bottom:.3rem}
body[class] .hanja-build{width:8.5rem;height:8.8rem}
body[class] .explain{font-size:1.3rem;line-height:1.45;margin-top:.4rem}
body[class] .phase-note{font-size:1rem;line-height:1.35;margin-top:.3rem}
body[class] .steps{display:flex;flex-wrap:nowrap;justify-content:center;width:auto;padding:.2rem;gap:.4rem}
body[class] .steps button{padding:.35rem .6rem;min-height:2.6rem;font-size:1rem}
body[class] footer{min-height:0;flex-wrap:nowrap;height:3.25rem}
body[class] .primary,body[class] .secondary{min-height:0;height:100%;padding:.5rem .85rem;font-size:1.2rem;white-space:nowrap;flex:none}
body[class] .primary{margin-left:auto}
body[class] .game-top{min-height:0;padding:.5rem .8rem;flex-wrap:nowrap}
body[class] .game-top h1{font-size:1.65rem}
body[class] .game-top .eyebrow{margin-bottom:.15rem}
body[class] .game-main{display:grid;grid-template-columns:1fr 1.2fr;grid-template-rows:minmax(0,1fr);gap:1rem}
body[class] .question{min-height:0;padding:.8rem;gap:.2rem}
body[class] .question h2{font-size:1.4rem;line-height:1.35}
body[class] .quiz-art{flex:1;height:0;min-height:0;max-height:none;width:100%;object-fit:contain}
body[class] .answers{min-height:0;flex:1;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;grid-auto-rows:auto;gap:.65rem}
body[class] .answer{min-height:0;padding:.5rem;flex-direction:column;justify-content:center;gap:0}
body[class] .answer>b{font-size:4.7rem;line-height:1.1}
body[class] .answer-num{position:absolute;top:.4rem;left:.5rem}
body[class] .answer-caption{font-size:1rem;margin:0}
body[class] .feedback{flex-shrink:0;font-size:1.15rem;line-height:1.4;min-height:2.8rem;padding:.4rem}
body[class] .memory-grid{flex:1;min-height:0;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:.65rem}
body[class] .memory-card{min-height:0;justify-content:center;gap:.3rem;padding:.4rem}
body[class] .memory-card b{font-size:4rem;line-height:1.1}
body[class] .memory-card.word b{font-size:1.6rem}
body[class] .game-friends{position:static;width:60%;height:35%;max-height:10rem;object-fit:contain;margin:.6rem 0}
body[class] .question p{font-size:1.1rem;line-height:1.5}
body[class].theme-c .answer{gap:0}
@media(max-aspect-ratio:1/1){
 html{font-size:clamp(16px,min(2.222vw,1.25vh),24px)}
 body[class] .trail,body[class] .study-rail,body[class] .collection{display:none}
 body[class] .study{grid-template-columns:1fr;grid-template-rows:minmax(0,.42fr) minmax(0,.58fr);gap:.7rem;padding:0}
 body[class] .workspace{display:block}
 body[class] .lesson-panel{padding:.65rem .9rem}
 body[class] .steps{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
 body[class] .steps button{min-height:2.6rem;justify-content:center}
 body[class] .primary,body[class] .secondary{flex:1;margin:0}
 body[class] .footer-tip{display:none}
 body[class] .game-main{grid-template-columns:1fr;grid-template-rows:minmax(0,.4fr) minmax(0,.6fr);gap:.7rem}
 body[class] .question{padding:.7rem;align-items:center}
 body[class] .question h2,body[class] .question p{text-align:center}
 body[class] .game-friends{display:none}
 body[class].theme-d .game-main{grid-template-rows:auto minmax(0,1fr)}
 body[class].theme-d .question{padding:.6rem}
 body[class].theme-d .question p{display:none}
 body[class] .memory-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px) and (max-aspect-ratio:1/1){
 body[class] #app{padding:8px;gap:6px}
 body[class] header{height:48px;padding:4px 6px;gap:8px}
 body[class] .brand{font-size:24px;flex:1}
 body[class] .brand small,body[class] .course{display:none}
 body[class] .icon-btn{width:42px;height:42px}
 body[class] .picture-panel{padding:6px 10px;border-radius:18px}
 body[class] .panel-caption,body[class] .island-tag{display:none}
 body[class] .picture-note{font-size:20px;line-height:1.25;margin:2px 0;padding:0}
 body[class] .study{grid-template-rows:minmax(0,.36fr) minmax(0,.64fr);gap:6px}
 body[class] .lesson-panel{padding:8px 10px}
 body[class] .lesson-panel h1,body[class] .eyebrow,body[class] .phase-note{display:none}
 body[class] .character-stage{height:clamp(76px,13dvh,114px);flex-shrink:0;gap:14px;margin:0 0 4px}
 body[class] .hanja-build{height:100%;width:110px}
 body[class] .reading strong{font-size:34px;margin:0}
 body[class] .reading>span{font-size:16px}
 body[class] .components{gap:6px;align-items:stretch}
 body[class] .part{flex-direction:row;padding:7px 6px;gap:6px;justify-content:center;min-height:62px}
 body[class] .part>b{font-size:34px;line-height:1}
 body[class] .part>span{font-size:17px;line-height:1.25;text-align:left}
 body[class] .part small{font-size:16px;line-height:1.2;margin-top:3px}
 body[class] .plus{font-size:20px;align-self:center}
 body[class] .explain{font-size:20px;line-height:1.4;margin-top:6px}
 body[class] .steps{padding:3px;gap:3px;border-radius:12px}
 body[class] .steps button{font-size:16px;min-height:40px;padding:5px 2px;gap:5px;border-radius:8px}
 body[class] .steps b{width:22px;height:22px;font-size:14px}
 body[class] footer{height:48px;gap:6px}
 body[class] .primary,body[class] .secondary{font-size:18px;padding:6px;gap:5px}
 body[class] .primary svg,body[class] .secondary svg{width:18px;height:18px;flex-shrink:0}
 body[class] .game-top{padding:6px 8px;gap:8px}
 body[class] .game-top h1{font-size:22px;line-height:1.25}
 body[class] .score{font-size:22px;padding:6px 8px}
 body[class] .score span{font-size:16px}
 body[class] .question{padding:8px}
 body[class] .question-tag,body[class] .hint{display:none}
 body[class] .question h2{font-size:21px;line-height:1.35}
 body[class] .answer-panel{gap:6px}
 body[class] .answers{gap:8px}
 body[class] .answer{padding:16px 8px 6px;border-radius:14px}
 body[class] .answer>b{font-size:64px}
 body[class] .answer-num{font-size:14px;top:5px;left:8px}
 body[class] .answer-caption{font-size:17px}
 body[class] .feedback{font-size:18px;line-height:1.35;min-height:50px;padding:6px}
 body[class] .memory-grid{gap:9px;padding:2px}
 body[class] .memory-card small,body[class] .memory-card>span{display:none}
 body[class] .memory-card b{font-size:60px}body[class] .memory-card.word b{font-size:24px}
}
@media(max-width:600px) and (max-height:680px) and (max-aspect-ratio:1/1){
 body[class] .study{grid-template-rows:minmax(0,.32fr) minmax(0,.68fr)}
 body[class] .character-stage{height:74px}
 body[class] .reading strong{font-size:30px}body[class] .reading>span{display:none}
 body[class] .part{min-height:55px;padding:5px 4px;gap:4px}
 body[class] .explain{font-size:19px;line-height:1.35;margin-top:4px}
 body[class] .picture-note{font-size:18px}
 body[class] .answer>b{font-size:50px}
 body[class] .answer{padding:4px}
 body[class] .answer-caption,body[class] .answer-num{display:none}
 body[class] .memory-card b{font-size:48px}
}

@media(max-height:540px) and (min-aspect-ratio:1/1){
 html{font-size:16px}
 body[class] #app{padding:6px 10px;gap:4px}
 body[class] header{height:42px;padding:2px 6px;gap:8px}
 body[class] .brand{font-size:23px}body[class] .brand small{display:none}
 body[class] .icon-btn{width:38px;height:38px}
 body[class] .course{font-size:16px}
 body[class] .study{grid-template-columns:.8fr 1.2fr;gap:10px;padding:0}
 body[class] .trail,body[class] .study-rail,body[class] .collection,body[class] .footer-tip{display:none}
 body[class] .picture-panel{padding:4px 8px;border-radius:18px}
 body[class] .panel-caption,body[class] .island-tag{display:none}
 body[class] .picture-note{font-size:18px;line-height:1.2;margin:2px 0;padding:0}
 body[class] .lesson-panel{padding:4px 8px}
 body[class] .lesson-panel h1,body[class] .eyebrow,body[class] .phase-note{display:none}
 body[class] .character-stage{height:clamp(52px,20dvh,88px);gap:16px;margin:0 0 3px}
 body[class] .hanja-build{height:100%;width:90px}
 body[class] .reading strong{font-size:32px;margin:0}body[class] .reading>span{font-size:16px}
 body[class] .components{gap:5px}
 body[class] .part{min-height:48px;padding:4px 6px;gap:6px;flex-direction:row}
 body[class] .part>b{font-size:30px}body[class] .part>span{font-size:17px;line-height:1.2}
 body[class] .part small{font-size:16px;line-height:1.2;margin-top:2px}
 body[class] .explain{font-size:20px;line-height:1.3;margin-top:4px}
 body[class] .steps{padding:0;gap:5px;flex-wrap:nowrap}
 body[class] .steps button{min-height:38px;font-size:16px;padding:4px 10px}
 body[class] .steps b{width:22px;height:22px;font-size:14px}
 body[class] footer{height:42px;gap:8px}
 body[class] .primary,body[class] .secondary{font-size:18px;padding:6px 12px;flex:none}
 body[class] .game-top{padding:3px 8px;min-height:34px}
 body[class] .game-top h1{font-size:22px}
 body[class] .score{font-size:21px;padding:2px 8px}body[class] .score span{font-size:16px}
 body[class] .game-main{gap:10px}
 body[class] .question{padding:5px 8px}
 body[class] .question h2{font-size:20px;line-height:1.25}
 body[class] .question-tag,body[class] .hint,body[class] .question p,body[class] .game-friends{display:none}
 body[class] .answer-panel{gap:4px}
 body[class] .answers{gap:5px}
 body[class] .answer{padding:2px;flex-direction:row;gap:10px}
 body[class] .answer>b{font-size:48px}
 body[class] .answer-num{display:none}body[class] .answer-caption{font-size:16px}
 body[class] .feedback{font-size:17px;min-height:34px;padding:4px;line-height:1.2}
 body[class] .memory-grid{gap:8px;padding:2px}
 body[class] .memory-card b{font-size:48px}body[class] .memory-card.word b{font-size:24px}
 body[class] .memory-card small,body[class] .memory-card>span{display:none}
}

@media(max-height:360px) and (min-aspect-ratio:1/1){
 body[class].theme-c .answer>b{font-size:46px;line-height:1}
 body[class] .memory-card{padding:0}
 body[class] .memory-card b{font-size:40px}
 body[class] .memory-card.word b{font-size:24px}
}