/* ============================================================
   에버애프터 (everafter) — 랜딩페이지 스타일
   기획서: docs/briefs/everafter.md §5 (2026-08-19 전면 개정)

   미학 방향: 럭셔리 미니멀(판면·여백·풀블리드) × 웜페이퍼(지면·잉크 위계)
   레퍼런스: whiteinrevery.com — 스크린샷이 아니라 실제 site.css/custom.css를
             받아 토큰을 추출했다. 배운 시스템은 다음 넷이고, 이 파일 전체가 그것이다.

     1) 자간 사다리 — 활자가 작을수록 자간 비율을 높인다.
        (레퍼런스 실측: 35px에 15px=0.43em / 12px에 4px=0.33em / 11px에 2px=0.18em)
     2) 두 서체의 역할 분리 — 대문자 라틴 = 구조/라벨, 세리프 = 사람의 목소리. 섞지 않는다.
     3) 작은 활자 + 거대한 여백 — 네비 12px인데 섹션 패딩은 155px. 크기가 아니라 절제.
     4) 재단선까지 나가는 판면 — max-width:none + padding:0 으로 사진이 화면 끝에 닿는다.

   가져오지 않은 것: 그들의 금색(#af7b37/#b18006)과 폰트(Crimson Text+Montserrat),
   그리고 모든 콘텐츠. 색·폰트까지 이식하면 표절이다 (design.md §2).
   ============================================================ */

/* ── 토큰 ────────────────────────────────────────────── */
:root {
  /* 지면 — 순백 없음. hue 25°(옅은 적갈)로 고정해 액센트 버건디와 같은 계열로 묶는다.
     연속한 두 밴드가 같은 면을 쓰지 않는다 (canvas → soft → sunk → canvas …). */
  --canvas:            #f7f3ef;
  --canvas-soft:       #fbf8f6;
  --surface-sunk:      #ece1dd;
  --surface-card:      #ffffff;   /* 지면보다 "밝은" 종이 한 장 — 보더 없이 층위를 만든다 */
  --surface-deep:      #1a1613;
  --surface-deep-soft: #241e19;

  /* 잉크 5단. 본문은 절대 --muted 아래로 내려가지 않는다 (design.md §0 필수 #1) */
  --ink:          #171310;
  --ink-strong:   #2b2320;
  --body:         #4a443c;
  --muted:        #5b554d;
  --muted-soft:   #6e665b;
  --on-dark:      #f7f3ef;
  --on-dark-soft: #b3a99c;
  --on-accent:    #fdfbf7;

  /* 액센트 — 로고 파일에서 실측한 브랜드 버건디 (기획서 §5.3).
     이전 #7a2e3a는 로고가 없던 시점의 임시값이었다.
     2차 액센트(금색)는 두지 않는다 — 금색은 사진의 빛으로만 들어온다. */
  --accent:        #8d192d;
  --accent-active: #6e1223;
  --accent-lift:   #bd3a52;   /* 다크 밴드 전용 — deep 대비 3.33:1 / 흰 글자 5.40:1 */
  /* 사진 위 라벨 전용. #d9a2a8은 밝은 하늘 위에서 3.6:1로 AA 미달이라 한 단계 올렸다.
     다크 밴드(#1a1613) 위에서는 11:1 이상이므로 양쪽 다 안전하다. */
  --accent-glow:   #e3b6bb;

  /* hairline — 잉크 선이 아니라 "한 단계 고도차" */
  --line:           #e4d8d3;
  --line-soft:      #ece3de;
  --line-strong:    #d5c3bc;
  --line-dark:      #38302a;
  --line-dark-lift: #4d423a;

  /* 스페이싱 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;

  --section-y:       clamp(76px, 9.5vw, 168px);
  --section-y-tight: clamp(56px, 6vw, 112px);
  --gutter:          clamp(20px, 4vw, 64px);
  --nav-h:           72px;

  /* 레이아웃 트랙 — 1120px 중앙 1단 칼럼을 폐기하고 5트랙 풀블리드로 간다.
     wide = 그리드·미디어·비교표가 사는 폭 / text = 러닝 텍스트가 사는 폭 */
  --w-wide: 1360px;
  --w-text: 720px;
  --w-rail: 200px;

  /* 한국어 measure는 반드시 em.
     ch는 숫자 0의 폭(≈0.5em)이라 한글(1em/글자)에 걸면 의도의 절반이 된다.
     이전 구현의 44ch/34ch/22ch 캡이 전부 절반으로 걸려 있었다. */
  --m-tight:   24em;
  --m-base:    34em;
  --m-wide:    42em;
  --m-display: 13em;

  /* 타이포 */
  --font-display:  'Gowun Batang', 'Nanum Myeongjo', Georgia, serif;
  --font-wordmark: 'Marcellus', 'Gowun Batang', Georgia, serif;
  --font-body:     'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  /* 디스플레이 2단 + 본문 4단. 24~32px "중간 헤딩" 층은 의도적으로 비워둔다 —
     중간 층을 지우면 페이지가 템플릿처럼 읽히지 않는다. */
  --t-display-xl: clamp(2.15rem, 0.95rem + 3.3vw, 3.75rem); /* 34 → 60(1440) → 60 */
  --t-display-lg: clamp(1.85rem, 1rem + 2.6vw, 3.4rem);     /* 30 → 53(1440) → 54 */
  --t-lg:   1.3125rem;   /* 21px — lead */
  --t-base: 1.0625rem;   /* 17px — 본문 기준선 */
  --t-sm:   0.9375rem;   /* 15px */
  --t-xs:   0.8125rem;   /* 13px — 라벨, 고지 */
  --t-nano: 0.75rem;     /* 12px — 네비, 마이크로 라벨 */

  /* 자간 사다리 — 이 파일에서 가장 중요한 값들이다.
     디스플레이는 조이고(-), 본문은 살짝 풀고(+), 라벨은 크게 벌린다.
     한글은 대문자가 없으므로 라틴보다 낮은 값을 쓴다 (전각이 더 빨리 흩어진다). */
  --ls-display:   -0.025em;
  --ls-lead:      -0.012em;
  --ls-body:       0.005em;
  --ls-label-ko:   0.19em;
  --ls-label-la:   0.26em;
  --ls-wordmark:   0.30em;

  /* 모션 — transform/opacity만, ease-out 계열. 바운스·확대·회전 금지 */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur:      240ms;
  --dur-slow: 320ms;

  /* 그림자는 시스템 전체에서 1개, 사진에만. 버튼·카드·텍스트에는 절대 쓰지 않는다. */
  --shadow-media: 0 24px 60px -32px rgba(23, 19, 16, 0.45);
}

@media (min-width: 1900px) {
  :root { --w-wide: 1520px; --w-text: 760px; }
}

/* ── 리셋 ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s5));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: var(--ls-body);
  word-break: keep-all;          /* 한국어 줄바꿈 — 어절 단위 유지 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
/* <picture>가 레이아웃에서 사라져야 안쪽 <img>가 그리드 아이템이 된다.
   주의: 선택자는 여전히 DOM을 따르므로 자식 결합자(>)는 picture를 건너뛰지 못한다. */
picture { display: contents; }
/* .band 등 작성자 display 규칙이 UA의 [hidden]{display:none}을 이긴다 — 전역으로 못 박는다 */
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* 취소선은 이 페이지에서 "정가"를 뜻하는 유일한 장치다.
   1px 회색이면 각주로 읽히고 앵커가 안 걸린다 — 2px 액센트로 사건을 만든다. */
s {
  text-decoration-line: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}
.band--deep s, .hero s, .sticky-cta s { text-decoration-color: var(--accent-lift); }

/* 라운딩은 전 요소 0이다. 레퍼런스 시스템의 핵심 결정이고
   (body class가 literally button-corner-style-square), 말랑한 블롭과 정반대편에 선다. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0;
}
.band--deep :focus-visible,
.foot :focus-visible,
.nav--over-hero :focus-visible,
.hero :focus-visible { outline-color: var(--accent-glow); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -120px;
  z-index: 200;
  padding: var(--s3) var(--s5);
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--ink);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { top: var(--s3); }

/* ══════════════════════════════════════════════════════
   판면 — 5트랙 풀블리드 그리드
   full │ wide │ text │ wide │ full
   요소를 트랙에 배치해 좌·우 교대 재단선을 만든다.
   100vw를 쓰지 않으므로 스크롤바가 있어도 가로 스크롤이 생기지 않는다.
   ══════════════════════════════════════════════════════ */
.band,
.hero,
.foot__inner {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, calc((var(--w-wide) - var(--w-text)) / 2))
    [text-start] min(var(--w-text), 100% - var(--gutter) * 2)
    [text-end]   minmax(0, calc((var(--w-wide) - var(--w-text)) / 2))
    [wide-end]   minmax(var(--gutter), 1fr)
    [full-end];
  column-gap: 0;
}

.band { padding-block: var(--section-y); row-gap: 0; }
.band > *      { grid-column: text; }
.u-wide        { grid-column: wide; }
.u-full        { grid-column: full; }
.u-left        { grid-column: wide-start / text-end; }
.u-right       { grid-column: text-start / wide-end; }
.u-bleed-right { grid-column: text-start / full-end; }
.u-bleed-left  { grid-column: full-start / text-end; }

.band--soft { background: var(--canvas-soft); }
.band--sunk { background: var(--surface-sunk); }
.band--deep { background: var(--surface-deep); color: var(--on-dark-soft); }

/* ══════════════════════════════════════════════════════
   타이포
   ══════════════════════════════════════════════════════ */
.display-xl,
.display-lg {
  font-family: var(--font-display);
  color: var(--ink);
  word-break: keep-all;
  text-wrap: balance;
}
/* 디스플레이는 "굵게"가 아니라 "크게" 간다.
   Gowun Batang은 400/700뿐이므로 400을 쓰고 위계는 오직 크기로만 만든다.
   (Hahmlet 200을 먼저 시험했지만 한글이 사실상 라이트 고딕으로 렌더돼
    획 대비가 없었다 — 라틴만 세리프인 하이브리드였다.) */
.display-xl {
  font-weight: 400;
  font-size: var(--t-display-xl);
  line-height: 1.13;
  letter-spacing: var(--ls-display);
  max-width: var(--m-display);
}
.display-lg {
  font-weight: 400;
  font-size: var(--t-display-lg);
  line-height: 1.26;
  letter-spacing: -0.018em;
  max-width: 16em;
}
.band--deep .display-xl,
.band--deep .display-lg { color: var(--on-dark); }

.lead {
  font-size: var(--t-lg);
  line-height: 1.72;
  letter-spacing: var(--ls-lead);
  color: var(--ink-strong);
  max-width: var(--m-tight);
}
.band--deep .lead { color: var(--on-dark-soft); }

p { max-width: var(--m-base); }

.fine {
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--muted);
  letter-spacing: 0;
}
.band--deep .fine { color: var(--on-dark-soft); }

.strong { color: var(--ink); font-weight: 500; }
.band--deep .strong { color: var(--on-dark); }

/* 숫자는 라틴 각자체(Marcellus)로, 탭ular 정렬.
   숫자만 서체가 바뀌는 건 잡지 조판의 오래된 관습이고 값이 "사실"처럼 읽힌다. */
.num {
  font-family: var(--font-wordmark);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.01em;
}

/* ── 섹션 라벨 — 자간 사다리가 눈에 보이는 지점 ──────────
   라틴 번호는 0.26em, 한글은 0.19em. 한글에 라틴 값을 그대로 걸면
   "만 들 어  드 린"으로 흩어져 자리표시자처럼 읽힌다.
   룰(::after)이 wide에서 시작해 화면 끝까지 나가는 것이 판면을 넓어 보이게 한다. */
.label {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s7);
  grid-column: wide-start / full-end;
  max-width: none;
}
.label__no {
  font-family: var(--font-wordmark);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label-la);
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.label__sep { color: var(--line-strong); font-size: var(--t-xs); }
.label__ko {
  font-weight: 500;
  font-size: var(--t-nano);
  letter-spacing: var(--ls-label-ko);
  color: var(--muted);
}
.label::after {
  content: "";
  height: 1px;
  background: var(--line);
  align-self: center;
}
.band--sunk .label::after { background: var(--line-strong); }
.band--deep .label__no   { color: var(--accent-glow); }
.band--deep .label__ko   { color: var(--on-dark-soft); }
.band--deep .label__sep  { color: var(--line-dark-lift); }
.band--deep .label::after { background: var(--line-dark-lift); }

/* ══════════════════════════════════════════════════════
   상단바 — 고정. 히어로 위 투명 → 스크롤하면 불투명 지면.
   반투명 + 블러(글래스모피즘)는 쓰지 않는다 — 불투명 지면 + 1px 하이라인 (design.md §0).
   네비에 버튼·CTA·전환 링크가 하나도 없다 — 어텐션 비율 1:1 유지 (기획서 §5.6).
   ══════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease);
}
/* 5트랙 그리드를 쓰지 않는다 — 상단바는 화면 거터에 정렬해야지
   본문 판면에 맞추면 워드마크가 안쪽으로 들어가 "떠 있는" 바가 된다. */
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s7);
  min-height: var(--nav-h);
  padding: var(--s3) var(--gutter);
}
.nav__end    { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); }
.nav__links  { display: flex; gap: clamp(20px, 2.4vw, 44px); }
.nav__status { display: flex; align-items: baseline; gap: var(--s3); margin: 0; max-width: none;
               padding-left: clamp(24px, 4vw, 64px); border-left: 1px solid var(--line-strong); }

/* ── 로고 ────────────────────────────────────────────
   SVG는 fill="currentColor"라 색을 CSS가 정한다 — 색상 변형 파일이 필요 없다.
   상단바는 모노그램 + 활자 워드마크 조합이다: 72px 바에 3단 락업을 넣으면 뭉개지고,
   워드마크를 이미지로 바꾸면 텍스트가 아니게 되어 SEO·접근성이 나빠진다. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  text-decoration: none;
}
.brand__mark {
  flex: none;
  color: var(--accent);
  transition: color var(--dur) var(--ease);
}
/* 마크 비율이 2.27:1이라 폭으로 잡으면 높이가 절반 이하로 떨어져 가는 물결처럼 보인다.
   워드마크 캡하이트에 맞춰 "높이"로 잡는다. */
.brand__mark svg { height: 30px; width: auto; display: block; }
.nav--over-hero .brand__mark { color: var(--on-dark); }

.wordmark {
  display: inline-block;
  font-family: var(--font-wordmark);
  font-size: 1.0625rem;
  letter-spacing: var(--ls-wordmark);
  text-indent: var(--ls-wordmark);   /* 마지막 글자 뒤 자간 보정 — 광학 중심 유지 */
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.wordmark__ko {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 0.6875rem;              /* 11px */
  font-weight: 400;
  letter-spacing: var(--ls-label-ko);
  text-indent: var(--ls-label-ko);
  text-transform: none;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}

.nav__links a {
  font-size: var(--t-nano);
  letter-spacing: 0.13em;
  color: var(--muted);
  text-decoration: none;
  padding-block: var(--s3);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.nav__status-la {
  font-family: var(--font-wordmark);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label-la);
  text-transform: uppercase;
  color: var(--accent);
}
.nav__status-ko { font-size: var(--t-nano); letter-spacing: var(--ls-label-ko); color: var(--muted); }

/* 히어로 위 — 사진 위이므로 흰 계열 */
.nav--over-hero .wordmark        { color: var(--on-dark); }
.nav--over-hero .wordmark__ko,
.nav--over-hero .nav__status-ko  { color: rgba(247, 243, 239, 0.72); }
.nav--over-hero .nav__links a    { color: rgba(247, 243, 239, 0.82); }
.nav--over-hero .nav__status-la  { color: var(--accent-glow); }
.nav--over-hero .nav__status     { border-left-color: rgba(247, 243, 239, 0.28); }
.nav--over-hero .nav__links a:hover,
.nav--over-hero .nav__links a[aria-current="true"] {
  color: var(--on-dark);
  border-bottom-color: var(--on-dark);
}

/* 스크롤 후 — 100% 불투명. 반투명 + blur는 글래스모피즘이라 금지. */
.nav--stuck { background: var(--canvas); border-bottom-color: var(--line); }

.nav__toggle {
  display: none;
  margin-right: -10px;      /* 아이콘 광학 여백을 거터에 맞춘다 */
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--ink);
}
.nav--over-hero .nav__toggle { color: var(--on-dark); }
.nav__toggle span {
  display: block;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.nav__drawer {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 99;
  display: none;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur);
}
.nav__drawer.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.nav__drawer a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-inline: var(--gutter);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
}
.nav__drawer a:first-child { border-top: 0; }

/* ══════════════════════════════════════════════════════
   버튼
   전환 CTA만 채움(solid burgundy)이다. 레퍼런스는 CTA도 1px 헤어라인이지만,
   그건 문의 유도가 목적인 포트폴리오라서다. 우리는 선결제를 받는 페이지이고
   전환 목표가 1개다 — 페이지에서 가장 큰 시각 사건이 CTA가 아니면 계측이 무의미해진다.
   헤어라인 스타일(.btn--ghost)은 비전환 어포던스(영상 재생)에만, 잉크로만 쓴다.
   ══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;                /* 탭 타깃 44px 상회 */
  padding: 18px var(--s7);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover  { background: var(--accent-active); }
.btn:active { transform: translateY(1px); }   /* 확대·회전 금지 */
.btn--block { width: 100%; }
.band--deep .btn { background: var(--accent-lift); }
.band--deep .btn:hover { background: var(--accent); }

/* 비전환 어포던스 — 1px 헤어라인, 채움 없음, 라운딩 0.
   currentColor 보더라서 텍스트와 보더가 함께 움직인다(레퍼런스의 그 장치). */
.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: 11px var(--s5) 9px;      /* 비대칭 — 작은 대문자를 광학 중심에 놓는다 */
  background: none;
  border: 1px solid currentColor;
  color: var(--ink);
  font-family: var(--font-wordmark);
  font-size: var(--t-nano);
  letter-spacing: var(--ls-label-la);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn--ghost:hover { background: var(--ink); color: var(--canvas); }

/* CTA 곁줄 — 가격 앵커와 보증. 취소선만으로 위계가 읽히므로 흐리게 두지 않는다. */
.cta-note {
  font-size: var(--t-xs);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.cta-note s { color: var(--body); }
.cta-note b  { color: var(--accent); font-weight: 500; }
.band--deep .cta-note b { color: var(--accent-glow); }
.band--deep .cta-note   { color: var(--on-dark-soft); }
.band--deep .cta-note s { color: var(--on-dark); }

.guarantee {
  font-size: var(--t-xs);
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════
   1. 히어로 — 풀블리드 사진 + 단색 스크림, 활자는 아래쪽 3분의 1에
   ══════════════════════════════════════════════════════ */
.hero {
  position: relative;
  align-items: end;
  min-height: min(90vh, 880px);
  padding-block: calc(var(--nav-h) + var(--s6)) clamp(48px, 6.5vw, 108px);
  background: var(--surface-deep);
  color: var(--on-dark);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  border-radius: 0;
}
/* 스크림 — 장식 그라데이션이 아니라 가독성 장치다.
   동일 hue(잉크 브라운)의 어두운 색 두 스톱뿐이고, 색상이 변하지 않는다. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(20, 15, 13, 0.62) 0%, rgba(20, 15, 13, 0.08) 24%),
    linear-gradient(to right,  rgba(20, 15, 13, 0.82) 0%, rgba(20, 15, 13, 0.36) 46%, rgba(20, 15, 13, 0) 70%),
    linear-gradient(to top,    rgba(20, 15, 13, 0.80) 0%, rgba(20, 15, 13, 0.42) 34%, rgba(20, 15, 13, 0.10) 66%);
}
.hero__inner {
  grid-column: wide-start / text-end;
  grid-row: 1;
  align-self: end;
  position: relative;
  z-index: 2;
  max-width: none;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s5);
  font-family: var(--font-wordmark);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label-la);
  text-transform: uppercase;
  color: var(--accent-glow);
  max-width: none;
}
.hero__eyebrow::after {
  content: "";
  width: clamp(40px, 8vw, 120px);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.hero .display-xl { color: var(--on-dark); }
.hero__sub {
  margin-top: var(--s5);
  font-size: clamp(1rem, 1.25vw, 1.1875rem);   /* 16 → 19 — 21px는 h1과 함께 부피를 키웠다 */
  line-height: 1.7;
  letter-spacing: var(--ls-lead);
  color: rgba(247, 243, 239, 0.86);
  max-width: var(--m-tight);
}
/* ── 히어로 가격 앵커 (기획서 §5.10) ─────────────────────
   이전에는 13px 회색 한 줄이라 정가 29만원이 전혀 안 걸렸다.
   정가를 먼저·크게 두고, 취소선을 2px 액센트로 세우고, 절감액을 칩으로 못 박는다. */
.hero__offer {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid rgba(247, 243, 239, 0.22);
  max-width: none;
}
.hero__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  max-width: none;
}
.hero__price-cap {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-body);
  font-size: var(--t-nano);
  font-weight: 400;
  letter-spacing: var(--ls-label-ko);
  color: rgba(247, 243, 239, 0.55);
}
.hero__price-was {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.9vw, 1.7rem);      /* 22 → 27 */
  line-height: 1.05;
  color: rgba(247, 243, 239, 0.86);            /* 정가가 흐리면 앵커가 안 걸린다 */
}
.hero__price-arrow {
  align-self: center;
  font-size: var(--t-lg);
  color: rgba(247, 243, 239, 0.45);
}
.hero__price-now {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 2.9vw, 2.65rem);    /* 33 → 42 — h1(60)보다 확실히 작게 */
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--on-dark);
}
.hero__price-now .hero__price-cap { color: var(--accent-glow); }
.hero__price-now b { font-weight: 400; }
/* 할인 칩 — 채우면 CTA 버튼과 같은 무게로 싸운다. 1px 헤어라인으로 둔다. */
.hero__price-save {
  align-self: center;
  padding: 7px 13px 5px;
  border: 1px solid var(--accent-glow);
  color: var(--accent-glow);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* 한시성의 근거 — 할인에 이유가 없으면 정가가 허수로 읽혀 앵커가 신뢰를 깎는다 */
.hero__price-note {
  margin-top: var(--s4);
  font-size: var(--t-xs);
  color: rgba(247, 243, 239, 0.66);
  max-width: 30em;
}

.hero__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s5) var(--s7);
  margin-top: var(--s6);
}
.hero .guarantee { color: rgba(247, 243, 239, 0.68); max-width: 26em; }

/* 히어로 우측 영상 프레임 — 데스크톱에서만. 판면 오른쪽 끝(wide-end)에 건다.
   full-end(재단선)에 걸면 넓은 모니터에서 프레임만 판면 밖 여백으로 떨어져 나가고
   본문과의 사이가 벌어진다 — 2560px에서 텍스트 끝~프레임 사이가 863px까지 떴다.
   wide-end에 걸면 상단바·다른 섹션과 같은 여백선에 정렬된다. */
.hero__media {
  grid-column: text-end / wide-end;
  grid-row: 1;
  align-self: end;
  /* 폭이 트랙보다 넓을 수 있으므로 오른쪽 끝을 기준으로 붙인다 */
  justify-self: end;
  position: relative;
  z-index: 2;
  display: none;
}

/* ── 영상 프레임 ──────────────────────────────────────
   비율은 프레임이 소유한다. 플레이스홀더를 <video>/<iframe>으로 갈아끼워도
   프레임이 무너지지 않게 하기 위한 계약이다. */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  background: var(--surface-deep);
}
.video-frame--tall { aspect-ratio: 4 / 5; }
.video-frame > video,
.video-frame > iframe,
.video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
/* 포스터 위 재생 어포던스 — 액센트를 쓰지 않는다. 전환 CTA와 경쟁하면 안 되기 때문.
   <button>이라 폰트·테두리·패딩 상속을 끊어줘야 <a>였을 때와 같은 모양이 나온다. */
.video-frame__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  color: var(--on-dark);
  text-decoration: none;
  background: rgba(20, 15, 13, 0.14);
  transition: background-color var(--dur) var(--ease);
}
/* 재생이 시작되면 JS가 hidden을 건다 — display:flex 가 이기지 않도록 명시 */
.video-frame__play[hidden] { display: none; }
.video-frame__play:hover { background: rgba(20, 15, 13, 0.34); }
.video-frame__play span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: transform var(--dur) var(--ease);
}
.video-frame__play svg { width: 15px; height: 15px; margin-left: 3px; }
.video-frame__play:hover span { transform: scale(1.04); }
.video-frame__badge {
  position: absolute;
  left: 0; bottom: 0;
  padding: 8px 14px 6px;
  background: rgba(20, 15, 13, 0.72);
  color: rgba(247, 243, 239, 0.9);
  font-family: var(--font-wordmark);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-label-la);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════
   2. 샘플 — 균등 그리드 없음. 좌·우 재단선을 번갈아 물고
      서로 다른 높이에서 시작한다 (잡지 스프레드).
      지금은 납품본이 1편이라 sample--1 만 쓰인다.
   ══════════════════════════════════════════════════════ */
.samples__head { grid-column: wide; margin-bottom: var(--s10); }
.samples__head .lead { margin-top: var(--s5); }
@media (min-width: 1000px) {
  .samples__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26em);
    column-gap: var(--s10);
    align-items: start;
  }
  .samples__head .lead { margin-top: var(--s7); }   /* 한 단 내려 맞물리게 */
}

.sample { display: grid; }
.sample--1 { grid-column: full-start / wide-end; }
/* 2·3번 슬롯은 납품본이 늘어나면 그대로 되살린다 (마크업만 추가하면 된다) */
.sample--2 { grid-column: wide-start / text-end;  margin-top: var(--s10); }
.sample--3 { grid-column: text-start / full-end;  margin-top: var(--s7); }

.sample figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  margin-top: var(--s4);
  padding-block: var(--s4) 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--muted);
  max-width: none;
}
.sample--1 figcaption { padding-left: var(--gutter); }
.sample--3 figcaption { padding-right: var(--gutter); }
.sample figcaption .num { color: var(--ink-strong); font-size: var(--t-sm); }

.samples__note {
  grid-column: wide-start / text-end;
  margin-top: var(--s9);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--muted);
  max-width: var(--m-wide);
}

/* ══════════════════════════════════════════════════════
   3. 제작 과정 — 세 단계를 전폭 가로 레지스터로. 하이라인이 판면을 가로지른다.
   ══════════════════════════════════════════════════════ */
.how__head { grid-column: wide-start / text-end; }
.how__grid { grid-column: wide; margin-top: var(--s9); }

.steps { border-bottom: 1px solid var(--line); }
.step {
  display: grid;
  grid-template-columns: 128px minmax(0, 30em) 1fr auto;
  align-items: start;
  gap: var(--s7);
  padding-block: var(--s9);
  border-top: 1px solid var(--line);
}
.step__no {
  font-family: var(--font-wordmark);
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  line-height: 0.86;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.step__body { max-width: none; }
.step__body h3 {
  margin-bottom: var(--s4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink);
}
.step__body p { max-width: 30em; }
/* 우측 종단 — 하이라인이 "일하게" 만드는 요소. 없으면 선이 허공에서 끝난다. */
.step__meta {
  justify-self: end;
  text-align: right;
  font-family: var(--font-wordmark);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-label-la);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* 본문 중간 CTA — 문구·목적지는 나머지와 동일하다 (기획서 §4).
   왼쪽 버튼 / 오른쪽 보증. 이전엔 버튼 오른쪽 700px가 비어 있었다. */
.mid-cta {
  grid-column: wide;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s5) var(--s7);
  margin-top: var(--s9);
  padding-top: var(--s8);
  border-top: 1px solid var(--line-strong);
}
.mid-cta__meta { display: grid; gap: var(--s1); text-align: right; }

/* ══════════════════════════════════════════════════════
   4. 가격 — 좌: 비교 원장 / 우: 오퍼 카드(sticky).
   ══════════════════════════════════════════════════════ */
.pricing__head { grid-column: wide-start / text-end; }
.pricing__grid {
  grid-column: wide;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 480px);
  gap: var(--s10);
  align-items: start;
  margin-top: var(--s9);
}
.pricing__ledger { max-width: none; }

/* 점선 리더 — 메뉴판·가격표의 정통 조판 장치.
   space-between이 남기던 328px 공백을 활자적으로 잇는다. */
.compare { border-bottom: 1px solid var(--line-strong); }
.compare__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s4);
  padding-block: var(--s5);
  border-top: 1px solid var(--line-strong);
  font-size: var(--t-base);
  color: var(--body);
}
.compare__leader { border-bottom: 1px dotted var(--line-strong); transform: translateY(-0.3em); }
.compare__price {
  font-family: var(--font-wordmark);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--t-lg);
  color: var(--ink-strong);
  white-space: nowrap;
}
.compare__row--ours { color: var(--ink); }
.compare__row--ours .compare__price { color: var(--accent); }
.compare__row--ours .compare__price s {
  margin-right: var(--s2);
  font-size: var(--t-base);
  color: var(--muted);
}
.compare__tag {
  margin-left: var(--s2);
  padding: 3px 8px 2px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}
.compare__note { margin-top: var(--s5); }

/* 페이지에서 결제 결심이 일어나는 유일한 블록. 지면보다 "밝은" 면으로 분리한다
   (보더·그림자가 아니라 층위로 — ElevenLabs의 인쇄 방식). */
.offer {
  position: sticky;
  top: calc(var(--nav-h) + var(--s5));
  padding: var(--s8);
  background: var(--surface-card);
  border-radius: 0;
}
.offer__flag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin: calc(var(--s8) * -1) calc(var(--s8) * -1) var(--s7);
  padding: var(--s4) var(--s8);
  background: var(--accent);
  color: var(--on-accent);
  max-width: none;
}
.offer__flag-la {
  font-family: var(--font-wordmark);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label-la);
  text-transform: uppercase;
}
.offer__flag-ko { font-size: var(--t-nano); letter-spacing: var(--ls-label-ko); opacity: 0.86; }

.offer__price { max-width: none; }
.offer__cap {
  display: inline-block;
  margin-right: var(--s3);
  font-family: var(--font-body);
  font-size: var(--t-nano);
  letter-spacing: var(--ls-label-ko);
  color: var(--muted);
  vertical-align: middle;
}
/* 정가가 카드 맨 위에 온다 — 앵커링은 큰 수를 먼저 읽을 때만 작동한다.
   이전에는 얼리버드가(54px) 위, 정가가 15px 회색으로 아래에 있어 순서가 뒤집혀 있었다. */
.offer__was {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.1;
  color: var(--muted);
  max-width: none;
}
.offer__now {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s3);
  max-width: none;
}
.offer__now b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.offer__save {
  padding: 7px 13px 5px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.offer__note { margin-top: var(--s4); font-size: var(--t-xs); color: var(--muted); }
.offer__incl {
  margin: var(--s6) 0 var(--s7);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.offer__incl li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  padding-block: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--body);
}
.offer__incl li::before {
  content: "";
  width: 4px; height: 4px;
  margin-top: 0.78em;
  background: var(--accent);
}
.offer .btn { min-height: 64px; }
.offer .cta-note { margin-top: var(--s4); }

/* ══════════════════════════════════════════════════════
   5. 신뢰 — 정의 표(dl)를 Q&A로 교체. 마크업은 FAQ의 .faq__list를
      그대로 재사용하므로 여기서는 판면 배치만 정한다.
   ══════════════════════════════════════════════════════ */
.trust__qa { grid-column: wide; margin-top: var(--s7); }

/* ══════════════════════════════════════════════════════
   6. FAQ — 좌: 제목(sticky) / 우: 목록. 마커를 질문 왼쪽으로 옮겨
      600px 죽은 구간을 없앤다.
   ══════════════════════════════════════════════════════ */
.faq__grid {
  grid-column: wide;
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--s10);
  align-items: start;
}
.faq__aside { position: sticky; top: calc(var(--nav-h) + var(--s8)); max-width: none; }
.faq__aside .fine { margin-top: var(--s5); max-width: 20em; }
.faq__list { border-bottom: 1px solid var(--line); max-width: none; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: var(--s4);
  padding-block: var(--s6);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink-strong);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before {
  content: "+";
  font-family: var(--font-wordmark);
  font-size: var(--t-lg);
  line-height: 1.35;
  color: var(--accent);
}
.faq__item[open] summary::before { content: "\2212"; }
.faq__answer {
  padding: 0 0 var(--s6) calc(28px + var(--s4));
  color: var(--body);
}
.faq__answer p { max-width: var(--m-wide); }

/* ══════════════════════════════════════════════════════
   7. 마지막 CTA — 풀블리드 다크 사진 밴드
   ══════════════════════════════════════════════════════ */
.final {
  position: relative;
  align-items: center;
  min-height: clamp(520px, 64vh, 780px);
  padding-block: var(--section-y);
  overflow: hidden;
}
.final__bg {
  grid-column: full;
  grid-row: 1;
  align-self: stretch;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
.final__scrim {
  grid-column: full;
  grid-row: 1;
  align-self: stretch;
  background: linear-gradient(to right, rgba(16, 12, 10, 0.86) 0%, rgba(16, 12, 10, 0.62) 58%, rgba(16, 12, 10, 0.42) 100%);
}
.final__inner {
  grid-column: wide-start / text-end;
  grid-row: 1;
  align-self: center;
  position: relative;
  z-index: 2;
  max-width: none;
}
.final .display-lg { max-width: 14em; }
.final__sub { margin-top: var(--s6); color: rgba(247, 243, 239, 0.82); }
.final__action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s5) var(--s7);
  margin-top: var(--s8);
  max-width: none;
}
/* 보증 재진술 — 우측 337px 세로 칼럼이 아니라 CTA 아래 2×2 원장.
   li를 flex로 만들면 안 된다 — <b>3일</b>과 "안에 받아보십니다"가 별개 아이템이 되어
   사이가 벌어지고 구분선이 문장 한가운데로 들어온다. */
.final__terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s8);
  margin-top: var(--s8);
  border-top: 1px solid var(--line-dark-lift);
  font-size: var(--t-sm);
  color: var(--on-dark-soft);
  max-width: none;
}
.final__terms li {
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line-dark-lift);
}
.final__terms b { color: var(--on-dark); font-weight: 500; }

/* ══════════════════════════════════════════════════════
   푸터 — 다크 밴드와 같은 검정이면 1000px짜리 한 덩어리로 읽힌다.
   한 단계 밝은 면 + 보이는 하이라인으로 경계를 만든다.
   ══════════════════════════════════════════════════════ */
.foot {
  background: var(--surface-deep-soft);
  color: var(--on-dark-soft);
  border-top: 1px solid var(--line-dark-lift);
}
.foot__inner { padding-block: var(--s9); row-gap: var(--s7); }
.foot__brand { grid-column: wide-start / text-start; }
/* 푸터는 세로 여유가 있으므로 원본 3단 락업을 그대로 쓴다 */
.foot__logo { display: block; width: min(200px, 100%); color: var(--on-dark); }
.foot__logo svg { width: 100%; height: auto; display: block; }
.foot__body  { grid-column: text; }
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  margin-bottom: var(--s5);
  font-size: var(--t-xs);
  max-width: none;
}
.foot__links a {
  display: flex;
  align-items: center;
  min-height: 44px;               /* 법적 문서 링크도 탭 타깃을 지킨다 */
  text-decoration: underline;
  text-decoration-color: var(--line-dark-lift);
  text-underline-offset: 5px;
}
.foot__biz {
  font-size: var(--t-xs);
  line-height: 1.9;
  max-width: var(--m-wide);
}
.foot__credit {
  grid-column: text;
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-nano);
  /* --muted-soft 는 밝은 지면용 잉크다. 다크 푸터에 쓰면 2.91:1로 AA 미달 —
     다크 밴드에서는 반드시 --on-dark-soft 계열을 쓴다 (7.12:1). */
  color: var(--on-dark-soft);
  max-width: var(--m-wide);
}

/* ══════════════════════════════════════════════════════
   고정 CTA 바 — 데스크톱까지 확장한다.
   데스크톱에는 히어로 CTA와 가격 CTA 사이가 여전히 멀고,
   같은 문구·같은 URL·같은 data-track이므로 경쟁 CTA가 아니다.
   ══════════════════════════════════════════════════════ */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--canvas);
  border-top: 1px solid var(--line-strong);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease);
}
.sticky-cta.is-shown { transform: translateY(0); }
.sticky-cta__meta {
  display: flex;
  align-items: baseline;
  gap: var(--s3) var(--s4);
  font-size: var(--t-sm);
  color: var(--muted);
  max-width: none;
}
.sticky-cta__was {
  font-family: var(--font-display);
  font-size: var(--t-base);
  color: var(--muted);
}
.sticky-cta__meta .num {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 1.375rem;         /* 22px — 취소선 정가보다 확실히 크게 */
  letter-spacing: -0.02em;
}
.sticky-cta__save {
  padding: 4px 9px 3px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* 1180px 아래에서는 약관 줄부터 버린다 — 가격 앵커가 우선순위다 */
@media (max-width: 1180px) { .sticky-cta__terms { display: none; } }
.sticky-cta .btn { min-height: 52px; padding: 14px var(--s6); font-size: var(--t-sm); }

/* ══════════════════════════════════════════════════════
   반응형
   ══════════════════════════════════════════════════════ */

/* ── ≤1200px : 우측 여백이 사라지는 구간 ─────────────── */
@media (max-width: 1200px) {
  .pricing__grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 400px); gap: var(--s8); }
  .faq__grid     { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s8); }
  .step { grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s6); }
}

/* ── ≥1080px : 히어로 우측 영상 프레임 등장 ──────────── */
@media (max-width: 1079px) {
  /* 영상 프레임이 사라지는 구간 — 오른쪽이 비니까 크롭을 내려
     창백한 하늘 대신 들판이 판면을 채우게 한다 */
  .hero     { min-height: min(88vh, 820px); }
  .hero__bg { object-position: 50% 62%; }
}

@media (min-width: 1080px) {
  /* 380px 고정 상한이면 화면이 커질수록 프레임만 우표처럼 남는다. 뷰포트에 비례해 키운다. */
  .hero__media  { display: block; width: min(30vw, 560px); }
  .hero__media .video-frame { aspect-ratio: 3 / 4; box-shadow: var(--shadow-media); }
}

/* ── ≤900px : 상단바가 드로어로 ──────────────────────── */
@media (max-width: 900px) {
  :root { --nav-h: 60px; }
  .brand { gap: var(--s3); }
  .brand__mark svg { height: 24px; }
  .nav__links, .nav__status { display: none; }
  .nav__toggle { display: flex; }
  .nav__drawer { display: block; }
  .nav__brand  { grid-column: full-start / text-end; }
}

/* ── ≤860px : 판면이 1단으로 ─────────────────────────── */
@media (max-width: 860px) {
  .sample--1, .sample--2, .sample--3 { grid-column: full; margin-top: 0; }
  .sample + .sample { margin-top: var(--s8); }
  .sample figcaption { margin-inline: var(--gutter); }
  .sample--1 figcaption, .sample--3 figcaption { padding-inline: 0; }

  .step { grid-template-columns: 1fr; gap: var(--s3); padding-block: var(--s6); }
  .step__meta { justify-self: start; text-align: left; }
  .mid-cta { flex-direction: column; align-items: stretch; }
  .mid-cta__meta { text-align: left; }

  .pricing__grid { grid-template-columns: 1fr; gap: var(--s8); }
  .offer { position: static; order: -1; }   /* 모바일은 오퍼가 먼저 — 결심을 반론보다 앞에 */

  .faq__grid  { grid-template-columns: 1fr; gap: var(--s8); }
  .faq__aside { position: static; }

  .foot__brand, .foot__body, .foot__credit { grid-column: wide; }
}

/* ── ≤767px : 모바일 ─────────────────────────────────── */
@media (max-width: 767px) {
  body { font-size: 16px; }

  /* 큰 간격 토큰을 모바일에서 재정의한다.
     96px/144px은 1360px 판면을 전제로 고른 값이라 390px에서는
     "여백"이 아니라 "빈 화면"이 된다 — 스크롤만 늘고 리듬은 안 생긴다.
     토큰 한 곳만 바꾸면 이 값을 쓰는 모든 지점이 함께 줄어든다. */
  :root {
    --s9:  64px;
    --s10: 80px;
    --section-y: 64px;
  }

  .hero { min-height: auto; padding-bottom: var(--s9); }
  .hero__bg { object-position: 58% 42%; }
  .hero__scrim {
    /* 원판(hero-sm)을 이미 어둡게 그레이딩했으므로 스크림은 활자 밴드만 눌러주면 된다.
       스크림만으로 0.9까지 올리면 사진이 사라져 히어로에 사진을 쓸 이유가 없어진다. */
    background:
      linear-gradient(to top,    rgba(20, 15, 13, 0.90) 0%, rgba(20, 15, 13, 0.74) 58%, rgba(20, 15, 13, 0.34) 100%),
      linear-gradient(to bottom, rgba(20, 15, 13, 0.52) 0%, rgba(20, 15, 13, 0) 26%);
  }
  .hero__inner { grid-column: wide; }
  .hero__offer { margin-top: var(--s6); }
  .hero__price {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: var(--s4) var(--s5);
  }
  .hero__price-arrow { display: none; }     /* 좁은 폭에서 줄이 접히면 화살표가 방향을 잃는다 */
  .hero__price-save { grid-column: 1 / -1; justify-self: start; }
  .hero__price-note { margin-top: var(--s3); }
  .hero__eyebrow { margin-bottom: var(--s5); font-size: 0.6875rem; letter-spacing: 0.18em; }
  .hero__eyebrow::after { display: none; }
  .hero__cta   { flex-direction: column; align-items: stretch; gap: var(--s5); }
  .hero__cta .btn { width: 100%; }

  .label { gap: var(--s3); margin-bottom: var(--s6); }
  .samples__head, .how__head,
  .pricing__head, .final__inner { grid-column: wide; }
  .samples__head { margin-bottom: var(--s8); }

  .offer { padding: var(--s6); }
  .offer__flag { margin: calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s6); padding: var(--s3) var(--s6); }
  /* 카드 안쪽 폭이 286px라 48px 좌우 패딩이면 CTA 문구가 두 줄로 접힌다.
     문구는 5곳이 글자 하나까지 같아야 하므로 줄일 수 없다 — 패딩을 줄인다. */
  .offer .btn { padding-inline: var(--s4); }
  /* 마커 들여쓰기를 데스크톱(44px)대로 두면 답변 폭이 280px로 좁아져 줄이 더 늘어난다 */
  .faq__answer { padding-left: calc(28px + var(--s2)); }

  .mid-cta .btn, .final__action .btn { width: 100%; }
  .final__action { flex-direction: column; align-items: stretch; }
  .final__terms { grid-template-columns: 1fr; }
  .final { min-height: 0; }

  .sticky-cta__meta { display: none; }
  .sticky-cta .btn  { width: 100%; }
  .foot__inner { padding-bottom: calc(var(--s9) + 84px); }   /* 고정 바가 고지를 가리지 않게 */
}

/* ── ≤640px ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .video-frame__play span { width: 56px; height: 56px; }
}

/* ══════════════════════════════════════════════════════
   법적 고지 문서 — privacy.html / terms.html
   ══════════════════════════════════════════════════════
   새 색·새 폰트·새 라운딩을 만들지 않는다. 이 페이지의 목적은 설득이 아니라
   "끝까지 읽히는 것"이므로 판면은 text 트랙 한 단이고, 장식은 조문 번호와
   hairline 뿐이다. 랜딩과 같은 지면·같은 잉크라서 다른 사이트로 튕겨나간
   느낌이 들지 않는다 — 결제 직전에 여는 문서라 이 연속성이 곧 신뢰다. */

/* 히어로가 없으니 상단바는 처음부터 불투명이고, fixed 대신 sticky라
   본문에 nav 높이만큼 오프셋을 따로 줄 필요가 없다 (JS도 필요 없다). */
.nav--doc { position: sticky; }
.nav--doc .nav__inner { gap: var(--s5); }

/* 모노그램을 <img>로 넣으면 fill="currentColor"가 SVG 자기 문서 안에서 해석돼
   검정으로 떨어진다. 마스크로 깔면 색은 CSS가 계속 쥐고 있으므로
   "색상 변형 파일을 따로 두지 않는다"(기획서 §5.3b)가 유지된다.
   비율 1366:602 → 높이 30px 기준 폭 68px. */
.brand__mark--mask {
  width: 68px;
  height: 30px;
  background-color: currentColor;
  -webkit-mask: url("assets/logo-mark.svg") no-repeat center / contain;
          mask: url("assets/logo-mark.svg") no-repeat center / contain;
}

.doc__head { margin-bottom: var(--s9); }

.doc__eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  margin-bottom: var(--s5);
  max-width: none;
}
.doc__eyebrow-la {
  font-family: var(--font-wordmark);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label-la);
  text-transform: uppercase;
  color: var(--accent);
}
.doc__eyebrow-sep { color: var(--line-strong); }
.doc__eyebrow-ko {
  font-size: var(--t-nano);
  letter-spacing: var(--ls-label-ko);
  color: var(--muted);
}

.doc__meta {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  max-width: var(--m-base);
  font-size: var(--t-xs);
  line-height: 1.9;
  color: var(--muted);
}

/* 목차 — 조문이 열 개를 넘는 문서는 목차가 없으면 읽히지 않는다 */
.doc__toc { margin-bottom: var(--s9); }
.doc__toc h2 {
  margin-bottom: var(--s4);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: var(--ls-label-ko);
  color: var(--muted);
}
.doc__toc ol { counter-reset: toc; border-top: 1px solid var(--line); }
.doc__toc li { border-bottom: 1px solid var(--line-soft); }
.doc__toc a {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  min-height: 44px;              /* 탭 타깃 */
  padding-block: var(--s3);
  font-size: var(--t-sm);
  color: var(--body);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.doc__toc a:hover { color: var(--accent); }
/* 조문 번호는 본문 상호참조("제9조 참조")와 글자가 같아야 찾을 수 있다.
   Marcellus 숫자만 쓰면 01이 OI로 읽혀 목차 한 열이 전부 뭉갠다. */
.doc__toc a::before {
  counter-increment: toc;
  content: "제" counter(toc) "조";
  flex: none;
  width: 5.2em;
  /* Marcellus는 로만 각자체라 1과 0을 I·O로 그린다 — "제10조"가 "제IO조"가 된다.
     한국어 조문 번호는 라틴 라벨이 아니므로 본문 폰트를 쓴다 (기획서 §5.2의
     "산세리프=구조/라벨" 원칙에 어긋나지 않는다). */
  font-family: var(--font-body);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label-ko);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--muted-soft);
}

.doc__sec {
  margin-bottom: var(--s8);
  scroll-margin-top: calc(var(--nav-h) + var(--s5));
}
.doc__sec:last-of-type { margin-bottom: 0; }

/* 조문 제목은 24~32px "중간 헤딩" 층을 새로 만들지 않는다 (:root 주석 참조).
   본문 크기 그대로 두고 hairline + 액센트 번호 + 웨이트로만 위계를 만든다. */
.doc__h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  margin-bottom: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--ink);
  max-width: none;
}
/* min-width로 조문 제목의 시작선을 맞춘다 — 제1조와 제17조가 폭이 달라
   제목이 들쭉날쭉하면 법률문서에서 유독 산만해 보인다. */
.doc__num {
  flex: none;
  min-width: 4.6em;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label-ko);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accent);
}

.doc__sec p + p { margin-top: var(--s4); }

/* 한국어 법률문서의 "항"은 ①②③다. 목록 마커를 이 기호로 바꾸면
   본문에 기호를 손으로 박지 않아도 되고 스크린리더가 목록으로 읽는다. */
@counter-style doc-clause {
  system: fixed;
  symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩";
  suffix: " ";
}
/* 마커 정렬은 그리드가 아니라 행잉 인덴트로 한다. li를 grid로 만들면
   문장 안의 <strong>과 중첩 <ul>이 각각 별개의 그리드 아이템으로 떨어져 나가
   한 문장이 세 조각으로 쪼개진다 (grid는 인라인 자식도 blockify한다). */
.doc__clause { display: grid; gap: var(--s4); max-width: var(--m-base); counter-reset: clause; }
.doc__clause > li {
  counter-increment: clause;
  padding-left: 1.7em;
  text-indent: -1.7em;
}
.doc__clause > li::before {
  content: counter(clause, doc-clause);
  display: inline-block;
  width: 1.7em;
  text-indent: 0;
  color: var(--muted-soft);
}

/* "호" — 항 안의 열거. 숫자 대신 hairline 대시로 층을 낮춘다. */
.doc__sublist { display: grid; gap: var(--s2); margin-top: var(--s3); }
.doc__sublist > li { padding-left: 1.4em; text-indent: -1.4em; }
.doc__sublist > li::before {
  content: "—";
  display: inline-block;
  width: 1.4em;
  text-indent: 0;
  color: var(--line-strong);
}

/* 항 안에 블록이 들어오면 음수 들여쓰기를 상속받아 왼쪽으로 삐져나간다 */
.doc__clause > li > ul,
.doc__clause > li > p,
.doc__sublist > li > ul { text-indent: 0; }

.doc__table-wrap { overflow-x: auto; margin-block: var(--s5); }
.doc__table {
  width: 100%;
  min-width: 440px;                /* 이 아래로는 표가 아니라 죽이 된다 — 가로 스크롤 */
  border-collapse: collapse;
  font-size: var(--t-sm);
  line-height: 1.7;
  text-align: left;
}
.doc__table th,
.doc__table td {
  padding: var(--s3) var(--s5) var(--s3) 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  font-weight: 400;
}
.doc__table thead th {
  border-bottom-color: var(--line-strong);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: var(--ls-label-ko);
  color: var(--muted);
  white-space: nowrap;
}
.doc__table tbody th { color: var(--ink-strong); }
.doc__table th:last-child,
.doc__table td:last-child { padding-right: 0; }

/* 문서에서 한 번 더 붙잡아야 하는 문단. 배지도 아이콘도 쓰지 않고
   지면 한 단 + 2px 액센트 재단선으로만 구분한다. */
.doc__note {
  margin-block: var(--s5);
  padding: var(--s5) var(--s6);
  max-width: var(--m-base);
  background: var(--canvas-soft);
  border-left: 2px solid var(--accent);
  font-size: var(--t-sm);
  color: var(--ink-strong);
}
.doc__note p { max-width: none; }
.doc__note p + p { margin-top: var(--s3); }

.doc__sec a,
.doc__note a,
.doc__meta a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.doc__sec a:hover,
.doc__note a:hover,
.doc__meta a:hover { text-decoration-color: var(--accent); }

.doc__foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s7);
  margin-top: var(--s9);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}
.doc__foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--line-strong);
}

@media (max-width: 720px) {
  /* 상단바에서 섹션 링크가 빠진 문서 페이지는 워드마크 부제까지 갈 여유가 있다 */
  .doc__foot-nav { gap: 0; flex-direction: column; }
  .doc__note { padding: var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}