@import url('experience/font.css');
:root{--ink:#1f2330;--muted:#5f6673;--line:#e5e8ef;--blue:#2563eb;--blue-soft:#e0ebff;--purple:#6d28d9;--purple-soft:#ede4ff;--yellow:#fff3c4;--page:#fafbfc;--round:16px;font-family:Pretendard,'Malgun Gothic',sans-serif;color:var(--ink);font-size:16px;background:var(--page);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{opacity:.42;cursor:default}button{touch-action:manipulation}a{color:inherit;text-decoration:none;text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #a47aee;outline-offset:3px}::selection{background:#ddd0f8;color:#2a1945}input,textarea{caret-color:var(--purple)}*{scrollbar-color:#bcb6cc #f7f8fb;scrollbar-width:thin}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{text-wrap:balance;word-break:keep-all}p{word-break:keep-all;overflow-wrap:anywhere}img{max-width:100%;display:block}svg{flex-shrink:0;vertical-align:middle}button .ico{pointer-events:none}.ico{display:inline-block;width:19px;height:19px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{height:72px;display:flex;align-items:center;justify-content:space-between;gap:30px;width:min(1360px,100%);padding:0 48px;margin:auto;border-bottom:1px solid var(--line)}.brand{width:124px}.site-header nav{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:700}.site-header nav a:hover{color:var(--blue)}.site-header .login{padding:11px 17px;border:1px solid var(--line);border-radius:999px;background:white}.intro{max-width:1264px;margin:0 auto;padding:60px 0 34px;display:flex;align-items:end;justify-content:space-between;gap:48px}.intro h1{font-family:CookieRun,sans-serif;font-size:clamp(34px,4.4vw,60px);line-height:1.28;letter-spacing:-.025em;font-weight:700}.intro h1 em{font-style:normal;color:var(--purple)}.intro p{max-width:450px;line-height:1.9;font-size:16px;color:#505565}.intro-actions{display:flex;gap:12px;margin-top:22px;align-items:center}.primary,.purple-button,.quiet,.chip,.text-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border-radius:10px;padding:8px 13px;font-size:14px;font-weight:700;white-space:nowrap}.primary{border:0;background:var(--blue);color:#fff}.purple-button{border:0;background:var(--purple);color:#fff}.primary:hover,.purple-button:hover{filter:brightness(1.1)}.quiet{background:#fff;border:1px solid #cdd2de}.quiet:hover{background:#f5f4fb}.text-button{border:0;background:none;color:var(--purple);padding-left:0}.intro-actions .primary{border-radius:999px;padding:12px 22px;min-height:46px}.intro-actions a{font-size:16px}.quiet .ico,.primary .ico,.purple-button .ico{width:16px;height:16px}
.experience{max-width:1360px;margin:0 auto;padding:0 48px;scroll-margin-top:18px}.scene-navigation{display:flex;gap:6px;padding:12px 0 18px;flex-wrap:wrap}.scene-link{display:flex;align-items:center;gap:8px;border:0;background:none;color:#626777;padding:11px 17px;border-radius:999px;font-size:15px;font-weight:700;min-height:44px}.scene-link[aria-pressed=true]{color:#fff;background:var(--ink)}.scene-link:hover:not([aria-pressed=true]){background:#ebedf3;color:#272a35}.experience-grid{display:grid;grid-template-columns:275px minmax(0,1fr);gap:42px;align-items:start}.chapters{min-width:0}.chapter{min-height:610px;padding-top:45px;scroll-margin-top:110px;position:relative}.chapter h2,.active-copy h2{font-family:CookieRun,sans-serif;font-size:27px;line-height:1.5;letter-spacing:-.015em}.chapter p,.active-copy p{color:#596071;line-height:1.95;font-size:16px;margin-top:22px}.chapter ol{padding:0;list-style:none;counter-reset:step;margin:30px 0 25px}.chapter li{counter-increment:step;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#626778;margin:12px 0}.chapter li:before{content:counter(step);border:1px solid #dadce4;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;font-size:12px}.chapter>.kebi{width:108px;opacity:.95;margin-top:34px}.stage-column{position:sticky;top:24px;min-width:0}.screen-frame{border:1px solid #d9dde6;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 16px 40px -24px #28233a55}.screen-chrome{height:40px;padding:0 15px;display:flex;align-items:center;gap:14px;font-size:12px;color:#616776;background:#f7f8fb;border-bottom:1px solid #e6e8ef}.window-dots{display:flex;gap:5px}.window-dots i{width:6px;height:6px;border-radius:50%;background:#cbd0dc}.window-dots i:first-child{background:#f49b99}.window-dots i:nth-child(2){background:#f2c467}.window-dots i:nth-child(3){background:#75cbb0}.app-stage{height:490px;overflow:auto;position:relative;outline:none}.screen-guide{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 2px;font-size:14px;color:#545c6c}.screen-guide p{line-height:1.7;display:flex;align-items:center;gap:10px}.screen-guide p:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--purple);flex-shrink:0}.screen-guide button{background:#fff;border:1px solid var(--line);min-width:84px}.progress-line{height:3px;background:#e7e8ed;position:relative;overflow:hidden;border-radius:2px}.progress-line:after{content:'';display:block;width:var(--progress,16.67%);height:100%;background:var(--purple);transition:width .35s ease-out}.tour-legend{display:flex;justify-content:space-between;color:#626978;font-size:13px;margin-top:12px}.sample-note{font-size:13px;line-height:1.8;color:#6b6679;margin-top:15px;max-width:640px}.demo-status{font-size:14px;line-height:1.7;color:#583887;min-height:23px;margin-top:8px}.active-copy{display:none}
.admin-app{height:100%;display:grid;grid-template-columns:144px minmax(0,1fr)}.admin-side{background:#f7f8fb;border-right:1px solid #e5e7eb;padding:0 10px;display:flex;flex-direction:column;font-size:13px;gap:2px}.side-heading{height:56px;display:flex;align-items:center;gap:10px;margin-bottom:4px;white-space:nowrap}.admin-side>small{font-size:12px;color:#6c7280;margin:12px 8px 6px}.admin-side>span{padding:9px 10px;border-radius:8px}.admin-side>span.selected{background:#eaf1ff;color:#1d4ed8;font-weight:700}.side-bottom{margin-top:auto;display:flex;gap:8px;align-items:center;padding:15px 2px;font-size:12px;color:#5f6673}.side-bottom .kebi{width:24px;height:24px}.admin-main{min-width:0;padding:17px 20px}.app-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.app-top img{width:87px;height:30px;object-fit:contain}.app-top>span{font-size:12px;color:#646b7a}.app-top small{font-size:12px;color:#626978}.sample-types{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:18px}.chip{border:1px solid var(--line);background:#fff;color:#5f6673;padding:6px 10px;min-height:32px;font-size:12px;border-radius:999px}.chip.selected{background:#eaf1ff;border-color:#9fbef7;color:#2146a4}.admin-main h3{font-size:22px;letter-spacing:-.025em}.app-muted{font-size:12px;color:#626b7e;line-height:1.8;margin:5px 0}.app-tabs{display:flex;gap:19px;border-bottom:1px solid var(--line);margin:17px 0;overflow-x:auto;white-space:nowrap}.app-tabs>span,.app-tabs>button{padding:10px 0;color:#687285;font-size:12px;border:0;background:none}.app-tabs>.active{color:var(--blue);border-bottom:2px solid var(--blue)}.classrooms{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:23px}.classroom-tile{border:1px solid #dbe0e9;background:#fff;border-radius:12px;padding:18px;text-align:left;display:flex;flex-direction:column;gap:10px;transition:background .2s}.classroom-tile:hover{background:#f7faff}.class-icon{background:#eaf1ff;color:var(--blue);width:34px;height:34px;display:grid;place-items:center;border-radius:10px}.class-icon.purple{background:#f1eaff;color:var(--purple)}.classroom-tile>strong{font-size:16px}.classroom-tile>span{font-size:12px;color:#697183}.class-stats{font-size:12px;display:flex;gap:12px;flex-wrap:wrap;color:#636a79}.online{color:#16704c!important}.online:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#27aa76;margin-right:5px;vertical-align:1px}.class-open{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--line);color:var(--blue)!important}.class-open .ico{width:15px}.title-line{display:flex;align-items:center;gap:10px}.icon-button{display:grid;place-items:center;background:none;border:0;padding:5px;min-height:32px}.student-list{border:1px solid #e1e5ec;border-radius:12px;overflow:hidden;margin:20px 0}.student-list>div{display:flex;align-items:center;gap:13px;min-height:65px;padding:10px 14px;font-size:13px;border-bottom:1px solid #e1e5ec}.student-list>div:last-child{border:0}.student-list .kebi{width:28px;height:28px;object-fit:contain}.student-list>div>button:last-child{margin-left:auto;font-size:12px}.student-list>div>.desktop-only{font-size:12px;color:#697181}.link-button{border:0;background:none;color:var(--blue);font-size:13px}.inline-tip{font-size:13px;line-height:1.8;color:#626c80;margin:14px 0}.admin-main h4{font-size:16px}.book-list-title{font-size:12px;color:#677084}.read-note{display:flex;gap:12px;color:var(--purple);background:#f9f6ff;padding:15px;border-radius:10px}.read-note p{font-size:13px;line-height:1.8}
.lesson-app,.donghwa-activity{height:100%;padding:18px;display:flex;flex-direction:column;background:#fff4cc;gap:12px}.lesson-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}.lesson-top strong{display:flex;align-items:center;gap:8px}.lesson-switch{display:flex;justify-content:center;gap:6px}.lesson-paper{flex:1;min-height:0;background:#fff;border-radius:18px;padding:20px 26px;overflow:auto}.lesson-ready{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}.lesson-ready>.ico{width:38px;height:38px;color:#9f6800}.lesson-ready h3,.quiz-content h3,.board-head h3{font:700 24px/1.5 CookieRun,sans-serif}.lesson-ready p{font-size:14px;color:#71707d}.workbar{display:flex;justify-content:space-between;padding:2px 4px;font-size:12px;align-items:center}.workbar>span:first-child{display:flex;gap:8px;align-items:center}.quiz-content{max-width:560px;width:100%;margin:auto}.lesson-tag{font-size:12px;color:#835d07;display:block;margin-bottom:12px}.quiz-answers{display:flex;gap:10px;margin:25px 0}.answer{flex:1;border:1px solid #d8deea;border-radius:12px;background:#fff;text-align:left;min-height:70px;font-size:16px;padding:14px;display:flex;gap:10px;align-items:center}.answer>b{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#edf2fc;color:#3563b7;font-size:12px}.answer.chosen{border-color:#4f8bff;background:#edf4ff;color:#1646a3}.answer-feedback{font-size:14px;color:#23634e;background:#e8f8ef;padding:12px;border-radius:8px}.board-head p{font-size:13px;color:#65616f;margin-top:6px}.postits{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:15px 0}.postit{padding:12px;min-height:75px;border-radius:3px;font-size:15px;line-height:1.6}.postit small{font-size:12px;color:#625b5d;display:block;margin-bottom:6px}.note-0{background:#fff2b8}.note-1{background:#f6dcf2}.note-2{background:#dff5e3}.board-compose{display:flex;gap:8px}.board-compose input{min-width:0;flex:1;border:1px solid #d0d4dd;border-radius:9px;padding:9px 10px;font-size:13px}
.atelier-app{height:100%;display:grid;grid-template-columns:146px minmax(0,1fr)}.atelier-side{background:#f7f8fb;padding:14px 8px;display:flex;flex-direction:column;gap:7px}.atelier-side>div:first-child{padding:2px 10px}.student-identity{display:flex;align-items:center;gap:8px;font-size:13px;padding:12px 9px}.student-identity .kebi{width:30px;height:30px}.side-action{display:flex;gap:9px;align-items:center;font-size:12px;background:none;border:0;padding:10px 9px;text-align:left;color:#655082;border-radius:8px}.side-action.selected{background:#e9e1f6;color:#6026a4}.side-action .ico{width:17px;height:17px}.atelier-main{min-width:0;display:flex;flex-direction:column;padding:18px 23px;gap:12px}.atelier-main .app-top{margin:0}.chat-thread{flex:1;min-height:0;display:flex;flex-direction:column;gap:24px;overflow:auto;padding-top:12px}.chat-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;text-align:center}.chat-welcome>.kebi{width:76px}.chat-welcome h3{font:700 19px/1.4 CookieRun,sans-serif}.chat-welcome p{font-size:13px;color:#697080}.suggestion{border:1px solid #d8dee9;background:white;border-radius:999px;padding:9px 14px;font-size:12px;color:#53637a;margin-top:8px}.composer{display:flex;align-items:center;gap:12px;border:2px solid #eceef3;border-radius:20px;padding:8px;min-height:52px}.composer>span{padding-left:3px;color:#606a7b}.composer input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:13px;padding:4px}.composer input::placeholder{color:#606a7b}.composer button{border:0;border-radius:50%;height:32px;width:32px;background:#407df2;color:#fff;display:grid;place-items:center}.user-message{align-self:flex-end;display:flex;flex-direction:row-reverse;align-items:start;gap:8px;max-width:95%;font-size:13px}.user-message>span{background:#e0ebff;color:#2859a5;font-size:12px;border-radius:50%;padding:7px}.user-message p{padding:11px 14px;background:#eff6ff;border-radius:12px;line-height:1.7}.bot-message{display:flex;gap:10px;align-items:start;font-size:13px;line-height:1.9}.bot-message>.kebi{width:28px;height:28px}.moon-row{display:flex;gap:26px;justify-content:center;margin-top:20px}.moon-row>span{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:#6a6f7c}.moon{width:25px;height:25px;display:block;border-radius:50%;background:#ffb020}.moon.half{background:linear-gradient(90deg,#ffb020 50%,#edf0f6 50%)}.moon.crescent{background:#edf0f6;box-shadow:inset -7px 0 #ffb020}.drawing-tools{display:flex;justify-content:space-between;gap:10px;align-items:center}.drawing-tools h3{font:700 16px CookieRun,sans-serif}.drawing-tools>div{display:flex;gap:3px}.color-button{padding:5px;border:1px solid transparent;border-radius:50%;background:none}.color-button[aria-pressed=true]{border-color:var(--ink)}.color-button i{display:block;width:19px;height:19px;border-radius:50%}.drawing-canvas{background:#fdfcf9;border:1px solid #e0dee2;border-radius:12px;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.drawing-canvas svg{width:100%;min-height:0;max-height:240px}.drawing-canvas span{font-size:12px;color:#697080;margin:8px}.sketch-star{stroke-dasharray:600;stroke-dashoffset:600}.sketch-star.drawn{stroke-dashoffset:0;animation:draw .6s ease-out}.drawing-actions{display:flex;justify-content:flex-end;gap:8px}.vibe-request{display:flex;gap:12px;align-items:center;margin:10px 0}.vibe-request>.kebi{width:35px;height:35px}.vibe-request h3{font-size:16px}.vibe-request p{font-size:12px;line-height:1.8;color:#687184;margin-top:4px}.code-example{background:#f7f8fb;border:1px solid #e2e5ed;border-radius:12px;overflow:hidden;margin:8px 0}.code-example>span{display:block;font-size:12px;padding:10px 15px;border-bottom:1px solid #e2e5ed;color:#6e7480}.code-example code{font-family:Consolas,monospace;font-size:14px;line-height:2;display:block;padding:16px 20px;color:#6b369c}.game-window{flex:1;min-height:0;background:#f8f5ff;border:1px solid #e6dff5;border-radius:12px;text-align:center;display:flex;flex-direction:column;align-items:center}.game-window>div{align-self:stretch;display:flex;justify-content:space-between;padding:12px;font-size:12px;color:#605275;border-bottom:1px solid #e7dff4}.game-star{margin:auto;border:0;background:#ffe399;width:70px;height:70px;border-radius:20px;color:#926209;transition:transform .12s}.game-star:active{transform:scale(.85)}.game-star .ico{width:42px;height:42px}.game-window>p{font-size:12px;color:#686079;margin-bottom:20px}
.donghwa-home{max-width:760px;margin:auto;padding:32px 30px;height:100%;background:#fcfbff}.donghwa-home>header{display:flex;justify-content:space-between;align-items:start;gap:15px}.donghwa-home h3{font:700 24px/1.5 CookieRun,sans-serif;display:flex;align-items:center;gap:8px}.donghwa-home h3>.ico{color:var(--purple);width:24px;height:24px}.donghwa-home header p{font-size:13px;color:#626777;margin-top:5px}.donghwa-home header>span{display:flex;align-items:center;gap:6px;font-size:13px}.donghwa-home header .kebi{width:28px}.donghwa-tools{margin:22px 0}.donghwa-tools .purple-button{border-radius:999px}.activities{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.activity-card{text-align:left;display:flex;flex-direction:column;gap:12px;border:1px solid #e0d6f2;border-radius:14px;background:#fff;padding:13px;transition:transform .2s}.activity-card:hover{transform:translateY(-3px)}.activity-card>strong{font-size:15px;line-height:1.6;min-height:40px;word-break:keep-all}.activity-card>span{font-size:12px;color:#69637a}.activity-cover{aspect-ratio:1.45;display:flex;align-items:center;justify-content:center;position:relative;border-radius:9px;overflow:hidden}.activity-cover>.kebi{width:58%;height:85%;object-fit:contain}.activity-cover>.ico{position:absolute;right:8px;top:10px;width:22px;height:22px}.cover-0{background:#ede8fe;color:#9866c0}.cover-1{background:#e1f1e8;color:#3a795c}.cover-2{background:#fff0d2;color:#9a7b35}.donghwa-activity .quiz-content{background:#fff;border-radius:18px;padding:30px}.lesson-bottom{display:flex;justify-content:center;padding:5px}
.book-setup,.book-workspace{height:100%;background:#fff}.book-setup>header{display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid #ded4f5;padding:19px 24px}.book-setup>header h3{font-size:16px;color:var(--purple);display:flex;align-items:center;gap:8px}.book-setup>header>span{font-size:12px;color:#726980}.setup-body{padding:27px 30px}.creation-steps{display:flex;list-style:none;gap:25px;padding:0;margin:0 0 28px;font-size:13px;color:#686176}.creation-steps li{display:flex;align-items:center;gap:7px}.creation-steps b{width:23px;height:23px;border:1px solid #ddd3eb;border-radius:50%;display:grid;place-items:center;font-size:12px}.creation-steps [aria-current=step]{color:var(--purple);font-weight:700}.creation-steps [aria-current=step] b{background:var(--purple);color:#fff;border-color:var(--purple)}.setup-content{display:flex;gap:30px;align-items:center;min-height:246px}.setup-content>div:first-child{flex:1;min-width:0}.setup-content h4{font-size:20px;line-height:1.6;margin-bottom:22px}.setup-content label{font-size:13px;font-weight:700;margin:12px 0 7px;display:block}.setup-content input,.setup-content textarea,.setup-content select{border:1px solid #bcb0d1;border-radius:10px;padding:11px 12px;color:#352e40;background:#fff;width:100%;font-size:14px;line-height:1.7}.setup-content textarea{resize:vertical}.setup-content p{font-size:12px;color:#756b83;line-height:1.8;margin-top:12px}.setup-mascot{width:150px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:15px;padding-top:25px}.setup-mascot>.kebi{width:108px}.setup-mascot>span{font-size:13px;color:var(--purple)}.setup-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.character-row{display:flex;gap:24px;align-items:center}.character-preview{width:140px;height:150px;background:#f9f7fc;border-radius:14px;display:grid;place-items:center;flex-shrink:0}.character-preview .kebi{width:115px}.character-preview>.ico{width:42px;height:42px;color:#c0a7e2}.character-row>div:last-child{max-width:240px}.character-row b{font-size:16px}.character-row p{margin:8px 0 18px}.book-toolbar{display:flex;gap:10px;align-items:center;padding:14px 18px;border-bottom:1px solid #ded4f5;font-size:13px;flex-wrap:wrap}.book-toolbar>strong{color:var(--purple);display:flex;align-items:center;gap:7px}.book-toolbar>span{flex:1;color:#514661;font-weight:700;min-width:60px}.book-toolbar .quiet,.book-toolbar .purple-button{font-size:12px;min-height:32px;padding:6px 9px}.book-status{text-align:center;font-size:12px;color:#70637f;padding:16px 10px 6px}.book-spread{position:relative;width:min(98%,660px);aspect-ratio:1672/941;background:url('experience/open-book.png') center/contain no-repeat;margin:8px auto 0;isolation:isolate}.book-art{position:absolute;top:16%;height:61%;left:9%;width:38%;display:flex;align-items:center;justify-content:center}.book-art>.kebi{height:95%;width:95%;object-fit:contain}.book-text{position:absolute;top:16%;height:61%;left:54%;width:35%;display:flex;align-items:center;overflow:auto}.book-text>p{font-size:clamp(16px,1.3vw,18px);line-height:1.95;color:#41394e;word-break:keep-all}.book-navigation{display:flex;align-items:center;justify-content:center;gap:20px;margin:4px auto 12px;font-size:13px}.book-navigation .quiet{min-width:37px}.pdf-preview{padding:15px 35px;max-width:600px;margin:auto}.pdf-preview>div:first-child{display:flex;justify-content:flex-end;align-items:center;font-size:13px}.pdf-sheet{height:260px;background:#fff;border:1px solid #ded4ed;display:flex;gap:24px;align-items:center;padding:30px;margin:15px 0;box-shadow:0 10px 22px -16px #4c3c6766}.pdf-sheet>.kebi{width:42%;max-height:200px;object-fit:contain}.pdf-sheet>p{font-size:14px;line-height:1.9}.pdf-preview>p{font-size:12px;text-align:center;color:#6d617e}
.audience-section{max-width:1264px;margin:60px auto 100px;border-top:1px solid var(--line);padding-top:55px}.section-heading{display:flex;gap:50px;align-items:start;justify-content:space-between;margin-bottom:36px}.section-heading h2{font:700 32px/1.5 CookieRun,sans-serif;letter-spacing:-.02em}.section-heading>p{font-size:16px;line-height:1.9;color:#626979;max-width:370px;padding-top:6px}.role-lines{border-top:1px solid var(--line)}.role-line{display:grid;grid-template-columns:170px 1fr auto;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}.role-line h3{font-size:18px}.role-line p{font-size:15px;line-height:1.9;color:#626979;max-width:590px}.role-line>button{color:var(--blue)}.story-band{padding:50px 0;margin:80px auto 0;background:#f3edfc;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;max-width:1264px;border-radius:24px}.story-band>div:first-child{padding-left:55px}.story-band h2{font:700 30px/1.5 CookieRun,sans-serif}.story-band p{font-size:16px;color:#655677;line-height:1.9;margin:18px 0}.story-band .book-spread{width:100%;margin:0;transform:rotate(-3deg)}.story-band .book-art>.kebi{width:83%;height:83%}.story-band .book-text p{font-size:16px}.plans-section,.faq-section,.contact-section{max-width:1264px;margin:90px auto}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid var(--line)}.plan{padding:30px 0}.plan h3{font-size:17px}.plan>.price{font-size:30px;letter-spacing:-.025em;font-weight:800;margin:18px 0 7px}.plan>.price>small{font-size:14px;font-weight:400;margin-left:6px}.plan>p{font-size:14px;line-height:1.9;color:#626979}.plan ul{padding-left:17px;margin:24px 0;line-height:2.3;font-size:14px;color:#515a6b}.faq-section{display:grid;grid-template-columns:1fr 1.6fr;gap:70px}.faq-section h2{font:700 30px/1.5 CookieRun,sans-serif}.faq-list details{border-bottom:1px solid var(--line);padding:20px 0}.faq-list summary{font-size:16px;font-weight:700;cursor:pointer;line-height:1.7}.faq-list details p{font-size:14px;line-height:1.9;color:#626979;padding:15px 0 4px}.contact-section{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:55px;gap:30px}.contact-section h2{font:700 30px/1.5 CookieRun,sans-serif}.contact-section p{font-size:15px;color:#626979;margin-top:15px;line-height:1.9}.contact-section>a{font-size:16px;color:var(--purple);border-bottom:1px solid #b599d2;padding-bottom:7px}.site-footer{border-top:1px solid var(--line);max-width:1264px;margin:auto;padding:30px 0;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#697080}.site-footer img{width:92px}.site-footer>div{display:flex;gap:20px}
body[data-layout=B] .intro{padding:38px 0 28px;align-items:center}body[data-layout=B] .intro h1{font-size:38px;line-height:1.4}body[data-layout=B] .intro h1 br{display:none}body[data-layout=B] .intro p{font-size:15px;max-width:415px}body[data-layout=B] .intro-actions{margin-top:14px}body[data-layout=B] .experience{display:grid;grid-template-columns:185px minmax(0,1fr);gap:25px;padding-top:10px}body[data-layout=B] .scene-navigation{flex-direction:column;padding:0;gap:6px}body[data-layout=B] .scene-link{border-radius:11px;padding:14px 12px;justify-content:flex-start;font-size:14px}body[data-layout=B] .scene-link[aria-pressed=true]{background:#e9e1f7;color:#5f2698}body[data-layout=B] .experience-grid{display:block}body[data-layout=B] .chapters{display:none}body[data-layout=B] .stage-column{position:static}body[data-layout=B] .app-stage{height:510px}body[data-layout=B] .active-copy{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:35px;padding:25px 0 15px}body[data-layout=B] .active-copy h2{font-size:22px}body[data-layout=B] .active-copy p{font-size:14px;margin:0;line-height:1.9}body[data-layout=B] .audience-section{margin-top:70px}
.sr-only:focus{position:fixed;z-index:10;left:12px;top:12px;width:auto;height:auto;clip:auto;padding:12px;background:#fff;color:var(--purple);border-radius:8px}
@keyframes scene-reveal{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes draw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
@media(min-width:1550px){.chapter{min-height:670px}.app-stage{height:515px}}
@media(max-width:1359px){.intro,.audience-section,.story-band,.plans-section,.faq-section,.contact-section,.site-footer{margin-left:40px;margin-right:40px}.site-header{padding:0 40px}.experience{padding:0 40px}.experience-grid{grid-template-columns:235px minmax(0,1fr);gap:28px}.chapter h2{font-size:24px}.scene-link{padding:11px 13px;font-size:14px}.app-stage{height:475px}.admin-app{grid-template-columns:120px minmax(0,1fr)}.admin-main{padding:16px}.classroom-tile{padding:13px}.admin-side{font-size:12px}.setup-body{padding:22px}.setup-content{gap:15px}.setup-mascot{width:100px}.setup-mascot>.kebi{width:90px}.setup-content h4{font-size:18px}.book-text>p{font-size:15px}}
@media(max-width:1100px){.experience-grid{grid-template-columns:210px minmax(0,1fr);gap:20px}.chapter h2{font-size:23px}.chapter p{font-size:14px}.admin-app{grid-template-columns:100px minmax(0,1fr)}.admin-side{padding:0 6px}.side-heading{font-size:12px;gap:6px}.side-heading .ico{width:16px}.classrooms{gap:8px}.classroom-tile>strong{font-size:14px}.class-stats{gap:6px;font-size:12px}.app-tabs{gap:12px}.desktop-only{display:none}.atelier-app{grid-template-columns:111px minmax(0,1fr)}.atelier-main{padding:16px}.side-action{padding:10px 5px;font-size:12px;gap:5px}.app-top>span{font-size:12px}.quiz-content h3{font-size:20px}.quiz-answers{gap:8px}.answer{padding:10px;gap:7px;font-size:15px}.activities{gap:8px}.donghwa-home{padding:25px 20px}.activity-card{padding:10px}.activity-card>strong{font-size:13px}.activity-card>span{font-size:12px}.creation-steps{gap:15px;font-size:12px}.setup-mascot{display:none}.book-toolbar{gap:8px;padding:13px}.book-toolbar>span{font-size:12px}.character-preview{width:100px;height:120px}.character-preview .kebi{width:90px}.book-status{font-size:12px}.book-text>p{font-size:14px}.student-list>div{gap:8px;padding:10px}.student-list .primary{font-size:12px;padding:7px}.book-list-title{display:none}}
@media(max-width:900px){.site-header{padding:0 24px;height:65px}.site-header nav{gap:18px}.site-header nav a:nth-child(2),.site-header nav a:nth-child(3){display:none}.intro,.audience-section,.story-band,.plans-section,.faq-section,.contact-section,.site-footer{margin-left:24px;margin-right:24px}.intro{display:block;padding:35px 0 22px}.intro h1{font-size:40px}.intro>div:last-child{margin-top:20px}.intro p{font-size:16px;max-width:600px}.experience{padding:0 24px}.scene-navigation{gap:5px;padding:8px 0 16px}.scene-link{font-size:13px;padding:10px 12px}.experience-grid{display:block}.chapters{display:none}.stage-column{position:static}.app-stage{height:500px}.active-copy{display:block;margin:23px 0}.active-copy h2{font-size:25px}.active-copy h2 br{display:none}.active-copy p{font-size:15px;margin-top:10px}.screen-guide{gap:14px;min-height:67px}.screen-guide p{font-size:13px}.screen-guide button{font-size:13px}.screen-chrome{font-size:12px}.chapter>.kebi{display:none}.admin-app{grid-template-columns:130px minmax(0,1fr)}.atelier-app{grid-template-columns:130px minmax(0,1fr)}.book-text>p{font-size:16px}.section-heading{display:block}.section-heading>p{max-width:100%;margin-top:16px}.role-line{grid-template-columns:140px 1fr}.role-line>button{grid-column:2;justify-self:start}.role-line p{font-size:14px}.story-band{grid-template-columns:1fr 1fr;gap:0}.story-band>div:first-child{padding-left:28px}.story-band h2{font-size:24px}.story-band p{font-size:14px;padding-right:15px}.story-band .book-text p{font-size:12px}.plans{gap:20px}.plan>.price{font-size:23px}.faq-section{gap:30px}.section-heading h2,.faq-section h2,.contact-section h2{font-size:27px}body[data-layout=B] .intro{display:block;padding-top:30px}body[data-layout=B] .intro h1{font-size:32px}body[data-layout=B] .intro p{max-width:580px}body[data-layout=B] .experience{display:block;padding:0 24px}body[data-layout=B] .scene-navigation{flex-direction:row;padding-bottom:16px}body[data-layout=B] .scene-link{font-size:13px;padding:11px 12px}body[data-layout=B] .active-copy{display:block}body[data-layout=B] .active-copy p{margin-top:10px}body[data-layout=B] .app-stage{height:500px}}
@media(max-width:600px){.site-header{padding:0 18px;height:60px}.brand{width:106px}.site-header nav{gap:12px}.site-header nav a{font-size:12px}.site-header .login{padding:9px 11px}.intro,.audience-section,.story-band,.plans-section,.faq-section,.contact-section,.site-footer{margin-left:18px;margin-right:18px}.intro{padding:28px 0 20px}.intro h1{font-size:34px;line-height:1.4}.intro p{font-size:14px;line-height:1.9}.intro-actions .primary{font-size:14px;min-height:42px;padding:10px 18px}.intro-actions a{font-size:14px}.experience,body[data-layout=B] .experience{padding:0 12px}.scene-navigation{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.scene-link{font-size:12px;justify-content:center;gap:5px;padding:10px 5px}.scene-link .ico{width:15px;height:15px}.screen-frame{border-radius:13px}.screen-chrome{padding:0 10px;height:35px;gap:8px}.screen-chrome>span:last-child{font-size:12px}.app-stage,body[data-layout=B] .app-stage{height:485px}.screen-guide p{font-size:12px;line-height:1.7}.screen-guide button{min-width:75px;padding:7px 9px}.screen-guide{gap:10px;padding:12px 4px}.screen-guide p:before{display:none}.tour-legend{font-size:12px;padding:0 5px}.sample-note{font-size:12px;margin:12px 5px 0}.demo-status{font-size:12px;margin:8px 5px}.active-copy{padding:0 6px}.active-copy h2{font-size:22px}.active-copy h2 br{display:block}.active-copy p{font-size:14px;line-height:1.9}.admin-app{grid-template-columns:43px minmax(0,1fr)}.admin-side{padding:0 8px}.admin-side>span,.admin-side>small,.side-heading>b,.side-bottom>span{display:none}.side-heading{justify-content:center;height:46px}.admin-side .side-bottom{padding:12px 0}.admin-main{padding:14px 12px}.app-top{margin-bottom:15px}.app-top>span{max-width:140px;font-size:12px}.app-top img{width:77px;height:27px}.sample-types{gap:3px;margin-bottom:17px}.sample-types .chip{padding:6px 7px;font-size:12px;min-height:30px}.admin-main h3{font-size:19px}.app-tabs{gap:13px;margin:15px 0}.app-tabs>span,.app-tabs>button{font-size:12px}.classrooms{grid-template-columns:1fr;gap:10px;margin-top:14px}.classroom-tile{display:grid;grid-template-columns:29px 1fr;gap:6px 10px;padding:12px}.class-icon{width:28px;height:28px;grid-row:1/3}.classroom-tile>strong{font-size:14px}.classroom-tile>span{font-size:12px}.class-stats{grid-column:2;font-size:12px}.class-open{grid-column:1/-1;margin-top:5px;padding-top:6px}.class-open .ico{width:13px;height:13px}.student-list{margin:13px 0}.student-list>div{padding:10px 8px;gap:7px;min-height:62px;font-size:12px}.student-list .kebi{width:24px;height:24px}.student-list>div>.online{font-size:12px}.student-list>div>button:last-child{font-size:12px}.student-list .primary .ico{display:none}.admin-main>.primary{font-size:12px}.inline-tip{font-size:12px}.read-note{gap:8px;padding:11px}.read-note .ico{width:16px}.read-note p{font-size:12px}.atelier-app{grid-template-columns:43px minmax(0,1fr)}.atelier-side{padding:12px 5px;align-items:center;gap:12px}.atelier-side>div:first-child{padding:0}.student-identity{padding:7px 0}.student-identity .kebi{width:27px}.student-identity strong,.side-action>span,.atelier-side .side-bottom{display:none}.side-action{padding:9px 7px}.side-action .ico{width:17px;height:17px}.atelier-main{padding:15px 12px;gap:14px}.chat-welcome h3{font-size:17px}.chat-welcome p{font-size:12px}.chat-welcome>.kebi{width:70px}.suggestion{font-size:12px;padding:9px}.composer{gap:4px;border-radius:16px;padding:6px;min-height:48px}.composer input{font-size:12px}.composer>span .ico{width:16px}.composer button{width:28px;height:28px}.chat-thread{gap:20px;padding-top:12px}.bot-message{font-size:12px;gap:7px}.bot-message>.kebi{width:22px;height:22px}.user-message{font-size:12px}.moon-row{gap:17px}.moon-row>span{font-size:12px}.moon{width:22px;height:22px}.drawing-tools{gap:5px}.drawing-tools h3{font-size:15px}.color-button{padding:3px}.color-button i{width:16px;height:16px}.drawing-actions .primary,.drawing-actions .quiet{font-size:12px;min-height:34px}.vibe-request{gap:8px}.vibe-request>.kebi{width:27px}.vibe-request h3{font-size:16px}.vibe-request p{font-size:12px}.code-example code{font-size:12px;padding:15px 9px;line-height:2.1;white-space:nowrap}.lesson-app,.donghwa-activity{padding:13px;gap:13px}.lesson-top{font-size:12px;gap:6px}.lesson-top .quiet{font-size:12px;padding:6px 8px}.lesson-top .ico{width:16px}.lesson-paper{padding:20px 15px;border-radius:14px}.quiz-content h3,.board-head h3{font-size:20px;line-height:1.6}.quiz-answers{flex-direction:column;gap:10px;margin:20px 0}.answer{min-height:48px;padding:10px 14px;font-size:15px}.answer-feedback{font-size:12px;line-height:1.8}.workbar{font-size:12px}.workbar .ico{width:15px}.board-compose{flex-direction:column}.postit{font-size:12px;padding:10px;min-height:75px}.board-head p{font-size:12px}.postits{gap:8px;margin:12px 0}.board-compose .primary{min-height:32px;font-size:12px}.donghwa-home{padding:23px 18px}.donghwa-home h3{font-size:21px}.donghwa-home header p{font-size:12px}.donghwa-home header>span{font-size:12px;gap:4px}.donghwa-home header .kebi{width:25px}.donghwa-home h3>.ico{width:21px}.donghwa-tools{margin:19px 0}.donghwa-tools .purple-button{font-size:13px;min-height:36px}.activities{grid-template-columns:1fr 1fr;gap:10px}.activity-card{padding:10px;gap:7px}.activity-card>strong{font-size:13px;min-height:34px}.activity-card>span{font-size:12px}.activity-cover{aspect-ratio:1.6}.activity-cover>.ico{width:17px}.activity-card:nth-child(3){display:none}.donghwa-home .inline-tip{font-size:12px;margin-top:23px}.donghwa-activity .quiz-content{padding:23px 17px}.book-setup>header{padding:16px;align-items:start}.book-setup>header h3{font-size:16px}.book-setup>header>span{font-size:12px;max-width:90px;line-height:1.7}.setup-body{padding:22px 18px}.creation-steps{gap:12px;margin-bottom:26px;font-size:12px;flex-wrap:wrap}.creation-steps li{gap:5px}.creation-steps b{width:20px;height:20px;font-size:12px}.setup-content{min-height:265px}.setup-content h4{font-size:18px;margin-bottom:20px}.setup-content label{font-size:12px}.setup-content input,.setup-content textarea,.setup-content select{font-size:16px;padding:9px 10px}.setup-content p{font-size:12px}.setup-actions .purple-button,.setup-actions .quiet{font-size:12px;min-height:35px}.character-row{gap:13px}.character-preview{width:92px;height:125px}.character-preview .kebi{width:82px}.character-row>div:last-child{min-width:0}.character-row b{font-size:14px}.character-row p{font-size:12px}.character-row .purple-button,.character-row .quiet{white-space:normal;font-size:12px;padding:8px}.book-toolbar{padding:13px 12px;gap:8px}.book-toolbar>strong{font-size:14px}.book-toolbar>span{order:3;flex-basis:100%;font-size:13px;margin-top:4px}.book-toolbar .quiet,.book-toolbar .purple-button{font-size:12px;min-height:31px;padding:6px 8px}.book-toolbar .ico{width:16px}.book-toolbar>.quiet:first-of-type{margin-left:auto}.book-status{font-size:12px;line-height:1.8;padding:12px 10px 4px}.book-spread{background:none;width:calc(100% - 32px);aspect-ratio:auto;display:grid;grid-template-columns:1fr;gap:13px;margin:8px 16px}.book-art{position:static;width:100%;height:147px;border-bottom:1px solid #e7def0;padding-bottom:9px}.book-art>.kebi{width:140px;height:140px}.book-text{position:static;width:100%;height:115px;align-items:start;padding:0 5px}.book-text>p{font-size:14px;line-height:1.85}.book-navigation{margin-top:14px;gap:16px;font-size:12px}.book-navigation .quiet{min-height:33px;min-width:34px;padding:6px}.book-navigation .purple-button{font-size:12px;min-height:33px}.pdf-preview{padding:12px 17px}.pdf-preview>div:first-child{font-size:12px}.pdf-sheet{height:235px;padding:17px;gap:15px}.pdf-sheet>p{font-size:12px;line-height:1.85}.pdf-preview>p{font-size:12px;line-height:1.8}.audience-section{margin-top:48px;margin-bottom:55px;padding-top:35px}.section-heading{margin-bottom:25px}.section-heading h2,.faq-section h2,.contact-section h2{font-size:24px}.section-heading>p{font-size:14px;line-height:1.9;margin-top:12px}.role-line{grid-template-columns:1fr;gap:12px;padding:24px 0}.role-line h3{font-size:17px}.role-line p{font-size:14px}.role-line>button{grid-column:1;margin:0;padding:0;font-size:13px;min-height:30px}.story-band{display:flex;flex-direction:column;gap:22px;padding:30px 24px;margin-top:45px;border-radius:18px}.story-band>div:first-child{padding:0}.story-band h2{font-size:24px}.story-band p{font-size:14px}.story-band>div:last-child{width:100%}.story-band .book-spread{background:url('experience/open-book.png') center/contain no-repeat;aspect-ratio:1672/941;display:block;width:100%;transform:rotate(-3deg);margin:0}.story-band .book-art{position:absolute;top:15%;left:9%;width:38%;height:65%;border:0}.story-band .book-text{position:absolute;top:16%;left:54%;width:35%;height:62%;align-items:center;padding:0}.story-band .book-text p{font-size:12px;line-height:1.8}.plans-section{margin-top:55px;margin-bottom:55px}.plans{grid-template-columns:1fr;gap:0}.plan{display:grid;grid-template-columns:1fr 1fr;column-gap:15px;border-bottom:1px solid var(--line);padding:25px 0}.plan h3{font-size:16px}.plan>.price{grid-column:2;grid-row:1/3;align-self:center;margin:0;font-size:24px}.plan>p{font-size:13px;margin-top:6px}.plan>ul{grid-column:1/-1;margin:15px 0;display:flex;flex-wrap:wrap;gap:0 26px;font-size:13px}.plan>a{justify-self:start;font-size:13px;min-height:35px}.faq-section{display:block;margin-top:60px;margin-bottom:60px}.faq-list{margin-top:22px}.faq-list summary{font-size:15px}.faq-list details p{font-size:13px}.contact-section{display:block;margin-top:55px;margin-bottom:55px;padding-top:35px}.contact-section p{font-size:14px}.contact-section>a{display:inline-block;font-size:16px;margin-top:25px}.site-footer{flex-wrap:wrap;gap:22px;padding:28px 0;font-size:12px}.site-footer>span{flex-basis:100%}.site-footer>div{margin-left:auto;gap:12px}body[data-layout=B] .intro h1{font-size:28px}body[data-layout=B] .intro h1 br{display:block}body[data-layout=B] .intro p{font-size:14px}body[data-layout=B] .intro{padding-top:26px}body[data-layout=B] .scene-navigation{display:grid}body[data-layout=B] .scene-link{justify-content:center;font-size:12px;padding:10px 5px}body[data-layout=B] .active-copy{padding:0 6px}body[data-layout=B] .active-copy h2{font-size:22px}body[data-layout=B] .active-copy p{font-size:14px}body[data-layout=B] .audience-section{margin-top:45px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Existing pricing cards and footer retained for the approved design. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 56px;
}
.pricing-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 38px 32px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.pricing-card.featured {
  background: var(--ink);
  color: var(--surface);
  border: 1px solid var(--ink);
  box-shadow: 0 12px 32px rgba(26, 26, 46, 0.3);
}
.pricing-card.featured::before {
  content: "추천";
  position: absolute;
  top: -14px;
  left: 24px;
  background: var(--yellow);
  color: var(--ink);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.price-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}
.price-tag-line {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 28px;
}
.pricing-card.featured .price-tag-line {
  color: rgba(255, 255, 255, 0.7);
}
.price {
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: 6px;
}
.price-period {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 28px;
}
.pricing-card.featured .price-period {
  color: rgba(255, 255, 255, 0.7);
}
.price-features {
  list-style: none;
  margin-bottom: 28px;
  flex-grow: 1;
}
.price-features li {
  font-size: 14.5px;
  line-height: 1.6;
  padding: 10px 0;
  display: flex;
  align-items: start;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.pricing-card.featured .price-features li {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.price-features li::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
  margin-top: 1px;
}
.pricing-card.featured .price-features li::before {
  color: var(--yellow);
}
.price-cta {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 12px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: all 0.18s;
}
.price-cta:hover {
  background: var(--ink);
  color: var(--surface);
}
.pricing-card.featured .price-cta {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.pricing-card.featured .price-cta:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}

/* 인당 요금제 옵션 — 위 ✓ 체크 리스트와 동일한 시각 언어, 토글로 펼침 */




.price-options-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
  padding-left: 4px;
}
.price-options-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.price-options-list li {
  font-size: 14.5px;
  line-height: 1.6;
  padding: 12px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.price-options-list li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.price-options-list li::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--yellow);
  font-size: 16px;
  font-weight: 700;
  margin-top: 1px;
}
.price-option-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.price-option-body strong {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #fff;
}
.price-option-sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
}
.price-option-meta {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}
.price-option-meta b {
  color: var(--yellow);
  font-weight: 700;
}
.price-options-cta {
  display: block;
  margin-top: 18px;
}

.legacy-footer {
  padding: 56px 0 36px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: start;
  gap: 36px 48px;
  margin-bottom: 36px;
}
.footer-logo-img {
  height: 44px;
  width: auto;
  margin-bottom: 14px;
}
.footer-tagline {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 280px;
}
.footer-col h5 {
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 14px;
}
.footer-col ul {
  list-style: none;
}
.footer-col li {
  margin-bottom: 10px;
}
.footer-col a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.18s;
}
.footer-col a:hover {
  color: var(--red);
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-bottom .heart {
  color: var(--red);
  font-weight: 600;
}


.pricing-grid{align-items:start;margin-top:40px}
.pricing-card{padding:32px 26px;border-radius:16px;box-shadow:none;min-width:0}
.pricing-card.featured{box-shadow:none}
.pricing-card .price{font-size:36px;line-height:1.2}
.price-features{padding:0;margin:0 0 26px}
.price-options{margin:0}
.price-options>summary{list-style:none;cursor:pointer}
.price-options>summary::-webkit-details-marker{display:none}
.price-options[open]>summary{margin-bottom:20px}
.price-options-body{padding-top:6px}
.price-options-label{letter-spacing:0;color:#d9d6e4}
.pricing-card.featured .price-cta{background:#c83f43;border-color:#c83f43}
.price-features li::before{color:#147c59}
.pricing-card.featured .price-features li::before{color:var(--yellow)}
.contact-section>a.contact-cta{display:inline-flex;align-items:center;gap:18px;flex-shrink:0;background:#c83f43;color:white;border:0;border-radius:999px;padding:17px 28px;font-weight:700;font-size:16px;box-shadow:0 8px 24px -12px #c83f4370;transition:background .18s}
.contact-section>a.contact-cta:hover{background:#ae3439}
.legacy-footer .container{max-width:1264px;margin:auto;padding:0}
.legacy-footer h5{margin-top:0}
.legacy-footer ul{padding:0;margin-top:0}
.legacy-footer .footer-col a{color:#505565}
.intro-actions{flex-wrap:wrap}
@media(min-width:901px){.app-stage{height:clamp(330px,calc(100svh - 285px),490px)}}
@media(max-width:1359px){.legacy-footer .container{margin:0 40px}}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;gap:30px}.pricing-card{padding:30px}.legacy-footer .container{margin:0 24px}.contact-section{flex-wrap:wrap}.site-header nav a#cta-logout{font-size:13px}}
@media(max-width:600px){.legacy-footer .container{margin:0 18px}.footer-inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px}.footer-inner>div:first-child{grid-column:1/-1}.footer-col h5,.footer-col a{font-size:14px}.pricing-card .price{font-size:32px}.contact-section>a.contact-cta{padding:15px 21px;font-size:16px;gap:10px}.intro h1{font-size:32px}.site-header nav a:first-child{display:none}}
@media(max-height:650px) and (min-width:901px){.experience-grid{display:block}.chapters{display:none}.stage-column{position:static}.active-copy{display:block;margin-top:20px}.app-stage{height:440px}}

/* Readable text at the page's real display size, including compact service previews. */
.intro p,.chapter p,.active-copy p,.section-heading>p,.role-line p,
.story-band>div:first-child>p,.faq-list details p,.contact-section p {
  font-size:16px;
  line-height:1.85;
  color:#50586a;
}
.intro p {font-size:17px}
.intro-actions a,.intro-actions .primary,.site-header nav a,
.text-button,.role-line>button,.story-band .purple-button {font-size:14px}
.faq-list summary {font-size:16px;line-height:1.7}
.chapter li,.screen-guide p,.screen-guide button,.scene-link {font-size:14px;line-height:1.6}
.tour-legend,.sample-note,.demo-status {font-size:13px;line-height:1.75}
.sample-note {color:#5e596a}
.screen-guide {align-items:flex-start;min-height:76px;padding-top:16px}
.screen-guide button {flex-shrink:0}
.tour-legend {gap:16px}
#journey-count {white-space:nowrap}
.app-stage {line-height:1.5}
.admin-app {grid-template-columns:154px minmax(0,1fr)}
.side-heading {white-space:normal;line-height:1.4;min-height:56px;height:auto;padding:14px 0}
.admin-side,.side-action,.app-tabs>button,.app-tabs>span,
.sample-types .chip,.book-toolbar,.book-toolbar .quiet,.book-toolbar .purple-button,
.book-navigation,.book-navigation .purple-button,.drawing-actions button,
.setup-actions button,.character-row .purple-button,.character-row .quiet {font-size:13px}
.classroom-tile>strong,.activity-card>strong {font-size:15px}
.chat-welcome p,.bot-message,.user-message,.vibe-request p,.postit,
.answer-feedback,.inline-tip,.read-note p,.setup-content p,
.setup-content label,.character-row p,.book-status,.pdf-preview>p {font-size:14px;line-height:1.75}
.composer input,.board-compose input,.setup-content input,
.setup-content textarea,.setup-content select {font-size:16px;line-height:1.5}
.composer {flex-shrink:0}
.composer button {width:34px;height:34px;flex-shrink:0}
.suggestion {font-size:14px;white-space:normal;line-height:1.6}
.code-example code {font-size:14px;white-space:normal;overflow-wrap:anywhere;line-height:1.8}
.code-example,.game-window {min-width:0}
.game-window>div {gap:12px;flex-wrap:wrap}
.book-text>p,.pdf-sheet>p {font-size:16px;line-height:1.85}
.book-text {align-items:flex-start}
.book-toolbar>strong,.book-toolbar>span {overflow-wrap:anywhere}
.book-navigation {gap:12px;flex-wrap:wrap}
.pdf-sheet {height:auto;min-height:260px}
.price-features li {font-size:16px}
.price-tag-line,.price-period {font-size:14px}
.legacy-footer .footer-col a,.legacy-footer .footer-col h5 {font-size:14px}
@media(max-width:1100px) and (min-width:601px) {
  .admin-app {grid-template-columns:128px minmax(0,1fr)}
  .classrooms {grid-template-columns:1fr}
  .app-top {align-items:flex-start}
  .creation-steps {flex-wrap:wrap;gap:12px}
}
@media(max-width:600px) {
  .intro p {font-size:16px}
  .scene-link {font-size:13px;gap:5px;padding:10px 6px;white-space:normal}
  .scene-link .ico {width:16px;height:16px}
  .screen-chrome {height:auto;min-height:44px;flex-wrap:wrap;gap:5px 8px;padding:8px 10px}
  .screen-chrome>span:last-child {font-size:12px}
  .app-stage,body[data-layout=B] .app-stage {height:560px}
  .admin-app {grid-template-columns:43px minmax(0,1fr)}
  .sample-types .chip {white-space:normal}
  .student-list>div {flex-wrap:wrap;gap:7px}
  .student-list>div>button:last-child {font-size:13px}
  .app-tabs {gap:14px}
  .app-top>span {max-width:130px;font-size:12px}
  .lesson-top {flex-wrap:wrap}
  .quiz-content h3,.board-head h3 {font-size:20px}
  .workbar {gap:8px;flex-wrap:wrap}
  .activity-card>strong {font-size:14px;min-height:44px}
  .donghwa-home header {gap:10px;align-items:flex-start}
  .donghwa-home header>span {flex-shrink:0}
  .donghwa-home header p {font-size:14px;line-height:1.6}
  .donghwa-tools .purple-button {font-size:14px}
  .book-setup>header {flex-wrap:wrap}
  .book-setup>header>span {max-width:none}
  .setup-body {padding:20px 16px}
  .creation-steps {gap:10px;font-size:12px}
  .setup-content {min-height:265px}
  .book-text {height:auto;min-height:115px;padding-bottom:8px}
  .book-text>p {font-size:16px}
  .character-row {flex-wrap:wrap}
  .character-row>div:last-child {flex:1;min-width:110px}
  .pdf-sheet {flex-direction:column;gap:16px;padding:18px}
  .pdf-sheet>.kebi {width:100px}
  .story-band .book-text p {font-size:12px}
  .story-band .book-text {height:62%;min-height:0;padding:0;align-items:center}
}

/* Native page scrolling advances the same sample screens as the buttons. */
.scroll-tour {overflow-anchor:none}
.scroll-tour .tour-pin {position:sticky;top:0;height:100svh;padding:24px 0 18px;display:flex;flex-direction:column}
.scroll-tour .intro {flex:none;width:calc(100% - 96px);max-width:1264px;margin:0 auto;padding:0 0 18px;gap:36px}
.scroll-tour .intro h1 {line-height:1.25}
.scroll-tour .intro-actions {margin-top:14px}
.scroll-tour .experience {flex:1;min-height:0;width:100%;display:flex;flex-direction:column}
.scroll-tour .scene-navigation {flex:none}
.scroll-tour .experience-grid {flex:1;min-height:0;align-items:stretch}
.scroll-tour .stage-column,.scroll-tour .chapters {position:static;min-height:0}
.scroll-tour .stage-column {display:flex;flex-direction:column;height:100%}
.scroll-tour .screen-frame {flex:1;min-height:0;display:flex;flex-direction:column}
.scroll-tour .screen-chrome {flex-shrink:0}
.scroll-tour .app-stage {flex:1;min-height:0;height:auto}
.scroll-tour .screen-guide {flex:none;min-height:0;padding:12px 0}
.scroll-tour .progress-line,.scroll-tour .tour-legend,.scroll-tour .demo-status {flex:none}
.scroll-tour .demo-status:empty {min-height:0;margin:0}
.scroll-tour .chapter {min-height:0;padding-top:0}
.chapter-copy {padding:12px 0}
.chapter-copy p {margin-top:16px;line-height:1.7}
.chapter-copy ol {margin:16px 0 12px}
.chapter-copy li {margin:2px 0}
.chapter-copy li button {border:0;background:none;padding:3px 0;text-align:left;font:inherit;color:inherit}
.chapter-copy li:has([aria-current=step]) {color:var(--purple)}
.chapter-copy li:has([aria-current=step]):before {background:var(--purple);border-color:var(--purple);color:#fff}
.chapter-copy>.kebi {width:86px;margin-top:20px}
.chapter-copy:has(li:nth-child(5))>.kebi {display:none}
.experience>.sample-note {margin-top:24px}
@media(max-width:1359px) {.scroll-tour .intro {width:calc(100% - 80px)}}
@media(max-width:900px) {
  .scroll-tour .tour-pin {padding:18px 0 14px}
  .scroll-tour .intro {display:flex;align-items:center;gap:24px;width:calc(100% - 48px)}
  .scroll-tour .intro>div {flex:1}
  .scroll-tour .intro>div:last-child {margin:0}
  .scroll-tour .intro h1 {font-size:clamp(30px,4vw,40px)}
}
@media(max-height:850px) and (min-width:901px) {
  .scroll-tour .tour-pin {padding-top:16px}
  .scroll-tour .intro {padding-bottom:8px}
  .scroll-tour .intro h1 {font-size:40px}
  .chapter-copy h2 {font-size:22px;line-height:1.4}
  .chapter-copy p {font-size:15px;margin-top:12px;line-height:1.65}
  .chapter-copy ol {margin:12px 0 8px}
  .chapter-copy li button {padding:2px 0}
  .chapter-copy>.text-button {display:none}
}
@media(max-width:600px) {
  .scroll-tour .tour-pin {padding:12px 0}
  .scroll-tour .intro {display:grid;grid-template-columns:1fr auto;gap:10px;width:calc(100% - 36px);padding-bottom:12px}
  .scroll-tour .intro h1 {font-size:clamp(22px,6vw,28px);line-height:1.3}
  .scroll-tour .intro>div:last-child {display:contents}
  .scroll-tour .intro p {grid-row:2;grid-column:1/-1;font-size:14px;line-height:1.6}
  .scroll-tour .intro-actions {grid-row:1;grid-column:2;margin:0}
  .scroll-tour .intro-actions .primary {display:none}
  .scroll-tour #cta-hero {display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;background:white}
  .scroll-tour .scene-navigation {padding:0 0 10px}
  .scroll-tour .screen-guide {padding:10px 0}
  .scroll-tour .tour-legend {margin-top:8px}
}
@media(max-width:600px) and (max-height:700px) {.scroll-tour .intro p {display:none}}
@media(max-height:800px) {.chapter-copy>.kebi {display:none}}

/* Each service screen shares the available window space, without nested scrolling. */
.scroll-tour .screen-chrome {height:32px;min-height:32px;padding:4px 12px;flex-wrap:nowrap}
.scroll-tour .app-stage {container-type:size;overflow:visible}
.app-stage :is(.admin-app,.atelier-app,.admin-main,.atelier-main,.book-setup,.book-workspace) {min-height:0}
.app-stage :is(.admin-main,.atelier-main,.book-setup,.book-workspace,.donghwa-home) {display:flex;flex-direction:column;height:100%}
.app-stage :is(.admin-main,.atelier-main,.donghwa-home) {padding:clamp(8px,3cqh,20px) clamp(10px,2cqw,24px);gap:clamp(4px,1.5cqh,12px)}
.app-stage :is(.app-top,.sample-types,.app-tabs,.classrooms,.student-list,.inline-tip,.donghwa-tools,.creation-steps,.vibe-request,.code-example) {margin:0}
.app-stage .app-top {flex:none;align-items:center}
.app-stage .app-top img {height:min(30px,8cqh);width:78px}
.app-stage .app-tabs {overflow:visible;flex-wrap:wrap;gap:4px 12px;flex:none}
.app-stage .app-tabs> :is(span,button) {padding:6px 0}
.app-stage .sample-types {gap:4px;flex:none}
.app-stage .sample-types .chip {padding:5px 7px;min-height:30px}
.app-stage .admin-main h3 {font-size:20px}
.app-stage .app-muted {margin:0;line-height:1.5}
.app-stage .admin-side>small {margin:clamp(2px,1cqh,10px) 8px 4px}
.app-stage .admin-side>span {padding:clamp(3px,1.5cqh,9px) 8px}
.app-stage .side-heading {min-height:0;padding:clamp(8px,3cqh,16px) 0}
.app-stage .side-bottom {padding:8px 2px}
.app-stage .classrooms {flex:1;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
.app-stage .classroom-tile {padding:clamp(8px,2cqh,16px);gap:clamp(4px,1cqh,8px);justify-content:center;min-width:0;min-height:0}
.app-stage .class-open {padding-top:6px}
.app-stage .student-list {flex:1;min-height:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr))}
.app-stage .student-list>div {min-height:0;padding:clamp(4px,1.5cqh,10px) 8px;flex-wrap:nowrap}
.app-stage :is(.inline-tip,.read-note p) {font-size:13px;line-height:1.5}
.app-stage .read-note {padding:8px;gap:8px;flex:none}
.app-stage :is(.lesson-app,.donghwa-activity) {padding:clamp(8px,2cqh,18px);gap:clamp(5px,1.5cqh,12px);min-height:0}
.app-stage .lesson-paper {overflow:visible;display:flex;flex-direction:column;justify-content:center;padding:clamp(8px,3cqh,20px)}
.app-stage :is(.lesson-ready,.chat-welcome) {gap:clamp(4px,2cqh,12px);min-height:0}
.app-stage .quiz-content h3,.app-stage .board-head h3 {font-size:clamp(17px,5cqh,24px);line-height:1.4}
.app-stage .quiz-answers {flex-direction:row;gap:6px;margin:clamp(8px,3cqh,20px) 0}
.app-stage .answer {min-height:44px;font-size:14px;line-height:1.5;white-space:normal;padding:8px;gap:6px;min-width:0}
.app-stage .answer-feedback {padding:8px;font-size:13px;line-height:1.5}
.app-stage .postits {gap:6px;margin:8px 0}
.app-stage .postit {min-height:0;padding:8px;font-size:13px;line-height:1.5}
.app-stage .postit small {margin-bottom:4px}
.app-stage .board-compose {flex-direction:row}
.app-stage .board-compose .primary {min-height:34px;padding:6px 8px;font-size:13px}
.app-stage .donghwa-activity .quiz-content {flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(10px,3cqh,24px)}
.app-stage .atelier-side {min-height:0;gap:clamp(3px,1cqh,7px);padding-top:8px;padding-bottom:8px}
.app-stage .student-identity {padding:6px}
.app-stage .side-action {padding:8px 6px;min-width:0}
.app-stage .side-action>span {min-width:0;overflow-wrap:anywhere}
.app-stage .chat-thread {overflow:visible;padding-top:0;gap:clamp(8px,3cqh,18px)}
.app-stage .chat-welcome>.kebi {width:min(76px,18cqh)}
.app-stage :is(.chat-welcome p,.bot-message,.user-message) {font-size:14px;line-height:1.6}
.app-stage .user-message p {padding:6px 10px}
.app-stage .moon-row {margin-top:10px;gap:18px}
.app-stage .moon-row>span {gap:4px}
.app-stage .composer {min-height:44px;padding:5px;gap:6px}
.app-stage .drawing-canvas svg {flex:1;height:0;min-height:0}
.app-stage .drawing-canvas span {flex:none;margin:6px}
.app-stage .drawing-actions {flex:none}
.app-stage .vibe-request {flex:none}
.app-stage .code-example {flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.app-stage .code-example>span {padding:5px 10px}
.app-stage .code-example code {padding:8px 12px;line-height:1.6}
.app-stage .game-window>div {padding:8px}
.app-stage .game-window>p {margin-bottom:8px}
.app-stage .donghwa-home {max-width:none}
.app-stage .donghwa-home>header {flex:none}
.app-stage .donghwa-tools {flex:none}
.app-stage .activities {flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}
.app-stage .activity-card {min-width:0;min-height:0;gap:6px}
.app-stage .activity-card:nth-child(3) {display:flex}
.app-stage .activity-card>strong {min-height:0}
.app-stage .activity-cover {flex:1;min-height:0;aspect-ratio:auto}
.app-stage .book-setup>header {flex:none;padding:8px 14px;align-items:center}
.app-stage .setup-body {flex:1;min-height:0;display:flex;flex-direction:column;padding:clamp(8px,2cqh,20px) clamp(10px,2cqw,24px);gap:clamp(6px,2cqh,16px)}
.app-stage .creation-steps {flex:none;gap:6px 12px;flex-wrap:wrap}
.app-stage .setup-content {flex:1;min-height:0;gap:16px}
.app-stage .setup-content h4 {font-size:18px;line-height:1.4;margin-bottom:8px}
.app-stage .setup-content label {margin:6px 0 4px;font-size:13px}
.app-stage .setup-content :is(input,textarea,select) {padding:6px 8px;line-height:1.5}
.app-stage .setup-content textarea {height:72px;resize:none}
.app-stage .setup-content p {font-size:13px;line-height:1.5;margin-top:6px}
.app-stage .setup-actions {margin:0;flex:none}
.app-stage .setup-mascot {padding:0;gap:8px;width:120px}
.app-stage .setup-mascot>.kebi {width:min(100px,25cqh)}
.app-stage .character-row {flex-wrap:nowrap;gap:12px}
.app-stage .character-preview {width:min(120px,25cqw);height:min(140px,28cqh)}
.app-stage .character-preview .kebi {height:90%;width:90%;object-fit:contain}
.app-stage .character-row>div:last-child {min-width:0}
.app-stage .character-row p {margin:6px 0}
.app-stage .book-toolbar {flex:none;padding:8px 12px;gap:6px}
.app-stage .book-toolbar>span {margin:0}
.app-stage .book-status {flex:none;padding:4px 10px;line-height:1.5;font-size:13px}
.app-stage .book-spread {flex:1;min-height:0;width:calc(100% - 24px);margin:0 12px;aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:clamp(12px,4cqh,24px);background-size:100% 100%}
.app-stage :is(.book-art,.book-text) {position:static;width:100%;height:auto;min-height:0;min-width:0;padding:0;border:0;overflow:visible}
.app-stage .book-art>.kebi {width:100%;height:100%;min-height:0;object-fit:contain}
.app-stage .book-text {align-items:center}
.app-stage .book-text>p {font-size:16px;line-height:1.65}
.app-stage .book-navigation {flex:none;margin:6px 0 8px;gap:8px}
.app-stage .pdf-preview {flex:1;min-height:0;display:flex;flex-direction:column;width:min(100%,600px);padding:8px 16px;gap:8px}
.app-stage .pdf-sheet {flex:1;min-height:0;height:auto;margin:0;flex-direction:row;padding:clamp(8px,3cqh,24px);gap:12px}
.app-stage .pdf-sheet>.kebi {width:35%;max-height:100%;min-height:0;object-fit:contain}
.app-stage .pdf-sheet>p {font-size:16px;line-height:1.65}
@container (max-width:500px) {
  .admin-app,.atelier-app {grid-template-columns:40px minmax(0,1fr)}
  .admin-side>span,.admin-side>small,.side-heading>b,.side-bottom>span,.student-identity strong,.side-action>span,.atelier-side .side-bottom {display:none}
  .admin-side {padding:0 6px}
  .atelier-side {padding-left:4px;padding-right:4px;align-items:center}
  .atelier-side>div:first-child {padding:0}
  .app-top>span {max-width:120px;font-size:12px}
  .app-stage .classrooms {grid-template-columns:1fr}
  .app-stage .classroom-tile {display:grid;grid-template-columns:28px 1fr;gap:3px 8px;padding:6px 10px}
  .class-icon {grid-row:1/3;width:28px;height:28px}
  .class-stats {grid-column:2;gap:8px}
  .class-open {grid-column:1/-1;margin:0}
  .app-stage .book-list-title,.app-stage .desktop-only {display:none}
  .app-stage .activities {grid-template-columns:1fr;gap:6px}
  .app-stage .activity-card,.app-stage .activity-card:nth-child(3) {display:grid;grid-template-columns:64px 1fr;grid-template-rows:1fr auto;gap:2px 10px;padding:6px 8px}
  .app-stage .activity-cover {grid-column:1;grid-row:1/3}
  .activity-card>strong,.activity-card>span {grid-column:2}
  .app-stage .setup-mascot {display:none}
  .app-stage .book-spread {grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px;padding:10px;background:none}
  .app-stage .book-text>p,.app-stage .pdf-sheet>p {font-size:14px;line-height:1.6}
  .app-stage .quiz-answers {gap:4px}
  .app-stage .answer {flex-direction:column;gap:4px;padding:6px 4px;text-align:center}
}
@container (max-height:350px) {
  .app-stage :is(.admin-main,.atelier-main,.donghwa-home) {padding:8px 10px;gap:4px}
  .app-stage .admin-main h3 {font-size:18px}
  .app-stage .sample-types .chip {font-size:12px;padding:4px 6px;min-height:28px}
  .app-stage .app-tabs> :is(button,span) {padding:4px 0;font-size:12px}
  .app-stage .class-icon {width:26px;height:26px}
  .app-stage .classroom-tile>strong {font-size:14px}
  .app-stage :is(.chat-welcome p,.bot-message,.user-message,.vibe-request p) {font-size:13px;line-height:1.5}
  .app-stage .chat-welcome>.kebi {width:48px}
  .app-stage .chat-welcome h3 {font-size:17px}
  .app-stage .suggestion {margin:0;padding:5px 10px;font-size:13px}
  .app-stage .book-setup>header>span {display:none}
  .app-stage .setup-content h4 {font-size:16px}
  .app-stage .setup-content p {font-size:12px}
  .app-stage .setup-body {padding:8px 10px;gap:6px}
  .app-stage .setup-content label {margin-top:4px}
  .app-stage .setup-content textarea {height:64px}
  .app-stage .creation-steps {font-size:12px;gap:6px}
  .app-stage .creation-steps b {width:18px;height:18px}
  .app-stage .book-text>p,.app-stage .pdf-sheet>p {font-size:14px;line-height:1.5}
  .app-stage .code-example code {font-size:13px;line-height:1.45;padding:6px 10px}
  .app-stage .vibe-request h3 {font-size:15px}
  .app-stage .donghwa-home h3 {font-size:20px}
  .app-stage .donghwa-home header p {font-size:13px;margin:0}
}
@media(max-height:650px) {
  .scroll-tour .tour-pin {padding:8px 0}
  .scroll-tour .intro {padding-bottom:6px;gap:12px}
  .scroll-tour .intro p {display:none}
  .scroll-tour .intro h1 {font-size:24px;line-height:1.25}
  .scroll-tour .intro-actions {margin:0}
  .scroll-tour .scene-navigation {padding:0 0 6px;gap:4px}
  .scroll-tour .scene-link {padding:6px 8px;min-height:36px;font-size:12px}
  .scroll-tour .screen-guide {padding:6px 0;gap:8px}
  .scroll-tour .screen-guide p {font-size:12px;line-height:1.4}
  .scroll-tour .screen-guide button {min-height:32px;font-size:12px;padding:5px 8px}
  .scroll-tour .tour-legend {margin-top:4px;font-size:12px;line-height:1.4}
  .scroll-tour .demo-status {margin-top:4px;font-size:12px;line-height:1.4}
}
@media(max-height:450px) {
  .scroll-tour .intro h1 br {display:none}
  .scroll-tour .intro h1 {font-size:22px}
  .scroll-tour .intro-actions .primary {display:none}
  .scroll-tour .screen-chrome {height:26px;min-height:26px;font-size:12px}
  .scroll-tour .intro {align-items:center}
}

@container (max-width:350px) {
  .app-stage .sample-types {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
  .app-stage .sample-types .chip {white-space:normal;line-height:1.3;padding:4px;min-width:0}
  .app-stage .app-tabs:has([data-action="class-tab-0"]),.app-stage .app-tabs:has(>span) {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
  .app-stage .app-tabs> :is(button,span) {white-space:normal;line-height:1.3;min-width:0;text-align:center}
  .app-stage .classroom-tile {line-height:1.35;gap:1px 8px;padding:4px 8px}
  .app-stage .classroom-tile>strong {line-height:1.35}
  .app-stage .class-open {padding-top:2px}
  .app-stage .inline-tip,.app-stage .read-note p {font-size:12px;line-height:1.4}
  .app-stage .student-list>div {padding:3px 6px;gap:5px}
  .app-stage .student-list>div>button {min-height:30px;padding:4px 6px}
}
@media(max-width:360px) and (max-height:650px) {
  .scroll-tour .intro h1 {font-size:20px}
  .scroll-tour .scene-link {white-space:nowrap;padding:6px 4px}
  .scroll-tour .scene-link .ico {display:none}
}

@container (max-height:300px) {
  .admin-app,.atelier-app {grid-template-columns:40px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .admin-side>span,.admin-side>small,.side-heading>b,.side-bottom>span,.student-identity strong,.side-action>span,.atelier-side .side-bottom {display:none}
  .admin-side {padding:0 6px;min-height:0}
  .atelier-side {padding:6px 4px;align-items:center}
  .atelier-side>div:first-child {padding:0}
  .app-stage .side-action {padding:6px}
  .app-stage :is(.admin-main,.atelier-main,.donghwa-home) {padding:6px 10px;gap:4px}
  .app-stage :is(.lesson-app,.donghwa-activity) {padding:6px;gap:4px}
  .app-stage .lesson-paper {padding:6px}
  .app-stage .quiz-content {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px;align-items:center}
  .app-stage .lesson-tag {grid-column:1;grid-row:1;margin:0}
  .app-stage .quiz-content h3 {grid-column:1;grid-row:2/4;font-size:16px}
  .app-stage .quiz-answers {grid-column:2;grid-row:1/3;margin:0}
  .app-stage .answer-feedback {grid-column:2;grid-row:3;font-size:12px;padding:6px}
  .app-stage .lesson-ready {display:grid;grid-template-columns:40px 1fr;gap:4px 12px;text-align:left}
  .app-stage .lesson-ready>.ico {grid-column:1;grid-row:1/4;width:30px;height:30px}
  .app-stage .lesson-ready h3 {grid-column:2;font-size:18px;line-height:1.3}
  .app-stage .lesson-ready p {grid-column:2;font-size:13px}
  .app-stage .lesson-ready>.primary {grid-column:2;justify-self:start;min-height:32px;padding:5px 10px}
  .app-stage .lesson-paper:has(.postits) {display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr);gap:6px 12px}
  .app-stage .board-head {grid-column:1;grid-row:1}
  .app-stage .board-head h3 {font-size:16px}
  .app-stage .board-head p {margin:0}
  .app-stage .postits {grid-column:2;grid-row:1/3;margin:0}
  .app-stage .board-compose {grid-column:1;grid-row:2;align-self:end}
  .app-stage .postit {padding:6px;font-size:12px}
  .app-stage .chat-welcome {display:grid;grid-template-columns:48px 1fr;text-align:left;gap:4px 12px}
  .app-stage .chat-welcome>.kebi {grid-column:1;grid-row:1/4}
  .app-stage .chat-welcome :is(h3,p,.suggestion) {grid-column:2}
  .app-stage .game-star {width:44px;height:44px;border-radius:12px}
  .app-stage .game-star .ico {width:30px;height:30px}
  .app-stage .activity-card {padding:6px;gap:3px}
  .app-stage .activity-card>strong {font-size:14px;line-height:1.4;flex-shrink:0}
  .app-stage .activity-card>span {flex-shrink:0}
  .app-stage .activity-cover>.ico {width:12px;height:12px;top:2px;right:2px}
  .app-stage .book-setup>header {padding:6px 10px}
  .app-stage .setup-body {padding:6px 10px;gap:4px}
  .app-stage .setup-content h4 {display:none}
  .app-stage .setup-actions button {min-height:32px;padding:5px 10px}
  .app-stage .character-preview {grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
}
@container (min-width:501px) and (max-height:300px) {
  .app-stage .app-top>div:first-child {display:flex;align-items:center;gap:8px}
  .app-stage .chat-thread .bot-message>div {display:grid;grid-template-columns:1fr 110px;gap:12px;align-items:center}
  .app-stage .moon-row {margin:0;gap:10px}
  .app-stage .setup-content>div:has(textarea) {display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,1fr);gap:4px 16px}
  .app-stage label[for="book-topic"] {grid-column:1;grid-row:1;margin:0}
  .app-stage #book-topic {grid-column:1;grid-row:2/4;height:64px;min-height:0}
  .app-stage label[for="art-style"] {grid-column:2;grid-row:1;margin:0}
  .app-stage #art-style {grid-column:2;grid-row:2}
  .app-stage .setup-content>div:has(textarea)>p {grid-column:2;grid-row:3;margin:0}
}

@container (min-width:501px) and (max-height:300px) {
  .app-stage .admin-main {display:grid;grid-template-columns:minmax(220px,40%) minmax(0,1fr);grid-auto-rows:minmax(0,auto);gap:2px 12px;align-content:stretch}
  .app-stage .admin-main>* {grid-column:1;min-width:0}
  .app-stage .admin-main :is(.classrooms,.student-list) {grid-column:2;grid-row:1/8;height:100%}
  .app-stage .chat-thread {gap:4px}
  .app-stage .chat-thread .bot-message>div {grid-template-columns:1fr 180px}
  .app-stage .moon-row>span {font-size:12px;line-height:1.3}
  .app-stage .vibe-request>div {display:flex;align-items:center;gap:12px}
  .app-stage .vibe-request h3 {white-space:nowrap}
  .app-stage .vibe-request p {margin:0}
  .app-stage .code-example {display:grid;grid-template-columns:70px 1fr;align-items:center}
  .app-stage .code-example>span {border:0;padding:4px 8px}
  .app-stage .code-example code {padding:2px 8px;line-height:1.3}
  .app-stage .donghwa-activity .quiz-content {display:grid;padding:6px}
  .app-stage .setup-content label {line-height:1.3}
  .app-stage #art-style {padding-top:4px;padding-bottom:4px}
  .app-stage .setup-content>div:has(textarea)>p {line-height:1.4}
}

@container (min-width:501px) and (max-height:300px) {
  .app-stage .read-note {padding:6px}
  .app-stage .read-note p {font-size:12px;line-height:1.35}
}

@container (max-width:350px) and (max-height:380px) {
  .app-stage .classroom-tile {grid-template-columns:minmax(0,1fr) auto;padding:3px 8px}
  .app-stage .classroom-tile .class-icon {display:none}
  .app-stage .classroom-tile>strong {grid-column:1;grid-row:1}
  .app-stage .classroom-tile>span:not(.class-open):not(.class-icon) {grid-column:1;grid-row:2}
  .app-stage .class-stats {grid-column:1/-1;grid-row:3}
  .app-stage .class-open {grid-column:2;grid-row:1/3;align-self:center;border:0;padding:0;gap:4px}
  .app-stage .activity-card,.app-stage .activity-card:nth-child(3) {grid-template-rows:auto auto;align-content:center;padding:4px 8px}
}

@container (max-width:350px) and (max-height:380px) {
  .app-stage .admin-main {padding:6px 8px;gap:2px}
  .app-stage .admin-main .app-top>span {display:none}
  .app-stage .admin-main .app-top img {height:20px}
  .app-stage .admin-main h3 {line-height:1.2}
  .app-stage .admin-main .app-tabs> :is(button,span) {padding:2px 0}
  .app-stage .admin-main>.primary {min-height:32px;padding:5px 8px;font-size:12px}
  .app-stage .student-list>div {padding:0 4px}
  .app-stage .activity-card,.app-stage .activity-card:nth-child(3) {padding:2px 8px;row-gap:1px}
  .app-stage .activity-card>strong {font-size:14px;line-height:1.5;min-height:22px}
  .app-stage .setup-content:has(textarea) h4 {display:none}
}


/* Service cards precede the existing interactive tour. */
.service-overview {width:min(1360px,100%);margin:0 auto;padding:56px 48px 72px;scroll-margin-top:24px}
.overview-heading {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px}
.overview-heading h2 {font-family:CookieRun,sans-serif;font-size:clamp(28px,3vw,36px);line-height:1.4}
.service-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.service-card {min-width:0;padding:28px 32px 32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--round);--card-color:#b92c39}
.service-card:nth-child(2) {--card-color:#946010}
.service-card:nth-child(3) {--card-color:#08785a}
.service-card-top {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.service-number {display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--card-color);color:#fff;font-size:18px;font-weight:700}
.service-card-top img {width:80px;height:80px;object-fit:contain}
.service-card h3 {font-size:24px;line-height:1.4;letter-spacing:-.02em;margin-bottom:16px}
.service-card h3 em {font-style:normal;color:var(--card-color)}
.service-card p,.service-extras p {font-size:16px;line-height:1.8;color:#50586a}
.service-extras {list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:28px 32px;margin:24px 0 0;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--round)}
.service-extras li {min-width:0}
.service-extras h3 {font-size:16px;margin-bottom:8px}
@media(max-width:1359px) {.service-overview {padding-left:40px;padding-right:40px}}
@media(max-width:900px) {
  .service-overview {padding:40px 24px 56px}
  .service-cards {grid-template-columns:1fr;gap:18px}
  .service-card {padding:24px}
  .service-card-top {margin-bottom:12px}
  .service-extras {grid-template-columns:1fr;gap:20px;padding:24px}
  .site-header nav a[href="#features"],.site-header nav a[href="#experience"] {display:inline-flex}
  .site-header nav a[href="#audience"],.site-header nav a[href="#pricing"] {display:none}
}
@media(max-width:600px) {
  .site-header {flex-wrap:wrap;height:auto;min-height:60px;gap:8px 12px;padding-top:10px;padding-bottom:10px}
  .site-header nav {flex:1 1 100%;justify-content:space-between;gap:6px}
  .site-header nav a {font-size:13px;min-height:40px;align-items:center;display:inline-flex}
  .service-overview {padding:32px 18px 40px}
  .overview-heading {align-items:flex-start;flex-wrap:wrap;gap:8px;margin-bottom:24px}
  .overview-heading h2 {font-size:28px}
  .service-card h3 {font-size:22px}
  .service-card-top img {width:64px;height:64px}
}