/* ========== Chaewoon Landing — Common CSS ========== */

@import url('assets/fonts/google.css');
@import url('assets/fonts/pretendard.css');

:root {
  /* Gate 9: prevent UA dark filter on form controls / autofill / scrollbars
     v4 (dark designed) overrides this in its own <style> block */
  color-scheme: light;
  /* Ohaeng colors */
  --ohaeng-mok: #4A6B5C;
  --ohaeng-hwa: #8E3A36;
  --ohaeng-to: #A88963;
  --ohaeng-geum: #B5B0A6;
  --ohaeng-su: #2C3E50;

  /* Ink scale */
  --ink: #1A1612;
  --ink-mid: #4A423A;
  --ink-soft: #7A7164;
  --ink-faint: #B0A89B;
  --ink-line: #DDD5C8;

  /* Paper scale */
  --paper: #F5EFE3;
  --paper-warm: #F9F3E5;
  --paper-cool: #F0EBDF;
  --paper-pure: #FFFFFF;

  /* Night scale (V4) */
  --night: #1C1814;
  --night-soft: #2A2620;
  --night-line: #3F3830;
  --night-text: #E8E2D6;
  --night-text-soft: #B0A89B;

  /* V4 chapter shades */
  --night-i: #1C1814;
  --night-ii: #181822;
  --night-iii: #201814;
  --night-iv: #14141A;
  --night-v: #1A1612;

  /* Fonts */
  --font-display: "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  --font-serif-kr: "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  --font-serif-en: "Cormorant Garamond", Georgia, serif;
  --font-sans-kr: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-sans-en: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Breakpoints (canonical 2-step; 900/1440 used as section-local exceptions) */
  --bp-tablet: 768px;
  --bp-wide: 1180px;

  /* Chaewoon fill-in system
     UI 위에 해석된 색이 놓이는 표시. 운이 바뀌는 애니메이션 X. */
  --cw-fill-duration: 520ms;
  --cw-fill-duration-fast: 280ms;
  --cw-fill-ease: cubic-bezier(.22, .61, .36, 1);
  --cw-fill-ease-out: cubic-bezier(.16, 1, .3, 1);

  --cw-fill-empty-opacity: .18;
  --cw-fill-rest-opacity: .72;
  --cw-fill-filled-opacity: 1;

  --cw-fill-shadow: 0 18px 48px rgba(35, 28, 22, .10);

  /* Active ohaeng — 시안별 root에서 재할당 */
  --ohaeng-active: var(--ohaeng-geum);
  --cw-fill-surface: var(--paper);
  --cw-fill-wash-strength: 18%;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }

body {
  font-family: var(--font-sans-kr);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  overflow-x: hidden;
}

@media (max-width: 1439px) {
  .page { transform: scale(calc(100vw / 1440)); }
}

/* Wrapper that mimics 1440 wide pen frame */
.page {
  width: 1440px;
  margin: 0 auto;
  transform-origin: top left;
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  padding: 0 80px;
  border-bottom: 1px solid var(--ink-line);
  background: inherit;
}
.nav-logo { display: flex; align-items: center; gap: 14px; }
.nav-logo .hanja { font-family: var(--font-display); font-size: 24px; letter-spacing: 4px; color: var(--ink); }
.nav-logo .en { font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px; color: var(--ink-soft); }
.nav-links { display: flex; align-items: center; gap: 40px; }
.nav-links a { font-family: var(--font-serif-kr); font-size: 14px; color: var(--ink-mid); text-decoration: none; }
.nav-right { display: flex; align-items: center; gap: 24px; }
.nav-price { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: var(--ink-soft); }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-serif-kr); font-size: 13px;
  padding: 10px 20px; text-decoration: none;
}

/* Footer */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 80px;
  background: inherit;
}
.footer-left { display: flex; flex-direction: column; gap: 6px; }
.footer-left .copy { font-family: var(--font-serif-kr); font-size: 12px; color: var(--ink-soft); }
.footer-left .biz, .footer-left .addr { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--ink-faint); }
.footer-right { display: flex; align-items: center; gap: 24px; }
.footer-right span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--ink-soft); }

/* Buttons */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif-kr); font-size: 14px; letter-spacing: 1px;
  padding: 18px 36px; cursor: pointer; border: none; text-decoration: none;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-large { padding: 18px 40px; }
.price-chip {
  display: inline-flex; align-items: center; padding: 18px 20px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; color: var(--ink-soft);
}

/* Hero common */
.hero-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 6px; color: var(--ink-soft); }
.hero-h1 { font-family: var(--font-display); font-size: 54px; font-weight: 400; letter-spacing: -1px; line-height: 1.32; color: var(--ink); }
.hero-sub { font-family: var(--font-serif-kr); font-size: 16px; line-height: 1.85; color: var(--ink-mid); }
.cta-row { display: flex; align-items: center; gap: 16px; padding-top: 12px; }

/* Image placeholder */
.img-ph {
  border: 1px solid var(--ink-line);
  background-size: cover; background-position: center;
  width: 100%; height: 100%;
}

.cw-product-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.cw-product-img.contain {
  object-fit: contain;
  padding: 18px;
}

.cw-proof-thumb,
.cw-product-proof .cw-proof-thumb {
  display: block;
  width: 116px;
  height: 76px;
  object-fit: cover;
  border: 1px solid var(--ink-line);
  flex: 0 0 auto;
}

.cw-hero-product {
  display: block;
  width: 100%;
  height: 168px;
  border: 1px solid var(--ink-line);
  background: var(--paper);
  object-fit: cover;
}

/* Helpers */
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.fill { width: 100%; height: 100%; }
.text-center { text-align: center; }

/* Sections */
section, .section { width: 100%; }
.section-line { width: 100%; height: 1px; background: var(--ink-line); }
.section-line-night { width: 100%; height: 1px; background: var(--night-line); }

/* Reduced motion preference (applies to all 5 variants) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== 2026 audit polish pass ========== */

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
}

/* The pages were originally scaled from a fixed 1440px artboard. Keep the
   1440px composition cap, but let the layout respond normally below it. */
.page {
  width: min(100%, 1440px);
  max-width: 1440px;
  min-height: 100vh;
  transform: none !important;
  transform-origin: initial;
}

@media (max-width: 1439px) {
  .page { transform: none !important; }
}

a,
button,
[tabindex="0"] {
  -webkit-tap-highlight-color: rgba(26, 22, 18, 0.14);
}

a {
  color: inherit;
}

a[href],
button {
  min-height: 44px;
}

a[href]:focus-visible,
button:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.nav {
  width: 100%;
  min-height: 84px;
  height: auto;
  gap: 24px;
}

.nav-logo,
.nav-links,
.nav-right {
  min-width: 0;
}

.nav-links a,
.nav-cta,
.btn-primary,
.btn-secondary,
.price-chip {
  min-height: 44px;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-mid);
}

.nav-cta,
.btn-primary,
.btn-secondary {
  border-radius: 2px;
  transition: transform 240ms ease, box-shadow 240ms ease, background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

.nav-cta:hover,
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(26, 22, 18, 0.14);
}

.btn-secondary:hover {
  background: rgba(26, 22, 18, 0.045);
}

.hero-sub,
.sub,
[class$="-sub"],
.desc,
.aa,
.d {
  overflow-wrap: anywhere;
}

.price-chip,
.nav-price {
  white-space: nowrap;
}

/* Reusable product artifact: CSS-only bracelet/stone evidence for variants
   that are intentionally abstract and should not rely on extra image assets. */
.cw-product-proof {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--ink-line);
  background: color-mix(in srgb, var(--paper-pure) 86%, transparent);
  box-shadow: 0 8px 24px rgba(26, 22, 18, 0.08);
}

/* ========== Chaewoon fill-in micro-interaction ==========
   빈 자리에 해석된 색이 놓이는 일관 패턴.
   채운 메커니즘(빈 → 색이 놓임)을 hover/focus/scroll-in에 그대로. */
.cw-fill-in {
  position: relative;
  isolation: isolate;
  transition:
    color var(--cw-fill-duration) var(--cw-fill-ease),
    background-color var(--cw-fill-duration) var(--cw-fill-ease),
    border-color var(--cw-fill-duration) var(--cw-fill-ease),
    box-shadow var(--cw-fill-duration) var(--cw-fill-ease),
    transform var(--cw-fill-duration-fast) var(--cw-fill-ease-out);
}
.cw-fill-in::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in oklab, var(--ohaeng-active) var(--cw-fill-wash-strength), var(--cw-fill-surface));
  opacity: 0;
  transform: scaleX(.72);
  transform-origin: left center;
  transition:
    opacity var(--cw-fill-duration) var(--cw-fill-ease),
    transform var(--cw-fill-duration) var(--cw-fill-ease);
  pointer-events: none;
  z-index: -1;
}
.cw-fill-in:is(:hover, :focus-visible, .cw-filled)::before {
  opacity: 1;
  transform: scaleX(1);
}
.cw-fill-in:is(:hover, :focus-visible, .cw-filled) {
  border-color: color-mix(in oklab, var(--ohaeng-active) 42%, var(--ink-faint));
}

.cw-empty   { opacity: var(--cw-fill-empty-opacity); transition: opacity var(--cw-fill-duration) var(--cw-fill-ease); }
.cw-filling { opacity: var(--cw-fill-rest-opacity); }
.cw-filled  { opacity: var(--cw-fill-filled-opacity); }

@media (prefers-reduced-motion: reduce) {
  .cw-fill-in,
  .cw-fill-in::before {
    transition-duration: 1ms !important;
    transform: none !important;
  }
}

.cw-product-proof .cw-beads {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.cw-product-proof .cw-beads i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: block;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,0.42), transparent 0 18%, rgba(255,255,255,0) 19%),
    var(--cw-stone, var(--ohaeng-su));
  box-shadow: inset 0 -4px 6px rgba(0,0,0,0.16), 0 1px 2px rgba(26,22,18,0.18);
}

.cw-product-proof .cw-beads i.silver {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #F3EFE6 0%, #BDB5A6 48%, #F8F5EE 100%);
  border: 1px solid rgba(26, 22, 18, 0.18);
}

.cw-product-proof .cw-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cw-product-proof .cw-copy b {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 500;
  color: var(--ink);
}

.cw-product-proof .cw-copy span {
  font-family: var(--font-serif-kr);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-mid);
}

.cw-guardrail {
  font-family: var(--font-serif-kr);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.cw-guardrail::before {
  content: "※ ";
  color: var(--ink-faint);
}

.cw-product-proof.cw-proof-dark {
  border-color: rgba(232, 226, 214, 0.22);
  background: rgba(232, 226, 214, 0.08);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.cw-product-proof.cw-proof-dark .cw-copy b,
.cw-product-proof.cw-proof-dark .cw-copy span,
.cw-proof-dark.cw-guardrail {
  color: var(--night-text);
}

.cw-product-proof.cw-proof-dark .cw-copy span,
.cw-proof-dark.cw-guardrail {
  opacity: 0.76;
}

.cw-service-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ink-soft);
}

.cw-service-line span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, 0.28);
}

.cw-service-line i {
  width: 22px;
  height: 1px;
  background: var(--ink-line);
  display: inline-block;
}

.cw-mobile-break {
  display: none;
}

.v14-hero-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px auto 0;
  flex-wrap: wrap;
}

.v14-hero-cta .cta,
.v14-hero-cta .cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 13px 22px;
  text-decoration: none;
}

.v14-hero-cta .cta {
  background: var(--film-ink, var(--ink));
  color: var(--film-bg, var(--paper));
}

.v14-hero-cta .cta-secondary {
  border: 1px solid var(--film-ink, var(--ink));
  color: var(--film-ink, var(--ink));
}

@media (max-width: 1180px) {
  .nav {
    padding: 18px 32px;
    align-items: flex-start;
  }

  .nav-links {
    gap: 18px;
    flex-wrap: wrap;
  }

  .nav-right {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .hero-h1 { font-size: clamp(36px, 5.2vw, 54px); }
}

@media (max-width: 900px) {
  .page > section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .page > section:not(.scene):not(.v10-hero) {
    min-height: auto !important;
  }

  .v1-hero,
  .v5-hero,
  .v7-hero,
  .v8-hero,
  .v9-hero,
  .v10-meaning,
  .v10-bracelet,
  .v10-price,
  .v9-pricing,
  .v14-notes,
  .v14-end,
  .v15-hero {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }

  .v2-hero,
  .v5-hero,
  .v6-hero,
  .v8-hero-row,
  .v9-hero,
  .v9-hero,
  .v12-hero,
  .v13-hero,
  .v15-hero-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .v1-hv,
  .v1-work,
  .v1-s3,
  .v2-axis,
  .v2-one,
  .v2-gift,
  .v4-mat,
  .v5-s3,
  .v6-empty-seat,
  .v6-reading,
  .v6-bracelet,
  .v6-info,
  .v6-fit,
  .v7-mv,
  .v7-product,
  .v7-codicil,
  .v7-note,
  .v8-process,
  .v8-result,
  .v8-note,
  .v9-s4b,
  .v9-s5,
  .v9-s5b .hd,
  .v9-s7,
  .v10-order,
  .v10-spec,
  .v9-reading,
  .v9-empty,
  .v9-bracelet,
  .v12-five,
  .v12-bridge,
  .v12-bracelet,
  .v13-rooms,
  .v13-empty,
  .v13-bracelet,
  .v15-five,
  .v15-final-seal,
  .v15-bracelet,
  .v15-pricing,
  .v15-notes {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .v2-hero .spine {
    width: 100% !important;
    flex-direction: row !important;
    overflow: hidden;
  }

  .v2-hero .spine .seg {
    min-height: 96px !important;
    padding: 14px !important;
  }

  .v2-hero .hcontent,
  .v5-hero .l,
  .v6-hero-l,
  .v8-hero-l,
  .v9-hero .l,
  .v9-hero-l,
  .v12-hero .left,
  .v13-hero-r,
  .v15-hero-l {
    width: 100% !important;
    max-width: none !important;
    padding-top: 0 !important;
  }

  .v5-env-wrap,
  .v5-envelope,
  .v6-seats-frame,
  .v9-orbit-wrap,
  .v12-hero .bracelet-anchor,
  .v13-plan-sheet,
  .v15-hero-r {
    width: 100% !important;
    max-width: 620px;
  }

  .v9-orbit-wrap {
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  .v12-hero::after {
    left: 20px !important;
    right: 20px !important;
  }

  .v12-hero .right {
    padding-top: 36px !important;
    gap: 20px !important;
    overflow-x: auto;
    justify-content: flex-start !important;
  }

  .v12-hero .bracelet-anchor {
    position: static !important;
    align-items: flex-start !important;
  }

  .v13-titleblock {
    position: static !important;
    order: -1;
  }

  .v14-nav-tag {
    width: 100%;
    order: 3;
    line-height: 1.6;
  }

  .nav {
    padding: 16px 20px;
    flex-wrap: wrap;
  }

  .nav-logo {
    width: 100%;
    justify-content: space-between;
  }

  .nav-links {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 18px;
    padding-bottom: 2px;
  }

  .nav-links a {
    flex: 0 0 auto;
  }

  .nav-right {
    order: 2;
    width: 100%;
    justify-content: space-between;
  }

  .nav-cta,
  .btn-primary,
  .btn-secondary {
    padding: 14px 18px;
  }

  .cta-row,
  [class*="cta-row"],
  [class="ctas"],
  .ctas {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .price-chip {
    width: 100%;
    justify-content: center;
    padding: 12px 0;
    white-space: normal;
  }

  .footer {
    padding: 32px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .footer-right {
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}

@media (max-width: 768px) {
  .page > section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .v1-hero,
  .v5-hero,
  .v7-hero,
  .v8-hero,
  .v9-hero,
  .v15-hero {
    text-align: left !important;
    align-items: stretch !important;
  }

  .v1-hero .h1,
  .v1-hero .sub,
  .v7-hero .h1,
  .v7-hero .sub {
    text-align: left !important;
  }

  .v1-catalog-tag,
  .v1-edition-tag,
  .v10-hero-mark {
    display: none !important;
  }

  .v1-seq,
  .v7-strip,
  .v10-hint,
  .v15-seals {
    overflow-x: auto;
    justify-content: flex-start !important;
    max-width: 100%;
  }

  .v2-hero .spine .seg .coord,
  .v2-hero .spine .seg .h em {
    display: none;
  }

  .v3-hero,
  .v3-hero .left,
  .v3-hero .right,
  .v3-hero .row1,
  .v3-hero .row2 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 18px !important;
  }

  .v3-slip,
  .v3-slip.su-main,
  .v3-hero .main-card,
  .v3-hero .cta-card {
    width: 100% !important;
    height: auto !important;
    min-height: 160px;
    transform: none !important;
  }

  .v4-chapter {
    min-height: auto !important;
    padding: 72px 18px !important;
  }

  .v4-chapter .body,
  .v4-i .form,
  .v4-ii .ms,
  .v4-iii .seq {
    width: 100% !important;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .v5-env-wrap {
    transform: none !important;
  }

  .v6-seat-row {
    gap: 12px !important;
  }

  .v8-bracelet-frame,
  .v10-bracelet-img,
  .v9-bracelet-img,
  .v12-bracelet-img,
  .v13-bracelet-img,
  .v15-bracelet-img {
    min-height: 280px !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
  }

  .v9-s4 .row,
  .v9-s4 .specs,
  .v9-s5b .grid,
  .v10-spec-grid,
  .v9-cond,
  .v15-note-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .scene {
    min-height: 760px !important;
  }

  .scene-stage {
    padding-bottom: 86px !important;
  }

  .subtitle,
  .scene.hero .hook {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .color-spine {
    width: min(100%, 520px) !important;
  }

  .v15-drawer {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .nav-logo .hanja {
    font-size: 21px;
    letter-spacing: 3px;
  }

  .nav-logo .en {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .hero-eyebrow {
    letter-spacing: 3px;
  }

  .hero-h1,
  .h1,
  [class$="-h1"] {
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.34 !important;
    letter-spacing: 0 !important;
  }

  .hero-sub,
  .sub,
  [class$="-sub"] {
    font-size: 15px !important;
    line-height: 1.78 !important;
  }

  .btn-primary,
  .btn-secondary,
  .nav-cta {
    width: 100%;
    justify-content: center;
  }

  .cw-product-proof {
    width: 100%;
    align-items: flex-start;
  }
}

/* ========== Screenshot recheck second pass ========== */

/* First viewports must not depend on delayed JS reveal timing. */
[data-quiet],
[data-near] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition-duration: 0.01ms !important;
}

.v4-chapter .ind,
.v4-chapter .cap,
.v4-chapter .body,
.v4-chapter .footnote,
.scene.hero .scene-no,
.scene.hero .scene-term,
.scene.hero .pre-roll,
.scene.hero .hook,
.scene.hero .subtitle,
.scene.hero .hero-still,
.scene.hero .hero-still-cap,
.scene.with-still .still,
.scene.with-still .still-cap {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.v4-chapter .ind .lab,
.v4-chapter .ind .seal-stroke,
.v4-chapter .ind .num::after {
  opacity: 1 !important;
}

.v4-chapter .ind .num::after {
  width: 80px !important;
}

.v4-chapter .ind .seal-stroke {
  width: 120px !important;
}

/* CSS-only product fallback for missing generated image assets. */
.v8-bracelet-frame,
.v12-hero .bracelet-anchor .thumb,
.scene.hero .hero-still,
.scene.with-still .still {
  background-color: var(--paper-pure) !important;
  background-image:
    radial-gradient(circle at 50% 49%, transparent 0 46px, rgba(26,22,18,0.20) 47px 49px, transparent 50px),
    radial-gradient(circle at 30% 48%, #20354A 0 13px, transparent 14px),
    radial-gradient(circle at 38% 36%, #20354A 0 12px, transparent 13px),
    radial-gradient(circle at 50% 31%, #D9D2C5 0 12px, transparent 13px),
    radial-gradient(circle at 62% 36%, #20354A 0 12px, transparent 13px),
    radial-gradient(circle at 70% 48%, #20354A 0 13px, transparent 14px),
    radial-gradient(circle at 62% 60%, #20354A 0 12px, transparent 13px),
    radial-gradient(circle at 50% 65%, #D9D2C5 0 12px, transparent 13px),
    radial-gradient(circle at 38% 60%, #20354A 0 12px, transparent 13px),
    linear-gradient(135deg, var(--paper-pure), var(--paper-cool)) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  filter: saturate(1.02) contrast(1.06) !important;
}

.v8-bracelet-frame::before,
.v12-hero .bracelet-anchor .thumb::before,
.scene.hero .hero-still::before,
.scene.with-still .still::before {
  content: "925 SILVER / NATURAL STONE";
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--ink-soft);
}

.btn-primary,
.nav-cta,
.v5-hero .l .ctas .p,
.v6-hero-cta .read,
.v8-cta-primary,
.v9-hero .l .ctas .p,
.v10-cta-primary,
.v9-hero-cta .read,
.v12-hero .ctas .btn-primary,
.v13-hero-cta .read,
.v14-hero-cta .cta,
.v15-cta-primary {
  font-weight: 600 !important;
  box-shadow: 0 14px 28px rgba(26, 22, 18, 0.16) !important;
}

.btn-primary,
.v8-cta-primary,
.v9-hero .l .ctas .p,
.v9-hero-cta .read,
.v13-hero-cta .read,
.v15-cta-primary {
  background: var(--btn-primary-bg, var(--ink)) !important;
  color: var(--btn-primary-fg, var(--paper)) !important;
}

.v1-hero {
  min-height: calc(100vh - 84px);
  padding: 62px 120px 76px !important;
  gap: 24px !important;
  justify-content: center !important;
}

.v1-hero .h1 {
  max-width: 920px !important;
}

.v1-hero-contents,
.v1-seal-row,
.cw-product-proof:not(.cw-proof-dark) {
  background: rgba(255, 255, 255, 0.62) !important;
}

.v1-seal-row {
  border: 1px solid var(--ink-line);
  padding: 14px 18px;
}

.v1-cta-row .btn-primary,
.v7-hero-cta .btn-primary {
  padding: 20px 42px !important;
  font-size: 15px !important;
}

.v4-chapter {
  min-height: calc(100vh - 84px) !important;
  padding-top: 72px !important;
  padding-bottom: 72px !important;
  gap: 28px !important;
}

.v4-chapter .ind .num {
  font-size: 92px !important;
  text-shadow: 0 0 22px rgba(232, 226, 214, 0.28) !important;
}

.v4-chapter .cap .h {
  font-size: 42px !important;
}

.v4-i .body {
  display: grid !important;
  grid-template-columns: minmax(360px, 520px) minmax(280px, 420px);
  gap: 22px;
  align-items: start;
}

.v4-i .form {
  padding-top: 0 !important;
}

.v4-i .reading-note {
  display: none !important;
}

.v4-i .cw-product-proof {
  align-self: stretch;
  min-height: 100%;
}

.v6-hero,
.v9-hero,
.v13-hero {
  align-items: center !important;
}

.v6-hero-l,
.v9-hero-l,
.v13-hero-r {
  gap: 24px !important;
}

.v6-seats-frame,
.v9-orbit-wrap,
.v13-plan-sheet {
  background-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 18px 46px rgba(26, 22, 18, 0.12) !important;
}

.v7-hero {
  min-height: calc(100vh - 84px);
  padding-top: 92px !important;
  padding-bottom: 92px !important;
  justify-content: center !important;
}

.v10-hero-content {
  justify-content: center !important;
  padding-bottom: 24px !important;
}

.v14-hero-cta {
  margin-top: 14px !important;
  margin-bottom: 16px !important;
}

.scene.hero .scene-stage {
  justify-content: center !important;
  padding-top: 64px !important;
  padding-bottom: 72px !important;
}

.scene.hero .hook {
  margin-bottom: 24px !important;
}

.scene.hero .hero-still {
  margin-bottom: 20px !important;
}

.scene.hero .subtitle {
  padding-top: 6px !important;
}

/* Density reduction: one dominant action above the fold. */
.v2-hero .hcontent,
.v3-hero .left,
.v5-hero .l,
.v12-hero .left,
.v15-hero-l {
  gap: 20px !important;
}

.v2-hero .hcontent .meta,
.v5-hero .l .meta,
.v12-hero .hanji-label,
.v15-drawer {
  opacity: 0.58 !important;
  transform: scale(0.96);
  transform-origin: left top;
}

.v2-hero .spine {
  width: 176px !important;
}

.v2-hero .spine .seg {
  min-height: 118px !important;
  padding-left: 22px !important;
  padding-right: 18px !important;
}

.v3-hero {
  gap: 52px !important;
}

.v3-hero .right {
  opacity: 0.76 !important;
  transform: scale(0.92);
  transform-origin: center;
}

.v3-hero .cta-card {
  width: 360px !important;
}

.v5-hero {
  padding-top: 54px !important;
  padding-bottom: 64px !important;
  align-items: center !important;
}

.v5-hero .l {
  padding-top: 0 !important;
}

.v5-hero .l .h1 {
  font-size: 43px !important;
  line-height: 1.26 !important;
  max-width: 520px;
}

.v5-env-wrap,
.v5-envelope {
  width: 560px !important;
}

.v5-envelope .content {
  padding-bottom: 24px !important;
}

.v8-cta-primary,
.v9-hero .l .ctas .p {
  padding: 20px 34px !important;
  font-size: 15px !important;
}

.v8-hero-r {
  width: 420px !important;
}

.v8-bracelet-frame {
  height: 480px !important;
  box-shadow: 0 18px 44px rgba(26, 22, 18, 0.14);
}

.v9-card-stack {
  width: 500px !important;
}

.v9-card-stack::after {
  content: "BRACELET INCLUDED · 925 SILVER · NATURAL STONE";
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 24px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-line);
  background:
    radial-gradient(circle at 28% 50%, #20354A 0 7px, transparent 8px),
    radial-gradient(circle at 34% 50%, #D9D2C5 0 7px, transparent 8px),
    radial-gradient(circle at 40% 50%, #20354A 0 7px, transparent 8px),
    rgba(245, 239, 227, 0.92);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--ink);
  z-index: 6;
}

.v9-reason-card {
  padding-bottom: 84px !important;
}

.v12-hero {
  padding-top: 58px !important;
  padding-bottom: 64px !important;
}

.v12-hero .right {
  opacity: 0.72 !important;
  transform: scale(0.92);
  transform-origin: center;
}

.v12-hero .bracelet-anchor {
  right: 88px !important;
  bottom: 32px !important;
}

.v15-hero {
  padding-top: 56px !important;
  padding-bottom: 72px !important;
  gap: 34px !important;
}

.v15-hero-head {
  padding-bottom: 14px !important;
}

.v15-hero-body {
  align-items: center !important;
  gap: 56px !important;
}

.v15-hero-r {
  box-shadow: 0 16px 42px rgba(26, 22, 18, 0.10);
}

@media (max-width: 900px) {
  .v4-i .body {
    display: flex !important;
    flex-direction: column !important;
  }

  .v2-hero .spine,
  .v3-hero .right,
  .v12-hero .right {
    width: 100% !important;
    transform: none !important;
  }

  .v5-env-wrap,
  .v5-envelope,
  .v8-hero-r,
  .v9-card-stack {
    width: 100% !important;
  }
}

/* ============================================================
   CW Trust Strip — price + included items, vertical-line separator.
   시안별 톤은 wrapper class(.dark 등)나 incl span 어휘로 변형.
   ============================================================ */
.cw-trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--ink-faint);
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px solid var(--ink-line);
}
.cw-trust-strip .price {
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 2.5px;
  padding-right: 14px;
  border-right: 1px solid var(--ink-line);
}
.cw-trust-strip .incl {
  display: flex;
  flex-wrap: wrap;
  padding-left: 14px;
}
.cw-trust-strip .incl span {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--ink-line);
}
.cw-trust-strip .incl span:first-child { padding-left: 0; }
.cw-trust-strip .incl span:last-child { border-right: none; padding-right: 0; }
@media (max-width: 768px) {
  .cw-trust-strip { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cw-trust-strip .price { border-right: none; padding-right: 0; }
  .cw-trust-strip .incl { padding-left: 0; }
}
.cw-trust-strip.dark {
  color: rgba(255,255,255,0.55);
  border-top-color: rgba(255,255,255,0.18);
}
.cw-trust-strip.dark .price {
  color: rgba(255,255,255,0.92);
  border-right-color: rgba(255,255,255,0.18);
}
.cw-trust-strip.dark .incl span { border-right-color: rgba(255,255,255,0.18); }

/* ========== Product image final fit fixes ========== */
/* v12 bridge uses a close-up asset; keep the silver charm inside the card instead of cropping at the right edge. */
.v12-bridge .r .stone-side .product-img .cw-product-img {
  object-fit: contain !important;
  padding: 24px 34px 42px 18px !important;
  transform: translateX(-10px) scale(0.94);
  transform-origin: center;
}

/* Make the small hero conversion proof in v12 read more clearly without touching the sampler layout. */
.v12-hero .bracelet-anchor {
  transform: scale(1.12) !important;
  transform-origin: right bottom !important;
}
.v12-hero .bracelet-anchor .thumb .cw-product-img,
.v12-hero .bracelet-anchor .cw-product-img {
  object-fit: contain !important;
  padding: 8px !important;
}

/* Phase C — photo-strip section for variants without baseline image slot */
.cw-photo-strip {
  padding: 96px 48px;
  background: var(--paper);
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.cw-photo-figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  background: var(--paper-warm);
  min-width: 0;
}
.cw-photo-figure--single   { width: 100%; max-width: 1120px; }
.cw-photo-figure--primary  { flex: 1 1 600px; max-width: 720px; }
.cw-photo-figure--secondary{ flex: 1 1 360px; max-width: 480px; }
.cw-photo-figure .cw-product-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========== Variant ohaeng-active assignment ==========
   각 시안의 미감 톤에 맞는 오행 색을 active로. fill-in/proof/wash가 같은 색 공유. */
[class^="v1-"], [class*=" v1-"] { --ohaeng-active: var(--ohaeng-geum); }                 /* Quiet Singular — 금/응축 */
[class^="v2-"], [class*=" v2-"] { --ohaeng-active: var(--ohaeng-mok); }                  /* Five-Tone Spine — 목/시작 */
[class^="v3-"], [class*=" v3-"] { --ohaeng-active: var(--ohaeng-to); }                   /* Color Slip — 토/색지 */
[class^="v4-"], [class*=" v4-"] {                                                        /* Five Readings — 수/밤 (다크) */
  --ohaeng-active: var(--ohaeng-su);
  --cw-fill-surface: var(--night);
  --cw-fill-wash-strength: 26%;
  --btn-primary-bg: var(--night-text);
  --btn-primary-fg: var(--night);
}
[class^="v5-"], [class*=" v5-"] {                                                        /* Send a Color — 화/메시지 */
  --ohaeng-active: var(--ohaeng-hwa);
  --btn-primary-bg: var(--ohaeng-hwa);
  --btn-primary-fg: var(--paper);
}
[class^="v6-"], [class*=" v6-"] { --ohaeng-active: var(--ohaeng-to); }                   /* Empty Seat — 토/채워지는 자리 */
[class^="v7-"], [class*=" v7-"] { --ohaeng-active: var(--ohaeng-mok); }                  /* Three Movements — 목/동작 */
[class^="v8-"], [class*=" v8-"] { --ohaeng-active: var(--ohaeng-su); }                   /* Reader of Grain — 수/결 */
[class^="v9-"], [class*=" v9-"] { --ohaeng-active: var(--ohaeng-geum); }                 /* Quiet Orbit — 금/궤도 */

/* ===========================================================
   MOBILE FOUNDATION (2026-05-11) — v1~v9 통합 모바일 픽스
   - hermes coplan-chaewoon-mobile Phase A [CONVERGE]
   - 옵션 C 하이브리드: global safety + 시안별 특수 모듈 override
   - breakpoint 768 메인 + 480 보정
   =========================================================== */
@media (max-width: 768px) {
  /* === FOUNDATION === */
  html, body { min-width: 0; width: 100%; }
  *, *::before, *::after { box-sizing: border-box; }
  img, svg, video { max-width: 100%; height: auto; }
  /* universal section padding fallback for any block with horizontal padding */
  section { min-width: 0; }

  /* typography downscale */
  h1, .h1 { font-size: 32px !important; line-height: 1.28 !important; letter-spacing: -0.6px !important; word-break: keep-all; overflow-wrap: normal; }
  h2, .h2 { font-size: 24px !important; line-height: 1.32 !important; word-break: keep-all; overflow-wrap: normal; }
  h3, .h3 { font-size: 19px !important; line-height: 1.4 !important; word-break: keep-all; }
  .eyebrow, .eb, [class*="eyebrow"] { letter-spacing: 3px !important; }

  /* price numerals nowrap */
  .price, .num, [class*="price"], [class*="-num"] { white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* CTA touch */
  .btn-primary, .btn-secondary, button, a[role="button"] { min-height: 48px; display: inline-flex; align-items: center; }

  /* === v1 === */
  .v1-hero { padding: 56px 20px 72px !important; }
  .v1-hero .h1 { font-size: 30px !important; }
  .v1-hv { padding: 28px 20px 64px !important; flex-direction: column !important; gap: 16px !important; }
  .v1-hv .cf { flex: 0 0 auto !important; width: 100% !important; height: 220px !important; }
  .v1-hv .cf .hanja { font-size: 92px !important; }
  .v1-hv .br { flex: 1 1 auto !important; width: 100% !important; height: 380px !important; }
  .v1-hv .peek { flex: 0 0 auto !important; width: 100% !important; height: auto !important; transform: none !important; }
  .v1-work { padding: 56px 20px !important; flex-direction: column !important; gap: 24px !important; }
  .v1-work-l, .v1-work-r { width: 100% !important; max-width: 100% !important; }
  .v1-s3 { padding: 56px 20px !important; flex-direction: column !important; gap: 24px !important; }
  .v1-s3 .l, .v1-s3 .r { width: 100% !important; max-width: 100% !important; }
  .v1-s3 .l { height: 320px !important; }
  .v1-s3 .l img { height: 320px !important; width: 100% !important; object-fit: cover !important; }
  .v1-seal-row { flex-wrap: wrap !important; gap: 12px !important; }

  /* === v2 === */
  .v2-hero { padding: 56px 20px 64px !important; }
  .v2-hero .spine, .v2-hero .v2-spine, .v2-spine { position: static !important; transform: none !important; width: 100% !important; max-height: 220px; overflow-x: auto; }
  .v2-axis { padding: 48px 20px !important; flex-direction: column !important; gap: 24px !important; }
  .v2-axis .head, .v2-axis .grid { width: 100% !important; max-width: 100% !important; }
  .v2-axis .grid { flex-direction: column !important; }
  .v2-axis .step { padding: 16px 0 !important; border-left: none !important; border-top: 1px solid var(--ink-line) !important; }
  .v2-readings { padding: 48px 20px !important; }
  .v2-read { padding: 36px 0 !important; flex-direction: column !important; gap: 18px !important; }
  .v2-one { flex-direction: column !important; }
  .v2-one .l { padding: 56px 20px 32px !important; }
  .v2-one .l .h { font-size: 28px !important; }
  .v2-one .r { width: 100% !important; height: 280px !important; }
  .v2-one .v2-one-plate .plate-cap { font-size: 9px !important; letter-spacing: 3px !important; }
  .v2-price { padding: 56px 20px !important; }
  .v2-price .num, .v2-price [class*="num"] { font-size: 32px !important; letter-spacing: 0 !important; white-space: nowrap !important; }
  .v2-gift { padding: 48px 20px !important; }
  .v2-mat { flex-direction: column !important; gap: 16px !important; }

  /* === v3 === */
  .v3-mat { flex-direction: column !important; gap: 16px !important; }
  .v3-card { padding: 32px 20px !important; }
  .v3-chart { flex-direction: column !important; }
  .v3-slip { transform: none !important; }
  .v3-price-row { flex-direction: column !important; gap: 12px !important; }

  /* === v4 === */
  .v4-chapter { min-height: auto !important; padding: 72px 20px !important; }
  .v4-chapter .h, .v4-chapter h2 { font-size: 28px !important; }
  .v4-chapter .roman { font-size: 56px !important; }
  .v4-readings, .v4-cards, .v4-grid { flex-direction: column !important; grid-template-columns: 1fr !important; gap: 16px !important; }
  .v4-cards img, .v4-readings img { max-height: 280px !important; }

  /* === v5 === */
  .v5-hero { padding: 56px 20px 64px !important; flex-direction: column !important; }
  .v5-paths { flex-direction: column !important; gap: 16px !important; }
  .v5-paths .path { width: 100% !important; max-width: 100% !important; }
  .v5-flow { flex-direction: column !important; gap: 12px !important; }
  .v5-gift-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* === v6 === */
  .v6-hero { padding: 56px 20px 56px !important; flex-direction: column !important; gap: 28px !important; }
  .v6-hero-l, .v6-hero-r { width: 100% !important; max-width: 100% !important; }
  .v6-seats-frame, .v6-seats { width: 100% !important; }
  .v6-seat-row { flex-direction: row !important; padding: 14px 12px !important; gap: 12px !important; }
  .v6-empty-seat { padding: 56px 20px !important; flex-direction: column !important; gap: 24px !important; }
  .v6-empty-seat > div { width: 100% !important; max-width: 100% !important; }
  .v6-reading { padding: 56px 20px !important; flex-direction: column !important; gap: 24px !important; }
  .v6-rcard, .v6-rcolor { width: 100% !important; max-width: 100% !important; }
  .v6-rcolor { height: auto !important; min-height: 240px; padding: 36px 24px !important; }
  .v6-rcolor .hanja { font-size: 88px !important; }
  .v6-bracelet { padding: 56px 20px !important; flex-direction: column !important; gap: 24px !important; }
  .v6-bracelet .l, .v6-bracelet .r { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  .v6-bracelet .r { height: 380px !important; position: relative; }
  .v6-bracelet .br-img { height: 380px !important; }
  .v6-price { padding: 56px 20px !important; }
  .v6-price-rows { flex-direction: column !important; gap: 12px !important; }
  .v6-info, .v6-fit, .v6-cond, .v6-faq { padding: 56px 20px !important; }
  .v6-info > *, .v6-fit > *, .v6-cond > *, .v6-faq > * { width: 100% !important; max-width: 100% !important; }

  /* === v7 === */
  .v7-hero { padding: 56px 20px 56px !important; }
  .v7-mv { padding: 56px 20px !important; display: flex !important; flex-direction: column !important; gap: 20px !important; }
  .v7-mv .label, .v7-mv .visual { width: 100% !important; max-width: 100% !important; }
  .v7-mv .verb { font-size: 28px !important; }
  .v7-fog, .v7-narrow, .v7-jewel { width: 100% !important; height: 360px !important; }
  .v7-jewel .stone-card { left: 16px !important; bottom: 16px !important; min-width: auto !important; padding: 12px 14px !important; }
  .v7-jewel .stone-card .stone { width: 32px !important; height: 32px !important; }
  .v7-jewel .stone-card .meta .name { font-size: 14px !important; }
  .v7-jewel .tag { right: 12px !important; top: 12px !important; font-size: 8px !important; letter-spacing: 2px !important; padding: 5px 8px !important; }
  .v7-prog { padding: 48px 20px !important; }
  .v7-prog .row { flex-direction: column !important; gap: 16px !important; }
  .v7-prog .cell { width: 100% !important; }
  .v7-product { padding: 56px 20px !important; flex-direction: column !important; gap: 24px !important; }
  .v7-product .img, .v7-product .copy { width: 100% !important; max-width: 100% !important; }
  .v7-product .img img { height: 360px !important; }
  .v7-codicil { padding: 48px 20px !important; flex-direction: column !important; gap: 20px !important; }
  .v7-codicil .ledger { grid-template-columns: 1fr !important; gap: 16px !important; }
  .v7-divider { display: none !important; }

  /* === v8 === */
  .v8-hero { padding: 56px 20px 56px !important; }
  .v8-hero-row { flex-direction: column !important; gap: 24px !important; }
  .v8-hero-l, .v8-hero-r { width: 100% !important; max-width: 100% !important; }
  .v8-bracelet-frame { width: 100% !important; height: 360px !important; }
  .v8-fn { padding: 48px 20px !important; }
  .v8-fn-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .v8-process { padding: 48px 20px !important; flex-direction: column !important; gap: 20px !important; }
  .v8-process-l, .v8-process-r { width: 100% !important; max-width: 100% !important; }
  .v8-result { padding: 56px 20px !important; }
  .v8-result-row { flex-direction: column !important; gap: 24px !important; align-items: stretch !important; }
  .v8-card, .v8-result-br { width: 100% !important; max-width: 100% !important; }
  .v8-result-br { height: 320px !important; }
  .v8-result-arrow { display: none !important; }
  .v8-price { padding: 56px 20px !important; }
  .v8-note { padding: 48px 20px !important; }
  .v8-note > div { width: 100% !important; max-width: 100% !important; }
  .v8-faq { padding: 48px 20px !important; }
  .v8-final, .v8-appendix { padding: 48px 20px !important; }
  .v8-appendix .v8-app-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* === FAQ / NOTES / INFO / FIT / COND — common side-by-side layout (.l/.r) → stack === */
  .v1-faq, .v2-faq, .v3-faq, .v4-faq, .v5-faq, .v6-faq, .v7-faq, .v8-faq, .v9-faq,
  .v1-info, .v2-info, .v3-info, .v4-info, .v5-info, .v6-info, .v7-info, .v8-info, .v9-info,
  .v6-fit, .v6-cond, .v9-notes, .v8-note, .v7-codicil, .v3-card, .v1-work, .v6-empty-seat, .v6-reading,
  .v1-s3, .v2-axis, .v2-one, .v5-hero, .v7-mv, .v7-product, .v8-process, .v8-result-row,
  .v9-reading, .v9-empty, .v9-bracelet, .v6-bracelet, .v6-hero, .v2-mat {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
  .v1-faq > *, .v2-faq > *, .v3-faq > *, .v4-faq > *, .v5-faq > *, .v6-faq > *, .v7-faq > *, .v8-faq > *, .v9-faq > *,
  .v6-info > *, .v6-fit > *, .v6-cond > *, .v9-notes > *,
  .v8-note > *, .v7-codicil > *,
  .v6-empty-seat > *, .v6-reading > *, .v1-work > *, .v1-s3 > *, .v2-axis > *,
  .v9-reading > *, .v9-empty > *, .v9-bracelet > *, .v6-bracelet > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  /* === v9 === */
  .v9-hero { padding: 56px 20px 56px !important; flex-direction: column !important; gap: 28px !important; }
  .v9-hero-l, .v9-hero-r, .v9-orbit-wrap { width: 100% !important; max-width: 100% !important; }
  .v9-orbit-wrap { aspect-ratio: 1 / 1; max-height: 380px; }
  .v9-orbit-svg { width: 100% !important; height: 100% !important; max-height: 380px; }
  .v9-reading { padding: 56px 20px !important; flex-direction: column !important; gap: 24px !important; }
  .v9-reading-l, .v9-reading-r { width: 100% !important; max-width: 100% !important; }
  .v9-pillar { gap: 12px !important; }
  .v9-empty { padding: 48px 20px !important; flex-direction: column !important; gap: 20px !important; }
  .v9-empty-l, .v9-empty-r { width: 100% !important; max-width: 100% !important; }
  .v9-empty-r { height: 320px !important; }
  .v9-bracelet { padding: 56px 20px !important; flex-direction: column !important; gap: 24px !important; }
  .v9-bracelet-img, .v9-bracelet-r { width: 100% !important; max-width: 100% !important; }
  .v9-bracelet-img { height: 380px !important; }
  .v9-pricing { padding: 56px 20px !important; }
  .v9-notes { padding: 48px 20px !important; }
  .v9-notes > * { width: 100% !important; max-width: 100% !important; }
  .v9-specimen-plate { grid-template-columns: 1fr !important; gap: 16px !important; padding: 24px 0 !important; }
  .v9-specimen-plate .frame { height: 280px !important; }
  .v9-cond { grid-template-columns: 1fr !important; gap: 16px !important; padding: 24px 0 !important; }
  .v9-cond .rows .r { grid-template-columns: 90px 1fr !important; gap: 12px !important; }
}

@media (max-width: 480px) {
  h1, .h1 { font-size: 28px !important; }
  h2, .h2 { font-size: 22px !important; }
  .page > section { padding-left: 20px !important; padding-right: 20px !important; padding-top: 48px !important; padding-bottom: 48px !important; }
  .v1-hv .br, .v6-bracelet .r, .v6-bracelet .br-img, .v7-fog, .v7-narrow, .v7-jewel, .v7-product .img img, .v8-bracelet-frame, .v8-result-br, .v9-bracelet-img { height: 320px !important; }
  .v2-one .r { height: 240px !important; }
  .v9-orbit-wrap, .v9-orbit-svg { max-height: 320px !important; }
  .v9-specimen-plate .frame { height: 240px !important; }
  .v6-rcolor .hanja, .v1-hv .cf .hanja { font-size: 72px !important; }
}

/* ============================================================
   MOBILE POLISH ROUND 2 (2026-05-11) — UI/UX completion pass
   - hermes coplan-cw-mobile-v2 Phase A [CONVERGE]
   - 4-axis common policy: stack-collapse / dl-transform /
     numeric-guardrail / visual-containment
   - Per-variant Round 2 overrides appended below by parallel agents
   ============================================================ */
@media (max-width: 768px) {

  /* === AXIS 4: visual containment (page-level) === */
  /* clip preserves sticky behavior; hidden would break it */
  html, body { overflow-x: clip !important; }
  .page { overflow-x: clip !important; }
  /* every svg fits its container, no negative offsets bleeding right */
  .page svg { max-width: 100% !important; }

  /* === AXIS 1: generic stack collapse for narrow-card grids === */
  /* targets multi-column card containers that crush text to 1 char/line on mobile */
  .v1-paths, .v1-paths > .paths,
  .v3-bs, .v3-before-send, [class^="v3-bs"],
  .v5-paths,
  .v6-fit-grid, .v6-seats-grid,
  .v9-pillars {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .v1-paths > *, .v1-paths .paths > *,
  .v3-bs > *, .v3-before-send > *,
  .v5-paths > *,
  .v6-fit-grid > *, .v6-seats-grid > *,
  .v9-pillars > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* min-width:0 on descendants prevents flex-item intrinsic-min-content crush */
  [class*="-paths"] *, [class*="-fit"] *, [class*="-pillars"] *,
  [class*="-bs"] *, [class*="-flow"] *, [class*="-seats"] *,
  [class*="-payment"] *, [class*="-condition"] * {
    min-width: 0;
  }

  /* === AXIS 2: dl/spec/payment/condition transform — 3-col tables → 1col rows === */
  .v2-spec, .v3-spec, .v3-app, .v3-app-table,
  .v6-payment-grid, .v6-condition-grid, .v6-spec, .v6-info-grid,
  .v8-spec, .v8-app-table, .v8-size-grid, .v8-payment-grid,
  .v9-cond, .v9-cond-rows, .v9-spec {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .v2-spec > *, .v3-spec > *, .v3-app > *, .v3-app-table > *,
  .v6-payment-grid > *, .v6-condition-grid > *, .v6-spec > *, .v6-info-grid > *,
  .v8-spec > *, .v8-app-table > *, .v8-size-grid > *, .v8-payment-grid > *,
  .v9-cond > *, .v9-cond-rows > *, .v9-spec > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
    text-align: left !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--ink-line, rgba(0,0,0,0.08)) !important;
  }
  /* class-agnostic label/value/note typography inside dl-style rows */
  .v2-spec [class*="lab"], .v3-spec [class*="lab"], .v3-app [class*="lab"],
  .v6-payment-grid [class*="lab"], .v6-condition-grid [class*="lab"], .v6-spec [class*="lab"],
  .v8-spec [class*="lab"], .v8-app-table [class*="lab"], .v8-size-grid [class*="lab"],
  .v9-cond [class*="lab"], .v9-spec [class*="lab"] {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    opacity: 0.62 !important;
    display: block !important;
    margin-bottom: 6px !important;
    text-align: left !important;
    width: 100% !important;
  }
  .v2-spec [class*="val"], .v3-spec [class*="val"],
  .v6-payment-grid [class*="val"], .v6-condition-grid [class*="val"], .v6-spec [class*="val"],
  .v8-spec [class*="val"], .v8-size-grid [class*="val"],
  .v9-cond [class*="val"], .v9-spec [class*="val"] {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    display: block !important;
    text-align: left !important;
    width: 100% !important;
    white-space: normal !important;
  }
  .v2-spec [class*="note"], .v3-spec [class*="note"],
  .v6-spec [class*="note"], .v6-condition-grid [class*="note"],
  .v8-spec [class*="note"], .v9-cond [class*="note"], .v9-spec [class*="note"] {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    opacity: 0.7 !important;
    display: block !important;
    margin-top: 6px !important;
    text-align: left !important;
    width: 100% !important;
  }

  /* === AXIS 3: numeric / price guardrail — value nowrap + sub-label below === */
  .price, .num, [class*="-price-num"], [class*="-num"],
  .v1-price-line .num, .v2-price .num, .v3-price-row .num,
  .v6-price-rows .num, .v6-price-line .num, .v6-price-seats .num,
  .v8-price .num, .v9-pricing .num {
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }
  .v1-price-line, .v3-price-row, .v6-price-line, .v6-price-row, .v6-price-rows .row,
  .v8-price-row, .v9-price-row, .v9-pricing-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }
}

/* ============================================================
   PER-VARIANT ROUND 2 OVERRIDES (appended below by agents)
   Convention:
     - Round 2: vN block start marker (CSS-comment safe)
     - @media (max-width: 768px) { .vN-... { ... } }
   ============================================================ */
/* === v1.css === */
/* === Round 2: v1 — Quiet Singular === */
/* Residual overrides for v1 only — common policy in common.css 1644-1758 */
/* Mood: A5 north star, smallest possible intervention */

@media (max-width: 768px) {

  /* --- v1-s6 (Gift path) — still 2-col flex from line 326 (.l/.r),
        not in the .l/.r collapse list. Same fix: stack + full width.
        Inner .gp cards already column from inline style; just ensure full width. --- */
  .v1-s6 {
    padding: 56px 20px !important;
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  .v1-s6 > .l, .v1-s6 > .r {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .v1-s6 .r .gp {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 22px 20px !important;
  }
  .v1-s6 .r .gp .lab {
    word-break: keep-all;
    overflow-wrap: normal;
  }

  /* --- v1-s4 (Reading example card) — fixed 780px overflows.
        Keep card framing, just release the width. --- */
  .v1-s4 {
    padding: 56px 20px !important;
  }
  .v1-s4 .card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 28px 22px !important;
    gap: 22px !important;
  }
  .v1-s4 .card .ratio .b { gap: 10px !important; }
  .v1-s4 .card .ratio .b .h { width: 22px !important; font-size: 14px !important; }
  .v1-s4 .card .ratio .b .pct { width: auto !important; min-width: 36px; font-size: 11px !important; }
  .v1-s4 .card .res .l .val { font-size: 20px !important; }
  .v1-s4 .card .res .circle { width: 56px !important; height: 56px !important; flex: 0 0 auto !important; }

  /* --- v1-s5 (Five colors) — 5-col flex row crushes to 1-2 chars/line.
        Stack to single column for quiet legibility. --- */
  .v1-s5 { padding: 56px 20px !important; gap: 32px !important; }
  .v1-s5 .grid {
    flex-direction: column !important;
    gap: 1px !important;
  }
  .v1-s5 .col {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 20px 22px !important;
  }
  .v1-s5 .col .dot { width: 24px !important; height: 24px !important; flex: 0 0 auto !important; }
  .v1-s5 .col .h { font-size: 26px !important; flex: 0 0 auto !important; min-width: 32px; }
  .v1-s5 .col .lab { font-size: 10px !important; letter-spacing: 1.5px !important; flex: 0 0 auto !important; }
  .v1-s5 .col .desc { font-size: 12px !important; line-height: 1.6 !important; white-space: normal !important; flex: 1 1 auto !important; min-width: 0; }
  /* hover dim disabled on touch */
  .v1-s5 .grid:hover .col { opacity: 1 !important; }
  .v1-s5 .grid .col:hover { transform: none !important; }

  /* --- v1-s7 (Price & order) — 780px ord overflow + 80px price too large --- */
  .v1-s7 {
    padding: 64px 20px !important;
    gap: 32px !important;
  }
  .v1-s7 .hd { gap: 14px !important; align-items: center !important; }
  .v1-s7 .hd .price {
    font-size: 48px !important;
    letter-spacing: -1px !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }
  .v1-s7 .hd .desc {
    text-align: center;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .v1-s7 .ord {
    width: 100% !important;
    max-width: 100% !important;
  }
  .v1-s7 .ord .row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 14px 0 !important;
  }
  .v1-s7 .ord .lab {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    opacity: 0.75 !important;
  }
  .v1-s7 .ord .val {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .v1-s7 .ctas {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .v1-s7 .ctas .btn-primary, .v1-s7 .ctas .btn-secondary {
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- v1-faq — adjust padding (collapse handled by common .l/.r rule) --- */
  .v1-faq { padding: 56px 20px !important; gap: 28px !important; }
  .v1-faq .q .qq, .v1-faq .q .aa {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* --- v1-price section (round 6) — 880px .v1-size + 84px num + opts overflow --- */
  .v1-price { padding: 64px 20px !important; gap: 28px !important; }
  .v1-price .top .num {
    font-size: 48px !important;
    letter-spacing: -1px !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }
  .v1-price .top .desc {
    text-align: center;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    word-break: keep-all;
  }
  .v1-size-note {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 22px 20px !important;
    font-size: 12.5px !important;
    line-height: 1.7 !important;
  }
  .v1-price-cta {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .v1-price-cta .p, .v1-price-cta .s {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 16px 24px !important;
    font-size: 14px !important;
  }

  /* --- v1-purchase — 4-col grid → stack, dividers re-laid --- */
  .v1-purchase { padding: 64px 20px !important; gap: 32px !important; }
  .v1-purchase .grid {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .v1-purchase .col {
    flex: 1 1 auto !important;
    width: 100% !important;
    padding: 18px 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--ink-line) !important;
  }
  .v1-purchase .col:not(:first-child) { border-left: none !important; }
  .v1-purchase .col:first-child { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; border-top: none !important; }
  .v1-purchase .col:last-child { padding-left: 0 !important; padding-right: 0 !important; }

  /* --- v1-final — heavy 96px hanja with 24px letter-spacing overflows;
        140px 160px padding too big; hold the dark-ink frame quietly --- */
  .v1-final { padding: 80px 20px 80px !important; gap: 24px !important; }
  .v1-final .h {
    font-size: 56px !important;
    letter-spacing: 12px !important;
    text-align: center;
  }
  .v1-final .sub {
    font-size: 16px !important;
    line-height: 1.55 !important;
    text-align: center;
    word-break: keep-all;
  }
  .v1-final .ctas {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
    padding-top: 12px !important;
  }
  .v1-final .ctas .p, .v1-final .ctas .s {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 16px 24px !important;
    font-size: 14px !important;
  }
  .v1-final .meta { flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
  .v1-final .meta .txt { font-size: 10px !important; letter-spacing: 1.5px !important; text-align: center; }

  /* --- Hero secondary tags — top: 60px / left: 80px / right: 80px is offscreen-ish on 360px;
        already had overlapping risk. Tighten or hide quietly. --- */
  .v1-catalog-tag, .v1-edition-tag {
    top: 16px !important;
  }
  .v1-catalog-tag { left: 20px !important; }
  .v1-edition-tag { right: 20px !important; }
  .v1-catalog-tag .ct-label, .v1-edition-tag .ed-label { font-size: 8px !important; letter-spacing: 2.5px !important; }
  .v1-catalog-tag .ct-val, .v1-edition-tag .ed-id { font-size: 9.5px !important; letter-spacing: 2px !important; }

  /* --- Hero CTA row — 3 items stack quietly --- */
  .v1-cta-row {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .v1-cta-row .btn-primary, .v1-cta-row .btn-secondary {
    width: 100% !important;
    justify-content: center !important;
  }
  .v1-cta-row .price-chip {
    align-self: center !important;
    padding: 10px 14px !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }

  /* --- Hero sequence (5 dots → arrow → big circle) gets crushed on mobile --- */
  .v1-seq { gap: 16px !important; flex-wrap: wrap !important; justify-content: center !important; }
  .v1-seq .dots { gap: 12px !important; }
  .v1-seq .dot { width: 11px !important; height: 11px !important; }
  .v1-seq .arrow .line { width: 28px !important; }
  .v1-seq .one-color { width: 40px !important; height: 40px !important; }

  /* --- Hero contents inventory bar — let it wrap quietly --- */
  .v1-hero-contents {
    font-size: 9.5px !important;
    letter-spacing: 1.5px !important;
    padding: 8px 14px !important;
    text-align: center;
    line-height: 1.7;
  }

  /* --- v1-work spec rows — keep label above value, full width --- */
  .v1-spec-row {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 14px 0 !important;
  }
  .v1-spec-row .right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .v1-spec-row .label {
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }
  .v1-spec-row .kr { font-size: 13.5px !important; line-height: 1.55 !important; }
  .v1-spec-row .en { font-size: 10.5px !important; letter-spacing: 0.5px !important; word-break: break-word; }

  /* --- v1-s3 specs (소재/동봉) row — keep horizontal but allow wrap --- */
  .v1-s3 .specs .row {
    gap: 16px !important;
    flex-wrap: wrap !important;
  }
  .v1-s3 .specs .lab { flex: 0 0 auto; }
  .v1-s3 .specs .val { font-size: 12.5px !important; text-align: right; flex: 1 1 auto; min-width: 0; word-break: break-word; }

  /* --- v1-s2 (방식) — already stacks, just trim padding --- */
  .v1-s2 { padding: 64px 20px !important; gap: 36px !important; }
  .v1-s2 .step { padding: 24px 22px !important; gap: 14px !important; }

  /* --- nav cta on mobile — long text "하나의 색 · 한 점의 팔찌" wraps awkwardly --- */
  .nav-cta { padding: 8px 12px !important; font-size: 11px !important; }
}

@media (max-width: 480px) {
  .v1-hero .h1 { font-size: 26px !important; }
  .v1-s4 .card { padding: 24px 18px !important; }
  .v1-s7 .hd .price { font-size: 42px !important; }
  .v1-price .top .num { font-size: 42px !important; }
  .v1-final .h { font-size: 44px !important; letter-spacing: 8px !important; }
  /* tags risk overlap with hero h1 on smallest — hide quietly */
  .v1-catalog-tag, .v1-edition-tag { display: none !important; }
}

/* === v2.css === */
/* === Round 2: v2 — Five-Tone Spine === */
/* Decision: HIDE the sticky reading-spine on mobile.
   Rationale: each reading already self-labels (木/火/土/金/水 + glyph + index),
   so spine wayfinding is desktop-only structural device. Hiding lets body
   get full width, eliminating right-edge text cuts ("뻗어나가는 결" etc).
   Hero spine remains (already converted to top horizontal strip in R1).
*/
@media (max-width: 768px) {

  /* --- 1. Reading spine — hide on mobile (sticky aside was overlapping body) --- */
  .v2-readings .spine-stick { display: none !important; }
  .v2-readings { display: block !important; padding: 0 !important; }
  .v2-readings .stack { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; display: block !important; }

  /* --- 2. Each reading section — full width, axis above body --- */
  .v2-read {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    padding: 48px 20px !important;
    gap: 18px !important;
  }
  .v2-read .axis {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 0 !important;
  }
  .v2-read .axis .num { font-size: 11px !important; }
  .v2-read .axis .glyph { font-size: 56px !important; line-height: 1 !important; }
  .v2-read .axis .vrule { display: none !important; }
  .v2-read .body { width: 100% !important; max-width: 100% !important; padding-top: 0 !important; gap: 18px !important; }
  .v2-read .body .h2 { font-size: 22px !important; line-height: 1.4 !important; }
  .v2-read .body .desc { font-size: 14.5px !important; line-height: 1.8 !important; }
  .v2-read .corner { position: static !important; align-self: flex-end !important; }

  /* --- 3. COORD / PHASE / STONE meta row — 3-col flex → 1col stacked dl --- */
  .v2-read .body .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding-top: 14px !important;
    margin-top: 8px !important;
  }
  .v2-read .body .row .cell {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px 0 !important;
    border-top: 1px solid var(--ink-line, rgba(0,0,0,0.08)) !important;
    gap: 4px !important;
  }
  .v2-read .body .row .cell:first-child { border-top: none !important; }
  .v2-read .body .row .cell .lab { font-size: 10px !important; letter-spacing: 2.5px !important; }
  .v2-read .body .row .cell .val { font-size: 13.5px !important; white-space: normal !important; }

  /* --- 4. Hero spine — make horizontal strip readable, not 220px scroll-cropped --- */
  .v2-hero { flex-direction: column !important; align-items: stretch !important; }
  .v2-hero .spine {
    width: 100% !important;
    flex-direction: row !important;
    max-height: none !important;
    overflow-x: visible !important;
    gap: 1px !important;
  }
  .v2-hero .spine .seg {
    flex: 1 1 0 !important;
    min-height: 88px !important;
    padding: 12px 8px !important;
    min-width: 0 !important;
  }
  .v2-hero .spine .seg .coord { padding-top: 0 !important; gap: 3px !important; }
  .v2-hero .spine .seg .coord .y { font-size: 8px !important; letter-spacing: 1.5px !important; }
  .v2-hero .spine .seg .h { font-size: 12px !important; letter-spacing: 2px !important; }
  .v2-hero .spine .seg .h em { display: block !important; margin-left: 0 !important; margin-top: 2px !important; font-size: 8px !important; letter-spacing: 1.5px !important; }
  .v2-hero .hcontent { padding: 36px 20px !important; gap: 22px !important; }
  .v2-hero .hcontent::before { display: none !important; }
  .v2-hero .hcontent .h1 { font-size: 30px !important; line-height: 1.3 !important; }
  .v2-hero .hcontent .sub { font-size: 14.5px !important; line-height: 1.8 !important; }
  .v2-hero .hcontent .meta { flex-wrap: wrap !important; gap: 10px !important; }
  .v2-hero .hcontent .meta .seq { flex-wrap: wrap !important; gap: 6px !important; font-size: 10px !important; letter-spacing: 1px !important; }
  .v2-hero .hcontent .ctas { flex-wrap: wrap !important; gap: 10px !important; }

  /* --- 5. Material coordinates table (.v2-mat .row) — flex spread → dl-style stack ---
        Common policy targets .v2-spec but this variant uses .v2-mat. */
  .v2-mat { width: 100% !important; max-width: 100% !important; }
  .v2-mat .hd { padding: 14px 18px !important; }
  .v2-mat .hd .l { font-size: 10px !important; letter-spacing: 2.5px !important; }
  .v2-mat .hd .r { font-size: 9px !important; letter-spacing: 1.5px !important; }
  .v2-mat .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 14px 18px !important;
  }
  .v2-mat .row .lab {
    width: 100% !important;
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
    opacity: 0.85 !important;
  }
  .v2-mat .row .val {
    width: 100% !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  /* --- 6. Price section polish (common policy already nowraps .num) --- */
  .v2-price { padding: 56px 20px !important; gap: 22px !important; }
  .v2-price .price-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .v2-price .num { font-size: 42px !important; }
  .v2-price .final-card { width: 100% !important; min-width: 0 !important; }
  .v2-price .final-card .fc-row { padding: 9px 14px !important; font-size: 11px !important; }
  .v2-price .dots { gap: 16px !important; }
  .v2-price .dots span { width: 12px !important; height: 12px !important; }
  .v2-price .ctas { flex-direction: column !important; width: 100% !important; gap: 10px !important; padding-top: 8px !important; }
  .v2-price .ctas > * { width: 100% !important; text-align: center !important; }

  /* --- 7. S6 One color, S7 gift, FAQ, verify, final small-screen polish --- */
  .v2-one .l { padding: 48px 20px 24px !important; gap: 22px !important; }
  .v2-one .l .h { font-size: 26px !important; line-height: 1.35 !important; }
  .v2-one .l .seq { gap: 16px !important; flex-wrap: wrap !important; }
  .v2-one .l .seq .dts { gap: 10px !important; }
  .v2-one .l .seq .dts span { width: 12px !important; height: 12px !important; }
  .v2-one .l .seq .ar .line { width: 32px !important; }
  .v2-one .l .seq .one { width: 40px !important; height: 40px !important; }
  .v2-one .l .desc { font-size: 14px !important; line-height: 1.8 !important; }
  .v2-one .r { padding: 0 !important; }

  .v2-gift { padding: 48px 20px !important; gap: 24px !important; }
  .v2-gift .l .h { font-size: 24px !important; line-height: 1.45 !important; }
  .v2-gift .l .d { font-size: 14px !important; line-height: 1.8 !important; }
  .v2-gift .r .gp { padding: 22px 20px !important; gap: 12px !important; }

  .v2-faq { padding: 48px 20px !important; gap: 28px !important; }
  .v2-faq .l .t { font-size: 24px !important; }
  .v2-faq .q { padding: 18px 0 !important; }
  .v2-faq .q .qq { font-size: 14.5px !important; line-height: 1.6 !important; }
  .v2-faq .q .aa { font-size: 13.5px !important; line-height: 1.75 !important; }

  .v2-verify { padding: 56px 20px !important; gap: 28px !important; }
  .v2-verify .hd { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .v2-verify .grid { flex-direction: column !important; }
  .v2-verify .col {
    padding: 16px 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--ink-line, rgba(0,0,0,0.08)) !important;
  }
  .v2-verify .col:first-child { border-top: none !important; padding-top: 0 !important; }

  .v2-final { padding: 64px 20px !important; gap: 26px !important; }
  .v2-final .h { font-size: 48px !important; letter-spacing: 12px !important; }
  .v2-final .sub { font-size: 15px !important; text-align: center !important; }
  .v2-final .ctas { flex-direction: column !important; width: 100% !important; gap: 10px !important; }
  .v2-final .ctas > * { width: 100% !important; text-align: center !important; padding: 16px 24px !important; }
  .v2-final .meta { flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; }
}

@media (max-width: 480px) {
  .v2-hero .spine .seg .h { font-size: 11px !important; letter-spacing: 1.5px !important; }
  .v2-hero .spine .seg .coord .y { font-size: 7.5px !important; letter-spacing: 1px !important; }
  .v2-hero .hcontent .h1 { font-size: 26px !important; }
  .v2-read .axis .glyph { font-size: 48px !important; }
  .v2-read .body .h2 { font-size: 20px !important; }
  .v2-price .num { font-size: 36px !important; }
  .v2-final .h { font-size: 40px !important; letter-spacing: 8px !important; }
}

/* === v3.css === */
/* === Round 2: v3 — Color Slip ===
   Residual overrides on top of common.css Round 2 policy.
   Common policy axes 1 (.v3-bs/.v3-before-send) and 2 (.v3-spec/.v3-app) do NOT
   match v3 actual class names: before-send uses `.v3-send .cards/.card` and
   spec uses `.v3-s6 .row` / `.v3-slip-detail`. All v3 fixes done here.
*/
@media (max-width: 768px) {

  /* ===== AXIS 1 OVERRIDE — before-send 4 vertical strips → 1col field-note rows
     CRITICAL FIX: `.v3-send .cards` was 4 flex children crushed to 1 char/line.
     Visual language stays "field note": small mono label + body text + border-top.
     No card backgrounds, no padding boxes. */
  .v3-send { padding: 64px 20px !important; gap: 28px !important; }
  .v3-send .hd .h { font-size: 19px !important; line-height: 1.4 !important; }
  .v3-send .cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .v3-send .card,
  .v3-send .card.r-1,
  .v3-send .card.r1 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--ink-line) !important;
    padding: 18px 0 !important;
    display: grid !important;
    grid-template-columns: 64px 1fr !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
    align-items: baseline !important;
    box-shadow: none !important;
  }
  .v3-send .card:last-child { border-bottom: 1px solid var(--ink-line) !important; }
  .v3-send .card .lab {
    grid-row: 1 / span 2;
    grid-column: 1;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    align-self: start;
    padding-top: 2px;
  }
  .v3-send .card .h {
    grid-column: 2;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .v3-send .card .d {
    grid-column: 2;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    margin: 0;
  }

  /* ===== Hero — slips already get transform:none from existing v3 block.
     Fix row2 left padding offset + su-main fixed 380px width + force shrink. */
  .v3-hero { padding: 56px 20px 64px !important; flex-direction: column !important; gap: 28px !important; }
  .v3-hero .left { width: 100% !important; }
  .v3-hero .main-card { padding: 28px 22px !important; }
  .v3-hero .main-card .h1 { font-size: 28px !important; }
  .v3-hero .cta-card { width: 100% !important; }
  .v3-hero .right { width: 100% !important; gap: 14px !important; }
  .v3-hero .row1, .v3-hero .row2 {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
  }
  .v3-hero .v3-slip {
    /* normalize all slip widths so they fit 2-up or wrap cleanly */
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .v3-hero .v3-slip.su-main {
    flex-basis: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
  }
  .v3-hero .v3-slip.mok-tl,
  .v3-hero .v3-slip.hwa-tr,
  .v3-hero .v3-slip.mok-thin,
  .v3-hero .v3-slip.to-bc,
  .v3-hero .v3-slip.geum-br {
    width: auto !important;
    height: 140px !important;
  }
  /* fix oversized hanja inside hero slips on mobile */
  .v3-hero .v3-slip .h { font-size: 32px !important; }
  .v3-hero .v3-slip.hwa-tr .h { font-size: 38px !important; }
  .v3-hero .v3-slip.mok-tl .h { font-size: 32px !important; }

  /* ===== S2 — keep stacked (already collapsed by .v3-s2 padding override) */
  .v3-s2 { padding: 64px 20px !important; flex-direction: column !important; gap: 32px !important; }
  .v3-s2 .l, .v3-s2 .r { width: 100% !important; flex: 1 1 auto !important; }
  .v3-s2 .l .h { font-size: 24px !important; }
  .v3-s2 .r { height: 280px !important; }

  /* ===== S3 — narrows diagram. Hermes decision: max-width 280, contain. */
  .v3-s3 { padding: 64px 20px !important; gap: 32px !important; }
  .v3-s3 .hd .h { font-size: 21px !important; line-height: 1.4 !important; }
  .v3-s3 .seq {
    max-width: 280px !important;
    width: 100% !important;
    margin-inline: auto !important;
    gap: 14px !important;
    padding: 24px 0 8px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }
  .v3-s3 .seq .dts { gap: 6px !important; flex-shrink: 1; }
  .v3-s3 .seq .dts span { width: 10px !important; height: 10px !important; }
  .v3-s3 .seq .ar .line { width: 18px !important; }
  .v3-s3 .seq .ar { gap: 4px !important; }
  .v3-s3 .seq .one { width: 36px !important; height: 36px !important; }
  .v3-s3 .seq .mini {
    width: 84px !important;
    height: 56px !important;
    flex-shrink: 0;
  }
  .v3-s3 .seq .mini .mh .a { font-size: 7px !important; }
  .v3-s3 .seq .mini .mh .b { font-size: 6px !important; }
  .v3-s3 .seq .mini .mb .circle { width: 14px !important; height: 14px !important; }
  .v3-s3 .lbl-row { gap: 28px !important; padding-top: 8px !important; }
  .v3-s3 .lbl-row span { font-size: 10px !important; letter-spacing: 2px !important; }

  /* ===== S4 — slip-detail card 880px fixed → fluid */
  .v3-s4 { padding: 64px 20px !important; gap: 32px !important; }
  .v3-s4 .hd .h { font-size: 22px !important; }
  .v3-slip-detail {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
  }
  .v3-slip-detail .edge-cap { position: static !important; display: block; padding: 0 0 8px; }
  .v3-slip-detail .sd-hd { padding: 16px 18px !important; flex-wrap: wrap; gap: 8px; }
  .v3-slip-detail .sd-hd .ll .h { font-size: 18px !important; letter-spacing: 2px !important; }
  .v3-slip-detail .sd-hd .ll .e { font-size: 10px !important; }
  .v3-slip-detail .sd-hd .rr { font-size: 10px !important; }
  .v3-slip-detail .sd-bd {
    padding: 22px 18px !important;
    gap: 24px !important;
    flex-direction: column !important;
  }
  .v3-slip-detail .sd-bd .l, .v3-slip-detail .sd-bd .r {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  .v3-slip-detail .sd-bd .l .v { font-size: 14px !important; letter-spacing: 0.5px !important; }
  .v3-slip-detail .sd-bd .l .b { gap: 12px !important; font-size: 12px !important; }
  .v3-slip-detail .sd-bd .l .b .pct { width: 44px !important; font-size: 11px !important; }
  .v3-slip-detail .sd-bd .r { align-items: center !important; }
  .v3-slip-detail .sd-bd .r .circle { width: 88px !important; height: 88px !important; }
  .v3-s4 .note { font-size: 11px !important; letter-spacing: 2px !important; text-align: center; padding: 0 12px; }

  /* ===== S5 — empty-image right box: HTML has empty <div class="r"></div>.
     Decision: HIDE on mobile (no asset, just bordered placeholder). */
  .v3-s5 { padding: 64px 20px !important; flex-direction: column !important; gap: 24px !important; }
  .v3-s5 .l { width: 100% !important; flex: 1 1 auto !important; }
  .v3-s5 .l .h { font-size: 22px !important; }
  .v3-s5 .r { display: none !important; }

  /* ===== S6 — APPENDIX A spec table.
     left column "APPENDIX A · OBJECT SPECIFICATION + 채운 팔찌의 소재·사이즈·구성"
     stacks above table. Right rows already exist as flex .row, normalize them. */
  .v3-s6 {
    padding: 56px 20px !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .v3-s6 .l, .v3-s6 .r { width: 100% !important; flex: 1 1 auto !important; }
  .v3-s6 .l .eb { letter-spacing: 3px !important; }
  .v3-s6 .l .h { font-size: 18px !important; line-height: 1.5 !important; }
  .v3-s6 .r .row {
    padding: 16px 0 !important;
    gap: 6px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .v3-s6 .r .row .lab {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .v3-s6 .r .row .val {
    font-size: 14px !important;
    line-height: 1.55 !important;
    width: 100% !important;
    white-space: normal !important;
  }

  /* ===== S7 — gift. Right is empty placeholder, hide on mobile. */
  .v3-s7 { padding: 56px 20px !important; flex-direction: column !important; gap: 24px !important; }
  .v3-s7 .l { width: 100% !important; flex: 1 1 auto !important; }
  .v3-s7 .l .h { font-size: 20px !important; }
  .v3-s7 .r { display: none !important; }

  /* ===== S8 — price + size memo. 780px memo overflows. */
  .v3-s8 { padding: 64px 20px !important; gap: 24px !important; }
  .v3-s8 .num { font-size: 44px !important; letter-spacing: -1px !important; white-space: nowrap !important; }
  .v3-s8 .desc { font-size: 13px !important; text-align: center; padding: 0 8px; }
  .v3-size-memo {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 18px !important;
    box-sizing: border-box;
  }
  .v3-size-memo .hd { flex-wrap: wrap; gap: 6px; }
  .v3-size-memo .row { gap: 12px !important; }
  .v3-size-memo .row .h { font-size: 12px !important; flex-shrink: 0; }
  .v3-size-memo .row .v { font-size: 12.5px !important; line-height: 1.6 !important; }
  .v3-size-memo .note { font-size: 11px !important; line-height: 1.6 !important; }
  .v3-s8 .ctas { flex-direction: column !important; width: 100% !important; gap: 10px !important; }
  .v3-s8 .ctas .btn-primary, .v3-s8 .ctas .btn-secondary { width: 100% !important; justify-content: center !important; }

  /* ===== FAQ — already collapsed by common .v3-faq stack. Just tighten padding. */
  .v3-faq { padding: 56px 20px !important; gap: 20px !important; }
  .v3-faq .l .t { font-size: 22px !important; }
  .v3-faq .q { padding: 18px 0 !important; gap: 10px !important; }
  .v3-faq .q .qq { font-size: 14px !important; }
  .v3-faq .q .aa { font-size: 13px !important; line-height: 1.7 !important; }

  /* ===== Final */
  .v3-final { padding: 64px 20px !important; gap: 24px !important; }
  .v3-final .h { font-size: 56px !important; letter-spacing: 12px !important; }
  .v3-final .sub { font-size: 14px !important; text-align: center; }
  .v3-final .ctas { flex-direction: column !important; width: 100% !important; gap: 10px !important; }
  .v3-final .ctas .p, .v3-final .ctas .s {
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    padding: 16px 20px !important;
    font-size: 13px !important;
  }
}

/* tighter still at 360 */
@media (max-width: 380px) {
  .v3-hero .v3-slip { flex-basis: 100% !important; height: 120px !important; }
  .v3-s3 .seq { max-width: 240px !important; }
  .v3-s3 .seq .mini { width: 70px !important; height: 48px !important; }
  .v3-s3 .lbl-row { gap: 18px !important; }
  .v3-s8 .num { font-size: 38px !important; }
  .v3-final .h { font-size: 44px !important; letter-spacing: 8px !important; }
}

/* === v4.css === */
/* === Round 2: v4 — Five Readings (surgical polish) === */
@media (max-width: 768px) {
  /* fixed-width inner blocks → fluid (forms/notes/photos) */
  .v4-i .form,
  .v4-i .reading-note .text,
  .v4-iv .photo,
  .v4-v .photo {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* photos: keep aspect, fit container */
  .v4-iv .photo { height: auto !important; aspect-ratio: 13 / 7; }
  .v4-v  .photo { height: auto !important; aspect-ratio: 5 / 4; }
  .v4-iv .photo img,
  .v4-v  .photo img,
  .v4-iv .photo .cw-product-img,
  .v4-v  .photo .cw-product-img {
    width: 100% !important; height: 100% !important; object-fit: cover; display: block;
  }
  /* materials & appendix B side-by-side → stack */
  .v4-mat, .v4-appb { padding: 56px 20px !important; gap: 28px !important; flex-direction: column !important; }
  .v4-mat .l, .v4-mat .r,
  .v4-appb .hd { width: 100% !important; max-width: 100% !important; }
  .v4-appb .hd { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  /* spec/info rows: prevent label/value crush */
  .v4-mat .r .row,
  .v4-appb .row { gap: 14px !important; align-items: flex-start !important; }
  .v4-mat .r .row .desc,
  .v4-appb .row .val { text-align: right; word-break: keep-all; }
  /* price numeric guardrail (extra-large numeral) */
  .v4-price { padding: 80px 20px 72px !important; }
  .v4-price .num { font-size: 56px !important; letter-spacing: -1px !important; }
  .v4-price .seal-line { padding: 14px 18px !important; }
  .v4-price .seal-line::before, .v4-price .seal-line::after { display: none !important; }
  .v4-price .ctas { flex-direction: column !important; gap: 10px !important; width: 100%; }
  .v4-price .ctas .p, .v4-price .ctas .s { text-align: center; padding: 16px 24px !important; }
  /* footnote rows: avoid trailing ledger crush */
  .v4-chapter .footnote { flex-wrap: wrap !important; gap: 8px 12px !important; }
  /* roman numeral chapter folio: tame at small viewports */
  .v4-chapter .ind .num { font-size: 88px !important; }
  /* chapter padding sanity (overrides Round 1's 72px top/bot, brings closer) */
  .v4-chapter { gap: 32px !important; padding: 64px 20px !important; }
  /* korean line-break guardrail in long captions */
  .v4-chapter .cap .desc, .v4-chapter .cap .prod-line,
  .v4-i .form .ritual .ack .t,
  .v4-i .reading-note .text { word-break: keep-all; }
}

/* === v5.css === */
/* === Round 2: v5 — Send a Color === */
/* HTML uses .v5-s3 .paths / .path.A / .path.B (NOT .v5-paths).
   Round 1 + common Round 2 target .v5-paths which has no match.
   Override with the actual selector chain. */

@media (max-width: 768px) {

  /* ---------- S3 PATH A / PATH B: 2-col → 1-col full width ---------- */
  .v5-s3 { padding: 80px 20px !important; }
  .v5-s3 .hd { padding: 0 !important; }
  .v5-s3 .paths {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    padding-top: 16px !important;
  }
  .v5-s3 .paths > .path,
  .v5-s3 .path.A,
  .v5-s3 .path.B {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* phd header padding shrink so card breathes on 360 viewport */
  .v5-s3 .path .phd {
    padding: 24px 20px !important;
    gap: 12px !important;
  }
  .v5-s3 .path .phd .h { font-size: 19px !important; line-height: 1.35 !important; }
  .v5-s3 .path .phd .desc { font-size: 13px !important; line-height: 1.7 !important; }
  .v5-s3 .path.B .phd .b-premium { font-size: 12.5px !important; line-height: 1.6 !important; }
  .v5-s3 .path.B .phd .b-privacy {
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* ---------- nested step list: each step = full-width row,
     num inline-left + txt block right (NO vertical char crush) ---------- */
  .v5-s3 .path .steps {
    padding: 8px 20px 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .v5-s3 .path .step {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .v5-s3 .path .step .num {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 28px !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    line-height: 1.6 !important;
    padding-top: 2px !important;
    white-space: nowrap !important;
  }
  .v5-s3 .path .step .txt {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  .v5-s3 .path .pcta {
    padding: 18px 20px !important;
    font-size: 13.5px !important;
  }

  .v5-s3 .start { padding: 0 !important; }

  /* ---------- S4 in-the-box items: 4-col → 2-col on tablet/mobile ---------- */
  .v5-s4 { padding: 80px 20px !important; gap: 32px !important; }
  .v5-s4 .hd .h { font-size: 24px !important; line-height: 1.35 !important; text-align: center !important; }
  .v5-s4 .items {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding-top: 8px !important;
    width: 100% !important;
  }
  .v5-s4 .it {
    flex: unset !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 20px 16px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }
  .v5-s4 .it .photo { height: 96px !important; }
  .v5-s4 .it .name { font-size: 12.5px !important; }
  .v5-s4 .it .desc { font-size: 11px !important; line-height: 1.6 !important; }

  /* ---------- S6 privacy: side-by-side .l/.r → stack;
     .row .a / .b already column inside but force full width ---------- */
  .v5-s6 {
    padding: 80px 20px !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  .v5-s6 .l, .v5-s6 .r {
    flex: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .v5-s6 .l .h { font-size: 24px !important; line-height: 1.4 !important; }
  .v5-s6 .r .row .a { font-size: 13.5px !important; line-height: 1.55 !important; }
  .v5-s6 .r .row .b { font-size: 12.5px !important; line-height: 1.7 !important; }

  /* ---------- S7 send & deliver: kill 780px hard widths ---------- */
  .v5-s7 { padding: 80px 20px !important; gap: 24px !important; }
  .v5-s7 .num {
    font-size: 56px !important;
    letter-spacing: -1px !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }
  .v5-s7 .desc { font-size: 13px !important; text-align: center !important; line-height: 1.6 !important; }

  /* delv rows: lab + val side by side stays readable; if too tight stack */
  .v5-s7 .delv {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 0 0 !important;
  }
  .v5-s7 .delv .row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 14px 0 !important;
  }
  .v5-s7 .delv .row .lab { font-size: 11px !important; }
  .v5-s7 .delv .row .val { font-size: 13px !important; line-height: 1.55 !important; }

  /* packing list: 780px → full width */
  .v5-packing {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .v5-packing .hd {
    padding: 14px 16px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .v5-packing .hd .l { font-size: 10px !important; letter-spacing: 2px !important; }
  .v5-packing .hd .r { font-size: 9px !important; letter-spacing: 1.5px !important; }
  .v5-packing .row {
    padding: 12px 16px !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .v5-packing .row .b { font-size: 13px !important; flex: 0 0 auto !important; padding-top: 1px !important; }
  .v5-packing .row .t {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  /* size-flow: side-by-side cols → stack */
  .v5-size-flow {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }
  .v5-size-flow .col {
    flex: unset !important;
    width: 100% !important;
    padding: 18px 18px !important;
  }
  .v5-size-flow .col:last-child {
    border-left: none !important;
    border-top: 1px solid var(--ink-line) !important;
  }
  .v5-size-flow .col .desc { font-size: 12.5px !important; line-height: 1.7 !important; }

  .v5-s7 .ready {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }
  .v5-s7 .ready span { font-size: 9.5px !important; letter-spacing: 1.5px !important; }
  .v5-s7 .ctas {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .v5-s7 .ctas a {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ---------- DISPATCH CHECK rows: num+lab+val on one row crowded ---------- */
  .v5-disp { padding: 64px 20px !important; gap: 24px !important; }
  .v5-disp .hd .l .h { font-size: 18px !important; line-height: 1.4 !important; }
  .v5-disp .row {
    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 4px 12px !important;
    align-items: start !important;
    padding: 14px 0 !important;
  }
  .v5-disp .row .num {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
    font-size: 11px !important;
    padding-top: 2px !important;
  }
  .v5-disp .row .lab {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    font-size: 10.5px !important;
    letter-spacing: 2.5px !important;
  }
  .v5-disp .row .val {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
  .v5-disp .fn {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* ---------- HERO envelope: 620px → full width, scale interior ---------- */
  .v5-hero { gap: 36px !important; }
  .v5-hero .l { width: 100% !important; padding: 0 !important; gap: 20px !important; }
  .v5-hero .l .h1 { font-size: 32px !important; letter-spacing: -0.5px !important; line-height: 1.3 !important; }
  .v5-hero .l .sub { font-size: 13.5px !important; line-height: 1.8 !important; }
  .v5-hero .l .meta { flex-wrap: wrap !important; gap: 10px 14px !important; }
  .v5-hero .l .ctas {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .v5-hero .l .ctas .p { padding: 14px 22px !important; font-size: 14px !important; flex: 1 1 auto !important; text-align: center !important; }
  .v5-hero .l .ctas .pc { padding: 14px !important; font-size: 12px !important; }
  .v5-hero .r { width: 100% !important; align-items: center !important; }
  .v5-env-wrap { width: 100% !important; max-width: 100% !important; transform: rotate(0.5deg) !important; }
  .v5-envelope { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  .v5-envelope .env-hdr { padding: 16px 18px !important; flex-wrap: wrap !important; gap: 8px !important; }
  .v5-envelope .env-hdr .l .h { font-size: 10px !important; letter-spacing: 2px !important; }
  .v5-envelope .env-hdr .l .s { font-size: 9px !important; }
  .v5-envelope .env-hdr .stamp { width: 44px !important; height: 44px !important; }
  .v5-envelope .env-hdr .stamp span { font-size: 20px !important; }
  .v5-envelope .tofrom { padding: 18px 18px 16px !important; gap: 12px !important; }
  .v5-envelope .tofrom .row .lab { font-size: 12px !important; }
  .v5-envelope .tofrom .row .line span { font-size: 12px !important; }
  .v5-envelope .content { padding: 18px 18px 24px !important; gap: 10px !important; }
  .v5-envelope .content .chips { flex-wrap: wrap !important; gap: 8px !important; }

  /* ---------- FAQ already covered by common .l/.r stacker; tighten ---------- */
  .v5-faq { padding: 80px 20px !important; }
  .v5-faq .l .t { font-size: 24px !important; line-height: 1.4 !important; }
  .v5-faq .q .qq { font-size: 14px !important; line-height: 1.55 !important; }
  .v5-faq .q .aa { font-size: 13px !important; line-height: 1.7 !important; }

  /* ---------- FINAL ---------- */
  .v5-final { padding: 80px 20px !important; gap: 24px !important; }
  .v5-final .h { font-size: 64px !important; letter-spacing: 14px !important; }
  .v5-final .sub { font-size: 15px !important; text-align: center !important; }
  .v5-final .ctas { flex-direction: column !important; width: 100% !important; gap: 10px !important; }
  .v5-final .ctas a { width: 100% !important; text-align: center !important; box-sizing: border-box !important; }
}

@media (max-width: 480px) {
  /* phd label may overflow at 360 — allow wrap */
  .v5-s3 .path .phd .lab {
    white-space: normal !important;
    line-height: 1.5 !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }
  .v5-s3 .path .phd .h { font-size: 17.5px !important; }
  .v5-s4 .it .photo { height: 84px !important; }
  .v5-s7 .num { font-size: 48px !important; }
  .v5-final .h { font-size: 52px !important; letter-spacing: 10px !important; }
  /* envelope chips wrap tighter */
  .v5-envelope .content .chips span { padding: 6px 10px !important; font-size: 11px !important; }
}

/* === v6.css === */
/* === Round 2: v6 — Empty Seat ===
   actual classes differ from generic common policy (v6-fit-grid/v6-payment-grid don't exist)
   real names: .v6-fit .sizes / .v6-cond .grid / .v6-info .r / .v6-price-rows .row
   mental model = empty seat field-notes: NO heavy backgrounds on FIT cards, keep dl-row flavor
*/
@media (max-width: 768px) {

  /* ---------- FIT FOR DAILY WEAR (one-card statement, mobile polish) ---------- */
  .v6-fit .one-card { width: 100% !important; padding: 28px 22px !important; box-sizing: border-box !important; }
  .v6-fit-photo { width: 100% !important; margin-top: 24px !important; }

  /* ---------- CONDITIONS OF THE SEAT (4 col → 1 col dl-style) ----------
     desktop grid with vertical dividers; mobile: stacked rows label-on-top, body below */
  .v6-cond .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    border-top: 1px solid var(--ink-line, rgba(0,0,0,0.12)) !important;
  }
  .v6-cond .grid .col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ink-line, rgba(0,0,0,0.12)) !important;
    padding: 18px 0 !important;
    text-align: left !important;
  }
  .v6-cond .grid .col .idx { display: inline-block !important; margin-right: 10px !important; opacity: 0.62 !important; }
  .v6-cond .grid .col .lab { display: inline-block !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; }
  .v6-cond .grid .col .body { display: block !important; margin-top: 8px !important; font-size: 14.5px !important; line-height: 1.6 !important; }
  .v6-cond .grid .col .body strong { display: block !important; margin-bottom: 4px !important; }
  .v6-cond .grid .col ul { margin: 8px 0 0 !important; padding: 0 !important; list-style: none !important; }
  .v6-cond .grid .col ul li { padding-left: 14px !important; line-height: 1.7 !important; min-width: 0 !important; }

  /* ---------- SEAT INFORMATION rows (.v6-info .r .row) ----------
     desktop is dl-style already but uses grid columns — collapse to single column,
     order: idx → lab → val → note                                                */
  .v6-info .r .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px 0 !important;
    text-align: left !important;
  }
  .v6-info .r .row .idx { order: -1; opacity: 0.62 !important; font-size: 11px !important; letter-spacing: 2px !important; }
  .v6-info .r .row .lab { font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; opacity: 0.72 !important; }
  .v6-info .r .row .val { font-size: 14.5px !important; line-height: 1.55 !important; white-space: normal !important; min-width: 0 !important; }
  .v6-info .r .row .val .note { display: block !important; margin-top: 6px !important; font-size: 12.5px !important; opacity: 0.7 !important; line-height: 1.55 !important; }

  /* ---------- price rows (₩138,000 · 단일가 wrap fix) ----------
     common axis 3 stacks .v6-price-rows .row, but ensure label-above-value here too
     and prevent num/suffix split mid-line.                                       */
  .v6-price-rows .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 12px 0 !important;
    align-items: start !important;
  }
  .v6-price-rows .row .lab { font-size: 11px !important; letter-spacing: 2px !important; opacity: 0.72 !important; }
  .v6-price-rows .row .val { font-size: 14.5px !important; line-height: 1.55 !important; white-space: normal !important; min-width: 0 !important; word-break: keep-all; }
  /* hero/price headline number nowrap */
  .v6-price .hd .num { white-space: nowrap !important; font-variant-numeric: tabular-nums !important; }
  .v6-price .hd { gap: 6px !important; }

  /* ---------- price seats five-marker overflow guard ----------
     5 dots + 4 connector lines can overflow at 360px — allow shrink + smaller line */
  .v6-price-seats { width: 100% !important; max-width: 100% !important; gap: 8px !important; }
  .v6-price-seats .ps-line { flex: 1 1 0 !important; min-width: 6px !important; }
  .v6-price-seats .ps { min-width: 0 !important; }

  /* ---------- seat-row top chart — keep dot indicator from being pushed off ---------- */
  .v6-seat-row { min-width: 0 !important; padding-right: 16px !important; }
  .v6-seat-row .seat-line { min-width: 12px !important; }
  .v6-seat-row .seat-tag { width: auto !important; min-width: 0 !important; white-space: nowrap !important; flex-shrink: 0 !important; }
  .v6-seat-row .seat-dot { flex-shrink: 0 !important; }
  /* mobile: tone down the empty-seat shadow ring so it doesn't visually merge into the active-row fill bar */
  .v6-hero.seated .v6-seat-row.empty .seat-dot { box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.06) !important; }

  /* ---------- FAQ trailing whitespace ----------
     Phase A note: large empty area below FAQ section before footer.
     v6-faq is the last section; trim its bottom padding so the gap to footer is normal. */
  .v6-faq { padding-bottom: 32px !important; }
  .v6-faq + .footer { margin-top: 0 !important; }
  /* and make FAQ Q rows breathe, not pad-out */
  .v6-faq .q { padding: 18px 0 !important; }

  /* ---------- safety: any descendant min-width:0 to kill intrinsic crush ---------- */
  .v6-fit *, .v6-cond *, .v6-info *, .v6-price * { min-width: 0; }
}

/* === v7.css === */
/* === Round 2: v7 — Three Movements (surgical polish) === */
@media (max-width: 768px) {
  /* common.css line 1552 sets `flex-direction: column` on .v7-prog .row,
     but that selector is a CSS grid (3×1fr) — flex props are inert on it.
     Force the grid itself to 1 column so the three cells truly stack. */
  .v7-prog .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  /* Fixed 220px height + 32px padding looks oversized on 360px; let cells
     size to content with comfortable breathing room. */
  .v7-prog .cell {
    height: auto !important;
    min-height: 180px !important;
    padding: 22px 20px !important;
    gap: 14px !important;
  }
  .v7-prog .hd .t { font-size: 22px !important; line-height: 1.5 !important; }
  .v7-prog .cell .verb { font-size: 19px !important; }
  .v7-prog .cell .pdot { width: 64px !important; height: 64px !important; }
}

/* === v8.css === */
/* === Round 2: v8 — Reader of Grain ===
   Appendix-heavy field-note variant. Common policy targets .v8-size-grid
   /.v8-app-table /.v8-payment-grid which don't exist on this page —
   actual classes are .v8-meas-tbl, .v8-obj-card, .v8-trans, .v8-terms,
   .v8-price-set. Residuals below are the per-variant truth.
*/
@media (max-width: 768px) {

  /* ---- Hero photo card: trim height, keep tag legible ---- */
  .v8-bracelet-frame { height: 320px !important; }
  .v8-bracelet-meta {
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
  }

  /* ---- Pricing: number + set + CTA stay inside viewport ---- */
  .v8-price .num {
    font-size: 48px !important;
    letter-spacing: -1px !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }
  .v8-price-set {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .v8-price-set .item {
    padding: 12px 16px !important;
    font-size: 10.5px !important;
    letter-spacing: 1.5px !important;
    text-align: center !important;
  }
  .v8-price-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .v8-price-cta .p, .v8-price-cta .s {
    text-align: center !important;
    padding: 16px 24px !important;
  }

  /* ---- APPENDIX I — 관찰 대상 (.v8-obj-card)
         lab/val flex row with right-aligned val gets squeezed at 360px.
         Stack: lab as small mono eyebrow, val below as serif body. ---- */
  .v8-obj-card { padding: 22px 20px !important; }
  .v8-obj-card .row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 12px 0 !important;
  }
  .v8-obj-card .row .lab {
    width: 100% !important;
    flex: none !important;
  }
  .v8-obj-card .row .val {
    width: 100% !important;
    flex: none !important;
    text-align: left !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }

  /* ---- APPENDIX II — ONE SIZE (photo + record row, mobile polish) ---- */
  .v8-onesize-photo { margin: 0 0 14px !important; }
  .v8-one-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px 0 !important;
  }
  .v8-meas-foot {
    font-size: 10px !important;
    line-height: 1.55 !important;
  }

  /* ---- APPENDIX III — 옮겨지는 경로 (.v8-trans)
         lab(130px) + body flex → stack. ---- */
  .v8-trans { max-width: 100% !important; }
  .v8-trans .block {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 18px 0 !important;
  }
  .v8-trans .block .lab {
    width: 100% !important;
    flex: none !important;
    padding-top: 0 !important;
  }
  .v8-trans .block .body { width: 100% !important; }
  .v8-trans .block .body .main {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }
  .v8-trans .block .body .sub {
    font-size: 10.5px !important;
    letter-spacing: 1px !important;
    line-height: 1.55 !important;
  }

  /* ---- APPENDIX IV — 결제·교환·문의 (.v8-terms)
         same lab(130) + body pattern. ---- */
  .v8-terms { max-width: 100% !important; }
  .v8-terms .item {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 18px 0 !important;
  }
  .v8-terms .item .lab {
    width: 100% !important;
    flex: none !important;
    padding-top: 0 !important;
  }
  .v8-terms .item .body {
    width: 100% !important;
    font-size: 13.5px !important;
    line-height: 1.75 !important;
  }
  .v8-terms .item .body .mono {
    font-size: 11px !important;
    word-break: break-word !important;
  }
  .v8-terms-disc {
    padding: 18px 18px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* ---- APPENDIX V — FAQ (.v8-faq .q)
         .qq has fixed 88px nt + question; .aa has padding-left:102px.
         At 360px both cripple readability. Stack note above question,
         reset answer indent. ---- */
  .v8-faq .q .qq {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }
  .v8-faq .q .qq .nt {
    width: auto !important;
    flex: none !important;
  }
  .v8-faq .q .aa {
    padding-left: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.75 !important;
  }

  /* ---- APPENDIX (operator) — already collapsed by common.css l.1580.
         Just tighten label/value typography for narrow column. ---- */
  .v8-appendix { padding: 40px 20px !important; }
  .v8-appendix .grid { gap: 18px !important; }

  /* ---- Final mark: huge letter-spacing on 彩運 pushes wider than 360. */
  .v8-final .hanja {
    font-size: 44px !important;
    letter-spacing: 10px !important;
  }
  .v8-final .closing {
    font-size: 15px !important;
    text-align: center !important;
    line-height: 1.6 !important;
  }

  /* ---- Field-note section padding (4 .v8-note sections + alt) ---- */
  .v8-note { padding: 40px 20px !important; gap: 24px !important; }
  .v8-note-l { width: 100% !important; padding-top: 0 !important; }
  .v8-note-l .h { font-size: 22px !important; }
  .v8-note-r { width: 100% !important; }

  /* ---- Generic min-width:0 on appendix descendants prevents
         intrinsic-min-content right-edge bleed. ---- */
  .v8-obj-card *, .v8-trans *, .v8-terms *, .v8-faq * {
    min-width: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .v8-price .num { font-size: 42px !important; }
  .v8-final .hanja { font-size: 38px !important; letter-spacing: 8px !important; }
  .v8-bracelet-frame { height: 280px !important; }
}

/* === ROUND 2 CLEANUP — residual sub-grid fixes (post-agent) === */
@media (max-width: 768px) {
  /* v1 — Five-color ohaeng row + gift paths nested 2-col crush */
  .v1-s5 .grid { flex-direction: column !important; gap: 1px !important; padding-top: 8px !important; }
  .v1-s5 .col { flex: 1 1 auto !important; flex-direction: row !important; align-items: center !important; gap: 18px !important; padding: 18px 20px !important; }
  .v1-s5 .col .dot { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; }
  .v1-s5 .col .h { font-size: 24px !important; flex: 0 0 auto !important; min-width: 32px !important; }
  .v1-s5 .col .lab { flex: 0 0 auto !important; min-width: 64px !important; }
  .v1-s5 .col .desc { flex: 1 1 auto !important; min-width: 0 !important; white-space: normal !important; font-size: 12px !important; line-height: 1.6 !important; }
  .v1-s5 .grid:hover .col, .v1-s5 .grid .col:hover { opacity: 1 !important; transform: none !important; }
  /* v1-s6 right column inner stack (path A/B full width) */
  .v1-s6 .r { display: flex !important; flex-direction: column !important; gap: 14px !important; width: 100% !important; }
  .v1-s6 .r .gp { width: 100% !important; max-width: 100% !important; padding: 18px 20px !important; min-width: 0 !important; }
  .v1-s6 .r .gp .desc { white-space: normal !important; word-break: keep-all; line-height: 1.6 !important; }

  /* v6 price rows — ensure each .row is full width 1-col, value wraps after label */
  .v6-price-rows .row { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; width: 100% !important; padding: 10px 0 !important; border-top: 1px solid var(--ink-line, rgba(0,0,0,0.08)) !important; }

  /* v7 — note grid (PAYMENT/SIZE/EXCHANGE/CARE&CS) 4-col → 1-col stacked rows */
  .v7-note .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .v7-note .grid .col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 0 !important;
    border-top: 1px solid var(--ink-line, rgba(0,0,0,0.08)) !important;
    border-right: none !important;
  }
  .v7-note .grid .col .top { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 6px !important; }
  .v7-note .grid .col .lab { font-size: 10px !important; letter-spacing: 3px !important; }
  .v7-note .grid .col .h { font-size: 16px !important; margin-bottom: 6px !important; }
  .v7-note .grid .col .body { display: flex !important; flex-direction: column !important; gap: 4px !important; }
  .v7-note .grid .col .body .row { font-size: 13px !important; line-height: 1.6 !important; word-break: keep-all; }
}

/* === v9.css === */
/* === Round 2: v9 — Quiet Orbit ===
   Mental model: 5 orbiting positions in one consistent system.
   Mobile decision: stack each pillar vertically (ix → body → arc).
   All 5 pillars read identically; arc visualization preserved
   (just placed below the body instead of right of it) so the
   "Quiet Orbit" metaphor survives at 360px.
   Common policy already handles: page overflow-x clip, svg max-width 100%,
   .v9-cond/.v9-spec dl-transform, .v9-pillars stack (no-op here, container
   is .v9-reading-r in markup), price guardrail. */

@media (max-width: 768px) {

  /* --- pillar row container: stack ix → body → arc, 1-col, full width --- */
  .v9-reading-r .v9-pillar,
  .v9-pillar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 22px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .v9-pillar > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
  }

  /* --- ix label: kept compact at top (PILLAR · 0N) --- */
  .v9-pillar .ix {
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
    color: var(--ink-faint) !important;
    display: block !important;
  }

  /* --- body: hanja + romaji on one baseline; ko line wraps naturally --- */
  .v9-pillar .body {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .v9-pillar .body .glyph {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 8px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .v9-pillar .body .glyph .han {
    font-size: 22px !important;
    line-height: 1.25 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    display: inline !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .v9-pillar .body .glyph .romaji {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  .v9-pillar .body .ko {
    font-size: 13px !important;
    line-height: 1.7 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* --- arc: full-width container, svg capped at 240, orbit metaphor preserved --- */
  .v9-pillar .arc {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
    margin-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    transform: none !important;
    right: auto !important;
    left: auto !important;
    overflow: visible !important;
  }
  .v9-pillar .arc svg {
    width: 100% !important;
    max-width: 240px !important;
    height: 56px !important;
    display: block !important;
    transform: none !important;
  }
  /* pos label was absolutely positioned at right:0 of a 200px box;
     now it sits at right edge of the constrained arc track */
  .v9-pillar .arc .pos {
    position: absolute !important;
    right: auto !important;
    left: calc(min(100%, 240px) + 8px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    background: var(--paper) !important;
    padding: 0 4px !important;
    white-space: nowrap !important;
    max-width: calc(100vw - 240px - 60px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* --- hero orbit map: re-affirm Round 1 containment (defensive) --- */
  .v9-orbit-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .v9-orbit-svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* --- 480px: tighten arc + drop pos label inline below to avoid clipping --- */
@media (max-width: 480px) {
  .v9-pillar { padding: 20px 0 !important; gap: 8px !important; }
  .v9-pillar .body .glyph .han { font-size: 20px !important; }
  .v9-pillar .arc { height: 48px !important; }
  .v9-pillar .arc svg { max-width: 100% !important; height: 48px !important; }
  /* on 360px the absolute-right pos label has no room — pull it under arc */
  .v9-pillar .arc .pos {
    position: static !important;
    transform: none !important;
    display: block !important;
    margin-top: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    max-width: 100% !important;
    text-align: left !important;
  }
  .v9-pillar .arc {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
  }
}


/* ============================================================
   ROUND 3 SURGICAL PASS (post-Hermes Phase C iter 1 [CONTINUE])
   - v6 price-rows clipping (inline width:760 still escaping)
   - v9 .v9-cond .rows .r cond grid 1col guard at 480
   - v8 .v8-appendix .grid 3-col → 1col mobile
   ============================================================ */
@media (max-width: 768px) {
  /* v6 — release-blocker: price-rows still 760 due to inline width */
  .v6-price-rows {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-top: 12px !important;
  }
  .v6-price-rows .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px 0 !important;
  }
  .v6-price-rows .lab,
  .v6-price-rows .val {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
  }
  .v6-price-rows .lab { font-size: 11px !important; letter-spacing: 2.5px !important; opacity: 0.65 !important; }
  .v6-price-rows .val { font-size: 14px !important; line-height: 1.55 !important; }
  .v6-price-cta { flex-direction: column !important; gap: 10px !important; width: 100% !important; }
  .v6-price-cta > * { width: 100% !important; justify-content: center !important; }
  .v6-price * { max-width: 100% !important; min-width: 0 !important; }
  .v6-price .hd .num { font-size: clamp(40px, 12vw, 56px) !important; white-space: nowrap !important; }

  /* v9 — bottom CONDITION rows: 130px label col fine at 390, but at 360 the val gets squeezed */
  .v9-cond .rows .r {
    grid-template-columns: 96px 1fr !important;
    gap: 12px !important;
    column-gap: 12px !important;
  }
  .v9-cond .rows .r .lab { min-width: 0 !important; word-break: keep-all; }
  .v9-cond .rows .r .val { min-width: 0 !important; overflow-wrap: anywhere !important; word-break: keep-all; line-height: 1.65 !important; }

  /* v8 — appendix operator 3-col → 1col */
  .v8-appendix .grid {
    grid-template-columns: 1fr !important;
    gap: 14px 0 !important;
    width: 100% !important;
  }
  .v8-appendix .grid .cell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px 0 !important;
    border-top: 1px solid var(--ink-line, rgba(0,0,0,0.08)) !important;
  }
  .v8-appendix .grid .cell .val,
  .v8-appendix .grid .cell .val .kr {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: keep-all;
  }
}

@media (max-width: 480px) {
  /* v9 cond rows: at 360 fully stack label-above-value */
  .v9-cond .rows .r {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .v9-cond .rows .r .lab { font-size: 10px !important; }

  /* v6 price headline tighter on smallest */
  .v6-price .hd .num { font-size: 40px !important; }
}

/* === ROUND 3.1 — v9 sticky overlap fix (mobile orbit reading) === */
@media (max-width: 768px) {
  /* desktop: .v9-reading-l is position:sticky top:100px so left header stays
     while right pillars scroll. on mobile the layout is 1col stacked, so
     the sticky behavior makes the header overlap pillars during scroll. */
  .v9-reading-l { position: static !important; top: auto !important; }
  /* same defensive guard for any other v9 sticky positioning */
  .v9-cond .label, .v9-specimen-plate .label { position: static !important; top: auto !important; }
}

/* ============================================================
   ROUND 3.2 — Phase A v3 [CONVERGE] global mobile guards
   - body::before grain z-index 9999→1, no mix-blend-mode (mobile compositor stress)
   - v4 .nav.dark sticky → static on mobile (avoid v9-style overlap)
   - prefers-reduced-motion: reduce → kill data-quiet transforms
   ============================================================ */
@media (max-width: 768px) {
  /* grain: keep texture, drop GPU stress */
  body::before {
    z-index: 1 !important;
    mix-blend-mode: normal !important;
    opacity: 0.3 !important;
  }

  /* v4 dark nav: same overlap risk as v9 sticky on mobile 1col */
  .nav.dark { position: static !important; top: auto !important; backdrop-filter: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* data-quiet IntersectionObserver animations: kill transforms + transition delays */
  [data-quiet] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   ROUND 3.3 — Phase B-2 precision audit follow-up
   - v9 .v9-policy 4-col → 1-col stack (missed in R3.1)
   - touch target ≥ 48px width on nav links + chapter folios
   ============================================================ */
@media (max-width: 768px) {
  /* v9 policy block (PAYMENT/DISPATCH/EXCHANGE/CS) */
  .v9-policy {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .v9-policy .col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--ink-line, rgba(0,0,0,0.08)) !important;
  }
  .v9-policy .col .lab { font-size: 10.5px !important; letter-spacing: 3px !important; opacity: 0.6 !important; display: block !important; margin-bottom: 4px !important; }
  .v9-policy .col .h { font-size: 14.5px !important; display: block !important; margin-bottom: 4px !important; }
  .v9-policy .col .d { font-size: 12.5px !important; line-height: 1.6 !important; word-break: keep-all; overflow-wrap: anywhere; display: block !important; }

  /* touch targets — nav links: extend hit area without changing visual size */
  .nav-links a, .nav .nav-links a {
    min-width: 48px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6px !important;
  }
  /* v4 chapter folio quick-jump links (Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ) */
  .v1-nav-q a, .v4-chapter-nav a, .nav .chapters a, [class*="chapter-nav"] a {
    min-width: 48px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}