:root{--lav:#D9D0FF;--mint:#C9F0DD;--peach:#FFD9C7;--sky:#CFE8FF;--butter:#FFF0B8;--pink:#FFD3E6;--ink:#2E2A4A;--bg:#FBF9FF;--r:28px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.7 "Gowun Dodum",system-ui,sans-serif}
h1,h2,h3,h4{font-family:Jua,"Gowun Dodum",sans-serif;font-weight:400;line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,6vw,4rem)}h2{font-size:clamp(1.7rem,4vw,2.4rem);text-align:center}
header{position:sticky;top:0;z-index:9;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 5vw;background:#FBF9FFee;backdrop-filter:blur(8px)}
.logo{display:flex;align-items:center;gap:8px;font:1.3rem Jua;color:var(--ink);text-decoration:none}.ch.s{width:34px}
nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}nav a{color:var(--ink);text-decoration:none}nav a:not(.btn):hover{text-decoration:underline wavy var(--lav)}
.btn{display:inline-block;background:var(--ink);color:#fff;padding:12px 26px;border-radius:99px;text-decoration:none;font-family:Jua;transition:transform .2s}
.btn:hover,.btn:focus-visible{transform:translateY(-3px) rotate(-2deg)}.btn.o{background:transparent;color:var(--ink);border:2px solid var(--ink)}.btn.s{padding:6px 16px;color:#fff!important}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
section{padding:80px 5vw;max-width:1100px;margin:auto}.alt{max-width:none;background:linear-gradient(#F1ECFF,#EAF7F1)}.alt>*{max-width:1000px;margin-left:auto;margin-right:auto}
.lead{text-align:center;margin-top:-.5em}
.hero{max-width:1200px;display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;min-height:82vh}
.hero p{font-size:1.15rem}.wob{display:inline-block;background:var(--butter);padding:0 .25em;border-radius:14px;animation:wob 3s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(-3deg) scale(1.05)}}
.stage{position:relative;height:420px}.ch{display:block}.stage .ch{position:absolute;filter:drop-shadow(0 12px 0 #2e2a4a12)}
.h1{width:190px;left:5%;top:8%;animation:fl 4s ease-in-out infinite}.h2{width:150px;right:2%;top:38%;animation:fl 5s -1s ease-in-out infinite}.h3{width:120px;left:30%;bottom:0;animation:fl 3.6s -2s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-22px) rotate(4deg)}}
.bl{position:absolute;border-radius:50%;background:var(--pink);opacity:.7;animation:fl 7s ease-in-out infinite}.b1{width:90px;height:90px;right:20%;top:0}.b2{width:60px;height:60px;left:0;bottom:20%;background:var(--sky)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{background:var(--a);border-radius:var(--r);padding:26px;transition:transform .3s}.card:hover{transform:translateY(-8px) rotate(-1deg)}.card .ch{width:64px;margin-bottom:8px}
.tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px auto}
.tabs button{font:1.05rem Jua;border:0;background:#fff;color:var(--ink);padding:10px 22px;border-radius:99px;cursor:pointer;transition:.2s}
.tabs [aria-selected=true]{background:var(--ink);color:#fff;transform:scale(1.08)}
[role=tabpanel]{background:#fff;border-radius:var(--r);padding:30px;animation:pop .4s}[hidden]{display:none!important}
@keyframes pop{from{opacity:0;transform:translateY(14px)}}
.sub{color:#6b6790;margin-top:-.4em}ol{list-style:none;padding:0;margin:0}
li{display:flex;gap:18px;padding:16px 0;border-top:2px dashed var(--lav)}li b{flex:0 0 84px;background:var(--mint);height:fit-content;text-align:center;border-radius:99px;padding:2px 0;font-family:Jua;font-weight:400}
li h4{margin:0}li p{margin:2px 0 0}
.tw{display:flex;gap:30px;align-items:center}.tw h2{text-align:left}.ch.big{width:170px;flex:none;animation:fl 4s ease-in-out infinite}
details{background:var(--sky);border-radius:20px;padding:14px 22px;margin:12px 0}summary{cursor:pointer;font-family:Jua}
.cta{text-align:center}.cta p{margin-bottom:22px}footer{text-align:center;padding:30px;background:var(--ink);color:#fff}
.rv{opacity:0;transform:translateY(20px);transition:.7s}.rv.on{opacity:1;transform:none}
@media(max-width:800px){.hero{grid-template-columns:1fr}.stage{height:280px}nav a:not(.btn){display:none}.tw{flex-direction:column}li{flex-direction:column;gap:6px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}