:root{
  --bg:#05070d; --bg2:#0a0e18; --ink:#eaeef7; --mute:#8b94a8; --line:rgba(255,255,255,.1);
  --blue:#3b82f6; --mint:#22d3a6; --grad:linear-gradient(100deg,#3b82f6,#22d3a6);
  --font:'Pretendard Variable',Pretendard,-apple-system,'Segoe UI','Noto Sans KR',sans-serif;
  --disp:'Syne','Pretendard Variable',Pretendard,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.75;letter-spacing:-.01em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--mint);color:#021}
.wrap{width:min(1240px,100% - 48px);margin:0 auto}

/* WebGL 배경 */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 70% 10%,#0e1c3a 0%,#05070d 60%)}
.page-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(90% 60% at 80% -10%,rgba(59,130,246,.22),transparent 60%),radial-gradient(70% 50% at 0% 100%,rgba(34,211,166,.12),transparent 60%),var(--bg)}
main,header.top,footer{position:relative;z-index:2}

/* 헤더 */
header.top{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,backdrop-filter .3s}
header.top.solid{background:rgba(5,7,13,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em}
.logo i{width:12px;height:12px;border-radius:50%;background:var(--grad);box-shadow:0 0 18px var(--mint)}
nav.menu{display:flex;gap:34px;font-size:15px;color:var(--mute)}
nav.menu a{transition:color .2s}
nav.menu a:hover,nav.menu a.on{color:var(--ink)}
.cta-s{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:99px;background:var(--ink);color:#05070d;font-weight:700;font-size:14.5px;transition:transform .25s,box-shadow .25s}
.cta-s:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(34,211,166,.35)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--ink);font-size:18px;cursor:pointer}

/* 히어로 */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:130px 0 90px}
.eyebrow{font-family:var(--disp);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--mint);margin-bottom:26px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:42px;height:1px;background:var(--mint)}
.hero h1{font-size:clamp(46px,9.4vw,156px);line-height:1.02;font-weight:800;letter-spacing:-.045em}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l span{display:block}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{max-width:640px;margin-top:38px;font-size:clamp(16px,1.5vw,20px);color:#b9c1d3}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:17px 30px;border-radius:99px;font-weight:700;font-size:16px;border:1px solid var(--line);transition:all .3s}
.btn.main{background:var(--grad);color:#021018;border-color:transparent}
.btn.main:hover{box-shadow:0 10px 40px rgba(59,130,246,.45);transform:translateY(-3px)}
.btn.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint::after{content:"";width:1px;height:46px;background:linear-gradient(var(--mint),transparent);animation:drip 2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 마퀴 */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:20px 0;background:rgba(5,7,13,.6);backdrop-filter:blur(6px)}
.marquee .track{display:flex;gap:56px;width:max-content;animation:mq 38s linear infinite;font-family:var(--disp);font-weight:700;font-size:clamp(22px,3vw,40px);letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);white-space:nowrap}
.marquee .track span:nth-child(3n){color:var(--ink);-webkit-text-stroke:0}
@keyframes mq{to{transform:translateX(-50%)}}

/* 섹션 공통 */
section.s{padding:clamp(90px,14vw,190px) 0;position:relative}
.sec-no{font-family:var(--disp);font-size:13px;letter-spacing:.28em;color:var(--mute);margin-bottom:22px;display:flex;gap:14px;align-items:center}
.sec-no b{color:var(--mint)}
h2.big{font-size:clamp(32px,5.2vw,78px);line-height:1.12;font-weight:800;letter-spacing:-.04em;max-width:1000px}
.about p.txt{margin-top:40px;font-size:clamp(18px,2vw,26px);line-height:1.65;color:#c4cbdb;max-width:980px}
.about p.txt .w{opacity:.22;transition:opacity .5s}
.about p.txt .w.on{opacity:1}

/* 서비스 리스트 */
.svc{margin-top:70px;border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:90px 1fr 1.1fr 44px;gap:24px;align-items:center;padding:38px 8px;border-bottom:1px solid var(--line);position:relative;transition:padding .35s,background .35s;cursor:default}
.svc-row::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(59,130,246,.14),rgba(34,211,166,.08),transparent);opacity:0;transition:opacity .35s;z-index:-1}
.svc-row:hover{padding-left:26px}
.svc-row:hover::before{opacity:1}
.svc-no{font-family:var(--disp);color:var(--mint);font-size:15px;letter-spacing:.2em}
.svc-t{font-size:clamp(26px,3.6vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.15}
.svc-d{color:var(--mute);font-size:16.5px}
.svc-ar{font-size:26px;color:var(--mute);transition:transform .3s,color .3s}
.svc-row:hover .svc-ar{transform:translate(6px,-6px);color:var(--mint)}
a.svc-row{cursor:pointer}

/* 도구 카드 */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:64px}
.tool{position:relative;padding:44px 40px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));overflow:hidden;transition:transform .35s,border-color .35s;display:block;min-height:280px}
.tool::after{content:"";position:absolute;width:340px;height:340px;right:-120px;bottom:-160px;border-radius:50%;background:var(--grad);filter:blur(80px);opacity:.25;transition:opacity .4s}
.tool:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.28)}
.tool:hover::after{opacity:.5}
.tool small{font-family:var(--disp);letter-spacing:.24em;color:var(--mint);font-size:12px}
.tool h3{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.04em;margin:16px 0 14px;line-height:1.2}
.tool p{color:#b2bace;max-width:420px}
.tool .go{margin-top:34px;display:inline-flex;gap:8px;font-weight:700;color:var(--ink)}

/* 인사이트 */
.posts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:64px}
.post{display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-height:280px;padding:28px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.03);transition:transform .3s,border-color .3s,background .3s}
.post:hover{transform:translateY(-6px);border-color:rgba(34,211,166,.5);background:rgba(255,255,255,.06)}
.post .tag{font-size:12.5px;color:var(--mint);letter-spacing:.08em}
.post h3{font-size:18px;line-height:1.5;font-weight:700;letter-spacing:-.02em;margin-top:12px;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.post .dt{font-size:13px;color:var(--mute)}
.more{display:inline-flex;margin-top:46px;gap:10px;font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:4px}

/* FAQ */
.faq{margin-top:56px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:30px 4px;display:flex;justify-content:space-between;gap:20px;font-size:clamp(18px,2vw,24px);font-weight:700;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:30px;line-height:1;color:var(--mint);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 4px 32px;color:#b2bace;max-width:820px}

/* 마지막 CTA */
.final{text-align:center;padding:clamp(100px,15vw,200px) 0}
.final h2{font-size:clamp(40px,8vw,128px);font-weight:800;letter-spacing:-.05em;line-height:1.05}
.final p{margin:30px auto 0;max-width:560px;color:#b2bace}
.final .hero-btns{justify-content:center}

/* 푸터 */
footer{border-top:1px solid var(--line);padding:70px 0 50px;color:var(--mute);font-size:14.5px;background:rgba(5,7,13,.8)}
.ft{display:grid;grid-template-columns:1.2fr 1fr;gap:50px}
.ft .logo{color:var(--ink);margin-bottom:16px}
.ft dl{display:grid;grid-template-columns:110px 1fr;gap:8px 12px}
.ft dt{color:#6c758a}
.ft a:hover{color:var(--ink)}
.legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.legal a{margin-left:18px}

/* 안쪽 페이지 */
.inner{padding:150px 0 100px;min-height:80vh}
.inner .wrap{width:min(860px,100% - 40px)}
.crumb{font-size:14px;color:var(--mute);margin-bottom:22px}
.crumb a:hover{color:var(--ink)}
.inner h1{font-size:clamp(30px,4.6vw,54px);line-height:1.22;font-weight:800;letter-spacing:-.04em}
.inner .meta{color:var(--mint);font-size:14px;letter-spacing:.06em;margin-bottom:18px}
.inner .lead2{margin:28px 0 8px;font-size:19px;color:#c9d0df;padding-left:18px;border-left:2px solid var(--mint)}
.prose{margin-top:34px}
.prose h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.03em;margin:54px 0 16px;line-height:1.35}
.prose p{margin:0 0 18px;color:#c4cbdb;line-height:1.95}
.prose ul{margin:0 0 22px;padding-left:2px}
.prose li{position:relative;padding:5px 0 5px 22px;color:#c4cbdb}
.prose li::before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;border-radius:50%;background:var(--mint)}
.prose a{color:var(--mint);border-bottom:1px solid rgba(34,211,166,.4)}
.post-cta{margin-top:70px;padding:36px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(160deg,rgba(59,130,246,.14),rgba(34,211,166,.06));display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.post-cta p{font-size:19px;font-weight:700;letter-spacing:-.02em;max-width:460px}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.pn a{padding:22px;border:1px solid var(--line);border-radius:18px;transition:border-color .3s}
.pn a:hover{border-color:var(--mint)}
.pn small{display:block;color:var(--mute);margin-bottom:6px}
.pn b{font-weight:600;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:50px}
.wide .wrap{width:min(1240px,100% - 48px)}
.wide .list-grid{grid-template-columns:repeat(3,1fr)}

/* 플로팅 */
.float{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column;gap:10px}
.float a{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;font-size:22px;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .25s}
.float a:hover{transform:scale(1.1)}
.float .k{background:#fee500}
.float .t{background:var(--ink)}

/* 커서 */
.cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(255,255,255,.55);border-radius:50%;pointer-events:none;z-index:200;transition:width .25s,height .25s,margin .25s,background .25s,border-color .25s;mix-blend-mode:difference;opacity:0}
.cur.show{opacity:1}
.cur.big{width:76px;height:76px;margin:-38px 0 0 -38px;background:#fff}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* 등장 효과: JS가 켜졌을 때만 숨김 → 실패해도 글자는 보인다 */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .hero h1 .l span{transform:translateY(110%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.js .hero.go h1 .l span{transform:none}
.js .hero.go h1 .l:nth-child(2) span{transition-delay:.12s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv,.js .hero h1 .l span{opacity:1!important;transform:none!important}}

/* 모바일 */
@media (max-width:980px){
  nav.menu{position:fixed;inset:76px 0 auto 0;background:rgba(5,7,13,.96);backdrop-filter:blur(16px);flex-direction:column;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--line);display:none}
  nav.menu.open{display:flex}
  nav.menu a{padding:18px 0;border-bottom:1px solid var(--line);font-size:18px;color:var(--ink)}
  .burger{display:block}
  .top-in .cta-s{display:none}
  .svc-row{grid-template-columns:50px 1fr 30px;padding:28px 4px}
  .svc-d{grid-column:2/3;grid-row:2}
  .tools{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr 1fr}
  .ft{grid-template-columns:1fr}
  .wide .list-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{width:calc(100% - 36px)}
  .posts,.list-grid,.wide .list-grid{grid-template-columns:1fr}
  .post{min-height:0}
  .pn{grid-template-columns:1fr}
  .ft dl{grid-template-columns:92px 1fr}
  .tool{padding:32px 26px}
  .hero{padding-top:110px}
  .marquee .track{gap:34px}
  .float a{width:50px;height:50px}
}

/* ===== 몰입형 개편 (Active Theory 느낌) ===== */
#gl{background:#05070d}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(2,3,8,.75) 100%),linear-gradient(90deg,rgba(2,3,8,.8),rgba(2,3,8,.35) 45%,transparent 70%)}
main{text-shadow:0 2px 28px rgba(0,0,0,.65)}

/* 알약 메뉴 */
nav.menu{gap:2px;padding:6px;border:1px solid rgba(255,255,255,.14);border-radius:99px;background:rgba(6,9,18,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 40px rgba(34,211,166,.12)}
nav.menu a{padding:10px 18px;border-radius:99px;font-size:14px;letter-spacing:.02em;color:#c4cbdb}
nav.menu a:hover{background:rgba(255,255,255,.1);color:#fff}
nav.menu a.hl{background:var(--ink);color:#05070d;font-weight:700}
nav.menu a.hl:hover{background:var(--grad);color:#021018}
.top-in .cta-s{display:none}

/* 로딩 */
.loader{display:none}
.js .loader{position:fixed;inset:0;z-index:500;background:#030409;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .9s ease,visibility .9s}
.loader b{font-family:var(--disp);font-size:clamp(70px,14vw,180px);font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.loader span{font-family:var(--disp);font-size:clamp(18px,2.4vw,30px);color:var(--mint);margin-left:6px}
.loader i{font-style:normal;font-size:12px;letter-spacing:.5em;color:var(--mute)}
.loader.done{opacity:0;visibility:hidden}

/* 우측 구간 표시 */
.prog{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.prog a{display:flex;align-items:center;gap:10px;color:var(--mute);font-family:var(--disp);font-size:10px;letter-spacing:.24em}
.prog a::after{content:"";width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.5);transition:all .3s}
.prog em{font-style:normal;opacity:0;transform:translateX(8px);transition:all .3s}
.prog a:hover em,.prog a.on em{opacity:1;transform:none}
.prog a.on{color:var(--ink)}
.prog a.on::after{background:var(--mint);border-color:var(--mint);box-shadow:0 0 14px var(--mint);transform:scale(1.3)}

/* 소리 버튼 */
.snd{position:fixed;left:22px;bottom:24px;z-index:60;display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:rgba(6,9,18,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);font-family:var(--disp);font-size:11px;letter-spacing:.24em;cursor:pointer;transition:border-color .3s,box-shadow .3s}
.snd:hover{border-color:var(--mint);box-shadow:0 0 26px rgba(34,211,166,.3)}
.snd .bars{display:flex;gap:3px;align-items:flex-end;height:14px}
.snd .bars i{width:3px;height:3px;background:var(--mint);border-radius:2px;transition:height .3s}
.snd.on .bars i{animation:eq 1s ease-in-out infinite}
.snd.on .bars i:nth-child(2){animation-delay:.2s}.snd.on .bars i:nth-child(3){animation-delay:.45s}.snd.on .bars i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}

/* 히어로: 가운데 3D 링이 보이도록 글자는 아래쪽으로 */
.hero{justify-content:flex-end;padding:0 0 11vh}
.hero h1{font-size:clamp(44px,8.4vw,132px)}
.hero .lead{max-width:560px;margin-top:26px}
.scroll-hint{bottom:18px;color:#9aa4ba}

/* 섹션: 장면 사이 여백을 넉넉하게 */
section.s{padding:clamp(120px,18vw,240px) 0}
.about p.txt{font-size:clamp(20px,2.4vw,32px)}

@media (max-width:980px){
  nav.menu{border-radius:22px;padding:8px 14px 14px;background:rgba(5,7,13,.96)}
  nav.menu a{border-radius:0;padding:18px 4px;font-size:18px;color:var(--ink)}
  nav.menu a.hl{margin-top:12px;border-radius:99px;text-align:center}
  .prog{display:none}
  .hero{padding-bottom:9vh}
}
@media (max-width:620px){
  .snd{left:14px;bottom:16px;padding:10px 14px}
  .snd .lbl{font-size:10px}
}

/* 3D 장면 전환 버튼 */
.vsw{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:4px;padding:6px 8px 6px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:rgba(6,9,18,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-family:var(--disp);font-size:10px;letter-spacing:.24em;color:var(--mute)}
.vsw span{margin-right:8px}
.vsw button{display:flex;align-items:center;gap:6px;padding:9px 14px;border:0;border-radius:99px;background:transparent;color:#aab2c5;font:inherit;font-size:12px;letter-spacing:.04em;cursor:pointer;transition:all .25s}
.vsw button em{font-style:normal;font-family:var(--font);font-size:12px;display:none}
.vsw button.on{background:var(--ink);color:#05070d;font-weight:700}
.vsw button.on em{display:inline}
.vsw button:hover:not(.on){background:rgba(255,255,255,.1);color:#fff}
@media (max-width:620px){.vsw{bottom:78px;padding:5px 6px 5px 12px}.vsw span{display:none}.vsw button{padding:8px 11px}}

/* ===== 글자 색: 구간마다 부드러운 포인트 색 (눈 편한 파스텔) ===== */
:root{--ink:#e4ebf8;--ac:#5eead4}
body{color:#d3dbea}
#about{--ac:#6ee7c8}#service{--ac:#8bb8ff}#tools{--ac:#f2c98f}#insight{--ac:#bba9ff}#faq{--ac:#ff9fbb}.final{--ac:#6ee7c8}
.sec-no{color:#8d97ad}.sec-no b{color:var(--ac)}
h2.big{background:linear-gradient(100deg,#eef3ff 35%,var(--ac) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.about p.txt{color:#aeb9cf}
.about p.txt .w.on{color:#e3ecff}
.about p.txt .w:nth-child(7n+3).on{color:var(--ac)}
.svc-row:nth-child(1){--rc:#6ee7c8}.svc-row:nth-child(2){--rc:#8bb8ff}.svc-row:nth-child(3){--rc:#f2c98f}.svc-row:nth-child(4){--rc:#bba9ff}
.svc-no{color:var(--rc)}
.svc-t{transition:color .3s}
.svc-row:hover .svc-t{color:var(--rc)}
.svc-d{color:#9aa6bd}
.svc-row:hover .svc-ar{color:var(--rc)}
.tool:nth-child(1){--tc:#6ee7c8}.tool:nth-child(2){--tc:#f2c98f}
.tool small{color:var(--tc)}
.tool::after{background:var(--tc)}
.tool:hover{border-color:var(--tc)}
.tool p{color:#a9b4ca}
.post:nth-child(4n+1){--pc:#6ee7c8}.post:nth-child(4n+2){--pc:#8bb8ff}.post:nth-child(4n+3){--pc:#f2c98f}.post:nth-child(4n){--pc:#bba9ff}
.post .tag{color:var(--pc,#6ee7c8)}
.post:hover{border-color:var(--pc,#6ee7c8)}
.post h3{color:#e0e7f5}
.faq summary{color:#e0e7f5}
.faq summary::after{color:var(--ac)}
.faq details p{color:#a9b4ca}
.faq details[open] summary{color:var(--ac)}
.final h2{color:#eef3ff}
.final p{color:#a9b4ca}
.hero .lead{color:#b7c2d8}
.hero h1 .l:first-child span{color:#eaf1ff}
.eyebrow{color:#6ee7c8}
.btn.ghost{color:#d3dbea}
.more{color:#e0e7f5;border-color:#6ee7c8}
/* 안쪽 페이지 */
.inner h1{background:linear-gradient(100deg,#eef3ff 55%,#9be8d5);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.inner .meta{color:#6ee7c8}
.inner .lead2{color:#c0cbe0;border-color:#8bb8ff}
.prose h2{color:#bcd6ff}
.prose p,.prose li{color:#c2cce0}
.prose li::before{background:#8bb8ff}
.prose a{color:#6ee7c8}
.crumb{color:#8791a8}
.pn small{color:#8bb8ff}
footer{color:#8d97ad}
.ft dt{color:#7c879e}
h2.big{width:fit-content;max-width:100%;background:linear-gradient(100deg,#f1f5ff 5%,var(--ac) 105%);-webkit-background-clip:text;background-clip:text;color:transparent}
.final h2{width:fit-content;margin-inline:auto}

/* ===== Active Theory 질감: 필름 입자 + 모서리 청록 글로우 ===== */
.vig::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 0% 0%,rgba(40,170,160,.28),transparent 70%),radial-gradient(55% 40% at 100% 0%,rgba(60,140,200,.22),transparent 70%)}
.vig::after{content:"";position:absolute;inset:-50%;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ===== AT 구성: 히어로(로고 가운데) · 무대 · 카드 덱 · 영상 창 ===== */
:root{--mono:'Share Tech Mono',ui-monospace,monospace}
.hero.at{justify-content:flex-end;padding:0 0 8vh;min-height:100svh}
.hero.at h1{font-size:clamp(34px,4.6vw,70px);letter-spacing:-.04em}
.hero.at .eyebrow{font-family:var(--mono)}
.hero.at .lead{max-width:470px;margin-top:18px;font-size:14.5px;line-height:1.7}
.hero.at .hero-btns{margin-top:24px}
.hero.at .scroll-hint{font-family:var(--mono)}

/* 무대: 화면을 붙잡고 3D만 움직인다 */
.stage{position:relative;height:340vh}
.stage-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.st{position:absolute;opacity:0;transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.st.on{opacity:1;pointer-events:auto}
.st1{left:0;right:0;bottom:7vh;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(18px,3vw,48px);padding:0 24px;transform:translateY(30px)}
.st1.on{transform:none}
.gt{position:relative;font-family:var(--disp);font-weight:800;font-size:clamp(40px,6.4vw,118px);line-height:.9;letter-spacing:-.02em;color:#f4f6fb;white-space:nowrap}
.gt::before,.gt::after{content:attr(data-t);position:absolute;inset:0}
.gt::before{color:#7dd3fc;mix-blend-mode:screen;clip-path:inset(0 0 60% 0)}
.gt::after{color:#ff9fbb;mix-blend-mode:screen;clip-path:inset(55% 0 0 0)}
.st1.on .gt{animation:gtIn 1.1s steps(12) both}
.st1.on .gt::before{animation:gtA 2.6s steps(2) infinite}
.st1.on .gt::after{animation:gtB 3.1s steps(2) infinite}
@keyframes gtIn{0%{clip-path:inset(0 100% 0 0);filter:blur(6px)}40%{clip-path:inset(0 40% 0 0)}60%{clip-path:inset(30% 0 20% 0)}100%{clip-path:inset(0);filter:none}}
@keyframes gtA{0%,86%{transform:none;clip-path:inset(0 0 60% 0)}88%{transform:translate(-6px,-2px);clip-path:inset(10% 0 70% 0)}92%{transform:translate(5px,1px);clip-path:inset(40% 0 35% 0)}96%{transform:translate(-3px,0);clip-path:inset(70% 0 5% 0)}100%{transform:none}}
@keyframes gtB{0%,80%{transform:none;clip-path:inset(55% 0 0 0)}84%{transform:translate(7px,2px);clip-path:inset(20% 0 55% 0)}90%{transform:translate(-4px,-1px);clip-path:inset(60% 0 10% 0)}100%{transform:none}}
.st-side{padding-bottom:10px;max-width:320px;min-width:250px}
.st-side small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:#9fb0c8;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
.st-side p{font-family:var(--mono),var(--font);margin-top:10px;font-size:13px;line-height:1.75;color:#d7deea;letter-spacing:.02em}
.st2{left:max(24px,6vw);bottom:12vh;max-width:min(560px,86vw);transform:translateX(-30px)}
.st2.on{transform:none}
.st2 .txt{margin-top:18px;color:#c3cbda;font-size:15px;line-height:1.8}

/* 카드 덱 */
.deck{position:relative;height:620vh}
.deck-pin{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1100px;perspective-origin:50% 45%}
.deck-head{position:absolute;left:max(24px,6vw);top:16vh;z-index:5;max-width:560px;transition:opacity .3s}
.deck-hint{margin-top:16px;font-family:var(--mono),var(--font);font-size:13px;color:#9aa6bd;letter-spacing:.03em}
.cards{position:absolute;inset:0;transform-style:preserve-3d}
.card{--vc:#7dd3fc;--cw:min(600px,76vw);position:absolute;left:50%;top:50%;width:var(--cw);height:calc(var(--cw)/1.45);margin:calc(var(--cw)/-2.9) 0 0 calc(var(--cw)/-2);border-radius:26px;overflow:hidden;color:#e9eef5;text-decoration:none;background:linear-gradient(155deg,rgba(78,86,96,.62),rgba(22,26,33,.78) 55%,rgba(12,15,20,.86));border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 60px rgba(255,255,255,.03);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);will-change:transform,opacity;opacity:0;transform-origin:50% 50%}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 85% 0%,color-mix(in srgb,var(--vc) 22%,transparent),transparent 60%)}
.hud{position:absolute;inset:6.5% 5.5%;border:1px solid rgba(255,255,255,.3);border-radius:8px;display:flex;flex-direction:column;padding:4.5% 5%}
.hud::before,.hud::after{content:"";position:absolute;width:18px;height:18px;border-color:var(--vc);border-style:solid}
.hud::before{left:-1px;top:-1px;border-width:2px 0 0 2px;border-top-left-radius:8px}
.hud::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0;border-bottom-right-radius:8px}
.hud-t,.hud-b{position:absolute;left:50%;transform:translateX(-50%);padding:0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#cfd6e2;background:rgba(24,28,35,.92);white-space:nowrap}
.hud-t{top:-8px}.hud-b{bottom:-8px;font-size:10px;color:#93a0b4}
.hud-in{flex:1;display:grid;grid-template-columns:1fr 1.05fr;gap:5%;align-items:center;min-height:0}
.hud-tx small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--vc)}
.hud-tx h3{margin-top:10px;font-size:clamp(20px,2.6vw,34px);line-height:1.15;font-weight:800;letter-spacing:-.03em;color:#f6f8fc}
.hud-tx p{margin-top:12px;font-size:13.5px;line-height:1.6;color:#b9c3d3}
.hud-go{display:inline-block;margin-top:18px;font-family:var(--mono),var(--font);font-size:12px;letter-spacing:.06em;color:var(--vc)}
.cv{height:100%;display:flex;align-items:center;min-height:0}
.cv svg{width:100%;height:auto;max-height:100%}
.card-pts{display:none}
.card:hover{border-color:color-mix(in srgb,var(--vc) 60%,transparent)}
.deck-nav{position:absolute;right:max(20px,4vw);top:92px;z-index:6;display:flex;align-items:center;gap:10px;padding:6px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(8,11,18,.55);backdrop-filter:blur(8px);font-family:var(--mono);font-size:12px;color:#c9d2e0;letter-spacing:.12em}
.deck-nav button{width:40px;height:32px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:transparent;color:#dfe6f0;font:inherit;cursor:pointer}
.deck-nav button:hover{background:rgba(255,255,255,.1)}

/* 인포그래픽 공통 */
.vz{display:block;width:100%;height:auto;color:var(--vc);overflow:visible}
.vz *{transform-box:fill-box}
.vz .f{fill:rgba(255,255,255,.035);stroke:currentColor;stroke-opacity:.4}
.vz .b{fill:rgba(255,255,255,.06)}
.vz .t{fill:rgba(255,255,255,.2)}
.vz .hl{fill:currentColor;fill-opacity:.2;stroke:currentColor;stroke-width:1.2}
.vz .l{font-family:var(--mono);font-size:9px;letter-spacing:.1em;fill:currentColor;opacity:.85}
.vz .w{font-family:var(--font);font-weight:700;font-size:10.5px;fill:#fff}
.vz .k{font-family:var(--font);font-weight:800;font-size:12px;fill:currentColor}
.vz .s{fill:none;stroke:currentColor;stroke-opacity:.35}
.vz .c{fill:currentColor}
.vz .me{animation:vzClimb 5s cubic-bezier(.6,.05,.25,1) infinite}
@keyframes vzClimb{0%,12%{transform:translateY(112px)}70%,100%{transform:none}}
.vz .rk1{animation:vzOut 5s infinite}.vz .rk2{animation:vzIn 5s infinite}
@keyframes vzOut{0%,55%{opacity:1}65%,100%{opacity:0}}
@keyframes vzIn{0%,60%{opacity:0}70%,100%{opacity:1}}
.vz .sl{opacity:0;animation:vzSlide 5.5s infinite both}
.vz .sl.d2{animation-delay:.35s}.vz .sl.d3{animation-delay:.7s}
@keyframes vzSlide{0%{opacity:0;transform:translateX(-26px)}14%,82%{opacity:1;transform:none}100%{opacity:0}}
.vz .ty{transform-origin:0 50%;animation:vzType 5.5s steps(10) infinite}
@keyframes vzType{0%{transform:scaleX(0)}30%,100%{transform:scaleX(1)}}
.vz .cover{animation:vzCover 5s steps(8) infinite}
@keyframes vzCover{0%{transform:none}35%,100%{transform:translateX(110px)}}
.vz .pop{transform-origin:50% 50%;animation:vzPop 5s infinite}
@keyframes vzPop{0%,40%{opacity:0;transform:scale(.6)}52%{opacity:1;transform:scale(1.08)}60%,100%{opacity:1;transform:none}}
.vz .feed{animation:vzFeed 6s cubic-bezier(.7,0,.3,1) infinite}
@keyframes vzFeed{0%,20%{transform:none}33%,53%{transform:translateY(-70px)}66%,86%{transform:translateY(-140px)}100%{transform:translateY(-210px)}}
.vz .hp{transform-origin:50% 50%;animation:vzHp 1.2s ease-in-out infinite}
@keyframes vzHp{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.vz .gr{transform-origin:0 50%;animation:vzGrow 6s ease-out infinite}
@keyframes vzGrow{0%{transform:scaleX(.08)}80%,100%{transform:scaleX(1)}}
.vz .pin{animation:vzBounce 1.6s cubic-bezier(.3,0,.3,1) infinite}
@keyframes vzBounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-9px)}}
.vz .pl{transform-origin:50% 50%;animation:vzPulse 2.4s ease-out infinite;fill:none;stroke:currentColor}
.vz .pl.d2{animation-delay:.8s}.vz .pl.d3{animation-delay:1.6s}
@keyframes vzPulse{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1);opacity:0}}
.vz .sr{opacity:.18;animation:vzStar 5s infinite}
.vz .sr:nth-of-type(2){animation-delay:.25s}.vz .sr:nth-of-type(3){animation-delay:.5s}.vz .sr:nth-of-type(4){animation-delay:.75s}.vz .sr:nth-of-type(5){animation-delay:1s}
@keyframes vzStar{0%,10%{opacity:.18}20%,85%{opacity:1}100%{opacity:.18}}
.vz .bar{transform-origin:50% 100%;animation:vzBar 5s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes vzBar{0%{transform:scaleY(0)}35%,85%{transform:scaleY(1)}100%{transform:scaleY(0)}}

/* 영상 창 */
.ov{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:70px 4vw 40px}
.ov[hidden]{display:none}
.ov-bg{position:absolute;inset:0;background:rgba(3,4,7,.86);backdrop-filter:blur(10px)}
.ov-bg::after{content:"";position:absolute;inset:0;opacity:.35;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.012 .5' numOctaves='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain .9s steps(5) infinite}
.ov-top{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:#d6dbe4;z-index:2}
.ov-x{position:absolute;top:16px;right:20px;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.3);color:#fff;font-size:16px;cursor:pointer}
.ov-frame{--vc:#7dd3fc;position:relative;width:min(1080px,100%);aspect-ratio:16/9;max-height:calc(100vh - 120px);clip-path:polygon(3% 0,97% 0,100% 5%,100% 95%,97% 100%,3% 100%,0 95%,0 5%);background:radial-gradient(90% 80% at 70% 30%,color-mix(in srgb,var(--vc) 14%,#151a22),#0b0e14 70%);display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:4%;padding:4% 5%;overflow:hidden}
.ov.open .ov-frame{animation:ovIn .75s steps(14) both}
@keyframes ovIn{0%{clip-path:polygon(50% 49%,50% 49%,50% 51%,50% 51%);filter:brightness(3)}30%{clip-path:polygon(0 48%,100% 48%,100% 52%,0 52%)}70%{filter:brightness(1.6)}100%{clip-path:polygon(3% 0,97% 0,100% 5%,100% 95%,97% 100%,3% 100%,0 95%,0 5%);filter:none}}
.ov-noise,.ov-scan{position:absolute;inset:0;pointer-events:none}
.ov-noise{opacity:.28;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1s steps(6) infinite}
.ov-scan{background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);animation:ovFlick 4s infinite}
@keyframes ovFlick{0%,92%,100%{opacity:1}94%{opacity:.4}96%{opacity:.9}}
.ov-viz{position:relative;z-index:1}
.ov-viz .vz{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--vc) 35%,transparent))}
.ov-info{position:relative;z-index:1}
.ov-code{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--vc)}
.ov-info h3{margin-top:12px;font-size:clamp(24px,3.2vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1.12}
.ov-info p{margin-top:12px;color:#c0c9d8;font-size:15px}
.ov-info ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ov-info li{position:relative;padding-left:22px;font-size:14.5px;color:#dde3ec}
.ov-info li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:2px;background:var(--vc)}
.ov-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ov-btns .btn{padding:12px 20px;font-size:14px}
body.ov-lock{overflow:hidden}

@media (max-width:820px){
  .hud-in{grid-template-columns:1fr;gap:6px}
  .cv{display:none}
  .card{--cw:min(520px,76vw)}
  .ov-frame{grid-template-columns:1fr;aspect-ratio:auto;max-height:none;padding:8% 7%;gap:18px;clip-path:polygon(6% 0,94% 0,100% 3%,100% 97%,94% 100%,6% 100%,0 97%,0 3%)}
  .ov{align-items:flex-start;overflow:auto}
  .st1{flex-direction:column;align-items:flex-start;bottom:10vh}
  .gt{font-size:clamp(34px,10.5vw,80px)}
  .deck-nav{top:auto;bottom:140px;right:50%;transform:translateX(50%)}
  .deck-head{top:12vh}
}

/* 인사이트 덱 (서비스 카드와 같은 3D 흐름) */
.deck-ins{height:800vh}
.card.ins .hud-in{grid-template-columns:1.5fr .7fr}
.card.ins .hud-tx h3{font-size:clamp(18px,1.9vw,26px);line-height:1.35;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cv-n{position:relative;justify-content:center;flex-direction:column;gap:10px}
.cv-n b{font-family:var(--mono);font-size:clamp(54px,7vw,104px);font-weight:400;line-height:1;color:transparent;-webkit-text-stroke:1px var(--vc);opacity:.85}
.cv-n i{display:block;height:2px;width:70%;background:linear-gradient(90deg,var(--vc),transparent);opacity:.6;animation:cvLn 2.4s ease-in-out infinite alternate;transform-origin:left}
@keyframes cvLn{from{transform:scaleX(.25)}to{transform:scaleX(1)}}
.cv-n i:nth-of-type(2){width:50%;animation-delay:.3s}.cv-n i:nth-of-type(3){width:30%;animation-delay:.6s}
.deck-more{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);z-index:6;opacity:0;transition:opacity .3s}
@media (max-width:820px){.card.ins .hud-in{grid-template-columns:1fr}.card.ins .cv-n{display:none}.deck-more{bottom:200px}}

/* 순위 상승 패널 (검색 1페이지, 결과로 증명) */
.rk-wrap{right:max(24px,5vw);top:50%;width:min(430px,38vw);transform:translate(30px,-50%)}
.rk-wrap.on{transform:translate(0,-50%)}
.rk{position:relative;padding:22px;border-radius:22px;background:linear-gradient(160deg,rgba(30,40,90,.55),rgba(10,14,30,.8));border:1px solid rgba(140,160,255,.28);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 6px rgba(255,255,255,.02);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rk::before{content:"";position:absolute;inset:-1px;border-radius:22px;padding:1px;background:linear-gradient(160deg,#5b7cff,transparent 35%,transparent 70%,#b07cff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
.rk-q{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:12px;background:rgba(255,255,255,.06);color:#c9d3ff;font-size:14px;font-weight:600}
.rk-t{display:inline-block;overflow:hidden;white-space:nowrap;width:0;color:#eef1ff}
.rk-c{width:1px;height:16px;background:#c9d3ff;animation:rkBlink 1s steps(1) infinite}
.rk-l{list-style:none;margin:14px 0 0;padding:0;position:relative;height:330px}
.rk-l li{position:absolute;left:0;right:0;height:56px;display:flex;align-items:center;gap:18px;padding:0 16px;opacity:0}
.rk-l li b{width:16px;font-family:Georgia,serif;font-weight:400;font-size:18px;color:#7c86b8}
.rk-l li span{flex:1;display:flex;flex-direction:column;gap:8px}
.rk-l li i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.13);width:75%}
.rk-l li i+i{width:48%;background:rgba(255,255,255,.08)}
.rk-l .r1{top:0}.rk-l .r2{top:66px}.rk-l .r3{top:132px}.rk-l .r4{top:198px}
.rk-me{position:absolute;left:22px;right:22px;top:334px;height:60px;display:flex;align-items:center;gap:16px;padding:0 16px;border-radius:14px;background:rgba(70,90,200,.28);border:1px solid rgba(140,160,255,.55);box-shadow:0 0 30px rgba(110,130,255,.25);opacity:0;transform:translateY(300px)}
.rk-n{width:26px;font-family:Georgia,serif;font-weight:400;font-size:20px;color:#ff6b7a;text-align:center}
.rk-me strong{display:block;font-size:15px;color:#fff}
.rk-me small{display:block;margin-top:4px;font-size:12px;color:#aeb6dc}
.rk-me small em{font-style:normal;margin:0 4px;color:#7c86b8}
.rk-bd{margin-left:auto;padding:4px 10px;border-radius:999px;background:#ff5a6a;color:#fff;font-size:12px;font-weight:800;opacity:0;transform:scale(.4)}
.rk-f{display:flex;justify-content:space-between;margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#8a93bf}
.rk-wrap.go .rk-t{animation:rkType .9s steps(5) .3s forwards}
.rk-wrap.go .rk-l li{animation:rkRow .5s ease forwards}
.rk-wrap.go .rk-l .r1{animation-delay:1.3s}.rk-wrap.go .rk-l .r2{animation-delay:1.35s}.rk-wrap.go .rk-l .r3{animation-delay:1.4s}.rk-wrap.go .rk-l .r4{animation-delay:1.5s}
.rk-wrap.go .rk-me{animation:rkUp 1.4s cubic-bezier(.2,.8,.2,1) 2s forwards}
.rk-wrap.go .rk-bd{animation:rkPop .45s cubic-bezier(.3,1.6,.5,1) 3.5s forwards}
@keyframes rkType{to{width:5.2em}}
@keyframes rkBlink{50%{opacity:0}}
@keyframes rkRow{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes rkUp{0%{opacity:0;transform:translateY(300px)}25%{opacity:1}100%{opacity:1;transform:none}}
@keyframes rkPop{to{opacity:1;transform:none}}
@media (max-width:820px){.rk-wrap{display:none}}

/* 맨 아래 개인정보처리방침 · 이용약관 안내 */
.lg-box{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;padding:20px 24px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.lg-box p{font-size:13px;color:#aab4c6}
.lg-btns{display:flex;align-items:center;gap:14px}
.lg-btns i{width:1px;height:20px;background:rgba(255,255,255,.2)}
.lg-btns a{padding:11px 18px;border-radius:10px;font-size:14px;font-weight:800;text-decoration:none}
.lg-p{background:#f2f5fa;color:#0b1220}
.lg-t{border:1px solid rgba(255,255,255,.4);color:#f2f5fa}
.lg-btns a:hover{opacity:.85}

/* 카드 배경 영상 · 클릭 화면 영상 + 큰 글자 */
.card .cvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.85) contrast(1.05);pointer-events:none}
.card:hover .cvid{opacity:.6}
.card .hud{z-index:1}
.card .cv{opacity:.85}
.ov-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.8) contrast(1.1) brightness(.75);pointer-events:none}
.ov-frame.has-v .ov-vid{opacity:1}
.ov-frame.has-v .ov-viz{opacity:0;pointer-events:none}
.ov-frame.has-v::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(5,7,12,.15),rgba(5,7,12,.82) 62%)}
.ov-big{position:absolute;left:-2%;right:-2%;top:50%;transform:translateY(-50%);z-index:0;font-family:var(--mono),var(--font);font-size:clamp(70px,13vw,190px);line-height:.92;letter-spacing:-.02em;color:rgba(235,238,245,.82);mix-blend-mode:overlay;text-transform:uppercase;word-break:break-all;pointer-events:none;opacity:0}
.ov-frame.has-v .ov-big{opacity:1}
.ov.open .ov-frame.has-v .ov-big{animation:ovBig 1.1s steps(10) both}
@keyframes ovBig{0%{clip-path:inset(0 100% 0 0);transform:translate(-3%,-50%)}60%{clip-path:inset(0 20% 0 0)}100%{clip-path:inset(0 0 0 0);transform:translate(0,-50%)}}
@media (max-width:820px){.ov-big{font-size:clamp(48px,16vw,90px)}}

/* 카드 구간 보라 안개 (gl.js 가 --haze 를 0~1 로 넣는다) */

.vig>i.haze{position:absolute;inset:0;opacity:var(--haze,0);background:radial-gradient(70% 60% at 0% 100%,rgba(110,60,200,.45),transparent 70%),radial-gradient(50% 45% at 100% 85%,rgba(60,40,150,.28),transparent 70%),radial-gradient(40% 35% at 85% 10%,rgba(40,90,170,.18),transparent 70%);transition:opacity .4s}

/* 글 아래 자주 묻는 질문 · 함께 보면 좋은 글 */
.post-faq,.post-rel{margin-top:48px}
.post-faq h2,.post-rel h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:16px}
.post-rel .list-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}