/* MINIMALS learning UI v2: keep this file identical in Sites 1 and 3. */
:root{--learning-font:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;--learning-small:13px;--learning-body:16px;--learning-button:18px;--learning-english:22px;--learning-cta-height:58px;--learning-cta-radius:17px}
body,button,input,select{font-family:var(--learning-font)}body{font-size:16px}button,input,select{font-family:var(--learning-font)}
/* A centered brand row, followed by a separate utility row. */
.topbar{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;min-height:0;gap:14px;padding:8px 0 0;margin:0 auto 22px}
.topbar .brand{display:flex;align-items:center;justify-content:center;align-self:center;width:100%;gap:0;border:0;background:none;padding:0;margin:0;text-align:center}
.topbar .brandLogo,.topbar .brand img{display:block;width:190px;max-width:70vw;height:auto;margin:auto;object-fit:contain;mix-blend-mode:multiply;border-radius:0}
.topbar .topTools,.topbar .headerTools{display:flex;align-items:center;justify-content:flex-end;width:100%;gap:9px}
.topTools .ageBadge{margin-right:auto;font-size:13px;line-height:1.5;padding:10px 14px}
.topbar .headerAction,.topbar .smallBtn{font-size:13px;line-height:1.4;min-height:46px;padding:11px 16px;font-family:var(--learning-font);font-weight:800}
/* Both primary entry actions share exactly the same geometry and type. */
.landingActions .landingPrimary,.heroCopy .heroStart,.landingActions .landingSecondary{width:100%;min-height:var(--learning-cta-height);border-radius:var(--learning-cta-radius);padding:16px 20px;font-size:var(--learning-button);line-height:1.4;font-weight:850;display:flex;align-items:center;justify-content:center;gap:20px}
.landingActions .landingPrimary,.heroCopy .heroStart{background:linear-gradient(105deg,#e75480,#d94778);box-shadow:0 4px 0 #b6315c}
.landingPrimary b,.heroStart span{font-size:28px;line-height:1}
.landingHero h1,.heroCopy h1{font-size:clamp(36px,4.25vw,50px);line-height:1.22;letter-spacing:-.055em}
.landingHero p,.heroCopy p{font-size:var(--learning-body);line-height:1.8}
.eyebrow,.landingHero .eyebrow{font-size:13px;line-height:1.5;letter-spacing:.035em}
.textBtn{font-size:13px;line-height:1.5}.kicker,.landingKicker{font-size:13px;line-height:1.5}
.sectionHead h2,.sectionHeading h2{font-size:24px;line-height:1.4}
.sectionHead p,.preferences p{font-size:13px;line-height:1.7}
.softBadge,.latestDate,.sceneCount{font-size:13px;line-height:1.5}
.heroSticker,.landingHero .heroSticker,.mascotBanner span{font-size:13px;line-height:1.5}
/* English picture lessons: all themes use these same component classes. */
.dropEyebrow{font-size:13px}.dropTitle{font-size:25px}.dropSub{font-size:13px;line-height:1.7}
.startTodayBtn{font-family:var(--learning-font);font-size:13px;min-height:58px;border-radius:18px}
.cardTitle{font-size:20px;line-height:1.45}.cardDesc{font-size:13px;line-height:1.6}
.cardCount,.cardTag{font-size:13px;line-height:1.45}.cardBody{flex-wrap:wrap;gap:9px}
.backBtn{font-size:13px;min-height:46px}.sceneHead{flex-wrap:wrap;gap:10px}.sceneHead h1{font-size:27px;line-height:1.4}
.sceneHead p{font-size:13px;line-height:1.7}.imageHint,.imageHint.selected{font-size:13px;line-height:1.7}
.voiceLabel,.phraseEyebrow{font-size:12px;line-height:1.5;letter-spacing:.065em}
.wordMain strong{font-size:28px;line-height:1.3;overflow-wrap:anywhere}.wordMain small{font-size:14px;line-height:1.6}
.replayBtn,.phraseBtn{font-family:var(--learning-font);font-size:14px;min-height:48px;padding:12px 15px}
.phraseCard strong{font-size:19px;line-height:1.55}.phraseCard small{font-size:15px;line-height:1.7}
.wordChip{min-height:74px;padding:13px 12px;gap:10px}.chipText strong{font-size:14px;line-height:1.4;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}.chipText small{font-size:13px;line-height:1.5;color:#786f83}
.chipIcon{width:38px;height:38px;font-size:25px}.chipSound{width:29px;height:29px;font-size:13px}
.panelTitle{font-size:19px;line-height:1.45}.panelHint{font-size:13px;line-height:1.7}
.momText{font-size:17px;line-height:1.65}.momText small{font-size:14px;line-height:1.7}.momLine{padding:17px 0;gap:12px}.momPlay{width:44px;height:44px;font-size:20px}
.homeNote{font-size:13px;line-height:1.8}.footer{font-size:13px;line-height:1.8}
.brandStoryFor{font-size:13px}.brandStoryCopy p{font-size:13px}.brandStoryCta{font-size:13px}
/* Maths lessons: type follows the same hierarchy. */
.levelCard .age{font-size:13px}.levelCard strong{font-size:20px}.levelCard small{font-size:14px;line-height:1.7}
.preferences label,.preferences select{font-size:13px}.gameHelp{font-size:13px}
.topicBody strong{font-size:20px}.topicBody small{font-size:13px}.topicBody i{font-size:13px}
.parentNote>span{font-size:13px}.parentNote h3{font-size:19px}.parentNote p{font-size:15px}.progressNote{font-size:13px}
.gameHeading h1{font-size:27px}.questionCard h2{font-size:var(--learning-english);line-height:1.6}.translation{font-size:16px;line-height:1.75}
.listenBtn{font-size:13px;min-height:48px}.questionTop .kicker{font-size:13px}
.areaHeading strong{font-size:13px}.areaHeading small{font-size:13px}.boardHint{font-size:13px}.emptyBasket{font-size:13px}
.feedback strong{font-size:20px}.feedback p{font-size:16px}.stepGuide span{font-size:13px}
.playActions .primary,.secondary{font-size:18px;min-height:56px}.hintBtn{font-size:13px}.resetBtn{font-size:13px}
@media(max-width:720px){
.topbar{gap:16px;margin-bottom:24px}.topbar .brandLogo,.topbar .brand img{width:190px}
.landingHero h1,.heroCopy h1{font-size:clamp(34px,8.4vw,42px)}
.landingHero p,.heroCopy p{font-size:16px}.landingHero .heroCopy,.heroCopy{padding:27px 24px}
.sectionHead h2,.sectionHeading h2{font-size:23px}
.wordChips{grid-template-columns:repeat(2,minmax(0,1fr))}
.phraseCard{flex-wrap:wrap;align-items:flex-start}.phraseCard>div{flex:1 1 220px}.phraseBtn{margin-left:auto}
.wordCard{flex-wrap:wrap}.wordMain{flex:1 1 140px}.wordMain strong{font-size:27px}
.panelTitle{font-size:20px}.momText{font-size:17px}.momText small{font-size:14px}
.cardTitle{font-size:19px}.sceneHead h1{font-size:28px}.cardDesc{font-size:13px}
.questionCard h2{font-size:22px}.translation{font-size:16px}
.levelCard strong{font-size:20px}.levelCard small{font-size:14px}.levelCard .age{font-size:13px}
.playActions .primary{font-size:18px;min-height:56px}.heroCopy .heroStart{font-size:18px;min-height:58px}
}
@media(max-width:380px){
.topbar .brandLogo,.topbar .brand img{width:180px}.topTools .ageBadge{font-size:12px;padding:9px 10px}
.topbar .headerAction,.topbar .smallBtn{font-size:13px;padding:10px 12px}
.wordChips{grid-template-columns:1fr}.landingHero .heroCopy,.heroCopy{padding:25px 20px}
.cardBody{padding:14px 12px}.momText{font-size:17px}.panelHint{margin-left:0}
}

/* Role hierarchy: utility < explanation < learning < primary action. */
.preferences label,.preferences select,.gameHelp{font-size:14px}
.panelHint,.sectionHead p,.dropSub{font-size:14px;line-height:1.7}
.areaHeading strong{font-size:16px}.boardHint{font-size:13px}
.topicBody strong,.cardTitle{font-size:18px;line-height:1.45}
.levelCard strong{font-size:22px}.levelCard .age{font-size:13px}
.listenBtn{font-size:14px;min-height:44px}
.landingHero .eyebrow,.eyebrow{font-size:12px}
.footer,footer{font-size:12px}footer small{font-size:11px}
@media(max-width:720px){.questionCard h2{font-size:21px}.translation{font-size:16px}.momText{font-size:17px}.momText small{font-size:14px}.panelTitle{font-size:20px}.heroCopy .heroStart{font-size:18px;min-height:58px}.landingHero h1,.heroCopy h1{font-size:clamp(32px,8.1vw,40px)}}

/* Shared masthead: one brand, one age badge and matching utility colours. */
.topbar{gap:10px}.topbar .brandNote{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 7px;font-size:12px;font-weight:650;line-height:1.6;color:#8b768e;word-break:keep-all}
.brandNote::before,.brandNote::after{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#e7a1b7;box-shadow:0 0 0 4px #fff1f5}
.brandNote::after{background:#b8a1d1;box-shadow:0 0 0 4px #f4effa}
.topbar .headerAction,.topbar .smallBtn,.topbar .ageBadge{color:#795c79;background:#fff;border:1px solid #e9dfea;font-weight:800}
.topbar .ageBadge{margin-right:auto;font-size:13px;padding:10px 13px;white-space:nowrap;line-height:1.5;border-radius:99px}
.topbar .headerAction:hover,.topbar .smallBtn:hover{background:#fbf3f8}
@media(max-width:380px){.topbar .ageBadge{font-size:12px;padding:9px 10px}.topbar .headerAction,.topbar .smallBtn{font-size:12px;padding:10px 12px}.topbar .brandNote{font-size:11px}}