/* ============================================================
   viralX — corporate site
   Design language: LIQUID MORPHISM
   - 반투명 유리 표면 + 굴절 테두리 + 상단 스페큘러 하이라이트
   - 배경은 아주 느리게 흐르는 액체 그라디언트(blob)
   - 라운드는 크게(18~28px). 클라 덱용 4px 토큰과 의도적으로 다름.
   ============================================================ */

:root{
  --sans:"Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Pretendard, Roboto, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 잉크 */
  --bg:#05050A;
  --bg-2:#08080F;
  --text:#FFFFFF;
  --muted:#A6A6B4;
  --faint:#6E6E7E;

  /* 브랜드 (viralX DNA 승계) */
  --cyan:#5CF5FF;
  --violet:#AA70FF;
  --acc:#FF4D8F;         /* 액센트는 슬라이드/섹션당 '그 숫자 하나'에만 */

  /* 유리 */
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.075);
  --glass-line:rgba(255,255,255,.10);
  --glass-hi:rgba(255,255,255,.20);
  --blur:22px;

  --r:22px;
  --r-sm:14px;
  --r-pill:999px;

  --maxw:1180px;
  --gut:clamp(20px,5vw,56px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg)}
/* body에 배경을 주면 음수 z-index 레이어(.liquid/.grain/.hero-word)가
   body 배경에 덮여 사라진다. 캔버스 배경은 html에서만 칠한다. */
body{
  margin:0; background:transparent; color:var(--text);
  font-family:var(--sans);
  font-size:16px; line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
::selection{background:rgba(92,245,255,.28)}

/* ============ 액체 배경 ============ */
.liquid{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.liquid b{
  position:absolute; display:block; border-radius:50%;
  filter:blur(84px); opacity:.5; mix-blend-mode:screen;
  will-change:transform;
}
.b1{width:64vw; height:64vw; left:-16vw; top:-16vw;
    background:radial-gradient(circle at 42% 42%, #0F7A96 0%, #08475C 40%, #041B24 70%, transparent 78%);
    animation:drift1 44s ease-in-out infinite}
.b2{width:56vw; height:56vw; right:-14vw; top:2vh;
    background:radial-gradient(circle at 50% 50%, #5C3B9E 0%, #331C72 40%, #0F0725 70%, transparent 78%);
    animation:drift2 58s ease-in-out infinite}
.b3{width:52vw; height:52vw; left:30vw; top:66vh;
    background:radial-gradient(circle at 50% 50%, #8A1B44 0%, #4C1030 42%, #1A060F 70%, transparent 78%);
    animation:drift3 66s ease-in-out infinite; opacity:.34}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(10vw,8vh,0) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-9vw,14vh,0) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-12vw,-10vh,0) scale(1.2)}}

/* 필름 그레인 + 비네트 — 유리 느낌을 잡아주는 마감 */
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.62;
  background:
    linear-gradient(rgba(5,5,10,.42), rgba(5,5,10,.42)),
    radial-gradient(130% 90% at 50% 4%, transparent 34%, rgba(0,0,0,.72) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
/* 커서 추적 스페큘러 */
.cursorlight{position:fixed; z-index:-1; width:640px; height:640px; margin:-320px 0 0 -320px;
  border-radius:50%; pointer-events:none; opacity:0; transition:opacity .6s ease;
  background:radial-gradient(circle, rgba(92,245,255,.10), transparent 62%)}
body.hascursor .cursorlight{opacity:1}

/* ============ 레이아웃 ============ */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
section{position:relative; padding:clamp(88px,12vh,148px) 0}
.sec-head{max-width:760px; margin-bottom:clamp(36px,5vw,60px)}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); margin:0 0 20px;
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 12px var(--cyan)}

h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.032em; line-height:1.12}
h1{font-size:clamp(38px,6.4vw,82px)}
h2{font-size:clamp(30px,4.4vw,52px); line-height:1.14}
h3{font-size:clamp(19px,2.1vw,24px); letter-spacing:-.02em; line-height:1.3}
.lead{font-size:clamp(17px,1.6vw,20px); line-height:1.72; color:var(--muted); margin:22px 0 0; max-width:62ch}
p{margin:14px 0 0}
.dim{color:var(--muted)}
.grad{
  background:linear-gradient(100deg,#fff 8%, var(--cyan) 46%, var(--violet) 78%, #fff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheen 9s ease-in-out infinite;
}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* ============ 유리 표면 ============ */
.glass{
  position:relative;
  background:linear-gradient(158deg, var(--glass-2), var(--glass) 52%, rgba(255,255,255,.02));
  backdrop-filter:blur(var(--blur)) saturate(1.7);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.7);
  border-radius:var(--r);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 30px 70px -34px rgba(0,0,0,.9);
  overflow:hidden;
}
/* 굴절 테두리 — 그라디언트를 border에만 마스킹 */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.34), rgba(255,255,255,.05) 34%, rgba(92,245,255,.22) 68%, rgba(170,112,255,.20));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.7; transition:opacity .4s ease;
}
.glass:hover::before{opacity:1}
/* 근접 후광 */
.lit{transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease}
.lit:hover{transform:translateY(-4px);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 40px 90px -36px rgba(0,0,0,.95), 0 0 0 1px rgba(92,245,255,.06)}

/* ============ 네비 ============ */
.nav{position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:80;
  width:calc(100% - 32px); max-width:var(--maxw);
  display:flex; align-items:center; gap:16px;
  padding:11px 12px 11px 20px; border-radius:var(--r-pill);
  background:rgba(8,8,15,.5); backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 18px 40px -24px rgba(0,0,0,.9);
  transition:background .35s ease, padding .35s ease;
}
.nav.stuck{background:rgba(5,5,10,.78)}
.nav .mark{height:17px; width:auto; opacity:.95; flex:none}
.nav-links{display:flex; gap:4px; margin-left:auto}
.nav-links a{padding:8px 13px; border-radius:var(--r-pill); font-size:14px; color:var(--muted);
  transition:color .25s, background .25s}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.07)}
.navtools{display:flex; align-items:center; gap:8px; flex:none}
.langbtn{display:flex; padding:3px; border-radius:var(--r-pill); background:rgba(255,255,255,.06);
  border:1px solid var(--glass-line)}
.langbtn button{border:0; background:transparent; cursor:pointer; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.08em; padding:5px 9px; border-radius:var(--r-pill);
  color:var(--faint); transition:.25s}
.langbtn button[aria-pressed="true"]{background:rgba(255,255,255,.13); color:#fff}
.burger{display:none; border:1px solid var(--glass-line); background:rgba(255,255,255,.06);
  border-radius:var(--r-pill); padding:9px 13px; cursor:pointer; font-size:13px}

/* 버튼 */
.btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:14px 24px; border-radius:var(--r-pill); font-size:15px; font-weight:500;
  border:1px solid var(--glass-line); background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s}
.btn:hover{transform:translateY(-2px); background:rgba(255,255,255,.12)}
.btn.pri{
  background:linear-gradient(120deg, var(--cyan), var(--violet));
  color:#06060C; font-weight:600; border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 16px 44px -18px rgba(92,245,255,.6)}
.btn.pri:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 22px 56px -18px rgba(122,150,255,.75)}
.btn .ar{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover .ar{transform:translateX(4px)}
.btnrow{display:flex; flex-wrap:wrap; gap:12px; margin-top:38px}

/* ============ 히어로 ============ */
.hero{padding-top:clamp(150px,20vh,220px); padding-bottom:clamp(60px,8vh,90px); overflow:hidden}
/* 크롬 워드마크 — 헤드라인을 가리지 않도록 우측 하단에 앵커하고 옅게 */
.hero-word{
  position:absolute; left:50%; bottom:-5%; transform:translateX(-50%);
  font-size:clamp(90px,17vw,250px); font-weight:700; letter-spacing:-.05em; line-height:1;
  white-space:nowrap; pointer-events:none; z-index:-1; opacity:.22;
  background:linear-gradient(180deg,#1a1d24 6%,#e9eef2 40%,#5d626b 58%,#0d0f13 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 40px rgba(92,245,255,.16));
}
.hero h1{max-width:16ch}
.hero .lead{max-width:56ch}
.tagchips{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.chip{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 13px; border-radius:var(--r-pill); color:var(--muted);
  border:1px solid var(--glass-line); background:rgba(255,255,255,.045)}

/* 메트릭 스트립 */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(52px,7vw,80px)}
.metric{padding:26px 24px 24px}
.metric .big{display:flex; align-items:baseline; gap:4px; font-family:var(--mono); font-weight:600;
  font-size:clamp(30px,3.8vw,44px); letter-spacing:-.03em; line-height:1}
.metric .big i{font-style:normal; font-size:.46em; color:var(--muted); letter-spacing:0}
.metric .lb{margin-top:12px; font-size:13.5px; color:var(--muted); line-height:1.45}
.metric.hero-acc .big{color:var(--acc)}

/* ============ 브랜드 로고 밴드 ============ */
.logoband{position:relative; padding:10px 0 4px; --u:clamp(19px,2.2vw,30px)}
.bandtop{display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:26px}
.bandlabel{margin:0; font-family:var(--mono); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint)}
/* 운영 플랫폼 배지 — 클라이언트 로고와 위계를 분리한다 */
.platform{display:inline-flex; align-items:center; gap:8px; flex:none;
  font-size:16px; font-weight:600; letter-spacing:-.015em; color:#fff}
.platform svg{width:17px; height:17px; fill:currentColor; flex:none}
.vr{width:1px; height:18px; flex:none;
  background:linear-gradient(transparent, rgba(255,255,255,.28), transparent)}

/* 로고 트랙 — 아이템이 8개라 한 줄에 안 들어가므로 무한 마퀴로 흘린다.
   .mq-set 두 벌을 이어 붙이고 정확히 -50%만큼 밀면 이음매가 보이지 않는다. */
.marquee{
  position:relative; overflow:hidden;
  padding:clamp(18px,3vw,26px) 0; border-radius:var(--r);
  max-width:var(--maxw); margin:0 auto;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mq{display:flex; width:max-content; animation:marq 38s linear infinite}
.marquee:hover .mq{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.mq-set{display:flex; align-items:center; gap:clamp(34px,5vw,74px);
  padding-right:clamp(34px,5vw,74px)}
.mq-set img{
  width:auto; height:var(--u); object-fit:contain; flex:none;
  opacity:.55; transition:opacity .35s ease}
.mq-set img:hover{opacity:1}
/* 파일마다 가로세로비가 달라 높이를 (4/비율)^0.5 로 보정해야 광학 크기가 맞는다 */
.mq-set img[alt="Refilled"]  {height:calc(var(--u) * 1)}
.mq-set img[alt="Anua"]      {height:calc(var(--u) * 1)}
.mq-set img[alt="FULLight"]  {height:calc(var(--u) * .97)}
.mq-set img[alt="mixsoon"]   {height:calc(var(--u) * .90)}
.mq-set img[alt="medicube"]  {height:calc(var(--u) * .88)}
.mq-set img[alt="TEKIRA"]    {height:calc(var(--u) * .78)}
.mq-set img[alt="23YEARSOLD"]{height:calc(var(--u) * .71)}
@media (prefers-reduced-motion:reduce){
  .mq{animation:none; flex-wrap:wrap; justify-content:center}
  .mq-set:last-child{display:none}
  .mq-set{flex-wrap:wrap; justify-content:center; padding:0}
}

/* ============ 사무실 · 팀 사진 ============ */
.people{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
.ph{position:relative; margin:0; padding:0; overflow:hidden}
.ph img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  filter:saturate(.92) contrast(1.03); transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ph:hover img{transform:scale(1.035)}
.ph figcaption{position:absolute; left:0; right:0; bottom:0; padding:64px 24px 22px;
  background:linear-gradient(transparent, rgba(5,5,10,.5) 34%, rgba(5,5,10,.92))}
.ph .k{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--cyan); margin-bottom:8px}
.ph b{display:block; font-size:17px; font-weight:600; letter-spacing:-.02em}
.ph i{display:block; font-style:normal; font-size:13.5px; color:var(--muted); margin-top:5px}
/* 이미지 파일이 아직 없을 때 — 자리표시자로 표시하고 레이아웃은 유지 */
.ph.noimg img{display:none}
.ph.noimg{aspect-ratio:3/4; display:flex; align-items:flex-end;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 12px, transparent 12px 24px),
    linear-gradient(158deg, var(--glass-2), var(--glass))}
.ph.noimg::after{content:attr(data-need); position:absolute; top:20px; left:22px; right:22px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--faint); line-height:1.6}
.ph.noimg figcaption{position:static; width:100%; background:none; padding:24px}

/* ============ 실제 발행 콘텐츠 (영상 월) ============ */
.rgroup{margin-top:clamp(30px,4vw,48px)}
.rgroup:first-of-type{margin-top:0}
.rghead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid rgba(255,255,255,.08)}
.rghead b{font-size:clamp(17px,1.9vw,20px); font-weight:600; letter-spacing:-.02em}
.rghandle{font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--cyan)}
.rgsub{margin-left:auto; font-size:13.5px; color:var(--faint)}

.reels{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.clip{
  position:relative; margin:0; overflow:hidden; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.09); background:#0b0b12;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 24px 50px -30px rgba(0,0,0,.9);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
  cursor:pointer;
}
.clip:hover{transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 34px 70px -30px rgba(0,0,0,.95),
             0 0 0 1px rgba(92,245,255,.22)}
.clip video{width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:#0b0b12}
.cbadge{position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; font-weight:600;
  padding:5px 9px; border-radius:var(--r-pill); color:#fff;
  background:rgba(6,6,12,.62); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.cplay{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; display:grid; place-content:center;
  font-size:13px; padding-left:3px; color:#06060c;
  background:rgba(255,255,255,.88); box-shadow:0 8px 26px -8px rgba(0,0,0,.8);
  transition:opacity .3s ease, transform .3s ease; pointer-events:none}
.clip.playing .cplay{opacity:0; transform:translate(-50%,-50%) scale(.7)}
.clip figcaption{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:34px 12px 11px; font-size:12px; line-height:1.4; color:rgba(255,255,255,.88);
  background:linear-gradient(transparent, rgba(5,5,10,.86));
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* ============ 클라이언트 코멘트 ============ */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.quote{margin:0; padding:32px 30px 28px}
.quote blockquote{margin:0; font-size:clamp(17px,1.9vw,20px); line-height:1.6; letter-spacing:-.02em}
.quote blockquote::before{content:"“"; display:block; font-size:44px; line-height:.6; color:var(--cyan);
  opacity:.55; margin-bottom:14px}
.quote figcaption{margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--faint)}

/* ============ 두 가지 방식 ============ */
.offers{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.offer{padding:clamp(28px,3.4vw,42px); display:flex; flex-direction:column}
.onum{font-family:var(--mono); font-size:clamp(30px,3.6vw,44px); font-weight:600;
  letter-spacing:-.03em; line-height:1; color:rgba(255,255,255,.16)}
.okind{margin:14px 0 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan)}
.offer h3{margin-top:12px; font-size:clamp(21px,2.4vw,27px)}
.offer .dim{font-size:15.5px}
.olist{margin:24px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0}
.olist li{padding:13px 0 13px 26px; position:relative; font-size:15px; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.07)}
.olist li::before{content:""; position:absolute; left:2px; top:21px; width:9px; height:1px;
  background:var(--cyan)}
.ometa{margin-top:auto; padding-top:24px; display:flex; align-items:baseline;
  justify-content:space-between; gap:16px; flex-wrap:wrap}
.ometa span{font-size:13.5px; color:var(--faint)}
.ometa b{font-size:15px; font-weight:600; color:var(--acc)}

/* ============ 문제 카드 ============ */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.cards4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.cards4 .card{padding:26px 24px 28px}
.cards4 .card p{font-size:14.5px}
.card{padding:30px 28px 32px; height:100%}
.card .no{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--faint); margin-bottom:18px}
.card h3{margin-bottom:10px}
.card p{color:var(--muted); font-size:15.5px}

/* ============ 플라이휠 ============ */
.wheelgrid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center}
.wheel{position:relative; width:min(460px,88vw); aspect-ratio:1; margin:0 auto}
.wheel .ring{position:absolute; inset:8%; border-radius:50%; border:1px dashed rgba(255,255,255,.14)}
.wheel .ring2{position:absolute; inset:22%; border-radius:50%; border:1px solid rgba(255,255,255,.05)}
.wheel .spin{position:absolute; inset:8%; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 62%, rgba(92,245,255,.5) 78%, rgba(170,112,255,.35) 88%, transparent 100%);
  -webkit-mask:radial-gradient(circle, transparent 0 48.4%, #000 49%);
  mask:radial-gradient(circle, transparent 0 48.4%, #000 49%);
  animation:spin 14s linear infinite; filter:blur(.4px)}
@keyframes spin{to{transform:rotate(360deg)}}
.hub{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:38%; aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center;
  background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.14), rgba(255,255,255,.03) 62%);
  border:1px solid var(--glass-line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 0 60px -12px rgba(92,245,255,.3)}
.hub b{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--cyan)}
.hub span{display:block; font-size:clamp(15px,2vw,19px); font-weight:600; letter-spacing:-.02em; margin-top:6px}
.node{position:absolute; width:31%; aspect-ratio:1; border-radius:50%; display:grid; place-content:center;
  text-align:center; padding:6px;
  background:linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 18px 40px -20px rgba(0,0,0,.9);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s}
.node:hover{transform:scale(1.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 0 44px -8px rgba(92,245,255,.5)}
.node em{display:block; font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--cyan)}
.node b{display:block; font-size:15px; font-weight:600; margin-top:3px; letter-spacing:-.01em}
.n1{left:34.5%; top:-1%} .n2{right:-1%; top:34.5%} .n3{left:34.5%; bottom:-1%} .n4{left:-1%; top:34.5%}
.steps{display:flex; flex-direction:column; gap:2px}
.step{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:18px 4px; border-top:1px solid rgba(255,255,255,.07)}
.step:last-child{border-bottom:1px solid rgba(255,255,255,.07)}
.step .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--cyan); padding-top:5px}
.step h3{font-size:18px}
.step p{margin-top:6px; font-size:15px; color:var(--muted)}

/* ============ 서비스 ============ */
.svc{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.svc > .card{grid-column:span 2}
.svc > .card.wide{grid-column:span 3}
.svc .no{color:var(--cyan)}
.svc ul{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:7px}
.svc li{font-size:12.5px; color:var(--muted); padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07)}

/* ============ 케이스 ============ */
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.case{padding:0; display:flex; flex-direction:column}
.case .top{padding:26px 26px 22px; border-bottom:1px solid rgba(255,255,255,.07)}
.case .mkt{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.12em; color:var(--faint); margin-bottom:14px}
.case .flag{width:20px; height:14px; border-radius:3px; display:inline-block; flex:none;
  background:linear-gradient(120deg,var(--cyan),var(--violet)); opacity:.8}
.case .body{padding:22px 26px 26px; display:flex; flex-direction:column; gap:16px; flex:1}
.case .row{display:grid; grid-template-columns:76px 1fr; gap:14px; font-size:14.5px}
.case .row span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--faint); padding-top:4px}
.case .row p{margin:0; color:var(--muted)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:auto; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.07)}
.kpi b{display:block; font-family:var(--mono); font-size:22px; font-weight:600; letter-spacing:-.02em}
.kpi:first-child b{color:var(--acc)}
.kpi i{display:block; font-style:normal; font-size:11.5px; color:var(--faint); margin-top:5px; line-height:1.3}
.disclaim{margin-top:22px; font-size:12.5px; color:var(--faint)}

/* ============ 프로세스 ============ */
.track{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:8px}
.tr{position:relative; padding:30px 22px 26px 0}
.tr::before{content:""; position:absolute; left:0; top:0; width:100%; height:1px;
  background:linear-gradient(90deg, rgba(92,245,255,.55), rgba(255,255,255,.08))}
.tr::after{content:""; position:absolute; left:0; top:-4px; width:9px; height:9px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 14px var(--cyan)}
.tr .wk{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--cyan)}
.tr h3{font-size:18px; margin-top:12px}
.tr p{font-size:14.5px; color:var(--muted)}

/* ============ 팀 / 파트너 ============ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.bigpanel{padding:clamp(30px,4vw,46px)}
.origins{margin:26px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0}
.origins li{padding:16px 0; border-top:1px solid rgba(255,255,255,.07); display:grid;
  grid-template-columns:auto 1fr; gap:16px; align-items:baseline}
.origins li span{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--cyan)}
.origins li p{margin:0; font-size:15px; color:var(--muted)}
.origins li b{color:#fff; font-weight:500}
.locs{display:flex; gap:8px; flex-wrap:wrap; margin-top:28px}

/* FAQ */
.faq{margin-top:8px}
.qa{border-top:1px solid rgba(255,255,255,.08)}
.qa:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.qa summary{list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-size:clamp(16px,1.8vw,18.5px); font-weight:500; letter-spacing:-.015em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:20px; color:var(--cyan); transition:transform .3s}
.qa[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.qa .ans{padding:0 44px 24px 0; color:var(--muted); font-size:15.5px; margin:0}

/* ============ 컨택트 ============ */
.contact{padding:clamp(32px,4.4vw,52px)}
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px}
.field{display:flex; flex-direction:column; gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--faint);
  text-transform:uppercase}
.field input, .field select, .field textarea{
  font:inherit; font-size:15px; color:#fff; padding:13px 15px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.05); border:1px solid var(--glass-line); outline:none;
  transition:border-color .25s, background .25s, box-shadow .25s;
  -webkit-appearance:none; appearance:none;
}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat}
.field select option{background:#0C0C14; color:#fff}
.field textarea{resize:vertical; min-height:120px; line-height:1.6}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:rgba(92,245,255,.5); background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(92,245,255,.09)}
.field input::placeholder, .field textarea::placeholder{color:var(--faint)}
.formnote{font-size:12.5px; color:var(--faint); margin-top:16px}
.formstat{margin-top:16px; font-size:14px; display:none}
.formstat.ok{display:block; color:var(--cyan)}
.formstat.err{display:block; color:#FF7A6B}
.cta-side{display:flex; flex-direction:column; gap:14px}
.ctile{padding:24px 26px}
.ctile .k{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--faint)}
.ctile .v{font-size:17px; margin-top:8px; font-weight:500; word-break:break-all}
.ctile a.v:hover{color:var(--cyan)}

/* ============ 푸터 ============ */
footer{padding:52px 0 60px; border-top:1px solid rgba(255,255,255,.07); position:relative}
.frow{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap}
footer .mark{height:20px; opacity:.9}
.fmeta{font-size:12.5px; color:var(--faint); line-height:1.8; text-align:right}

/* ============ 스크롤 리빌 ============ */
.rv{opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}

/* ============ 반응형 ============ */
@media (max-width:1020px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .cards3, .cases{grid-template-columns:1fr}
  .cards4{grid-template-columns:repeat(2,1fr)}
  .offers{grid-template-columns:1fr}
  .reels{grid-template-columns:repeat(3,1fr)}
  .rgsub{margin-left:0; flex-basis:100%}
  .svc{grid-template-columns:repeat(2,1fr)}
  .svc > .card, .svc > .card.wide{grid-column:span 1}
  .wheelgrid, .split{grid-template-columns:1fr}
  .people{grid-template-columns:repeat(3,1fr); gap:12px}
  .track{grid-template-columns:repeat(2,1fr); gap:0 18px}
  .formgrid{grid-template-columns:1fr}
  .hero-word{opacity:.34; font-size:clamp(80px,26vw,220px)}
}
@media (max-width:720px){
  .nav-links{display:none}
  .nav-links.open{display:flex; position:absolute; top:calc(100% + 10px); left:0; right:0;
    flex-direction:column; gap:2px; padding:12px; border-radius:var(--r);
    background:rgba(8,8,15,.94); backdrop-filter:blur(18px); border:1px solid var(--glass-line)}
  .burger{display:block; order:3}
  .svc{grid-template-columns:1fr}
  .cards4{grid-template-columns:1fr}
  .reels{grid-template-columns:repeat(2,1fr); gap:10px}
  .people{grid-template-columns:1fr}
  .track{grid-template-columns:1fr}
  .tr{padding:26px 0 22px 0}
  .frow{flex-direction:column; align-items:flex-start}
  .fmeta{text-align:left}
}
/* 크롬 워드마크는 좁은 화면에서 메트릭 카드를 덮으므로 숨긴다 */
@media (max-width:900px){ .hero-word{display:none} }

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
}