/* 얼굴본성형외과 메인 — 로고 블루가 구역을 통째로 차지하는 흰 바탕 세계 */

:root {
  /* mint from the clinic's own site (facebone.co.kr, #3dc1ce). Mint surfaces carry Ink text: white on mint is 2.2:1.
     Mint as text or a line on white is Mint Ink (4.95:1). The dark grounds are charcoal, as on the original site. */
  --mint: #1874b8;
  --mint-600: #135f98;
  --mint-ink: #1874b8;
  --mint-ink-600: #135f98;
  --charcoal: #0e3a63;
  --charcoal-900: #0a2640;
  --night: #061a2d;
  --sky: #dcebf7;
  --mist: #eef3f8;
  --mist-2: #e4ecf4;
  --paper: #ffffff;
  --ink: #14171b;
  --ink-2: #444d57;
  --ink-3: #66707b;
  --line: #d6dee7;
  --line-2: #e7edf3;
  --radius-lg: 32px;
  --radius: 20px;
  --gutter: clamp(16px, 2.6vw, 40px);
  --inset: clamp(10px, 1.6vw, 28px);
  --maxw: 1360px;
  --header-h: 80px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --serif-kr: "Noto Serif KR", "AppleMyungjo", serif; /* the 本 statement only */
  --font-title-en: Optima, Belleza, var(--font); /* English title heads only (see @font-face below) */
}

/* English title heads: Optima, the face of the user-pinned reference's titles (thegardenclinic.co.kr sets them in
   Adobe Fonts' Optima LT Pro, a kit locked to its own domain). Apple devices have Optima built in; elsewhere Belleza
   stands in, the closest free match (SIL OFL, assets/fonts/Belleza-OFL.txt), self-hosted, Latin only, 11KB, and
   fetched only where Optima is missing. Body English and the menus stay in Pretendard. */
@font-face {
  font-family: "Belleza"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/belleza-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scrollbar-color: #a9c7e3 var(--mist);
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--mint-ink);
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; text-underline-offset: 0.25em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
table { font-variant-numeric: tabular-nums; }

::selection { background: var(--mint); color: #fff; }
:focus-visible { outline: 3px solid var(--mint-ink); outline-offset: 3px; border-radius: 12px; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--mist); }
::-webkit-scrollbar-thumb { background: #a9c7e3; border-radius: 999px; border: 3px solid var(--mist); }
::-webkit-scrollbar-thumb:hover { background: var(--mint); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 12px; font-weight: 700;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 16px; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.br-m { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 0 1.5em;
  border: 1.5px solid transparent; border-radius: 999px;
  font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.btn .icon { width: 1.15em; height: 1.15em; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-blue { background: var(--mint); color: #fff; }
.btn-blue:hover { background: var(--mint-600); box-shadow: 0 12px 24px -14px rgba(19, 95, 152, 0.9); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--sky); box-shadow: 0 14px 26px -16px rgba(10, 38, 64, 0.55); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--mint); color: #fff; }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost-light { border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-sm { min-height: 42px; padding: 0 1.15em; font-size: 0.9375rem; }
.btn-lg { min-height: 60px; padding: 0 1.8em; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  color: var(--ink); transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.icon-btn:hover { background: var(--mist); color: var(--mint-ink); }
.icon-btn .icon { width: 24px; height: 24px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  transition: box-shadow 0.35s var(--ease-out);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line-2), 0 16px 30px -26px rgba(10, 38, 64, 0.5); }
/* ---------- header floating over a full visual (subpages) or the opening film (main page) ---------- */
.page-sub .site-header, .has-opening .site-header {
  position: fixed; top: 0; left: 0; right: 0; background: var(--paper);
  transition: background-color 0.45s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.brand .logo-light { display: none; }
.site-header.is-over { background: transparent; box-shadow: none; }
.site-header.is-clear { background: transparent; box-shadow: none; } /* over the opening's pale stage: ink words, no bar */
.site-header.is-clear.is-mega { background: #fff; }
.site-header.is-over .logo-dark { display: none; }
.site-header.is-over .logo-light { display: block; }
.site-header.is-over .gnb-link,
.site-header.is-over .icon-btn { color: #fff; }
.site-header.is-over .gnb-item > .gnb-link { color: #fff; }
.site-header.is-over .gnb-link::after { background: #fff; }
.site-header.is-over .icon-btn:hover, .site-header.is-over .lang-btn:hover { background: rgba(255, 255, 255, 0.14); }
.site-header.is-over .lang-btn[aria-pressed="true"]::before { box-shadow: 0 0 0 1.5px #fff; }
/* the mega menu opens a white header, even over the photo */
.site-header.is-over.is-mega { background: #fff; }
.site-header.is-over.is-mega .logo-dark { display: block; }
.site-header.is-over.is-mega .logo-light { display: none; }
.site-header.is-over.is-mega .gnb-item > .gnb-link,
.site-header.is-over.is-mega .icon-btn { color: var(--ink); }
.site-header.is-over.is-mega .gnb-link::after { background: var(--mint); }
.site-header.is-over.is-mega .lang-btn[aria-pressed="true"]::before { box-shadow: 0 0 0 1.5px var(--mint-ink); }
.site-header.is-over.is-mega .gnb-item:hover > .gnb-link,
.site-header.is-over.is-mega .gnb-item.is-current > .gnb-link { color: var(--mint-ink); }

.header-inner {
  width: min(100% - 2 * var(--gutter), 1560px); margin-inline: auto;
  height: var(--header-h); display: flex; align-items: center; gap: 24px;
}
.brand { flex: none; display: flex; align-items: center; min-height: 44px; } /* the logo's tap area is 44px tall, not the image's height */
.brand img { width: 190px; height: auto; }
.gnb { align-self: stretch; display: flex; margin-inline: auto; }
.gnb-list { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 40px); }
.gnb-link {
  position: relative; display: block; padding: 10px 2px; white-space: nowrap;
  font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.02em;
  transition: color 0.25s var(--ease-out);
}
.gnb-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--mint); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.gnb-item:hover > .gnb-link, .gnb-item:focus-within > .gnb-link, .gnb-item.is-current > .gnb-link { color: var(--mint-ink); }
.gnb-item:hover > .gnb-link::after, .gnb-item:focus-within > .gnb-link::after, .gnb-item.is-current > .gnb-link::after { transform: scaleX(1); }

/* mega menu: pointing at or tabbing into the menu opens every column at once under the header.
   The columns split the content width in eight, each headed by its menu name over an ink rule. */
.site-header { --mega-w: min(100% - 2 * var(--gutter), var(--maxw)); }
.site-header.is-mega { background: #fff; }
.gnb-sub {
  position: absolute; z-index: 2; top: var(--header-h);
  left: calc((100% - var(--mega-w)) / 2 + var(--col) * var(--mega-w) / 8);
  width: calc(var(--mega-w) / 8);
  display: grid; align-content: start; padding: 30px 12px 36px;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity 0.25s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s linear 0.25s;
}
.site-header.is-mega .gnb-sub {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out), visibility 0s;
}
.gnb-sub-head {
  margin-bottom: 10px; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink);
  font-size: 1rem; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.gnb-item:hover .gnb-sub-head, .gnb-item.is-current .gnb-sub-head { color: var(--mint-ink); border-color: var(--mint-ink); }
.gnb-sub a { display: block; padding: 7px 0; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2); transition: color 0.2s var(--ease-out); }
.gnb-sub a:hover { color: var(--mint-ink); }
.gnb-sub a[aria-current="page"] { color: var(--mint-ink); font-weight: 650; }
.mega-bg {
  position: absolute; z-index: 1; left: 0; right: 0; top: var(--header-h); height: var(--mega-h, 460px);
  background: #fff; border-top: 1px solid var(--line-2);
  box-shadow: 0 26px 50px -22px rgba(10, 38, 64, 0.45);
  visibility: hidden; opacity: 0; transition: opacity 0.25s var(--ease-out), visibility 0s linear 0.25s;
}
.site-header.is-mega .mega-bg { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease-out), visibility 0s; }
.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.gnb + .header-actions { margin-left: 0; }
.menu-btn { display: none; }
/* languages: four round flags. The page is Korean; the others hand it to Google's machine translation (main.js) */
.lang { display: flex; align-items: center; gap: 2px; }
.lang-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background-color 0.2s var(--ease-out); }
.lang-btn:hover { background: var(--mist); }
.lang-btn[aria-pressed="true"]::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--mint-ink); }
.flag { width: 24px; height: 24px; clip-path: circle(50%); }
/* a machine translation (Google sets html.translated-ltr and html[lang]): the eight menu names and the badge's word
   are set by hand in main.js and kept from the machine, short enough that the menu bar stays on one row in every
   language, as it does in Korean (it used to fold into the menu button, and the bar looked gone) */
/* Korean keeps its words whole (keep-all); 中文 and 日本語 have no spaces to break at, so they break anywhere */
html[lang="zh-CN"].translated-ltr, html[lang="zh-CN"].translated-ltr *, html[lang="ja"].translated-ltr, html[lang="ja"].translated-ltr * { word-break: normal; line-break: auto; }
.translated-ltr .mobile-bar a { line-height: 1.15; text-align: center; } /* a longer label wraps to two lines inside its cell */
.translated-ltr .btn { white-space: normal; text-align: center; padding-block: 10px; } /* a longer label wraps inside its button, never off a phone's screen */

/* ---------- mobile menu ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 80; background: #fff;
  display: flex; flex-direction: column; padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { animation: menu-in 0.45s var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.mobile-menu-list { margin-top: 12px; border-top: 1.5px solid var(--ink); }
/* one row per menu; each opens its pages in two columns */
.mm-group { border-bottom: 1px solid var(--line-2); }
.mm-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 17px 4px;
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; text-align: left; color: var(--ink);
  transition: color 0.2s var(--ease-out);
}
.mm-toggle .icon { flex: none; width: 22px; height: 22px; color: var(--ink-3); transition: transform 0.35s var(--ease-out); }
.mm-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.mm-toggle:hover, .mm-group.is-current .mm-toggle { color: var(--mint-ink); }
.mm-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 0 4px 14px; }
.mm-sub[hidden] { display: none; }
.mm-sub a { display: flex; align-items: center; min-height: 44px; font-size: 1rem; color: var(--ink-2); }
.mm-sub a:hover, .mm-sub a[aria-current="page"] { color: var(--mint-ink); }
.mm-sub a[aria-current="page"] { font-weight: 650; }
.mobile-menu-foot { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }

/* ---------- hero ---------- */
/* ---------- opening (main page, after the user-pinned reference thegardenclinic.co.kr) ----------
   1. the film: the director, full screen under the floating header; the ringed mark, a line drawn out of it, the
      English title and the Korean lines; 'Scroll to explore'.
   2. the stage (pinned): a pale, blurred lobby; the portrait card (the lobby's logo wall) rises into the middle while
      an outlined English line drifts behind it.
   3. the card opens to the whole screen and dims, two hairlines draw down its sides, and the name is set in the middle.
   main.js writes the scroll into --op-film, --op-rise, --op-grow, --op-dim and --op-why (0 to 1). Without it (no
   script, reduced motion) they rest at 1, the finished state, so everything is visible. */
.opening { --op-film: 0; --op-bg: 0; --op-rise: 1; --op-lift: 0px; --op-grow: 1; --op-dim: 1; --op-why: 1; --op-out: 0; position: relative; background: var(--night); color: #fff; }
/* the backdrop: the director, and over him the pale lobby, hold still for the whole opening (sticky, pulled up under
   the film by its own height). The film's words scroll away over them, the lobby fades in over the director, and the
   card rises from below at the page's own pace, as on the reference, where both backgrounds are fixed layers. */
.op-back { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; }
.op-film { position: relative; z-index: 1; height: 100svh; min-height: 560px; overflow: hidden; }
.op-film-media { position: absolute; inset: 0; }
.op-film-media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.js .op-film-media img { animation: op-breathe 24s ease-in-out infinite alternate; } /* a still that moves like film */
@keyframes op-breathe { from { transform: scale(1.07); } to { transform: scale(1); } }
.op-film-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 26, 45, 0.8) 0%, rgba(6, 26, 45, 0.5) 38%, rgba(6, 26, 45, 0.06) 70%),
              linear-gradient(180deg, rgba(6, 26, 45, 0.5), transparent 24%, transparent 72%, rgba(6, 26, 45, 0.6));
}
.op-film-copy { position: absolute; left: clamp(24px, 6vw, 120px); right: var(--gutter); top: 50%; translate: 0 -50%; display: flex; align-items: center; }
.op-film-copy, .op-scroll { opacity: calc(1 - var(--op-film) * 1.8); } /* the words fade as the film leaves, so they never slide under the clear header */
.op-sign { flex: none; display: flex; align-items: center; }
.op-mark { flex: none; display: grid; place-items: center; width: clamp(96px, 8.4vw, 128px); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
.op-mark img { width: 50%; height: auto; }
.op-line { flex: none; width: clamp(40px, 6vw, 120px); height: 1px; margin: 0 clamp(16px, 1.8vw, 28px); background: rgba(255, 255, 255, 0.75); transform-origin: left; }
.op-title { font-family: var(--font-title-en); font-size: clamp(2.5rem, 4.2vw, 4rem); font-weight: 400; line-height: 1.12; letter-spacing: -0.03em; }
.op-title span { display: block; }
.op-desc { margin-top: 18px; font-size: clamp(1rem, 1.2vw, 1.1875rem); font-weight: 500; line-height: 1.7; color: rgba(255, 255, 255, 0.86); }
/* entrance: the mark, then the line drawn out of it, then the title and the lines (held while the first-visit intro plays) */
.js .op-mark { opacity: 0; scale: 0.86; }
.js .op-line { transform: scaleX(0); }
.js .op-copy > * { opacity: 0; translate: 0 22px; }
.opening.is-live .op-mark { opacity: 1; scale: 1; transition: opacity 1s var(--ease-out) 0.2s, scale 1.2s var(--ease-out) 0.2s; }
.opening.is-live .op-line { transform: none; transition: transform 1.1s var(--ease-out) 0.7s; }
.opening.is-live .op-copy > * { opacity: 1; translate: 0 0; transition: opacity 1s var(--ease-out), translate 1.1s var(--ease-out); }
.opening.is-live .op-title { transition-delay: 1.05s; }
.opening.is-live .op-desc { transition-delay: 1.3s; }
.op-scroll { position: absolute; left: 50%; bottom: clamp(20px, 4.5svh, 44px); translate: -50% 0; display: flex; align-items: center; gap: 16px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.9); }
.op-scroll-ring { position: relative; width: 60px; height: 60px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); transition: background-color 0.3s var(--ease-out); }
.op-scroll:hover .op-scroll-ring { background: rgba(255, 255, 255, 0.12); }
.op-scroll-ring::before { content: ""; position: absolute; left: 50%; top: 17px; bottom: 17px; width: 1px; background: rgba(255, 255, 255, 0.45); }
.op-scroll-ring i { position: absolute; left: 50%; top: 16px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #fff; animation: op-drop 2.4s var(--ease-out) infinite; }
@keyframes op-drop { 0% { transform: translateY(0); opacity: 0; } 20%, 70% { opacity: 1; } 100% { transform: translateY(21px); opacity: 0; } }

.op-stage { position: relative; z-index: 1; height: 320vh; }
.op-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.op-blur { position: absolute; inset: -3%; background: url("../assets/img/opening-blur.webp") 30% 50% / cover no-repeat; opacity: var(--op-bg); }
.op-marquee {
  position: absolute; left: 0; top: 50%; translate: 0 -50%; display: flex; width: max-content; margin: 0; white-space: nowrap;
  font-family: var(--font-title-en); font-size: clamp(3.5rem, 8vw, 8.5rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.9);
  opacity: calc(var(--op-rise) - var(--op-grow) * 2.4);
}
.op-marquee span { animation: op-marquee 56s linear infinite; }
@keyframes op-marquee { to { transform: translateX(-100%); } }
/* the card is the whole screen, cut down to a portrait window that opens as --op-grow runs to 1 */
.op-card {
  --ch: min(78svh, 740px); --cw: calc(var(--ch) * 0.62);
  position: absolute; inset: 0; margin: 0;
  clip-path: inset(calc((100% - var(--ch)) / 2 * (1 - var(--op-grow))) calc((100% - var(--cw)) / 2 * (1 - var(--op-grow))) round calc(24px * (1 - var(--op-grow))));
  transform: translateY(var(--op-lift));
}
.op-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 3% 50%; transform: scale(calc(1.14 - 0.14 * var(--op-grow))); }
@media (max-aspect-ratio: 1 / 1) { .op-card-photo { object-position: 30% 50%; } } /* a portrait screen: the logo on the wall stays in the middle */
.op-card::after { content: ""; position: absolute; inset: 0; background: rgba(6, 26, 45, calc(0.14 + 0.5 * var(--op-dim))); }
.op-card-logo, .op-card-desc { position: absolute; z-index: 1; left: 50%; translate: -50% 0; opacity: calc(1 - var(--op-grow) * 3); }
.op-card-logo { top: calc((100% - var(--ch)) / 2 + 30px); padding-left: 0.32em; white-space: nowrap; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.32em; color: rgba(255, 255, 255, 0.92); }
.op-card-desc { bottom: calc((100% - var(--ch)) / 2 + 30px); width: calc(var(--cw) - 48px); text-align: center; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); font-weight: 600; line-height: 1.6; }
.op-frame { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.26); transform: scaleY(var(--op-why)); transform-origin: top; opacity: calc(1 - var(--op-out)); }
/* the mark comes back down: from above the screen, on the film mark's line, it curves into the rising card and lands
   under the card's name, then fades as the card opens (main.js places it; the reference's edge mark) */
.op-edge {
  position: fixed; left: 0; top: 0; z-index: 3; display: grid; place-items: center;
  width: clamp(96px, 8.4vw, 128px); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9);
  visibility: hidden; pointer-events: none; will-change: transform, opacity;
}
.op-edge img { width: 50%; height: auto; }
.op-frame-l { left: clamp(16px, 11vw, 200px); }
.op-frame-r { right: clamp(16px, 11vw, 200px); }
.op-why { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 0 var(--gutter); text-align: center; pointer-events: none; opacity: calc(1 - var(--op-out)); } /* --op-out: the stage leaving (main.js) */
.op-why-eyebrow { font-family: var(--font-title-en); font-size: 1rem; font-weight: 400; letter-spacing: 0.04em; opacity: var(--op-why); translate: 0 calc((1 - var(--op-why)) * 14px); }
.op-why-word { margin-top: 12px; padding-left: 0.34em; font-family: var(--font-title-en); font-size: clamp(2.75rem, 6.6vw, 6.5rem); font-weight: 400; line-height: 1; letter-spacing: calc(0.34em + (1 - var(--op-why)) * 0.4em); opacity: var(--op-why); }
.op-why-tag { margin-top: clamp(20px, 2.6vw, 34px); font-size: clamp(1rem, 1.5vw, 1.375rem); font-weight: 500; }
.op-why-chars { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(14px, 2.4vw, 38px); }
.op-why-chars span { opacity: clamp(0, calc(var(--op-why) * 2 - var(--i) * 0.055), 1); }
.op-why-chars .op-gap { width: clamp(10px, 2vw, 32px); }
.opening + .hero { padding-top: var(--inset); }

.hero { padding: 0 var(--inset); }
.hero-card {
  --hero-pad: clamp(40px, 6vw, 104px);
  position: relative; isolation: isolate; overflow: hidden;
  height: calc(100svh - var(--header-h) - var(--inset));
  min-height: 640px; max-height: 900px;
  border-radius: var(--radius-lg);
  background: var(--sky); color: var(--ink);
}
.hero-track { display: grid; height: 100%; }
.slide {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center; gap: clamp(24px, 4vw, 72px);
  padding: var(--hero-pad); padding-bottom: calc(var(--hero-pad) + 56px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.9s var(--ease-out), visibility 0s linear 0.9s;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.9s var(--ease-out), visibility 0s; z-index: 1; }
.slide[data-theme="sky"] { background: var(--sky); color: var(--ink); }
.slide[data-theme="charcoal"] { background: var(--charcoal); color: #fff; }
.slide[data-theme="mist"] { background: var(--mist-2); color: var(--ink); }

/* The field behind each slide, so the colour is a place and not a flat fill: light from the top left, a fine grain,
   a dot grid under the copy, and a measuring dial (tick bezel, rings, a dashed ring turning slowly) centred on the
   photo's left edge, so its arcs sweep the colour field and pass behind the photo. The dial leans toward the pointer. */
.slide { --deco: rgba(19, 95, 152, 0.24); --deco-strong: rgba(19, 95, 152, 0.6); }
.slide[data-theme="charcoal"] { --deco: rgba(24, 116, 184, 0.24); --deco-strong: rgba(24, 116, 184, 0.62); }
.slide[data-theme="mist"] { --deco: rgba(19, 95, 152, 0.2); --deco-strong: rgba(19, 95, 152, 0.5); }
.slide-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.slide-deco::before {
  content: ""; position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.26 0 0 0 -0.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(70% 90% at 10% 0%, rgba(255, 255, 255, 0.7), transparent 62%),
    radial-gradient(42% 52% at 55% 56%, rgba(255, 255, 255, 0.4), transparent 70%),
    radial-gradient(70% 80% at 0% 100%, rgba(24, 116, 184, 0.22), transparent 72%);
}
.slide[data-theme="charcoal"] .slide-deco::before {
  background:
    radial-gradient(70% 90% at 10% 0%, rgba(255, 255, 255, 0.08), transparent 62%),
    radial-gradient(42% 52% at 55% 56%, rgba(24, 116, 184, 0.16), transparent 70%),
    radial-gradient(70% 80% at 0% 100%, rgba(6, 26, 45, 0.5), transparent 72%);
}
.slide[data-theme="mist"] .slide-deco::before {
  background:
    radial-gradient(70% 90% at 10% 0%, rgba(255, 255, 255, 0.75), transparent 62%),
    radial-gradient(42% 52% at 55% 56%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(70% 80% at 0% 100%, rgba(24, 116, 184, 0.16), transparent 72%);
}
.slide-deco::after {
  content: ""; position: absolute; inset: -24px;
  background: radial-gradient(circle, var(--deco-strong) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(42% 46% at 22% 74%, var(--night), transparent 72%);
  mask-image: radial-gradient(42% 46% at 22% 74%, var(--night), transparent 72%);
  opacity: 0.55;
  translate: calc(var(--px, 0) * -8px) calc(var(--py, 0) * -8px);
  transition: translate 1.2s var(--ease-out);
}
/* the lobby's logo wall, left as an afterimage behind the copy: greyed, softened, a few percent, and faded out
   toward the photo and the bottom edge; it leans with the pointer like the dot grid */
.slide-ghost {
  position: absolute; inset: -32px;
  background: no-repeat var(--ghost-pos, 34% 50%) / var(--ghost-size, cover);
  opacity: 0.11; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(100deg, var(--night) 34%, transparent 62%), linear-gradient(to bottom, var(--night) 64%, transparent 96%);
  mask-image: linear-gradient(100deg, var(--night) 34%, transparent 62%), linear-gradient(to bottom, var(--night) 64%, transparent 96%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  translate: calc(var(--px, 0) * -6px) calc(var(--py, 0) * -6px);
  transition: translate 1.2s var(--ease-out), opacity 1.2s var(--ease-out);
}
.slide[data-theme="charcoal"] .slide-ghost { mix-blend-mode: screen; opacity: 0.13; }
.ghost-lobby { background-image: url("../assets/img/hero-ghost.webp"); }
.ghost-eye { background-image: url("../assets/img/hero-ghost-eye.webp"); }
.ghost-nose { background-image: url("../assets/img/hero-ghost-nose.webp"); }
.slide-ghost.is-drawing { --ghost-size: auto 118%; --ghost-pos: 6% 42%; opacity: 0.16; }
.slide-ghost.ghost-eye { --ghost-size: auto 140%; --ghost-pos: 4% 90%; } /* the eye sits behind the headline */
.slide[data-theme="charcoal"] .slide-ghost.is-drawing { filter: invert(1); opacity: 0.2; }
.js .slide:not(.is-active) .slide-ghost { opacity: 0; }
.slide-dial {
  position: absolute; left: 55%; top: 56%; height: 134%; width: auto; aspect-ratio: 1; overflow: visible;
  translate: calc(-50% + var(--px, 0) * 16px) calc(-50% + var(--py, 0) * 16px);
  opacity: 0; scale: 0.94;
  transition: opacity 1.2s var(--ease-out), scale 1.8s var(--ease-out), translate 1.2s var(--ease-out);
}
.slide.is-active .slide-dial { opacity: 1; scale: 1; }
.slide-dial circle, .slide-dial line { fill: none; stroke: var(--deco); stroke-width: 0.8; }
.slide-dial .dial-ticks circle { stroke-width: 12; }
.slide-dial .dial-ticks .dial-ticks-long { stroke: var(--deco-strong); stroke-width: 24; }
.slide-dial .dial-dash { stroke: var(--deco-strong); stroke-dasharray: 4 7; stroke-linecap: round; }
.slide-dial .dial-faint { stroke-dasharray: 1 5; }
.slide-dial .dial-guide { stroke-dasharray: 5 7; }
.slide-dial .dial-node { fill: var(--deco-strong); stroke: none; }
.dial-ticks, .dial-dash { transform-box: view-box; transform-origin: 0 0; }
.dial-ticks { animation: dial-turn 240s linear infinite; }
.dial-dash { animation: dial-turn 140s linear infinite reverse; }
@keyframes dial-turn { to { transform: rotate(360deg); } }

.slide-title {
  font-size: clamp(2.25rem, 4.3vw, 4.25rem); line-height: 1.17; font-weight: 750;
  letter-spacing: -0.038em; text-wrap: balance;
}
.slide-text { margin-top: 24px; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.65; max-width: 30em; }
.slide .btn-row { margin-top: 40px; }
.slide-copy > * { transition: transform 1s var(--ease-out), opacity 1s var(--ease-out); }
.js .slide:not(.is-active) .slide-copy > * { transform: translateY(26px); opacity: 0; }
.slide.is-active .slide-copy > :nth-child(2) { transition-delay: 0.08s; }
.slide.is-active .slide-copy > :nth-child(3) { transition-delay: 0.16s; }

.slide-copy { position: relative; z-index: 1; }
.slide-photo {
  position: relative; margin: 0; align-self: end; justify-self: end;
  width: calc(100% + var(--hero-pad)); margin-right: calc(-1 * var(--hero-pad)); margin-bottom: calc(-1 * (var(--hero-pad) + 56px));
  aspect-ratio: 1.02; max-height: calc(100% + var(--hero-pad) + 56px - 32px);
  border-top-left-radius: var(--radius-lg); overflow: hidden; background: var(--mist-2);
}
.slide-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.05); transition: transform 1.8s var(--ease-out); }
.slide.is-active .slide-photo img { transform: none; }
.slide[data-theme="charcoal"] .slide-photo img { object-position: 46% 18%; }
.slide[data-theme="mist"] .slide-photo img { object-position: 42% 22%; }


/* slide 1: structure notes on the skull. The svg is drawn in the photo's own pixels and covers the box the way the
   photo does; the chips are placed by main.js from the same numbers (--s, --ox, --oy = the photo's cover transform). */
.annot { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.annot circle, .annot path { fill: none; stroke: var(--mint-ink); vector-effect: non-scaling-stroke; }
.annot-ring { opacity: 0; transform-box: fill-box; transform-origin: center; scale: 0.92; transition: opacity 1.1s var(--ease-out) 0.5s, scale 1.6s var(--ease-out) 0.5s; }
.slide.is-active .annot-ring { opacity: 1; scale: 1; }
.annot-ticks { stroke-width: 9; stroke-opacity: 0.5; }
.annot-dash { stroke-width: 1.5; stroke-dasharray: 4 7; stroke-linecap: round; stroke-opacity: 0.85; }
.annot-faint { stroke-width: 1; stroke-dasharray: 1 5; stroke-opacity: 0.6; }
.annot-ticks, .annot-dash { transform-box: fill-box; transform-origin: center; }
.annot-ticks { animation: dial-turn 200s linear infinite; }
.annot-dash { animation: dial-turn 120s linear infinite reverse; }
.annot-node { fill: var(--mint-ink); stroke: #fff; stroke-width: 2; opacity: 0; transition: opacity 0.6s var(--ease-out) 1s; }
.annot-lead { stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--ease-out); }
.slide.is-active .annot-node { opacity: 1; }
.slide.is-active .annot-lead { stroke-dashoffset: 0; transition-delay: 1s; }
.annot-chip {
  position: absolute; z-index: 1;
  left: calc(var(--ox, 0px) + var(--x) * var(--s, 1) * 1px); top: calc(var(--oy, 0px) + var(--y) * var(--s, 1) * 1px);
  translate: 0 -50%; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: #fff; color: var(--mint-ink); font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 0 0 1px var(--line), 0 12px 24px -14px rgba(10, 38, 64, 0.5);
  opacity: 0; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); /* the rise is a transform (it composes with translate), not a margin */
}
.annot-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--mint); vertical-align: 1px; }
.annot-chip.is-l { translate: -100% -50%; }
.js .slide:not(.is-active) .annot-chip { opacity: 0; transform: translateY(8px); }
.slide.is-active .annot-chip { opacity: 1; transform: none; transition-delay: calc(1.3s + var(--i, 0) * 0.14s); }
/* slide 1: thin corner marks on the photo, like a viewfinder */
.photo-frame { position: absolute; inset: 22px; pointer-events: none; opacity: 0.55; }
.photo-frame::before, .photo-frame::after, .photo-frame i::before, .photo-frame i::after { content: ""; position: absolute; width: 20px; height: 20px; border: 0 solid var(--mint-ink); }
.photo-frame::before { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }
.photo-frame::after { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.photo-frame i::before { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; }
.photo-frame i::after { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }

.photo-caption {
  position: absolute; left: 24px; bottom: 24px;
  padding: 12px 18px; border-radius: 20px;
  background: #fff; color: var(--ink); font-size: 0.875rem; line-height: 1.45;
  box-shadow: 0 18px 34px -18px rgba(10, 38, 64, 0.55);
}
.photo-caption strong { display: block; font-size: 1rem; font-weight: 750; letter-spacing: -0.02em; }

/* The models, cut out of their old banners, stand on the slide's own field (the dial, the afterimage and the dot grid
   keep moving behind them). They sit on the right at about the weight of the copy, fade out toward the bottom, and move
   on the slide's clock: a slow rise and settle over 7.8s, held whenever the timer holds. */
.slide-cut {
  position: absolute; z-index: 1; right: clamp(56px, 8.5vw, 160px); bottom: 0; height: 74%; margin: 0; pointer-events: none;
  display: flex; align-items: flex-end;
}
.slide-cut::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 42%; width: 118%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.28) 55%, transparent 100%);
}
.slide[data-theme="charcoal"] .slide-cut::before { background: radial-gradient(closest-side, rgba(220, 235, 247, 0.16), rgba(220, 235, 247, 0.05) 55%, transparent 100%); }
.slide-cut img {
  height: 100%; width: auto; max-width: none; transform-origin: 50% 100%; will-change: transform;
  /* the banners cut the hair at their top edge: it dissolves instead of ending on a line */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 72%, transparent 100%);
}
.js .slide.is-active .slide-cut img { animation: cut-rise 7.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero-card.is-held .slide.is-active .slide-cut img,
.intro-hold .slide.is-active .slide-cut img { animation-play-state: paused; }
@keyframes cut-rise { from { transform: translateY(3%) scale(1.06); } to { transform: none; } }
.slide-eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.72;
}
.slide-eyebrow span { font-weight: 800; letter-spacing: 0.04em; }
.slide-eyebrow span::after { content: ""; display: inline-block; width: 32px; height: 1px; margin: 0 0 4px 12px; background: currentColor; opacity: 0.5; }
.slide-model {
  position: absolute; z-index: 2; right: clamp(20px, 2.4vw, 36px); bottom: clamp(18px, 2.2vw, 30px);
  font-size: 0.75rem; font-weight: 400; letter-spacing: 0.06em; color: rgba(20, 23, 27, 0.45);
}
.slide[data-theme="charcoal"] .slide-model { color: rgba(255, 255, 255, 0.55); }
.slide.is-active .slide-copy > :nth-child(4) { transition-delay: 0.24s; }

.hero-controls {
  position: absolute; z-index: 2; left: var(--hero-pad); bottom: clamp(28px, 3.6vw, 52px);
  display: flex; align-items: center; gap: 12px; color: #fff;
  transition: color 0.6s var(--ease-out);
}
.hero-card[data-active-theme="sky"] .hero-controls, .hero-card[data-active-theme="mist"] .hero-controls { color: var(--ink); }
.ctrl {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid currentColor; color: inherit;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.ctrl .icon { width: 20px; height: 20px; }
.ctrl:hover { background: rgba(255, 255, 255, 0.16); }
.hero-card[data-active-theme="sky"] .ctrl:hover, .hero-card[data-active-theme="mist"] .ctrl:hover { background: rgba(20, 23, 27, 0.08); }
.ctrl-toggle { border-color: transparent; }
.counter { display: flex; align-items: center; gap: 12px; font-weight: 650; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.counter b { font-weight: 800; }
.counter-bar { position: relative; width: 96px; height: 2px; background: color-mix(in srgb, currentColor 30%, transparent); overflow: hidden; border-radius: 999px; }
.counter-bar span { position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: left; }

/* ---------- concern (scroll story) ---------- */
/* Without the scroll story (no JS, reduced motion, short screens) it is a plain row of four cards, then the resolve. */
.concern { position: relative; padding-block: clamp(96px, 11vw, 160px); }
.concern-stage {
  position: relative; width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto;
  display: grid; gap: clamp(72px, 9vw, 120px); text-align: center;
}
.concern-deck { display: grid; justify-items: center; gap: 40px; }
.concern-title, .resolve-title {
  font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 750; line-height: 1.28; letter-spacing: -0.038em; text-wrap: balance;
}
.concern-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: 100%; }
/* each worry is a printed card: the photo sits in a white mat with its own rounded corners, the words under it
   open with a mint quote mark, and the link ends in a mint circle */
.concern-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; text-align: left;
  padding: 10px; border-radius: 26px; background: var(--paper); box-shadow: 0 0 0 1px var(--line);
}
.concern-photo { position: relative; flex: none; margin: 0; aspect-ratio: 6 / 5; overflow: hidden; border-radius: 18px; background: var(--mist); }
.concern-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.concern-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(20, 23, 27, 0.06); background: linear-gradient(180deg, rgba(6, 26, 45, 0) 62%, rgba(6, 26, 45, 0.16) 100%); pointer-events: none; }
.concern-card:hover .concern-photo img { transform: scale(1.04); }
.concern-photo figcaption {
  position: absolute; z-index: 1; left: 12px; top: 12px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.9); font-size: 0.75rem; font-weight: 650; color: var(--ink-2);
}
.concern-quote {
  flex: 1; padding: 20px 16px 0; color: var(--ink);
  font-size: clamp(1.1875rem, calc(var(--card-w, 300px) * 0.058), 1.625rem); font-weight: 750; line-height: 1.42; letter-spacing: -0.03em; text-wrap: balance;
}
.concern-quote::before {
  content: "\201C"; display: block; height: 0.42em; margin-bottom: 12px;
  font-family: Georgia, "Times New Roman", serif; font-size: 2.8em; font-weight: 700; line-height: 1; color: var(--mint);
}
.concern-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 6px 4px 16px; padding-top: 14px;
  border-top: 1px solid var(--line-2); font-size: 0.9375rem; font-weight: 700; color: var(--mint-ink);
}
.concern-link .icon {
  box-sizing: content-box; width: 18px; height: 18px; padding: 9px; border-radius: 50%;
  background: var(--mint); color: #fff; transition: transform 0.35s var(--ease-out), background-color 0.3s var(--ease-out);
}
.concern-link:hover { color: var(--mint-ink-600); }
.concern-link:hover .icon { transform: translateX(3px); background: var(--mint-600); }
.concern-nav { display: none; }
.concern-resolve { display: grid; justify-items: center; gap: 40px; }
.resolve-title { color: var(--ink); }
/* the one word the section turns on, underlined in a mint-to-rose band that draws itself in */
.resolve-hl {
  background: linear-gradient(90deg, rgba(24, 116, 184, 0.34), rgba(236, 170, 194, 0.42)) no-repeat 0 88% / 100% 0.34em;
  padding: 0 0.04em;
}
.js .is-scrolly .resolve-hl { background-size: 0% 0.34em; transition: background-size 1.1s var(--ease-out) 1s; }
.js .is-scrolly .concern-resolve.is-on .resolve-hl { background-size: 100% 0.34em; }
/* the four worries close into one stack, then one order: three photo circles on a dashed guide line */
.resolve-faces { display: grid; justify-items: center; gap: 10px; }
.resolve-faces ul { display: flex; }
.resolve-faces li { width: 56px; height: 56px; margin-left: -14px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--line), 0 12px 22px -12px rgba(10, 38, 64, 0.45); }
.resolve-faces li:first-child { margin-left: 0; }
.resolve-faces img { width: 100%; height: 100%; object-fit: cover; }
.resolve-faces span { font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
.steps {
  --pic: clamp(112px, 13vw, 184px);
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 4vw, 64px); width: min(100%, 940px);
}
/* the guide line runs through the circles' centres; a blue dot walks it from 구조 to 방법 */
.steps::before {
  content: ""; position: absolute; left: 16.7%; right: 16.7%; top: calc(var(--pic) / 2); border-top: 1.5px dashed var(--mint-ink);
}
.steps::after {
  content: ""; position: absolute; left: 16.7%; top: calc(var(--pic) / 2 - 5px); width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(24, 116, 184, 0.16); opacity: 0;
}
.steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; }
.step-pic { position: relative; z-index: 1; width: var(--pic); margin: 0 0 18px; }
.step-pic img {
  width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--mist);
  box-shadow: 0 0 0 8px var(--paper), 0 0 0 9px var(--mint-ink), 0 30px 46px -26px rgba(10, 38, 64, 0.45); /* the blue second line, with a white gap that hides the guide line */
}
/* each circle breathes a soft blush-and-mint halo, and a dashed orbit with one mint bead turns slowly around it */
.step-pic::before, .step-pic::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none;
}
.step-pic::before {
  z-index: -1; width: 168%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(236, 178, 196, 0.34), rgba(24, 116, 184, 0.14) 58%, rgba(24, 116, 184, 0) 100%);
  translate: -50% -50%; animation: step-breathe 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.8s);
}
.step-pic::after {
  width: calc(100% + 40px); aspect-ratio: 1; translate: -50% -50%;
  border: 1px dashed rgba(19, 95, 152, 0.4);
  background: radial-gradient(circle at 50% 0, var(--mint) 3.5px, rgba(24, 116, 184, 0.25) 5px, transparent 8px);
  animation: dial-turn calc(34s + var(--i, 0) * 6s) linear infinite;
}
@keyframes step-breathe { from { scale: 0.92; opacity: 0.75; } to { scale: 1.06; opacity: 1; } }
.step-pic figcaption {
  position: absolute; z-index: 1; left: 50%; bottom: -8px; translate: -50% 0; padding: 2px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--paper); font-size: 0.8125rem; font-weight: 600; color: var(--ink-3);
}
.step-name { display: flex; align-items: center; gap: 8px; }
.step-no { display: inline-grid; place-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--sky); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; color: var(--mint-ink); font-variant-numeric: tabular-nums; }
.step-name b { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 800; letter-spacing: -0.03em; }
.step-text { max-width: 15em; color: var(--ink-2); font-size: 1rem; line-height: 1.55; text-wrap: balance; }


/* The scroll story: a 640vh track under a 100svh sticky stage. A night-blue region the size of the hero card holds
   the four worry cards on the inside of a curve (main.js places them every frame from the scroll position); each card
   holds at the front for a stretch, then the deck folds into one stack, the region fades to paper, and the resolve builds. */
.js .concern.is-scrolly { height: 640vh; padding: 0; }
.js .concern.is-scrolly .concern-stage {
  position: sticky; top: 0; height: 100svh; width: 100%; display: block; overflow: hidden; isolation: isolate;
  --stage-top: var(--header-h); --stage-bottom: var(--inset);
}
.js .is-scrolly .concern-stage::before {
  content: ""; position: absolute; z-index: -1;
  inset: var(--stage-top) var(--inset) var(--stage-bottom);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 70% at 50% 58%, rgba(24, 116, 184, 0.22), transparent 70%),
    var(--night);
  transition: opacity 0.9s var(--ease-out);
}
.js .is-scrolly.is-resolved .concern-stage::before { opacity: 0; }
/* the region's moving backdrop (main.js draws it): a slow aurora, drifting bokeh, twinkling glints and falling blossom
   petals, clipped to the region's corners; it fades with the region once the resolve takes over */
.concern-sky { display: none; }
.js .is-scrolly .concern-sky {
  display: block; position: absolute; z-index: -1; pointer-events: none;
  top: var(--stage-top); left: var(--inset);
  width: calc(100% - 2 * var(--inset)); height: calc(100% - var(--stage-top) - var(--stage-bottom));
  border-radius: var(--radius-lg); transition: opacity 0.9s var(--ease-out);
}
.js .is-scrolly.is-resolved .concern-sky { opacity: 0; }
/* after the fold, a light version of the same backdrop drifts behind the resolve on white */
.resolve-sky { display: none; }
.js .is-scrolly .resolve-sky {
  display: block; position: absolute; z-index: -1; pointer-events: none;
  top: var(--stage-top); left: 0; width: 100%; height: calc(100% - var(--stage-top));
  opacity: 0; transition: opacity 1.2s var(--ease-out) 0.2s;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
}
.js .is-scrolly.is-resolved .resolve-sky { opacity: 1; }

.js .is-scrolly .concern-deck {
  --card-w: clamp(232px, min(27vw, (100svh - var(--header-h) - var(--inset) - 300px) * 0.72), 392px);
  --lift: 0; /* 0..1 while the deck folds away (main.js) */
  position: absolute; inset: var(--stage-top) var(--inset) var(--stage-bottom);
  display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center; gap: clamp(16px, 3vh, 32px);
  padding: clamp(28px, 6vh, 64px) 0 clamp(20px, 4.5vh, 44px);
  perspective: 1500px; perspective-origin: 50% 45%;
  overflow: hidden; border-radius: var(--radius-lg); /* side cards never spill past the region */
}
.js .is-scrolly .concern-title {
  color: #fff; font-size: clamp(2rem, 3.2vw, 2.5rem);
  opacity: calc(1 - var(--lift)); transform: translateY(calc(var(--lift) * -24px));
}
.js .is-scrolly .concern-cards {
  display: grid; grid-template-columns: 100%; width: var(--card-w); gap: 0; transform-style: preserve-3d;
}
.js .is-scrolly .concern-card {
  grid-area: 1 / 1; box-shadow: none;
  backface-visibility: hidden; will-change: transform, opacity; cursor: pointer;
  transition: box-shadow 0.6s var(--ease-out);
}
/* only the front card casts a shadow: the side cards' shadows would be drawn over it where the curve overlaps */
.js .is-scrolly .concern-card.is-front { box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.6), 0 14px 28px -18px rgba(0, 0, 0, 0.5); }
.js .is-scrolly .concern-card.is-front { cursor: auto; }
/* cards off the front sink into the night: --dim runs 0 (front) to 1 (one place away) */
.js .is-scrolly .concern-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--night); opacity: calc(var(--dim, 1) * 0.5);
}

.js .is-scrolly .concern-nav {
  display: flex; align-items: center; gap: 20px; color: #fff;
  opacity: calc(1 - var(--lift));
}
.js .is-scrolly .concern-nav .ctrl:disabled { opacity: 0.32; cursor: default; }
.js .is-scrolly .concern-nav .ctrl:disabled:hover { background: none; }
.concern-bar { position: relative; width: 128px; height: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.24); overflow: hidden; }
.concern-bar span { position: absolute; inset: 0 auto 0 0; width: 25%; border-radius: inherit; background: #fff; }

.js .is-scrolly .concern-resolve {
  position: absolute; inset: var(--header-h) var(--gutter) 0; padding-bottom: 40px;
  display: grid; place-content: center; justify-items: center; gap: 32px;
  opacity: 0; filter: blur(12px); transform: translateY(48px); visibility: hidden;
  transition: opacity 0.8s var(--ease-out), filter 0.8s var(--ease-out), transform 1.1s var(--ease-out), visibility 0s 0.8s;
}
.js .is-scrolly .concern-resolve.is-on {
  opacity: 1; filter: blur(0); transform: none; visibility: visible;
  transition: opacity 0.8s var(--ease-out) 0.25s, filter 0.8s var(--ease-out) 0.25s, transform 1.1s var(--ease-out) 0.25s, visibility 0s;
}
/* the last step builds itself: faces close up, the line draws, the circles come in one by one, the dot walks */
.js .is-scrolly .resolve-faces li { transform: translateX(calc(var(--k) * 40px)); transition: transform 1.1s var(--ease-out) 0.4s; }
.js .is-scrolly .concern-resolve.is-on .resolve-faces li { transform: none; }
.js .is-scrolly .steps::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease-out) 0.8s; }
.js .is-scrolly .concern-resolve.is-on .steps::before { clip-path: inset(0 0 0 0); }
.js .is-scrolly .steps li { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(0.7s + var(--i) * 0.28s); }
.js .is-scrolly .concern-resolve.is-on .steps li { opacity: 1; transform: none; }
.js .is-scrolly .concern-resolve.is-on .steps::after { animation: step-walk 3.6s var(--ease-out) 2.45s infinite; }
@keyframes step-walk {
  0% { left: 16.7%; opacity: 0; }
  12% { opacity: 1; }
  78% { left: 83.3%; opacity: 1; }
  100% { left: 83.3%; opacity: 0; }
}

/* ---------- section titles ---------- */
.section-head { display: grid; }
.section-head.center { text-align: center; justify-items: center; }
.section-title { font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.24; font-weight: 750; letter-spacing: -0.038em; text-wrap: balance; }
.section-lead { margin-top: 20px; max-width: 38em; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); color: var(--ink-2); }

/* ---------- promise ---------- */
.promise { padding-block: clamp(40px, 5vw, 80px) clamp(96px, 11vw, 160px); }
.promise-list { margin-top: 56px; border-top: 1.5px solid var(--ink); }
.promise-list li {
  position: relative; display: grid; grid-template-columns: clamp(160px, 17vw, 248px) minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 16px clamp(28px, 4vw, 72px); align-items: center;
  padding: clamp(32px, 3.6vw, 48px) 0; border-bottom: 1px solid var(--line);
}
.promise-list li::before {
  content: ""; position: absolute; left: 0; top: -1.5px; height: 3px; width: 100%;
  background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out);
}
.promise-list li.is-in::before, .promise-list li:hover::before { transform: scaleX(1); }
.promise-head { font-size: clamp(1.625rem, 2.7vw, 2.5rem); font-weight: 750; line-height: 1.3; letter-spacing: -0.035em; text-wrap: balance; }
.promise-body { font-size: 1.0625rem; color: var(--ink-2); max-width: 30em; }
.promise-photo { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.promise-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.promise-list li:hover .promise-photo img { transform: scale(1.06); }
.js .promise-photo { clip-path: inset(0 100% 0 0 round var(--radius)); transition: clip-path 1.3s var(--ease-out) 0.1s; }
.js .promise-list li.is-in .promise-photo { clip-path: inset(0 0 0 0 round var(--radius)); }

/* ---------- program ---------- */
.program { position: relative; overflow: hidden; padding-block: clamp(96px, 11vw, 160px); background: var(--mist); border-radius: var(--radius-lg); margin-inline: var(--inset); --deco: rgba(19, 95, 152, 0.16); --deco-strong: rgba(19, 95, 152, 0.42); }
.program > .container { position: relative; z-index: 1; }
/* the section's own field: a light, a dot grid, the dial behind the photo, and one faint drawing of the part per tab */
.program-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.program-deco::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 8% 12%, rgba(255, 255, 255, 0.85), transparent 64%),
    radial-gradient(50% 60% at 96% 90%, rgba(24, 116, 184, 0.18), transparent 70%);
}
.program-deco::after {
  content: ""; position: absolute; inset: -24px;
  background: radial-gradient(circle, var(--deco-strong) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(38% 42% at 18% 88%, var(--night), transparent 72%);
  mask-image: radial-gradient(38% 42% at 18% 88%, var(--night), transparent 72%);
  opacity: 0.5;
}
.program-dial { display: none; } /* its rings ran through the part index; the card covers the rest */
.program-ghost {
  position: absolute; inset: -32px;
  background: no-repeat 2% 46% / auto 112%;
  opacity: 0; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(100deg, var(--night) 30%, transparent 56%), linear-gradient(to bottom, var(--night) 70%, transparent 98%);
  mask-image: linear-gradient(100deg, var(--night) 30%, transparent 56%), linear-gradient(to bottom, var(--night) 70%, transparent 98%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transition: opacity 1.2s var(--ease-out);
}
.program-ghost.is-on { opacity: var(--ghost-o, 0.2); }
.ghost-p-eye { background-image: url("../assets/img/prog-ghost-eye.webp"); }
.ghost-p-nose { background-image: url("../assets/img/prog-ghost-nose.webp"); background-position: 0% 0%; background-size: auto 150%; }
.ghost-p-midage { background-image: url("../assets/img/prog-ghost-midage.webp"); }
.ghost-p-lifting { background-image: url("../assets/img/prog-ghost-lifting.webp"); background-position: 0% 0%; background-size: auto 140%; --ghost-o: 0.16; }
.ghost-p-skin { background-image: url("../assets/img/prog-ghost-skin.webp"); background-position: 6% 30%; background-size: auto 95%; --ghost-o: 0.11; }
/* The section reads as a consultation index: the five parts listed on the left, and for the chosen part a note card
   that says what the clinic looks at first (three numbered checks on a dashed guide, the brand's line), then the
   methods it chooses between, the treatment pages, and the surgery facts along the foot. */
.program-body {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start;
}
/* the index */
.tabs { display: flex; flex-direction: column; gap: 6px; }
.tab {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; align-items: center; gap: 14px;
  width: 100%; padding: 12px 16px 12px 12px; border-radius: 22px; text-align: left; color: var(--ink-3);
  transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), color 0.3s var(--ease-out);
}
.tab-thumb { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--mist-2); box-shadow: 0 0 0 3px #fff; }
.tab-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0.7; transition: filter 0.4s var(--ease-out), opacity 0.4s var(--ease-out); }
.tab-text { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; min-width: 0; }
.tab-no { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tab-name { font-size: 1.1875rem; font-weight: 750; letter-spacing: -0.03em; color: var(--ink-2); }
.tab-key { grid-column: 1 / -1; margin-top: 2px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-go { width: 18px; height: 18px; color: var(--mint-ink); opacity: 0; transform: translateX(-6px); transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out); }
.tab:hover { background: rgba(255, 255, 255, 0.6); }
.tab:hover .tab-thumb img { filter: grayscale(0.4); opacity: 0.9; }
.tab[aria-selected="true"] { background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 22px 40px -30px rgba(10, 38, 64, 0.55); }
.tab[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--mint-ink); }
.tab[aria-selected="true"] .tab-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--mint-ink); }
.tab[aria-selected="true"] .tab-thumb img { filter: none; opacity: 1; }
.tab[aria-selected="true"] .tab-no { color: var(--mint-ink); }
.tab[aria-selected="true"] .tab-name { color: var(--ink); }
.tab[aria-selected="true"] .tab-go { opacity: 1; transform: none; }

/* the note card */
.panel {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-areas: "fig copy" "spec spec";
  border-radius: var(--radius-lg); overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px var(--line-2), 0 50px 90px -60px rgba(10, 38, 64, 0.55);
}
.panel[hidden] { display: none; }
.panel:focus-visible { outline-offset: 6px; }
.panel.is-entering .panel-copy > * { animation: rise 0.8s var(--ease-out) both; }
.panel.is-entering .panel-copy > :nth-child(2) { animation-delay: 0.05s; }
.panel.is-entering .panel-copy > :nth-child(3) { animation-delay: 0.1s; }
.panel.is-entering .panel-copy > :nth-child(4) { animation-delay: 0.15s; }
.panel.is-entering .panel-copy > :nth-child(5) { animation-delay: 0.2s; }
.panel.is-entering .panel-copy > :nth-child(6) { animation-delay: 0.25s; }
.panel.is-entering .panel-figure img { animation: settle 1.2s var(--ease-out) both; }
.panel.is-entering .checks li::before { animation: check-fill 0.5s var(--ease-out) both; animation-delay: calc(0.45s + var(--n) * 0.18s); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes settle { from { opacity: 0; transform: scale(1.06); } }
@keyframes check-fill { from { background: #fff; color: var(--mint-ink); } }

.panel-figure { grid-area: fig; position: relative; margin: 0; min-height: 100%; overflow: hidden; background: var(--mist-2); }
.panel-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 20%; }
/* each model's face sits at a different place in her photo; the tall crop keeps it in frame */
#panel-eye .panel-figure img { object-position: 0% 30%; }
#panel-nose .panel-figure img { object-position: 8% 30%; }
#panel-midage .panel-figure img { object-position: 24% 20%; }
#panel-lifting .panel-figure img { object-position: 40% 20%; }
#panel-skin .panel-figure img { object-position: 42% 30%; }
.panel-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 26, 45, 0) 55%, rgba(6, 26, 45, 0.55) 100%); pointer-events: none; }
.panel-figure figcaption {
  position: absolute; z-index: 1; left: 18px; top: 18px; padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.9); font-size: 0.75rem; font-weight: 650; color: var(--ink-2);
}
.panel-mark { position: absolute; z-index: 1; left: 24px; bottom: 20px; display: flex; align-items: baseline; gap: 10px; color: #fff; font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; }
.panel-mark b { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 300; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

.panel-copy { grid-area: copy; padding: clamp(28px, 3.4vw, 48px); }
.panel-title { font-size: clamp(1.5rem, 2.3vw, 2.125rem); line-height: 1.3; font-weight: 750; letter-spacing: -0.037em; text-wrap: balance; }
.note-label {
  display: flex; align-items: center; gap: 12px; margin-top: 28px;
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; color: var(--mint-ink);
}
.note-label::after { content: ""; flex: 1; border-top: 1px dashed rgba(19, 95, 152, 0.35); }
/* three checks on the brand's dashed guide; the numbers fill in order as the card enters */
.checks { position: relative; margin-top: 16px; display: grid; gap: 16px; counter-reset: check; }
.checks::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; border-left: 1.5px dashed rgba(19, 95, 152, 0.45); }
.checks li { position: relative; display: grid; gap: 2px; min-height: 32px; padding-left: 48px; }
.checks li:nth-child(1) { --n: 0; } .checks li:nth-child(2) { --n: 1; } .checks li:nth-child(3) { --n: 2; }
.checks li::before {
  counter-increment: check; content: counter(check);
  position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--mint-ink); color: #fff; box-shadow: 0 0 0 1.5px var(--mint-ink), 0 0 0 5px #fff;
  font-size: 0.875rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.checks b { font-size: 1.125rem; font-weight: 750; letter-spacing: -0.02em; }
.checks span { font-size: 0.9375rem; color: var(--ink-2); }
.methods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.methods li { padding: 8px 14px; border-radius: 12px; background: var(--sky); font-size: 0.9375rem; font-weight: 700; color: var(--mint-ink-600); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chips a, .chips button {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.01em;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.chips a:hover, .chips button:hover { border-color: var(--mint-ink); color: var(--mint-ink); }
/* in the note card the chips are the treatment pages: smaller, under a hairline, each marked as a link out */
.note-links { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-2); gap: 6px; }
.note-links a { min-height: 38px; padding: 0 12px 0 14px; gap: 4px; font-size: 0.875rem; }
.note-links a::after { content: "\2197"; font-size: 0.8125rem; color: var(--ink-3); transition: color 0.25s var(--ease-out); }
.note-links a:hover::after { color: var(--mint-ink); }

/* the card's foot: the surgery facts */
.spec { grid-area: spec; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; background: var(--mist); border-top: 1px solid var(--line-2); }
.spec div { padding: 16px clamp(16px, 2vw, 28px) 18px; }
.spec div + div { border-left: 1px solid var(--line-2); }
.spec dt { font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
.spec dd { margin-top: 2px; font-size: 1.0625rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* the arrows and count serve phones, where the index becomes a strip */
.panel-nav { display: none; align-items: center; gap: 10px; margin-top: 28px; }
.panel-nav .counter { margin-right: 12px; color: var(--ink); }
.ctrl-line { border-color: var(--line); color: var(--ink); background: #fff; }
.ctrl-line:hover { border-color: var(--ink); background: #fff; }
.program-note { margin-top: 20px; font-size: 0.875rem; color: var(--ink-3); }

/* ---------- finder ---------- */
.finder { padding-block: clamp(96px, 11vw, 160px); }
.finder-form {
  margin: 48px auto 0; width: min(100%, 880px);
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px clamp(22px, 3vw, 36px);
  background: #fff; border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 0 24px 44px -32px rgba(10, 38, 64, 0.6);
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.finder-form:focus-within { border-color: var(--mint-ink); box-shadow: 0 0 0 5px rgba(24, 116, 184, 0.16), 0 24px 44px -32px rgba(10, 38, 64, 0.6); }
.finder-form input {
  flex: 1; min-width: 0; height: 64px; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 750; letter-spacing: -0.035em; color: var(--ink);
}
.finder-form input::placeholder { color: var(--ink-3); opacity: 1; }
.finder-form input::-webkit-search-cancel-button { display: none; }
.finder-submit {
  display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: var(--ink); color: #fff; transition: background-color 0.3s var(--ease-out);
}
.finder-submit:hover { background: var(--mint); color: #fff; }
.finder-submit .icon { width: 26px; height: 26px; }
.finder-status { min-height: 1.7em; margin-top: 18px; text-align: center; font-weight: 650; color: var(--mint-ink-600); }
.finder-keys { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 20px; }
.finder-keys-label { font-weight: 750; }
.finder-keys .chips { margin-top: 0; justify-content: center; }
.chips-soft button { background: var(--mist); border-color: transparent; }
.chips-soft button:hover { background: #fff; }

/* ---------- doctor ---------- */
.doctor { padding-block: clamp(96px, 11vw, 170px); }
.doctor-inner {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(40px, 6vw, 112px); align-items: center;
}
.doctor-photo {
  position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--mist); outline: 1px solid var(--mint-ink); outline-offset: 16px;
}
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 18%; }
.js .doctor-photo img { clip-path: inset(10% 10% 10% 10% round 28px); transform: scale(1.06); transition: clip-path 1.4s var(--ease-out), transform 1.6s var(--ease-out); }
.js .doctor-photo.is-in img { clip-path: inset(0 0 0 0 round 0); transform: none; }
.doctor-title { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; font-weight: 750; letter-spacing: -0.04em; text-wrap: balance; }
.doctor-name { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 1.25rem; }
.doctor-name strong { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 800; letter-spacing: -0.02em; }
.doctor-name span { padding: 4px 12px; border: 1px solid var(--ink); border-radius: 999px; font-size: 0.875rem; font-weight: 650; }
.doctor-text { margin-top: 20px; max-width: 33em; font-size: 1.0625rem; color: var(--ink-2); }
.cred {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px;
}
.cred li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.9375rem; }
.cred li::before { content: ""; flex: none; align-self: center; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.verify { padding: 2px 10px; border-radius: 999px; background: #fff1bf; color: #5c4300; font-size: 0.8125rem; font-weight: 700; }
.doctor .btn-row { margin-top: 36px; }

/* ---------- statement ---------- */
.statement {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(112px, 13vw, 210px); background: #dcebf7; color: var(--ink); text-align: center;
}
.statement-glyph { position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -50%; width: min(80vw, 1000px); height: auto; pointer-events: none; }
.statement-glyph text { font-family: var(--serif-kr); font-size: 96px; font-weight: 500; fill: rgba(24, 116, 184, 0.2); }
.statement-line { font-family: var(--serif-kr); font-size: clamp(2.375rem, 6.6vw, 5.5rem); font-weight: 500; line-height: 1.16; letter-spacing: -0.05em; }
.statement-line span { color: #135f98; }
.statement-sub { margin-top: 28px; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); font-weight: 600; }

/* ---------- recovery ---------- */
.recovery { padding-block: clamp(96px, 11vw, 160px); background: var(--mist); border-radius: var(--radius-lg); margin-inline: var(--inset); }
.recovery-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.recovery-warn {
  margin-top: 28px; padding: 20px 24px; border-radius: var(--radius);
  background: #fff; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.7;
}
.table-wrap { background: #fff; border-radius: var(--radius-lg); padding: clamp(16px, 2.6vw, 36px); overflow-x: auto; }
.recovery-table { width: 100%; border-collapse: collapse; }
.recovery-table th, .recovery-table td { padding: 18px 14px; text-align: left; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.recovery-table thead th { font-size: 0.8125rem; font-weight: 650; color: var(--ink-3); border-bottom: 1.5px solid var(--ink); padding-top: 4px; }
.recovery-table tbody th { font-weight: 750; letter-spacing: -0.02em; }
.recovery-table tbody th small { display: block; font-size: 0.8125rem; font-weight: 550; color: var(--ink-3); }
.recovery-table td:last-child { font-weight: 750; color: var(--mint-ink-600); }
.recovery-table tbody tr { transition: background-color 0.25s var(--ease-out); }
.recovery-table tbody tr:hover { background: var(--mist); }
.recovery-table tbody tr:last-child th, .recovery-table tbody tr:last-child td { border-bottom: 0; }
.table-note { margin-top: 16px; font-size: 0.8125rem; color: var(--ink-3); }

/* ---------- visit ---------- */
.visit { padding-block: clamp(96px, 11vw, 160px); }
.visit-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.visit-info { margin-top: 40px; border-top: 1.5px solid var(--ink); }
.visit-info div { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.visit-info dt { font-weight: 750; }
.visit-info dd small { display: block; margin-top: 4px; font-size: 0.875rem; color: var(--ink-3); }
.hours { display: flex; gap: 16px; font-variant-numeric: tabular-nums; }
.hours span:first-child { width: 56px; color: var(--ink-2); }
.tel { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 800; letter-spacing: -0.02em; color: var(--mint-ink); font-variant-numeric: tabular-nums; }
.tel:hover { text-decoration: underline; }
.visit .btn-row { margin-top: 36px; }
.visit-map svg { width: 100%; height: auto; }
.visit-map figcaption { margin-top: 12px; font-size: 0.8125rem; color: var(--ink-3); }
.map-ground { fill: var(--mist); }
.map-road { fill: none; stroke: #fff; stroke-width: 34; stroke-linecap: round; }
.map-road-v { stroke-width: 26; }
.map-station circle { fill: var(--ink); }
.map-station-num { fill: #fff; font-size: 18px; font-weight: 800; }
.map-label { fill: var(--ink-2); font-size: 18px; font-weight: 650; }
.map-poi circle { fill: var(--ink-3); }
.map-dest rect { fill: var(--mint-ink); }
.map-dest-name { fill: #fff; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.map-dest-sub { fill: #fff; font-size: 14px; font-weight: 600; }
.map-walk { fill: none; stroke: var(--mint-ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; }
/* the route sweeps in once, then keeps flowing toward the clinic (one 11-unit dash period at a time) */
.js .map-walk { stroke-dashoffset: 400; transition: stroke-dashoffset 2.4s var(--ease-out); }
.js .visit-map.is-in .map-walk { stroke-dashoffset: 0; animation: map-march 0.6s linear 2.4s infinite; }
@keyframes map-march { to { stroke-dashoffset: -11; } }
/* a walker (index.html: SMIL, so it runs in every browser) leaves exit 6, walks the route and fades into the building */
.map-walker-halo { fill: var(--mint); opacity: 0.22; }
.map-walker-dot { fill: var(--mint-ink); stroke: #fff; stroke-width: 2.5; }
.js .visit-map:not(.is-in) .map-walker { visibility: hidden; }

/* ---------- cta ---------- */
.cta { padding: 0 var(--inset) clamp(56px, 6vw, 96px); }
.cta-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 40px; align-items: end;
  padding: clamp(48px, 7vw, 112px); border-radius: var(--radius-lg);
  background: var(--charcoal); color: #fff;
}
.cta-card::before, .cta-card::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18);
}
/* two concentric rings kept to the top-right corner, clear of the text and the buttons */
.cta-card::before { width: 400px; height: 400px; right: -150px; top: -250px; }
.cta-card::after { width: 260px; height: 260px; right: -80px; top: -180px; border-color: rgba(255, 255, 255, 0.12); }
.cta-title { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.22; font-weight: 750; letter-spacing: -0.038em; text-wrap: balance; }
.cta-text { margin-top: 20px; max-width: 32em; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); }
.cta-actions { display: grid; gap: 12px; }
.cta-actions .btn-white { color: var(--charcoal); }
.cta-fine { text-align: center; font-size: 0.875rem; }
/* the operating-room photo (tools/build_cta_photo.py: a navy duotone), half transparent, fading into the card at both
   sides. The surgeon's face (37% across the photo) is set on the middle of the gap between the copy and the buttons:
   the copy is at most 32em of .cta-text wide, the buttons' column starts 62.5% of the way across the padded width. */
.cta-card { --cta-pad: clamp(48px, 7vw, 112px); }
.cta-photo {
  --w: min(54%, 820px);
  --col: calc((100% - 2 * var(--cta-pad) - 40px) * 0.625);
  --copy: min(calc(32 * clamp(17px, 1.25vw, 19px)), var(--col));
  --mid: calc(var(--cta-pad) + (var(--copy) + var(--col) + 40px) / 2);
  position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(var(--mid) - 0.37 * var(--w)); width: var(--w);
  margin: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--night) 34%, var(--night) 52%, transparent 94%);
  mask-image: linear-gradient(90deg, transparent, var(--night) 34%, var(--night) 52%, transparent 94%);
}
.cta-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 37% 28%; opacity: 0.44; }

/* ---------- footer ---------- */
.site-footer { background: var(--night); color: #c1ccd8; padding-block: 64px 56px; margin-top: 0; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-top img { width: 136px; height: auto; } /* the logo file has no margin now: 136px is the size it was drawn at */
.footer-sns { display: flex; gap: 10px; }
.footer-sns a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); color: #fff; transition: background-color 0.25s var(--ease-out);
}
.footer-sns a:hover { background: var(--mint); color: #fff; }
.footer-sns .icon { width: 22px; height: 22px; }
.footer-info { margin-top: 36px; font-size: 0.875rem; line-height: 1.95; }
.footer-info span { display: inline-block; }
.footer-info span + span::before {
  content: ""; display: inline-block; width: 1px; height: 11px; margin: 0 12px; vertical-align: -1px;
  background: rgba(255, 255, 255, 0.25);
}
.footer-info br + span::before { display: none; }
.footer-links { margin-top: 18px; display: flex; gap: 20px; font-size: 0.875rem; font-weight: 700; color: #fff; }
.footer-links a:hover { text-decoration: underline; }
.footer-notice { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.8125rem; color: #93a3b5; }
.footer-copy { margin-top: 10px; font-size: 0.8125rem; color: #93a3b5; }

/* ---------- quick menu (PC) ---------- */
.quick { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: grid; justify-items: end; gap: 12px; transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out); }
.quick.is-hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
/* the toggle is a round badge (after the reference's MENU badge): its words run round the rim, turning slowly
   clockwise, two short bars and 상담 in the middle; open, the bars give way to a close mark */
.quick-toggle {
  position: relative; display: grid; place-items: center; align-content: center; gap: 5px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--mint); color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 18px 34px -14px rgba(19, 95, 152, 0.75);
  transition: background-color 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}
.quick-toggle:hover { background: var(--mint-600); transform: translateY(-2px); }
.quick-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: dial-turn 24s linear infinite; }
.quick-ring text { fill: rgba(255, 255, 255, 0.9); font-size: 8.6px; font-weight: 600; letter-spacing: 0.08em; }
.quick-bars { width: 20px; height: 7px; border-top: 1.5px solid; border-bottom: 1.5px solid; }
.quick-label { font-size: 1rem; font-weight: 750; line-height: 1; letter-spacing: 0.02em; }
.quick-toggle .icon-close { display: none; width: 20px; height: 20px; }
.quick-toggle[aria-expanded="true"] .quick-bars { display: none; }
.quick-toggle[aria-expanded="true"] .icon-close { display: block; }
.quick-list {
  display: grid; gap: 2px; padding: 8px; border-radius: 20px; background: #fff;
  border: 1px solid var(--line-2); box-shadow: 0 26px 50px -22px rgba(10, 38, 64, 0.45);
  transform-origin: bottom right; animation: pop 0.4s var(--ease-out);
}
.quick-list[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.quick-list a {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 14px;
  border-radius: 12px; font-size: 0.9375rem; font-weight: 650;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.quick-list a:hover { background: var(--mist); color: var(--mint-ink); }
.quick-list .icon { width: 22px; height: 22px; color: var(--mint-ink); }
/* the foot row: the number to call, and back to the top */
.quick-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line-2); }
.quick-list .quick-foot a { min-height: 40px; padding: 0 12px; font-size: 0.875rem; }
.quick-list .quick-tel { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink); }
.quick-list .quick-top { gap: 6px; color: var(--ink-3); }
.quick-list .quick-top .icon { width: 18px; height: 18px; color: var(--ink-3); }

/* ---------- machine translation (main.js): the note, and Google's own bar, balloon and highlight kept out ---------- */
.mt-note {
  position: fixed; left: 24px; bottom: 24px; z-index: 61; display: flex; align-items: center; gap: 4px;
  max-width: min(520px, calc(100% - 140px)); padding: 6px 6px 6px 16px; border-radius: 999px;
  background: rgba(6, 26, 45, 0.92); color: #fff; font-size: 0.8125rem; font-weight: 600; line-height: 1.45;
  box-shadow: 0 18px 36px -18px rgba(6, 26, 45, 0.7);
}
.mt-note-close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: rgba(255, 255, 255, 0.8); }
.mt-note-close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.mt-note-close .icon { width: 16px; height: 16px; }
body { top: 0 !important; } /* the translate bar would push the page down */
.skiptranslate > iframe, iframe.skiptranslate, #goog-gt-tt, #goog-gt-vt, .goog-te-balloon-frame, #gt-el { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ---------- mobile bar ---------- */
.mobile-bar { display: none; }

/* ---------- first-visit intro (once a day, like the reference) ----------
   The lobby wall pushes in slowly under a navy veil, the line types in one character at a time,
   holds, then the whole layer slides off to the left (ease-in: it leaves, it does not arrive). */
.intro { display: none; }
.intro-on .intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 0 var(--gutter);
  background: var(--charcoal); color: #fff; overflow: hidden; touch-action: none;
  transition: transform 1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  animation: intro-failsafe 0.6s var(--ease-out) 7s both; /* if the script never runs, get out of the way */
}
.intro.is-armed { animation: none; }
.intro.is-leaving { transform: translateX(-100%); }
.intro::after { content: ""; position: absolute; inset: 0; background: rgba(10, 38, 64, 0.55); }
.intro-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.9s var(--ease-out);
}
.intro-bg.is-loaded { opacity: 1; }
.intro.is-playing .intro-bg { animation: intro-push 4.6s linear both; }
.intro-line {
  position: relative; z-index: 1; text-align: center;
  font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 750; line-height: 1.3; letter-spacing: -0.038em;
}
.intro-br { display: none; }
.intro-word { display: inline-block; white-space: nowrap; }
.intro-ch { display: inline-block; opacity: 0; transform: translateY(20px); }
.intro.is-typing .intro-ch { animation: intro-char 0.24s var(--ease-out) forwards; animation-delay: calc(var(--i) * 80ms); }
@keyframes intro-char { to { opacity: 1; transform: none; } }
@keyframes intro-push { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }
.intro-lock { overflow: hidden; }
/* the first hero slide waits behind the intro and makes its entrance once the intro is gone */
.intro-hold .slide.is-active .slide-copy > * { transform: translateY(26px); opacity: 0; }
.intro-hold .slide.is-active .slide-photo img { transform: scale(1.05); }
@media (max-width: 768px) {
  .intro-bg { object-position: 32% 50%; } /* keep the logo's face profile in a portrait frame */
  .intro-br { display: inline; }
}

/* ---------- popup ---------- */
.popup { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px 16px; }
.popup[hidden] { display: none; }
.popup-dim { position: absolute; inset: 0; background: rgba(6, 26, 45, 0.7); animation: dim-in 0.4s var(--ease-out); }
@keyframes dim-in { from { opacity: 0; } }
.popup-box {
  position: relative; width: min(400px, 100%, (100svh - 104px) * 0.75);
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 80px -30px rgba(6, 26, 45, 0.7); animation: popup-in 0.55s var(--ease-out);
}
.popup-box:focus { outline: none; }
@keyframes popup-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
.popup-viewport { position: relative; overflow: hidden; }
.popup-track { display: flex; transition: transform 0.6s var(--ease-out); }
/* one fixed 3:4 frame for every slide: the card never resizes, so 닫기 never moves.
   Other shapes sit whole (contain) over a blurred, darkened copy of themselves. */
.popup-slide { position: relative; flex: 0 0 100%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); }
.popup-slide::before {
  content: ""; position: absolute; inset: -32px; background: var(--popup-bg, none) center / cover;
  filter: blur(24px) brightness(0.55);
}
.popup-slide a { position: relative; display: block; height: 100%; }
.popup-slide img { width: 100%; height: 100%; object-fit: contain; }
.popup-arrow {
  position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(20, 23, 27, 0.6); color: #fff;
  opacity: 0; transition: opacity 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}
.popup-arrow:hover { background: var(--mint); color: #fff; }
.popup-arrow .icon { width: 20px; height: 20px; }
.popup-prev { left: 12px; }
.popup-next { right: 12px; }
.popup-viewport:hover .popup-arrow, .popup-arrow:focus-visible { opacity: 1; }
.popup-bar { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px; background: var(--mist); }
.popup-today {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: auto;
  font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); transition: color 0.2s var(--ease-out);
}
.popup-today .icon { width: 20px; height: 20px; color: var(--ink-3); transition: color 0.2s var(--ease-out); }
.popup-today:hover { color: var(--ink); }
.popup-today:hover .icon { color: var(--mint-ink); }
.popup-count { padding: 2px 10px; border-radius: 999px; background: #66707b; color: #fff; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.popup-close { min-height: 44px; padding: 0 4px; font-size: 0.9375rem; font-weight: 800; color: var(--ink); }
.popup-close:hover { color: var(--mint-ink); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .gnb { display: none; }
  .menu-btn { display: inline-grid; }
  .header-actions, .gnb + .header-actions { margin-left: auto; } /* the flags and the menu button at the right edge */
}

@media (max-width: 960px) {
  .promise-list li { grid-template-columns: clamp(140px, 22vw, 200px) minmax(0, 1fr); }
  .promise-body { grid-column: 2; }
  .concern-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-card { height: auto; min-height: 0; max-height: none; --hero-pad: clamp(28px, 6vw, 48px); }
  .slide { grid-template-columns: 1fr; align-content: start; gap: 28px; padding-top: 0; padding-bottom: 44px; }
  .slide-photo { order: -1; justify-self: stretch; width: auto; max-height: none; margin: 0 calc(-1 * var(--hero-pad)); aspect-ratio: 5 / 4; border-radius: 0; }
  .slide-cut { position: relative; right: auto; bottom: auto; order: -1; justify-self: stretch; justify-content: center; min-width: 0; height: auto; margin-top: 20px; }
  .slide-cut img { height: auto; max-height: min(82vw, 360px); max-width: 100%; }
  .slide-model { position: static; order: -1; justify-self: end; margin: -36px 0 -12px; }
  .slide-eyebrow { margin-bottom: 14px; }
  .photo-caption { left: 16px; bottom: 16px; padding: 8px 14px; font-size: 0.8125rem; }
  .annot-chip { padding: 4px 10px 4px 8px; font-size: 0.75rem; }
  .photo-frame { display: none; } /* the slider controls sit on the photo here */
  .slide-dial { left: 96%; top: 84%; height: auto; width: min(170vw, 980px); }
  .slide-dial .dial-node { display: none; } /* a node would land on the copy */
  .slide-deco::after { -webkit-mask-image: radial-gradient(60% 34% at 20% 80%, var(--night), transparent 72%); mask-image: radial-gradient(60% 34% at 20% 80%, var(--night), transparent 72%); }
  .photo-caption strong { font-size: 0.875rem; }
  .hero-card .hero-controls, .hero-card[data-active-theme] .hero-controls {
    top: 14px; right: 14px; left: auto; bottom: auto; gap: 2px; padding: 3px; border-radius: 999px;
    background: rgba(20, 23, 27, 0.58); color: #fff;
  }
  .hero-controls .ctrl { width: 36px; height: 36px; border-color: transparent; }
  .hero-controls .ctrl-toggle { display: none; }
  .hero-controls .counter { gap: 6px; font-size: 0.8125rem; }
  .hero-controls .counter-bar { width: 32px; }
  .program-body { grid-template-columns: 1fr; }
  .tabs { flex-direction: row; gap: 6px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; width: auto; grid-template-columns: 34px auto; gap: 8px; padding: 6px 16px 6px 6px; border-radius: 999px; scroll-snap-align: start; }
  .tab-thumb { width: 34px; height: 34px; box-shadow: 0 0 0 2px #fff; }
  .tab[aria-selected="true"] .tab-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--mint-ink); }
  .tab-text { display: block; }
  .tab-no, .tab-key, .tab-go { display: none; }
  .tab-name { font-size: 1rem; }
  .tab[aria-selected="true"]::before { display: none; }
  .panel { grid-template-columns: 1fr; grid-template-areas: "fig" "copy" "spec"; }
  .panel-figure { aspect-ratio: 4 / 3; min-height: 0; }
  .panel-nav { display: flex; }
  .doctor-inner, .recovery-grid, .visit-grid, .cta-card { grid-template-columns: 1fr; }
  .doctor-photo { width: min(100%, 460px); }
  .cta-card { align-items: start; }
  .cta-card::before { display: none; } /* one small ring on phones, above the title's right edge */
  /* one column: the photo is a band across the top (wider than the card, so it has no side edge), the surgeon
     centred, and the title starts under its faded foot */
  .cta-card { padding-top: calc(var(--cta-pad) + min(40vw, 220px)); }
  .cta-photo {
    --w: 136%; left: calc(50% - 0.37 * var(--w)); bottom: auto; height: calc(var(--cta-pad) + min(52vw, 290px));
    -webkit-mask-image: linear-gradient(180deg, var(--night) 42%, transparent 96%);
    mask-image: linear-gradient(180deg, var(--night) 42%, transparent 96%);
  }
  .cta-photo img { object-position: 37% 20%; opacity: 0.5; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
  body { font-size: 16px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .brand img { width: 150px; }
  .header-actions { gap: 2px; }
  .lang { gap: 0; }
  .lang-btn { width: 38px; height: 38px; }
  .lang-btn[aria-pressed="true"]::before { inset: 4px; }
  .flag { width: 22px; height: 22px; }
  .br-m { display: inline; }
  .slide-text br { display: none; }
  .slide .btn-row { margin-top: 28px; }
  .slide .btn-row .btn { flex: 1 1 100%; }
  .js .concern.is-scrolly { height: 560vh; }
  .js .concern.is-scrolly .concern-stage { --stage-bottom: calc(var(--inset) + 64px + env(safe-area-inset-bottom)); }
  .js .is-scrolly .concern-deck { --card-w: clamp(216px, min(76vw, (100svh - var(--header-h) - 64px - 290px) * 0.74), 330px); perspective: 1100px; }
  .js .is-scrolly .concern-nav { gap: 14px; }
  .js .is-scrolly .concern-title { font-size: 1.625rem; }
  .js .is-scrolly .concern-nav .ctrl { width: 40px; height: 40px; }
  .concern-bar { width: 96px; }
  .concern-quote { padding: 18px 12px 0; }
  .concern-link { margin: 14px 4px 2px 12px; padding-top: 12px; }
  /* static fallback: the four cards scroll sideways */
  .concern-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .concern-card { scroll-snap-align: center; }
  .js .is-scrolly .concern-cards { overflow: visible; padding: 0; grid-auto-columns: auto; }
  .steps { --pic: min(23vw, 96px); gap: 8px; }
  .step-pic { margin-bottom: 14px; }
  .step-pic img { box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--mint-ink), 0 18px 30px -18px rgba(10, 38, 64, 0.45); }
  .step-pic::after { width: calc(100% + 24px); }
  .step-pic figcaption { padding: 1px 8px; bottom: -10px; }
  .step-name { flex-direction: column; align-items: center; gap: 0; }
  .step-name b { font-size: 1.25rem; }
  .step-text { font-size: 0.875rem; }
  .resolve-faces li { width: 44px; height: 44px; margin-left: -12px; }
  .js .is-scrolly .concern-resolve { gap: 24px; }
  /* the recovery table becomes one card per procedure, 회복 set large, so no column hides off-screen */
  .table-wrap { overflow: visible; padding: 8px 16px; }
  .recovery-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .recovery-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; padding: 16px 4px; border-bottom: 1px solid var(--line-2); }
  .recovery-table tbody tr:last-child { border-bottom: 0; }
  .recovery-table tbody th { grid-column: 1 / 2; padding: 0; border: 0; font-size: 1.1875rem; }
  .recovery-table td { display: grid; gap: 2px; padding: 0; border: 0; white-space: normal; font-size: 0.9375rem; }
  .recovery-table td::before { content: attr(data-label); font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
  .recovery-table td:last-child { grid-column: 2 / 4; grid-row: 1; justify-self: end; text-align: right; font-size: 1.25rem; }
  .recovery-table td:last-child::before { font-size: 0.8125rem; font-weight: 600; }
  .promise-list li { grid-template-columns: 1fr; align-items: start; }
  .promise-body { grid-column: auto; }
  .promise-photo { aspect-ratio: 16 / 9; }
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec div:nth-child(3) { border-left: 0; }
  .spec div:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
  .finder-form { padding-left: 20px; }
  .finder-form input { height: 52px; }
  .finder-submit { width: 52px; height: 52px; }
  .cred { grid-template-columns: 1fr; }
  .statement-glyph { width: 130vw; }
  .popup-box { width: min(360px, 100%, (100svh - 96px) * 0.75); background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .popup-bar { order: -1; min-height: 0; padding: 0 2px 10px; background: transparent; }
  .popup-today, .popup-today .icon, .popup-close { color: #fff; }
  .popup-count { background: rgba(255, 255, 255, 0.24); }
  .popup-viewport { border-radius: 20px; }
  .popup-arrow { display: none; }
  .visit-info div { grid-template-columns: 84px 1fr; }
  /* map text is in SVG units: the map renders at ~0.55x on phones, so these land at ~12-15px on screen.
     24 is the largest label that still clears the roads and the map edge. */
  .map-label { font-size: 24px; }
  .map-station-num { font-size: 22px; }
  .map-dest-name { font-size: 26px; }
  .map-dest-sub { font-size: 22px; transform: translateY(6px); }
  .cta-actions .btn { width: 100%; }
  .footer-info br { display: none; }
  .footer-info span { display: block; }
  .footer-info span + span::before { display: none; }
  .quick { display: none; }
  .mt-note { left: 12px; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom) + 12px); max-width: none; }
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); /* minmax: a late-loading font never widens the bar past the screen */
    background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-bar a {
    display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 64px;
    font-size: 0.75rem; font-weight: 650; color: var(--ink-2);
  }
  .mobile-bar a.is-primary { background: var(--mint); color: #fff; }
  .mobile-bar .icon { width: 22px; height: 22px; }
}

/* the opening on phones: the director fills the top, the words sit low on a dark foot above the bottom bar; the
   stage is shorter and its card smaller */
@media (max-width: 768px) {
  .op-film-media img { object-position: 76% 20%; }
  .op-film-media::after { background: linear-gradient(180deg, rgba(6, 26, 45, 0.5), transparent 20%, transparent 38%, rgba(6, 26, 45, 0.9) 76%); }
  .op-film-copy { left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(64px + env(safe-area-inset-bottom) + 92px); translate: none; flex-direction: column; align-items: flex-start; gap: 18px; }
  .op-mark { width: 60px; }
  .op-line { width: 56px; margin: 0 0 0 14px; }
  .op-title { font-size: 2.125rem; }
  .op-desc { margin-top: 12px; font-size: 0.9375rem; }
  .op-scroll { bottom: calc(64px + env(safe-area-inset-bottom) + 18px); gap: 12px; font-size: 0.8125rem; }
  .op-scroll-ring { width: 46px; height: 46px; }
  .op-scroll-ring::before { top: 12px; bottom: 12px; }
  .op-scroll-ring i { top: 11px; }
  .op-stage { height: 300vh; }
  .op-edge { width: 60px; }
  .op-sticky { height: calc(100svh - 64px - env(safe-area-inset-bottom)); }
  .op-card { --ch: min(62svh, 520px); }
  .op-marquee { font-size: 3.25rem; }
  .op-frame-l { left: 14px; }
  .op-frame-r { right: 14px; }
  .op-film-copy, .op-scroll { opacity: calc(1 - var(--op-film) * 2.8); } /* low on the screen: gone before they reach the header */
  .op-why-word { padding-left: 0.2em; font-size: 2.625rem; letter-spacing: calc(0.2em + (1 - var(--op-why)) * 0.16em); }
  .op-why-tag { font-size: 1rem; }
  .op-why-chars { max-width: 17em; gap: 0 9px; }
  .op-why-chars .op-br { flex-basis: 100%; height: 8px; } /* 얼굴의 선은, / 뼈대에서 시작됩니다 */
}
@media (prefers-reduced-motion: reduce) {
  .op-stage { height: auto; }
  .op-sticky { position: relative; }
  .op-marquee, .op-edge { display: none; }
  .js .op-mark, .js .op-line, .js .op-copy > * { opacity: 1; scale: none; transform: none; translate: none; }
}

/* narrow phones: the logo gives way so the four flags and the menu button fit on one row (with the 38px flag buttons
   the row needs 336px from 375px up; under that the buttons shrink) */
@media (max-width: 420px) {
  .header-inner { gap: 10px; }
  .brand img { width: 128px; }
}
@media (max-width: 374px) {
  .lang-btn { width: 34px; height: 34px; }
  .lang-btn[aria-pressed="true"]::before { inset: 3px; }
}
@media (max-width: 340px) {
  .op-why-word { font-size: 2.25rem; }
  .brand img { width: 108px; }
  .lang-btn { width: 30px; height: 30px; }
  .lang-btn[aria-pressed="true"]::before { inset: 2px; }
  .flag { width: 20px; height: 20px; }
  .menu-btn { width: 40px; height: 40px; }
}


@media (max-width: 420px) {
  .hero-controls .ctrl-toggle { display: none; }

}

/* short phone screens (an in-app browser's own bars take 150px or more): the worry deck gives its room to the card,
   whose photo gets wider than tall, so the arrows under it stay inside the night region */
@media (max-width: 768px) and (max-height: 720px) {
  .js .is-scrolly .concern-deck { --card-w: clamp(200px, min(72vw, (100svh - var(--header-h) - 64px - 250px) * 0.8), 300px); padding: 18px 0 14px; gap: 12px; }
  .js .is-scrolly .concern-title { font-size: 1.375rem; }
  .js .is-scrolly .concern-photo { aspect-ratio: 16 / 10; }
}

/* a phone on its side (wide but short): a slimmer header and a smaller badge, so the screen is not half chrome;
   the film's words, centred on a 560px film, fade before they reach the header */
@media (min-width: 769px) and (max-height: 500px) {
  :root { --header-h: 64px; }
  .quick { right: 16px; bottom: 16px; }
  .quick-toggle { scale: 0.8; transform-origin: 100% 100%; } /* the whole badge, words and all, at 77px */
}
@media (max-height: 560px) {
  .op-film-copy, .op-scroll { opacity: calc(1 - var(--op-film) * 4.5); }
}

/* touch: small text links get a taller tap area without moving anything (the padding is given back as margin) */
@media (pointer: coarse) {
  .footer-links a, .tel { display: inline-block; padding-block: 10px; margin-block: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .slide:not(.is-active) .slide-copy > * { transform: none; }
  .dial-ticks, .dial-dash, .annot-ticks, .annot-dash { animation: none; }
  .annot-ring, .annot-node, .annot-chip { opacity: 1; scale: 1; transform: none; }
  .annot-lead { stroke-dashoffset: 0; }
  .js .is-scrolly .steps::after { display: none; }
  .step-pic::before, .step-pic::after { animation: none; }
  .js .doctor-photo img { clip-path: none; transform: none; }
  .js .promise-photo { clip-path: none; }
  .js .map-walk { stroke-dashoffset: 0; }
  .map-walker { display: none; }
}