/* ─────────────────────────────────────────────
   반토막AI · Design Tokens — v2 (6:3:1 ratio)
   60% Base : 30% Sub : 10% Accent
───────────────────────────────────────────── */
:root {
  /* === 60% BASE — neutrals (ink + paper) === */
  --ink:        #0a0a0c;
  --ink-2:      #15151a;
  --ink-3:      #1f1f25;
  --ink-4:      #2a2a32;
  --paper:      #f4efe6;
  --paper-2:    #ebe4d6;
  --paper-3:    #ddd3bf;
  --line-dark:  rgba(255,255,255,.10);
  --line-light: rgba(10,10,12,.10);

  /* === 30% SUB — supporting tones === */
  --sub-charcoal: #2a2a32;       /* dark sub bg / borders */
  --sub-stone:    #4a4a52;       /* mid grey for muted text on dark */
  --sub-cream:    #f9f5ec;       /* light surface for emphasis on cream */
  --sub-sand:     #c9bfa6;       /* warm divider on cream */

  /* === 10% ACCENT — single signature === */
  --accent:     #f8f804;
  --accent-ink: #0a0a0c;

  /* Type scale — aligned to the reference hierarchy
     12 (cap) → 14 (sm) → 16 (body) → 18 (lede) → 22 (sub) → 28 (title)
     → 36 (h2 mobile) → 48 (h2/disp desktop) → 64 (price) → 88 (hero) */
  --t-cap:    12px;
  --t-body-sm:14px;
  --t-body:   16px;
  --t-lede:   18px;
  --t-sub:    22px;
  --t-title:  28px;
  --t-disp:   36px;
  --t-price:  64px;
  --t-hero:   clamp(48px, 8vw, 88px);

  /* Spacing */
  --s-xs: 8px;
  --s-sm: 16px;
  --s-md: 24px;
  --s-lg: 40px;
  --s-xl: 72px;

  /* Container max-widths — 3-tier system, aligned with the 1200px page frame.
     `content` is the primary tier and matches the page content area
     (1200 max-width − 2×48 gutter = 1104). */
  --container-wide:    1240px; /* legacy full-bleed feel — rarely used */
  --container-content: 1104px; /* default: page content area */
  --container-text:     720px; /* long-form prose / narrow visuals (~64–72ch) */
  /* Legacy alias — keep so existing class names continue to work */
  --container:         1240px;

  --r-pill: 999px;

  /* Type — all SIL OFL (commercial-safe) */
  --f-sans:    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-display: "Archivo", "Pretendard Variable", system-ui, sans-serif;
}

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap");

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { margin: 0; padding: 0; background: var(--ink); overflow-x: clip; }
html { scroll-padding-top: 80px; }

/* Section gutter — drives both section padding-inline and .full negative-margin escape.
   Mobile: 20px. Tablet (≥720): 48px. Desktop (≥1080): 48px until viewport > 1200,
   then grows with calc() to keep the inner content centered at max 1104px wide
   (1200 max-width - 2×48 gutter), matching the reference layout. */
:root { --section-px: 20px; }
@media (min-width: 720px)  { :root { --section-px: 48px; } }
@media (min-width: 1080px) { :root { --section-px: max(48px, calc((100vw - 1104px) / 2)); } }
body {
  font-family: var(--f-sans);
  color: var(--paper);
  font-size: 16px;
  line-height: 1.65;
}
img, video, svg, picture { max-width: 100%; height: auto; display: block; }

/* ─── Typography rhythm system ─────────────────────────────────────────
   Inspired by FC SHARE X's uniform 1.5 line-height ratio. We keep our
   editorial letter-spacing (negative tracking on display/title) so the
   visual identity stays, but apply a *consistent* line-height ladder and
   a *scale-aware* sibling gap (bigger heading → bigger gap to next block).
─────────────────────────────────────────────────────────────────────── */
.eyebrow {
  /* mono 캡션 라벨 (PROOF · INPUT → OUTPUT, INCLUDED · BONUS, STEP 01, …)
     weight 700: 본문 위계상 강한 강조용. 자간 0.16em으로 통일된 표준. */
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cap {
  font-size: var(--t-cap);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.body { margin: 0; font-size: var(--t-body); line-height: 1.7; letter-spacing: -0.015em; }
p.body { margin: 0; }

/* Body 사이즈 변형 — <Body size="sm|md|lede"> 와 매핑.
   .body 기본 위에 사이즈만 덮어씀. line-height/letter-spacing/color 등은 상속. */
.body.body-sm   { font-size: var(--t-body-sm); /* 14 */ }
.body.body-lede { font-size: var(--t-lede);    /* 18 */ }
/* Weight 변형 — <Body weight="medium|strong"> 와 매핑. */
.body.is-medium { font-weight: 500; }
.body.is-strong { font-weight: 700; }
/* Italic 변형 — 인용문/quote 박스에 사용. <Body italic> */
.body.is-italic { font-style: italic; }

/* Badge — 작은 chip 라벨. <Badge tone="ink|paper|accent|danger" size="sm|md">.
   font-family/-size/-weight/letter-spacing/text-transform 모두 클래스로 일원화. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}
.badge.badge-sm           { padding: 4px 10px; gap: 6px; letter-spacing: 0.1em; }
.badge.badge--ink         { background: var(--ink);    color: var(--paper); }
.badge.badge--paper       { background: var(--paper);  color: var(--ink); }
.badge.badge--accent      { background: var(--accent); color: var(--ink); }
.badge.badge--danger      { background: rgba(204,68,68,.12); color: #c44; }

/* margin: 0 으로 h2 user-agent 디폴트 마진 리셋 — sibling rule이 margin-top을 자유롭게 덮어쓸 수 있게 */
.sub        { margin: 0; font-size: var(--t-sub);   line-height: 1.45; letter-spacing: -0.015em; font-weight: 600; }
/* sub-strong — 섹션 outro·closer 같은 임팩트 있는 sub-statement용 (.sub의 강조 버전) */
.sub-strong { margin: 0; font-size: var(--t-sub);   line-height: 1.4;  letter-spacing: -0.03em;  font-weight: 800; }
.title      { margin: 0; font-size: var(--t-title); line-height: 1.3;  letter-spacing: -0.04em;  font-weight: 800; }
.display    { margin: 0; font-size: var(--t-disp); line-height: 1.18; letter-spacing: -0.045em; font-weight: 900; }

/* Sibling gap rhythm — proportional to scale of the preceding heading.
   Hierarchy (tight → loose):
     body→body  <  eyebrow→title  <  title→body  <  display→body
   Mobile: 16 / 20 / 28 / 32  →  Tablet: 20 / 24 / 36 / 40  →  Desktop: 24 / 28 / 40 / 48 */
/* body→body — line-height와 비슷한 비율로 유지 (Option B: 1.8배 비율).
   16/18/20 — 모바일/태블릿/데스크탑 */
.body + .body,
.body + p.body,
p.body + p.body    { margin-top: 16px; }
.eyebrow + .title,
.eyebrow + .display,
.eyebrow + .sub-strong,
.eyebrow + h2.title,
.eyebrow + h2.display,
.eyebrow + h2.sub-strong { margin-top: 20px; }
.title + .body,
.title + .sub        { margin-top: 28px; }
.display + .body,
.display + .sub      { margin-top: 32px; }
.sub-strong + .body  { margin-top: 24px; }

@media (min-width: 720px) {
  .body + .body,
  .body + p.body,
  p.body + p.body    { margin-top: 18px; }
  .eyebrow + .title,
  .eyebrow + .display,
  .eyebrow + .sub-strong,
  .eyebrow + h2.title,
  .eyebrow + h2.display,
  .eyebrow + h2.sub-strong { margin-top: 24px; }
  .title + .body,
  .title + .sub      { margin-top: 36px; }
  .display + .body,
  .display + .sub    { margin-top: 40px; }
  .sub-strong + .body { margin-top: 28px; }
}
@media (min-width: 1080px) {
  .body + .body,
  .body + p.body,
  p.body + p.body    { margin-top: 20px; }
  .eyebrow + .title,
  .eyebrow + .display,
  .eyebrow + .sub-strong,
  .eyebrow + h2.title,
  .eyebrow + h2.display,
  .eyebrow + h2.sub-strong { margin-top: 28px; }
  .title + .body,
  .title + .sub      { margin-top: 40px; }
  .display + .body,
  .display + .sub    { margin-top: 48px; }
  .sub-strong + .body { margin-top: 32px; }
}

.hero-num {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  line-height: .92;
  letter-spacing: -0.04em;
  font-weight: 900;
  font-feature-settings: "tnum" 1;
}

/* ─── Sections ─── */
section.s {
  padding: var(--s-xl) var(--section-px);
  position: relative;
}
section.s.compact { padding: var(--s-lg) var(--section-px); }
section.s.tight { padding: var(--s-md) var(--section-px); }
/* Hero (always the first section) hugs the top edge — no top padding so
   the bg image sits flush against the bottom of the sticky topnav. */
section.s.tight:first-of-type { padding-top: 0; }

/* Container — every section direct child sits inside the page content area
   (1104px = 1200 max-width − 2×48 gutter). Specific elements that should
   stay narrow opt in via `.col-text` / `.narrow` (720 — text column) or
   class-specific overrides (pp-grid, compare-grid, etc). */
section.s > * {
  max-width: var(--container-content);  /* 1104 — page content area */
  margin-inline: auto !important;       /* defensive: beats inline style={{margin:0}} resets */
}

/* `.wide` is an alias for the default page area (kept for backwards compat) */
section.s > .wide { max-width: var(--container-content); }
/* All section children share the same 1104 page area — no opt-in narrow tiers */
section.s > .pp-grid,
section.s > .pp-divider,
section.s > .pp-media,
section.s > .narrow,
section.s > .col-text { max-width: var(--container-content); }
/* Force Pain Points to single column on all sizes — drops legacy 2-col override */
.pp-grid                        { grid-template-columns: 1fr !important; }
.pp-col-a                       { position: static !important; }

/* Full-bleed — escape section.s padding back to viewport edges (var-driven).
   !important required to beat the `section.s > * { margin-inline: auto !important }`
   defensive rule above; without it, .full elements stay capped at the page area. */
section.s > .full { max-width: none; margin-inline: calc(-1 * var(--section-px)) !important; }

/* Body-text helper — kept for back-compat; now also at page width */
.col-text { max-width: var(--container-content); margin-inline: auto; }

/* ─── Hero ─────────────────────────────────────────────────────────────
   The bg image is absolutely-positioned inside .hero-bg-wrap and fills the
   entire wrap (image area + subcopy area). The .hero-bg-image-wrap is a
   layout-only sibling that reserves vertical space for the headline overlay
   and gives the headline a `bottom: …` anchor at the visually-intended image
   bottom (not the bottom of bg-wrap, which now also includes the subcopy).
─────────────────────────────────────────────────────────────────────── */
/* Hero headline uses the --t-hero clamp from the type scale (48→88) */
.hero-headline { font-size: var(--t-hero); }
.hero-subcopy  { font-size: var(--t-lede); line-height: 1.55; max-width: var(--container-content); margin-inline: auto; }
section.s > .hero-bg-wrap    { max-width: 100%; }
section.s > .hero-price-card { max-width: 480px; }

/* hero-bg-wrap: overflow hidden + 음수 margin-bottom로 다음 섹션과의 sub-pixel 라인 제거.
   gradient가 100%에서만 완전히 불투명해서 마지막 몇 px에 image가 살짝 보일 수 있음 → 다음 element와 overlap으로 숨김. */
.hero-bg-wrap {
  overflow: hidden;
  margin-bottom: -2px;
  position: relative;
}
/* 추가 안전장치 — wrap 하단에 8px 솔리드 ink band를 깔아서 gradient 미흡한 끝부분 커버 */
.hero-bg-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  background: var(--ink);
  z-index: 1;
  pointer-events: none;
}

/* Mobile (<720px) — Hero bg를 viewport edge까지 full-bleed 확장.
   .hero-subcopy-wrap은 이미 padding-inline: var(--section-px) 보유 → 본문은 자연스럽게 inset 유지.
   !important: section.s > * 룰의 'margin-inline: auto !important' 무력화 필요. */
@media (max-width: 719px) {
  section.s > .hero-bg-wrap {
    margin-inline: calc(-1 * var(--section-px)) !important;
    max-width: none !important;
    width: calc(100% + 2 * var(--section-px)) !important;
  }
}

/* Embed mode (라이브클래스 iframe) — 모든 뷰포트에서 Hero bg를 viewport edge까지 full-bleed.
   iframe이 wide viewport에 임베드될 때 1104px content area 좌우의 검은 거터가 보이지 않도록.
   본 사이트는 영향 없음 (body.embed scope).

   추가: tablet zone(720-1079)의 phone-shape rule(aspect-ratio:9/16, max-width:560)을 무력화.
   wrap이 풀블리드인데 image만 9/16 portrait를 유지하면 가로폭에 비례해 세로가 폭주함. */
body.embed section.s > .hero-bg-wrap {
  margin-inline: calc(-1 * var(--section-px)) !important;
  max-width: none !important;
  width: calc(100% + 2 * var(--section-px)) !important;
}
body.embed .ph.hero-bg-ph {
  aspect-ratio: auto !important;
  max-height: none !important;
  width: 100% !important;
  height: clamp(540px, 75vh, 840px) !important;
}

/* Embed wide viewports에서는 이미지가 더 가로로 cropped되어 밝은 중간만 보임 →
   기존 gradient overlay가 약해 보임. 추가 top darkening layer로 보강.
   본 사이트의 portrait 비율 의도(어두운 atmosphere)를 wide viewport에서도 재현. */
body.embed .hero-bg-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,12,.7)  0%,
    rgba(10,10,12,.55) 15%,
    rgba(10,10,12,.35) 30%,
    rgba(10,10,12,.15) 45%,
    rgba(10,10,12,0)   60%);
  pointer-events: none;
  z-index: 1;
}
/* Image도 약간 어둡게 — 가로로 늘어진 wide viewport에서 분위기 보강. */
body.embed .hero-bg-ph img { filter: brightness(0.78); }

/* Image-area placeholder height — drives where the headline sits.
   The bg image covers this AND the subcopy area below.
   Desktop targets ~75vh: balanced presence with room for content below. */
.hero-bg-image-wrap { min-height: 75vh; }
@media (min-width: 1080px) {
  .hero-bg-image-wrap { min-height: clamp(540px, 75vh, 840px); }
}
@media (min-width: 1280px) {
  .hero-bg-image-wrap { min-height: clamp(580px, 75vh, 880px); }
}

/* Hero CTA bar — bordered card capped at the container width (1104, default
   from `section.s > *`). Three-column layout on tablet+:
   LEFT  (.hero-cta-info)   strike-through 정가 + (big price · coupon-pill) + fine print
   ─── vertical hairline divider ───
   RIGHT (.hero-cta-action) primary CTA

   Visual emphasis: accent-tinted border, inner yellow glow, depth shadow —
   so the entire box reads as the page's primary call-to-action surface. */
.hero-cta-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(248,248,4,.22);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),                  /* top highlight */
    inset 0 0 90px rgba(248,248,4,.06),                   /* inner accent glow */
    0 18px 48px rgba(0,0,0,.45),                          /* depth shadow */
    0 0 0 1px rgba(248,248,4,.04);                        /* outer accent ring */
}

/* Info column — vertical stack: strike → (price + pill) → fine print */
.hero-cta-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* List-price strike — desktop 18px / mobile 13px (가격 대비 secondary 위계 강화).
   사용자 의도: mobile에서 가격은 크게 유지하고 서브카피만 축소. */
.hero-cta-strike {
  font-size: clamp(13px, 3.5vw, 18px);
  color: rgba(255,255,255,.5);
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* Stack: meta-row (strike + pill) → big yellow price.
   Width sized to the price's max-content so the meta-row stretches to the
   price's width — strike goes flush left, pill goes flush right (anchored to
   the price's right edge below). */
.hero-cta-price-stack {
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: 100%;
  gap: 10px;
  margin-bottom: 14px;
}
.hero-cta-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.hero-cta-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--accent);
  font-family: var(--f-display);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}
/* Price clamp — 가격은 큰 visual presence 유지 (floor 48). Suffix는 함께 비례 축소 (14-18). */
.hero-cta-price-num    { font-size: clamp(48px, 11vw, 64px); }     /* 64 desktop / 48 mobile */
.hero-cta-price-suffix { font-size: clamp(14px, 3vw, 18px); font-weight: 700; opacity: .75; }

/* Coupon-price pill — sits on the meta-row beside the strike, anchored right.
   Desktop 12px / mobile 10px — 서브카피 위계 일관 적용. */
.hero-cta-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 500;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.hero-cta-fine {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.45);
}

/* Action column — uses the page-standard <CTA> component (.cta class) */
.hero-cta-action { display: flex; align-items: center; }
.hero-cta-action .cta { min-width: 320px; }

/* Vertical hairline divider (its own grid column on tablet+) */
.hero-cta-divider { display: none; }

/* Coupon code chip — Hero CTA bar의 .cta 자리에 들어가는 패시브 코드 표시.
   .cta와 동일한 size constraint(min-width 320/360)로 시각 균형 유지. */
.coupon-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 16px 22px;
  background: rgba(248,248,4,.08);
  border: 1px solid rgba(248,248,4,.35);
  border-radius: 8px;
  text-align: center;
}
.coupon-code-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.coupon-code-value {
  font-family: var(--f-mono);
  font-size: clamp(20px, 4.5vw, 26px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  line-height: 1;
}

/* Mobile (<720px): default tablet rule '.hero-cta-action .cta { min-width: 320px }'이
   모바일 inner 폭(335 - 24×2 = 287)을 초과해 11px overflow 발생.
   - .cta min-width 제거 → width:100%가 박스 폭 자동 채움
   - bar padding 24 → 18, gap 24 → 16: 좁은 박스 콘텐츠 폭 추가 확보
   - .hero-cta-action min-width 0: grid item이 자식 콘텐츠로 강제 폭 늘리지 않도록 */
@media (max-width: 719px) {
  .hero-cta-bar { padding: 18px; gap: 16px; }
  .hero-cta-action { min-width: 0; }
  .hero-cta-action .cta { min-width: 0; }
}

/* Tablet+: 3 columns — info | 1px divider | action */
@media (min-width: 720px) {
  .hero-cta-bar {
    grid-template-columns: 1fr 1px auto;
    column-gap: 40px;
    padding: 28px 32px;
  }
  .hero-cta-divider {
    display: block;
    width: 1px;
    background: rgba(255,255,255,.12);
    align-self: stretch;
  }
  .hero-cta-action .cta { min-width: 320px; }
  .hero-cta-action .coupon-code { min-width: 280px; }
}
@media (min-width: 1080px) {
  .hero-cta-bar { padding: 32px 40px; column-gap: 48px; }
  .hero-cta-action .cta { min-width: 360px; }
  .hero-cta-action .coupon-code { min-width: 320px; }
}

/* Mobile overlay placement (default) — tags pushed below the fixed 64px nav.
   z-index: 2 lifts them above the .hero-bg-gradient (which is also absolute
   inside bg-wrap and would otherwise paint over them in tree order). */
.hero-tags-overlay     { position: absolute; top: 80px; left: 8px; right: 8px; z-index: 2; }
.hero-tags-inner       { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.hero-headline-overlay { position: absolute; bottom: 24px; left: 20px; right: 20px; z-index: 2; }
/* Hero caption — 헤드라인 위 서브카피("유튜브에서 맛본..."). 모바일에선 이미지의 시각 초점(향수병)과
   겹쳐 복잡해 보이는 문제 해결을 위해 숨김. 데스크탑은 이미지 폭이 넓어 텍스트와 product가 분리됨. */
@media (max-width: 719px) {
  .hero-caption { display: none; }
}
.hero-headline-inner   { /* fills overlay box on mobile */ }

/* Subcopy lives INSIDE bg-wrap so the dark gradient keeps fading over it.
   Spacing follows the project tokens (--s-sm/md/lg = 16/24/40):
   - padding-top: pulls subcopy tight under the headline (one block)
   - padding-bottom: small dark settling zone before the BF marquee below
   - padding-inline matches headline-overlay pattern so left edges align exactly
     (avoids 100vw vs 100% scrollbar 7.5px misalignment). */
.hero-bg-wrap > .hero-subcopy-wrap {
  padding-top: var(--s-sm);          /* 16 */
  padding-bottom: var(--s-md);       /* 24 */
  padding-inline: var(--section-px);
}
@media (min-width: 1080px) {
  /* Desktop: pull subcopy tighter; bigger fade-zone below */
  .hero-bg-wrap > .hero-subcopy-wrap { padding-top: 4px; padding-bottom: var(--s-lg); /* 40 */ }
}

/* Tablet (>=720): slightly larger image, larger headline, still phone-shaped */
@media (min-width: 720px) {
  .ph.hero-bg-ph { aspect-ratio: 9/16 !important; max-height: 760px; }
  section.s > .hero-bg-wrap { max-width: 560px; }
  /* Tablet headline override removed — uses --t-hero clamp */
  /* Tablet hero-subcopy uses --t-lede (18px) by default — no override needed */
  section.s > .hero-price-card { max-width: 520px; }
}

/* Desktop (>=1080): cinematic hero bleeds to viewport edges; inner content
   sits inside the 1200px page frame (gutter = var(--section-px)). */
@media (min-width: 1080px) {
  section.s > .hero-bg-wrap {
    max-width: none;
    margin-inline: calc(-1 * var(--section-px)) !important;
  }
  .ph.hero-bg-ph {
    aspect-ratio: auto !important;
    max-height: none;
    width: 100%;
    height: clamp(540px, 75vh, 840px);
  }

  /* Tags + headline overlays stretch to viewport edges, but inner content stays
     within the 1200px page frame (gutter = var(--section-px)).
     Inner content fills the 1104px page area to align with body sections below. */
  .hero-tags-overlay     { top: 96px; left: 0; right: 0; padding-inline: var(--section-px); }
  .hero-tags-inner       { max-width: var(--container-content); margin-inline: auto; justify-content: flex-start; }
  .hero-headline-overlay { bottom: 16px; left: 0; right: 0; padding-inline: var(--section-px); }
  .hero-headline-inner   { max-width: var(--container-content); margin-inline: auto; }

  /* Desktop headline override removed — uses --t-hero clamp */
  /* Desktop hero-subcopy uses --t-lede (18px) — no override needed */
  section.s > .hero-price-card { max-width: 560px; }
}

/* Wide desktop (>=1280): give the cropped banner a touch more height */
@media (min-width: 1280px) {
  .ph.hero-bg-ph { height: clamp(580px, 75vh, 880px); }
}

/* Showcase marquee cards — scale up on bigger screens */
.showcase-card { width: 240px; }
@media (min-width: 720px)  { .showcase-card { width: 280px; } }
@media (min-width: 1080px) { .showcase-card { width: 320px; } }

/* 2-image side-by-side comparisons (Before/After, Reviews, etc).
   Mobile: full content width, each image ~50vw.
   Desktop: fill the full 1104 page area like every other section. */
@media (min-width: 1080px) {
  section.s .compare-grid { max-width: var(--container-content); margin-inline: auto; }
}

/* Before/After — Hero marquee
   Auto-flowing horizontal pairs (Showcase pattern). Each card is a compact
   BEFORE|AFTER side-by-side; click opens a full-screen lightbox with the
   same pair displayed larger. Marquee scaling keeps mobile compact. */

/* Header strip above the marquee — eyebrow on the left, click hint on the right.
   Margin-top uses spacing tokens to give a controlled gap from the subcopy
   above (which already has padding-bottom var(--s-md/lg)). */
.hero-bf-head {
  margin-top: var(--s-lg);          /* 40 */
  margin-bottom: var(--s-sm);       /* 16 */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.hero-bf-head .hero-bf-hint {
  letter-spacing: 0.06em;
  text-transform: none;
}
@media (min-width: 1080px) { .hero-bf-head { margin-top: var(--s-md); /* 24 — 살짝 줄여서 BF 영역 힌트 주되 분리감 유지 */ } }

/* Card — paired image button inside the marquee track.
   Width = 2 × Showcase card width, so each BEFORE/AFTER image matches a
   Showcase image (240/280/320 wide × 3/4 ratio).
   Internal gap is 0 so BEFORE and AFTER look like two halves of one panel,
   reading as a single pair. The marquee provides a much larger 32px gap
   BETWEEN cards so pairs are clearly separated from each other. */
.bf-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 480px;                 /* mobile:  240×2 */
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
  transition: transform .25s cubic-bezier(.2,.6,.2,1);
}
.bf-card:hover { transform: translateY(-2px); }
@media (min-width: 720px)  { .bf-card { width: 560px; } }   /* tablet: 280×2 */
@media (min-width: 1080px) { .bf-card { width: 640px; } }   /* desktop: 320×2 */

.bf-card-cell { position: relative; min-width: 0; }
/* Desaturate the BEFORE image so the transformation reads at a glance */
.bf-card-cell--before .ph.ph--media img,
.bf-card-cell--before .ph.ph--media video {
  filter: saturate(.55) brightness(.92);
}

/* "확대" hint chip in the corner — appears over the AFTER (right) cell */
.bf-card-zoom {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(10,10,12,.7);
  color: rgba(255,255,255,.9);
  padding: 4px 8px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
}

/* Shared BEFORE/AFTER chips — used by both the marquee cards and the lightbox */
.bf-tag {
  position: absolute;
  padding: 4px 7px;
  font-size: 9px;
  letter-spacing: 0.18em;
  line-height: 1;
}
.bf-tag--before {
  top: 8px; left: 8px;
  background: rgba(10,10,12,.7);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.12);
}
.bf-tag--after {
  top: 8px; right: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(248,248,4,.18);
}
/* Lightbox 안에서는 BEFORE와 AFTER 모두 좌측 정렬 (시각 일관성) */
.bf-lb-cell .bf-tag--after {
  left: 8px;
  right: auto;
}

/* Lightbox pair stage — 2 cols side-by-side, stacks + scrolls on portrait viewports */
.bf-lb-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 20px);
  width: 100%;
  max-width: min(1100px, 100%);
  margin: 0 auto;
  animation: lbPop .22s ease-out;
}
.bf-lb-pair > * { position: relative; min-width: 0; }
@media (max-width: 720px) {
  .bf-lb-pair { grid-template-columns: 1fr; max-height: 80vh; overflow-y: auto; }
}

@keyframes lbPop { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: scale(1) } }

/* LIVE indicator pulse — used in Urgency counter */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.85); }
}

/* Why steps — swipe scroll on mobile, 3-col grid on tablet+ */
section.s > .why-steps { margin-inline: -20px; }
.why-step-card { width: 260px; }
@media (min-width: 720px) {
  section.s > .why-steps { margin-inline: auto; }
  .why-steps-track {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 0;
    overflow: visible;
  }
  .why-step-card { width: auto; }
}

section.dark   { background: var(--ink);   color: var(--paper); }
section.darker { background: #050507;       color: var(--paper); }
section.cream  { background: var(--paper);  color: var(--ink); }
section.beige  { background: var(--paper-2);color: var(--ink); }
/* sand — paper-3 톤, beige보다 한 단계 어두운 따뜻한 sand. 전환 섹션·intro에 적합. */
section.sand   { background: var(--paper-3);color: var(--ink); }
/* yellow band — used SPARINGLY (1-2 places only) */
section.yellow { background: var(--accent); color: var(--accent-ink); }

/* ─── CTA ─── */
.cta {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: var(--t-lede);   /* 18 — ref btn-large */
  letter-spacing: -0.02em;
  padding: 18px 20px;
  border: 0;
  cursor: pointer;
  font-family: var(--f-sans);
}
.cta::after { content: "→"; font-weight: 700; }
.cta:hover { background: #fff200; }

/* Secondary CTA (no accent) */
.cta-2 {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
  font-size: 17px;
  padding: 18px 20px;
  border: 0;
  cursor: pointer;
  font-family: var(--f-sans);
}

/* ─── Marquee ─── */
@keyframes marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
/* 항상 overflow-x: auto — 사용자가 swipe로 직접 스크롤 가능.
   자동 애니메이션은 CSS로 항상 활성, JS state(`interacting`)이 animationPlayState로 일시정지. */
.marquee-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.marquee-wrap::-webkit-scrollbar { display: none; }
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee-track.slow { animation-duration: 60s; }
.marquee-track.rev  { animation-direction: reverse; }

/* ─── Placeholders ─── */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.04) 0 8px,
      rgba(255,255,255,.00) 8px 16px),
    var(--ink-3);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.ph.light {
  background:
    repeating-linear-gradient(135deg,
      rgba(10,10,12,.05) 0 8px,
      rgba(10,10,12,.00) 8px 16px),
    var(--paper-2);
  color: rgba(10,10,12,.5);
}
.ph .ph-label {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,.55); padding: 8px 12px;
}
.ph.light .ph-label { color: rgba(10,10,12,.6); }

/* Scroll cards */
.scroll-x {
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 0 20px;
}
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Rules */
.rule { height: 1px; background: var(--line-dark); }
.rule.light { background: var(--line-light); }

/* Number badge */
.num-badge { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; }

/* ─── Utilities ─── */
.flex { display: flex; }
.col { flex-direction: column; }
.center { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.gap-xs { gap: var(--s-xs); } .gap-sm { gap: var(--s-sm); } .gap-md { gap: var(--s-md); }
.mt-xs { margin-top: var(--s-xs); } .mt-sm { margin-top: var(--s-sm); } .mt-md { margin-top: var(--s-md); }
.mt-lg { margin-top: var(--s-lg); } .mt-xl { margin-top: var(--s-xl); }
.mb-xs { margin-bottom: var(--s-xs); } .mb-sm { margin-bottom: var(--s-sm); } .mb-md { margin-bottom: var(--s-md); }
.mb-lg { margin-bottom: var(--s-lg); }
.text-mono { font-family: var(--f-mono); }
.uppercase { text-transform: uppercase; letter-spacing: 0.1em; }
.muted { opacity: .65; } .muted-2 { opacity: .82; }

/* ─── Responsive: section padding only — type tokens stay at their reference
   values across breakpoints (only --t-disp scales mobile→tablet+, matching
   reference's `.sec-head h2` 36→48 jump). --t-hero already uses clamp(). ─── */
@media (min-width: 720px) {
  :root {
    --t-disp: 48px;     /* was 36 on mobile (fs-6xl → fs-7xl) */
  }
  section.s { padding: 96px var(--section-px); }
  section.s.compact { padding: 64px var(--section-px); }
  section.s.tight { padding: 40px var(--section-px); }
  /* Page-wide text container — kept for back-compat */
  .container-text { max-width: var(--container-content); margin-inline: auto; }
}

@media (min-width: 1080px) {
  section.s { padding: 120px var(--section-px); }
  section.s.compact { padding: 80px var(--section-px); }
}

/* ─── Tile-zoom interactive ─── */
@media (max-width: 540px) {
  .lbl-prop-grid { grid-template-columns: 1fr !important; }
}

/* word-break for korean */
h1, h2, h3, p { word-break: keep-all; }

/* ─── Creator section 2-col grid (portrait left, content right) ─── */
.creator-grid {
  display: grid;
  grid-template-columns: 1fr;     /* mobile: stack */
  gap: 32px;
  margin-top: 40px;
  /* desktop에서 portrait가 우측 컨텐츠 높이에 맞춰 stretch — 빈 공간 방지 */
  align-items: stretch;
}
@media (min-width: 720px) {
  .creator-grid {
    grid-template-columns: 360px 1fr;
    gap: 56px;
  }
}
@media (min-width: 1080px) {
  .creator-grid {
    grid-template-columns: 400px 1fr;
    gap: 80px;
  }
}

/* ─── Reviews 2-col card layout (images left, review text right) ─── */
.review-grid {
  display: grid;
  grid-template-columns: 1fr;     /* mobile: stack */
  gap: 24px;
  align-items: start;
}
@media (min-width: 720px) {
  .review-grid {
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 40px;
    align-items: center;
  }
}
@media (min-width: 1080px) {
  .review-grid {
    grid-template-columns: minmax(320px, 400px) 1fr;
    gap: 56px;
  }
}

/* ─── Comparison face-off cards (Comparison section) ───
   Mobile: stack so each card stays readable.
   Tablet+: side-by-side 1:1 face-off. */
@media (max-width: 719px) {
  .vs-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ─── PainPoints media — 모바일 대응 ───
   4+ 이미지: 가로 스크롤(carousel) — 순서 보존 + 각 이미지 큼 + 스와이프 hint
   2개: 위아래 stack (Pain 02 영상 비교 — 위는 초보자, 아래는 고수)
*/
@media (max-width: 719px) {
  /* 4+ 이미지 carousel */
  .pp-media[data-count="4"],
  .pp-media[data-count="3"] {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 섹션 padding을 음수로 상쇄 + 내부 padding으로 첫 이미지 정렬 */
    margin-inline: calc(-1 * var(--section-px)) !important;
    padding-inline: var(--section-px);
    max-width: none !important;
    scroll-padding-inline: var(--section-px);
  }
  .pp-media[data-count="4"]::-webkit-scrollbar,
  .pp-media[data-count="3"]::-webkit-scrollbar { display: none; }

  /* 각 셀 — viewport 기준 정확 계산: 100vw - 80px (peek 60 + 좌측 padding 20).
     trailing space 없이 마지막 이미지가 viewport 우측 끝에 정확히 붙음. */
  .pp-media[data-count="4"] > *,
  .pp-media[data-count="3"] > * {
    flex: 0 0 calc(100vw - 80px);
    scroll-snap-align: start;
    min-width: 0;
  }

  /* 2개: Pain 02 영상 비교 — 좌우 → 위아래 stack */
  .pp-media[data-count="2"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 모바일에서 캡션을 컨텐츠(영상/이미지)에 더 붙임 + 약간 크게 */
  .pp-media-caption {
    margin-top: 8px !important;
    font-size: 14px !important;
  }

  /* Why 섹션 "한 번에 vs 단계 분리" 비교 카드 — 좁은 폭에서 단어 끊김 방지 위해 stack */
  .why-compare {
    grid-template-columns: 1fr !important;
  }

  /* CollageBoard (Reality 섹션) — 데스크톱 1100×640 가로 콜라주 → 모바일 세로 콜라주.
     절대 위치 + 회전 + 겹침 콜라주 정체성 유지, viewport에 맞게 좌표만 재구성.
     각 카드는 JSX에서 --m-y/x/w/rot CSS 변수로 모바일 좌표 노출. */
  .collage-stage {
    width: 100% !important;
    max-width: 100% !important;
    height: 600px !important;       /* 세로 콜라주 stage — 타이트 stack + 50~80px 겹침 */
  }
  .collage-card {
    top: var(--m-y) !important;
    left: var(--m-x) !important;
    width: var(--m-w) !important;
    transform: rotate(var(--m-rot)) !important;
    /* 모바일에서는 호버 효과 비활성 — 터치 환경에 hover 부적합 */
  }
}

/* ─── Showcase ↔ PainPoints intro 사이 transition padding 축소
   Showcase 끝의 hint 텍스트("클릭하면 크게 볼 수 있습니다")가 메인카피와 너무 멀어 보이는 문제 해결.
   - Mobile: 72+72=144 → 48+48=96 (-33%)
   - Desktop: 120+120=240 → 80+80=160 (-33%, .s.compact 토큰값과 일치) */
@media (max-width: 719px) {
  section#showcase { padding-bottom: 48px !important; }
  section#pains    { padding-top:    48px !important; }
}
@media (min-width: 1080px) {
  section#showcase { padding-bottom: 80px !important; }
  section#pains    { padding-top:    80px !important; }
}

/* ─── Lightbox overlay padding — desktop은 여유 있게, mobile은 horizontal 0 ─── */
.lb-overlay {
  padding: clamp(16px, 4vw, 48px);
}
@media (max-width: 640px) {
  .lb-overlay {
    /* 모바일: 좌우 padding 제거 — 이미지가 viewport edge까지 가득 표시 (Showcase/Before-After 통일) */
    padding: 16px 0 !important;
  }
}

/* ─── TrustBar — 모바일에서 좌우 폭 가득, 가운데 정렬, 한 줄 표시 ─── */
@media (max-width: 719px) {
  .trust-bar {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;  /* 좌우 폭 가득 활용 */
    gap: 4px !important;
    padding: 0 16px !important;
  }
  .trust-item {
    gap: 6px !important;
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }
  .trust-text {
    font-size: 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .trust-dot { width: 4px !important; height: 4px !important; flex-shrink: 0; }
}
/* 매우 좁은 화면 (<360px) — 폰트 한 단계 더 축소 */
@media (max-width: 359px) {
  .trust-text { font-size: 11px !important; }
  .trust-bar { padding: 0 12px !important; }
}

/* ─── 8-workflow node graph (Exclusive 03) ───
   Desktop: 4 cols. Mobile: 2 cols (cell width 더 확보) + 와이어는 hidden. */
@media (max-width: 719px) {
  .workflow-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 16px !important;
  }
  /* 와이어는 모바일에서 숨김 — 4-col 가정으로 위치한 wire가 2-col 레이아웃에선 어긋남 */
  .workflow-grid > div > [data-wire] {
    display: none !important;
  }
  /* 카드 내부 여백 축소 — 모바일에서 4행 grid가 너무 길어지는 문제 해결.
     인라인 minHeight:130 + body padding 16/18 합산이 카드 높이를 인위적으로 키움.
     모바일에선 콘텐츠(15px 1~2줄 타이틀)에 맞춰 컴팩트하게. */
  .workflow-grid > div {
    min-height: 0 !important;            /* 인라인 130 제거 — 텍스트 길이만큼 */
  }
  .workflow-grid > div > div:first-child {
    padding: 5px 10px !important;        /* 헤더 라벨 — 6/12 → 5/10 */
  }
  .workflow-grid > div > div:nth-child(2) {
    padding: 10px 12px 12px !important;  /* 본문 — 16/14/18 → 10/12/12 (↕34→↕22) */
  }
  /* 타이틀 — 모바일에서 800 너무 두꺼움. 좁은 카드(~150×91)에서 visual weight 과함 → 700으로 완화. */
  .workflow-grid > div > div:nth-child(2) > div {
    font-weight: 700 !important;
  }
  /* 포트 dots(입출력) — 모바일에선 wires가 hidden이라 semantic 역할 없음 → 12px이 시각 거슬림.
     6px로 축소 + position offset도 -7→-3 비례 조정 (카드 edge에서 half-outside 비주얼 유지). */
  .workflow-grid > div > span:nth-of-type(1),
  .workflow-grid > div > span:nth-of-type(2) {
    width: 6px !important;
    height: 6px !important;
  }
  .workflow-grid > div > span:nth-of-type(1) { left: -3px !important; }
  .workflow-grid > div > span:nth-of-type(2) { right: -3px !important; }
}

/* ─── Input swap demo (Exclusive 03 — 인풋만 바꾸면) ───
   Desktop: [inputs 2col] [arrow] [outputs 3col] 한 줄 6분할 효과 (nested grid).
   Mobile:  세로 stack — inputs 2-col 작게 + 화살표 + outputs 가로 carousel (결과 강조). */
.swap-grid {
  display: grid;
  grid-template-columns: 2fr 32px 3fr;
  gap: 6px;
  align-items: center;
}
.swap-inputs,
.swap-outputs {
  display: grid;
  gap: 6px;
}
.swap-inputs  { grid-template-columns: 1fr 1fr; }
.swap-outputs { grid-template-columns: 1fr 1fr 1fr; }
.swap-grid > .swap-arrow {
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 719px) {
  /* 가로 배치: 좌측 [인풋 stack] | 우측 [아웃풋 3-col].
     좌→우 spatial flow가 input→output 변환 메시지를 직접 전달.
     인풋은 메타데이터 사이즈, 아웃풋은 portrait 비율로 visual presence 확보. */
  .swap-grid {
    grid-template-columns: auto 1fr !important;   /* desktop의 2fr 32px 3fr override */
    gap: 12px !important;
    align-items: center;                          /* 인풋 col 세로 가운데 정렬 */
  }
  /* 인풋 col: 1-col 세로 stack (인물 위, 제품 아래), 1:1 작은 칩 */
  .swap-inputs {
    grid-template-columns: 1fr !important;        /* 2-col → 1-col 세로 stack */
    width: 60px;                                  /* 고정폭 — 인풋 식별성 확보 */
    gap: 8px !important;                          /* --s-xs: 페어 결속 */
    margin: 0;
  }
  /* 화살표 hide — spatial 인접성이 의미 관계 전달 */
  .swap-grid > .swap-arrow { display: none !important; }

  /* 아웃풋: 3-col, 남은 폭 모두 — 각 셀 ~85px wide */
  .swap-outputs {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;                          /* --s-xs: 같은 세트 결속 */
  }

  /* 인풋: width 60 고정 + height를 아웃풋과 맞춤 (51 × 2 + 8 = 110 = output 높이).
     Ph inline aspect-ratio(3/4) override + 명시적 height. 원본 portrait 사진은
     object-fit: cover로 6:5 landscape에 맞춰 top/bottom 살짝 crop. */
  .swap-inputs .ph {
    aspect-ratio: auto !important;
    height: 51px;
  }

  /* Row1↔Row2 간격 — JSX 인라인(12px)을 모바일에서만 --s-sm(16)으로 override.
     두 row가 하나의 swap demo 영역으로 묶여 보이도록 타이트하게.
     row 높이 110 대비 gap 16 = 약 14% — 분리감 최소화. */
  .swap-grid + .swap-grid {
    margin-top: 16px !important;
  }
}

/* ─── Reality 3 가격카드 (1,386,000원 등) ───
   Desktop: 3 cols. Mobile: 1 col stack (7자리 숫자가 잘려서 1 col이 가장 깔끔). */
@media (max-width: 719px) {
  .reality-prices {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
}

/* ─── Exclusive 01 라벨 수정 4-image row ───
   Desktop: 4 cols 그리드. Mobile: 가로 스크롤 carousel (PainPoints와 동일 패턴).
   selector 'section.s > .lbl-fix-grid' (specificity 0,2,1) — 'section.s > *' rule(0,1,1)을
   이겨야 negative margin-inline이 적용돼 첫 셀이 콘텐츠 영역 left에 정렬. */
@media (max-width: 719px) {
  section.s > .lbl-fix-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 섹션 padding 음수로 상쇄 — viewport edge까지 스크롤 영역 확장 */
    margin-inline: calc(-1 * var(--section-px)) !important;
    padding-inline: var(--section-px);
    max-width: none !important;
    scroll-padding-inline: var(--section-px);
  }
  section.s > .lbl-fix-grid::-webkit-scrollbar { display: none; }

  /* 각 셀: viewport - 80 (좌측 padding 20 + 우측 peek 60) → 다음 이미지 살짝 peeking */
  .lbl-fix-cell {
    flex: 0 0 calc(100vw - 80px) !important;
    scroll-snap-align: start;
    min-width: 0;
  }
}

/* ─── Curriculum 상세보기 미디어 그리드 ───
   Desktop: 1행 grid (gridTemplateColumns: repeat(count, 1fr)).
   Mobile: 가로 swipe carousel — 4장이 335px 안에 압축돼 너무 작아지는 문제 해결.
   각 이미지가 viewport - 80px 폭으로 노출 + 다음 이미지 peek로 swipe 유도.
   pp-media와 동일 패턴이지만, curriculum-body의 70px 좌측 indent도 함께 제거. */
@media (max-width: 719px) {
  /* Body 좌측 indent(70px) 제거 — 모바일에선 콘텐츠 폭 확보가 더 중요 */
  .curriculum-body {
    padding-left: 0 !important;
  }
  .curriculum-media {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 섹션 padding 음수로 상쇄 — viewport edge까지 가로 스크롤 영역 확장 */
    margin-inline: calc(-1 * var(--section-px)) !important;
    padding-inline: var(--section-px);
    max-width: none !important;
    scroll-padding-inline: var(--section-px);
  }
  .curriculum-media::-webkit-scrollbar { display: none; }
  .curriculum-media > * {
    flex: 0 0 calc(100vw - 80px);
    scroll-snap-align: start;
    min-width: 0;
  }
}

/* ─── StackedCarousel arrows (Reviews section) ───
   Showcase Lightbox `.lb-side`와 동일한 디자인 — 배경/border 없이 chevron만,
   강한 multi-shadow로 흰 후기 캡처 위에서도 명확히 보이도록.
   모바일(<640px)에서는 44×88 세로 pill 형태로 탭 영역 확보. */
.stack-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 36px;
  font-weight: 400;
  cursor: pointer;
  z-index: 100;
  font-family: var(--f-sans);
  text-shadow:
    0 0 3px rgba(0,0,0,.55),
    0 2px 8px rgba(0,0,0,.4),
    0 1px 2px rgba(0,0,0,.55);
  transition: transform .15s ease;
}
.stack-arrow:hover { transform: translateY(-50%) scale(1.1); }
.stack-arrow--prev { left: 8px; }
.stack-arrow--next { right: 8px; }
@media (max-width: 640px) {
  .stack-arrow { width: 44px; height: 88px; font-size: 40px; }
  .stack-arrow--prev { left: 4px; }
  .stack-arrow--next { right: 4px; }
}

/* ─── Floating quote cards (Reality section) ───
   Soft drift animation. Each card receives the animation via inline shorthand
   (per-card duration + delay). The inner element does the drift; the outer
   wrapper (in JSX) holds the static rotation + Y offset. */
@keyframes quote-float {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-6px, -12px); }
  50%  { transform: translate(3px, -20px); }
  75%  { transform: translate(7px, -10px); }
  100% { transform: translate(0, 0); }
}

/* ─── Top Nav ───────────────────────────────────────────────────────────
   Clear glass material — near-transparent so backdrop-filter does the work.
   Subtle "thickness" comes from a 1px inset highlight at the top edge plus
   a hairline border-bottom — both very low opacity so they read as material
   detail, not chrome.

   Uses position: fixed (not sticky) for two reasons:
     1) Reliable stickiness — body has `overflow-x: clip` to contain the
        marquee, which can break sticky positioning in some browsers.
     2) Floats above content so the hero bg image scrolls behind the glass
        for a real translucent material effect (as opposed to glass over
        empty body bg). */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* 200 = topnav 항상 모든 페이지 콘텐츠(카드 hover lift 50, sticky CTA 100) 위.
     라이트박스(1000)보다는 아래라 모달이 떠도 자연스럽게 가려짐. */
  z-index: 200;
  background: rgba(10,10,12,.12);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color 200ms cubic-bezier(.2,.6,.2,1),
              background 200ms cubic-bezier(.2,.6,.2,1);
}
.topnav.is-scrolled {
  background: rgba(10,10,12,.32);
  border-bottom-color: rgba(255,255,255,.10);
}
.topnav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  height: 64px;
}
.topnav-brand {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}
.topnav-brand .topnav-eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.topnav-brand .topnav-course {
  font-size: 13px;
  color: var(--paper);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.topnav-links {
  display: inline-flex;
  gap: 24px;
  justify-content: flex-end;     /* brand 왼쪽 정렬과 미러링 — 메뉴는 오른쪽 끝에 anchor */
}
.topnav-link {
  font-family: var(--f-sans);
  font-size: 13px;
  color: rgba(244,239,230,.55);
  position: relative;
  padding: 4px 0;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms cubic-bezier(.2,.6,.2,1);
}
.topnav-link:hover { color: var(--paper); }
.topnav-link.is-active { color: var(--paper); }
.topnav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
}
.topnav-cta {
  appearance: none;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 0 16px;
  height: 34px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 200ms cubic-bezier(.2,.6,.2,1),
              transform 200ms cubic-bezier(.2,.6,.2,1);
}
.topnav-cta:hover { filter: brightness(1.08); }
.topnav-cta:active { transform: translateY(1px); }

@media (min-width: 720px) {
  .topnav-inner { padding: 0 48px; gap: 48px; }
}
@media (max-width: 880px) {
  .topnav-links { display: none; }
}
/* TopNav CTA 자체가 JSX에서 제거됨. 따라 grid도 단순화. */
.topnav-inner { grid-template-columns: auto 1fr; }

/* Mobile (<720px) — Brand 폰트 축소 + 주요 CTA 탭 영역 보장 */
@media (max-width: 719px) {
  /* Brand course name 살짝 작게 — 모바일 가로폭 확보 */
  .topnav-brand .topnav-course { font-size: 12px; }

  /* 모든 주요 CTA 모바일 탭 영역 — Apple HIG / Material Design 권장 44~48px */
  .cta {
    min-height: 56px;                 /* 18px 텍스트 + 충분한 padding */
    padding: 16px 20px !important;
  }
  /* Sticky CTA 모바일 탭 영역 (sections-5.jsx StickyCTA 인라인 button) */
  .sticky-cta button,
  .sticky-cta-btn {
    min-height: 44px;
  }
}

/* ─── Waitlist Modal ───────────────────────────────────────────────────
   Custom-UI form that POSTs to Google Forms via hidden iframe.
   Opened by window.openWaitlist(). ESC / overlay click closes.
─────────────────────────────────────────────────────────────────────── */
.wl-overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(8, 8, 10, .78);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: wlFadeIn .22s ease;
}
@keyframes wlFadeIn { from { opacity: 0 } to { opacity: 1 } }

.wl-modal {
  position: relative;
  background: var(--ink-2);
  border: 1px solid rgba(248, 248, 4, .25);
  border-radius: 12px;
  padding: 36px 32px 32px;
  max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, .6),
    inset 0 0 90px rgba(248, 248, 4, .03);
  animation: wlSlideUp .3s cubic-bezier(.2, .7, .3, 1);
  font-family: var(--f-sans);
  color: var(--paper);
}
@keyframes wlSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(.98) }
  to   { opacity: 1; transform: translateY(0)    scale(1) }
}

.wl-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  color: rgba(255, 255, 255, .65);
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.wl-close:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--paper);
  border-color: rgba(255, 255, 255, .3);
}

.wl-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.wl-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.32;
  color: var(--paper);
  white-space: pre-line;
  word-break: keep-all;
}
.wl-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.55;
  margin-bottom: 28px;
  word-break: keep-all;
}

.wl-form { margin: 0; }
.wl-field { margin-bottom: 18px; }

.wl-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
  margin-bottom: 8px;
  font-family: var(--f-mono);
}
.wl-input {
  width: 100%;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 16px;
  font-family: inherit;
  color: var(--paper);
  letter-spacing: -0.005em;
  transition: border-color .15s ease, background .15s ease;
}
.wl-input::placeholder { color: rgba(255, 255, 255, .3); }
.wl-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, .06);
}
.wl-input.is-error { border-color: #ff6b6b; }

.wl-error {
  margin-top: 6px;
  font-size: 12px;
  color: #ff8888;
  letter-spacing: -0.005em;
}

/* Agreement field */
.wl-agree-field {
  margin-top: 14px;
  margin-bottom: 26px;
}
.wl-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.wl-checkbox-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.wl-checkbox-mark {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 4px;
  margin-top: 1px;
  position: relative;
  transition: all .15s ease;
  background: rgba(255, 255, 255, .03);
}
.wl-checkbox-row input[type="checkbox"]:checked + .wl-checkbox-mark {
  background: var(--accent);
  border-color: var(--accent);
}
.wl-checkbox-row input[type="checkbox"]:checked + .wl-checkbox-mark::after {
  content: "";
  position: absolute;
  left: 6px; top: 1px;
  width: 5px; height: 11px;
  border: solid var(--ink);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.wl-checkbox-text {
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
  line-height: 1.45;
}

.wl-terms-toggle {
  margin-top: 8px;
  margin-left: 30px;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
  font-family: var(--f-mono);
  letter-spacing: 0.06em;
}
.wl-terms-toggle:hover { color: rgba(255, 255, 255, .8); }

.wl-terms {
  margin-top: 12px;
  margin-left: 30px;
  padding: 14px;
  background: rgba(0, 0, 0, .3);
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .65);
  word-break: keep-all;
}
.wl-terms p { margin: 0 0 8px; }
.wl-terms p:last-child { margin-bottom: 0; }
.wl-terms strong { color: var(--accent); font-weight: 700; }

.wl-submit {
  width: 100%;
  padding: 16px 20px;
  background: var(--accent);
  color: var(--ink);
  border: 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s ease, transform .1s ease;
}
.wl-submit:hover:not(:disabled) { opacity: .92; }
.wl-submit:active:not(:disabled) { transform: translateY(1px); }
.wl-submit:disabled { opacity: .55; cursor: not-allowed; }

.wl-fine {
  margin-top: 14px;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, .42);
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
}

/* Success state */
.wl-success {
  text-align: center;
  padding: 16px 0 8px;
}
.wl-success-icon {
  width: 64px; height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-size: 36px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  animation: wlPop .35s cubic-bezier(.2, .9, .4, 1.4);
}
@keyframes wlPop {
  from { opacity: 0; transform: scale(.5) }
  to   { opacity: 1; transform: scale(1)  }
}
.wl-success-title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--paper);
}
.wl-success-body {
  margin: 0 0 32px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .7);
}
.wl-success-close {
  padding: 12px 32px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--paper);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.wl-success-close:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .4);
}

/* Mobile */
@media (max-width: 480px) {
  .wl-overlay { padding: 12px; }
  .wl-modal { padding: 32px 22px 26px; border-radius: 10px; max-height: 94vh; }
  .wl-title { font-size: 20px; }
  .wl-input { font-size: 16px; padding: 13px 14px; } /* 16px prevents iOS zoom */
}