/* GREIN — site.css (2026-11-04) */
@font-face{font-family:'Pretendard';src:url(../fonts/display.woff2) format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
@font-face{font-family:'Orbitron';src:url(../fonts/orbitron.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%;background:#000}
body{margin:0;background:#000;color:#FFFFFF;font-family:'Pretendard',sans-serif;letter-spacing:-0.01em;word-break:keep-all;-webkit-font-smoothing:antialiased}
html.menu-open,html.menu-open body{overflow:hidden}
.site{width:100%;background:#000000;color:#FFFFFF;font-family:'Orbitron','Pretendard',sans-serif;letter-spacing:0}
a{color:#FFFFFF}a:hover{color:#BDBDBD}
img{max-width:100%}
button{font-family:inherit}
.mono{font-family:'Orbitron','Pretendard',sans-serif;letter-spacing:0;text-transform:uppercase}
/* 한글 위주 줄(영문 글자 수의 절반 이상이 한글)은 Pretendard — 빌드 때 data-ko를 붙여 둠 */
[data-ko]{font-family:'Pretendard',sans-serif !important;letter-spacing:-0.01em}
.navlink{position:relative}
.navlink::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#FFFFFF;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.navlink:hover::after,.navlink.is-active::after{transform:scaleX(1);transform-origin:left}
.glass{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.notch{position:relative;z-index:2;margin-top:-48px;clip-path:polygon(0 0,64% 0,calc(64% + 36px) 48px,100% 48px,100% 100%,0 100%)}
.ph{position:relative;overflow:hidden;background:#161616}
.sample-tag{position:absolute;left:12px;top:12px;z-index:2;margin:0;padding:6px 8px;background:rgba(14,14,14,.85);color:#FFFFFF;font-family:'Pretendard',sans-serif;font-size:10px;line-height:1;letter-spacing:.02em;white-space:nowrap;pointer-events:none}
.btn-line{transition:background .4s,color .4s;letter-spacing:0}
.btn-line:hover{background:#FFFFFF !important;color:#000000 !important}
.btn-fill{letter-spacing:0;transition:background .3s,color .3s}
.btn-fill:hover{background:#DADADA !important;color:#000000 !important}
.trace{stroke-dasharray:60 1400;animation:trace 7s linear infinite}
@keyframes trace{from{stroke-dashoffset:1460}to{stroke-dashoffset:0}}
.rise{animation:rise 1.2s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
.plus{position:relative;width:9px;height:9px;justify-self:center}
.plus::before{content:'';position:absolute;left:4px;top:0;width:1px;height:9px;background:#BDBDBD}
.plus::after{content:'';position:absolute;top:4px;left:0;width:9px;height:1px;background:#BDBDBD}
.row-link{transition:padding .5s cubic-bezier(.16,1,.3,1)}
.row-link:hover{padding-left:16px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 16px;background:#FFFFFF;color:#000}
.skip:focus{left:16px;top:16px}

/* ---------- header ---------- */
.hdr{position:fixed;top:16px;left:16px;right:16px;z-index:20;display:flex;justify-content:center}
.hdr-bar{width:100%;max-width:1408px;height:60px;border-radius:0;background:rgba(14,14,14,.72);display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 20px;box-sizing:border-box}
.hdr-logo{display:flex;align-items:center;color:#FFFFFF}
.hdr-logo svg{width:104px;height:auto;display:block}
.nav-links{display:flex;gap:40px;font-size:12px;font-weight:500;letter-spacing:0}
.nav-links a{text-decoration:none;color:#FFFFFF}
.hdr-cta{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:0;background:#FFFFFF;color:#000000;text-decoration:none;font-size:11px;font-weight:600}
.menu-btn{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);border-radius:0;background:transparent;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-btn span{display:block;width:16px;height:1px;background:#FFFFFF;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s}
.menu-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;inset:0;z-index:19;background:#000000;flex-direction:column;justify-content:space-between;padding:120px 20px 40px;box-sizing:border-box;animation:mmIn .7s cubic-bezier(.76,0,.24,1) both}
@keyframes mmIn{from{clip-path:polygon(100% 0,100% 0,100% 0,140% 100%)}to{clip-path:polygon(-40% 0,100% 0,100% 100%,0 100%)}}
.mm-nav{display:flex;flex-direction:column;border-top:0}
.mm-link{--k:1;position:relative;display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:0 !important;text-decoration:none;color:#FFFFFF;font-size:28px;font-weight:500;letter-spacing:0;opacity:0;transform:translateY(28px);filter:blur(8px);animation:mmLink .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.28s + var(--k) * 70ms)}
.mm-link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#2E2E2E;transform:scaleX(0);transform-origin:left;animation:mmRule .9s cubic-bezier(.65,0,.35,1) both;animation-delay:calc(.34s + var(--k) * 70ms)}
.mm-link:first-child::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:#2E2E2E;transform:scaleX(0);transform-origin:left;animation:mmRule .9s cubic-bezier(.65,0,.35,1) .3s both}
.mm-arrow{width:14px;height:14px;opacity:.5;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s}
.mm-link:hover .mm-arrow,.mm-link:active .mm-arrow{transform:translate(3px,-3px);opacity:1}
.mm-foot{margin:0;font-size:13px;line-height:1.7;color:#BDBDBD;opacity:0;animation:mmLink .8s cubic-bezier(.16,1,.3,1) .75s both}
@keyframes mmLink{to{opacity:1;transform:none;filter:none}}
@keyframes mmRule{to{transform:scaleX(1)}}
.cursor-ring{position:fixed;left:0;top:0;z-index:60;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid #FFFFFF;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:difference;transition:opacity .3s,width .45s cubic-bezier(.16,1,.3,1),height .45s cubic-bezier(.16,1,.3,1),margin .45s cubic-bezier(.16,1,.3,1),background-color .3s}
.has-cursor,.has-cursor *{cursor:none !important}

/* ---------- auto reveal (sub pages) ---------- */
.ar{transition:opacity .9s cubic-bezier(.22,1,.36,1) var(--ar-d,0ms),translate 1.1s cubic-bezier(.22,1,.36,1) var(--ar-d,0ms),filter .9s cubic-bezier(.22,1,.36,1) var(--ar-d,0ms),clip-path 1.2s cubic-bezier(.65,0,.35,1) var(--ar-d,0ms),scale 1.6s cubic-bezier(.22,1,.36,1) var(--ar-d,0ms)}
.ar-t{opacity:0;translate:0 26px;filter:blur(8px)}
.ar-h{opacity:0;translate:0 .45em;filter:blur(10px);clip-path:inset(0 0 100% 0)}
.ar-i{clip-path:polygon(0 0,0 0,-40% 100%,-40% 100%);scale:1.14}
.ar.ar-in{opacity:1;translate:none;filter:none;scale:none}
.ar-h.ar-in{clip-path:inset(-0.3em -0.3em -0.3em -0.3em)}
.ar-i.ar-in{clip-path:polygon(0 0,140% 0,100% 100%,-40% 100%)}

/* ---------- per-character blur reveal ---------- */
.split .wd{display:inline-block;white-space:nowrap;margin-right:.26em}
.split .ch{display:inline-block;opacity:0;transform:translateY(50px);filter:blur(12px);will-change:transform,opacity,filter}
.split.is-in .ch{animation:charIn .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 35ms + var(--d, 0ms))}
@keyframes charIn{to{opacity:1;transform:none;filter:blur(0)}}

/* ---------- type-on reveal with slash caret ---------- */
.tw-in{position:relative;display:inline-block;--ms:42ms}
.tw .type{display:inline-block;clip-path:inset(0 100% 0 0)}
.tw .caret{position:absolute;top:.08em;bottom:.04em;left:0;width:.38em;margin-left:.08em;background:currentColor;clip-path:polygon(0 0,38% 0,100% 100%,62% 100%);opacity:0;pointer-events:none}
.tw.is-in .type{animation:typeOn calc(var(--steps) * var(--ms)) steps(var(--steps)) var(--d, 0ms) both}
.tw.is-in .caret{animation:caretMove calc(var(--steps) * var(--ms)) steps(var(--steps)) var(--d, 0ms) both, caretBlink .5s steps(1) calc(var(--d, 0ms) + var(--steps) * var(--ms)) 3 forwards}
@keyframes typeOn{to{clip-path:inset(0 0 0 0)}}
@keyframes caretMove{from{left:0;opacity:1}to{left:100%;opacity:1}}
@keyframes caretBlink{0%{opacity:1}50%{opacity:0}100%{opacity:0}}
.hero-stmt .tw-in{--ms:55ms}

/* ---------- shared micro-interactions ---------- */
.ph img{transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.ph:hover img{transform:scale(1.05)}
a svg{transition:transform .5s cubic-bezier(.16,1,.3,1)}
a:hover svg{transform:translate(2px,-2px)}
@keyframes rvUp{from{opacity:0;transform:translateY(40px)}}

/* ---------- pinned stages ---------- */
.stage{position:sticky;top:0;height:min(100vh,960px);overflow:hidden}
.pin-track{position:relative;view-timeline-name:--pin}
.sel-track{position:relative;view-timeline-name:--sel}
.pin-fill{transform-origin:left}
.hero-track{view-timeline-name:--hero}
.hx-track{view-timeline-name:--hx}
.orb-track{view-timeline-name:--orb}
.slit-track{view-timeline-name:--slit}
.sol-track{view-timeline-name:--sol}
.work-track{view-timeline-name:--work}
@keyframes pinFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes psOn{from{opacity:.18;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes selA{0%,80%{opacity:1}100%{opacity:.18}}
@keyframes selM{0%{opacity:.18}20%,80%{opacity:1}100%{opacity:.18}}
@keyframes selZ{0%{opacity:.18}20%,100%{opacity:1}}
/* panel versions: inactive panels go fully transparent (the list keeps the .18 dim) so they never ghost over the active one */
@keyframes selPA{0%,80%{opacity:1}100%{opacity:0}}
@keyframes selPM{0%{opacity:0}20%,80%{opacity:1}100%{opacity:0}}
@keyframes selPZ{0%{opacity:0}20%,100%{opacity:1}}
@keyframes selBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes wfill{from{opacity:.14}}
@keyframes slashReveal{from{clip-path:polygon(0% 0%,-25% 0%,0% 100%,0% 100%)}to{clip-path:polygon(0% 0%,100% 0%,125% 100%,0% 100%)}}
@keyframes parY{from{transform:translateY(-8%)}to{transform:translateY(8%)}}
@keyframes lineGrow{from{transform:scaleX(0)}}
@keyframes countUp{from{opacity:0;transform:translateY(40%)}}

/* ---------- home: intro ---------- */
.intro2{position:fixed;inset:0;z-index:40;background:#000;display:flex;align-items:center;justify-content:center;pointer-events:none;clip-path:polygon(-25% 0,125% 0,125% 100%,0 100%);animation:slashOut .9s cubic-bezier(.76,0,.24,1) 1.55s forwards}
@keyframes slashOut{to{clip-path:polygon(125% 0,125% 0,125% 100%,150% 100%)}}
.gr-draw path{stroke-dasharray:1400;stroke-dashoffset:1400;fill:rgba(255,255,255,0);animation:grDraw 1.2s cubic-bezier(.65,0,.35,1) .1s forwards}
@keyframes grDraw{70%{stroke-dashoffset:0;fill:rgba(255,255,255,0)}100%{stroke-dashoffset:0;fill:rgba(255,255,255,1)}}
.after-intro{animation:rise 1.4s cubic-bezier(.16,1,.3,1) 2.3s both}

/* ---------- home: hero + scroll stages ---------- */
.wire-g{opacity:.18}
.copy-b{opacity:0}
.hx-text{white-space:nowrap;width:max-content;background:linear-gradient(180deg,#FFFFFF 30%,#6E6E6E 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.orb-list{display:none}
.wcard{position:absolute;left:calc(var(--cw) / -2);top:calc(var(--ch) / -2);width:var(--cw);height:var(--ch);box-sizing:border-box;padding:20px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;text-decoration:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.09)}
.wcard > *{position:relative}
.wheel,.wcard{will-change:transform}
.wheel-copy::before{content:'';position:absolute;z-index:-1;inset:-40px -72px -48px -40px;background:linear-gradient(90deg,#FFFFFF 62%,rgba(255,255,255,0));pointer-events:none}
.wheel-copy{isolation:isolate}
.wh-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #0E0E0E;border-radius:0;background:transparent;color:#0E0E0E;cursor:pointer;transition:background .3s,color .3s}.wh-btn svg{width:14px;height:14px}.wh-btn:hover{background:#0E0E0E;color:#FFFFFF}
.wh-bar{transition:width .6s cubic-bezier(.65,0,.35,1)}
.wheel-wrap{cursor:grab;touch-action:pan-y;outline:none}.wheel-wrap.dragging{cursor:grabbing}.wheel-wrap.dragging .wcard{pointer-events:none}
.wcard{-webkit-user-drag:none;user-select:none}.wcard img{-webkit-user-drag:none;pointer-events:none}
.wcard *{transition-timing-function:cubic-bezier(.22,1,.36,1)}
.fx-spark .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .1s}
.fx-spark .dot{opacity:0;transform-origin:200px 6px;transform:scale(0);transition:opacity .3s 1s,transform .5s cubic-bezier(.34,1.56,.64,1) 1s}
.on .fx-spark .draw{stroke-dashoffset:0}.on .fx-spark .dot{opacity:1;transform:scale(1)}
.fx-img img{transform:scale(1.22);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.fx-img{clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%);transition:clip-path 1s cubic-bezier(.65,0,.35,1)}
.on .fx-img{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}.on .fx-img img{transform:scale(1)}
.fx-prog .fill{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.65,0,.35,1) .15s}
.on .fx-prog .fill{transform:scaleX(1)}
.fx-pop{opacity:0;transform:translateY(40px) scale(.6);transition:opacity .4s,transform .9s cubic-bezier(.34,1.56,.64,1)}
.on .fx-pop{opacity:1;transform:none}
.fx-up{opacity:0;transform:translateY(14px);transition:opacity .5s .35s,transform .7s .35s}
.on .fx-up{opacity:1;transform:none}
.fx-slashes svg{opacity:0;transform:translate(-14px,-20px);transition:opacity .4s var(--d),transform .7s var(--d)}
.on .fx-slashes svg{opacity:1;transform:none}
.fx-b1,.fx-b2{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .4s,transform .5s}
.fx-typing{display:flex;gap:3px;padding:8px 10px;background:#2A2A2A;opacity:0;transition:opacity .2s}
.fx-typing i{width:4px;height:4px;background:#BDBDBD;animation:typing 1s infinite}
.fx-typing i:nth-child(2){animation-delay:.15s}.fx-typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,100%{opacity:.25}50%{opacity:1}}
.on .fx-b1{opacity:1;transform:none;transition-delay:.15s}
.on .fx-typing{opacity:1;animation:typingShow 1.5s forwards}
@keyframes typingShow{0%,30%{opacity:0;height:auto}35%,85%{opacity:1}100%{opacity:0;height:0;padding:0;margin:0}}
.on .fx-b2{opacity:1;transform:none;transition-delay:1.5s}
.fx-line{display:block;overflow:hidden}
.fx-line > span{display:block;transform:translateY(105%);transition:transform .8s cubic-bezier(.22,1,.36,1) var(--d)}
.on .fx-line > span{transform:none}
.fx-bars .bar{transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.34,1.3,.64,1) var(--d)}
.on .fx-bars .bar{transform:scaleY(1)}
.fx-wipe{clip-path:polygon(0 0,0 0,-40% 100%,-40% 100%);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1) .1s}
.on .fx-wipe{clip-path:polygon(0 0,140% 0,100% 100%,-40% 100%)}
.cone{position:absolute;inset:0;pointer-events:none;filter:blur(22px);opacity:.8;transform-origin:10% 52%}
.cone::before{content:'';position:absolute;inset:0;clip-path:polygon(10% 52%,100% -6%,100% 110%);background:radial-gradient(ellipse 62% 58% at 10% 52%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.42) 18%,rgba(255,255,255,.12) 48%,rgba(255,255,255,0) 82%)}
.cone::after{content:'';position:absolute;left:10%;top:52%;width:62%;height:3px;margin-top:-1px;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,0))}
.scr2,.scr3{opacity:0}
.sheet-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
/* voices */
.vq{opacity:.28;filter:blur(1.5px);transition:opacity .8s cubic-bezier(.22,1,.36,1),filter .8s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);transform:translateX(0)}
.vq.on{opacity:1;filter:none;transform:translateX(16px)}
.vq-line{position:absolute;left:0;right:0;top:0;height:1px;background:#2E2E2E;transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.65,0,.35,1)}
.vq.seen .vq-line{transform:scaleX(1)}
.vq.on .vq-line{background:#FFFFFF}
.vq-no{transition:color .6s}.vq.on .vq-no{color:#FFFFFF !important}
.vq-mark{display:inline-block;transition:transform .9s cubic-bezier(.34,1.56,.64,1)}
.vq:not(.on) .vq-mark{transform:translateY(-.25em) rotate(-12deg)}
.vq-reel{transition:transform .8s cubic-bezier(.65,0,.35,1)}
.vq-bar{transform-origin:left;transition:width .8s cubic-bezier(.65,0,.35,1)}
.vq-slash{transition:transform .8s cubic-bezier(.65,0,.35,1)}
@keyframes solidOut{to{opacity:0;transform:scale(1.3);filter:blur(8px)}}
@keyframes wireIn{from{opacity:0;transform:translate(-50%,-50%) scale(.82) skewX(-8deg)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes starsIn{from{opacity:.25}to{opacity:1}}
@keyframes fadeUpOut{to{opacity:0;transform:translateY(-48px)}}
@keyframes fadeUpIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes slideX{from{transform:translateX(70vw)}to{transform:translateX(calc(-100% + 30vw))}}
@keyframes coneOpen{from{transform:scaleX(.55);opacity:.3}to{transform:scaleX(1.25);opacity:.85}}
@keyframes slitOpen{from{clip-path:polygon(26% 0%,27.5% 0%,74.5% 100%,73% 100%)}to{clip-path:polygon(-60% 0%,110% 0%,160% 100%,-10% 100%)}}
@keyframes slitZoom{from{transform:scale(1.4)}to{transform:scale(1)}}
@keyframes scrOut{to{opacity:0;transform:translateY(-24px)}}
@keyframes scrMid{0%{opacity:0;transform:translateY(24px)}20%{opacity:1;transform:none}80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-24px)}}
@keyframes barY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes barX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes stepHi{0%{opacity:.25}30%{opacity:1}70%{opacity:1}100%{opacity:.25}}
@keyframes slideRow{from{transform:translateX(30vw)}to{transform:translateX(calc(-100% + 100vw))}}
@keyframes par{from{transform:translateX(-9%)}to{transform:translateX(9%)}}

/* ---------- about / service / solution / contact ---------- */
.draw path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.6s cubic-bezier(.65,0,.35,1) .2s both}
@keyframes draw{to{stroke-dashoffset:0}}
.hover-row{position:relative;transition:padding .5s cubic-bezier(.16,1,.3,1)}
.hover-row:hover{padding-left:16px !important}
.slash-in{animation:slashIn 1.4s cubic-bezier(.16,1,.3,1) both}
@keyframes slashIn{from{opacity:0;transform:translateX(-60px)}}
.open-in{animation:openIn .7s cubic-bezier(.16,1,.3,1) both}
@keyframes openIn{from{opacity:0;transform:translateY(-12px)}}
.acc-btn{transition:padding .5s cubic-bezier(.16,1,.3,1)}
.acc-btn:hover{padding-left:12px !important}
.acc-head{width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) 24px;align-items:center;gap:16px;padding:28px 0;background:transparent;border:0;cursor:pointer;text-align:left;color:#0E0E0E;font-family:'Orbitron','Pretendard',sans-serif;letter-spacing:0}
.acc-panel[hidden],.svc-list[hidden],.form-done[hidden],.form-fill[hidden]{display:none !important}
.faq-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;background:transparent;border:0;cursor:pointer;text-align:left;color:#0E0E0E;font-family:'Pretendard',sans-serif;font-size:17px;font-weight:500}
.faq-head .acc-sign{font-family:'Orbitron','Pretendard',sans-serif}
.tab{height:40px;padding:0 16px;border:0;border-radius:0;background:transparent;color:#5A5A5A;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:0;text-transform:uppercase}
.tab[aria-selected="true"]{background:#0E0E0E;color:#FFFFFF}
.pkg{position:sticky}
.pick{transition:padding .5s cubic-bezier(.16,1,.3,1),color .3s}
.pick:hover{padding-left:12px !important}
.sel-panel-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.phone{position:relative;border-radius:34px;overflow:hidden;background:#FFFFFF}
/* contact */
.wm{animation:wm 1.6s cubic-bezier(.16,1,.3,1) .3s both}
@keyframes wm{from{transform:translateY(40%)}}
.field{width:100%;box-sizing:border-box;height:52px;padding:0 0 4px;border:0;border-bottom:1px solid #9A9A9A;border-radius:0;background:linear-gradient(#0E0E0E,#0E0E0E) no-repeat left bottom / 0% 2px;color:#0E0E0E;font-family:'Pretendard',sans-serif;font-size:17px;outline:none;transition:background-size .5s cubic-bezier(.16,1,.3,1),border-color .3s;-webkit-appearance:none;appearance:none}
.field::placeholder{color:#7A7A7A}
.field:hover{border-bottom-color:#5A5A5A}
.field:focus,.field:focus-visible{background-size:100% 2px;border-bottom-color:#0E0E0E}
textarea.field{height:140px !important;padding:14px 0 !important;resize:vertical}
select.field{cursor:pointer}
.sel-wrap{position:relative;display:block}
.sel-wrap::after{content:'';position:absolute;right:2px;top:20px;width:7px;height:12px;background:#0E0E0E;clip-path:polygon(0 0,40% 0,100% 100%,60% 100%);pointer-events:none}
.ctype{height:48px;padding:0 2px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:#5A5A5A;cursor:pointer;font-family:'Pretendard',sans-serif;font-size:18px;font-weight:500;transition:color .3s,border-color .3s}
.ctype[aria-checked="true"]{border-bottom-color:#0E0E0E;color:#0E0E0E;font-weight:700}
.send-btn{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 32px;border:0;border-radius:0;background:#0E0E0E;color:#FFFFFF;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:0;transition:background .3s}
.send-btn:hover{background:#2E2E2E}
/* privacy */
.legal{max-width:860px;margin:0 auto;padding:160px 40px 140px;color:#0E0E0E}
.legal h1{margin:0 0 12px;font-size:clamp(28px,4vw,48px);font-weight:500;letter-spacing:0}
.legal h2{margin:44px 0 12px;font-size:18px;font-weight:700}
.legal p,.legal li{font-size:15px;line-height:1.85;color:#2E2E2E}
.legal ul{padding-left:20px;margin:0}
.legal table{width:100%;border-collapse:collapse;font-size:14px}
.legal th,.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid #D4D4D4;vertical-align:top;line-height:1.7}
.legal th{font-weight:600;white-space:nowrap;color:#0E0E0E}

/* ---------- footer ---------- */
.ft{background:#0A0A0A;color:#FFFFFF;letter-spacing:0;overflow:hidden}
.ft-stage{position:relative;min-height:clamp(640px,100vh,1000px);margin-top:calc(min(32vh,300px) * -1);z-index:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:min(32vh,300px) 20px 0;box-sizing:border-box}
.ft-bg{position:absolute;inset:-12% 0;will-change:transform}
.ft-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(1) contrast(1.05) brightness(.62)}
.ft-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.2) 0%,rgba(10,10,10,.35) 55%,#0A0A0A 100%)}
.ft-copy{will-change:transform,opacity;position:relative;display:flex;flex-direction:column;align-items:center}
.ft-lift{position:relative;z-index:2;transform-origin:50% 100%;will-change:transform,clip-path}
.ft-grid{max-width:1360px;margin:0 auto;padding:56px 40px 40px;display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:32px;border-top:1px solid #1F1F1F}
.ft-grid .navlink{align-self:flex-start;text-decoration:none}
.ft-legal{max-width:1360px;margin:0 auto;padding:0 40px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:11px;line-height:1.8;color:#9A9A9A}
.ft-legal a{color:#9A9A9A;text-decoration:none}
.ft-legal a:hover{color:#FFFFFF}
/* touch targets: small links grow an invisible 44px+ hit area without moving anything on screen */
.ft-legal a,a.tap{position:relative}
.ft-grid .navlink::before,.ft-legal a::before,a.tap::before{content:'';position:absolute;left:-6px;right:-6px;top:-16px;bottom:-16px}

/* ---------- scroll-driven animations (native) ---------- */
@supports (animation-timeline: view()){
  .w{animation:wfill linear both;animation-timeline:view();animation-range:cover 10% cover 35%}
  .slash-reveal{animation:slashReveal linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  .par-y{animation:parY linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .line-grow{transform-origin:left;animation:lineGrow linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .rv{animation:rvUp linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .count{animation:countUp linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
  .pin-fill{animation:pinFill linear both;animation-timeline:--pin;animation-range:contain 0% contain 100%}
  .ps{animation:psOn linear both;animation-timeline:--pin}
  .selA{animation:selA linear both;animation-timeline:--sel}
  .selM{animation:selM linear both;animation-timeline:--sel}
  .selZ{animation:selZ linear both;animation-timeline:--sel}
  .sel-panels .selA{animation-name:selPA}.sel-panels .selM{animation-name:selPM}.sel-panels .selZ{animation-name:selPZ}
  .selbar{transform-origin:top;animation:selBar linear both;animation-timeline:--sel;animation-range:contain 0% contain 100%}
  .slit-img{animation:slitOpen linear both;animation-timeline:--slit;animation-range:contain 0% contain 55%}
  .slit-inner{animation:slitZoom linear both;animation-timeline:--slit;animation-range:contain 0% contain 100%}
  .slit-c1{animation:fadeUpOut linear both;animation-timeline:--slit;animation-range:contain 0% contain 20%}
  .slit-c2{animation:fadeUpIn linear both;animation-timeline:--slit;animation-range:contain 55% contain 78%}
  .scr1{animation:scrOut linear both;animation-timeline:--sol;animation-range:contain 30% contain 38%}
  .scr2{animation:scrMid linear both;animation-timeline:--sol;animation-range:contain 30% contain 68%}
  .scr3{animation:fadeUpIn linear both;animation-timeline:--sol;animation-range:contain 60% contain 68%}
  .sol-bar span{animation:barY linear both;animation-timeline:--sol;animation-range:contain 0% contain 100%}
  .step{animation:stepHi linear both;animation-timeline:view();animation-range:cover 20% cover 80%}
  .work-row{animation:slideRow linear both;animation-timeline:--work;animation-range:contain 0% contain 100%}
  .par{animation:par linear both;animation-timeline:--work;animation-range:contain 0% contain 100%}
  .work-bar span{animation:barX linear both;animation-timeline:--work;animation-range:contain 0% contain 100%}
  .solid-g{animation:solidOut linear both;animation-timeline:--hero;animation-range:contain 5% contain 45%}
  .cone{animation:coneOpen linear both;animation-timeline:--hero;animation-range:contain 0% contain 70%}
  .wire-g{animation:wireIn linear both;animation-timeline:--hero;animation-range:contain 20% contain 70%}
  .stars-layer{animation:starsIn linear both;animation-timeline:--hero;animation-range:contain 10% contain 60%}
  .copy-a{animation:fadeUpOut linear both;animation-timeline:--hero;animation-range:contain 0% contain 25%}
  .copy-b{animation:fadeUpIn linear both;animation-timeline:--hero;animation-range:contain 62% contain 88%}
  .hx-text{animation:slideX linear both;animation-timeline:--hx;animation-range:contain 0% contain 100%}
  .hx-sub{animation:fadeUpIn linear both;animation-timeline:--hx;animation-range:contain 0% contain 20%}
}
/* ---------- scroll-driven animations (JS fallback: site.js sets --p on each element) ---------- */
html.no-sda .w,html.no-sda .slash-reveal,html.no-sda .par-y,html.no-sda .reveal,html.no-sda .line-grow,html.no-sda .rv,html.no-sda .count,
html.no-sda .pin-fill,html.no-sda .ps,html.no-sda .selA,html.no-sda .selM,html.no-sda .selZ,html.no-sda .selbar,
html.no-sda .slit-img,html.no-sda .slit-inner,html.no-sda .slit-c1,html.no-sda .slit-c2,html.no-sda .scr1,html.no-sda .scr2,html.no-sda .scr3,html.no-sda .sol-bar span,
html.no-sda .work-row,html.no-sda .par,html.no-sda .work-bar span,html.no-sda .solid-g,html.no-sda .cone,html.no-sda .wire-g,html.no-sda .stars-layer,
html.no-sda .copy-a,html.no-sda .copy-b,html.no-sda .hx-text,html.no-sda .hx-sub{animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;animation-play-state:paused;animation-delay:calc(var(--p,0) * -1s);animation-timeline:auto;animation-range:normal}
html.no-sda .w{animation-name:wfill}
html.no-sda .slash-reveal{animation-name:slashReveal}
html.no-sda .par-y{animation-name:parY}
html.no-sda .reveal{animation-name:rise}
html.no-sda .line-grow{transform-origin:left;animation-name:lineGrow}
html.no-sda .rv{animation-name:rvUp}
html.no-sda .count{animation-name:countUp}
html.no-sda .pin-fill{animation-name:pinFill}
html.no-sda .ps{animation-name:psOn}
html.no-sda .selA{animation-name:selA}
html.no-sda .selM{animation-name:selM}
html.no-sda .selZ{animation-name:selZ}
html.no-sda .sel-panels .selA{animation-name:selPA}html.no-sda .sel-panels .selM{animation-name:selPM}html.no-sda .sel-panels .selZ{animation-name:selPZ}
html.no-sda .selbar{transform-origin:top;animation-name:selBar}
html.no-sda .slit-img{animation-name:slitOpen}
html.no-sda .slit-inner{animation-name:slitZoom}
html.no-sda .slit-c1{animation-name:fadeUpOut}
html.no-sda .slit-c2{animation-name:fadeUpIn}
html.no-sda .scr1{animation-name:scrOut}
html.no-sda .scr2{animation-name:scrMid}
html.no-sda .scr3{animation-name:fadeUpIn}
html.no-sda .sol-bar span{animation-name:barY}
html.no-sda .work-row{animation-name:slideRow}
html.no-sda .par{animation-name:par}
html.no-sda .work-bar span{animation-name:barX}
html.no-sda .solid-g{animation-name:solidOut}
html.no-sda .cone{animation-name:coneOpen}
html.no-sda .wire-g{animation-name:wireIn}
html.no-sda .stars-layer{animation-name:starsIn}
html.no-sda .copy-a{animation-name:fadeUpOut}
html.no-sda .copy-b{animation-name:fadeUpIn}
html.no-sda .hx-text{animation-name:slideX}
html.no-sda .hx-sub{animation-name:fadeUpIn}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .nav-links{display:none !important}.hdr-cta{display:none !important}.menu-btn{display:inline-flex}.mobile-menu.is-open{display:flex}
  .stack{grid-template-columns:repeat(1,minmax(0,1fr)) !important}
  .stack > *{grid-column:auto !important}
  .notch{clip-path:polygon(0 0,58% 0,calc(58% + 36px) 48px,100% 48px,100% 100%,0 100%)}
  .hero-ticker{display:none}.hero-pager{display:none !important}
  .orb-track{height:auto !important;min-height:0 !important}
  .orb-track .stage{position:relative}
  .orb-tile{display:none !important}
  .wheel-copy{left:20px !important;right:20px;top:96px !important;transform:none !important;max-width:none !important}
  .wheel-index{display:none !important}
  .wheel-wrap{top:180px !important}
  .wheel-ctrl{left:20px !important;bottom:28px !important}
  .sol-track{height:auto !important}
  .sol-track .stage{position:relative;height:auto}
  .sol-sticky{display:none !important}
  .scr1,.scr2,.scr3{position:relative !important;opacity:1 !important;margin-bottom:48px}
  .sol-copy{height:auto !important}
  .orb-list{display:grid}
    .vq-sticky{position:static !important}
  .hover-img{display:none}
  .team-row{grid-template-columns:repeat(1,minmax(0,1fr)) !important;gap:4px !important}
  .hero-art{opacity:.35}
  .pkg{position:relative !important;top:auto !important}
  .pin-track,.sel-track{height:auto !important}.pin-track .stage,.sel-track .stage{position:relative;height:auto;padding-bottom:80px !important}.ps,.selA,.selM,.selZ{opacity:1 !important}
  .sel-panels{height:auto !important;display:flex;flex-direction:column;gap:12px;background:transparent !important}
  .sel-panels > div{position:relative !important;inset:auto !important;aspect-ratio:4 / 3}
  .sel-panels .sel-loafy{aspect-ratio:auto;grid-template-columns:1fr 1fr !important;min-height:360px}
  .sel-panels .sel-loafy .phone{height:auto !important;aspect-ratio:9 / 16;width:100%;max-width:240px;margin:0 auto}
  .ft-grid{padding:48px 20px 32px;grid-template-columns:1fr 1fr;gap:28px 24px}
  .ft-grid > div:first-child{grid-column:1 / -1}
  .ft-legal{padding:0 20px 24px}
  .cv-row > div{padding:28px 0 !important;border-right:0 !important;border-bottom:1px solid #BDBDBD}.cv-row > div:last-child{border-bottom:0}
  .gutter{padding-left:20px !important;padding-right:20px !important}
  .legal{padding:140px 20px 100px}
}
@media (max-width: 600px){
  .sel-panels .sel-loafy{grid-template-columns:1fr !important}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important}
  .intro2{display:none}
  .mobile-menu,.mm-link,.mm-link::after,.mm-link::before,.mm-foot{opacity:1;transform:none;filter:none;clip-path:none}
  .ar{opacity:1 !important;translate:none !important;filter:none !important;clip-path:none !important;scale:none !important;transition:none !important}
  .split .ch{opacity:1 !important;transform:none !important;filter:none !important}
  .tw .type{clip-path:none !important}.tw .caret{display:none}
  .vq{opacity:1;filter:none;transform:none}.vq-line{transform:none}
  .wcard *{transition:none !important}
  .ft-stage{margin-top:0}
  .scr1,.scr2,.scr3{position:relative !important;opacity:1 !important;margin-bottom:48px}
  .sol-sticky{display:none !important}
  .sol-copy{height:auto !important}
}