/* =========================================================
   HERSHE Body Filler — Draft 1
   Opening typography → video hero → information → treatment-area tour
   ========================================================= */
:root {
  /* colour */
  --ivory: #f8f6f2;
  --ivory-deep: #efeae3;
  --purple: #4b1b5f;          /* headings, accents */
  --purple-deep: #4a185c;     /* approach section */
  --ink: #2a2329;
  --text: #6f6870;
  --muted: #8d858b;
  --line: #dcd5d4;
  --line-inv: rgba(255, 255, 255, .28);
  --white: #fff;
  --portal: #2f1039;          /* the dark inside of the opening "o" */

  /* type */
  --serif: "Cardo", "Times New Roman", serif;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* spacing */
  --gutter: clamp(20px, 5vw, 76px);
  --container: 1120px;
  --section-y: clamp(96px, 15vh, 168px);
  --space-s: 12px;
  --space-m: 24px;
  --space-l: clamp(40px, 6vw, 72px);

  /* motion */
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* hero video framing (object-position x) — tune to the final video */
  --video-x: 60%;
  --video-x-mobile: 74%;

  /* treatment-area tour palette (original names, remapped to the new colours) */
  --plum: var(--purple);
  --dot: #3a1449;
  --rose: #a07f9c;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--purple); outline-offset: 4px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.eyebrow { margin: 0; font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: .01em; }

/* =========================================================
   1. Opening
   ========================================================= */
.opening {
  position: fixed; inset: 0; z-index: 100;
  overflow: hidden;
  transition: opacity 1s var(--ease-soft);
}
.opening[hidden] { display: none; }
/* JS zooms by shrinking the viewBox around the centre of the chosen "o" */
.opening__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
.opening__base,
.opening__veil { fill: var(--ivory); }
.opening__tint { fill: var(--portal); opacity: 0; }
.opening__word {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.6vw, 84px); letter-spacing: .005em;
  fill: var(--portal);
  opacity: 0;
  transform: translateY(18px);
  /* ≈ 2/3 of V1's durations; the JS timers in index-v4.html are matched to these
     (the portal starts near the end of the "in" rise of "Proportion." and its hole follows the word until it settles) */
  transition: opacity 1.1s var(--ease-soft), transform 1.35s var(--ease-soft);
}
.opening__word.is-in { opacity: 1; transform: none; }
.opening__word.is-out {
  opacity: 0; transform: translateY(-10px);
  transition-duration: .75s, .95s;
}
/* V3 scroll-to-advance: after a manual step the words change a little faster (JS: inMs = 1000) */
.opening.is-quick .opening__word { transition-duration: .8s, 1s; }
.opening.is-quick .opening__word.is-out { transition-duration: .45s, .6s; }
/* skip, or reduced motion: a plain crossfade instead of the zoom */
.opening.is-fading { opacity: 0; pointer-events: none; }
.opening.is-slow { transition-duration: 2s; }

/* =========================================================
   2. Video hero
   ========================================================= */
.hero {
  position: relative;
  height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden;
  background: var(--ivory-deep);
  color: var(--purple);
}
.hero__media { position: absolute; inset: 0; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;                       /* fills the frame, keeps aspect ratio */
  object-position: var(--video-x) 50%;
  opacity: 0;
  transition: opacity 1.6s var(--ease-soft);
}
.hero.has-video .hero__video { opacity: 1; }
/* soft ivory veil on the text side only, so the title reads on any frame */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(248, 246, 242, .5) 0%, rgba(248, 246, 242, .18) 36%, rgba(248, 246, 242, 0) 54%);
  pointer-events: none;
}
/* shown only when the video file is missing */
.hero.no-video .hero__media::before {
  content: "VIDEO PLACEHOLDER";
  position: absolute; right: var(--gutter); bottom: 50%;
  font-size: 11px; letter-spacing: .32em; color: var(--muted);
}

.hero__copy {
  position: absolute; z-index: 1;
  left: var(--gutter); top: 50%;
  transform: translateY(-46%);
  max-width: 46vw;
}
.hero__kicker {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.2vw, 18px); color: var(--purple);
  opacity: 0;
  transition: opacity 1.4s var(--ease-soft);
}
.hero__title {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(46px, 6.4vw, 104px); line-height: 1.04; letter-spacing: -.005em;
}
.hero__title span {
  display: block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.5s var(--ease-soft), transform 1.9s var(--ease-soft);
  transition-delay: calc(var(--i) * 240ms + 200ms);
}
.hero.is-titled .hero__title span,
.hero.is-titled .hero__kicker { opacity: 1; transform: none; }

.hero__cue {
  position: absolute; z-index: 1;
  left: var(--gutter); bottom: clamp(28px, 5vh, 48px);
  display: flex; align-items: center; gap: 16px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--purple); text-decoration: none;
  opacity: 0;
  transition: opacity 1.6s var(--ease-soft);
}
.hero.is-cued .hero__cue { opacity: .8; }
.hero__cue span {
  position: relative; order: -1;
  width: 1px; height: 56px;
  background: rgba(75, 27, 95, .18);
  overflow: hidden;
}
.hero__cue span::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 1px; height: 20px;
  background: var(--purple);
  animation: cue-line 2.6s var(--ease-soft) infinite;
}
@keyframes cue-line {
  0%   { transform: translateY(-20px); }
  70%  { transform: translateY(56px); }
  100% { transform: translateY(56px); }
}

/* =========================================================
   3. More than volume
   ========================================================= */
.intro { padding: var(--section-y) 0 calc(var(--section-y) * .8); background: var(--ivory); }
.intro__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l) clamp(32px, 6vw, 88px);
  align-items: start;
}
.intro__title {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 5vw, 68px); line-height: 1.05; letter-spacing: -.01em;
  color: var(--purple);
}
.intro__sub { margin: clamp(20px, 2.6vw, 32px) 0 0; font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.intro__body { padding-top: 10px; }
.intro__body .eyebrow { color: var(--purple); }
.intro__h { margin: 14px 0 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.intro__text { margin: 18px 0 0; font-size: 15px; line-height: 2; color: var(--text); word-break: keep-all; }

.facts {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px var(--space-m);
  margin-top: clamp(56px, 8vw, 104px); margin-bottom: 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.facts dt { font-size: 11px; letter-spacing: .02em; color: var(--muted); }
.facts dd { margin: 14px 0 0; font-size: 15px; letter-spacing: -.01em; color: var(--ink); word-break: keep-all; }

/* =========================================================
   4. The HERSHE approach
   ========================================================= */
.approach { padding: var(--section-y) 0; background: var(--purple-deep); color: var(--white); }
.approach__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m) clamp(32px, 6vw, 88px); align-items: start; }
.approach .eyebrow { color: rgba(255, 255, 255, .82); }
.approach__title { margin: 16px 0 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; letter-spacing: -.02em; }
.approach__text { margin: 6px 0 0; font-size: 14px; line-height: 1.95; color: rgba(255, 255, 255, .86); word-break: keep-all; }

.pillars {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: clamp(48px, 6vw, 72px); margin-bottom: 0;
}
.pillars li { padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line-inv); }
.pillars h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.4vw, 60px); line-height: 1.1; letter-spacing: -.005em; }
.pillars p { margin: clamp(18px, 2.2vw, 28px) 0 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: rgba(255, 255, 255, .92); }

/* scroll reveal — the same [data-reveal] system as the 0414 content below the tour (same JS observers,
   same .9s timing, 26px rise and easing: --ease-soft is the same cubic-bezier as 0414's --ease).
   Replays when an element re-enters from either direction; hidden state only once JS runs (html.js). */
.js .intro [data-reveal],
.js .approach [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); transition-delay: var(--d, 0s); }
.js .intro [data-reveal].is-in,
.js .approach [data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================
   5. Treatment areas — ported from ../style.css
      (colours remapped through --plum / --rose / --dot, serif → Cardo,
       side tones → ivory so it joins the sections above)
   ========================================================= */
/* V4: section.lead (not .lead) — the 0414 content below has its own p.lead */
section.lead, .tour__sticky {
  /* white centre so the photos' white backgrounds disappear */
  background: linear-gradient(90deg, var(--ivory) 0%, #fff 26%, #fff 74%, var(--ivory) 100%);
}

/* ---------- lead-in ---------- */
/* V4: sized by its content plus measured padding (was min-height: 92vh), so far less blank space above and below */
section.lead {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(72px, 12vh, 120px) 20px clamp(56px, 9vh, 96px);
}
.lead__kicker { margin: 0 0 18px; font-size: 12px; letter-spacing: .32em; color: var(--rose); font-weight: 600; }
.lead__title {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 7vw, 96px); line-height: 1; letter-spacing: -.01em; color: var(--plum);
}
.lead__ko { margin: 24px 0 0; font-size: clamp(15px, 1.4vw, 18px); color: var(--muted); }
.lead__cue {
  margin: 64px 0 0; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lead__cue span { width: 1px; height: 48px; background: linear-gradient(var(--plum), transparent); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- tour (height is set by JS) ---------- */
.tour { position: relative; height: 1200vh; }
.tour__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}

/* stage / figure */
.stage { position: absolute; inset: 0; }
/* V4: the figure is the shared 900 × 1600 box the HD frames are aligned in. JS sets its px size for the
   current zoom (instead of scale()), so the frames are re-sampled from full resolution — always sharp.
   It stays hidden until all ten frames are decoded. */
.figure {
  position: absolute; left: 0; top: 0;
  width: 900px; height: 1600px;
  transform-origin: 0 0;
  will-change: transform;
  --iz: 1;
  opacity: 0;
  transition: opacity .6s ease;
}
.tour__sticky.is-ready .figure { opacity: 1; }
/* 360° frames are stacked; JS sets the opacity of the one or two frames for the current angle.
   Each frame's box (inline style) has its image's exact aspect ratio, so contain never crops or stretches. */
.frames { position: absolute; inset: 0; }
.frames img {
  position: absolute;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  user-select: none; -webkit-user-drag: none;
}

/* pins live in image space; counter-scaled so they stay the same size on screen */
.pin {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: 0; height: 0;
  transform: scale(var(--iz));
  opacity: var(--vis, 1);       /* fades out when the body turns away from this pin's angle */
}
.pin i {
  position: absolute; left: -5px; top: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 2px rgba(255,255,255,.85);
  opacity: calc(.25 + var(--ov, 1) * .75);
  transition: transform .4s ease, opacity .4s ease;
}
.pin i::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--plum); opacity: 0;
}
.pin.is-active i { transform: scale(1.3); opacity: 1; }
.pin.is-active i::after { animation: ring 2s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }

.pin b {
  position: absolute; top: 0;
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
  font-size: 17px; font-weight: 700; color: var(--plum); letter-spacing: -.01em;
  transform: translateY(-50%);
  opacity: var(--ov, 1);
  transition: opacity .35s ease;
  pointer-events: none;
}
.pin b::before { content: ""; width: var(--len, 96px); height: 1px; background: var(--plum); opacity: .7; }
.pin--r b { left: 8px; }
.pin--l b { right: 8px; flex-direction: row-reverse; }
.pin.is-active b { opacity: 1; }
.pin.is-active b::before { width: 56px; }

/* ---------- captions ---------- */
.caps {
  position: absolute; z-index: 2;
  left: max(24px, 7vw); top: 50%;
  width: min(380px, 32vw);
  transform: translateY(-50%);
  pointer-events: none;
}
/* V4: quicker, so the copy lands together with a 380 ms step (was .5s / .6s out, .6s / .7s in) */
.cap {
  position: absolute; left: 0; top: 50%; width: 100%;
  opacity: 0; visibility: hidden;
  transform: translateY(calc(-50% + 24px));
  transition: opacity .3s ease, transform .4s var(--ease-out), visibility 0s linear .4s;
}
.cap.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(-50%);
  transition: opacity .4s ease .05s, transform .45s var(--ease-out) .05s, visibility 0s;
}
/* 귀필러 ↔ 쇄골필러: same frame (the model glides down with the camera, as 골반 → 힙딥); the caption takes a short downward glide while
   scrolling down (쇄골 enters from just above, 귀 leaves just below) and the mirror image while scrolling up.
   Every other caption change keeps the original transition. */
.cap--glide[data-id="ear"]:has(~ .cap--glide[data-id="collarbone"].is-active) { transform: translateY(calc(-50% + 12px)); }
.cap--glide[data-id="ear"].is-active ~ .cap--glide[data-id="collarbone"] { transform: translateY(calc(-50% - 12px)); }

.cap__circle {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  margin-bottom: 28px;
  box-shadow: 0 0 0 1px var(--line), 0 12px 30px -12px rgba(75,27,95,.35);
}
/* empty slot for a circle image still to come: same size, ring and shadow, no image */
.cap__circle--empty { display: block; background: #fbf8f7; }
.cap__idx { margin: 0 0 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cap__idx b { color: var(--plum); font-weight: 700; }
.cap__title {
  margin: 0; font-size: clamp(40px, 4.6vw, 68px); line-height: 1.08; font-weight: 800;
  letter-spacing: -.035em; color: var(--ink);
}
.cap__en { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.9vw, 26px); color: var(--rose); }
.cap__desc { margin: 22px 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: #5c4a58; word-break: keep-all; }
.cap__tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cap__tags li { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.7); color: var(--plum); }
.cap__link {
  display: inline-flex; gap: 6px; margin-top: 26px;
  font-size: 14px; font-weight: 600; color: var(--plum); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.cap__link:hover { color: var(--rose); }
.cap--intro .cap__title { font-size: clamp(36px, 3.8vw, 56px); }

/* ---------- rail ---------- */
.rail {
  position: absolute; z-index: 3;
  right: max(20px, 3.4vw); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
}
.rail button {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted);
}
.rail button::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #d8cdd6; transition: transform .3s ease, background .3s ease;
}
.rail button span { opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease; }
.rail button:hover span,
.rail button.is-active span { opacity: 1; transform: none; }
.rail button.is-active { color: var(--plum); font-weight: 700; }
.rail button.is-active::after { background: var(--plum); transform: scale(1.5); }

/* ---------- small extras ---------- */
.script {
  position: absolute; z-index: 1;
  right: 6vw; bottom: 6vh;
  width: min(380px, 30vw); height: auto;
  opacity: var(--end, 0);
  transform: translateY(calc((1 - var(--end, 0)) * 20px));
  pointer-events: none;
}
.tour__view {
  position: absolute; z-index: 2; left: 50%; bottom: 26px; margin: 0;
  transform: translateX(-50%);
  display: flex; gap: 18px;
  font-size: 11px; letter-spacing: .3em; color: #c9bcc6;
  opacity: calc(1 - var(--ov, 1));
  transition: opacity .3s;
}
.tour__view span { transition: color .4s ease; }
.tour__sticky[data-view="front"] .tour__view [data-view="front"],
.tour__sticky[data-view="side"] .tour__view [data-view="side"],
.tour__sticky[data-view="back"] .tour__view [data-view="back"] { color: var(--plum); }
.tour__deg { min-width: 3.5em; font-weight: 600; color: var(--rose); font-variant-numeric: tabular-nums; }

/* "전체 시술 부위 보기" — quiet text control, lower right, only while the tour is pinned */
.tour__skip {
  position: absolute; z-index: 4;
  right: max(20px, 3.4vw); bottom: 18px;
  padding: 6px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: .04em; color: var(--plum);
  border-bottom: 1px solid currentColor;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.tour__sticky.is-pinned .tour__skip { opacity: .42; visibility: visible; transition: opacity .4s ease, visibility 0s; }
.tour__sticky.is-pinned .tour__skip:hover,
.tour__sticky.is-pinned .tour__skip:focus-visible { opacity: .85; }
.tour__skip:focus-visible { outline: 1px solid var(--plum); outline-offset: 4px; }
/* the jump itself happens behind a very short fade, so no in-between area flashes by */
.tour__sticky .stage, .tour__sticky .caps { transition: opacity .35s ease; }
.tour__sticky.is-skipping .stage, .tour__sticky.is-skipping .caps { opacity: 0; transition-duration: .2s; }

/* (V3's short "Find your contour" lead-out is replaced in V4 by the full 0414 section — see the end of this file) */

/* =========================================================
   Responsive — two modes: desktop (above 820px) and one fluid compact layout (820px and below,
   the COMPACT / MOBILE block at the end of this file). The width-ranged blocks before it only
   refine desktop between 821px and 1280px and never reach compact.
   (820.02px, not 821px: no gap between the two modes at fractional, zoomed widths)
   ========================================================= */
@media (min-width: 820.02px) and (max-width: 1024px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .hero__copy { max-width: 60vw; }
}

/* portrait screens: a landscape video crops to the model alone, so the title gets its own
   ivory band at the top and the video fills the rest, dissolving upward into that band
   (desktop widths; the compact block overrides all of it) */
@media (max-aspect-ratio: 1/1) {
  .hero { background: var(--ivory); }
  .hero__media {
    top: 40%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
  }
  .hero__media::after { display: none; }
  .hero__video { object-position: var(--video-x-mobile) 50%; }
  .hero__copy { top: calc(72px + 5vh); transform: none; max-width: none; right: var(--gutter); }
  .hero__title { font-size: clamp(40px, 10vw, 80px); }
  .hero__cue { bottom: 13%; }     /* clear of the dress train along the floor */
}

/* =========================================================
   Reduced motion: words only fade, the zoom becomes a crossfade,
   no reveals, no looping cues
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .opening__word { transform: none !important; }
  .hero__video, .hero__kicker, .hero__title span, .hero__cue,
  .intro [data-reveal], .approach [data-reveal] {
    transition: none !important;
  }
  .hero__kicker, .hero__title span,
  .js .intro [data-reveal], .js .approach [data-reveal] { opacity: 1; transform: none; }
  .hero__cue { opacity: .8; }
  .hero__cue span::after, .lead__cue span, .pin.is-active i::after { animation: none; }
  .hero__cue span::after { transform: translateY(18px); }
}


/* =========================================================================================
   6. "FIND YOUR CONTOUR" → END OF PAGE
   Merged from ../../HERSHE Body Filler Prototype/style_0414.css (read-only reference).
   Every rule is the 0414 rule, scoped under .v0414 so its tokens, fonts and base styles stay inside
   that wrapper and the V3 sections above are untouched:
     :root / body  →  .v0414          element resets  →  .v0414 <el>          .js X  →  .js .v0414 X
   Only rules used by the copied sections are included (header, cover, section nav, concept,
   principles, treatment map, footer and their keyframes are not part of the copied content).
   One adaptation: .card__img--crop takes the source size from --iw / --ih (default 1080 × 1350, as in 0414)
   because the cards now crop the HD frames.
   ========================================================================================= */
.v0414 {
  --plum: #4a1962;
  --plum-deep: #3a1150;
  --plum-line: #7a4a8a;
  --ink: #252126;
  --nav-ink: #2e2e2e;
  --muted: #756e74;
  --line: #d7cdd2;
  --lilac-line: #c8bdd4;
  --paper: #f8f7f5;
  --lilac: #eae4ef;
  --placeholder: #f2eeef;
  --case: #523747;
  --white: #fff;

  --serif: 'Lora', 'Noto Serif KR', Georgia, serif;
  --sans: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  --gutter: clamp(16px, 6.667vw, 96px);
  --maxw: 1440px;
  --hd-h: 104px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* 0414 body */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
.v0414 img { max-width: 100%; display: block; }
.v0414 a { color: inherit; text-decoration: none; }
.v0414 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.v0414 :is(p, h1, h2, h3, h4, ul, ol, figure) { margin: 0; padding: 0; }
.v0414 :is(ul, ol) { list-style: none; }
.v0414 :focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }

.v0414 .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Motion ---------- */
/* Hidden state only applies once the page script has started (html.js), so content stays readable without it */
.js .v0414 [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .v0414 [data-reveal].is-in { opacity: 1; transform: none; }
.js .v0414 [data-reveal="fade"] { transform: none; }

@keyframes floatYs { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.v0414 .float-s { animation: floatYs 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .v0414 *, .v0414 *::before, .v0414 *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .v0414 [data-reveal], .js .v0414 [data-reveal] { opacity: 1; transform: none; }
}

.v0414 .crop { position: relative; overflow: hidden; }
.v0414 .crop > img { position: absolute; max-width: none; }

.v0414 .h-editorial { font-family: var(--serif); font-weight: 400; color: var(--plum); font-size: clamp(36px, 3.611vw, 52px); line-height: 1.15; }
.v0414 .h-ko { font-size: clamp(22px, 1.944vw, 28px); font-weight: 500; line-height: 1.5; color: var(--ink); }
.v0414 .lead { font-size: 16px; line-height: 1.9; color: var(--muted); }
.v0414 .sec-head { display: flex; flex-direction: column; gap: 18px; }

/* Treatment discovery */
.v0414 .discovery { background: var(--lilac); }
.v0414 .discovery__in { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 48px; }
.v0414 .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 24px; }
.v0414 .card { display: flex; flex-direction: column; gap: 20px; color: inherit; position: relative; }
.v0414 .card__img { position: relative; overflow: hidden; aspect-ratio: 294 / 280; background: #f1edef; }
.v0414 .card__img > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease); }
/* Crop of the source image: --x / --y = crop origin, --w = crop width (source px); --iw / --ih = source size */
.v0414 .card__img--crop { background: #fff; }
.v0414 .card__img--crop > img {
  width: calc(var(--iw, 1080) / var(--w) * 100%); height: auto; max-width: none; object-fit: fill;
  translate: calc(var(--x) / var(--iw, 1080) * -100%) calc(var(--y) / var(--ih, 1350) * -100%);
  transform-origin: calc(var(--x) / var(--iw, 1080) * 100% + var(--w) / var(--iw, 1080) * 50%) calc(var(--y) / var(--ih, 1350) * 100% + var(--w) / var(--ih, 1350) * 50%);
}
.v0414 .card__info { display: flex; flex-direction: column; gap: 12px; min-height: 210px; }
.v0414 .card__cat { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--muted); letter-spacing: .02em; }
.v0414 .card__cat .soon { font-size: 11px; letter-spacing: 0; }
.v0414 .card__name { font-size: 23px; font-weight: 500; color: var(--plum); line-height: 1.25; }
.v0414 .card__desc { font-size: 14px; line-height: 1.85; color: var(--ink); }
.v0414 .card__focus { font-size: 12px; line-height: 1.8; color: var(--muted); }
.v0414 .card__action { border-top: 1px solid var(--line); padding: 15px 0 8px; font-size: 13px; color: var(--plum); display: flex; justify-content: space-between; align-items: center; transition: border-color .3s var(--ease); }
.v0414 .card__action .arr { display: inline-block; transition: transform .3s var(--ease); }
.v0414 a.card:hover .card__img > img, .v0414 a.card.is-hl .card__img > img { scale: 1.045; }
.v0414 a.card:hover .card__action, .v0414 a.card.is-hl .card__action { border-color: var(--plum); }
.v0414 a.card:hover .card__action .arr { transform: translate(3px, -3px); }
.v0414 a.card::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--plum); transition: right .45s var(--ease); }
.v0414 a.card:hover::after, .v0414 a.card.is-hl::after { right: 0; }
/* V4: treatment point on each card — the tour marker's dot and pulsing ring, nothing else (no label, line or link).
   .card__map repeats the image's crop geometry (same width, offset, origin and hover zoom), so --px / --py are simply
   % of the source frame and the point stays on the anatomy at every card size, crop ratio and on hover.
   Its aspect ratio is the frames' real pixel size: img-v4/A_*.png are 941 × 1672. */
.v0414 .card__map {
  position: absolute; left: 0; top: 0;
  width: calc(var(--iw, 1080) / var(--w) * 100%);
  aspect-ratio: 941 / 1672;
  translate: calc(var(--x) / var(--iw, 1080) * -100%) calc(var(--y) / var(--ih, 1350) * -100%);
  transform-origin: calc(var(--x) / var(--iw, 1080) * 100% + var(--w) / var(--iw, 1080) * 50%) calc(var(--y) / var(--ih, 1350) * 100% + var(--w) / var(--ih, 1350) * 50%);
  transition: scale 1.1s var(--ease);
  pointer-events: none;
}
.v0414 a.card:hover .card__map, .v0414 a.card.is-hl .card__map { scale: 1.045; }
.v0414 .card__pt {
  position: absolute; left: calc(var(--px) * 1%); top: calc(var(--py) * 1%);
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.v0414 .card__pt::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--purple); opacity: 0;
  animation: ring 2s ease-out var(--pd, 0s) infinite;
}
/* a gentle stagger along each row of four; reduced motion: the rule above (animation: none) leaves a static dot */
.v0414 .card:nth-child(4n+2) { --pd: .3s; }
.v0414 .card:nth-child(4n+3) { --pd: .6s; }
.v0414 .card:nth-child(4n) { --pd: .9s; }
.v0414 .card--soon { cursor: default; }
.v0414 .card--soon .card__img > img { filter: saturate(.75); }
.v0414 .card--soon .card__action { color: var(--muted); }

.v0414 .disc-note { font-size: 13px; line-height: 1.8; color: #665d64; text-align: center; }
.v0414 .solution { padding-top: 40px; display: flex; flex-direction: column; gap: 32px; }
.v0414 .solution__title { font-family: var(--serif); font-weight: 400; color: var(--plum); font-size: clamp(28px, 2.5vw, 36px); line-height: 1.3; }
.v0414 .solution__sub { font-size: clamp(19px, 1.736vw, 25px); color: var(--ink); line-height: 1.4; }
.v0414 .dist { border-top: 1px solid var(--line); padding: 24px 0; display: flex; gap: 24px; align-items: center; transition: background-color .3s var(--ease), padding-left .3s var(--ease); }
.v0414 .dist:last-child { border-bottom: 0; }
.v0414 .dist:hover { background: rgba(248, 247, 245, .55); padding-left: 12px; }
.v0414 .dist__no { flex: 0 0 48px; font-family: var(--serif); font-size: 24px; color: var(--plum); }
.v0414 .dist__goal { flex: 0 0 440px; font-size: 17px; line-height: 1.7; color: var(--ink); }
.v0414 .dist__text { flex: 1 1 0; font-size: 14px; line-height: 1.9; color: var(--muted); }

/* Clinical approach */
.v0414 .pro { padding-top: 104px; padding-bottom: 104px; display: flex; flex-direction: column; gap: 48px; }
.v0414 .pro__grid { display: flex; gap: 64px; align-items: flex-start; }
.v0414 .pro__portrait { flex: 0 0 350px; display: flex; flex-direction: column; gap: 18px; }
.v0414 .crop--doc { aspect-ratio: 350 / 300; background: #3a3030; }
.v0414 .crop--doc > img { left: -297.994%; top: -115.998%; width: 546.132%; height: 291.5%; }
.v0414 .pro__cap { font-size: 12px; line-height: 1.8; color: var(--muted); }
.v0414 .pro__phil { font-size: 16px; line-height: 1.9; color: var(--ink); }
.v0414 .timeline { flex: 1 1 0; }
.v0414 .rec { border-top: 1px solid var(--line); padding: 24px 0; display: flex; gap: 28px; transition: padding-left .3s var(--ease); }
.v0414 .rec:hover { padding-left: 8px; }
.v0414 .rec__year { flex: 0 0 140px; font-family: var(--serif); color: var(--plum); font-size: 30px; line-height: 1.25; }
.v0414 .rec__body { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; }
.v0414 .rec__text { font-size: 17px; line-height: 1.7; color: var(--ink); }
.v0414 .rec__src { font-size: 11px; color: var(--muted); }
.v0414 .timeline__note { font-size: 12px; line-height: 1.9; color: var(--muted); }
.v0414 .timeline__note a { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }

.v0414 .process { border-top: 1px solid var(--line); }
.v0414 .process__in { padding-top: 80px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 48px; }
.v0414 .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.v0414 .step { border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.v0414 .step::before { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--plum); transition: width .8s var(--ease); transition-delay: var(--d, 0s); }
.v0414 .step.is-in::before { width: 100%; }
.v0414 .step__no { font-family: var(--serif); font-style: italic; color: var(--plum); font-size: 40px; line-height: 1.28; }
.v0414 .step__title { font-size: 22px; font-weight: 500; color: var(--ink); }
.v0414 .step__text { font-size: 15px; line-height: 1.9; color: var(--muted); }

/* Fill & Fit */
.v0414 .fill { background: var(--lilac); }
.v0414 .fill__in { padding-top: 80px; padding-bottom: 80px; display: flex; flex-direction: column; align-items: center; gap: 48px; text-align: center; }
.v0414 .fill__title { font-family: var(--serif); color: var(--plum); font-size: clamp(56px, 6.389vw, 92px); line-height: 1.1; font-weight: 400; }
.v0414 .fill__text { font-size: clamp(20px, 1.944vw, 28px); line-height: 1.7; color: var(--plum); }
.v0414 .dims { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; border-top: 1px solid var(--lilac-line); padding-top: 28px; }
.v0414 .dim { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.v0414 .dim__word { font-family: var(--serif); color: var(--plum); font-size: 26px; line-height: 1.28; }
.v0414 .dim__text { font-size: 14px; color: var(--muted); }

/* Before & After */
.v0414 .ba { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 40px; }
.v0414 .ba__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.v0414 .ba__more { font-size: 14px; color: var(--plum); border-bottom: 1px solid var(--plum); padding-bottom: 4px; white-space: nowrap; transition: opacity .2s; }
.v0414 .ba__more:hover { opacity: .7; }
.v0414 .case__name { font-size: 18px; color: var(--case); }
/* 453 × 200 comparison slots, grouped by treatment (one complete before/after image per slot) */
.v0414 .ba-groups { display: flex; flex-direction: column; }
.v0414 .ba-group { display: grid; grid-template-columns: 200px 1fr; gap: 24px 48px; align-items: start; border-top: 1px solid var(--line); padding: 32px 0; }
.v0414 .ba-group:last-child { border-bottom: 1px solid var(--line); }
.v0414 .ba-group__name { padding-top: 4px; }
.v0414 .ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 453px)); gap: 24px; }
.v0414 .ba-box { margin: 0; position: relative; width: 100%; aspect-ratio: 453 / 200; overflow: hidden; background: var(--placeholder); border: 1px solid var(--line); }
.v0414 .ba-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Shoulder filler B&A: box matches the 853×227 images */
.v0414 .ba-group[data-treatment="shoulder"] .ba-box { aspect-ratio: 853 / 227; }
.v0414 .ba-group[data-treatment="shoulder"] .ba-box > img { transform: scale(1.015); transform-origin: center; }
.v0414 .ba__note { font-size: 13px; line-height: 1.9; color: var(--muted); }

/* Treatment directory */
.v0414 .select { background: var(--lilac); }
.v0414 .select__in { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 40px; }
.v0414 .dir { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.v0414 .dir__item {
  height: 72px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between;
  background: var(--paper); border: 1px solid var(--line); color: var(--plum); font-size: 16px;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.v0414 .dir__item .arr { font-size: 12px; transition: transform .3s var(--ease); }
.v0414 a.dir__item:hover, .v0414 a.dir__item:focus-visible { background: var(--plum); color: var(--paper); border-color: var(--plum); }
.v0414 a.dir__item:hover .arr { transform: translate(2px, -2px); }
.v0414 .dir--six { grid-template-columns: repeat(3, 1fr); }

/* FAQ */
.v0414 .faq { padding-top: 104px; padding-bottom: 104px; display: flex; gap: 72px; align-items: flex-start; }
.v0414 .faq__intro { flex: 0 0 310px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: calc(var(--hd-h) + 96px); }
.v0414 .faq__big { font-family: var(--serif); color: var(--plum); font-size: 64px; line-height: 1.28; }
.v0414 .faq__title { font-size: 28px; line-height: 1.6; font-weight: 400; color: var(--ink); }
.v0414 .faq__note { font-size: 14px; line-height: 1.9; color: var(--muted); }
.v0414 .faq__all { align-self: flex-start; font-size: 13px; color: var(--plum); border: 1px solid var(--line); padding: 10px 16px; transition: background-color .25s, color .25s; }
.v0414 .faq__all:hover { background: var(--plum); color: var(--paper); border-color: var(--plum); }
.v0414 .faq__list { flex: 1 1 0; }
.v0414 .faq__item { border-top: 1px solid var(--line); }
.v0414 .faq__q { width: 100%; text-align: left; display: flex; gap: 16px; align-items: flex-start; padding: 28px 0; }
.v0414 .faq__no { flex: 0 0 40px; font-family: var(--serif); color: var(--plum); font-size: 16px; line-height: 1.8; }
.v0414 .faq__qt { flex: 1 1 0; font-size: 17px; line-height: 1.7; font-weight: 500; color: var(--ink); transition: color .2s; }
.v0414 .faq__q:hover .faq__qt { color: var(--plum); }
.v0414 .faq__ic { flex: 0 0 20px; height: 29px; position: relative; }
.v0414 .faq__ic::before, .v0414 .faq__ic::after { content: ''; position: absolute; left: 3px; right: 3px; top: 14px; height: 1px; background: var(--plum); transition: transform .3s var(--ease); }
.v0414 .faq__ic::after { transform: rotate(90deg); }
.v0414 .faq__item.is-open .faq__ic::after { transform: rotate(0); }
.v0414 .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.v0414 .faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.v0414 .faq__a > div { overflow: hidden; }
.v0414 .faq__a p { padding: 0 36px 28px 56px; font-size: 15px; line-height: 1.9; color: var(--muted); }

.v0414 .safety { background: var(--lilac); }
.v0414 .safety__in { padding-top: 36px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 12px; }
.v0414 .safety__label { font-size: 13px; font-weight: 500; color: var(--plum); }
.v0414 .safety__text { font-size: 14px; line-height: 1.9; color: var(--ink); }

/* ---------- 0414 responsive: desktop refinements only (821–1280px, same values as 0414);
   820px and below is the COMPACT / MOBILE block at the end of this file ---------- */
@media (min-width: 820.02px) and (max-width: 1280px) {
  .v0414 .dist__goal { flex-basis: 360px; }
  .v0414 .ba-group { grid-template-columns: 160px 1fr; gap: 20px 32px; }
}

@media (min-width: 820.02px) and (max-width: 1100px) {
  .v0414 { --hd-h: 72px; }
  .v0414 .pro__grid, .v0414 .faq { flex-direction: column; gap: 32px; }
  .v0414 .pro__portrait, .v0414 .faq__intro { flex-basis: auto; width: 100%; }
  .v0414 .faq__intro { position: static; }
  .v0414 .pro__portrait { max-width: 420px; }
  .v0414 .cards { grid-template-columns: repeat(2, 1fr); }
  .v0414 .card__info { min-height: 0; }
  .v0414 .dir { grid-template-columns: repeat(2, 1fr); }
  .v0414 .steps { grid-template-columns: repeat(2, 1fr); }
  .v0414 .dims { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .v0414 .dist { flex-wrap: wrap; gap: 8px 24px; }
  .v0414 .dist__goal { flex: 1 1 calc(100% - 72px); }
  .v0414 .dist__text { flex-basis: 100%; padding-left: 72px; }
  .v0414 .ba-group { grid-template-columns: 1fr; gap: 16px; }
}

/* the site wrapper's inline overflow:hidden disables position:sticky for the tour */
#wrap {
  overflow: visible !important;  /* fallback for old browsers */
  overflow: clip !important;     /* still clips sideways, but doesn't break sticky */
}

/* hershe9 mobile template: its #wrap img { max-width:100% } squeezes the tour frames and the card crops */
#wrap .frames img,
#wrap .v0414 .crop > img,
#wrap .v0414 .card__img--crop > img { max-width: none; }

/* =========================================================================================
   COMPACT / MOBILE — SINGLE RESPONSIVE MODE
   820px and below: phones and tablets share one fluid layout from 360px up (no further width steps).
   Desktop (above 820px) never reaches these rules. The tour script reads --site-hdr and the caption
   positions set here to frame the model (layout() → frameCompact()).
   ========================================================================================= */
@media (max-width: 820px) {
  /* phone browsers' forced dark mode (Samsung Internet, Chrome "darken websites", in-app browsers)
     would repaint the hero dark right after the light opening: keep the page's own colours */
  :root { color-scheme: only light; }

  /* ---------- video hero: the video fills the screen and the title sits over it, near the middle
     (overrides the portrait ivory band) ---------- */
  .hero {
    --hero-pad-l: max(clamp(24px, 5vw, 40px), env(safe-area-inset-left));
    --hero-pad-r: max(clamp(24px, 5vw, 40px), env(safe-area-inset-right));
    height: 100vh; height: 100svh;          /* svh: never hidden behind the browser's own bars */
    min-height: 0;
  }
  .hero__media {
    top: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero__video {
    width: 100%; height: 100vh; height: 100svh;
    object-fit: cover;                     /* crops, never stretches */
    object-position: var(--video-x-mobile) 50%;
  }
  /* soft light behind the title and the scroll cue only: the camera pans the dark dress across
     both during the loop, so this lifts the purple off it without a panel */
  .hero__media::after {
    display: block;
    background:
      radial-gradient(ellipse 110% 30% at 0% 50%, rgba(248, 246, 242, .8) 0%, rgba(248, 246, 242, .45) 55%, rgba(248, 246, 242, 0) 100%),
      radial-gradient(ellipse 90% 14% at 0% 86%, rgba(248, 246, 242, .7) 0%, rgba(248, 246, 242, 0) 100%);
  }
  .hero__title span, .hero__kicker, .hero__cue { text-shadow: 0 0 20px rgba(248, 246, 242, .7); }
  .hero__copy {
    top: 50%; left: var(--hero-pad-l); right: var(--hero-pad-r);
    transform: translateY(-50%);
    max-width: none;
  }
  .hero__title { font-size: clamp(42px, 12vw, 64px); overflow-wrap: break-word; }
  .hero__title span { text-wrap: balance; }
  .hero__cue {
    left: var(--hero-pad-l);
    bottom: calc(11% + env(safe-area-inset-bottom));
  }
  .hero__cue span { height: 44px; }

  /* ---------- More than volume / The HERSHE approach ---------- */
  .intro__grid, .approach__grid { grid-template-columns: 1fr; }
  .intro__body { padding-top: 0; }
  .intro__text { font-size: clamp(14px, 3.4vw, 15px); line-height: clamp(1.9em, 1.6em + 1vw, 2em); }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .facts dd { font-size: clamp(14px, 3.4vw, 15px); }
  .pillars { grid-template-columns: 1fr; gap: 40px; }

  /* ---------- treatment-area tour ---------- */
  section.lead, .tour__sticky { background: #fff; }
  section.lead { padding: clamp(56px, min(10vh, 15vw), 96px) 20px clamp(44px, min(7vh, 11vw), 72px); }
  .tour { background: #fff; }                 /* any strip under the 100svh stage (iOS toolbar collapsed) stays white */
  .tour__sticky {
    --site-hdr: 70px;                         /* the hershe9 site's fixed mobile header; the script frames the model below it */
    --cap-x: clamp(16px, 3.6vw, 36px);        /* side inset of the caption and the controls */
    --cap-b: max(16px, 2.4svh, env(safe-area-inset-bottom));   /* least room under the caption */
    --pin-dot: clamp(7px, 1.6vw, 9px);
  }

  /* all captions share one top line at 62% of the stage (the room below stays free for the site's floating
     buttons); a caption that would not fit under that line lifts the line instead, so nothing is ever cut off.
     Grid: row 1 grows to 62% only as far as the tallest caption (row 2, every caption stacked in it) still fits
     above the bottom margin (row 3). The camera frames the model above this line. */
  .caps {
    left: var(--cap-x); right: var(--cap-x); top: 0; bottom: 0;
    width: auto; height: auto;
    transform: none;
    display: grid;
    grid-template-rows: minmax(0, 62%) auto var(--cap-b);
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }
  .cap {
    --circle: clamp(60px, 15vw, 96px);
    grid-area: 2 / 1;
    position: relative; top: auto; left: auto; width: min(100%, 560px);
    isolation: isolate;
    transform: translateY(16px);
  }
  .cap.is-active { transform: none; }
  .cap::before {   /* soft white fade from just above the caption line down to the foot of the stage */
    content: ""; position: absolute; z-index: -1;
    top: -40px; height: 100vh; left: calc(-1 * var(--cap-x)); width: 100vw;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff clamp(96px, 13svh, 150px));
    pointer-events: none;
  }
  .cap--glide[data-id="ear"]:has(~ .cap--glide[data-id="collarbone"].is-active) { transform: translateY(10px); }
  .cap--glide[data-id="ear"].is-active ~ .cap--glide[data-id="collarbone"] { transform: translateY(-10px); }
  .cap__circle { position: absolute; right: 0; top: 0; width: var(--circle); height: var(--circle); margin: 0; }
  .cap__circle ~ :is(.cap__idx, .cap__title, .cap__en) { padding-right: calc(var(--circle) + 12px); }   /* stop short of the thumbnail */
  .cap__idx { margin-bottom: 8px; font-size: clamp(11px, 2.6vw, 13px); }
  .cap__title, .cap--intro .cap__title { font-size: clamp(32px, 8vw, 48px); }
  .cap__en { margin-top: 4px; font-size: clamp(17px, 4.2vw, 22px); }
  .cap__desc { margin-top: 10px; font-size: clamp(14px, 3.3vw, 16px); }
  .cap__tags { margin-top: 10px; }
  .cap__tags li { padding: 4px 10px; font-size: clamp(12px, 2.8vw, 13px); }
  .cap__link { margin-top: 14px; font-size: clamp(13px, 3vw, 14px); }

  /* the closing view carries all eight labels around the model, so the signature sits bottom-right,
     under the short closing caption (above the caption fade) */
  .script { top: auto; right: var(--cap-x); bottom: var(--cap-b); width: clamp(150px, 46vw, 320px); z-index: 3; }

  /* the desktop tour controls, under the site header: angle label (zoomed views) top-left with
     "전체 시술 부위 보기" right below it, the progress dots across the top right */
  .rail { top: calc(var(--site-hdr) + 18px); right: clamp(12px, 3vw, 32px); transform: none; flex-direction: row; gap: 6px; }
  .rail button { padding: 6px 2px; }
  .rail button span { display: none; }
  .tour__view { top: calc(var(--site-hdr) + 22px); bottom: auto; left: var(--cap-x); transform: none; }
  .tour__skip { top: calc(var(--site-hdr) + 44px); right: auto; bottom: auto; left: var(--cap-x); padding: 8px 0; font-size: 12px; }
  .tour__sticky.is-pinned .tour__skip { opacity: .85; }   /* desktop keeps its quiet .42 */
  .tour__view span { display: none; }         /* only the current view + angle */
  .tour__sticky[data-view="front"] .tour__view [data-view="front"],
  .tour__sticky[data-view="side"] .tour__view [data-view="side"],
  .tour__sticky[data-view="back"] .tour__view [data-view="back"] { display: inline; }

  /* points and labels scale with the screen; the overview carries all eight labels around the model */
  .pin i {
    left: calc(var(--pin-dot) / -2); top: calc(var(--pin-dot) / -2);
    width: var(--pin-dot); height: var(--pin-dot);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85);
  }
  .pin i::after { inset: -4px; border-width: 1px; }
  .pin b { gap: .55em; font-size: clamp(11px, 2.5vw, 14px); }
  .pin b::before { width: 2.5em; }
  .pin--r b { left: 6px; }
  .pin--l b { right: 6px; }
  .pin.is-active b { opacity: var(--ov, 1); }   /* zoomed in, the caption already names the area */
  /* 엉덩이필러 and 힙딥필러 sit only 2% apart: stagger the two labels sideways so they never overlap, and lift / drop
     their text a little off the leader line (which stays on the point) so it clears the neighbour's line */
  .pin[data-id="buttock"] b { transform: translateY(calc(-50% - .3em)); }
  .pin[data-id="buttock"] b::before { width: 5.5em; position: relative; top: .3em; }
  .pin[data-id="hipdip"] b { transform: translateY(calc(-50% + .3em)); }
  .pin[data-id="hipdip"] b::before { width: 1.1em; position: relative; top: -.3em; }

  /* ---------- "Find your contour" → end of page ---------- */
  .v0414 { --hd-h: 64px; font-size: 15px; padding-bottom: 62px; }   /* 0414 body rules at this width */
  .v0414 .pro, .v0414 .faq { padding-top: 72px; padding-bottom: 72px; }
  .v0414 .discovery__in, .v0414 .ba { padding-top: 72px; padding-bottom: 72px; }
  .v0414 .process__in, .v0414 .fill__in, .v0414 .select__in { padding-top: 64px; padding-bottom: 64px; }

  /* treatment cards: one column; image left (it grows with the screen), text right, "자세히 보기" under the text */
  .v0414 .cards { grid-template-columns: 1fr; gap: 40px; }
  .v0414 .card { display: grid; grid-template-columns: clamp(132px, 31vw, 240px) minmax(0, 1fr); gap: 6px clamp(14px, 4vw, 28px); }
  .v0414 .card__img { grid-row: span 2; aspect-ratio: 1 / 1.05; }
  .v0414 .card__info { min-height: 0; gap: 6px; }
  .v0414 .card__name { font-size: clamp(20px, 5.1vw, 23px); }
  .v0414 .card__desc { font-size: clamp(13.5px, 3.46vw, 14px); line-height: 1.75; }
  .v0414 .card__action { grid-column: 2; padding-top: 10px; }
  /* the hershe9 mobile template's img { max-width:100% } (outside #wrap too) would undo the card crops and squeeze the tour frames */
  .v0414 .card__img--crop > img, .tour .frames img { max-width: none !important; }

  .v0414 .dist { flex-wrap: wrap; gap: 8px 24px; }
  .v0414 .dist__goal { flex: 1 1 calc(100% - 72px); font-size: 16px; }
  .v0414 .dist__text { flex-basis: 100%; padding-left: 0; }

  .v0414 .pro__grid, .v0414 .faq { flex-direction: column; gap: 32px; }
  .v0414 .pro__portrait, .v0414 .faq__intro { flex-basis: auto; width: 100%; }
  .v0414 .pro__portrait { max-width: 420px; }
  .v0414 .faq__intro { position: static; }
  .v0414 .rec { flex-direction: column; gap: 8px; }
  .v0414 .rec__year { flex-basis: auto; font-size: 26px; }
  .v0414 .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px; }
  .v0414 .dims { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }

  /* Before & After: one slot per row on phones, two once there is room (453:200 kept) */
  .v0414 .ba__head { flex-direction: column; align-items: flex-start; }
  .v0414 .ba-group { grid-template-columns: 1fr; gap: 16px; }
  .v0414 .ba-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }

  .v0414 .dir, .v0414 .dir--six { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
  .v0414 .dir__item { height: 60px; }

  .v0414 .faq__big { font-size: 52px; }
  .v0414 .faq__title { font-size: 24px; }
  .v0414 .faq__q { padding: 22px 0; gap: 10px; }
  .v0414 .faq__no { flex-basis: 36px; }
  .v0414 .faq__qt { font-size: 16px; }
  .v0414 .faq__a p { padding: 0 0 22px 46px; font-size: 14px; }
}