:root {
  --paper:#f7faf4; --ink:#193c2e; --green:#176b49; --soft:#6f8072;
  --line:#dce6d9; --accent:#f2ca56; --first-opacity:1; --first-y:0px;
  --second-opacity:0; --second-y:28px; --bg-opacity:.58; --bg-y:0px;
  font-family:"Noto Sans KR","Malgun Gothic",sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:35px}
body {margin:0; word-break:keep-all}
a {color:inherit; text-decoration:none}
button {font:inherit}
button,a {-webkit-tap-highlight-color:transparent}
a:focus-visible {outline:3px solid #b89932; outline-offset:6px}
::selection {background:#f6e5a4}
p,h1,h2,h3 {margin:0}
.skip {position:fixed; left:20px; top:-70px; z-index:100; background:var(--green); color:white; padding:12px 18px}
.skip:focus {top:12px}
.header {height:100px; position:absolute; top:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:0 5.2%; z-index:20; background:#fff}
.brand {display:flex; align-items:center; flex-shrink:0}
.brand-logo {width:310px; height:auto; display:block}
.header nav {display:flex; gap:36px; align-items:center; font-size:12px; font-weight:500}
.nav-contact {border-bottom:1px solid var(--green); padding:10px 0; color:var(--green)}
.nav-contact span {margin-left:18px}
.nav-story {color:#657c69}
.story {height:200svh; background:#fff}
.story-sticky {height:100svh; min-height:620px; position:sticky; top:0; overflow:hidden; display:grid; align-items:center; background:linear-gradient(#fff,#f5f9f0)}
.textbook-background {position:absolute; inset:145px 7% 78px; opacity:var(--bg-opacity); transform:translateY(var(--bg-y)); pointer-events:none; max-width:1400px; margin:auto; color:#405744}
.page-heading {display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid #9aaf90; padding-bottom:18px; font-size:12px; letter-spacing:.03em}
.background-copy {padding-top:20px; font-size:clamp(23px,3vw,45px); font-weight:500; line-height:2; letter-spacing:-1.6px}
.background-copy p {margin-bottom:12px}
.background-copy span {filter:blur(5px)}
.page-foot {display:flex; justify-content:space-between; font-size:11px; margin-top:25px; border-top:1px solid #9aaf90; padding-top:15px}
.hero-wash {position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(250,252,247,.9) 4%,rgba(250,252,247,.68) 32%,rgba(250,252,247,.08) 75%); pointer-events:none}
.story-frame {position:relative; grid-area:1/1; text-align:center; z-index:2; padding:95px 24px 90px}
.frame-first {opacity:var(--first-opacity); transform:translateY(var(--first-y))}
.frame-second {opacity:var(--second-opacity); transform:translateY(var(--second-y)); pointer-events:none}
.eyebrow {font-size:12px; font-weight:600; letter-spacing:.04em; display:flex; gap:9px; align-items:center}
.story-frame .eyebrow {justify-content:center; margin-bottom:30px; color:var(--green)}
.tiny-dot {width:6px; height:6px; border-radius:50%; background:var(--green)}
h1 {font-size:clamp(42px,6.3vw,96px); line-height:1.3; letter-spacing:-.066em; font-weight:800}
.underline-word {position:relative; color:var(--green); white-space:nowrap}
.underline-word svg {position:absolute; bottom:-13px; left:0; width:100%; height:16px; fill:none; stroke:#d0ac3f; stroke-width:3; stroke-linecap:round}
.hero-description {font-size:16px; line-height:1.9; color:#42654d; margin-top:35px; letter-spacing:-.5px}
.textbook-label {display:inline-block; margin-top:30px; padding:7px 12px; background:#faedb9; color:#6b5819; font-size:11px; line-height:1.7; letter-spacing:-.25px}
.frame-first .hero-description {margin-top:22px; font-size:clamp(16px,1.7vw,23px); font-weight:600; line-height:1.7; color:var(--ink); text-shadow:0 0 14px #fff,0 0 5px #fff}
.frame-first .hero-description strong {display:block; margin-top:7px; font-size:clamp(21px,2.35vw,34px); font-weight:800; line-height:1.55; letter-spacing:-.045em; color:var(--green)}
.hero-message-break {display:none}
.hero-description strong {font-weight:600}
.frame-second h2 {font-size:clamp(35px,5.3vw,80px); line-height:1.4; letter-spacing:-.065em; font-weight:800}
.frame-second h2 span {color:var(--green)}
.scroll-cue {position:absolute; bottom:36px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; font-size:10px; color:#516e53; white-space:nowrap; z-index:3; background:#f7faf4d9; padding:5px 12px}
.scroll-line {height:30px; width:1px; background:#a1b88c; position:relative; overflow:hidden}
.scroll-line:after {content:""; position:absolute; height:13px; background:var(--green); width:1px; animation:scroll-down 2s infinite}
.chapter-index {position:absolute; right:5.2%; bottom:45px; display:flex; align-items:center; gap:12px; font-size:10px; color:#718766}
.chapter-current {color:var(--green)}
.chapter-rule {width:54px; height:1px; background:#b7c9aa}
.section-padding {padding:54px 8% 90px}
.section-top {display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:24px; border-bottom:1px solid var(--line)}
.section-top .eyebrow {font-size:11px; color:var(--green); letter-spacing:.05em}
.section-note {font-size:11px; color:var(--soft)}
.experience {background:#fff; scroll-margin-top:0}
.experience-layout {display:grid; grid-template-columns:1fr 1.06fr; gap:9%; max-width:1240px; margin:95px auto 0; align-items:start}
.experience-heading {position:sticky; top:max(28px,calc((100svh - 480px)/2)); margin-top:65px}
.reading-area {min-width:0}
.reading-stage {position:sticky; top:var(--reading-top,24px)}
.experience-heading h2 {font-size:clamp(31px,3.3vw,48px); line-height:1.5; letter-spacing:-2px; font-weight:700}
.muted {color:#80a17a}
.experience-heading p {font-size:14px; line-height:1.9; color:#657e69; margin-top:25px}
.small-caption {font-size:10px; color:#87977f; display:block; margin-top:23px}
.reading-paper {padding:30px 35px 24px; background:var(--paper); border:1px solid #e0e9d9; box-shadow:0 9px 25px #283d2710; transform:rotate(var(--paper-angle,0deg)); min-height:400px; display:flex; flex-direction:column}
.paper-meta {display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:10px; color:#68815e}
.paper-state {display:flex; align-items:center; gap:6px}
.paper-state:before {content:""; width:5px; height:5px; border-radius:50%; background:#b4bd9c}
.is-clear .paper-state:before {background:var(--green)}
.reading-text {font-size:clamp(22px,2.3vw,33px); line-height:1.85; letter-spacing:-1.2px; margin:26px 0 22px; font-weight:500}
.textbook-reading {font-size:clamp(17px,1.55vw,23px); line-height:1.9; letter-spacing:-.65px; font-weight:400}
.textbook-reading p+p {margin-top:15px}
.experience-heading .early-reading-note {font-size:12px; font-weight:600; color:var(--green); margin-top:20px}
.unknown {filter:blur(var(--word-blur,0px)); display:inline-block; color:var(--green); text-decoration:underline; text-decoration-color:#d4be65; text-underline-offset:7px; text-decoration-thickness:2px}
.word-meaning {display:flex; gap:8px; flex-direction:column; margin-bottom:22px; font-size:10px; color:#60795c; line-height:1.7; opacity:var(--meaning-opacity,1)}
.word-meaning b {color:var(--green); margin-right:7px}
.paper-bottom {margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; gap:12px; border-top:1px solid #d5e2cb; font-size:10px; color:#718666}
.reading-progress {margin-top:24px; height:2px; background:#e3eadb; overflow:hidden}
.reading-progress span {display:block; width:100%; height:100%; background:var(--green); transform:scaleX(var(--reading-progress,0)); transform-origin:left}
.interaction-note {margin-top:12px; font-size:10px; color:#718568; line-height:1.7; min-height:34px}
.programs {background:#f5f9ef}
.programs-intro {max-width:1240px; margin:65px auto 48px}
.age-tag {display:inline-block; background:#fae9a3; color:#6d5a19; padding:7px 12px; font-size:11px; margin-bottom:22px}
.programs h2 {font-size:clamp(32px,3.7vw,53px); line-height:1.45; letter-spacing:-.055em; font-weight:700}
.programs h2 span {color:var(--green)}
.programs-intro p {font-size:14px; line-height:1.9; color:#657e60; margin-top:22px}
.program-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; max-width:1240px; margin:auto}
.program {border-top:2px solid #a3be96; padding:25px 0 0}
.program-first {border-top-color:#cfac39}
.program-step {font-size:10px; color:#6c865f; letter-spacing:.03em}
.program h3 {font-size:25px; color:var(--green); letter-spacing:-1px; font-weight:700; margin-top:15px}
.program-title {font-size:13px; color:#486241; margin-top:10px}
.program ul {list-style:none; padding:0; margin:25px 0; font-size:11px; line-height:2.2; color:#6a7e5e}
.program li {position:relative; padding-left:12px}
.program li:before {content:"·"; position:absolute; left:0; color:var(--green)}
.program-outcome {display:block; padding-top:16px; border-top:1px solid #dce7d3; color:#527343; font-size:10px}
.programs-note {max-width:1240px; margin:35px auto 0; font-size:10px; color:#758b67; line-height:1.8}
.understanding {position:relative; background:var(--green); color:#f9fff2; overflow:hidden; padding-bottom:80px}
.understanding .section-top {border-color:#ffffff26; position:relative; z-index:1}
.understanding .eyebrow,.understanding .section-note {color:#d3e4c7}
.understanding-body {position:relative; z-index:1; text-align:center; padding-top:70px}
.understanding h2 {font-size:clamp(32px,4.1vw,61px); font-weight:700; line-height:1.5; letter-spacing:-.06em}
.understanding h2 span {color:#f7df8b}
.understanding-body>p {font-size:14px; line-height:2; color:#d8e8d0; margin-top:25px}
.understanding-body .foundation-note {font-size:12px; color:#f7df8b; margin-top:18px}
.learning-path {display:flex; justify-content:center; align-items:center; gap:33px; margin-top:45px; font-size:13px}
.path-arrow {color:#adce96; font-size:20px}
.giant-word {position:absolute; right:-25px; bottom:-103px; font-size:370px; letter-spacing:-40px; font-weight:800; color:#ffffff04; pointer-events:none}
.contact {background:#fff; padding-bottom:85px}
.contact-body {text-align:center; padding-top:60px}
.contact-symbol {color:#c3a331; font-size:38px; display:inline-block; margin-bottom:20px}
.contact h2 {font-size:clamp(32px,4vw,59px); line-height:1.45; letter-spacing:-.06em; font-weight:700}
.contact h2 span {color:var(--green)}
.contact-body p {margin-top:25px; font-size:14px; line-height:1.9; color:#678160}
.primary-button {display:flex; justify-content:space-between; align-items:center; gap:40px; padding:20px 25px; background:var(--green); color:#fff; width:fit-content; max-width:100%; margin:30px auto 0; font-size:13px; transition:background .25s,transform .25s}
.primary-button:hover {background:#105134; transform:translateY(-2px)}
.primary-button span {font-size:20px}
.contact-number {display:block; width:fit-content; margin:18px auto 0; font-size:12px; color:#66815c; letter-spacing:.05em}
footer {position:relative; background:#fff; border-top:1px solid var(--line); padding:44px 5.2%; display:grid; grid-template-columns:310px minmax(0,1fr); align-items:center; gap:35px; color:#6c8461}
.footer-brand img {display:block; width:100%; height:auto}
.footer-info {text-align:right; font-size:11px; line-height:1.9}
.footer-info strong {display:block; color:var(--green); font-size:14px; font-weight:700; margin-bottom:7px}
.copyright {font-size:10px; margin-top:10px}
.reveal {opacity:1; transform:none}
.motion-ready .reveal {opacity:0; transform:translateY(25px); transition:opacity .8s ease,transform .8s ease}
.motion-ready .reveal.is-visible {opacity:1; transform:none}
@keyframes scroll-down {from{transform:translateY(-14px)}to{transform:translateY(36px)}}
@media(min-width:1600px) {
  .experience-layout {gap:140px}
  .section-padding {padding-left:max(8%,calc((100% - 1440px)/2)); padding-right:max(8%,calc((100% - 1440px)/2))}
}
@media(max-width:800px) {
  .header {height:83px; padding:0 6%}
  .brand-logo {width:245px}
  .header nav {gap:15px; font-size:11px}
  .nav-story {display:none}
  .nav-contact span {margin-left:8px}
  .story-sticky {min-height:560px}
  .story-frame {padding-top:85px}
  .textbook-background {inset:125px 7% 90px}
  .background-copy {font-size:30px; line-height:2.2; letter-spacing:-1px}
  .page-heading {font-size:9px}
  .hero-wash {background:radial-gradient(ellipse at center,rgba(250,252,247,.92) 7%,rgba(250,252,247,.62) 42%,rgba(250,252,247,.08) 85%)}
  .story-frame .eyebrow {font-size:10px; margin-bottom:28px}
  .hero-description {font-size:13px; margin-top:30px}
  .textbook-label {font-size:10px; margin-top:26px}
  .scroll-cue {font-size:9px; gap:10px; bottom:28px}
  .chapter-index {display:none}
  .section-padding {padding:38px 7% 65px}
  .experience-layout {gap:38px; margin-top:50px; grid-template-columns:1fr}
  .experience-heading {position:static; margin-top:0}
  .experience-heading h2 {font-size:36px; line-height:1.45}
  .experience-heading p {font-size:13px; margin-top:20px}
  .small-caption {margin-top:15px}
  .reading-area {width:100%; max-width:550px; justify-self:center}
  .reading-text {font-size:29px}
  .textbook-reading {font-size:20px; line-height:1.9}
  .section-note {font-size:9px}
  .section-top .eyebrow {font-size:10px}
  .reading-paper {min-height:365px; padding:27px 30px}
  .programs-intro {margin-top:45px; margin-bottom:35px}
  .programs h2 {font-size:37px}
  .programs-intro p {font-size:13px}
  .program-grid {gap:24px}
  .program h3 {font-size:21px}
  .program-title {font-size:11px}
  .program ul {font-size:10px; margin:20px 0}
  .understanding-body {padding-top:55px}
  .understanding h2 {font-size:36px}
  .understanding-body>p {font-size:13px}
  .learning-path {margin-top:38px; gap:22px}
  .contact-body {padding-top:45px}
  .contact h2 {font-size:37px}
  footer {padding:32px 7%; grid-template-columns:220px minmax(0,1fr); gap:25px}
  .footer-info {font-size:10px}
  .footer-info strong {font-size:13px}
  .copyright {font-size:9px}
}
@media(max-width:600px) {
  .hero-message-break {display:block}
  .brand-logo {width:220px}
  .header nav {font-size:10px}
  .program-grid {grid-template-columns:1fr; gap:30px}
  .program {padding-top:20px}
  .program h3 {font-size:25px; margin-top:10px}
  .program-title {font-size:13px}
  .program ul {font-size:12px; line-height:2; margin:18px 0}
  .program-outcome {font-size:11px; padding-top:13px}
  .programs-note {font-size:10px; margin-top:26px}
  footer {grid-template-columns:minmax(0,1fr); gap:25px}
  .footer-brand {max-width:260px}
  .footer-info {text-align:left; line-height:2}
}
@media(max-width:430px) {
  .brand-logo {width:205px}
  .header {padding:0 5%}
  .header nav {font-size:9px}
  .nav-contact span {margin-left:4px}
  h1 {font-size:39px}
  .frame-second h2 {font-size:31px}
  .hero-description {font-size:12px}
  .story-frame {padding-left:16px; padding-right:16px}
  .background-copy {font-size:26px}
  .experience-heading h2 {font-size:31px}
  .reading-text {font-size:25px}
  .textbook-reading {font-size:17px; line-height:1.9}
  .textbook-label {font-size:9px; padding:6px 9px; margin-top:26px}
  .section-note {max-width:140px; text-align:right}
  .section-top {gap:12px}
  .contact h2 {font-size:30px}
  .contact-body p {font-size:12px}
  .understanding h2 {font-size:29px}
  .understanding-body>p {font-size:12px}
  .primary-button {font-size:12px; gap:24px}
  .reading-paper {padding:24px; min-height:350px}
  .paper-meta {font-size:9px}
  .word-meaning {font-size:9px; gap:6px}
  .programs h2 {font-size:31px}
  .programs-intro p {font-size:12px}
  .footer-brand {max-width:235px}
}
@media(max-width:350px) {
  .brand-logo {width:180px}
  h1 {font-size:34px}
  .frame-second h2 {font-size:27px}
  .story-frame .eyebrow {font-size:9px}
  .section-top .eyebrow {font-size:9px}
  .section-note {font-size:8px}
  .reading-text {font-size:22px}
  .textbook-reading {font-size:16px}
  .contact h2 {font-size:26px}
  .understanding h2 {font-size:26px}
  .footer-brand {max-width:210px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  .story {height:auto}
  .story-sticky {position:relative}
  .story-frame {transform:none!important; opacity:1!important}
  .frame-second {display:none}
  .textbook-background {transform:none}
  .motion-ready .reveal {opacity:1; transform:none; transition:none}
  .scroll-line:after {animation:none}
  .unknown {filter:none}
  .word-meaning {opacity:1}
  .reading-stage {position:static}
  .experience-heading {position:static}
}