:root{--green:#13744f;--deep:#0e4937;--mint:#dcebdc;--paper:#fbf8ee;--blue:#126eb5;--purple:#7546a1;--ink:#18352b;--line:#c9ddcf}*{box-sizing:border-box}html{background:#eaf1e9}body{color:var(--ink);background:radial-gradient(circle at 15% 5%,#f8faf3 0,#0000 34%),linear-gradient(145deg,#eef5eb,#dce9df);min-height:100vh;margin:0;font-family:Pretendard,Noto Sans KR,Apple SD Gothic Neo,Malgun Gothic,sans-serif}button,textarea{font:inherit}button{cursor:pointer}main{place-items:center;min-height:100svh;padding:20px;display:grid}.landing,.mission-panel,.success-card{background:#fbf8eef7;border:1px solid #13744f2e;border-radius:34px;width:min(100%,520px);padding:28px;position:relative;overflow:hidden;box-shadow:0 24px 70px #11493724}.landing:before,.mission-panel:before{content:"";z-index:0;background:#dcebd0;border-radius:50%;height:210px;position:absolute;inset:auto -50px -90px}.landing>*,.mission-panel>*{z-index:1;position:relative}.brand-mark{color:var(--green);align-items:center;gap:10px;margin-bottom:42px;display:flex}.brand-mark>span{font-size:42px;line-height:1}.brand-mark div{flex-direction:column;display:flex}.brand-mark small{font-size:10px;font-weight:700}.brand-mark strong{font-size:20px;line-height:1.1}.kicker{letter-spacing:.18em;color:var(--green);margin:0 0 10px;font-size:11px;font-weight:900}.landing h1{letter-spacing:-.05em;margin:0;font-size:40px;line-height:1.18}.landing h1 em{color:var(--green);font-style:normal}.lead{color:#5a6f66;margin:18px 0 28px;font-size:15px;line-height:1.7}.mode-grid{gap:14px;display:grid}.mode-card{text-align:left;min-height:190px;color:var(--ink);border:0;border-radius:24px;padding:22px;transition:transform .2s,box-shadow .2s;position:relative}.mode-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px #1949391f}.mode-card.child{background:#e4f2d5}.mode-card.ai{background:#e2eef8}.mode-icon{font-size:32px;position:absolute;top:17px;right:18px}.level{color:#fff;letter-spacing:-.02em;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;display:inline-flex}.level.seed{background:#54a52b}.level.challenge{background:var(--blue)}.mode-card h2{margin:18px 0 5px;font-size:23px}.mode-card p{color:#587066;margin:0 0 22px;font-size:13px}.mode-card b{color:var(--green);font-size:13px}.footer-note{text-align:center;color:#71847c;margin:22px 0 2px;font-size:11px}.back{color:#678078;background:0 0;border:0;padding:0 0 18px;font-size:12px}.mission-top{color:var(--green);justify-content:space-between;align-items:center;font-size:24px;font-weight:900;display:flex}.progress{background:#e0e9e2;border-radius:99px;height:6px;margin:16px 0 8px;overflow:hidden}.progress span{background:#63ad3b;border-radius:99px;height:100%;transition:width .3s;display:block}.hero-art{width:100%;height:220px;margin:4px auto -4px;display:block}.eyebrow{color:var(--green);margin:5px 0 7px;font-size:12px;font-weight:900}.mission-panel h2{letter-spacing:-.045em;margin:0 0 18px;font-size:25px;line-height:1.4}.choice-list{gap:10px;display:grid}.choice-list button{border:1px solid var(--line);text-align:left;color:var(--ink);background:#fffdf7;border-radius:16px;grid-template-columns:34px 1fr 20px;align-items:center;padding:14px;font-size:14px;font-weight:650;transition:all .18s;display:grid}.choice-list button:hover{background:#f4fbf4;border-color:#59a67d;transform:translate(2px)}.choice-list button span{font-size:20px}.choice-list button b{text-align:right;color:#6c8f7e}.toast{background:var(--deep);color:#fff;text-align:center;border-radius:16px;padding:14px 16px;font-size:13px;position:absolute;bottom:22px;left:24px;right:24px;box-shadow:0 12px 30px #0c372940}.question-image{object-fit:contain;object-position:center;background:#f8f6ec;border:1px solid #d8e6d3;border-radius:22px;width:100%;height:250px;margin:8px auto 12px;display:block;box-shadow:0 10px 24px #1f573d17}.ai-panel .hero-art{height:190px}.ai-panel .question-image{height:230px}.chat{background:#f0f4ef;border-radius:18px;flex-direction:column;gap:10px;height:250px;margin-bottom:12px;padding:15px;display:flex;overflow:auto}.bubble{grid-template-columns:28px 1fr;align-items:start;gap:7px;max-width:88%;display:grid}.bubble>span{color:#fff;background:var(--green);border-radius:50%;place-items:center;width:28px;height:28px;font-size:10px;font-weight:900;display:grid}.bubble p{background:#fff;border-radius:4px 14px 14px;margin:0;padding:11px 12px;font-size:13px;line-height:1.55}.bubble.user{grid-template-columns:1fr 28px;align-self:flex-end}.bubble.user>span{background:#6b7d75;grid-column:2}.bubble.user p{background:#d9eadf;border-radius:14px 4px 14px 14px;grid-area:1/1}.bubble.ai-question p{background:#fafffb;border:1px solid #82b6a0}.bubble small{color:#84938d;grid-column:2;font-size:9px}.typing{background:#fff;border-radius:14px;gap:4px;width:max-content;padding:12px 16px;display:flex}.typing i{background:#7e9b8e;border-radius:50%;width:6px;height:6px;animation:.8s infinite bounce}.typing i:nth-child(2){animation-delay:.12s}.typing i:nth-child(3){animation-delay:.24s}@keyframes bounce{50%{transform:translateY(-4px)}}.quick-choice-card{background:#edf6f0;border:1px solid #cce2d3;border-radius:17px;margin:0 0 12px;padding:13px}.quick-choice-card>p{color:#216d50;margin:0 0 10px;font-size:13px;font-weight:800;line-height:1.45}.quick-choice-list{gap:7px;display:grid}.quick-choice-list button{text-align:left;color:var(--ink);background:#fff;border:1px solid #d7e5da;border-radius:13px;grid-template-columns:26px 1fr;align-items:center;gap:8px;padding:9px 11px;font-size:12px;line-height:1.45;display:grid}.quick-choice-list button:hover,.quick-choice-list button:focus-visible{background:#fbfffc;border-color:#3f8a6b;outline:none;box-shadow:0 0 0 3px #3f8a6b1f}.quick-choice-list button:disabled{opacity:.55;cursor:default}.quick-choice-list b{background:var(--green);color:#fff;border-radius:50%;place-items:center;width:24px;height:24px;font-size:11px;display:grid}.input-row{grid-template-columns:1fr 46px;gap:8px;display:grid}.input-row textarea{resize:none;border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:15px;outline:none;padding:12px 13px}.input-row textarea:focus{border-color:#438f70;box-shadow:0 0 0 3px #438f701f}.input-row button{background:var(--green);color:#fff;border:0;border-radius:15px;font-size:22px;font-weight:700}.input-row button:disabled{opacity:.4;cursor:default}.input-help{color:#73857e;text-align:center;margin:9px 0 0;font-size:10px}.success-card{text-align:center;padding-top:46px}.success-badge{color:#fff;background:#54a52b;border-radius:50%;place-items:center;width:86px;height:86px;margin:0 auto 22px;font-size:44px;font-weight:900;display:grid;box-shadow:0 0 0 12px #e7f2dc}.success-card h2{margin:8px 0;font-size:30px}.success-card>p:not(.kicker){color:#60736b;font-size:14px;line-height:1.7}.code-box{background:var(--deep);color:#fff;border-radius:24px;flex-direction:column;margin:28px 0;padding:23px;display:flex}.code-box span{opacity:.75;font-size:11px}.code-box strong{letter-spacing:.18em;margin-left:.18em;font-size:52px}.code-box small{opacity:.6;font-size:9px}.secondary{border:1px solid var(--line);width:100%;color:var(--green);background:#fff;border-radius:15px;padding:14px;font-weight:800}@media (width<=560px){main{padding:0}.landing,.mission-panel,.success-card{min-height:100svh;box-shadow:none;border-radius:0;padding:24px}.brand-mark{margin-bottom:34px}.landing h1{font-size:36px}.mode-card{min-height:175px}.hero-art{height:205px}.chat{height:230px}.mission-panel h2{font-size:23px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.landing{background:radial-gradient(circle at 78% 25%,#ffffffe0 0 5%,#0000 5.4%),radial-gradient(circle at 91% 15%,#ffffffa3 0 2.7%,#0000 3%),linear-gradient(158deg,#f8f5d8 0 31%,#d9eff1 31.2% 68%,#b8df9f 68.2% 100%);border:1px solid #14684b24;border-radius:42px;width:min(100%,1180px);min-height:min(760px,100svh - 40px);padding:32px 40px 30px;box-shadow:0 30px 90px #174d4c2e}.landing:before{background:linear-gradient(100deg,#78b84c,#9bd06f 48%,#5fa851);border-radius:50% 50% 0 0/55% 55% 0 0;height:48%;inset:auto -8% -24%}.landing:after{content:"";z-index:0;background:linear-gradient(100deg,#d8e99b,#bdda7e);border-radius:50%;height:27%;position:absolute;bottom:9%;left:-8%;right:-8%;transform:rotate(-2deg)}.intro-topbar{z-index:4;justify-content:space-between;align-items:center;gap:20px;display:flex;position:relative}.landing .brand-mark{gap:11px;margin:0}.landing .brand-mark>span{color:#fff;background:#157851;border-radius:50%;place-items:center;width:46px;height:46px;font-size:30px;font-weight:900;display:grid;box-shadow:0 6px 18px #10593c2e}.landing .brand-mark small{letter-spacing:.04em;font-size:10px}.landing .brand-mark strong{font-size:21px}.intro-lab{color:#245e4a;font-size:12px;font-weight:900}.intro-hero{z-index:2;grid-template-columns:.78fr 1.22fr;align-items:center;gap:12px;min-height:480px;display:grid;position:relative}.intro-copy{padding:10px 0 56px 18px}.intro-kicker{color:#277051;background:#fff8c7;border-radius:999px;margin:0 0 13px;padding:7px 12px;font-size:13px;font-weight:900;display:inline-block;transform:rotate(-2deg);box-shadow:0 5px 14px #44673f1a}.landing .intro-copy h1{letter-spacing:-.075em;color:#164d3b;text-shadow:0 3px #fffc;font-size:clamp(54px,6vw,82px);line-height:1.03}.landing .intro-copy h1 em{color:#147c55;font-style:normal}.landing .intro-copy .lead{color:#3f6356;margin:22px 0 0;font-size:17px;font-weight:700;line-height:1.65}.character-stage{align-self:end;padding:38px 0 8px;position:relative}.character-stage:before{content:"";background:radial-gradient(#ffffffb3,#ffffff1a 64%,#0000 65%);border-radius:50%;position:absolute;inset:16% 5% 2%}.character-stage img{filter:drop-shadow(0 19px 14px #21513d33);width:100%;height:auto;animation:3.8s ease-in-out infinite crewFloat;display:block;position:relative}@keyframes crewFloat{50%{transform:translateY(-5px)}}.intro-actions{z-index:5;grid-template-columns:1fr 1fr;gap:14px;width:min(720px,78%);margin:-20px auto 0;display:grid;position:relative}.intro-button{text-align:left;color:#fff;border:3px solid #ffffffe6;border-radius:24px;justify-content:space-between;align-items:center;min-height:82px;padding:15px 18px 15px 22px;transition:transform .18s,box-shadow .18s,filter .18s;display:flex;box-shadow:0 12px 25px #1f4d3a33}.intro-button:hover{filter:saturate(1.08);transform:translateY(-4px);box-shadow:0 17px 30px #1f4d3a45}.intro-button:focus-visible{outline-offset:3px;outline:4px solid #fff}.intro-button.child{background:linear-gradient(135deg,#318c52,#58a944)}.intro-button.ai{background:linear-gradient(135deg,#176f9f,#285bb4)}.intro-button span{flex-direction:column;gap:3px;display:flex}.intro-button small{opacity:.82;font-size:11px;font-weight:800}.intro-button strong{letter-spacing:-.035em;font-size:20px}.intro-button>b{background:#ffffff2e;border-radius:50%;place-items:center;width:36px;height:36px;font-size:20px;display:grid}.landing .footer-note{z-index:4;color:#4e6f61;margin:14px 0 0;font-size:11px;font-weight:700;position:relative}@media (width<=760px){.landing{background:linear-gradient(166deg,#f9f5d7 0 28%,#d9eff1 28.2% 67%,#b8df9f 67.2% 100%);border-radius:0;width:100%;min-height:100svh;padding:20px 18px 24px}.intro-topbar{align-items:flex-start}.intro-lab{text-align:right;max-width:135px;font-size:9px;line-height:1.45}.intro-hero{grid-template-columns:1fr;gap:0;min-height:0;padding-top:16px}.intro-copy{text-align:center;padding:12px 0 0}.intro-kicker{margin-bottom:10px;font-size:11px}.landing .intro-copy h1{font-size:clamp(45px,13.5vw,64px)}.landing .intro-copy .lead{margin:13px 0 0;font-size:14px;line-height:1.55}.character-stage{width:min(100%,560px);margin:0 auto;padding:12px 0 0}.intro-actions{grid-template-columns:1fr;gap:10px;width:min(100%,460px);margin:-4px auto 0}.intro-button{border-radius:20px;min-height:68px;padding:11px 14px 11px 18px}.intro-button strong{font-size:18px}.intro-button>b{width:32px;height:32px}.landing .footer-note{margin-top:11px}}@media (width<=420px){.landing{padding:16px 14px 20px}.landing .brand-mark strong{font-size:16px}.landing .brand-mark small{font-size:8px}.landing .brand-mark>span{width:38px;height:38px;font-size:25px}.intro-lab{max-width:120px;font-size:8px}.intro-copy{padding-top:8px}.landing .intro-copy h1{font-size:43px}.landing .intro-copy .lead{font-size:12px}.intro-button{min-height:62px}.intro-button small{font-size:9px}.intro-button strong{font-size:16px}}.setup-shell{background:radial-gradient(circle at 15% 10%,#e8f5c9 0,#0000 34%),linear-gradient(145deg,#eff8f2,#f9fbf7);place-items:center;min-height:100vh;padding:28px 18px;display:grid}.setup-card{background:#fffffff5;border:1px solid #d8e8de;border-radius:26px;width:min(100%,620px);padding:32px;box-shadow:0 24px 70px #1f5b4124}.setup-heading{align-items:center;gap:16px;display:flex}.setup-heading h1{color:#173f30;margin:4px 0 0;font-size:clamp(28px,5vw,40px)}.setup-heading .kicker{margin:0}.setup-lock{color:#fff;background:#28785a;border:7px solid #b9dea8;border-radius:15px;place-items:center;width:48px;height:48px;display:grid;box-shadow:inset 0 0 0 14px #28785a}.setup-intro{color:#5d7167;margin:22px 0 26px;line-height:1.65}.setup-form{gap:20px;display:grid}.setup-form label{gap:8px;display:grid}.setup-form label>span{letter-spacing:.045em;color:#2a5744;font-size:13px;font-weight:800}.setup-form input{color:#173f30;width:100%;min-height:50px;font:inherit;background:#fbfdfb;border:1px solid #cdded4;border-radius:13px;outline:none;padding:0 14px}.setup-form input:focus{border-color:#2f8b65;box-shadow:0 0 0 3px #2f8b651f}.setup-form small{color:#849289}.secret-input{position:relative}.secret-input input{padding-right:76px}.secret-input button{color:#2f7155;cursor:pointer;background:#e8f3ed;border:0;border-radius:9px;height:34px;padding:0 12px;font-weight:800;position:absolute;top:8px;right:8px}.setup-preview{background:#173f30;border-radius:14px;gap:8px;padding:16px;display:grid;overflow-x:auto}.setup-preview code{color:#d8f0b6;white-space:nowrap;font-size:13px}.setup-submit{color:#fff;min-height:52px;font:inherit;cursor:pointer;background:#28785a;border:0;border-radius:14px;font-weight:900}.setup-submit:disabled{opacity:.6;cursor:wait}.setup-status{border-radius:12px;margin:0;padding:12px 14px;line-height:1.5}.setup-status.success{color:#245c31;background:#e8f6df}.setup-status.error{color:#9b3d25;background:#fff0eb}@media (width<=540px){.setup-card{border-radius:20px;padding:24px 18px}}main:has(.poster-landing){background:linear-gradient(145deg,#eef8f2,#e6f1ed);padding:clamp(8px,1.5vw,22px)}.poster-landing{aspect-ratio:3/2;background:#f4fbf8;border:1px solid #1b694a29;border-radius:clamp(18px,2.5vw,38px);width:min(100%,1536px);min-height:0;padding:0;overflow:hidden;box-shadow:0 20px 70px #194e3c26}.poster-landing:before,.poster-landing:after{display:none}.poster-art{object-fit:cover;width:100%;height:100%;display:block}.poster-landing{position:relative;container-type:inline-size}.poster-robot-name{color:#226632;pointer-events:none;background:#f5faef;border-radius:999px;justify-content:center;align-items:center;width:6.35%;height:3.85%;font-size:1.56cqw;font-weight:700;line-height:1;display:flex;position:absolute;top:61.8%;left:54.95%}.poster-hotspot{z-index:3;color:#0000;background:0 0;border:0;border-radius:1.8vw;height:15.5%;transition:transform .16s,box-shadow .16s,background .16s;position:absolute;top:68.1%}.poster-hotspot.child{width:33.5%;left:16.8%}.poster-hotspot.ai{width:31.1%;left:51.8%}.poster-hotspot span{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.poster-hotspot:hover{background:#ffffff14;transform:translateY(-2%);box-shadow:0 0 0 4px #ffffffb3,0 10px 24px #175b3d26}.poster-hotspot:focus-visible{outline-offset:-5px;outline:5px solid #f1c94b;box-shadow:0 0 0 9px #ffffffe6}.poster-hotspot:active{transform:translateY(1%)}@media (width<=760px){main:has(.poster-landing){background:#e9f5ef;align-items:center;min-height:100svh;padding:8px;display:flex}.poster-landing{aspect-ratio:3/2;border-radius:18px;width:100%;min-height:0;box-shadow:0 12px 36px #194e3c24}.poster-hotspot{border-radius:14px}.poster-hotspot:hover{transform:none;box-shadow:0 0 0 3px #ffffffb3}}@media (orientation:portrait) and (width<=560px){main:has(.poster-landing){padding-top:max(12px,env(safe-area-inset-top));align-items:flex-start}.poster-landing{margin-top:min(16vh,110px)}}.reward-success{background:radial-gradient(circle at 88% 13%,#ffffffd9 0 7%,#0000 7.4%),linear-gradient(165deg,#fbf8dc 0 33%,#dff1f2 33.2% 68%,#c8e8a9 68.2% 100%);border-color:#19744f29;flex-direction:column;align-items:center;width:min(100%,720px);min-height:650px;padding:44px 42px 30px;display:flex;box-shadow:0 28px 80px #174d4c2b}.reward-success:before{content:"";background:linear-gradient(95deg,#b8dc78,#80be58);border-radius:50% 50% 0 0;height:27%;position:absolute;bottom:13%;left:-12%;right:-12%;transform:rotate(-2deg)}.reward-success>*{z-index:1;position:relative}.reward-copy{text-align:center}.reward-copy .success-badge{border:5px solid #ffffffdb;width:72px;height:72px;margin:0 auto 16px;font-size:38px;box-shadow:0 0 0 11px #65ad4524,0 10px 20px #286e4324}.reward-copy .kicker{color:#14744f;margin:0 0 8px;font-size:11px}.reward-copy h2{color:#164d3b;letter-spacing:-.055em;text-shadow:0 3px #ffffffd1;margin:0;font-size:clamp(34px,6vw,50px)}.reward-characters{filter:drop-shadow(0 15px 13px #21513d2e);width:min(100%,560px);height:auto;margin:12px auto -8px;animation:3.8s ease-in-out infinite crewFloat;display:block}.reward-message{color:#245b43;background:linear-gradient(135deg,#fff9d8,#ffefb3);border:3px solid #ffffffe6;border-radius:26px;grid-template-columns:64px 1fr 64px;align-items:center;gap:13px;width:min(100%,590px);min-height:96px;margin:0 auto 18px;padding:14px 20px;display:grid;box-shadow:0 13px 28px #3968392e}.reward-message strong{letter-spacing:-.035em;font-size:21px;line-height:1.35}.reward-message em{color:#29824c;font-style:normal}.reward-stamp,.reward-coin{color:#fff;border-radius:18px;place-items:center;width:58px;height:58px;font-size:29px;font-weight:950;display:grid;transform:rotate(-7deg)}.reward-stamp{background:linear-gradient(145deg,#4da449,#227a43);box-shadow:inset 0 -5px #00000017,0 7px 13px #2f753e33}.reward-coin{color:#fff8c7;background:linear-gradient(145deg,#ffd85e,#efa922);border:4px solid #ffe895;border-radius:50%;transform:rotate(8deg);box-shadow:inset 0 -5px #aa6a0024,0 7px 13px #89611433}.reward-success .secondary{color:#fff;background:#176f50;border:0;width:min(100%,360px);min-height:48px;box-shadow:0 9px 18px #16593e2e}.reward-success .secondary:hover{background:#125f43;transform:translateY(-2px)}@media (width<=560px){.reward-success{border-radius:0;justify-content:center;min-height:100svh;padding:38px 20px 24px}.reward-copy .success-badge{width:64px;height:64px;font-size:32px}.reward-copy h2{font-size:38px}.reward-characters{width:min(100%,470px);margin-top:18px}.reward-message{border-radius:22px;grid-template-columns:50px 1fr 50px;gap:9px;min-height:82px;padding:11px 13px}.reward-message strong{font-size:17px}.reward-stamp,.reward-coin{border-radius:15px;width:48px;height:48px;font-size:24px}.reward-coin{border-radius:50%}}.success-poster{aspect-ratio:1;background:#edf7e8;border-radius:3.2%;width:min(100%,100svh - 40px,760px);position:relative;overflow:hidden;box-shadow:0 26px 75px #174d4c2e;container-type:inline-size}.success-poster>img{object-fit:contain;width:100%;height:100%;display:block}.success-robot-name{color:#338532;pointer-events:none;background:#fffff3;border-radius:999px;justify-content:center;align-items:center;width:8.9%;height:3.35%;font-size:2.07cqw;font-weight:700;line-height:1;display:flex;position:absolute;top:65.1%;left:32.4%}.success-poster-button{background:0 0;border:0;border-radius:999px;width:50%;height:8.35%;position:absolute;top:87.25%;left:25%}.success-poster-button:hover{box-shadow:inset 0 0 0 4px #ffffff73}.success-poster-button:focus-visible{outline-offset:-7px;outline:4px solid #fff}@media (width<=560px){main:has(.success-poster){align-items:center;padding:0}.success-poster{width:min(100vw,100svh);box-shadow:none;border-radius:0}}