@import url('../assets/fonts/pretendardvariable-dynamic-subset.css');
:root{--bg:#08090a;--ink:#f2f4f5;--mute:#8d9499;--line:#23272a;--cy:#31b0e6;--pad:clamp(20px,5vw,72px)}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;font-size:17px;line-height:1.7;word-break:keep-all;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:700;letter-spacing:-.03em;line-height:1.16}
.k{font-size:13px;letter-spacing:.14em;color:var(--cy);text-transform:uppercase;font-weight:600}
.hd{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px var(--pad);transition:background .3s}
.hd:before{content:'';position:absolute;inset:0 0 -34px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.62),transparent);opacity:0;transition:opacity .3s}.hd.on:before{opacity:1}
.hd img{height:77px;width:auto}
.hd nav{display:flex;gap:34px;font-size:15px}
.hd nav a{color:#c7ccd0;transition:color .2s}.hd nav a:hover,.hd nav a[aria-current]{color:#fff}
.mb{display:none;background:none;border:0;color:#fff;font:inherit;padding:6px 0;cursor:pointer}
/* 히어로: 스크롤에 영상이 묶인다 */
.hero{position:relative;height:340vh}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.stage canvas,.stage>img{position:absolute;inset:0}
.stage:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 26%,transparent 38%,rgba(0,0,0,.6) 66%,rgba(0,0,0,.86))}
.cap{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(56px,11vh,120px);opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}
.cap.on{opacity:1;transform:none}
.cap h1,.cap h2{font-size:clamp(38px,7.2vw,104px);max-width:13em}
.cap p{margin-top:14px;font-size:clamp(16px,1.5vw,20px);color:#d5d9dc;max-width:34em}
.hint{position:absolute;z-index:2;right:var(--pad);bottom:28px;font-size:12px;letter-spacing:.14em;color:#aab0b4}
/* 전면 패널 */
.stack{position:relative}
.pn{position:sticky;top:0;height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#000}
.pn .m{position:absolute;inset:0;will-change:transform;transform-origin:50% 60%}
.pn:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.55) 38%,transparent 68%)}
.veil{position:absolute;inset:0;z-index:3;background:#000;opacity:var(--dim,0);pointer-events:none}
.pn .t{position:relative;z-index:2;padding:0 var(--pad) clamp(56px,9vw,110px);max-width:860px}
.pn h2{font-size:clamp(32px,5vw,72px);margin:12px 0 16px}
.pn p{color:#d3d7da;max-width:32em}
/* 목록 */
.sec{padding:clamp(90px,12vw,170px) var(--pad)}
.sec>h2{font-size:clamp(30px,4.6vw,64px);max-width:15em;margin-top:10px}
.pl{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.pi{display:grid;grid-template-columns:1.1fr 1.5fr auto;gap:28px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);transition:padding .3s}
.pi:hover{padding-left:14px}.pi h3{font-size:clamp(23px,2.6vw,36px)}.pi p{color:var(--mute);font-size:16px}.pi em{font-style:normal;color:var(--cy)}
.cta{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden}
.cta .m{position:absolute;inset:0}.cta .m:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.6)}
.cta .t{position:relative;z-index:2;padding:0 var(--pad)}
.cta h2{font-size:clamp(34px,5.6vw,80px)}
.btn{display:inline-block;margin-top:30px;padding:15px 30px;background:var(--cy);color:#04151d;font-weight:700;border-radius:2px;transition:background .2s}
.btn:hover{background:#6ccbf2}
/* 도입·절차·실적 */
.lead{padding-bottom:clamp(40px,6vw,80px)}.lead h2{font-size:clamp(38px,7vw,100px)!important}
.sts{margin-top:clamp(44px,6vw,84px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)}
.st{padding-top:18px}.st b{color:var(--cy);font-size:15px;font-weight:600;letter-spacing:.08em}
.st h3{font-size:clamp(22px,2.2vw,30px);margin:12px 0 10px}.st p{color:var(--mute);font-size:16px}
.proof{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:clamp(28px,6vw,90px);padding:0 var(--pad) clamp(90px,12vw,170px)}
.proof .fg{aspect-ratio:7/4;overflow:hidden}.proof h2{font-size:clamp(30px,4vw,58px);margin:12px 0 16px}.proof p{color:#c4c9cd}
.two{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}.two .btn{margin:0}
.btn.ghost{background:none;color:#fff;box-shadow:inset 0 0 0 1px #fff}.btn.ghost:hover{background:#fff;color:#08090a}
[id]{scroll-margin-top:110px}
/* 4M+S 패널 */
.lead p{margin-top:22px;max-width:36em;color:#c4c9cd;font-size:clamp(17px,1.5vw,20px)}
.mp:after{background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.38) 42%,transparent 72%),linear-gradient(0deg,rgba(0,0,0,.6),transparent 46%)}
.mp .t{max-width:none;width:100%}
.rail{display:flex;gap:.5em;font-size:clamp(17px,1.7vw,24px);letter-spacing:.02em}.rail b{font-weight:700;color:rgba(255,255,255,.26);transition:color .4s}.rail b.on{color:var(--cy)}
.w{display:flex;align-items:baseline;gap:.22em;margin-top:8px;font-size:clamp(58px,13vw,190px);font-weight:700;letter-spacing:-.045em;line-height:1.02}
.w em{font-style:normal;font-size:max(.17em,16px);letter-spacing:0;font-weight:500;color:var(--cy)}
.mp h2{font-size:clamp(26px,3.3vw,46px);margin:14px 0 10px}.mp h2 .ln+.ln{margin-top:0}
.go{display:inline-block;margin-top:14px;padding-bottom:2px;font-weight:600;font-size:15px;border-bottom:1px solid var(--cy);transition:color .2s}.go:hover{color:var(--cy)}
.after{padding-top:clamp(90px,12vw,170px)}
.nm{border-top:1px solid var(--line)}
.names{margin-top:clamp(40px,6vw,76px);border-top:1px solid var(--line)}
.nmi{display:grid;grid-template-columns:clamp(58px,9vw,130px) minmax(150px,1fr) 2fr;align-items:baseline;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.nmi b{font-size:clamp(38px,5.4vw,78px);line-height:1;color:var(--cy);font-weight:700}.nmi h3{font-size:clamp(21px,2.3vw,32px)}.nmi p{color:#c4c9cd}
/* 하위 페이지 */
.ph{position:relative;height:74vh;min-height:480px;display:flex;align-items:flex-end;overflow:hidden}
.ph .m{position:absolute;inset:0}.ph:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent 62%)}
.ph .t{position:relative;z-index:2;padding:0 var(--pad) 34px}
.ph h1{font-size:clamp(40px,7vw,96px);margin-top:10px}
.sp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:center;padding:clamp(56px,8vw,110px) var(--pad)}
.sp:nth-of-type(even) .fg,div:nth-of-type(even)>.sp .fg{order:2}
.sp .fg{aspect-ratio:7/4;overflow:hidden}
.sp h2{font-size:clamp(27px,3.4vw,46px);margin:10px 0 14px}
.sp p{color:#c4c9cd}
.dl{margin-top:22px;border-top:1px solid var(--line);font-size:15px}
.dl div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line)}
.dl dt{color:var(--mute)}.dl dd{margin:0;text-align:right}
.note{margin-top:14px;font-size:13.5px;color:var(--mute)}
.ct{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);padding:clamp(50px,7vw,90px) var(--pad) clamp(90px,10vw,140px)}
.ct h2{font-size:clamp(26px,3vw,40px);margin-bottom:18px}
.ct ol{padding-left:20px;color:#c4c9cd}.ct li{margin-bottom:8px}
.big{display:block;font-size:clamp(23px,2.6vw,34px);font-weight:600;letter-spacing:-.02em}.big:hover{color:var(--cy)}
.ft{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding:44px var(--pad) 104px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
.ft strong{color:var(--ink)}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s,transform .9s}.js .rv.in{opacity:1;transform:none}
/* 제목: 줄 단위로 밀려 올라온다 */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block}
.js .ln>span{transform:translateY(112%);transition:transform 1s cubic-bezier(.16,.84,.24,1)}
.js .ln+.ln>span{transition-delay:.11s}
.js .in .ln>span,.js .in.rv .ln>span,.js .cap.on .ln>span{transform:none}
.js .ph .ln>span{animation:up 1.1s .15s cubic-bezier(.16,.84,.24,1) both}
.js .ph .m img{animation:settle 2.2s cubic-bezier(.16,.84,.24,1) both}
@keyframes up{from{transform:translateY(112%)}to{transform:none}}
@keyframes settle{from{transform:scale(1.14)}to{transform:none}}
/* 이미지: 왼쪽에서 열리며 안착 */
.js .sp .fg,.js .proof .fg{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1),opacity .3s}
.js .sp.in .fg,.js .proof .fg.in{clip-path:inset(0)}
.js .sp .fg img,.js .proof .fg img{transform:scale(1.2);transition:transform 1.8s cubic-bezier(.16,.84,.24,1)}
.js .sp.in .fg img,.js .proof .fg.in img{transform:none}
/* 단계: 선이 그려지며 차례로 */
.st{position:relative;border-top:0}.st:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--cy);transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.7,0,.2,1)}
.st.in:before{transform:none}.st:nth-child(2),.st:nth-child(2):before{transition-delay:.14s}.st:nth-child(3),.st:nth-child(3):before{transition-delay:.28s}.st:nth-child(4),.st:nth-child(4):before{transition-delay:.42s}
@media(max-width:820px){
 .mb{display:block}.hd nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:rgba(8,9,10,.97);padding:6px var(--pad) 18px}
 .mp:after{background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.6) 44%,transparent 74%)}
 .mp:nth-child(1) video{object-position:19% 50%}
 .hd img{height:62px}.nmi{grid-template-columns:58px 1fr}.nmi p{grid-column:2}
 .hd.open nav{display:flex}.hd nav a{padding:12px 0;font-size:18px}.hd.open{background:rgba(8,9,10,.97)}
 .hero{height:240vh}.sts{grid-template-columns:1fr 1fr}.proof{grid-template-columns:1fr}.pi{grid-template-columns:1fr;gap:6px}
 .sp,.ct{grid-template-columns:1fr}.sp .fg,.sp:nth-of-type(even) .fg,div:nth-of-type(even)>.sp .fg{order:0}
}
@media(prefers-reduced-motion:reduce){.js .rv,.js .ln>span,.js .ph .ln>span,.js .ph .m img,.js .sp .fg,.js .proof .fg,.js .sp .fg img,.js .proof .fg img{opacity:1;transform:none;clip-path:none;animation:none;transition:none}.st:before{transform:none}}
/* 개인정보처리방침 */
.pol{max-width:860px;padding-top:150px}.pol h1{font-size:clamp(34px,5vw,60px);margin:10px 0 34px}
.pol h3{font-size:20px;margin:38px 0 10px}.pol p,.pol ul{color:#c4c9cd;margin-bottom:10px}.pol ul{padding-left:20px}.pol b{color:var(--ink)}.pol a{text-decoration:underline}
.tb{overflow-x:auto;margin:12px 0}.pol table{width:100%;min-width:620px;border-collapse:collapse;font-size:14.5px;color:#c4c9cd}.pol th,.pol td{padding:10px;border:1px solid var(--line);text-align:left;vertical-align:top}.pol th{color:var(--ink)}
.ft a{text-decoration:underline}.ai-n a{color:#c7ccd0;text-decoration:underline}
/* AI 상담원 */
.ai-b{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:30;display:flex;align-items:center;gap:11px;padding:8px 24px 8px 8px;border:0;border-radius:999px;background:linear-gradient(120deg,#0a1f3d,#123058 55%,#0a1f3d);background-size:220% 100%;color:#fff;font:inherit;font-size:18px;font-weight:800;letter-spacing:-.01em;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.2);animation:aiflow 5s linear infinite,ainudge 7s 2s ease-in-out infinite;transition:box-shadow .2s}
.ai-b i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:#0a1f3d;font-style:normal;font-size:13px;font-weight:800;letter-spacing:-.02em}
.ai-b:before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px rgba(255,255,255,.5);animation:airing 2.4s ease-out infinite;pointer-events:none}
.ai-b:hover{box-shadow:0 14px 38px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.5);animation-play-state:paused}
@keyframes aiflow{to{background-position:-220% 0}}
@keyframes airing{0%{transform:scale(1);opacity:.85}80%,100%{transform:scale(1.16,1.38);opacity:0}}
@keyframes ainudge{0%,86%,100%{transform:none}89%{transform:translateY(-9px)}92%{transform:none}95%{transform:translateY(-4px)}}
.ai{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:31;display:none;flex-direction:column;width:min(400px,calc(100vw - 32px));height:min(620px,calc(100svh - 32px));background:#0e1012;border:1px solid #2c3135;box-shadow:0 18px 60px rgba(0,0,0,.65)}
.ai.open{display:flex}
.ai header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.ai header b{font-size:15px}.ai header small{display:block;color:var(--mute);font-size:12px;font-weight:400}
.ai header button{background:none;border:0;color:#c7ccd0;font:inherit;font-size:14px;cursor:pointer;padding:4px}
.ai-l{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.6}
.ai-l p{max-width:88%;padding:9px 12px;white-space:pre-wrap;background:#191c1f}.ai-l p.me{align-self:flex-end;background:#123d50}
.ai-l p.err{background:none;color:#f0a8a0;padding:0}
.ai form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.ai input,.ai textarea{width:100%;min-width:0;padding:10px;background:#16191b;border:1px solid #2c3135;color:var(--ink);font:inherit;font-size:16px;border-radius:2px}
.ai textarea{resize:none;height:44px}
.ai form button{padding:0 14px;border:0;background:var(--cy);color:#04151d;font:inherit;font-weight:700;font-size:15px;border-radius:2px;cursor:pointer;white-space:nowrap}
.ai button:disabled{opacity:.5;cursor:default}
.ai-n{padding:0 14px 8px;font-size:12px;line-height:1.5;color:var(--mute)}
.ai-l p.ok{align-self:center;padding:3px 12px;border-radius:999px;background:#10324a;color:#bfe7fa;font-size:12.5px}
.ai-l p.ai-t{display:flex;align-items:center;gap:12px;background:none;padding:18px 2px 6px}
.ai-t small{font-size:13px;line-height:20px;color:var(--mute)}
.ai-d{display:inline-flex;gap:2px;height:20px;font-size:20px;font-weight:800;line-height:20px;color:var(--cy)}
.ai-d b{display:block;transform-origin:50% 100%;animation:aibounce .84s infinite}
.ai-d b:nth-child(2){animation-delay:.13s}.ai-d b:nth-child(3){animation-delay:.26s}
@keyframes aibounce{0%,100%{transform:translateY(0) scale(1.18,.78);animation-timing-function:cubic-bezier(.2,.7,.4,1)}12%{transform:translateY(-3px) scale(.92,1.12)}50%{transform:translateY(-13px) scale(1,1);animation-timing-function:cubic-bezier(.6,0,.8,.4)}88%{transform:translateY(-2px) scale(.94,1.1)}}
@media(prefers-reduced-motion:reduce){.ai-b,.ai-b:before{animation:none}}