:root{--ink:#162d3c;--muted:#617781;--line:#dce7e9;--blue:#0879a9;--blue-dark:#05648f;--font:'Pretendard Variable',Pretendard,'Malgun Gothic',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font:16px/1.7 var(--font);letter-spacing:-.025em;word-break:keep-all}a{color:inherit;text-decoration:none}button,summary{font:inherit}button{cursor:pointer}img{max-width:100%}.wrap{width:min(1180px,calc(100% - 80px));margin-inline:auto}.skip{position:absolute;z-index:100;top:-100px;left:12px;padding:10px 14px;background:#fff}.skip:focus{top:8px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #e6a846;outline-offset:4px}.header{height:64px;position:sticky;top:0;z-index:20;background:#fffffff2;border-bottom:1px solid #e5ecee;backdrop-filter:blur(12px)}.nav{height:100%;display:flex;align-items:center;gap:36px}.logo img{display:block;width:128px}.links{display:flex;gap:34px;margin:auto;font-weight:600;font-size:14px;color:#50636e}.links a:hover,.text-link:hover{color:var(--blue)}.nav-cta{font-size:13px;font-weight:700;padding:9px 15px;background:#eaf5fa;color:#066b95;border-radius:7px}.nav-cta span{margin-left:8px}.mobile-menu{display:none}.hero{background:#f5f9f9;overflow:hidden}.hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:45px;align-items:center;padding:48px 0 40px;min-height:570px}.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-weight:700;font-size:12px;color:#5d7d85;letter-spacing:.025em}.eyebrow>span{width:24px;height:1px;background:#7aa5a9;flex:none}h1,h2,h3,p,figure{margin:0}h1,h2{letter-spacing:-.055em;line-height:1.3;font-weight:750}.hero h1{font-size:clamp(44px,4.8vw,66px)}.hero h1 em{font-style:normal;color:var(--blue)}.hero-intro{font-size:19px;font-weight:650;line-height:1.75;margin-top:24px}.hero-detail{font-size:14px;font-weight:650;color:#607983;margin-top:18px}.hero-detail span{color:#a5b6b8;padding:0 4px}.actions{display:flex;align-items:center;gap:25px;margin-top:29px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:13px 18px;border-radius:8px;font-weight:700;font-size:14px;transition:background .2s,transform .2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--blue);color:#fff}.primary:hover{background:var(--blue-dark)}.link-arrow,.text-link{font-size:14px;font-weight:700;color:#274858}.link-arrow span,.text-link span{color:var(--blue);margin-left:10px}.hero-art{height:465px;position:relative}.hero-scene{position:absolute;inset:0 53px 22px 0;border-radius:10px;background:url('./story-scene.jpg') 24% center/cover}.scene-caption{position:absolute;top:24px;left:24px;color:white;text-shadow:0 1px 8px #152c2d;padding:8px 11px;background:#1d39335e;border-radius:5px;font-size:11px}.scene-caption strong{display:block;font-size:19px;margin-top:2px}.hero-screen{position:absolute;right:0;bottom:0;width:51%;height:365px;overflow:hidden;background:#fff;border:5px solid white;border-radius:10px;box-shadow:0 18px 50px #193b4530}.mini-bar,.screen-bar{display:flex;align-items:center;justify-content:space-between;color:#748a93;font-size:11px}.mini-bar{height:32px;padding:0 8px}.hero-screen img{width:100%;display:block}.hero-bottom{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-top:1px solid #dce9e8;color:#718b91;font-size:11px}.section{padding:94px 0;scroll-margin-top:64px}.eyebrow+.dot,.dot{color:#188ba0}.section h2,.game-section h2{font-size:clamp(30px,3vw,42px)}.intro{padding:78px 0;background:#fff}.intro-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end}.intro-copy>p{color:#617883;font-size:17px;line-height:1.85}.lesson-path{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}.lesson-path span{font-size:12px;font-weight:700;color:#3e6471;background:#edf5f5;padding:6px 11px;border-radius:5px}.lesson-path i{font-style:normal;color:#93abad}.setup-section{background:#f4f7f8}.feature-heading,.student-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:35px}.feature-heading>p,.student-heading>div>p:not(.eyebrow){font-size:16px;color:#617783;line-height:1.85}.screen-frame,.student-frame{margin:0;background:#fff;border:1px solid #dfe8eb;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px #173d4b12}.screen-bar{padding:13px 18px;gap:12px}.screen-name{color:#4f6a76;font-weight:700}.screen-frame>img,.student-frame>img{display:block;width:100%;height:auto}.screen-frame figcaption,.student-frame figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 18px;font-size:12px;font-weight:650;color:#536e79}.screen-frame figcaption small,.student-frame figcaption small{font-weight:400;color:#8b9ca3}.image-expand{border:1px solid #d3e1e5;background:#fff;border-radius:6px;padding:7px 10px;color:#176f92;font:650 12px var(--font);white-space:nowrap}.image-expand:hover{background:#eef8fb}.student-section{background:#eef5f3}.student-heading>div:last-child{width:43%}.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}.tags span{border:1px solid #cbded9;background:#fff9;color:#58746f;border-radius:5px;padding:5px 10px;font-size:12px;font-weight:600}.student-showcase{display:grid;grid-template-columns:.62fr 1fr;gap:24px;align-items:stretch}.student-context{position:relative;min-height:600px;padding:33px;background:linear-gradient(180deg,#34443c70,#34443c07 55%,#223e39a6),url('./story-scene.jpg') 26% center/cover;border-radius:10px;color:#fff;display:flex;flex-direction:column}.context-label{font-size:12px;text-shadow:0 1px 6px #123}.student-context>strong{font-size:25px;margin:3px 0;text-shadow:0 1px 6px #123}.student-context>p{font-size:13px;text-shadow:0 1px 6px #123}.context-quote{font-size:24px;line-height:1.5;font-weight:700;margin-top:auto;text-shadow:0 2px 9px #203b35}.context-note{font-size:12px;margin-top:12px;text-shadow:0 1px 8px #123}.student-frame{max-width:660px;align-self:start}.teacher-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}.teacher-copy>p:not(.eyebrow){font-size:16px;color:#617783;margin-top:24px}.checks{padding:0;margin:24px 0 28px;list-style:none;color:#49616e}.checks li{font-size:14px;padding:6px 0}.checks li::before{content:'✓';color:#20927f;font-weight:700;margin-right:10px}.teacher-frame{max-width:690px}.game-section{background:#173d42;color:#f5f8f5;padding:94px 0;scroll-margin-top:64px}.game-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:35px}.eyebrow.light{color:#a5cac1}.eyebrow.light b{font-size:11px;letter-spacing:0;font-weight:700;padding:3px 8px;background:#ffffff1a;border-radius:4px}.game-lead{width:38%}.game-lead p{color:#c3d9d2;font-size:16px;margin-bottom:18px}.light-button{background:#f2f5ec;color:#24463f}.game-lead small{display:block;color:#adc6bf;font-size:11px;margin-top:10px}.game-pictures{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}.game-pictures figure{margin:0}.game-pictures img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:9px}.game-pictures figcaption{color:#c0d7d0;font-size:12px;margin-top:10px}.game-pictures figcaption span{color:#89b1a8;margin-right:8px}.closing{background:#fbfcfb}.closing-grid{display:grid;grid-template-columns:1fr .9fr;gap:70px;align-items:center}.closing-grid p:not(.eyebrow){color:#657b84;margin:20px 0 24px}.closing-art{height:290px;border-radius:10px;background:linear-gradient(90deg,transparent 30%,#e4c8a48f),url('./story-scene.jpg') center/cover;position:relative}.closing-art>div{position:absolute;right:30px;top:32px;color:#4f5146}.closing-art small,.closing-art strong,.closing-art span{display:block}.closing-art small{font-size:11px}.closing-art strong{font-size:26px;margin:18px 0}.closing-art span{font-size:10px;letter-spacing:.12em}.footer{background:#f1f5f5;border-top:1px solid #e3ebeb;padding:38px 0}.footer-grid{display:flex;align-items:start;justify-content:space-between;gap:32px}.footer-logo{width:125px;mix-blend-mode:multiply}.footer p{font-size:12px;color:#71868d;margin-top:5px}.footer-links{display:flex;gap:12px 22px;flex-wrap:wrap;color:#5b737e;font-size:12px}.footer-links a:hover{text-decoration:underline}.copyright{font-size:11px;color:#91a1a6;white-space:nowrap}.image-dialog{width:min(1100px,calc(100% - 32px));max-width:1100px;max-height:calc(100% - 32px);padding:0;border:0;border-radius:12px;background:#fff;box-shadow:0 25px 100px #061a28aa;color:var(--ink)}.image-dialog::backdrop{background:#0b1c26bb}.image-dialog-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;z-index:1;border-bottom:1px solid #e2e9eb}.image-dialog-head h2{font-size:16px}.image-dialog-close{border:1px solid #d7e3e6;background:#fff;border-radius:7px;padding:7px 12px;color:#345566;font-size:13px;font-weight:650}.image-dialog-close span{font-size:17px;margin-left:7px}.image-dialog-body{padding:18px;background:#f1f5f5}.image-dialog-body img{display:block;width:100%;height:auto}@media(max-width:900px){.wrap{width:min(100% - 40px,720px)}.links,.nav-cta{display:none}.mobile-menu{display:block;margin-left:auto;position:relative}.mobile-menu summary{display:flex;flex-direction:column;justify-content:center;gap:4px;list-style:none;width:42px;height:40px;padding:10px;border:1px solid #d8e4e6;border-radius:7px;cursor:pointer}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu summary span{height:2px;background:#315360;display:block}.mobile-menu nav{position:absolute;right:0;top:47px;display:grid;width:200px;padding:7px;background:#fff;border:1px solid #e2eaea;border-radius:8px;box-shadow:0 12px 30px #173d4b21}.mobile-menu nav a{padding:10px;font-size:14px}.hero-grid{grid-template-columns:1fr;min-height:0;padding:48px 0 30px;gap:36px}.hero-art{height:390px}.hero-screen{height:310px}.intro-layout{grid-template-columns:1fr;gap:22px}.feature-heading,.student-heading,.game-head{display:block}.feature-heading>p,.student-heading>div:last-child,.game-lead{width:auto;margin-top:18px}.student-showcase{grid-template-columns:1fr}.student-context{min-height:270px}.student-frame{max-width:none}.teacher-grid{grid-template-columns:1fr;gap:32px}.closing-grid{gap:35px}.footer-grid{flex-wrap:wrap}.footer-links{max-width:550px}.game-pictures{gap:12px}}@media(max-width:600px){.wrap{width:calc(100% - 32px)}.header{height:60px}.logo img{width:112px}.hero-grid{padding-top:38px}.hero h1{font-size:clamp(34px,9.2vw,43px)}.hero-intro{font-size:17px}.hero-detail{font-size:13px}.actions{gap:18px}.button{gap:18px}.hero-art{height:270px}.hero-scene{inset:0 32px 15px 0}.hero-screen{width:52%;height:220px;border-width:4px}.scene-caption{top:13px;left:13px;padding:6px 8px}.scene-caption strong{font-size:16px}.hero-bottom{font-size:10px}.section,.game-section{padding:65px 0;scroll-margin-top:60px}.intro{padding:58px 0}.section h2,.game-section h2{font-size:29px}.intro-copy>p,.feature-heading>p,.student-heading>div>p:not(.eyebrow),.game-lead p{font-size:15px}.student-context{min-height:240px;padding:23px}.context-quote{font-size:20px}.game-pictures{grid-template-columns:1fr}.game-secondary{width:70%;margin-left:auto!important}.closing-grid{grid-template-columns:1fr;gap:30px}.closing-art{height:220px}.footer-grid{display:block}.footer-links{margin:22px 0}.image-dialog-body{padding:10px;overflow:auto;overscroll-behavior:contain}.image-dialog-body::before{content:'화면을 좌우로 움직여 살펴보세요';display:block;color:#607984;font-size:12px;margin:2px 2px 10px}.image-dialog-body img{width:760px;max-width:none}.screen-frame figcaption,.student-frame figcaption{padding:11px 12px}.screen-frame figcaption small,.student-frame figcaption small{display:block}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}