:root{--bg:#f2f9f7;--s1:#ffffff;--s2:#e6f4f0;--line:#d2e6e0;--tx:#231f20;--mut:#6d6e71;--teal:#17aa9d;--tealt:#0e7f75;--vio:#218791;--neon:#6fcf7d;--acc:#f79420;--dk:#1f5255;--r:20px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg) radial-gradient(rgba(62,175,155,.16) 1px,transparent 1px) 0 0/26px 26px;color:var(--tx);font-family:Pretendard,-apple-system,"Malgun Gothic",sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
/* nav */
header{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px);background:rgba(242,249,247,.82);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.logo i{width:12px;height:12px;border-radius:50%;background:var(--teal);box-shadow:0 0 14px var(--teal)}
.menu{display:flex;gap:30px;font-size:15px;color:var(--mut)}
.menu a:hover{color:var(--tx)}
.menu{align-items:center}
.dd{position:relative;padding:24px 0}
.dd small{font-size:10px;opacity:.7}
.dd-m{position:absolute;top:100%;left:-18px;min-width:150px;display:none}
.dd-in{background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 20px 50px rgba(31,82,85,.18)}
.dd-in a{display:block;padding:10px 14px;border-radius:9px;white-space:nowrap}
.dd-in a:hover{background:var(--s2);color:var(--tealt)}
.dd:hover .dd-m,.dd:focus-within .dd-m{display:block}
.five{display:inline-flex;align-items:center;gap:16px;margin-top:34px;padding:14px 22px 14px 14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.85);transition:.2s}
.five:hover{border-color:var(--tealt)}
.five b{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;color:#fff;background:linear-gradient(120deg,#17aa9d,#6b4dff)}
.five span{font-size:15px;font-weight:700;line-height:1.4}.five em{font-style:normal;font-weight:400;font-size:13px;color:var(--mut)}
.five i{font-style:normal;color:var(--tealt)}
.centers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.ct h3{margin-bottom:14px}.ct ul{list-style:none;font-size:14px;color:var(--mut);display:grid;gap:8px}
.ct li b{color:var(--tx);font-weight:600;margin-right:6px}.ct li a:hover{color:var(--tealt)}
.ct small{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:#5d6785}
.ct.go{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(300px 200px at 100% 0,rgba(111,207,125,.25),transparent),var(--s1)}
.ct.go p{margin:8px 0 22px}
.right{position:relative;display:flex}
.util{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:22px;white-space:nowrap;font-size:13px;color:var(--mut)}.util a:hover{color:var(--tx)}
.m-only{display:none}
.gal{display:grid;gap:18px;padding:44px 0 26px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.gal-row{overflow:hidden;touch-action:pan-y}
.gal-track{display:flex;width:max-content;will-change:transform}
.gal{cursor:grab;-webkit-user-select:none;user-select:none}.gal.drag{cursor:grabbing}.gal.drag .g-card{pointer-events:none}
.g-card{position:relative;flex:0 0 300px;height:210px;margin-right:18px;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#1f5255,#3eaf9b);border:1px solid var(--line);transition:transform .25s ease,border-color .25s,box-shadow .25s;will-change:transform}
.g-card:hover{border-color:rgba(23,170,157,.85);box-shadow:0 16px 36px rgba(31,82,85,.3)}
.g-card img{-webkit-user-drag:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.g-card:hover img{transform:scale(1.08)}
.g-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(26,23,24,.9))}
.g-cap{position:absolute;left:16px;right:16px;bottom:13px;z-index:2}
.g-cap small{color:var(--neon);font-size:11px}.g-cap b{color:#fff;display:block;font-size:14px;line-height:1.4;margin-top:3px;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.play{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:rgba(7,9,15,.7);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);color:#fff;padding-left:3px}
.gal-more{text-align:right}
/* motion */
header .sp{position:absolute;left:0;bottom:-2px;height:4px;width:0;border-radius:0 4px 4px 0;background:linear-gradient(90deg,#17aa9d,#6b4dff);box-shadow:0 0 12px rgba(107,77,255,.45)}
header{transition:box-shadow .3s}header.s{box-shadow:0 8px 28px rgba(31,82,85,.12)}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(380px circle at var(--mx,70%) var(--my,30%),rgba(23,170,157,.16),transparent 62%)}
h1 em{background-size:220% 100%;animation:hue 7s ease-in-out infinite alternate}
@keyframes hue{from{background-position:0 0}to{background-position:100% 0}}
@keyframes up{from{opacity:0;transform:translateY(26px)}}
.rv.in .loop>.card,.rv.in .arena>.card,.rv.in .centers>.card,.rv.in .path>.step{animation:up .7s var(--d,0s) backwards}
.path:before{transform:scaleX(0);transform-origin:left;transition:transform 1.8s .2s ease}
.rv.in .path:before{transform:none}
.loop .card.on{border-color:rgba(23,170,157,.7);box-shadow:0 18px 44px rgba(23,170,157,.22);transform:translateY(-6px)}
.loop .card.on .n{color:var(--acc)}
.rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:20px;align-items:flex-end;--p:0}
.rail:before{content:"";position:absolute;right:5px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--line)}
.rail i{position:absolute;right:5px;top:6px;width:2px;border-radius:2px;height:calc((100% - 12px) * var(--p));background:linear-gradient(var(--teal),var(--vio))}
.rail a{position:relative;display:flex;align-items:center;gap:10px;height:12px;font-size:12px;color:var(--mut)}
.rail a span{opacity:0;transform:translateX(8px);transition:.2s;background:var(--s1);border:1px solid var(--line);padding:3px 11px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 18px rgba(31,82,85,.12);pointer-events:none}
.rail a b{position:relative;z-index:1;width:12px;height:12px;border-radius:50%;background:var(--s1);border:2px solid var(--line);transition:.25s}
.rail a:hover span,.rail a.on span{opacity:1;transform:none}
.rail a.on b{border-color:var(--teal);background:var(--teal);box-shadow:0 0 0 4px rgba(23,170,157,.18)}
@media(max-width:1200px){.rail{display:none}}
.btn.pri{will-change:transform}
header{transform:translateZ(0);-webkit-transform:translateZ(0);isolation:isolate}
header .nav .btn.pri{will-change:auto;transition:box-shadow .2s,transform .2s;transform:none !important;margin:0}
header .nav .btn.pri:hover{transform:translateY(-1px) !important}
@media (prefers-reduced-motion:reduce){h1 em,.rv.in .loop>.card,.rv.in .arena>.card,.rv.in .centers>.card,.rv.in .path>.step{animation:none}}
.lb{position:fixed;inset:0;z-index:100;background:rgba(4,6,11,.94);display:none;align-items:center;justify-content:center;flex-direction:column;padding:24px}
.lb.on{display:flex;color:#fff}
.lb-body{width:min(960px,100%);max-height:72vh;display:flex;justify-content:center}
.lb-body img{max-width:100%;max-height:72vh;border-radius:14px;object-fit:contain}
.lb-body .vid{position:relative;width:100%;aspect-ratio:16/9}.lb-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:14px}
.lb-cap{margin-top:18px;text-align:center;max-width:720px}.lb-cap small{color:var(--neon)}.lb-cap b{display:block;font-size:18px;margin:4px 0 10px}.lb-cap a{color:var(--neon);font-size:14px}
.lb button{position:absolute;background:var(--s1);border:1px solid var(--line);color:var(--tx);width:46px;height:46px;border-radius:50%;font-size:20px;cursor:pointer}
.lb button:hover{border-color:var(--tealt)}.lb .x{top:20px;right:20px}.lb .pv{left:20px;top:50%}.lb .nx{right:20px;top:50%}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;font-weight:700;font-size:15px;transition:.2s}
.btn.pri{background:linear-gradient(120deg,#17aa9d,#6b4dff);color:#fff;box-shadow:0 8px 24px rgba(107,77,255,.28)}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(107,77,255,.42)}
.btn.sec{border:1px solid var(--line);color:var(--tx)}
.btn.sec:hover{border-color:var(--tealt)}
.burger{display:none;background:none;border:0;color:var(--tx);font-size:26px}
/* hero */
.hero{position:relative;padding:150px 0 90px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(620px 420px at 85% 15%,rgba(111,207,125,.28),transparent),radial-gradient(560px 420px at 8% 85%,rgba(62,175,155,.2),transparent),linear-gradient(var(--line) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/64px 64px;opacity:.9;mask-image:linear-gradient(#000 40%,transparent)}
.star-wrap{position:absolute;left:calc(50% - 150px);top:60px;height:min(800px,94%);z-index:0;pointer-events:none;transition:transform .25s ease-out;-webkit-mask-image:linear-gradient(#000 62%,transparent 98%);mask-image:linear-gradient(#000 62%,transparent 98%)}
.star{height:100%;width:auto;display:block;overflow:visible;animation:rise 9s ease-in-out infinite alternate;filter:drop-shadow(0 0 28px rgba(23,170,157,.28))}
@keyframes rise{from{transform:translateY(10px)}to{transform:translateY(-16px)}}
.star .wire{stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 3.2s .4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.star,.star .wire{animation:none}.star .wire{stroke-dashoffset:0}}
.hero .wrap{z-index:1;position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.tag{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--tealt);border:1px solid rgba(62,175,155,.5);background:rgba(255,255,255,.7);padding:6px 14px;border-radius:999px;margin-bottom:26px}
h1{font-size:clamp(36px,5vw,62px);line-height:1.12;letter-spacing:-.035em;font-weight:800}
h1 em{font-style:normal;background:linear-gradient(120deg,var(--teal),var(--vio));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:26px 0 36px;color:var(--mut);font-size:18px;max-width:520px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
/* vision card */
.vision{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:0 30px 80px rgba(31,82,85,.2),0 0 0 4px rgba(111,207,125,.28)}
.vbar{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);padding:4px 6px 12px}
.vbar b{color:var(--tealt);font-weight:500}
.scene{position:relative;aspect-ratio:4/3;border-radius:12px;background:linear-gradient(160deg,#1f5255,#0f3335);overflow:hidden}
.scene svg{position:absolute;inset:0;width:100%;height:100%}
.box{position:absolute;border:2px solid var(--neon);border-radius:6px;transition:all 1.6s cubic-bezier(.5,0,.2,1)}
.box span{position:absolute;top:-22px;left:-2px;background:var(--neon);color:#04060b;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap}
.box.v{border-color:var(--acc)}.box.v span{background:var(--acc);color:#1d1100}
.scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--neon),transparent);animation:scan 3.4s linear infinite;opacity:.7}
@keyframes scan{from{top:0}to{top:100%}}
.log{margin-top:12px;background:#231f20;border-radius:10px;padding:12px 14px;font-size:12px;color:#9fb0d0;min-height:76px}
.log p:last-child:after{content:"▍";color:var(--neon);animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.log .k{color:#f6a84a}.log .g{color:var(--neon)}
/* sections */
section{padding:100px 0}
.eyebrow{color:var(--tealt);font-size:13px;letter-spacing:.14em;font-weight:700;margin-bottom:14px}
h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.03em;line-height:1.25;font-weight:800;max-width:720px}
.sub{color:var(--mut);margin-top:16px;max-width:620px;font-size:17px}
.loop{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px;position:relative}
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:.25s;box-shadow:0 8px 28px rgba(31,82,85,.07)}
.card:hover{border-color:rgba(62,175,155,.6);transform:translateY(-4px);box-shadow:0 16px 40px rgba(62,175,155,.2)}
.card .n{font-size:13px;color:var(--tealt);margin-bottom:22px}
.card h3{font-size:22px;margin-bottom:10px;letter-spacing:-.02em}
.card p{color:var(--mut);font-size:15px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px}
.chips span{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--s2);color:var(--mut)}
/* path */
.path{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.path:before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:linear-gradient(90deg,var(--teal),var(--vio))}
.step{position:relative;padding:48px 20px 0 0}
.step:before{content:"";position:absolute;top:8px;left:0;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--teal)}
.step:last-child:before{border-color:var(--acc);box-shadow:0 0 16px var(--acc)}
.step small{color:var(--tealt);font-size:12px}
.step h3{font-size:19px;margin:4px 0 8px}
.step h3.lang{font-size:28px;letter-spacing:-.03em;line-height:1.2;margin:6px 0 12px;background:linear-gradient(120deg,var(--tx),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.step:last-child h3.lang{background:linear-gradient(120deg,var(--teal),var(--vio));-webkit-background-clip:text;background-clip:text}
.tool{display:inline-block;margin-top:14px;font-size:11px;color:#5d6785;border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.step p{color:var(--mut);font-size:14px}
/* arena */
.two{grid-template-columns:repeat(2,1fr)!important}
.four{grid-template-columns:repeat(4,1fr)!important}
.ext{display:inline-block;margin-top:16px;font-size:13px;color:var(--tealt)}
.age{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(120deg,#17aa9d,#6b4dff);padding:4px 12px;border-radius:999px;margin-bottom:18px}
.arena{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.arena .card{background:linear-gradient(160deg,var(--s2),var(--s1))}
.lg{height:92px;border-radius:14px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:14px 18px;margin-bottom:22px}
.lg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.lg.dk{background:var(--dk);border-color:var(--dk)}
.arena .card .ic{font-size:32px;margin-bottom:18px}
/* cta band */
.band{margin:0 24px;border-radius:32px;padding:80px 24px;text-align:center;background:radial-gradient(500px 260px at 50% 0,rgba(111,207,125,.3),transparent),radial-gradient(420px 220px at 0 100%,rgba(62,175,155,.18),transparent),var(--s1);border:1px solid var(--line)}
.band h2{margin:0 auto}.band .cta{justify-content:center;margin-top:34px}
/* info */
.info{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.info .card p{margin-top:6px}
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--mut);font-size:14px;margin-top:100px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.rv{opacity:0;transform:translateY(24px);transition:.8s}.rv.in{opacity:1;transform:none}
@media(max-width:1000px){.menu{gap:20px}}
@media(max-width:900px){
 .star-wrap{left:auto;right:-16%;opacity:.5;height:520px}
 .menu{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--s1);border-bottom:1px solid var(--line)}
 .menu.open{display:flex}.menu a{padding:16px 24px;border-top:1px solid var(--line)}
 .dd{padding:0}.dd small{display:none}.dd-m{position:static;display:block;min-width:0}
 .dd-in{border:0;border-radius:0;box-shadow:none;padding:0;background:var(--s2)}.dd-in a{padding:13px 24px 13px 44px;border-radius:0;font-size:14px}
 .two,.four{grid-template-columns:1fr!important}
 .burger{display:block}.nav .btn,.util{display:none}.m-only{display:block}
 .lb .pv,.lb .nx{top:auto;bottom:24px}.gal-btns .ext{display:none}
 .hero .wrap,.loop,.arena,.info,.centers{grid-template-columns:1fr}
 .path{grid-template-columns:1fr 1fr;row-gap:32px}.path:before{display:none}
 .hero{padding-top:120px}
}

/* 현재 페이지 메뉴 표시 */
.menu>a,.dd>a{position:relative}
.menu>a.cur,.dd.on>a{color:var(--tx);font-weight:700}
.menu>a.cur:after,.dd.on>a:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;border-radius:3px;background:linear-gradient(90deg,#17aa9d,#6b4dff)}
.dd-in a.cur{background:var(--s2);color:var(--tealt);font-weight:700}
@media(max-width:900px){.menu>a.cur:after,.dd.on>a:after{display:none}.menu>a.cur,.dd.on>a{color:var(--tealt)}}
a.step{display:block;color:inherit;transition:transform .25s}a.step:hover{transform:translateY(-4px)}a.step:hover h3{color:var(--tealt)}