/* ============================================================================
   velox.css — velox 자사 사이트 테마 (다크 모노크롬)
   ----------------------------------------------------------------------------
   tokens.css → app.css → velox.css 순서로 로드된다.
   여기서 하는 일은 두 가지뿐이다.

     1. 토큰 재정의  — 거의 검정인 다크 베이스 + 무채색 포인트로 톤을 갈아끼운다.
     2. 신규 컴포넌트 — app.css 에 없는 랜딩 전용 블록(.vx-*)을 얹는다.

   app.css 의 컴포넌트는 전부 토큰만 참조하므로, 1번만으로도 버튼·카드·폼·
   푸터까지 다크로 따라온다. 아래에서 app.css 규칙을 직접 덮어쓰는 부분은
   "이 톤에서만 필요한 보정"으로 한정했다.

   애니메이션의 초기 상태(숨김)도 여기서 정의한다. velox.js 가 GSAP 으로
   되돌려 놓는 구조이므로, JS 가 죽으면 아무것도 안 보이는 사고를 막기 위해
   `html.vx-ready` 가 붙었을 때만 숨긴다. (velox.js 가 최상단에서 붙인다)
   ========================================================================== */

/* ==========================================================================
   1. 토큰 — velox 브랜드
   ========================================================================== */

:root,
:root.theme-dark,
:root.theme-light {
  /* ------------------------------------------------------------------------
     브랜드 — 모노크롬. 색상(hue)은 쓰지 않고 밝기만으로 위계를 만든다.

     나중에 브랜드 컬러가 정해지면 아래 --brand / --accent 두 줄만 그 색으로
     바꾸면 된다. 나머지는 전부 이 둘에서 파생되므로 사이트 전체가 따라온다.
     ------------------------------------------------------------------------ */
  --brand:        #e8e8ea;   /* 포인트 — 버튼 면, 강조 테두리 */
  --brand-strong: #ffffff;
  --accent:       #e8e8ea;   /* 표시 기호, 라벨 강조 */

  /* 그라디언트는 버튼·배지 같은 작은 면에만 쓴다 (흑→백 한 단계) */
  --grad: linear-gradient(115deg, #ffffff 0%, #b8bbc2 100%);
  --grad-soft: linear-gradient(160deg,
                 color-mix(in srgb, #ffffff 12%, transparent),
                 color-mix(in srgb, #ffffff 3%, transparent));

  /* --- 중립: 거의 검정에서 시작한다 --- */
  --surface:     #08090b;
  --surface-2:   #0d0e11;
  --surface-3:   #121316;
  --surface-4:   #1a1c20;   /* velox 전용 한 단계 더 */

  --ink:         #f2f3f5;
  --ink-2:       #9aa0a8;
  --ink-3:       #676d75;

  --line:        #1e2024;
  --line-strong: #2e3137;

  --on-brand: #08090b;      /* 밝은 면 위 글자는 배경색으로 */

  --brand-soft: color-mix(in srgb, var(--brand) 10%, transparent);
  --brand-ring: color-mix(in srgb, var(--brand) 40%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);

  /* 상태 색은 브랜드가 아니라 기능이다 — 폼 오류·알림에는 색이 필요하므로 남긴다 */
  --ok:     #3ecf8e;
  --warn:   #e5b567;
  --danger: #ef5f6b;
  --info:   var(--ink-2);

  /* --- 타이포 --- */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 랜딩용으로 상단 스케일을 한 단계 키운다 */
  --text-4xl: clamp(2.5rem, 5.6vw + 0.6rem, 5.5rem);
  --text-5xl: clamp(2.75rem, 7.4vw, 6.5rem);
  --tracking-tight: -0.035em;

  /* --- 형태 --- */
  --radius: 16px;
  --header-h: 76px;
  --container: 1280px;

  /* 다크에서는 그림자 대신 발광으로 깊이를 만든다 */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 8px 30px rgba(0, 0, 0, .55);
  --shadow-3: 0 30px 80px rgba(0, 0, 0, .65);
  --glow:        0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent),
                 0 14px 50px rgba(0, 0, 0, .6);
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
                 0 14px 50px rgba(0, 0, 0, .65);

  /* --- 모션 --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --duration: 260ms;

  color-scheme: dark;

  /* 아이콘과 장식 기호는 쓰지 않는다. 위계는 글자 크기·밝기·여백으로만 만든다.
     되살리려면 이 파일의 히스토리와 app/Views/partials/vx-icon.php 를 참고할 것. */
}

/* Lenis 가 스크롤을 가로채므로 네이티브 smooth 는 끈다 (둘이 겹치면 튄다) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--surface);
  /* 화면 밖까지 이어지는 은은한 광원 — 섹션 배경이 없어도 깊이가 생긴다 */
  background-image:
    radial-gradient(62rem 42rem at 12% -8%, rgba(255, 255, 255, .055), transparent 62%),
    radial-gradient(52rem 36rem at 92% 6%,  rgba(255, 255, 255, .035), transparent 62%);
  background-attachment: fixed;
}

::selection { background: rgba(255, 255, 255, .22); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 2px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }


/* ==========================================================================
   2. app.css 보정 — 이 톤에서만 필요한 부분
   ========================================================================== */

/* 기본 버튼: 밝은 면 + 어두운 글자. 그라디언트는 이 작은 면에만 쓴다. */
.btn {
  border-radius: var(--radius-full);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              background var(--duration) var(--ease),
              color var(--duration) var(--ease);
}
.btn:not(.btn--ghost):not(.btn--link):not(.btn--soft):not(.btn--danger) {
  background: var(--grad);
  background-size: 180% 100%;
  color: var(--on-brand);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}
.btn:not(.btn--ghost):not(.btn--link):not(.btn--soft):not(.btn--danger):hover {
  filter: none;
  background-position: 100% 0;
  box-shadow: 0 10px 34px rgba(255, 255, 255, .16);
  transform: translateY(-2px);
}
.btn--ghost {
  --btn-fg: var(--ink);
  --btn-border: var(--line-strong);
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { --btn-bg: transparent; border-color: var(--ink-2); color: var(--ink); transform: translateY(-2px); }
.btn--link:hover { color: var(--ink); }

/* 카드: 얇은 테두리 + 유리 질감 */
.card, .feature {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--surface-3) 72%, transparent),
              color-mix(in srgb, var(--surface-2) 88%, transparent));
  border-color: var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
}
.card--link:hover { border-color: var(--line-strong); box-shadow: var(--glow); }

/* 폼 */
.input, .textarea, .select {
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  border-color: var(--line-strong);
  border-radius: 12px;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }

/* 섹션 교차 배경은 다크에서 거의 안 보이므로, 테두리로 구분을 만든다 */
.section--tint { background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-block: 1px solid var(--line); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .18em;
  color: var(--ink-3);
}
.eyebrow::before {
  content: ''; width: 22px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, var(--ink-3));
}
.section-head--center .eyebrow::before { display: none; }

/* 기존 CTA 밴드는 velox 에서 .vx-cta 로 대체하지만, 다른 뷰가 아직 쓰므로 톤만 맞춘다 */
.cta-band { background: var(--surface-2); border-block: 1px solid var(--line); color: var(--ink); }
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--ink-2); }
.cta-band .btn { --btn-bg: transparent; --btn-fg: var(--on-brand); }

.site-header { background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none; }
.site-footer { background: transparent; border-top: 1px solid var(--line); }
.to-top { background: var(--surface-3); border-color: var(--line-strong); }
.to-top:hover { border-color: var(--ink-2); color: var(--ink); }

.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  background: transparent; border-bottom: 1px solid var(--line);
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4.5rem);
}
.page-head h1 { font-size: var(--text-4xl); line-height: 1.04; max-width: 20ch; }
.page-head .eyebrow { margin-bottom: var(--space-3); }
.page-head p { font-size: var(--text-lg); }


/* ==========================================================================
   3. 전역 오버레이 — 커서 / 스크롤 진행바 / 페이지 전환 / 그레인
   ========================================================================== */

/* 화면 전체에 얇게 깔리는 필름 그레인. 넓은 면의 밴딩을 가려 준다. */
.vx-grain {
  position: fixed; inset: -50%;
  z-index: 1; pointer-events: none;
  opacity: .035;
  background-image: 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)'/%3E%3C/svg%3E");
  animation: vx-grain 700ms steps(2) infinite;
}
@keyframes vx-grain {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-2%, 1.5%); }
  100% { transform: translate(1.5%, -1%); }
}

/* 상단 스크롤 진행바 */
.vx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: calc(var(--z-header) + 5);
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--grad);
  pointer-events: none;
}

/* 페이지 진입/이탈 커튼 */
.vx-curtain {
  position: fixed; inset: 0; z-index: var(--z-toast);
  display: grid; place-items: center;
  background: var(--surface);
  pointer-events: none;
}
.vx-curtain__mark {
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: .4em; text-transform: uppercase; color: var(--ink-3);
}
html:not(.vx-ready) .vx-curtain { display: none; }  /* JS 없으면 아예 안 뜬다 */

/* 커스텀 커서 (포인터 있는 기기에서만) */
.vx-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .vx-cursor {
    position: fixed; top: 0; left: 0; z-index: var(--z-toast);
    display: block; width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: width .28s var(--ease), height .28s var(--ease),
                margin .28s var(--ease), background .28s var(--ease),
                opacity .2s linear, border-color .28s var(--ease);
    mix-blend-mode: difference;
  }
  .vx-cursor.is-on { opacity: 1; }
  .vx-cursor.is-hot {
    width: 68px; height: 68px; margin: -34px 0 0 -34px;
    background: rgba(255, 255, 255, .16);
    border-color: #ffffff;
  }
}


/* ==========================================================================
   4. 애니메이션 초기 상태
   velox.js 가 GSAP 으로 되돌린다. JS 실패 시 그대로 보이도록
   .vx-ready 가 붙었을 때만 숨긴다.
   ========================================================================== */

html.vx-ready [data-anim="up"],
html.vx-ready [data-anim="fade"],
html.vx-ready [data-anim="scale"],
html.vx-ready [data-anim="left"],
html.vx-ready [data-anim="right"],
html.vx-ready [data-anim="clip"],
html.vx-ready [data-split] { opacity: 0; }

html.vx-ready [data-anim="clip"] { clip-path: inset(0 0 100% 0); opacity: 1; }

/* 문자/단어 스플릿 */
.vx-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.vx-word { display: inline-block; white-space: pre; will-change: transform; }
.vx-char { display: inline-block; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html.vx-ready [data-anim], html.vx-ready [data-split] { opacity: 1 !important; clip-path: none !important; transform: none !important; }
  .vx-grain, .vx-cursor { display: none !important; }
  .vx-curtain { display: none !important; }
}


/* ==========================================================================
   5. 히어로
   ========================================================================== */

.vx-hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex; align-items: center;
  padding-block: calc(var(--header-h) + var(--space-7)) calc(var(--space-8) + var(--space-6));
  overflow: hidden;
  isolation: isolate;
}

/* 배경 레이어 ------------------------------------------------------------ */
.vx-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

/* 원근감 있는 격자 */
.vx-grid {
  position: absolute; inset: -20% -20% 0;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 20%, transparent 75%);
}

/* 떠다니는 광원 */
.vx-orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .5;
  will-change: transform;
}
.vx-orb--1 { width: 46vw; height: 46vw; left: -8vw;  top: -12vw;    background: #ffffff; opacity: .10; }
.vx-orb--2 { width: 38vw; height: 38vw; right: -6vw; top: 6vw;      background: #ffffff; opacity: .07; }
.vx-orb--3 { width: 30vw; height: 30vw; left: 32vw;  bottom: -14vw; background: #ffffff; opacity: .05; }

/* 콘텐츠 --------------------------------------------------------------- */
.vx-hero__inner { position: relative; width: 100%; }

.vx-hero__badge {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .45em 1.1em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
  backdrop-filter: blur(10px);
  font-size: var(--text-sm); color: var(--ink-2);
}
.vx-hero__badge b { color: var(--ink); font-weight: var(--weight-medium); }
.vx-hero__title {
  margin-top: var(--space-5);
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -0.045em;
  max-width: 16ch;
}
/* 색이 하나뿐이므로 강조는 밝기로 준다 - 주변은 한 단계 죽이고, 핵심만 흰색 */
.vx-hero__title { color: color-mix(in srgb, var(--ink) 62%, var(--surface)); }
.vx-hero__title .g { color: var(--ink); }

/* 얇은 아웃라인 글자 — 두 번째 줄에 리듬을 준다 */
.vx-hero__title .o {
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 45%, transparent);
}

.vx-hero__text {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--ink-2);
}
.vx-hero__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }

.vx-hero__foot {
  margin-top: var(--space-7);
  display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.vx-hero__stat b {
  display: block;
  font-size: var(--text-2xl); font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em;
}
/* 숫자만 고정폭으로 — 단위까지 mono 면 한글 자간이 벌어진다 */
.vx-hero__stat b [data-count],
.vx-stat__value [data-count] { font-family: var(--font-mono); }
.vx-hero__stat > span { font-size: var(--text-sm); color: var(--ink-3); }

/* 스크롤 유도 */
.vx-scrollcue {
  position: absolute; left: 50%; bottom: var(--space-5); translate: -50% 0;
  display: grid; justify-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .25em; color: var(--ink-3);
}
.vx-scrollcue i {
  display: block; width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--ink-2), transparent);
}
@media (max-width: 700px) { .vx-scrollcue { display: none; } }


/* ==========================================================================
   6. 마퀴 (기술 스택 / 신뢰 스트립)
   ========================================================================== */

.vx-marquee {
  position: relative;
  padding-block: var(--space-5);
  border-block: 1px solid var(--line);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.vx-marquee__track { display: flex; width: max-content; will-change: transform; }
.vx-marquee__group { display: flex; align-items: center; gap: var(--space-7); padding-right: var(--space-7); flex: none; }
.vx-marquee__item {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: .06em; color: var(--ink-3); white-space: nowrap;
  transition: color var(--duration) var(--ease);
}
.vx-marquee__item::before { content: ''; width: 1px; height: 1em; background: var(--line-strong); flex: none; }
.vx-marquee:hover .vx-marquee__item { color: var(--ink-2); }

/* 큰 글씨 마퀴 (CTA 위 등) */
.vx-marquee--xl { border: 0; padding-block: var(--space-4); }
.vx-marquee--xl .vx-marquee__item {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 6rem); font-weight: 800;
  letter-spacing: -0.04em; color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 22%, transparent);
}
.vx-marquee--xl .vx-marquee__item::before { width: 2px; height: .5em; background: var(--ink-3); }


/* ==========================================================================
   7. 섹션 헤더 / 번호
   ========================================================================== */

.vx-section { position: relative; padding-block: clamp(4.5rem, 9vw, 9rem); }
.vx-section__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-8); max-width: 68ch; }
.vx-section__head h2 { font-size: var(--text-3xl); line-height: 1.08; }
.vx-section__head p { color: var(--ink-2); font-size: var(--text-lg); max-width: 56ch; }
.vx-section__head--split { max-width: none; }
@media (min-width: 900px) {
  .vx-section__head--split { grid-template-columns: 1.05fr .95fr; align-items: end; }
  .vx-section__head--split .vx-section__aside { justify-self: end; text-align: right; }
}

.vx-rule { height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }


/* ==========================================================================
   8. 서비스 3축 — 틸트 카드
   ========================================================================== */

/* 카드 개수에 따라 열이 달라진다 (파셜이 --4 를 붙인다).
   4장을 한 줄에 밀어 넣으면 카드가 좁아 목록이 두 줄로 접히므로 2×2 로 간다. */
.vx-services { display: grid; gap: var(--space-4); }
@media (min-width: 760px)  { .vx-services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .vx-services { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .vx-services--4 { grid-template-columns: repeat(2, 1fr); } }

.vx-svc {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--surface-3) 75%, transparent),
              color-mix(in srgb, var(--surface-2) 90%, transparent));
  overflow: hidden;
  transform-style: preserve-3d;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
/* 마우스 위치를 따라다니는 하이라이트 (velox.js 가 --mx/--my 를 갱신) */
.vx-svc::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(22rem 22rem at var(--mx, 50%) var(--my, 0%),
              rgba(255, 255, 255, .07), transparent 65%);
  opacity: 0; transition: opacity var(--duration) var(--ease);
  pointer-events: none;
}
.vx-svc:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.vx-svc:hover::before { opacity: 1; }
.vx-svc > * { position: relative; }

/* 아이콘이 없으니 번호가 카드의 시작점이 된다 — 그만큼 크게 준다 */
.vx-svc__no {
  display: block;
  font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink-3);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.vx-svc h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.vx-svc p { color: var(--ink-2); font-size: var(--text-sm); }

/* margin-top:auto — 설명 길이가 달라도 카드마다 목록 위치가 맞는다 */
.vx-svc__list { list-style: none; margin: auto 0 0; padding: var(--space-5) 0 0; display: grid; gap: var(--space-3); }
.vx-svc__list li {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm); color: var(--ink-2);
}
.vx-svc__foot { margin-top: auto; padding-top: var(--space-6); }


/* ==========================================================================
   8-b. 스포트라이트 패널 — 한 가지를 크게 밀어 줄 때 (스트리머 서버 등)
   ========================================================================== */

.vx-spot {
  position: relative; overflow: hidden;
  display: grid; gap: var(--space-6);
  padding: clamp(var(--space-6), 4vw, var(--space-7));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(40rem 26rem at 8% -10%, rgba(255, 255, 255, .07), transparent 70%),
    color-mix(in srgb, var(--surface-3) 80%, transparent);
}
@media (min-width: 960px) {
  .vx-spot { grid-template-columns: 1.05fr 1fr; gap: var(--space-8); align-items: start; }
}

.vx-spot__tag {
  display: inline-block; margin-bottom: var(--space-3);
  padding: .25em .9em; border-radius: var(--radius-full);
  background: var(--ink); color: var(--on-brand);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.vx-spot h3 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.vx-spot p { color: var(--ink-2); }

.vx-spot__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.vx-spot__list li {
  padding: var(--space-4) var(--space-5);
  background: var(--surface-2);
  color: var(--ink-2); font-size: var(--text-sm);
}

.vx-spot__foot { margin-top: var(--space-6); }


/* ==========================================================================
   9. 문제 제기 (before / after)
   ========================================================================== */

.vx-compare { display: grid; gap: var(--space-4); }
@media (min-width: 880px) { .vx-compare { grid-template-columns: 1fr 1fr; align-items: stretch; } }

.vx-compare__col {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.vx-compare__col--after {
  border-color: var(--line-strong);
  background:
    radial-gradient(30rem 20rem at 100% 0%, rgba(255, 255, 255, .05), transparent 70%),
    color-mix(in srgb, var(--surface-3) 80%, transparent);
}
.vx-compare__tag {
  display: inline-block; margin-bottom: var(--space-4);
  padding: .25em .8em; border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em;
  background: var(--surface-4); color: var(--ink-3);
}
.vx-compare__col--after .vx-compare__tag { background: var(--ink); color: var(--on-brand); }
.vx-compare__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
/* 마크 없이 왼쪽 선 하나로 항목을 끊는다.
   어느 쪽이 문제이고 어느 쪽이 해결인지는 열의 밝기와 태그가 말해 준다. */
.vx-compare__col li {
  padding-left: var(--space-4);
  border-left: 1px solid var(--line-strong);
  color: var(--ink-2); font-size: var(--text-sm);
}
.vx-compare__col--after li { border-left-color: var(--ink-3); }
.vx-compare__col li b { display: block; color: var(--ink); font-size: var(--text-md); font-weight: var(--weight-medium); margin-bottom: 2px; }


/* ==========================================================================
   10. 프로세스 타임라인 (스크롤 스크럽으로 선이 그려진다)
   ========================================================================== */

.vx-steps { position: relative; padding-left: var(--space-6); }
.vx-steps::before {
  content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px;
  background: var(--line-strong);
}
.vx-steps__fill {
  position: absolute; left: 7px; top: 10px; width: 1px;
  height: calc(100% - 20px);
  background: linear-gradient(180deg, var(--ink), var(--ink-3));
  transform-origin: 50% 0; transform: scaleY(0);
}
html:not(.vx-ready) .vx-steps__fill { transform: scaleY(1); }

.vx-step { position: relative; padding-bottom: var(--space-7); }
.vx-step:last-child { padding-bottom: 0; }
.vx-step::before {
  content: ''; position: absolute; left: calc(-1 * var(--space-6) + 3px); top: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line-strong);
  transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.vx-step.is-on::before {
  background: var(--ink); border-color: var(--ink);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .1);
}
.vx-step__no { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .2em; color: var(--ink-3); }
.vx-step h3 { font-size: var(--text-xl); margin: var(--space-2) 0 var(--space-3); }
.vx-step p { color: var(--ink-2); font-size: var(--text-sm); max-width: 60ch; }
.vx-step__meta {
  display: inline-block; margin-top: var(--space-3);
  padding: .2em .7em; border-radius: var(--radius-full);
  background: var(--surface-3); color: var(--ink-3);
  font-family: var(--font-mono); font-size: var(--text-xs);
}


/* ==========================================================================
   11. 숫자 / 지표
   ========================================================================== */

.vx-stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 720px) { .vx-stats { grid-template-columns: repeat(4, 1fr); } }
.vx-stat { padding: var(--space-6); background: var(--surface-2); text-align: center; }
.vx-stat__value {
  font-size: var(--text-3xl); font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.vx-stat__label { margin-top: var(--space-2); color: var(--ink-3); font-size: var(--text-sm); }


/* ==========================================================================
   12. 요금제
   ========================================================================== */

.vx-plans { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 940px) { .vx-plans { grid-template-columns: repeat(3, 1fr); } }

.vx-plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}
.vx-plan--hot {
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
  background:
    radial-gradient(36rem 22rem at 50% -10%, rgba(255, 255, 255, .07), transparent 70%),
    color-mix(in srgb, var(--surface-3) 85%, transparent);
  box-shadow: var(--glow-accent);
}
.vx-plan__flag {
  position: absolute; top: -11px; left: 50%; translate: -50% 0;
  padding: .25em 1em; border-radius: var(--radius-full);
  background: var(--grad); color: var(--on-brand);
  font-size: var(--text-xs); font-weight: var(--weight-bold); white-space: nowrap;
}
.vx-plan__name { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.vx-plan__for { margin-top: var(--space-2); color: var(--ink-3); font-size: var(--text-sm); }
.vx-plan__price { margin-top: var(--space-5); display: flex; align-items: baseline; gap: .3em; }
/* 금액 자리에 '별도' 같은 한글이 올 수 있어 mono 대신 tabular-nums 를 쓴다 */
.vx-plan__price b { font-size: var(--text-3xl); font-weight: 700; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vx-plan__price span { color: var(--ink-3); font-size: var(--text-sm); }
.vx-plan__note { margin-top: var(--space-2); color: var(--ink-3); font-size: var(--text-xs); }
.vx-plan__list { list-style: none; margin: var(--space-5) 0 var(--space-6); padding: var(--space-5) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--space-3); }
.vx-plan__list li { font-size: var(--text-sm); color: var(--ink-2); }
/* 미포함은 취소선으로 — 기호 없이도 뜻이 분명하다 */
.vx-plan__list li.is-off {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}
.vx-plan__cta { margin-top: auto; }

/* 유지보수 비교표 */
.vx-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.vx-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 640px; }
.vx-table th, .vx-table td { padding: var(--space-4); text-align: left; border-bottom: 1px solid var(--line); }
.vx-table thead th { background: var(--surface-3); color: var(--ink); font-weight: var(--weight-bold); white-space: nowrap; }
.vx-table tbody th { color: var(--ink-2); font-weight: var(--weight-normal); }
.vx-table td { color: var(--ink); }
.vx-table tr:last-child th, .vx-table tr:last-child td { border-bottom: 0; }
.vx-table .yes { color: var(--ink); font-weight: var(--weight-medium); }
.vx-table .no  { color: var(--ink-3); }


/* ==========================================================================
   13. 아코디언 (FAQ)
   ========================================================================== */

.vx-acc { border-top: 1px solid var(--line); }
.vx-acc__item { border-bottom: 1px solid var(--line); }
.vx-acc__btn {
  width: 100%; display: flex; gap: var(--space-4); align-items: center; justify-content: space-between;
  padding: var(--space-5) 0;
  background: none; border: 0; cursor: pointer;
  color: var(--ink); font: inherit; font-weight: var(--weight-medium); text-align: left;
  transition: color var(--duration) var(--ease);
}
.vx-acc__btn:hover { color: var(--ink-2); }
.vx-acc__sign { position: relative; flex: none; width: 18px; height: 18px; }
.vx-acc__sign::before, .vx-acc__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--duration) var(--ease);
}
.vx-acc__sign::after { transform: rotate(90deg); }
.vx-acc__btn[aria-expanded="true"] { color: var(--ink); }
.vx-acc__btn[aria-expanded="true"] .vx-acc__sign::after { transform: rotate(0); }
.vx-acc__panel { overflow: hidden; height: 0; }
.vx-acc__panel > div { padding-bottom: var(--space-5); color: var(--ink-2); font-size: var(--text-sm); max-width: 70ch; }
html:not(.vx-ready) .vx-acc__panel { height: auto; }


/* ==========================================================================
   14. 후기
   ========================================================================== */

.vx-quotes { display: grid; gap: var(--space-4); }
@media (min-width: 880px) { .vx-quotes { grid-template-columns: repeat(3, 1fr); } }
.vx-quote {
  padding: var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 75%, transparent);
}
.vx-quote p { color: var(--ink); font-size: var(--text-md); }
.vx-quote__by { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--text-sm); }
.vx-quote__by b { display: block; color: var(--ink-2); font-weight: var(--weight-medium); }


/* ==========================================================================
   15. CTA 밴드
   ========================================================================== */

.vx-cta { position: relative; padding-block: clamp(5rem, 10vw, 9rem); overflow: hidden; border-top: 1px solid var(--line); }
.vx-cta__bg { position: absolute; inset: 0; z-index: -1; }
.vx-cta__bg .vx-orb { filter: blur(130px); opacity: .09; }
.vx-cta__inner { text-align: center; display: grid; justify-items: center; gap: var(--space-5); }
.vx-cta h2 { font-size: var(--text-4xl); line-height: 1.02; max-width: 18ch; }
.vx-cta p { color: var(--ink-2); font-size: var(--text-lg); max-width: 52ch; }
.vx-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-2); }
.vx-cta__meta { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; margin-top: var(--space-4); color: var(--ink-3); font-size: var(--text-sm); }
.vx-cta__meta span { display: inline-flex; align-items: center; gap: .45em; }
.vx-cta__meta span::before { content: ''; width: 14px; height: 1px; background: var(--ink-3); }


/* ==========================================================================
   16. 기타 블록
   ========================================================================== */

/* 아이콘 없는 순수 텍스트 리스트 (소개 페이지 가치 등) */
.vx-values { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 880px) { .vx-values { grid-template-columns: repeat(3, 1fr); } }
.vx-value { padding: var(--space-6); background: var(--surface); }
.vx-value__no { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .2em; color: var(--ink-3); }
.vx-value h3 { margin: var(--space-4) 0 var(--space-3); font-size: var(--text-lg); }
.vx-value p { color: var(--ink-2); font-size: var(--text-sm); }

/* 연혁 */
.vx-history { display: grid; gap: 0; }
.vx-history__row {
  display: grid; gap: var(--space-3) var(--space-6);
  padding: var(--space-5) 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .vx-history__row { grid-template-columns: 8rem 1fr; } }
.vx-history__year { font-family: var(--font-mono); color: var(--ink); font-size: var(--text-lg); }
.vx-history__row ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); color: var(--ink-2); font-size: var(--text-sm); }

/* 문의 페이지 좌측 요약 */
.vx-brief { display: grid; gap: var(--space-4); }
.vx-brief__row { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.vx-brief__k { flex: none; width: 92px; color: var(--ink-3); font-size: var(--text-sm); }
.vx-brief__v { color: var(--ink); font-weight: var(--weight-medium); }
.vx-brief__v a { color: var(--ink); }
.vx-brief__v a:hover { color: var(--ink-2); }

/* ==========================================================================
   기술 블로그
   ========================================================================== */

/* 목록 — 한 줄에 하나씩 쌓는다 */
.vx-articles { border-top: 1px solid var(--line); }
.vx-article {
  display: block;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background var(--duration) var(--ease);
}
.vx-article:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); color: var(--ink); }

.vx-article__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-3); letter-spacing: .02em;
}
.vx-article__cat {
  padding: .1em .6em; border-radius: var(--radius-full);
  background: var(--surface-3); color: var(--ink-2);
}
.vx-article__title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-2xl); line-height: var(--leading-snug);
}
.vx-article:hover .vx-article__title { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.vx-article__text { color: var(--ink-2); font-size: var(--text-sm); max-width: 70ch; }
/* 본문 + 옆단 (블로그 글 · 배포 상세 공용) */
.vx-doc { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1000px) { .vx-doc { grid-template-columns: minmax(0, 1fr) 280px; } }
.vx-doc__body { min-width: 0; }
.vx-doc__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 999px) { .vx-doc__aside { position: static; } }

/* 목차 */
.vx-toc {
  padding: var(--space-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.vx-toc__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.vx-toc ol, .vx-toc__more { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.vx-toc a {
  display: block; padding: var(--space-2) 0;
  color: var(--ink-3); font-size: var(--text-sm); line-height: 1.5;
  border-left: 2px solid transparent; padding-left: var(--space-3);
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.vx-toc a:hover { color: var(--ink); }
.vx-toc a.is-current { color: var(--ink); border-left-color: var(--ink); }
.vx-toc li[data-level="3"] a { padding-left: var(--space-5); font-size: var(--text-xs); }
.vx-toc__more a { border-left: 0; padding-left: 0; }

/* 이전 / 다음 글 */
.vx-doc__nav {
  display: grid; gap: var(--space-4);
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .vx-doc__nav { grid-template-columns: 1fr 1fr; } }
.vx-doc__nav a {
  display: block; padding: var(--space-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--duration) var(--ease);
}
.vx-doc__nav a:hover { border-color: var(--line-strong); color: var(--ink); }
.vx-doc__nav a.is-next { text-align: right; }
.vx-doc__nav span { display: block; font-size: var(--text-xs); color: var(--ink-3); margin-bottom: var(--space-2); }
.vx-doc__nav b { font-weight: var(--weight-medium); font-size: var(--text-sm); }

/* 코드 블록 — 복사 버튼은 velox.js 가 붙인다 */
.prose pre { position: relative; }
.vx-copy {
  position: absolute; top: 8px; right: 8px;
  padding: .35em .7em;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-3);
  font-family: var(--font-mono); font-size: var(--text-xs); cursor: pointer;
  opacity: 0; transition: opacity var(--duration) var(--ease), color var(--duration) var(--ease);
}
.prose pre:hover .vx-copy, .vx-copy:focus-visible { opacity: 1; }
.vx-copy:hover { color: var(--ink); border-color: var(--ink-3); }
.vx-copy.is-done { color: var(--ok); border-color: var(--ok); opacity: 1; }


/* ==========================================================================
   배포 자료 (플러그인 · 모델 · 맵)
   ========================================================================== */

.vx-dl-grid { display: grid; gap: var(--space-4); }
@media (min-width: 760px)  { .vx-dl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .vx-dl-grid { grid-template-columns: repeat(3, 1fr); } }

.vx-dl {
  display: flex; flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  transition: border-color var(--duration) var(--ease);
}
.vx-dl:hover { border-color: var(--line-strong); }
.vx-dl__head { display: flex; gap: var(--space-3); align-items: center; }
.vx-dl__kind {
  padding: .2em .7em; border-radius: var(--radius-full);
  background: var(--surface-4); color: var(--ink-2);
  font-size: var(--text-xs);
}
.vx-dl__ver { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink); }
.vx-dl__title { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-lg); }
.vx-dl__title a { color: var(--ink); }
.vx-dl__title a:hover { color: var(--ink-2); }
.vx-dl__text { color: var(--ink-2); font-size: var(--text-sm); }

.vx-dl__spec { margin: var(--space-5) 0 0; display: grid; gap: 0; }
.vx-dl__spec > div {
  display: flex; gap: var(--space-4); justify-content: space-between;
  padding: var(--space-3) 0; border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}
.vx-dl__spec dt { color: var(--ink-3); margin: 0; }
.vx-dl__spec dd { margin: 0; color: var(--ink); text-align: right; }

.vx-dl__foot { margin-top: auto; padding-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* 버전 이력 */
.vx-vers { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.vx-ver {
  padding: var(--space-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.vx-ver.is-latest { border-color: color-mix(in srgb, var(--ink) 28%, transparent); background: color-mix(in srgb, var(--surface-3) 70%, transparent); }
.vx-ver__head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.vx-ver__no { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.vx-ver__flag {
  padding: .15em .6em; border-radius: var(--radius-full);
  background: var(--ink); color: var(--on-brand);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.vx-ver__flag--beta { background: var(--surface-4); color: var(--warn); }
.vx-ver__head time { margin-left: auto; color: var(--ink-3); font-size: var(--text-sm); }
.vx-ver__mc { margin: var(--space-3) 0 0; color: var(--ink-3); font-size: var(--text-sm); }
.vx-ver__log { margin-top: var(--space-4); color: var(--ink-2); font-size: var(--text-sm); line-height: var(--leading-body); }
.vx-ver__foot {
  margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
}
.vx-ver__size { color: var(--ink-3); font-size: var(--text-xs); font-family: var(--font-mono); }


/* ==========================================================================
   문의 폼 — 설문지 형식
   --------------------------------------------------------------------------
   랜딩 컴포넌트와 일부러 다르게 생겼다. 여기서부터는 "읽고 감탄하는 화면"이
   아니라 "채워 넣는 서식"이므로, 장식을 걷어내고 질문 하나에 블록 하나씩 준다.
   번호는 CSS 카운터로 매기므로 질문을 넣고 빼도 다시 세지 않아도 된다.
   ========================================================================== */

.vx-form { max-width: 720px; margin-inline: auto; counter-reset: vxq; }

.vx-form__head {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface-2);
  margin-bottom: var(--space-4);
}
.vx-form__head h2 { font-size: var(--text-2xl); }
.vx-form__head p { margin-top: var(--space-3); color: var(--ink-2); font-size: var(--text-sm); }
.vx-form__req { margin-top: var(--space-4); color: var(--danger); font-size: var(--text-xs); }

/* 질문 블록 -------------------------------------------------------------- */
.vx-q {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  margin-bottom: var(--space-4);
  transition: border-color var(--duration) var(--ease);
}
.vx-q:focus-within { border-color: var(--line-strong); }
.vx-q.has-error { border-color: var(--danger); }

.vx-q__no {
  counter-increment: vxq;
  display: block; margin-bottom: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .1em; color: var(--ink-3);
}
.vx-q__no::before { content: counter(vxq, decimal-leading-zero); }

.vx-q__title {
  display: block; margin: 0 0 var(--space-2);
  font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--ink);
  line-height: var(--leading-snug);
}
.vx-q__title .req { color: var(--danger); margin-left: .2em; }
.vx-q__hint { margin: 0 0 var(--space-4); color: var(--ink-3); font-size: var(--text-sm); }
.vx-q__error { margin: var(--space-3) 0 0; color: var(--danger); font-size: var(--text-sm); }

/* 보기 (라디오) ---------------------------------------------------------- */
.vx-opts { display: grid; gap: 2px; margin-top: var(--space-4); }
.vx-opt {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-radius: var(--radius-sm);
  color: var(--ink-2); cursor: pointer;
  transition: color var(--duration) var(--ease);
}
.vx-opt:hover { color: var(--ink); }
.vx-opt input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 20px; height: 20px; margin: 0;
  border: 2px solid var(--ink-3); border-radius: 50%;
  background: transparent; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color var(--duration) var(--ease);
}
.vx-opt input::after {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink); transform: scale(0);
  transition: transform 160ms var(--ease);
}
.vx-opt input:checked { border-color: var(--ink); }
.vx-opt input:checked::after { transform: scale(1); }
.vx-opt input:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; }
.vx-opt:has(input:checked) { color: var(--ink); }

/* 입력 — 밑줄만 남긴 서식용 스타일 --------------------------------------- */
.vx-q .input,
.vx-q .textarea {
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: var(--space-3) 0;
  min-height: 0;
  color: var(--ink);
}
.vx-q .input:focus,
.vx-q .textarea:focus {
  box-shadow: none;
  border-bottom-color: var(--ink);
  border-bottom-width: 2px;
  padding-bottom: calc(var(--space-3) - 1px);   /* 두꺼워진 만큼 빼서 글자가 안 밀리게 */
}
.vx-q .textarea { min-height: 120px; }
.vx-q.has-error .input, .vx-q.has-error .textarea { border-bottom-color: var(--danger); }

/* 동의 체크 -------------------------------------------------------------- */
.vx-agree { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; color: var(--ink-2); }
.vx-agree input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 20px; height: 20px; margin: 2px 0 0;
  border: 2px solid var(--ink-3); border-radius: 4px;
  display: grid; place-items: center; cursor: pointer;
}
.vx-agree input::after {
  content: '✓'; color: var(--on-brand); font-size: 13px; font-weight: 700; line-height: 1;
  opacity: 0; transition: opacity 140ms var(--ease);
}
.vx-agree input:checked { background: var(--ink); border-color: var(--ink); }
.vx-agree input:checked::after { opacity: 1; }
.vx-agree input:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; }

/* 제출 줄 ---------------------------------------------------------------- */
.vx-form__foot {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center; justify-content: space-between;
  padding-top: var(--space-2);
}
.vx-form__note { color: var(--ink-3); font-size: var(--text-xs); }

/* 전화가 편한 사람을 위한 한 줄 */
.vx-form__alt {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: var(--space-4);
  color: var(--ink-3); font-size: var(--text-sm);
}
.vx-form__alt a { color: var(--ink); font-weight: var(--weight-medium); }
.vx-form__alt a:hover { color: var(--ink-2); }

/* 헤더가 스크롤되면 유리판이 깔린다 */
.site-header.is-stuck {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}
.site-header { transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform 420ms var(--ease-out-expo); }
.site-header.is-hidden { transform: translateY(-101%); }

/* SNS 자리는 원형 아이콘이 아니라 채널 이름을 그대로 쓴다 */
.sns a {
  width: auto; height: 34px;
  padding-inline: 1.1em;
  border-radius: var(--radius-full);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-2); font-size: var(--text-sm);
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.sns a:hover { background: transparent; border-color: var(--ink-2); color: var(--ink); }

/* 워드마크만 쓴다. 로고 이미지를 올리면(관리자 > 사이트 설정) 그쪽이 대신 나온다. */
.brand__name { letter-spacing: -0.04em; font-weight: 800; }
.brand__name em { font-style: normal; color: var(--ink-3); }

@media (max-width: 900px) {
  .nav { background: var(--surface); }
}