:root{
  --bg:#F6F3EC;--surface:#FBF9F4;--ink:#1E1B3A;--muted:#4A4766;--line:#D9D2C3;
  --amber:#C77D1F;--amber-text:#8A5410;--focus:#3F5FD0;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Sora','Noto Sans KR',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.6}
html[lang=ko] body{word-break:keep-all;line-height:1.75}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:600;letter-spacing:-.3px}
a{color:var(--amber-text)}
.wrap{max-width:960px;margin-inline:auto;padding-inline:20px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:6px;z-index:10}
.skip:focus{left:8px}

/* header */
.bar{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:68px;padding-block:8px}
.brand{display:flex;align-items:center;padding:4px 6px;border-radius:8px}
.brand svg{display:block;height:52px;width:auto}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:15px;min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:6px}
.nav a:hover{background:rgba(30,27,58,.06)}
.nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--amber)}
.nav a.btn{color:var(--bg);padding:0 16px;margin-left:6px}
.nav a.btn:hover{background:var(--ink);opacity:.9}
.btn{min-height:48px;padding:0 24px;border-radius:6px;border:1.5px solid var(--ink);background:var(--ink);color:var(--bg);font:600 15px 'Sora','Noto Sans KR',system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.small{min-height:44px;font-size:14px}

/* logo + animation */
.logo-btn{background:none;border:0;padding:8px;cursor:pointer;border-radius:14px;width:min(400px,100%)}
.logo-btn svg{display:block;width:100%;height:auto;overflow:visible}
.t-ink{fill:var(--ink)}
.t-ink-s{stroke:var(--ink);fill:none}
.t-amber{fill:var(--amber)}
.brain{fill:none;stroke:var(--amber);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.stone-b{fill:var(--ink);stroke:var(--ink);stroke-width:4}
.stone-w{fill:#FFFFFF;stroke:var(--ink);stroke-width:5}
.ripple{fill:none;stroke:var(--amber);stroke-width:3;opacity:0}
.stone,.ripple{transform-box:fill-box;transform-origin:50% 50%}
.play .base{animation:m78rise .7s ease-out .1s both}
.play .s-w8{animation:m78land .55s cubic-bezier(.2,.9,.3,1.15) .7s both}
.play .s-b8{animation:m78land .55s cubic-bezier(.2,.9,.3,1.15) 1.3s both}
.play .s-wo{animation:m78land .6s cubic-bezier(.2,.9,.3,1.15) 1.9s both}
.play .r-w8{animation:m78ripple .8s ease-out 1.1s forwards}
.play .r-b8{animation:m78ripple .8s ease-out 1.7s forwards}
.play .r-wo{animation:m78ripple 1s ease-out 2.35s forwards}
.play .r-wo2{animation:m78ripple 1.1s ease-out 2.55s forwards}
.play .reveal{animation:m78rise .7s ease-out 2.6s both}
@keyframes m78rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes m78land{0%{opacity:0;transform:translateY(-30px) scale(1.25)}60%{opacity:1;transform:translateY(2px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes m78ripple{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@media (prefers-reduced-motion: reduce){.play *{animation:none!important}.ripple{opacity:0!important}}

/* home */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding-block:44px 56px}
.tagline{font-size:14px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--muted)}
html[lang=ko] .tagline{letter-spacing:1.5px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--amber-text)}
html[lang=ko] .eyebrow{letter-spacing:1.5px}
.hero h1{font-size:clamp(28px,5.4vw,46px);line-height:1.2;max-width:20ch}
html[lang=ko] .hero h1{max-width:22ch;line-height:1.35}
.lead{max-width:56ch;color:var(--muted);font-size:18px}
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding-top:8px}
.section{padding-block:48px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:24px}
.section h2{font-size:clamp(24px,4vw,32px);line-height:1.25}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card h3{font-size:20px;line-height:1.35}
.card p{color:var(--muted)}
.card .eyebrow{margin-bottom:2px}
.track{position:relative;display:flex;gap:2px;height:14px;margin-block:20px 52px}
.seg{border-radius:2px}
.seg.a{background:var(--amber)}
.seg.b{background:var(--ink)}
.pin{position:absolute;top:50%;width:28px;height:28px;border-radius:50%;transform:translate(-50%,-50%)}
.pin.w{background:#fff;border:3px solid var(--ink)}
.pin.b{background:var(--ink);border:3px solid var(--ink)}
.tick{position:absolute;top:30px;font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.qa div{min-width:0}
.qa b{display:block;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--amber-text);margin-bottom:4px}
html[lang=ko] .qa b{letter-spacing:1px}

/* footer */
.foot{margin-top:24px;padding-block:32px 48px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.foot a{color:var(--muted)}

/* long-form pages (mission, curriculum) are wrapped in .page */
.page > div{min-height:0!important}