@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Noto+Sans+KR:wght@500;600;700;800;900&display=swap');
:root{--ink:#30405e;--blue:#3472dc;--purple:#9277d8;--cream:#fffdf5;--sky:#c7f0ff;--grass:#b1e9ac;--pink:#ffc5da;--yellow:#ffe382;--line:#d6e6ed;--shadow:0 12px 28px #5d82a72a;font-family:Nunito,'Noto Sans KR',sans-serif;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;background:#f5fbff}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,.scene-viewport:focus-visible{outline:4px solid #174ec7;outline-offset:3px}button:disabled{opacity:.5;cursor:not-allowed}a{color:inherit}.skip{position:absolute;z-index:20;top:-60px;left:12px;background:white;padding:12px}.skip:focus{top:8px}[hidden]{display:none!important}
.topbar{min-height:74px;padding:10px clamp(16px,4vw,58px);display:flex;align-items:center;gap:20px;justify-content:space-between;background:#fff;border-bottom:4px solid #e2f2f9}.home-link{text-decoration:none;font-weight:900;color:#5684a1}.brand{font-size:clamp(18px,2.4vw,27px);letter-spacing:-.05em;white-space:nowrap}.brand span{color:#2589bf}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px}.top-actions button,.settings select,.back-button,.soft-button,.choice-button,.primary-button,.mini-button{min-height:44px;border:2px solid #b6d9e8;border-radius:16px;background:#fff;color:#3d668a;font-weight:900;padding:8px 14px}.top-actions button{font-size:13px}.top-actions button[aria-pressed=true]{background:#e3f7fb}.star-total{display:inline-flex;align-items:center;gap:4px;background:#fff6d7;padding:6px 13px;border-radius:20px;font-size:18px;color:#a56a13}.star-total svg{width:26px;fill:#f8bd36;stroke:#d48a12;stroke-width:1.5}
.playground{min-height:calc(100vh - 124px);background:linear-gradient(#e6f9ff,#fbfdf9 72%);padding:23px 0 38px}.intro-row{max-width:1450px;margin:auto;padding:0 clamp(20px,4vw,60px) 17px;display:flex;justify-content:space-between;align-items:end;gap:22px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.16em;color:#4597b9;margin:0 0 6px}.intro-row h1{font-size:clamp(29px,4vw,51px);line-height:1.15;letter-spacing:-.065em;margin:0}.intro-row h1 span{color:#198cbf}.intro-help{margin:10px 0 0;color:#657f92;font-size:14px;font-weight:700}.settings{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.settings label{font-size:12px;font-weight:900;color:#526d85}.settings select{display:block;min-width:184px;margin-top:4px;appearance:auto;font-size:13px}
.scene-wrap{height:min(61vh,590px);min-height:440px;position:relative;margin:0 auto;max-width:1800px}.scene-viewport{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x pan-y;scroll-behavior:smooth}.scene-viewport::-webkit-scrollbar{display:none}.scene-world{height:100%;width:2400px;position:relative;overflow:hidden;background:linear-gradient(#96dffa 0%,#c6eeff 50%,#e0f7d6 52%,#9edda4 100%)}.scene-world:before{content:'';position:absolute;left:260px;top:12px;width:160px;height:160px;border-radius:50%;background:#fff7bd;box-shadow:0 0 65px #fff8c8}.scene-world:after{content:'';position:absolute;inset:0;background-image:radial-gradient(#fff 2px,transparent 3px);background-size:120px 110px;opacity:.65;pointer-events:none}.hills{position:absolute;inset:42% 0 13%;background:radial-gradient(ellipse at 15% 100%,#75ca9e 0 42%,transparent 43%),radial-gradient(ellipse at 50% 100%,#81d0b2 0 43%,transparent 44%),radial-gradient(ellipse at 88% 100%,#70cba2 0 44%,transparent 45%)}.path{position:absolute;bottom:-38px;left:-5%;width:110%;height:120px;background:#f7d9a0;border:12px solid #e6bd82;border-radius:50% 50% 0 0}.cloud{position:absolute;z-index:1;width:140px;height:52px;border-radius:50px;background:#fff;box-shadow:35px -20px 0 -5px #fff,-30px -8px 0 0 #fff;opacity:.88;animation:drift 10s ease-in-out infinite alternate}.c1{left:12%;top:15%}.c2{left:49%;top:8%;animation-delay:-4s}.c3{left:82%;top:17%;animation-delay:-7s}.butterfly{position:absolute;z-index:4;color:#ff83ba;font-size:34px;animation:float 3s ease-in-out infinite}.b1{top:43%;left:35%}.b2{top:28%;left:76%;color:#8b7fda;animation-delay:-1s}.balloon{position:absolute;top:18%;left:65%;width:49px;height:62px;border-radius:50% 50% 48% 48%;background:linear-gradient(90deg,#ff9bba 50%,#ffe3a4 50%);animation:float 4s ease-in-out infinite}.balloon:after{content:'';position:absolute;top:62px;left:24px;width:1px;height:65px;background:#798ba3}.scene-caption{text-align:center;font-weight:900;color:#61829b}.scene-caption span{color:#e5a333}.pan{position:absolute;z-index:10;top:48%;transform:translateY(-50%);width:52px;height:72px;border:0;border-radius:18px;background:#ffffffe8;color:#277da9;font-size:44px;font-weight:900;box-shadow:var(--shadow)}.pan-left{left:9px}.pan-right{right:9px}
.facility{position:absolute;z-index:3;bottom:62px;width:220px;height:255px;padding:0;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transition:transform .2s;touch-action:manipulation}.facility:hover,.facility:focus-visible{transform:translateY(-10px)}.facility:active{transform:scale(.95)}.facility svg{width:198px;height:197px;overflow:visible;filter:drop-shadow(0 11px 5px #457b6629)}.facility-label{position:relative;z-index:5;display:block;min-width:165px;max-width:215px;padding:9px 11px;margin-top:-4px;border:3px solid #fff;border-radius:18px;background:#ffffffed;box-shadow:0 8px 16px #5592a62e;color:#344e6d;font-size:16px;line-height:1.2;font-weight:900}.facility small{display:block;color:#7190a3;font-size:11px;margin-top:2px}.f-slide{left:46px}.f-lab{left:310px}.f-space{left:574px}.f-tree{left:838px}.f-animals{left:1102px}.f-dress{left:1366px}.f-carousel{left:1630px}.f-treasure{left:1894px}.f-den{left:2158px}.f-lab,.f-tree,.f-dress,.f-treasure{bottom:110px}.f-space,.f-animals,.f-carousel,.f-den{bottom:73px}
.bot-guide{position:relative;z-index:6;display:flex;align-items:center;gap:24px;width:min(720px,calc(100% - 34px));margin:5px auto 0}.bot{position:relative;flex:none;width:92px;height:124px;animation:float 3s ease-in-out infinite}.bot i{display:block;position:absolute}.antenna{left:44px;top:0;width:4px;height:19px;background:#3986cc}.antenna:before{content:'';position:absolute;width:12px;height:12px;top:-8px;left:-4px;background:#ff9dba;border:2px solid #2878bd;border-radius:50%}.head{top:15px;left:10px;width:72px;height:62px;border:4px solid #2675bf;border-radius:28px;background:#75caff;box-shadow:inset 0 -8px #58b7f0}.eyes{left:16px;top:17px;width:8px;height:11px;border-radius:50%;background:#284971;box-shadow:24px 0 #284971}.smile{left:22px;top:32px;width:22px;height:11px;border-bottom:3px solid #284971;border-radius:50%}.body{left:19px;top:75px;width:55px;height:42px;border:4px solid #2675bf;border-radius:17px;background:#a6e1ff}.body:after{content:'★';position:absolute;left:17px;top:5px;color:#f6b84d}.arm{top:80px;width:11px;height:34px;border-radius:9px;background:#5bb5ed}.arm.left{left:4px;transform:rotate(25deg)}.arm.right{right:4px;transform:rotate(-25deg);animation:wave 1.8s ease-in-out infinite;transform-origin:top}.leg{top:113px;width:12px;height:15px;border-radius:0 0 7px 7px;background:#2675bf}.leg.left{left:27px}.leg.right{right:27px}.bot.dance{animation:dance .25s infinite alternate}.speech{flex:1;min-height:97px;background:#fff;border:3px solid #b9e6f6;border-radius:23px;box-shadow:var(--shadow);padding:14px 20px}.speech strong{color:#2783b9}.speech p{margin:4px 0 9px;font-size:14px;line-height:1.5;font-weight:700}.speech button{border:0;background:none;color:#2783b9;text-decoration:underline;font-size:12px;font-weight:900;padding:0}
.activity{max-width:1180px;min-height:calc(100vh - 130px);margin:0 auto;padding:30px 20px 65px}.activity-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:22px}.activity-head h2{margin:0;font-size:clamp(25px,4vw,40px);letter-spacing:-.05em}.activity-badge{margin-left:auto;padding:8px 15px;border-radius:20px;background:#e8f6ff;color:#3f729c;font-size:13px;font-weight:900}.back-button{background:#fff}.panel{background:#fff;border:3px solid #e0eff4;border-radius:28px;box-shadow:var(--shadow);padding:24px}.panel+.panel{margin-top:18px}.panel h3{margin:0 0 14px;font-size:23px}.panel p{line-height:1.7}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.choice-button{min-height:72px;text-align:center;font-size:18px;background:#f7fbff}.choice-button:hover,.soft-button:hover,.mini-button:hover{background:#e8f5ff}.choice-button.correct{background:#dcf8e4;border-color:#46ad70}.choice-button.wrong{background:#ffe9e9;border-color:#e58585}.primary-button{border-color:#2875ca;background:#368be5;color:#fff;box-shadow:0 6px 0 #2467ac}.primary-button:hover{background:#217ad7}.soft-button,.mini-button{background:#f5fbff}.mini-button{min-height:38px}.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}.feedback{min-height:30px;font-size:18px;font-weight:900;color:#315d7c}.stats{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 16px}.stat{padding:8px 14px;border-radius:15px;background:#f2f8ff;font-weight:900}.source-note{font-size:12px;color:#6d8192;font-weight:700}.word-big{font-size:clamp(30px,5vw,54px);font-weight:900;color:#3676c1;margin:12px 0}.word-pron{font-size:18px;color:#667d95}.flip-card{min-height:160px;width:100%;border:3px solid #a8d7e8;border-radius:20px;background:#eefaff;font-size:25px;font-weight:900;color:#346f9b;box-shadow:var(--shadow)}.flip-card.flipped{background:#fff1d7;border-color:#f0cf86}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:520px}.memory-card{height:75px;border:3px solid #a2c6e2;border-radius:15px;background:#66a9d9;color:white;font-size:22px;font-weight:900}.memory-card.open,.memory-card.matched{background:#fff5da;color:#534c72}.memory-card.matched{border-color:#5db688}.sentence-tokens{display:flex;flex-wrap:wrap;gap:10px}.sentence-tokens button{min-width:80px}.story-art,.animal-art,.avatar-art{min-height:230px;display:grid;place-items:center;border-radius:23px;background:linear-gradient(135deg,#d9f5ff,#f8eaff)}.story-art svg,.animal-art svg,.avatar-art svg{width:min(230px,70%);height:220px}.story-copy{font-size:clamp(20px,3vw,28px);font-weight:800;line-height:1.8}.story-copy button{border:0;border-bottom:3px dotted #3b83b8;background:transparent;color:#2568a2;font:inherit;padding:0 3px}.animal-art.bounce svg{animation:dance .22s 5 alternate}.planet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.planet{min-height:175px;border:3px solid #bdd2f3;border-radius:20px;background:#f3f6ff;font-weight:900;font-size:19px}.planet svg{display:block;width:85px;height:85px;margin:auto}.planet:disabled{background:#eef0f4}.space-stage{min-height:200px;background:radial-gradient(circle at 70% 20%,#5059a9,#171d48);color:white}.space-stage .source-note{color:#dce8ff}.space-stage h3{color:white}.space-stage .choice-button{color:#314b72}
.activity-guide{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:10px 16px;border:2px solid #bce6f4;border-radius:18px;background:#eefdff;font-size:14px;font-weight:800}.activity-guide svg{width:52px;height:52px;flex:none}.activity-guide p{margin:0;line-height:1.5}.activity-guide strong{color:#207db7}
.game-shell{background:#d7f4ff;border:4px solid #86cbe8;border-radius:24px;overflow:hidden;position:relative}.game-shell canvas{display:block;width:100%;height:390px;touch-action:none}.game-hud{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;background:#f9fdff;font-size:17px;font-weight:900;flex-wrap:wrap}.game-controls{display:flex;justify-content:space-between;gap:15px;padding:12px;background:#e8f6ff}.game-controls button{min-width:70px;min-height:68px;border:3px solid #3e87cb;border-radius:20px;background:#fff;color:#2366a4;font-size:25px;font-weight:900;touch-action:none}.game-controls .move-controls{display:flex;gap:10px}.game-overlay{position:absolute;inset:0;background:#143c60ba;display:grid;place-items:center;padding:20px}.game-modal{width:min(520px,100%);max-height:96%;overflow:auto;background:#fff;border-radius:24px;padding:23px;text-align:center}.game-modal h3{font-size:25px;margin:0 0 10px}.game-modal .choice-grid{margin-top:15px}.game-modal .choice-button{font-size:15px;min-height:53px}.game-modal .feedback{font-size:15px}
.wardrobe-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.wardrobe-controls label{font-weight:900;font-size:14px}.wardrobe-controls select{display:block;width:100%;min-height:46px;border:2px solid #c3dbed;border-radius:12px;background:white;margin-top:4px;padding:5px}.reward-list{display:flex;gap:10px;flex-wrap:wrap}.reward-chip{border:2px solid #e7d3a0;border-radius:16px;padding:10px 13px;background:#fff9e9;font-weight:900}.den-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.kids-footer{text-align:center;background:#eef8fc;color:#698398;padding:20px;font-size:12px;font-weight:700}.kids-footer a{margin-left:8px}
[data-theme=robot] .scene-world{filter:hue-rotate(35deg)}[data-theme=magic] .scene-world{filter:hue-rotate(125deg)}[data-theme=space] .scene-world{filter:hue-rotate(220deg) saturate(.9)}
@keyframes drift{to{transform:translateX(40px)}}@keyframes float{50%{transform:translateY(-12px)}}@keyframes wave{50%{transform:rotate(-60deg)}}@keyframes dance{to{transform:translateY(-9px) rotate(5deg)}}
@media(max-width:720px){.topbar{gap:7px;flex-wrap:wrap}.home-link{font-size:12px}.top-actions{width:100%;justify-content:space-between}.top-actions button{font-size:11px;padding:6px 9px}.intro-row{display:block}.settings{justify-content:flex-start;margin-top:14px}.scene-wrap{height:475px;min-height:0}.facility svg{width:175px;height:175px}.facility{width:205px}.scene-world{height:100%}.bot-guide{gap:8px}.bot{transform:scale(.75);transform-origin:center;flex-basis:75px}.speech{padding:11px}.speech p{font-size:12px}.two-col,.three-col,.planet-grid,.den-grid{grid-template-columns:1fr}.activity{padding:20px 12px 50px}.panel{padding:17px}.game-shell canvas{height:300px}.game-hud{font-size:13px}.activity-badge{margin-left:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}