@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-subset.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
 --navy:#173e6d;--blue:#278cff;--blue2:#63b9ff;--yellow:#ffd85a;--gold:#f9b918;
 --pink:#ff91b6;--green:#70d69a;--mint:#eafaf0;--line:#dcecf5;--muted:#6c8499;
 --shadow:0 12px 30px rgba(75,132,164,.14);--shadow2:0 7px 18px rgba(75,132,164,.11)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#eef9fd;font-family:Pretendard,system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:var(--navy)}
body{display:flex;justify-content:center}button,input{font:inherit}.app{width:min(100vw,430px);min-height:100dvh;background:linear-gradient(180deg,#dcf5ff 0%,#effbff 42%,#fffdf2 100%);position:relative;overflow:hidden;padding-bottom:82px}
.bgcloud{position:fixed;z-index:0;background:rgba(255,255,255,.65);border-radius:999px;filter:blur(1px);pointer-events:none}.bgcloud:before,.bgcloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cl1{width:120px;height:34px;top:88px;left:calc(50% - 235px)}.cl1:before{width:50px;height:50px;left:12px;top:-22px}.cl1:after{width:62px;height:62px;right:7px;top:-28px}.cl2{width:135px;height:38px;top:225px;right:calc(50% - 240px)}.cl2:before{width:55px;height:55px;left:18px;top:-24px}.cl2:after{width:65px;height:65px;right:8px;top:-29px}
#view{position:relative;z-index:1;min-height:calc(100dvh - 82px)}
.top{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 7px}.brand{font-size:21px;font-weight:1000;letter-spacing:-1px}.brand b{color:#ff9516}.stats{display:flex;gap:7px}.pill{display:flex;align-items:center;gap:5px;padding:7px 9px;border-radius:999px;background:#ffffffd9;border:1px solid #d6eaf5;font-size:12px;font-weight:900;box-shadow:var(--shadow2)}
.hero{margin:7px 15px 13px;border-radius:30px;padding:20px 18px 18px;min-height:206px;background:linear-gradient(135deg,#bfeeff 0%,#dff8ff 55%,#fff0b4 100%);position:relative;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.9)}.hero:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-70px;top:-82px;background:rgba(255,255,255,.3)}.hero .sub{font-size:12px;font-weight:900;color:#3c87c5;margin-bottom:5px}.hero h1{margin:0;font-size:30px;line-height:1.18;letter-spacing:-1.7px;position:relative;z-index:2}.hero p{max-width:205px;margin:9px 0 12px;color:#59758e;font-size:13px;line-height:1.48;font-weight:700;position:relative;z-index:2}.hero .hero-bird{position:absolute;right:-2px;bottom:3px;width:158px;max-height:158px;object-fit:contain}.cta{border:0;border-radius:17px;padding:12px 17px;font-weight:1000;position:relative;z-index:3;cursor:pointer}.cta.gold{background:linear-gradient(180deg,#ffe26c,#ffc12f);color:#704400;box-shadow:0 8px 18px rgba(240,179,29,.27)}.cta.blue{background:linear-gradient(180deg,#50afff,#197cf1);color:#fff;box-shadow:0 8px 18px rgba(39,136,249,.24)}.cta.pink{background:linear-gradient(180deg,#ff9cbe,#ff6fa3);color:#fff;box-shadow:0 8px 18px rgba(255,100,154,.23)}
.section{padding:0 15px 14px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:14px 0 9px}.section-title h2{margin:0;font-size:20px;letter-spacing:-.7px}.section-title span{font-size:12px;font-weight:900;color:#648198}.progress-card{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:11px;box-shadow:var(--shadow)}.metric{padding:8px 9px;border-radius:17px;background:#f7fbff}.metric small{display:block;color:#7890a4;font-size:11px;font-weight:800}.metric b{display:block;font-size:20px;margin-top:1px}.meter{height:7px;border-radius:999px;background:#e8eff4;margin-top:7px;overflow:hidden}.meter i{display:block;height:100%;border-radius:999px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.card{border:1px solid #deedf5;border-radius:23px;background:#fff;box-shadow:var(--shadow);padding:13px;color:var(--navy);text-align:left;cursor:pointer}.card:active{transform:scale(.985)}.card.yellow{background:linear-gradient(180deg,#fff7d8,#fff)}.card.blue{background:linear-gradient(180deg,#e8f7ff,#fff)}.card.green{background:linear-gradient(180deg,#e9fbef,#fff)}.card.pink{background:linear-gradient(180deg,#fff0f6,#fff)}.card img{width:66px;height:66px;object-fit:contain}.card h3{margin:7px 0 4px;font-size:16px;letter-spacing:-.4px}.card p{margin:0;color:#6c8398;font-size:12px;line-height:1.45;font-weight:700}
.topscreen{display:flex;align-items:center;gap:10px;padding:15px 15px 10px}.back{width:39px;height:39px;border:0;border-radius:50%;background:#fff;color:var(--navy);font-size:25px;box-shadow:var(--shadow2);cursor:pointer}.topscreen h2{margin:0;font-size:24px;letter-spacing:-.8px}.glass{background:#fff;border:1px solid var(--line);border-radius:26px;padding:15px;box-shadow:var(--shadow)}
.clock-row{display:flex;align-items:center;gap:14px}.analog{position:relative;width:158px;height:158px;flex:0 0 auto;border-radius:50%;background:#fff;border:10px solid #ffce4f;box-shadow:0 10px 19px rgba(168,126,16,.18),inset 0 0 0 2px #fff6c7;touch-action:none}.tick{position:absolute;left:50%;top:50%;width:2px;height:64px;transform-origin:50% 100%}.tick:before{content:"";display:block;width:2px;height:var(--tl,9px);background:#8aa3b9}.num{position:absolute;transform:translate(-50%,-50%);font-size:15px;font-weight:1000}.hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:999px;touch-action:none;z-index:3}.hand.hour{width:9px;height:43px;margin-left:-4.5px;background:#3886e7}.hand.minute{width:7px;height:61px;margin-left:-3.5px;background:#ff82a8}.center-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:17px;height:17px;border-radius:50%;background:#ffb927;z-index:5;box-shadow:0 0 0 3px #fff1c9}.clock-copy{flex:1}.digital{font-size:29px;font-weight:1000;letter-spacing:1px;margin-bottom:4px}.clock-copy p{font-size:12.5px;line-height:1.5;color:#6a8197;font-weight:700;margin:0 0 9px}.btnrow{display:flex;gap:7px;flex-wrap:wrap}.btn{border:0;border-radius:15px;padding:11px 13px;font-size:13px;font-weight:1000;cursor:pointer}.btn.blue{background:linear-gradient(180deg,#4eafff,#1b7ff2);color:#fff}.btn.soft{background:#edf7ff;color:#257dda}.btn.yellow{background:linear-gradient(180deg,#ffe472,#ffc32f);color:#704600}.btn.pink{background:#fff0f5;color:#e85287}.btn.green{background:#e8faee;color:#1c9456}
.worlds{display:grid;gap:11px}.world{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #dcecf5;border-radius:23px;padding:11px;box-shadow:var(--shadow)}.world img{width:86px;height:86px;object-fit:contain;flex:0 0 auto}.world .body{flex:1;min-width:0}.world h3{margin:0 0 3px;font-size:17px}.world p{margin:0;color:#6c8599;font-size:12px;line-height:1.42;font-weight:700}.stage-tag{display:inline-flex;padding:4px 10px;border-radius:999px;color:#fff;font-size:11px;font-weight:1000;margin-bottom:5px}.world .progress-mini{height:6px;border-radius:999px;background:#e8eff4;overflow:hidden;margin-top:7px}.world .progress-mini i{display:block;height:100%;background:#59cd88;border-radius:999px}.go{border:0;background:linear-gradient(180deg,#4eafff,#177df1);color:#fff;border-radius:15px;padding:10px 12px;font-weight:1000;white-space:nowrap}.lock{filter:grayscale(.45);opacity:.72}.lock .go{background:#c8d6df;color:#fff}
.lesson-hero{margin:0 15px 12px;background:linear-gradient(135deg,#d8f5ff,#fff4c6);border:1px solid #deedf5;border-radius:28px;padding:16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}.lesson-hero img{width:98px;height:98px;object-fit:contain}.lesson-hero h3{font-size:21px;margin:0 0 4px}.lesson-hero p{font-size:12.5px;color:#678297;font-weight:700;line-height:1.5;margin:0}.lesson-body{margin:0 15px 13px}.fact{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #dfeef6;border-radius:20px;padding:12px;margin-bottom:9px;box-shadow:var(--shadow2)}.fact img{width:52px;height:52px;object-fit:contain}.fact b{display:block;font-size:15px}.fact span{font-size:12px;color:#6f8597;font-weight:700;line-height:1.4}
.quiz-head{text-align:center;margin-bottom:10px}.quiz-head h3{font-size:20px;margin:0 0 5px}.quiz-head p{margin:0;color:#6c8498;font-weight:700;font-size:13px}.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:12px}.answer{border:2px solid #dcebf4;background:#fff;border-radius:16px;padding:13px 8px;color:var(--navy);font-weight:1000;cursor:pointer}.answer.ok{border-color:#56d38a;background:#edfff3}.answer.no{border-color:#ff8bac;background:#fff0f5}.qprogress{height:9px;border-radius:999px;background:#e7eef3;margin:10px 0 0;overflow:hidden}.qprogress i{display:block;height:100%;background:linear-gradient(90deg,#4aa8ff,#72d99b);border-radius:999px;transition:.25s}
.gamegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.game{background:#fff;border:1px solid #dcebf4;border-radius:24px;padding:13px;box-shadow:var(--shadow);cursor:pointer}.game img{width:78px;height:78px;object-fit:contain}.game h3{font-size:16px;margin:5px 0 3px}.game p{font-size:12px;line-height:1.42;color:#6d8498;font-weight:700;margin:0}.game-stage{margin:0 15px 14px}.balloon-field{position:relative;height:440px;border-radius:28px;background:linear-gradient(#d7f5ff,#f7ffe5);overflow:hidden;border:1px solid #d9edf6;box-shadow:var(--shadow)}.balloon{position:absolute;width:114px;height:136px;border:0;background:transparent;cursor:pointer}.balloon .bubble{width:102px;height:102px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 10px 25px rgba(255,255,255,.55),0 7px 16px rgba(74,122,151,.18);border:3px solid rgba(255,255,255,.72)}.balloon:after{content:"";position:absolute;left:50%;top:101px;height:30px;width:2px;background:#999;transform:translateX(-50%)}.mini-clock{width:74px;height:74px;border-radius:50%;background:#fff;border:5px solid #ffce4f;position:relative}.mini-clock .mh,.mini-clock .mm{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:999px}.mini-clock .mh{width:5px;height:20px;margin-left:-2.5px;background:#3e82da}.mini-clock .mm{width:4px;height:28px;margin-left:-2px;background:#ff7fa7}.mini-clock .mc{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#ffb829;transform:translate(-50%,-50%)}
.train{display:flex;gap:6px;align-items:end;overflow:auto;padding:9px 0 4px}.car{min-width:79px;border-radius:16px;padding:12px 7px;background:linear-gradient(#f7fbff,#dff2ff);border:2px solid #b9ddf5;text-align:center;font-weight:1000}.car.missing{background:#fff8d9;border-color:#ffd253}.timeline{display:grid;grid-template-columns:74px 1fr;gap:8px}.timebox{display:flex;align-items:center;justify-content:center;background:#fff7d6;border-radius:14px;font-weight:1000}.activity{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #dcebf4;border-radius:14px;padding:8px}.activity img{width:42px;height:42px;object-fit:contain}
.mission-list{display:grid;gap:9px}.mission{display:flex;align-items:center;gap:11px;background:#fff;border-radius:19px;border:1px solid #deedf5;padding:11px;box-shadow:var(--shadow2)}.mission img{width:48px;height:48px;object-fit:contain}.mission .mbody{flex:1}.mission b{font-size:14px}.mission p{font-size:11.5px;color:#6e8498;font-weight:700;margin:2px 0 5px}.mission .check{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e7f9ee;color:#20a263;font-weight:1000}.mission .check.todo{background:#f1f5f7;color:#91a4b2}
.report{background:#fff;border:1px solid #dcebf4;border-radius:24px;padding:14px;box-shadow:var(--shadow)}.report-top{display:flex;gap:10px;align-items:center}.report-top img{width:74px;height:74px;object-fit:contain}.report-top h3{font-size:19px;margin:0}.report-top p{font-size:12px;color:#6a8196;line-height:1.45;font-weight:700;margin:4px 0 0}.report-row{display:grid;grid-template-columns:92px 1fr 42px;gap:8px;align-items:center;margin:10px 0}.rbar{height:10px;border-radius:999px;background:#e8eef4;overflow:hidden}.rbar i{display:block;height:100%;border-radius:999px}.reward-strip{display:flex;gap:9px;overflow:auto;padding:2px 0 5px;scrollbar-width:none}.reward{min-width:91px;background:#fff;border:1px solid #dcebf4;border-radius:18px;padding:10px;text-align:center;box-shadow:var(--shadow2)}.reward img{width:55px;height:55px;object-fit:contain;margin:0 auto 5px}.reward b{font-size:11.5px}.recommend{background:linear-gradient(135deg,#fff4d1,#fff);border:1px solid #f2e0ac;border-radius:20px;padding:12px;display:flex;align-items:center;gap:10px}.recommend img{width:62px;height:62px;object-fit:contain}.recommend b{display:block;font-size:15px}.recommend p{margin:3px 0 0;color:#7a6e51;font-size:12px;font-weight:700;line-height:1.4}
.nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(430px,100vw);height:auto;display:grid;grid-template-columns:repeat(4,1fr);padding:7px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(11px);border-top:1px solid #dcebf4;z-index:50}.nav button{border:0;background:transparent;color:#6c8296;padding:5px 0;font-size:10.5px;font-weight:900;display:flex;flex-direction:column;align-items:center;gap:2px}.nav button.active{color:#1687ff}.nav img{width:24px;height:24px;object-fit:contain}.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(9px);background:#173f6e;color:#fff;padding:11px 16px;border-radius:999px;font-size:12.5px;font-weight:900;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translateX(-50%)}
.overlay{position:fixed;inset:0;background:rgba(24,64,94,.28);z-index:100;display:grid;place-items:center;padding:18px}.welcome{width:min(390px,100%);background:linear-gradient(#e2f7ff,#fff8d6);border-radius:30px;padding:22px 18px;text-align:center;box-shadow:0 28px 80px rgba(34,81,112,.25);border:2px solid #fff}.welcome img{width:160px;height:160px;object-fit:contain;margin:0 auto}.welcome h2{font-size:27px;margin:0 0 6px}.welcome p{font-size:13px;color:#607a90;line-height:1.5;font-weight:700;margin:0 0 14px}
@media(min-width:431px){body{background:#eef8fb}.app{box-shadow:0 0 40px rgba(53,104,132,.13)}}

/* 풍선 속 작은 시계: 시각을 읽을 수 있게 12칸 눈금 (3·6·9·12는 굵게) */
.mini-clock .mt{position:absolute;left:50%;top:2px;width:2px;height:6px;margin-left:-1px;background:#b9c9d8;transform-origin:50% 30px}
.mini-clock .mt.big{height:9px;width:3px;margin-left:-1.5px;background:#173e6d}
.answer.ok,.activity.ok,.balloon.ok .bubble{outline:4px solid #3cc774;outline-offset:-2px}.answer.no,.activity.no{outline:4px solid #ff6b81;outline-offset:-2px}
button.activity{border:0;font:inherit;color:inherit;cursor:pointer;text-align:left}

/* 풍선 게임 캐릭터: 원본 크기(높이 320), 풍선 누르기를 가리지 않게 */
.balloon-field>img{height:320px;width:auto;max-width:none;position:relative;z-index:0;pointer-events:none}
.balloon{z-index:2}

/* 오전·오후 퀴즈 그림 크기 (정답을 알려 주지 않는 자명종) */
img.ampm-ic{width:auto;height:120px;max-width:none}
/* 하루 시간표: 시각 한 번 + 활동 3개 */
.sched-time{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 12px}.sched-time img{width:auto;height:52px}.sched-time b{font-size:28px;font-weight:1000;color:#173e6d}
.sched-opts{display:grid;gap:10px}.sched-opts .activity{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:18px;background:#fff;border:2px solid #dcecf5;box-shadow:0 7px 18px rgba(75,132,164,.11)}
.sched-opts .activity img{width:auto;height:48px}.sched-opts .activity b{font-size:18px;font-weight:900}

/* 시간 기차: 칸 4개가 화면 폭을 나눠 씀 (긴 시각도 잘리지 않게) */
.train{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow:visible}
.train .car{min-width:0;width:auto;padding-left:2px;padding-right:2px;font-size:clamp(13px,3.9vw,16px);text-align:center}

/* ===== 풍선 애니메이션: 아래에서 떠오름 → 둥실둥실 → 맞히면 팡, 틀리면 흔들 ===== */
.balloon{animation:balloonRise .9s cubic-bezier(.2,.8,.3,1.1) both}
.balloon .bubble,.balloon:after{animation:balloonBob 3.2s ease-in-out infinite}
.balloon:nth-of-type(1){animation-delay:0s}.balloon:nth-of-type(2){animation-delay:.12s}.balloon:nth-of-type(3){animation-delay:.24s}.balloon:nth-of-type(4){animation-delay:.36s}
.balloon:nth-of-type(1) .bubble,.balloon:nth-of-type(1):after{animation-delay:-.4s}.balloon:nth-of-type(2) .bubble,.balloon:nth-of-type(2):after{animation-delay:-1.3s}
.balloon:nth-of-type(3) .bubble,.balloon:nth-of-type(3):after{animation-delay:-2.1s}.balloon:nth-of-type(4) .bubble,.balloon:nth-of-type(4):after{animation-delay:-2.8s}
@keyframes balloonRise{0%{transform:translateY(340px) scale(.85);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes balloonBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.balloon.popped{animation:none;pointer-events:none}
.balloon.popped .bubble{animation:balloonPop .32s ease-out forwards}
.balloon.popped:after{animation:stringFall .6s ease-in forwards}
@keyframes balloonPop{0%{transform:scale(1);opacity:1}45%{transform:scale(1.35);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes stringFall{to{transform:translate(-50%,120px) rotate(25deg);opacity:0}}
.balloon.wobble .bubble{animation:balloonWobble .5s ease-in-out}
@keyframes balloonWobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
.balloon.ok .bubble{outline:none}
.confetti{position:absolute;width:10px;height:14px;border-radius:3px;z-index:5;pointer-events:none;transform:translate(-50%,-50%);animation:confetti .85s ease-out forwards}
@keyframes confetti{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot));opacity:0}}
@media (prefers-reduced-motion:reduce){.balloon,.balloon .bubble,.balloon:after{animation:none!important}}
/* 배움랩으로 돌아가기 */
a.hub-link{display:flex;align-items:center;gap:4px;text-decoration:none;color:inherit}
.hub-back{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:2px;border-radius:50%;background:#fff;border:1px solid #d6eaf5;box-shadow:0 7px 18px rgba(75,132,164,.11);font-size:20px;line-height:1;color:#278cff;font-weight:900}