/* ═══════════════ WORK-X — CINEMATIC ═══════════════
   레퍼런스: senthora.ai (실측 기반 1:1 이식)
   교체분: 폰트(Nohemi→Pretendard) / 컬러(브랜드 인디고) / 텍스트 / 이미지
   ─────────────────────────────────────────────────── */

/* 한글 렌더링 스택 — Pretendard(기하학 산세리프 대체) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root {
  --bg:      #110F14;
  --bg-2:    #17151C;
  --panel:   #1E1C26;
  --violet:  #9B8CFC;                    /* Work-X 인디고 #4F46E5 를 다크 배경 대비 유지선까지 밝힌 값 */
  --violet-dim: rgba(155,140,252,.14);
  --pink:    #4F8BFF;                    /* 레퍼런스 마젠타 슬롯 → Work-X 계열 블루 */
  --text:    #EAEAF0;
  --muted:   #A49DB5;
  --muted-2: #C2BCD2;
  --line:    rgba(234,234,240,.08);
  --trace:   rgba(140,122,230,.42);
  --trace-bright: #9B8CFC;
  /* design tokens: one grid, one spacing rhythm, one heading scale */
  --container:     1200px;
  --space-inline:  clamp(20px, 5vw, 72px);
  --space-section: clamp(84px, 12vh, 150px);
  --space-title:   clamp(44px, 7vh, 76px);
  --fs-h2:         clamp(30px, 4.4vw, 58px);
  --kr: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo',
        'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; }
html.lenis, html.lenis body { height:auto; }
html { overflow-x:hidden; overflow-x:clip; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }

body {
  background-color:var(--bg);
  background-image:
    radial-gradient(110% 80% at 50% -12%, rgba(90,74,240,.15), rgba(90,74,240,0) 62%),
    radial-gradient(55% 60% at -8% 28%, rgba(90,74,240,.10), rgba(90,74,240,0) 70%),
    radial-gradient(55% 60% at 108% 55%, rgba(155,140,252,.08), rgba(155,140,252,0) 70%),
    radial-gradient(70% 45% at 50% 108%, rgba(79,139,255,.06), rgba(79,139,255,0) 72%);
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% 100vh;
  color:var(--text);
  font-family:var(--kr);
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* 한글 어절 단위 줄바꿈 + 숫자 폭 고정 */
  word-break:keep-all; overflow-wrap:anywhere;
  font-feature-settings:"tnum";
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-weight:700; letter-spacing:-.02em; }   /* 한글은 -0.02em 안쪽까지만 */
section { position:relative; z-index:2; }

/* ─────────── section hue shifts ─────────── */
.steps     { background:linear-gradient(180deg, rgba(90,74,240,0), rgba(90,74,240,.06) 20%, rgba(90,74,240,.06) 80%, rgba(90,74,240,0)); }
.signature { background:linear-gradient(180deg, rgba(62,107,255,0), rgba(62,107,255,.055) 20%, rgba(62,107,255,.055) 80%, rgba(62,107,255,0)); }
.features  { background:linear-gradient(180deg, rgba(79,139,255,0), rgba(79,139,255,.05) 20%, rgba(79,139,255,.05) 80%, rgba(79,139,255,0)); }
.exploded  { background:linear-gradient(180deg, rgba(90,110,255,0), rgba(90,110,255,.055) 20%, rgba(90,110,255,.055) 80%, rgba(90,110,255,0)); }
.imagine   { background:linear-gradient(180deg, rgba(155,140,252,0), rgba(155,140,252,.05) 20%, rgba(155,140,252,.05) 80%, rgba(155,140,252,0)); }
.pricing   { background:linear-gradient(180deg, rgba(90,74,240,0), rgba(90,74,240,.07) 25%, rgba(90,74,240,.07) 75%, rgba(90,74,240,0)); }
.insights  { background:linear-gradient(180deg, rgba(79,139,255,0), rgba(79,139,255,.045) 20%, rgba(79,139,255,.045) 80%, rgba(79,139,255,0)); }
.faq       { background:linear-gradient(180deg, rgba(62,107,255,0), rgba(62,107,255,.045) 20%, rgba(62,107,255,.045) 80%, rgba(62,107,255,0)); }

/* ─────────── app chip (로고 타일) ───────────
   확정 로고: W+X 모노그램. 배경이 다크라 타일도 다크로 두고 보라 테두리·글로우로 띄운다 */
.app-chip {
  width:96px; aspect-ratio:1; border-radius:26%;
  background:#131218;
  border:1px solid rgba(155,140,252,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 44px rgba(155,140,252,.38),
    0 18px 50px rgba(0,0,0,.5);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.app-chip img { width:100%; height:100%; object-fit:cover; display:block; }

/* ─────────── icon tiles ─────────── */
.icon-tile {
  width:46px; height:46px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius:13px;
  background:rgba(90,74,240,.12);
  border:1px solid rgba(155,140,252,.28);
  color:var(--violet);
}
.icon-tile svg { width:22px; height:22px; }
.icon-tile--lg { width:60px; height:60px; border-radius:16px; }
.icon-tile--lg svg { width:28px; height:28px; }

/* ─────────── living logo ─────────── */
@keyframes logoBreath { 0%,100%{transform:scale(1)} 50%{transform:scale(1.09)} }
@keyframes markBreath {
  0%,100% { transform:scale(1); filter:drop-shadow(0 0 4px rgba(155,140,252,.35)); }
  50%     { transform:scale(1.1); filter:drop-shadow(0 0 13px rgba(155,140,252,.85)); }
}
@keyframes chipBreath {
  0%,100% { box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 44px rgba(155,140,252,.38), 0 18px 50px rgba(0,0,0,.5); }
  50%     { box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 82px rgba(155,140,252,.78), 0 18px 50px rgba(0,0,0,.5); }
}
.app-chip { animation:chipBreath 3.6s ease-in-out infinite; }
.nav-logo .mark, .footer > .mark { animation:markBreath 3.6s ease-in-out infinite; }
/* 로고 마크는 다크 배경이 구워져 있어 살짝 둥글려 앱 아이콘처럼 보이게 한다 */
.nav-logo .mark, .footer .mark { border-radius:23%; object-fit:cover; }

/* 3D rotating chip (scroll-scrubbed) */
.chip3d { position:relative; transform-style:preserve-3d; }
.chip-face { position:absolute; inset:0; width:100%; height:100%; backface-visibility:hidden; }
.chip-face.back { transform:rotateY(180deg); filter:brightness(.82); }

/* ─────────── canvas layers & progress ─────────── */
#gl { position:fixed; inset:0; z-index:0; pointer-events:none; }
.vignette {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(8,7,10,.75) 100%);
}
#grain { position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.07; mix-blend-mode:overlay; }
.scroll-progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:70;
  background:linear-gradient(90deg, var(--violet), var(--pink));
  transform-origin:0 50%; transform:scaleX(0);
  box-shadow:0 0 12px rgba(155,140,252,.8);
  pointer-events:none;
}

/* ─────────── scroll-to-top ─────────── */
.to-top {
  position:fixed; right:26px; bottom:26px; z-index:80;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(145deg, #BCA9FF 0%, #8F7BF7 45%, #4F46E5 100%);
  border:1px solid rgba(255,255,255,.3);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(90,74,240,.45);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .35s, transform .35s, visibility .35s, box-shadow .35s;
}
.to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover { box-shadow:0 14px 44px rgba(90,74,240,.75); }
@media (max-width: 640px) { .to-top { right:16px; bottom:16px; width:46px; height:46px; } }

/* ─────────── custom cursor ─────────── */
.cursor { display:none; }
@media (pointer: fine) {
  body:has(#cursor), body:has(#cursor) * { cursor:none !important; }
  .cursor {
    display:block; position:fixed; left:0; top:0; z-index:210;
    width:38px; height:38px; pointer-events:none; will-change:transform;
  }
  .cursor svg {
    position:absolute; inset:0; width:100%; height:100%;
    filter:drop-shadow(0 0 8px rgba(155,140,252,.95));
    transition:scale .3s ease;
  }
  .cursor.is-hover svg { scale:1.5; }
}

/* ─────────── circuit nets & connectors ─────────── */
.net path {
  stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round;
}
.net path.faint { stroke:rgba(140,122,230,.22); stroke-width:2; }
.net path.spine { stroke:rgba(155,140,252,.55); stroke-width:3.4; }
.net path[data-pulse] {
  stroke:#D6CCFF; stroke-width:4.5; opacity:.95;
  filter:drop-shadow(0 0 8px rgba(155,140,252,1));
}
.connector {
  position:relative; z-index:2; height:36vh; min-height:220px;
  display:flex; justify-content:center;
}
.connector svg { width:min(560px, 90vw); height:100%; overflow:visible; }
.connector path {
  stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round;
}
.connector path[data-pulse] {
  stroke:#D6CCFF; stroke-width:4.6;
  filter:drop-shadow(0 0 9px rgba(155,140,252,1));
}

/* edge glows */
.edge-glow {
  position:absolute; top:12%; bottom:12%; width:120px; z-index:0; pointer-events:none;
  filter:blur(34px); opacity:.55;
}
.edge-glow.left  { left:-56px;  background:radial-gradient(ellipse at center, rgba(90,74,240,.55), transparent 70%); }
.edge-glow.right { right:-56px; background:radial-gradient(ellipse at center, rgba(90,74,240,.55), transparent 70%); }

/* ─────────── nav ─────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px, 4vw, 56px);
  transition:background .4s, backdrop-filter .4s;
}
.nav.is-solid { background:rgba(17,15,20,.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav-logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:.02em; }
.nav-logo .mark { width:30px; height:30px; }
.nav-right { display:flex; align-items:center; gap:clamp(14px, 2.5vw, 32px); }
.nav-link { font-size:13.5px; color:var(--muted-2); letter-spacing:.02em; transition:color .3s; white-space:nowrap; }
.nav-link:hover { color:var(--text); }
.nav-ghost {
  font-size:13px; padding:10px 18px; border-radius:100px;
  border:1px solid var(--line); color:var(--muted-2);
  white-space:nowrap; transition:all .3s;
}
.nav-ghost:hover { color:var(--text); border-color:rgba(155,140,252,.5); }
.nav-cta {
  font-size:13px; padding:10px 22px; border-radius:100px;
  background:linear-gradient(100deg, var(--violet), #7B68F0);
  color:#0E0C12 !important; font-weight:700;
  white-space:nowrap;
  box-shadow:0 0 24px rgba(155,140,252,.4);
  transition:transform .3s, box-shadow .3s;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(155,140,252,.6); }

/* ★ 2026-08-25 대표 지시 — "'데모체험하기' 버튼도 눈에 띄게 디자인 작업해줘"
   보라색 주 버튼(무료로 30일 시작하기)과 **역할이 다르다**. 같은 보라로 만들면 둘이 싸운다.
   그래서 본문 LIVE DEMO 배지와 같은 민트색 언어를 쓴다 — 색으로 "지금 살아있는 것"을 말한다.
   깜빡이는 점은 .demo-live 와 같은 demoPulse 를 재사용해 사이트 안에서 말이 통하게 했다. */
.nav-demo {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; padding:10px 18px; border-radius:100px;
  color:#5BE39B !important; font-weight:600; white-space:nowrap;
  background:rgba(91,227,155,.10);
  border:1px solid rgba(91,227,155,.42);
  transition:transform .3s, box-shadow .3s, background .3s;
}
.nav-demo i {
  width:7px; height:7px; border-radius:50%; background:#5BE39B; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(91,227,155,.6); animation:demoPulse 2s infinite;
}
.nav-demo:hover {
  transform:translateY(-2px);
  background:rgba(91,227,155,.16);
  box-shadow:0 0 26px rgba(91,227,155,.28);
}
/* 화면이 좁으면 글자를 줄이고 점은 남긴다 — '살아있다'는 신호가 먼저다. */
@media (max-width: 900px) { .nav-demo { padding:9px 14px; font-size:12px; } }
@media (max-width: 520px) { .nav-demo b { display:none; } .nav-demo { padding:9px 11px; } }


/* ─────────── hero ─────────── */
.hero {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; text-align:center;
  padding:80px 0 72px;
}
.hero-content { padding:0 24px; position:relative; }
/* 손+폰 사진은 배경이 불투명 검정이라, 컨텐츠 영역만 잘라 쓰고
   가장자리는 라디얼 마스크로 풀어 배경과 이어 붙인다 (사각 경계 제거) */
/* ★ 2026-08-23 대표 지시 — "GNB 와 폰 목업 사이 여백이 너무 없다.
     아래 'WORK-X · 스타트업 경영 관리 · AI ERP' 와의 여백만큼 달라."
   박스 기준으로는 위아래가 똑같이 23px 였다(실측). 그런데 눈에는 위만 좁아 보인다 —
   폰 그림이 박스보다 크게 얹혀 있고(top:-26.3%) overflow:hidden 이라 **윗면이 잘려**
   박스 상단에 딱 붙기 때문이다. 아래쪽은 라디얼 마스크로 부드럽게 사라져 여백이 더 넓어 보인다.
   그래서 박스가 아니라 **보이는 그림** 기준으로 위를 더 내린다. */
.hero-phone {
  position:relative; z-index:0; overflow:hidden;
  width:clamp(185px, 26vh, 258px);
  aspect-ratio:988 / 1532;
  margin:36px auto -30px;
  pointer-events:none; will-change:transform;
}
.hero-phone img {
  position:absolute; max-width:none;
  width:153.8%; height:auto;
  left:-18.5%; top:-26.3%;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(78% 66% at 50% 44%, #000 52%, transparent 100%);
  mask-image:radial-gradient(78% 66% at 50% 44%, #000 52%, transparent 100%);
}
.hero-title, .hero-sub, .hero-badges, .hero-eyebrow { position:relative; z-index:2; }
.hero-eyebrow {
  font-size:clamp(11.5px, 1.3vw, 13.5px); font-weight:700; letter-spacing:.22em;
  color:var(--violet); margin-bottom:18px; text-shadow:0 0 24px rgba(155,140,252,.45);
}
.hero-sub span { display:inline-block; }
.hero-title {
  font-size:clamp(34px, 5.6vw, 76px); line-height:1.14; margin-bottom:18px;  /* 한글 디스플레이 하한 1.12 */
  text-shadow:0 6px 30px rgba(17,15,20,.85);
  max-width:16em; margin-left:auto; margin-right:auto;
}
.hero-title .line { display:block; overflow:hidden; padding-bottom:.06em; }
.word-w { display:inline-block; white-space:nowrap; }
.hero-title .char { display:inline-block; will-change:transform; }
.hero-title .accent, .hero-title .accent .char {
  background:linear-gradient(100deg, var(--violet) 20%, var(--pink) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub {
  max-width:600px; margin:0 auto 22px; color:var(--muted-2);
  font-size:clamp(15px, 1.6vw, 18px); font-weight:400; line-height:1.7;  /* 한글 본문 하한 1.55 */
}
.reveal-line { overflow:hidden; }
.hero-badges.reveal-line { padding:8px 0 14px; margin:-8px 0 -14px; }
.badges-wrap { display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.store-btn {
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:12px 24px 12px 16px; border-radius:14px;
  background:#000;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.store-btn:hover {
  transform:translateY(-3px); border-color:rgba(255,255,255,.75);
  box-shadow:0 16px 55px rgba(155,140,252,.35);
}
.store-btn .icon-tile { width:32px; height:32px; border-radius:9px; background:rgba(155,140,252,.16); }
.store-btn .icon-tile svg { width:17px; height:17px; }
.store-btn span { display:flex; flex-direction:column; line-height:1.25; font-size:16px; font-weight:500; color:#fff; }
.store-btn b { font-weight:600; white-space:nowrap; color:#fff; }
.store-btn small { font-size:10.5px; font-weight:400; color:rgba(255,255,255,.75); letter-spacing:.04em; }
/* 강조형(그라데이션) 스토어 버튼 = 바로 시작하기 */
.store-btn.is-primary {
  background:linear-gradient(100deg, var(--violet), #7B68F0);
  border-color:rgba(255,255,255,.35);
}
.store-btn.is-primary span, .store-btn.is-primary b { color:#0E0C12; }
.store-btn.is-primary small { color:rgba(14,12,18,.72); }
.store-btn.is-primary .icon-tile { background:rgba(14,12,18,.14); border-color:rgba(14,12,18,.2); color:#0E0C12; }

.hero-note { margin-top:22px; font-size:13px; color:var(--muted); letter-spacing:.01em; }

/* hero circuit visual */
.hero-visual {
  position:relative; width:100vw; max-width:none; margin-top:8px;
  height:clamp(150px, 24vh, 260px);
  display:flex; align-items:center; justify-content:center;
  perspective:900px;
}
.hero-net { width:100%; height:100%; display:block; overflow:visible; }
.hero-chip {
  position:absolute; left:50%; top:50%;
  width:clamp(72px, 8vw, 96px); aspect-ratio:1;
  transform:translate(-50%, -50%);
}
.hero-chip .app-chip { width:100%; height:100%; }

/* ─────────── statement (pinned story) ─────────── */
.statement-pin {
  position:relative;
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:0 24px;
}
.statement-net { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.statement-net path.s-pulse {
  stroke:#D6CCFF; stroke-width:4.5; vector-effect:non-scaling-stroke; stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(155,140,252,1));
  opacity:0;
}
.statement-text { position:relative; z-index:2; }
.statement-text {
  max-width:1000px; text-align:center;
  font-size:clamp(26px, 4.2vw, 56px); font-weight:600; line-height:1.4; letter-spacing:-.02em;
  user-select:none; -webkit-user-select:none;
}
.statement-text .word { color:rgba(234,234,240,.3); transition:color .3s linear; }
.statement-text .word.is-on { color:var(--text); }

/* ─────────── menu marquee (레퍼런스 languages) ─────────── */
.languages { padding:clamp(48px, 7vh, 90px) 0 clamp(24px, 4vh, 48px); overflow:hidden; }
.languages + .connector { height:20vh; min-height:140px; }
.section-kicker {
  font-size:clamp(13px, 1.5vw, 16px); font-weight:800; letter-spacing:.28em;
  color:var(--violet); text-align:center; margin-bottom:38px;
  text-shadow:0 0 24px rgba(155,140,252,.45);
}
.marquee {
  overflow:hidden; padding:12px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display:flex; gap:18px; width:max-content; will-change:transform; }
.marquee + .marquee { margin-top:14px; }
.lang-chip {
  display:flex; align-items:center; gap:12px;
  padding:14px 26px; border-radius:100px;
  background:var(--panel); border:1px solid var(--line);
  font-size:clamp(15px, 1.8vw, 19px); font-weight:500; white-space:nowrap;
  color:var(--muted-2);
}
.lang-chip .icon-tile { width:30px; height:30px; border-radius:9px; }
.lang-chip .icon-tile svg { width:16px; height:16px; }

/* ─────────── steps ─────────── */
.steps-pin { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:90px var(--space-inline) 60px; }
.steps-head { text-align:center; margin-bottom:clamp(28px, 5vh, 64px); }
.steps-head h2 { font-size:var(--fs-h2); line-height:1.24; }
.steps-body {
  display:grid; grid-template-columns:1fr minmax(280px, 420px); gap:clamp(24px, 6vw, 96px);
  align-items:center; max-width:1200px; margin:0 auto; width:100%;
}
.steps-text { position:relative; padding-left:34px; }
.steps-rail {
  position:absolute; left:0; top:8px; bottom:54px; width:3px;
  background:rgba(234,234,240,.08); border-radius:3px;
}
.steps-rail-fill {
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(180deg, var(--violet), var(--pink));
  border-radius:3px; box-shadow:0 0 14px rgba(155,140,252,.8);
}
.steps-rail-dot {
  position:absolute; left:50%; top:0%;
  width:13px; height:13px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:#EDE9FF;
  box-shadow:0 0 0 4px rgba(155,140,252,.35), 0 0 18px rgba(155,140,252,1);
}
.steps-counter {
  position:absolute; right:0; top:-8px;
  font-weight:400; color:var(--muted); font-size:14px; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.steps-counter #stepsCounterNum { font-size:30px; font-weight:600; color:var(--violet); }

.step-item {
  padding:22px 0; opacity:.45; border-top:1px solid var(--line);
  transform:translateX(-14px);
  transition:opacity .5s, transform .5s cubic-bezier(.22,1,.36,1);
  cursor:pointer;
}
.step-item:hover { opacity:.75; }
.step-item:first-child { border-top:none; }
.step-item.is-active { opacity:1; transform:translateX(0); }

.steps-dots { display:none; gap:8px; justify-content:center; margin:10px 0 4px; }
.steps-dots button {
  font-family:var(--kr); font-size:12px; letter-spacing:.14em;
  color:var(--muted-2); background:transparent;
  border:1px solid var(--line); border-radius:100px;
  padding:8px 14px; cursor:pointer; transition:all .3s;
}
.steps-dots button.is-active, .steps-dots button:hover {
  color:var(--text); border-color:var(--violet); background:var(--violet-dim);
}
.step-num { font-size:12px; letter-spacing:.35em; color:var(--violet); margin-bottom:8px; }
.step-item h3 { font-size:clamp(20px, 2.4vw, 30px); margin-bottom:8px; line-height:1.36; }
.step-item p { color:var(--muted-2); font-weight:400; font-size:15px; line-height:1.7; max-width:440px; }
.step-line {
  height:3px; max-width:440px; margin-top:14px; border-radius:3px; overflow:hidden;
  background:var(--line); opacity:0; transition:opacity .4s;
}
.step-item.is-active .step-line { opacity:1; }
.step-line-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--violet), var(--pink));
  box-shadow:0 0 10px rgba(155,140,252,.7);
}

.steps-phone { position:relative; display:flex; justify-content:center; }
.phone-glow {
  position:absolute; inset:-12%; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(155,140,252,.28), transparent 65%);
  filter:blur(30px);
}
.phone-frame {
  position:relative; z-index:1;
  width:min(300px, 68vw); aspect-ratio:490/1010;
  border-radius:16% / 7.8%;
  overflow:hidden;
  background:linear-gradient(180deg, #16141C, #0B0A0E 55%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
/* 이미지가 없을 때 깨진 아이콘 대신 빈 화면으로 */
img.is-missing { display:none !important; }
/* 히어로 사진이 없으면 자리도 접는다 (헤드라인이 위로 올라옴) */
.hero-phone.is-empty { display:none; }
/* 목업 원본이 1520×2688(0.566) — 프레임(0.485)보다 넓다.
   cover 로 두면 좌우 카드가 잘리므로 contain + 상단정렬. 하단 여백은 베젤로 읽힌다 */
.step-shot {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center top;
  background:#0B0A0E;
  max-width:none;
  opacity:0; transition:opacity .6s;
}
.step-shot.is-active { opacity:1; }

/* ─────────── 브라우저 창 프레임 (실제 앱 캡처용) ───────────
   레퍼런스는 세로 폰 프레임이지만 Work-X는 데스크톱 웹앱이라
   같은 자리에 가로 브라우저 창을 놓는다. (에셋 슬롯 교체 범위) */
.win-frame {
  position:relative; z-index:1; width:100%;
  border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, #16141C, #0B0A0E 55%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 40px 110px rgba(0,0,0,.6), 0 0 60px rgba(90,74,240,.18);
  will-change:transform;
}
.win-bar {
  display:flex; align-items:center; gap:7px;
  height:36px; padding:0 14px;
  background:linear-gradient(180deg, #211F2A, #17151C);
  border-bottom:1px solid var(--line);
}
.win-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.win-dot:nth-child(1) { background:#5A5566; }
.win-dot:nth-child(2) { background:#4A4554; }
.win-dot:nth-child(3) { background:#3E3948; }
.win-url {
  margin-left:12px; font-size:11px; color:var(--muted); letter-spacing:.02em;
  background:rgba(234,234,240,.05); border:1px solid var(--line);
  border-radius:100px; padding:4px 14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 실제 앱 캡처 크롭 시스템
   원본은 전부 폭 1916px. 좌측 사이드바 306px 를 잘라내고 본문 1610px 만 보여준다.
   (사이드바에 워크스페이스명 "(데모)" 가 박혀 있어 잘라내는 편이 안전하고, 본문도 커진다)
     width  = 1916 / 1610 = 119%
     left   = -306 / 1610 = -19%
     --ty   = 세로 오프셋. 원본 y(px) × -0.0994% 로 계산 (예: y=200px → -19.9%) */
.win-body { position:relative; aspect-ratio:16/10; overflow:hidden; background:#0F0E13; }
.win-shot {
  position:absolute; z-index:2; max-width:none;
  width:var(--w, 119%); height:auto;
  left:var(--tx, -19%); top:var(--ty, 0%);
}
/* 사이드바까지 통째로 보여줘야 할 때 (메뉴 27개 증명용) */
.win-body.full .win-shot { width:100%; left:0; }
/* 실제 캡처가 아직 없을 때 자리 표시 (파일명이 그대로 보여서 무엇을 넣어야 할지 알 수 있다) */
.win-empty {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:
    linear-gradient(180deg, rgba(155,140,252,.10), rgba(11,10,14,0) 42%),
    repeating-linear-gradient(180deg, rgba(234,234,240,.035) 0 1px, transparent 1px 22px),
    #0F0E13;
  color:var(--muted); font-size:12.5px; letter-spacing:.02em; text-align:center; padding:0 20px;
}
.win-empty b { color:var(--violet); font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; }
.win-stack { position:relative; }
.win-stack .win-frame + .win-frame {
  position:absolute; inset:0; opacity:0; transition:opacity .6s;
}
.win-stack .win-frame.is-active { opacity:1; z-index:2; }
.win-glow {
  position:absolute; inset:-14% -8%; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(155,140,252,.26), transparent 66%);
  filter:blur(34px); pointer-events:none;
}

/* ─────────── 서브페이지 공통 ─────────── */
.sub-head { padding:clamp(120px,16vh,170px) var(--space-inline) clamp(36px,5vh,56px); text-align:center; }
.sub-head h1 { font-size:var(--fs-h2); line-height:1.24; margin-bottom:16px; }
.sub-head h1 .dim { color:var(--muted); }
.sub-head p { color:var(--muted-2); font-size:clamp(15px,1.6vw,17px); line-height:1.8; max-width:680px; margin:0 auto; }
.crumbs {
  display:flex; gap:8px; justify-content:center; align-items:center;
  font-size:12.5px; color:var(--muted); margin-bottom:22px; flex-wrap:wrap;
}
.crumbs a { color:var(--muted-2); transition:color .3s; }
.crumbs a:hover { color:var(--violet); }

/* 대분류 요약 카드 (메인 → 상세페이지 유도) */
.hub-grid {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px;
}
.hub-card {
  display:flex; flex-direction:column; gap:12px;
  padding:30px 28px 28px; border-radius:22px;
  background:linear-gradient(160deg, rgba(30,28,38,.92), rgba(21,19,26,.92));
  border:1px solid var(--line);
  transition:transform .4s, border-color .4s, box-shadow .4s;
}
.hub-card:hover { transform:translateY(-4px); border-color:rgba(155,140,252,.42); box-shadow:0 18px 52px rgba(90,74,240,.18); }
.hub-card .count { font-size:11.5px; letter-spacing:.18em; color:var(--violet); font-weight:700; }
.hub-card h3 { font-size:19px; line-height:1.4; }
.hub-card p { font-size:13.5px; color:var(--muted-2); line-height:1.7; flex:1; }
.hub-card .menus { font-size:12.5px; color:var(--muted); line-height:1.8; }
.hub-card .more { font-size:13px; color:var(--violet); margin-top:4px; }

/* 메뉴 상세 테이블형 리스트 (features 페이지) */
.menu-block { max-width:var(--container); margin:0 auto clamp(56px,8vh,90px); }
.menu-block-head {
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:26px; border-bottom:1px solid var(--line);
}
.menu-block-head h2 { font-size:clamp(22px,2.6vw,32px); line-height:1.3; }
.menu-block-head .count {
  font-size:12px; letter-spacing:.16em; font-weight:700; color:var(--violet);
  background:var(--violet-dim); border:1px solid rgba(155,140,252,.3);
  border-radius:100px; padding:5px 13px;
}
.menu-block-head p { flex-basis:100%; font-size:14px; color:var(--muted-2); line-height:1.75; margin-top:4px; }
.menu-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:16px; }
.menu-item {
  display:flex; gap:15px; padding:22px 22px;
  border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(30,28,38,.86), rgba(21,19,26,.86));
  transition:border-color .35s, box-shadow .35s, transform .35s;
}
.menu-item:hover { transform:translateY(-3px); border-color:rgba(155,140,252,.4); box-shadow:0 14px 42px rgba(90,74,240,.16); }
.menu-item .icon-tile { margin-top:2px; }
.menu-item h3 { font-size:16.5px; margin-bottom:6px; line-height:1.45; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.menu-item p { font-size:13.5px; color:var(--muted-2); line-height:1.75; }
.menu-item .val { display:block; margin-top:9px; font-size:13px; color:var(--violet); line-height:1.7; }
.tag-mini {
  font-size:10.5px; font-weight:700; letter-spacing:.1em; white-space:nowrap;
  color:var(--violet); background:var(--violet-dim);
  border:1px solid rgba(155,140,252,.3); border-radius:100px; padding:3px 9px;
}
.tag-mini.soon { color:var(--muted-2); border-color:var(--line); background:rgba(234,234,240,.05); }

/* 좌우 2단 설명 블록 (features 상세 안 캡처 배치) */
.shot-row {
  max-width:var(--container); margin:0 auto clamp(56px,8vh,96px);
  display:grid; grid-template-columns:minmax(280px,1fr) minmax(300px,1.15fr);
  gap:clamp(28px,5vw,72px); align-items:center;
}
.shot-row.rev .shot-copy { order:2; }
.shot-row.rev .shot-win  { order:1; }
.shot-copy h3 { font-size:clamp(21px,2.6vw,32px); line-height:1.3; margin-bottom:16px; }
.shot-copy h3 .lav { color:var(--violet); }
.shot-copy p { color:var(--muted-2); font-size:15.5px; line-height:1.8; margin-bottom:20px; }
.shot-copy ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.shot-copy li { position:relative; padding-left:24px; color:var(--muted-2); font-size:14.5px; line-height:1.7; }
.shot-copy li::before {
  content:''; position:absolute; left:0; top:8px; width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg, var(--violet), var(--pink)); box-shadow:0 0 9px rgba(155,140,252,.55);
}
.shot-copy li em { font-style:normal; color:var(--violet); }
.shot-win { position:relative; }
@media (max-width: 900px) {
  .shot-row { grid-template-columns:1fr; gap:28px; }
  .shot-row.rev .shot-copy { order:1; }
  .shot-row.rev .shot-win  { order:2; }
}

/* 페이지 하단 다음 단계 안내 */
.next-nav {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px;
  padding:0 0 clamp(60px,9vh,110px);
}
.next-card {
  padding:24px 24px; border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(30,28,38,.8), rgba(21,19,26,.8));
  transition:border-color .35s, transform .35s;
}
.next-card:hover { border-color:rgba(155,140,252,.42); transform:translateY(-3px); }
.next-card span { display:block; font-size:11.5px; letter-spacing:.16em; color:var(--violet); font-weight:700; margin-bottom:8px; }
.next-card b { display:block; font-size:16px; font-weight:600; margin-bottom:6px; line-height:1.45; }
.next-card p { font-size:13px; color:var(--muted-2); line-height:1.7; }

/* ─────────── inside: connected engineering rows ─────────── */
.exploded { padding:clamp(40px, 6vh, 90px) var(--space-inline); }
.exploded-head { text-align:center; margin-bottom:clamp(20px, 3.5vh, 44px); }
.exploded-title { font-size:var(--fs-h2); line-height:1.24; }
.exploded-title .dim { color:var(--muted); }
.inside-list {
  position:relative; max-width:var(--container); margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(12px, 2.2vh, 26px);
}
.inside-list::before {
  content:''; position:absolute; left:115px; top:-24px; bottom:-24px; width:3px;
  background:linear-gradient(180deg, transparent, var(--trace) 8%, var(--trace) 92%, transparent);
  border-radius:3px;
}
.i-row { display:grid; grid-template-columns:230px 1fr minmax(260px, 46%); align-items:center; gap:0; position:relative; }
.i-tile {
  width:230px; height:clamp(92px, 13vh, 128px); border-radius:22px;
  background:linear-gradient(160deg, rgba(37,33,48,.96), rgba(22,19,28,.96));
  border:1px solid rgba(155,140,252,.28);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  position:relative; z-index:1;
  transition:border-color .35s, box-shadow .35s;
}
.i-tile:hover { border-color:rgba(155,140,252,.6); box-shadow:0 24px 60px rgba(90,74,240,.25); }
.i-tile span { font-size:13.5px; letter-spacing:.06em; color:var(--muted-2); font-weight:500; }
.i-tile .count { font-size:11.5px; color:var(--violet); letter-spacing:.16em; }
.i-tile.chip-tile { background:none; border:none; box-shadow:none; }
.i-trace { height:54px; width:100%; align-self:center; overflow:visible; }
.i-trace .i-line {
  stroke:rgba(155,140,252,.62); stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.i-trace .i-pulse {
  stroke:#D6CCFF; stroke-width:4.2; opacity:0;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 7px rgba(155,140,252,1));
}
.i-trace .i-pad {
  stroke:#B4A6FF; stroke-width:8; stroke-linecap:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(155,140,252,.8));
}
.i-trace .i-pad.ring { stroke:rgba(155,140,252,.28); stroke-width:15; filter:none; }
.i-info h4 { font-size:clamp(16px, 1.8vw, 20px); margin-bottom:6px; line-height:1.4; }
.i-info p { font-size:14px; color:var(--muted-2); font-weight:400; line-height:1.7; }
.i-info .menus { margin-top:8px; font-size:12.5px; color:var(--muted); line-height:1.7; }

/* ─────────── features (circuit board) ─────────── */
.features { padding:var(--space-section) var(--space-inline); }
.features-title {
  font-size:var(--fs-h2); line-height:1.24; margin-bottom:var(--space-title); text-align:center;
  max-width:var(--container); margin-left:auto; margin-right:auto;
}
.features-title .dim { color:var(--muted); font-weight:600; }
.features-wrap {
  position:relative; display:grid;
  grid-template-columns:1fr clamp(220px, 26vw, 360px) 1fr;
  align-items:stretch; max-width:var(--container); margin:0 auto;
}
.f-col { display:flex; flex-direction:column; gap:22px; justify-content:space-between; }
.f-card {
  display:flex; gap:16px; align-items:center;
  flex:1;
  background:linear-gradient(160deg, rgba(30,28,38,.92), rgba(21,19,26,.92));
  border:1px solid var(--line); border-radius:20px;
  padding:26px 26px;
  transition:transform .4s, border-color .4s, box-shadow .4s;
}
.f-card:hover { transform:translateY(-4px); border-color:rgba(155,140,252,.4); box-shadow:0 16px 50px rgba(90,74,240,.18); }
.f-card h3 { font-size:17.5px; margin-bottom:6px; line-height:1.4; }
.f-card p { color:var(--muted-2); font-weight:400; font-size:13.5px; line-height:1.65; }
.f-center { position:relative; min-height:420px; }
.f-net { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.f-chip { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(84px, 9vw, 110px); }

/* ─────────── signature features ─────────── */
.signature { padding:var(--space-section) var(--space-inline); overflow:hidden; }
.sig-title { text-align:center; font-size:var(--fs-h2); line-height:1.24; margin-bottom:var(--space-title); }
.sig-title .dim { color:var(--muted); }
.sig-row {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:minmax(280px, 1fr) minmax(280px, 1fr);
  gap:clamp(30px, 5vw, 90px); align-items:center;
}
.sig-connector { max-width:var(--container); margin:0 auto; height:clamp(120px, 18vh, 200px); }
.sig-connector svg { width:100%; height:100%; overflow:visible; }
.sig-connector path { stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.sig-connector path[data-pulse] { stroke:#D6CCFF; stroke-width:4.6; filter:drop-shadow(0 0 9px rgba(155,140,252,1)); }
.sig-rev .sig-copy { order:2; }
.sig-rev .sig-phone { order:1; }
.sig-badge {
  display:inline-block; margin-bottom:18px;
  font-size:11.5px; font-weight:800; letter-spacing:.2em;
  padding:9px 16px; border-radius:100px; color:#fff;
  background:linear-gradient(120deg, var(--violet), var(--pink));
  box-shadow:0 8px 26px rgba(155,140,252,.4);
}
.sig-copy h3 { font-size:clamp(24px, 3vw, 40px); line-height:1.28; margin-bottom:18px; }
.sig-copy h3 .lav { color:var(--violet); }
.sig-copy p { color:var(--muted-2); font-size:clamp(15px, 1.5vw, 17.5px); line-height:1.75; margin-bottom:22px; }
.sig-copy ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.sig-copy li { position:relative; padding-left:26px; color:var(--muted-2); font-size:14.5px; line-height:1.65; }
.sig-copy li::before {
  content:''; position:absolute; left:0; top:8px;
  width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg, var(--violet), var(--pink));
  box-shadow:0 0 10px rgba(155,140,252,.6);
}
.sig-copy li em { font-style:normal; color:var(--violet); }
.sig-phone { display:flex; justify-content:center; }
.sig-shot {
  position:relative;
  width:min(340px, 78vw); aspect-ratio:1040/2154;
  border-radius:12% / 5.8%; overflow:hidden;
  background:linear-gradient(180deg, #16141C, #0B0A0E 55%);
  border:1px solid rgba(255,255,255,.12);
  max-height:64vh;
  filter:drop-shadow(0 34px 80px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(90,74,240,.25));
  will-change:transform;
}
.sig-shot img { width:100%; height:100%; object-fit:contain; object-position:center top; background:#0B0A0E; }
@media (max-width: 900px) {
  .sig-row { grid-template-columns:1fr; gap:34px; }
  .sig-rev .sig-copy { order:1; }
  .sig-rev .sig-phone { order:2; }
  .sig-shot { width:min(280px, 74vw); max-height:none; }
}

/* ─────────── tech / proof ─────────── */
.tech { padding:10vh 24px 12vh; text-align:center; }
.tech .section-kicker { margin-bottom:40px; }
.tech-logos { display:flex; justify-content:center; gap:clamp(16px, 3vw, 32px); flex-wrap:wrap; }
.tech-logo {
  display:flex; align-items:center; gap:18px;
  padding:24px 42px; border-radius:22px;
  background:linear-gradient(160deg, rgba(31,29,39,.92), rgba(21,19,26,.92));
  border:1px solid var(--line);
  transition:border-color .35s, box-shadow .35s;
}
.tech-logo:hover { border-color:rgba(155,140,252,.55); box-shadow:0 20px 55px rgba(90,74,240,.22); }
.tech-logo span { font-size:clamp(18px, 2vw, 23px); font-weight:600; color:var(--text); }
@media (max-width: 640px) {
  .tech-logo { padding:16px 26px; gap:12px; }
  .tech-logo span { font-size:16px; }
}

/* ─────────── imagine ─────────── */
.imagine { padding:var(--space-section) var(--space-inline); overflow:hidden; }
.imagine-grid {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:minmax(300px, 1fr) minmax(300px, 1fr);
  gap:clamp(30px, 5vw, 80px); align-items:center;
}
.imagine-title { font-size:var(--fs-h2); line-height:1.22; margin-bottom:28px; }
.imagine-title .accent { color:var(--violet); }
.imagine-lead { color:var(--muted-2); font-size:clamp(15px,1.5vw,17.5px); line-height:1.8; margin-bottom:32px; }
.imagine-points { list-style:none; display:flex; flex-direction:column; gap:20px; margin-bottom:38px; }
.imagine-points li { display:flex; align-items:center; gap:16px; }
.imagine-points span { font-size:clamp(15px, 1.5vw, 18px); color:var(--muted-2); line-height:1.6; }
.imagine-stat {
  display:flex; align-items:center; gap:20px;
  padding:20px 26px; margin-bottom:38px; max-width:440px;
  border-radius:20px; border:1px solid rgba(155,140,252,.35);
  background:linear-gradient(160deg, rgba(37,33,48,.9), rgba(22,19,28,.9));
  box-shadow:0 16px 44px rgba(90,74,240,.14);
}
.stat-num {
  font-size:clamp(30px, 3.2vw, 42px); font-weight:800; white-space:nowrap;
  background:linear-gradient(120deg, var(--violet), var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(155,140,252,.4));
}
.imagine-stat p { font-size:14.5px; line-height:1.6; color:var(--muted-2); }
.imagine-stat strong { color:var(--text); font-weight:600; }
.imagine-badges { justify-content:flex-start; }

.imagine-phones { position:relative; }
.imagine-device {
  position:relative; width:min(330px, 78vw); margin:0 auto;
  padding:11px; border-radius:52px;
  background:linear-gradient(160deg, #3B3A44, #17161C 30%, #0B0A0E 72%, #2C2B34);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 0 4px rgba(255,255,255,.22),
    0 34px 80px rgba(0,0,0,.6),
    0 0 60px rgba(90,74,240,.28);
  will-change:transform;
}
.imagine-device img { width:100%; height:auto; display:block; border-radius:42px; aspect-ratio:1520/2688; object-fit:cover; object-position:center top; background:#0B0A0E; }
@media (max-width: 900px) {
  .imagine-grid { grid-template-columns:1fr; }
  .imagine-phones { order:-1; margin:0 auto; width:100%; }
  .imagine-device { width:min(280px, 74vw); }
  .imagine-badges { justify-content:flex-start; }
}

/* 회사 지표 4칸 */
.metrics {
  max-width:var(--container); margin:clamp(40px,6vh,72px) auto 0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:18px;
}
.metric {
  padding:26px 24px; border-radius:20px; text-align:center;
  background:linear-gradient(160deg, rgba(30,28,38,.92), rgba(21,19,26,.92));
  border:1px solid var(--line);
  transition:border-color .35s, box-shadow .35s;
}
.metric:hover { border-color:rgba(155,140,252,.4); box-shadow:0 16px 50px rgba(90,74,240,.16); }
.metric b {
  display:block; font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(120deg, var(--violet), var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:8px;
}
.metric span { font-size:13px; color:var(--muted); letter-spacing:.02em; }

/* ─────────── pricing (3 플랜) ─────────── */
.pricing { padding:var(--space-section) var(--space-inline); text-align:center; }
.pricing h2 { font-size:var(--fs-h2); line-height:1.24; margin-bottom:18px; }
.pricing-sub { color:var(--muted-2); font-size:15px; line-height:1.7; margin-bottom:34px; }
.price-plans { display:flex; gap:8px; justify-content:center; margin-bottom:36px; flex-wrap:wrap; }
.plan {
  font-family:var(--kr); font-size:13px; color:var(--muted-2);
  background:transparent; border:1px solid var(--line); border-radius:100px;
  padding:9px 18px; cursor:pointer; transition:all .3s; white-space:nowrap;
}
.plan.is-active, .plan:hover { color:var(--text); border-color:var(--violet); background:var(--violet-dim); }

.price-grid {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; align-items:stretch;
}
.price-card {
  position:relative; text-align:left; padding:38px 32px 34px;
  background:linear-gradient(170deg, rgba(30,28,38,.95), rgba(17,15,20,.95));
  border:1px solid var(--line); border-radius:28px;
  display:flex; flex-direction:column;
  transition:transform .4s, border-color .4s, box-shadow .4s;
}
.price-card:hover { transform:translateY(-4px); border-color:rgba(155,140,252,.4); }
.price-card.is-featured {
  border-color:rgba(155,140,252,.45);
  box-shadow:0 0 80px rgba(155,140,252,.14);
}
.price-flag {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-size:11.5px; font-weight:800; letter-spacing:.14em; white-space:nowrap;
  padding:7px 16px; border-radius:100px; color:#0E0C12;
  background:linear-gradient(100deg, var(--violet), #7B68F0);
  box-shadow:0 8px 26px rgba(155,140,252,.4);
}
.price-name { font-size:22px; font-weight:700; margin-bottom:6px; }
.price-seats { font-size:13px; color:var(--muted); margin-bottom:22px; letter-spacing:.01em; }
.price-amount { font-size:clamp(38px, 4.6vw, 52px); font-weight:700; letter-spacing:-.03em; line-height:1.1; }
.price-amount span { font-size:.36em; color:var(--muted); font-weight:500; letter-spacing:0; }
.price-save {
  display:inline-block; margin-top:12px;
  padding:7px 14px; border-radius:100px;
  font-size:12.5px; color:var(--text);
  background:var(--violet-dim); border:1px solid rgba(155,140,252,.4);
}
.price-save b { color:var(--violet); font-weight:700; }
.price-credit {
  display:flex; align-items:center; gap:9px; margin:18px 0 22px;
  font-size:13.5px; color:var(--muted-2);
}
.price-credit b { color:var(--text); font-weight:700; }
.price-credit .icon-tile { width:28px; height:28px; border-radius:9px; }
.price-credit .icon-tile svg { width:15px; height:15px; }
.price-list { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:28px; flex:1; }
.price-list li { position:relative; padding-left:24px; font-size:14px; color:var(--muted-2); line-height:1.6; }
.price-list li::before {
  content:''; position:absolute; left:0; top:6px; width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg, var(--violet), var(--pink));
  box-shadow:0 0 9px rgba(155,140,252,.55);
}
.btn-primary {
  display:inline-block; padding:16px 40px; border-radius:100px; text-align:center;
  background:linear-gradient(100deg, var(--violet), #7B68F0);
  color:#0E0C12; font-weight:700; font-size:15.5px;
  box-shadow:0 12px 44px rgba(155,140,252,.35);
  transition:transform .3s, box-shadow .3s;
  font-family:var(--kr); border:none; cursor:pointer;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 18px 60px rgba(155,140,252,.55); }
.btn-ghost {
  display:inline-block; padding:15px 38px; border-radius:100px; text-align:center;
  border:1px solid rgba(155,140,252,.4); color:var(--text);
  font-weight:600; font-size:15px; font-family:var(--kr);
  transition:all .3s; cursor:pointer; background:transparent;
}
.btn-ghost:hover { background:var(--violet-dim); border-color:var(--violet); }
.price-card .btn-primary, .price-card .btn-ghost { width:100%; }
.price-cta-note { margin-top:12px; font-size:12px; color:var(--muted); text-align:center; }

.price-notes {
  max-width:900px; margin:clamp(40px,6vh,64px) auto 0; text-align:left;
  padding:28px 30px; border-radius:22px;
  background:linear-gradient(160deg, rgba(30,28,38,.72), rgba(21,19,26,.72));
  border:1px solid var(--line);
}
.price-notes h4 { font-size:15px; margin-bottom:14px; color:var(--violet); letter-spacing:.02em; }
.price-notes ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.price-notes li { position:relative; padding-left:20px; font-size:13.5px; color:var(--muted-2); line-height:1.75; }
.price-notes li::before { content:''; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--violet); opacity:.7; }
.price-notes strong { color:var(--text); font-weight:600; }

@media (max-width: 900px) {
  .price-grid { grid-template-columns:1fr; gap:26px; }
  .price-card { padding:32px 22px 28px; }
}

/* ─────────── 데모 체험 밴드 ─────────── */
.demo { padding:clamp(40px,7vh,90px) var(--space-inline); }
.demo-band {
  position:relative; max-width:var(--container); margin:0 auto;
  padding:clamp(34px,4.6vw,58px) clamp(26px,4vw,58px);
  border-radius:30px; text-align:center; overflow:hidden;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(155,140,252,.20), rgba(17,15,20,0) 62%),
    linear-gradient(170deg, rgba(33,30,44,.96), rgba(17,15,20,.96));
  border:1px solid rgba(155,140,252,.42);
  box-shadow:0 0 90px rgba(155,140,252,.16);
}
.demo-live {
  display:inline-flex; align-items:center; gap:9px; margin-bottom:18px;
  font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--violet);
  background:var(--violet-dim); border:1px solid rgba(155,140,252,.36);
  border-radius:100px; padding:7px 16px;
}
.demo-live i {
  width:8px; height:8px; border-radius:50%; background:#5BE39B;
  box-shadow:0 0 0 0 rgba(91,227,155,.6); animation:demoPulse 2s infinite;
}
@keyframes demoPulse {
  0%   { box-shadow:0 0 0 0 rgba(91,227,155,.55); }
  70%  { box-shadow:0 0 0 9px rgba(91,227,155,0); }
  100% { box-shadow:0 0 0 0 rgba(91,227,155,0); }
}
.demo-band h2 { font-size:clamp(24px,3.4vw,42px); line-height:1.28; margin-bottom:14px; }
.demo-band h2 .lav { color:var(--violet); }
.demo-band > p { color:var(--muted-2); font-size:clamp(14.5px,1.5vw,17px); line-height:1.8; max-width:640px; margin:0 auto 26px; }
.demo-url {
  display:inline-block; margin-bottom:26px;
  font-size:13.5px; color:var(--muted-2); letter-spacing:.02em;
  background:rgba(234,234,240,.05); border:1px solid var(--line);
  border-radius:100px; padding:8px 20px;
}
.demo-facts {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px;
}
.demo-facts span {
  font-size:12.5px; color:var(--muted); line-height:1.6;
  background:rgba(234,234,240,.04); border:1px solid var(--line);
  border-radius:100px; padding:8px 15px;
}

/* ─────────── 로드맵 (곧 추가될 기능) ─────────── */
.roadmap { padding:var(--space-section) var(--space-inline); }
.roadmap-head { text-align:center; max-width:820px; margin:0 auto clamp(38px,5.5vh,66px); }
.roadmap-head h2 { font-size:var(--fs-h2); line-height:1.24; margin-bottom:16px; }
.roadmap-head h2 .dim { color:var(--muted); }
.roadmap-head p { color:var(--muted-2); font-size:clamp(15px,1.5vw,17px); line-height:1.85; }
.roadmap-grid {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:20px;
}
.rm-card {
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:30px 28px 28px; border-radius:22px;
  background:linear-gradient(160deg, rgba(30,28,38,.78), rgba(21,19,26,.78));
  border:1px dashed rgba(155,140,252,.3);
  transition:border-color .4s, box-shadow .4s, transform .4s;
}
.rm-card:hover { border-color:rgba(155,140,252,.55); box-shadow:0 18px 52px rgba(90,74,240,.16); transform:translateY(-3px); }
.rm-card.is-lead { border-style:solid; border-color:rgba(155,140,252,.45); background:linear-gradient(160deg, rgba(37,33,50,.9), rgba(21,19,26,.9)); }
.rm-badge {
  align-self:flex-start;
  font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--violet);
  background:var(--violet-dim); border:1px solid rgba(155,140,252,.32);
  border-radius:100px; padding:5px 12px;
}
.rm-card h3 { font-size:19px; line-height:1.4; }
.rm-card > p { font-size:13.5px; color:var(--muted-2); line-height:1.75; }
.rm-card ul { list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:2px; }
.rm-card li { position:relative; padding-left:22px; font-size:13.5px; color:var(--muted-2); line-height:1.7; }
.rm-card li::before {
  content:''; position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg, var(--violet), var(--pink)); opacity:.85;
}
.rm-card li b { color:var(--text); font-weight:600; }
/* 시퀀스 흐름 표시 */
.rm-flow { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; }
.rm-flow span {
  font-size:12px; color:var(--muted-2); line-height:1.5;
  background:rgba(234,234,240,.05); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px;
}
.rm-flow span.on { color:var(--text); border-color:rgba(155,140,252,.4); background:var(--violet-dim); }
.roadmap-note {
  max-width:820px; margin:clamp(34px,5vh,56px) auto 0; text-align:center;
  font-size:13.5px; color:var(--muted); line-height:1.85;
}

/* ─────────── insights (인사이트 게시판) ─────────── */
.insights { padding:var(--space-section) var(--space-inline); }
.insights-head {
  max-width:var(--container); margin:0 auto clamp(34px,5vh,56px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.insights-head h2 { font-size:var(--fs-h2); line-height:1.24; }
.insights-head .dim { color:var(--muted); }
.insights-more { font-size:14px; color:var(--violet); white-space:nowrap; transition:opacity .3s; }
.insights-more:hover { opacity:.75; }
.insight-grid {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:22px;
}
.insight-card {
  display:flex; flex-direction:column;
  background:linear-gradient(160deg, rgba(30,28,38,.92), rgba(21,19,26,.92));
  border:1px solid var(--line); border-radius:22px; overflow:hidden;
  transition:transform .4s, border-color .4s, box-shadow .4s;
}
.insight-card:hover { transform:translateY(-4px); border-color:rgba(155,140,252,.4); box-shadow:0 18px 52px rgba(90,74,240,.18); }
.insight-thumb {
  aspect-ratio:16/9; position:relative; overflow:hidden;
  background:linear-gradient(140deg, rgba(90,74,240,.28), rgba(79,139,255,.16) 60%, rgba(17,15,20,.9));
  display:grid; place-items:center;
}
.insight-thumb img { width:100%; height:100%; object-fit:cover; }
.insight-thumb .icon-tile--lg { background:rgba(17,15,20,.45); border-color:rgba(255,255,255,.18); color:#EDE9FF; }
.insight-body { padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.insight-meta { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.insight-tag {
  font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--violet);
  padding:5px 11px; border-radius:100px;
  background:var(--violet-dim); border:1px solid rgba(155,140,252,.3);
}
.insight-body h3 { font-size:17.5px; line-height:1.5; }
.insight-body p { font-size:13.5px; color:var(--muted-2); line-height:1.7; flex:1; }
.insight-read { font-size:13px; color:var(--violet); margin-top:4px; }

/* 인사이트 목록 페이지 */
.page-head { padding:150px var(--space-inline) clamp(40px,6vh,64px); text-align:center; }
.page-head h1 { font-size:var(--fs-h2); line-height:1.24; margin-bottom:16px; }
.page-head p { color:var(--muted-2); font-size:16px; line-height:1.75; max-width:640px; margin:0 auto; }
.filter-row { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.list-wrap { padding:0 var(--space-inline) var(--space-section); }

/* 인사이트 상세 */
/* ★ 2026-08-23 대표 지시 — "인사이트 상세는 배경이 없어야 할 것 같다. 본문이 제대로 안 보인다."
   홈의 3D 그물망 배경이 글 뒤에서 그대로 돌아가 글자와 겹쳐 읽기 어려웠다.
   배경을 지우는 대신 **글이 놓이는 판**을 하나 깔았다 — 홈의 톤(어두운 남보라·보라 테두리)은
   그대로 가져가되, 판 안쪽은 불투명하게 만들어 글자와 배경이 섞이지 않게 한다. */
.article {
  max-width:820px; margin:0 auto;
  padding:clamp(28px,4vw,44px) clamp(20px,4vw,52px) clamp(36px,5vw,64px);
  margin-top:120px; margin-bottom:var(--space-section);
  background:linear-gradient(180deg, rgba(18,16,26,.97), rgba(13,12,19,.99));
  border:1px solid rgba(155,140,252,.16);
  border-radius:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
}
@media (max-width:640px){
  .article { margin-top:96px; border-radius:18px; }
}
.article h1 { font-size:clamp(28px, 4vw, 46px); line-height:1.32; margin:16px 0 20px; }
.article .article-meta { display:flex; gap:12px; align-items:center; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.article-hero {
  margin:34px 0 40px; border-radius:22px; overflow:hidden; aspect-ratio:16/9;
  background:linear-gradient(140deg, rgba(90,74,240,.28), rgba(79,139,255,.16) 60%, rgba(17,15,20,.9));
  border:1px solid var(--line); display:grid; place-items:center;
}
.article-hero img { width:100%; height:100%; object-fit:cover; }
.article-body { font-size:16.5px; line-height:1.9; color:var(--muted-2); }
.article-body h2 { font-size:clamp(21px,2.4vw,28px); color:var(--text); margin:44px 0 16px; line-height:1.4; }
.article-body h3 { font-size:clamp(17px,2vw,21px); color:var(--text); margin:32px 0 12px; line-height:1.45; }
.article-body p { margin-bottom:20px; }
.article-body ul, .article-body ol { margin:0 0 22px 20px; display:flex; flex-direction:column; gap:10px; }
.article-body strong { color:var(--text); font-weight:600; }
.article-body blockquote {
  margin:28px 0; padding:20px 24px; border-radius:16px;
  border:1px solid rgba(155,140,252,.28); background:var(--violet-dim);
  color:var(--text); font-size:16px; line-height:1.8;
}
/* ★ 2026-08-23 대표 지시 — 표에 테두리 선이 없어 칸이 구분되지 않았다.
   가로줄만 있어서 값이 어느 칸 것인지 눈으로 따라가기 어려웠다. 격자를 그린다. */
.article-body table {
  width:100%; border-collapse:collapse; margin:24px 0; font-size:14.5px;
  border:1px solid rgba(155,140,252,.26); border-radius:12px; overflow:hidden;
}
.article-body th, .article-body td {
  padding:12px 14px; text-align:left;
  border:1px solid rgba(155,140,252,.18);
}
.article-body th { color:var(--text); font-weight:600; background:rgba(124,92,255,.12); }
.article-body tbody tr:nth-child(even) { background:rgba(255,255,255,.02); }
.article-body td { color:var(--muted-2); }
.article-cta {
  margin-top:56px; padding:34px 32px; border-radius:24px; text-align:center;
  background:linear-gradient(160deg, rgba(37,33,48,.9), rgba(22,19,28,.9));
  border:1px solid rgba(155,140,252,.3);
}
.article-cta h3 { font-size:21px; margin-bottom:18px; line-height:1.45; }
.article-cta p { font-size:14.5px; color:var(--muted-2); margin-bottom:22px; line-height:1.7; }

/* ★ 2026-08-23 대표 지시 — 기능 28개로 보내는 가로 긴 CTA 한 줄.
   추천 글 바로 위에 둔다. 숫자를 왼쪽에 크게 세워 눈이 먼저 닿게 했다. */
.feature-bar {
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:clamp(16px,3vw,30px);
  margin-top:clamp(30px,4vh,44px);
  padding:clamp(18px,2.4vw,24px) clamp(20px,3vw,30px);
  border-radius:20px; text-decoration:none;
  background:linear-gradient(100deg, rgba(124,92,255,.16), rgba(61,220,151,.10) 60%, rgba(124,92,255,.06));
  border:1px solid rgba(155,140,252,.34);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature-bar:hover { transform:translateY(-2px); border-color:rgba(155,140,252,.6); box-shadow:0 18px 44px rgba(124,92,255,.22); }
.feature-bar__glow {
  position:absolute; inset:-40% -10% auto auto; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,92,255,.35), transparent 68%);
  pointer-events:none;
}
.feature-bar__left { display:flex; flex-direction:column; align-items:center; line-height:1; flex:0 0 auto; }
.feature-bar__left b { font-size:clamp(34px,5vw,46px); color:var(--text); letter-spacing:-.02em; }
.feature-bar__left small { margin-top:6px; font-size:10px; letter-spacing:.18em; color:var(--muted); }
.feature-bar__mid { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.feature-bar__mid b { font-size:clamp(15px,1.8vw,18px); color:var(--text); line-height:1.4; }
.feature-bar__mid span { font-size:13.5px; color:var(--muted-2); line-height:1.65; }
.feature-bar__go {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:999px; white-space:nowrap;
  background:var(--violet, #7C5CFF); color:#fff; font-weight:700; font-size:14px;
}
.feature-bar__go svg { width:17px; height:17px; }
@media (max-width:720px){
  .feature-bar { flex-wrap:wrap; }
  .feature-bar__mid { flex:1 1 100%; order:3; }
  .feature-bar__go { margin-left:auto; }
}

/* ★ 2026-08-23 대표 지시 — 글 아래 관련 글 3개 */
.related { margin-top:clamp(38px,5vh,60px); }
.related__title { font-size:clamp(17px,2vw,20px); color:var(--text); margin-bottom:16px; }
.related__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.related__card {
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  border-radius:16px; border:1px solid rgba(155,140,252,.18);
  background:rgba(255,255,255,.025);
  transition:transform .22s ease, border-color .22s ease;
}
.related__card:hover { transform:translateY(-3px); border-color:rgba(155,140,252,.45); }
.related__thumb { display:block; aspect-ratio:16/9; overflow:hidden; background:rgba(0,0,0,.35); }
.related__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.related__body { display:flex; flex-direction:column; gap:7px; padding:14px 15px 16px; }
.related__body b { font-size:14.5px; line-height:1.5; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.related__desc { font-size:12.5px; line-height:1.6; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:820px){ .related__grid { grid-template-columns:1fr; } }

/* ─────────── signup (가입·결제 바로) ─────────── */
.signup { padding:var(--space-section) var(--space-inline); }
.signup-wrap {
  max-width:920px; margin:0 auto; padding:clamp(30px,4vw,52px);
  border-radius:32px;
  background:linear-gradient(170deg, rgba(30,28,38,.95), rgba(17,15,20,.95));
  border:1px solid rgba(155,140,252,.3);
  box-shadow:0 0 80px rgba(155,140,252,.12);
}
.signup-wrap h2 { font-size:clamp(24px,3.2vw,38px); line-height:1.3; margin-bottom:12px; text-align:center; }
.signup-wrap > p { color:var(--muted-2); font-size:15px; line-height:1.7; text-align:center; margin-bottom:34px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field.full { grid-column:1 / -1; }
.field label { font-size:13px; color:var(--muted-2); letter-spacing:.02em; }
.field label i { color:var(--violet); font-style:normal; }
.field input, .field select, .field textarea {
  font-family:var(--kr); font-size:14.5px; color:var(--text);
  background:rgba(234,234,240,.04); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; outline:none;
  transition:border-color .3s, background .3s;
}
.field textarea { min-height:110px; resize:vertical; line-height:1.7; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:rgba(155,140,252,.6); background:rgba(155,140,252,.06);
}
.field select option { background:#17151C; color:#EAEAF0; }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted-2); line-height:1.65; }
.consent input { width:18px; height:18px; accent-color:#9B8CFC; margin-top:2px; flex-shrink:0; }
.signup-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.signup-note { margin-top:18px; text-align:center; font-size:12.5px; color:var(--muted); line-height:1.7; }
@media (max-width: 640px) { .form-grid { grid-template-columns:1fr; } }

/* ─────────── cta ─────────── */
.cta { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--space-section) var(--space-inline); }
.cta-title { font-size:clamp(28px, 4.8vw, 68px); line-height:1.2; margin-bottom:44px; max-width:1100px; }
.cta-title .line { display:block; overflow:hidden; padding-bottom:.06em; }
.cta-title .char { display:inline-block; }
.cta-title .accent, .cta-title .accent .char {
  background:linear-gradient(100deg, var(--violet) 20%, var(--pink) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ─────────── faq ─────────── */
.faq { padding:var(--space-section) var(--space-inline); max-width:calc(860px + 2 * var(--space-inline)); margin:0 auto; }
.faq-title { text-align:center; font-size:var(--fs-h2); margin-bottom:var(--space-title); line-height:1.24; }
.faq-title .dim { color:var(--muted); }
.faq-list { display:flex; flex-direction:column; gap:14px; }
.faq-item {
  background:linear-gradient(160deg, rgba(30,28,38,.92), rgba(21,19,26,.92));
  border:1px solid var(--line); border-radius:18px;
  transition:border-color .35s;
}
.faq-item[open] { border-color:rgba(155,140,252,.4); }
.faq-item summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px;
  font-size:clamp(15.5px, 1.8vw, 18px); font-weight:600; line-height:1.5;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:'+'; flex-shrink:0;
  width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(155,140,252,.45); color:var(--violet);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:400;
  transition:transform .35s, background .35s;
}
.faq-item[open] summary::after { transform:rotate(45deg); background:var(--violet-dim); }
.faq-body { padding:0 26px 24px; color:var(--muted-2); font-size:15px; line-height:1.8; }
.faq-body p + p, .faq-body p + ul { margin-top:10px; }
.faq-body ul { margin-left:18px; display:flex; flex-direction:column; gap:8px; }
.faq-body strong { color:var(--text); font-weight:600; }

/* ─────────── 이용약관 / 정책 ─────────── */
.policy { padding:var(--space-section) var(--space-inline); max-width:calc(900px + 2 * var(--space-inline)); margin:0 auto; }
.policy h2 { font-size:clamp(22px,2.8vw,32px); text-align:center; margin-bottom:14px; line-height:1.35; }
.policy > p { text-align:center; color:var(--muted); font-size:13.5px; margin-bottom:38px; }
.policy-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; }
.policy-card {
  padding:26px 26px 28px; border-radius:20px;
  background:linear-gradient(160deg, rgba(30,28,38,.9), rgba(21,19,26,.9));
  border:1px solid var(--line);
}
.policy-card h3 { font-size:16px; margin-bottom:14px; color:var(--violet); line-height:1.45; }
.policy-card ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.policy-card li { position:relative; padding-left:18px; font-size:13.5px; color:var(--muted-2); line-height:1.75; }
.policy-card li::before { content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--violet); opacity:.65; }
.policy-card strong { color:var(--text); font-weight:600; }

/* ─────────── compact nav menu ─────────── */
.lang-switch { position:relative; }
.lang-btn {
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--kr); font-size:12.5px; letter-spacing:.02em;
  color:var(--muted-2); background:rgba(234,234,240,.05);
  border:1px solid var(--line); border-radius:100px;
  padding:8px 14px; cursor:pointer; transition:all .3s;
}
.lang-btn:hover { color:var(--text); border-color:rgba(155,140,252,.5); }
.lang-menu {
  position:absolute; top:calc(100% + 10px); right:0; min-width:180px;
  background:rgba(23,21,28,.97); border:1px solid var(--line);
  border-radius:14px; padding:6px; z-index:60;
  display:none; flex-direction:column;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.lang-menu.is-open { display:flex; }
.nav-menu { position:relative; display:none; }
.nav-menu-btn { padding:8px 12px; }
.nav-drop { right:0; left:auto; min-width:210px; }
.nav-drop a { display:block; font-size:13.5px; color:var(--muted-2); padding:10px 14px; border-radius:9px; transition:all .25s; }
.nav-drop a:hover { color:var(--text); background:var(--violet-dim); }

/* ─────────── footer ─────────── */
.footer { display:flex; flex-direction:column; align-items:center; gap:14px; padding:60px 24px 46px; border-top:1px solid var(--line); }
.footer .mark { width:34px; height:34px; opacity:.85; }
.footer p { font-size:12px; color:var(--muted); letter-spacing:.02em; text-align:center; line-height:1.8; }
.footer-links { display:flex; gap:12px; align-items:center; font-size:13px; color:var(--muted); flex-wrap:wrap; justify-content:center; }
.footer-links a { color:var(--muted-2); transition:color .3s; }
.footer-links a:hover { color:var(--text); }
.footer-biz { font-size:11.5px; color:var(--muted); opacity:.75; max-width:720px; }

/* ─────────── responsive ─────────── */
@media (max-width: 1080px) {
  .steps-body { gap:28px; }
  .features-wrap { grid-template-columns:1fr clamp(170px, 20vw, 240px) 1fr; }
  .f-card { padding:20px; }
  .i-row { grid-template-columns:230px 1fr minmax(240px, 50%); }
  .i-tile { width:230px; }
  .inside-list::before { left:115px; }
  .price-grid { grid-template-columns:1fr; max-width:520px; }
}
@media (max-width: 900px) {
  .nav-link { display:none; }
  .nav-menu { display:block; }
  .nav { padding:16px 18px; }
  .nav-ghost { display:none; }
  .hero { padding-top:88px; }
  /* 좁은 화면도 같은 이유로 위를 벌린다(2026-08-23). 다만 세로가 빠듯하니 적게. */
  .hero-phone { width:clamp(160px, 24vh, 210px); margin-top:20px; margin-bottom:-24px; }
  .hero-phone img {
    clip-path:inset(0 0 12% 0);
    -webkit-mask-image:linear-gradient(180deg, #000 76%, transparent 88%);
    mask-image:linear-gradient(180deg, #000 76%, transparent 88%);
  }
  .hero-title { font-size:clamp(27px, 8vw, 42px); }
  .hero-sub { font-size:14px; padding:0 6px; }
  .badges-wrap { flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .store-btn { padding:9px 16px 9px 12px; }
  .store-btn span { font-size:14px; }
  .hero-visual { height:clamp(130px, 20vh, 200px); }
  .hero-chip { width:clamp(56px, 7vh, 72px); }
  .statement-text { font-size:clamp(21px, 5.6vw, 30px); line-height:1.5; }
  .steps-pin { padding:74px 18px 36px; }
  .steps-head { margin-bottom:14px; }
  .steps-body { grid-template-columns:1fr; gap:14px; }
  .steps-phone { order:-1; }
  .phone-frame { width:min(172px, 44vw); }
  .steps-text { padding-left:0; text-align:center; }
  .steps-rail { display:none; }
  .steps-counter { position:static; display:block; margin-bottom:2px; font-size:13px; }
  .steps-counter #stepsCounterNum { font-size:26px; }
  .steps-dots { display:flex; }
  .step-item { display:none; padding:6px 0 0; border-top:none; }
  .step-item.is-active { display:block; transform:none; }
  .step-num { display:none; }
  .step-item p { font-size:13.5px; max-width:100%; }
  .step-line { margin:14px auto 0; }
  .features { padding:8vh 18px; }
  .features-wrap { grid-template-columns:1fr; }
  .f-center { order:-1; min-height:190px; }
  .f-net path { display:none; }
  .f-net path.spine { display:block; }
  .f-col { gap:14px; }
  .f-col + .f-col { margin-top:14px; }
  .connector { height:20vh; min-height:130px; }
  .edge-glow { display:none; }
  .exploded { padding:9vh 18px; }
  .inside-list::before { display:none; }
  .i-row { grid-template-columns:1fr; gap:12px; justify-items:center; text-align:center; }
  .i-trace { display:none; }
  .i-info { max-width:420px; }
  .cta-title { font-size:clamp(22px, 6.4vw, 34px); }
  .insights-head { flex-direction:column; align-items:flex-start; }
  .article { padding-top:120px; }
  .page-head { padding-top:120px; }
  .footer { padding:44px 18px 36px; }
}
@media (max-width: 640px) {
  .nav { padding:10px 8px; }
  .nav-logo { gap:6px; }
  .nav-logo .mark { width:24px; height:24px; }
  .nav-logo span { font-size:15px; }
  .nav-right { gap:6px; }
  .nav-cta { padding:8px 13px; font-size:11.5px; }
  .hide-xs { display:none; }
  .nav-menu-btn { padding:7px 9px; }
  .to-top { right:34px; bottom:16px; width:44px; height:44px; }
  .signup-wrap { padding:26px 18px; border-radius:24px; }
  .policy-card { padding:22px 20px; }
}
@media (max-width: 360px) {
  .nav-logo span { display:none; }
  .nav-logo .mark { width:28px; height:28px; }
  .footer { padding:44px 18px 112px; }
  .footer-links { flex-wrap:wrap; justify-content:center; row-gap:6px; }
}

/* ─────────── large displays (QHD / 4K) ─────────── */
@media (min-width: 2000px) {
  .nav { padding:26px 64px; }
  .nav-logo .mark { width:36px; height:36px; }
  .nav-logo span { font-size:24px; }
  .nav-link { font-size:17px; }
  .nav-cta { font-size:16px; padding:13px 28px; }
  .nav-ghost { font-size:16px; padding:13px 24px; }
  .hero-title { font-size:96px; }
  .hero-sub { font-size:23px; max-width:820px; }
  /* 넓은 화면은 폰이 커서 잘린 윗면이 더 도드라진다 — 그만큼 더 내린다(2026-08-23). */
  .hero-phone { width:340px; margin-top:44px; margin-bottom:-42px; }
  .store-btn { padding:14px 28px 14px 20px; }
  .store-btn span { font-size:20px; }
  .store-btn small { font-size:12.5px; }
  .hero-visual { height:340px; }
  .section-kicker { font-size:20px; }
  .btn-primary { font-size:19px; padding:18px 42px; }
  .connector svg { width:760px; }
  .to-top { width:64px; height:64px; right:40px; bottom:40px; }
  .statement-text { font-size:54px; max-width:1240px; }
  .steps-head h2 { font-size:78px; }
  .steps-body { max-width:1720px; gap:130px; }
  .phone-frame { width:400px; }
  .step-item h3 { font-size:40px; }
  .step-item p { font-size:20px; max-width:640px; }
  .steps-counter #stepsCounterNum { font-size:44px; }
  .sig-title { font-size:78px; }
  .sig-row, .sig-connector { max-width:1620px; }
  .sig-copy h3 { font-size:54px; }
  .sig-copy p { font-size:22px; }
  .sig-copy li { font-size:19px; padding-left:32px; }
  .sig-badge { font-size:14px; padding:12px 22px; }
  .sig-shot { width:470px; }
  .features { max-width:1760px; margin:0 auto; }
  .features-title { font-size:74px; max-width:1620px; }
  .features-wrap { max-width:1620px; grid-template-columns:1fr clamp(300px, 22vw, 440px) 1fr; }
  .f-card { padding:28px 30px; gap:20px; }
  .f-card h3 { font-size:24px; }
  .f-card p { font-size:17px; }
  .f-chip { width:150px; }
  .lang-chip { font-size:21px; padding:18px 34px; gap:14px; }
  .exploded-title { font-size:78px; }
  .inside-list { max-width:1520px; }
  .i-row { grid-template-columns:350px 1fr minmax(320px, 44%); }
  .i-tile { width:350px; min-height:195px; }
  .i-tile .icon-tile--lg { width:78px; height:78px; border-radius:20px; }
  .i-tile .icon-tile--lg svg { width:36px; height:36px; }
  .i-tile span { font-size:19px; }
  .i-tile .app-chip { width:150px; }
  .i-info h4 { font-size:27px; }
  .i-info p { font-size:17.5px; }
  .imagine-grid { max-width:1640px; }
  .imagine-title { font-size:74px; }
  .imagine-points span { font-size:22px; }
  .imagine-stat { max-width:560px; padding:26px 34px; }
  .stat-num { font-size:56px; }
  .imagine-stat p { font-size:18px; }
  .imagine-device { width:420px; }
  .pricing h2 { font-size:74px; }
  .price-grid { max-width:1620px; gap:32px; }
  .price-card { padding:52px 44px 46px; }
  .price-amount { font-size:70px; }
  .price-name { font-size:30px; }
  .price-list li { font-size:18px; }
  .plan { font-size:16px; padding:12px 24px; }
  .insights-head h2 { font-size:74px; }
  .insight-grid { max-width:1620px; }
  .insight-body h3 { font-size:24px; }
  .insight-body p { font-size:17px; }
  .faq { max-width:1180px; }
  .faq-title { font-size:74px; }
  .faq-item summary { font-size:22px; padding:28px 32px; }
  .faq-body { font-size:18px; padding:0 32px 30px; }
  .signup-wrap { max-width:1120px; }
  .cta-title { font-size:96px; max-width:1560px; }
  .footer .mark { width:46px; height:46px; }
  .footer-links { font-size:16px; }
  .footer p { font-size:14px; }
}

@media (prefers-reduced-motion: reduce) {
  #gl, #grain { display:none; }
}