/* Subsets made by scripts/subset-fonts.py: body = KS X 1001 Hangul + Latin (319 KB
   instead of 1.2 MB), titles = only the characters used in h1 (18 KB). Characters
   outside a subset fall back to the system Korean font listed in --sans/--display. */
/* optional: if the body font is not ready at first paint (slow phone link), the
   page keeps the device's own Korean font instead of reflowing later (CLS); the
   download continues and the next page uses it from cache. */
@font-face {
  font-family: "Noto Sans KR";
  src: url("/fonts/NotoSansKR-KS.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional;
}
/* optional + <link rel=preload>: Chrome holds the first paint for a preloaded
   optional font, so the 18 KB title font is used from the start and never swaps
   in late (no title reflow, no layout shift). */
@font-face {
  font-family: "Jeju Myeongjo";
  src: url("/fonts/JejuMyeongjo-Titles.woff2") format("woff2");
  font-weight: 400;
  font-display: optional;
}
:root {
  color-scheme: light;
  --paper: #f2f6f4;
  /* Ivory ground of the AI teaching-model photos: the empty frame before a photo
     loads is the photo's own edge colour, never mint. */
  --model-bg: #f2e8de;
  --white: #ffffff;
  --ink: #263b34;
  --body: #45584f;
  --muted: #586a61;
  --bronze: #387a80;
  --bronze-dark: #285c60;
  --line: #d9e1db;
  /* Form-control edges (3.33:1 on white, WCAG 1.4.11); --line stays for dividers. */
  --line-strong: #7f9189;
  /* 꽉 찬 #387a80 면은 상담 예약·전화·제출 버튼만. 선택 상태는 진한 테두리 + --tint */
  --tint: #e3ece8;
  --tint-strong: #d6e6de;
  --scrim: rgba(16,34,29,.55);
  --deep: #14231f;
  /* Windows falls back to Malgun Gothic (not Gulim), Apple devices to Apple SD Gothic Neo. */
  --sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --serif: var(--sans);
  --display: "Jeju Myeongjo", "AppleMyungjo", "Batang", "바탕", serif;
  --ease: cubic-bezier(.22, .68, 0, 1);
  /* Motion tokens (emil-animate): strong ease-out for entrances, ease-in-out for on-screen movement, drawer curve for the menu. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* Sine in-out, only for the hero photo's endless 24s breathing: a background loop
     must never visibly speed up and stop (peak speed ~1.6x the average, not ~5x). */
  --ease-breathe: cubic-bezier(0.37, 0, 0.63, 1);
  /* Type scale (about 1.2x between steps): 13 caption, 14 meta, 15 secondary,
     16 body, 18 lead, 20 small title, 24 title. Body text is never under 16px.
     Weights are 400 body, 500 menus and labels, 700 titles and buttons only
     (Malgun Gothic and the phone system fonts merge anything in between). */
  --fs-cap: calc(13px + var(--fs-boost) * 0.8125);
  --fs-meta: calc(14px + var(--fs-boost) * 0.875);
  --fs-body: calc(16px + var(--fs-boost));
  --fs-lead: calc(18px + var(--fs-boost) * 1.125);
  --fs-t2: calc(20px + var(--fs-boost) * 1.25);
  --fs-t1: calc(24px + var(--fs-boost) * 1.5);
  --lh-body: 1.75;
  --lh-small: 1.65;
  /* 화면 폭에 비례하는 글자: 1440px 까지는 그대로, 그 위로는 폭을 따라 매끄럽게 커져
     2560px 에서 1.25배(본문 16→20px)에 멈춘다. 모든 글자 크기는 "원래 크기 + 이 값 × 원래/16". */
  --fs-boost: clamp(0px, calc((100vw - 1440px) * .0037), 4px);
  --gutter: clamp(20px, 4.2vw, 120px);
  --section: clamp(64px, 7vw, 108px);
  --header: 80px;
  --dock: 0px;
  --max: 2240px;
}
@media (min-width: 1680px) {
  .process-list p { max-width: calc(620px + var(--fs-boost) * 38.75); }
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 24px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
/* Phones in landscape: keep content out of the notch (viewport-fit=cover). */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
a, button, summary, label, select { touch-action: manipulation; }
body { margin: 0; color: var(--ink); background: var(--white); font: 400 var(--fs-body)/var(--lh-body) var(--sans); -webkit-font-smoothing: antialiased; font-synthesis: weight; overflow-wrap: break-word; word-break: keep-all; }
body.dialog-open { overflow: hidden; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { word-break: keep-all; text-wrap: balance; }
/* Myeongjo only for page titles; section headings are set in a firm sans so the
   page reads like a clinic's information, not a sequence of taglines. */
h1 { font-family: var(--display); font-weight: 400; letter-spacing: -.045em; line-height: 1.3; font-size: calc(clamp(38px, 4.4vw, 60px) + var(--fs-boost) * 3.75); }
/* Jeju Myeongjo has one weight: never let the browser fake a bold one. */
h1, .standard-number { font-synthesis: none; }
h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.035em; line-height: 1.35; font-size: calc(clamp(26px, 2.2vw, 38px) + var(--fs-boost) * 2.375); color: var(--ink); }
h3 { font-size: var(--fs-t2); font-weight: 700; letter-spacing: -.02em; line-height: 1.45; }
p { word-break: keep-all; }
/* No single word left alone on a paragraph's last line. */
p, li, dd, figcaption, .fact__sub, .standard-detail { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
html { -webkit-tap-highlight-color: transparent; }
/* A long press on a control presses it; it does not select its label or open the link menu. */
.mobile-dock a, .btn, .icon-btn, .environment-tabs button, .service-options label, .faq-item summary, .date-chip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button:disabled { cursor: wait; opacity: .6; }
/* Two-tone focus ring (WCAG 2.4.7 / 1.4.11, technique C40): a white gap ring plus a
   deep-teal outline on light ground, the reverse on photos and deep-teal bands. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--bronze-dark); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.hero :focus-visible, .standards-stage :focus-visible, .visit-cta :focus-visible, .gallery-stage :focus-visible, .lightbox :focus-visible { outline-color: #fff; box-shadow: 0 0 0 2px #0e211d; }
/* Full-width rows and the phone dock draw the ring inside their own box. */
.service-rows a:focus-visible, .environment-tabs button:focus-visible, .faq-item summary:focus-visible, .mobile-dock a:focus-visible { outline-offset: -5px; box-shadow: none; }
.mobile-dock a:last-child:focus-visible { outline-color: #fff; }
::selection { background: var(--tint-strong); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }
fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
dialog { color: var(--ink); }
/* Content width follows the screen: the side margin is 4.2% of the width (20–120px),
   up to 2,240px of content on very wide monitors. Paragraphs keep their own measure. */
.container { width: min(calc(100% - var(--gutter) * 2), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); }
.paper { background: var(--paper); }
.small { font-size: calc(14px + var(--fs-boost) * 0.875); line-height: 1.8; }
.muted { color: var(--muted); }
.icon { width: 22px; height: 22px; stroke-width: 1.5px; }
/* Same 1.5px line on screen whatever the icon's size. */
.icon :is(path, circle, rect) { vector-effect: non-scaling-stroke; }
.reverse { transform: rotate(180deg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.eyebrow { color: var(--bronze-dark); font-size: calc(14px + var(--fs-boost) * 0.875); font-weight: 700; margin-bottom: 14px; }
/* Title with its description directly underneath (one block, one reading line). */
.section-heading { display: block; margin-bottom: 40px; }
.section-copy { max-width: calc(560px + var(--fs-boost) * 35); margin-top: 12px; color: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); padding-bottom: 0; }
.section-end { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding-top: 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 14px 24px; background: var(--bronze); color: #fff; border: 1px solid var(--bronze); border-radius: 3px; font-size: calc(15px + var(--fs-boost) * 0.9375); font-weight: 700; line-height: 1.5; transition: background 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn .icon { width: 19px; height: 19px; }
.btn--small { min-height: 44px; padding: 10px 17px; font-size: calc(14px + var(--fs-boost) * 0.875); gap: 20px; }
.btn--outline { color: var(--ink); background: transparent; border-color: #a7b5ae; }
.btn--full { width: 100%; }
.btn--large { min-height: 60px; font-size: calc(17px + var(--fs-boost) * 1.062); }
.text-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: 14px; font-size: calc(14px + var(--fs-boost) * 0.875); font-weight: 700; line-height: 1.6; }
.text-link > .icon { width: 18px; height: 18px; transition: transform 180ms var(--ease); }
.icon-btn, .circle-link { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); transition: background 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out); flex-shrink: 0; }
/* Small round buttons answer the press itself (mouse and touch alike). */
.icon-btn:active, .circle-link:active, .standard-indicator:active { transform: scale(.94); }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 12px 20px; background: var(--ink); color: white; z-index: 100; }
/* Only keyboard focus reveals it; focus returning from a closed dialog must not. */
.skip-link:focus-visible { top: 10px; }
main:focus { outline: none; }

/* Shared navigation stays compact and calm across every page. */
.site-header { height: var(--header); position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.98); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { border-color: var(--line); }
.header-inner { width: min(calc(100% - var(--gutter) * 2), var(--max)); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; line-height: 1.3; }
.brand__mark { width: 44px; height: 44px; object-fit: contain; }
.brand__ko { font-size: calc(22px + var(--fs-boost) * 1.375); font-weight: 700; letter-spacing: -.03em; }
.desktop-nav { display: flex; gap: clamp(20px, 2.1vw, 34px); align-items: center; }
.desktop-nav > a { min-height: 44px; display: inline-flex; align-items: center; font-size: calc(14px + var(--fs-boost) * 0.875); font-weight: 500; position: relative; white-space: nowrap; }
.desktop-nav > a::after { content: ""; height: 1px; position: absolute; bottom: 4px; left: 0; right: 0; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform 180ms; }
.desktop-nav > a[aria-current]::after { transform: scaleX(1); }
.header-actions { display: flex; gap: 22px; align-items: center; }
.header-phone { display: flex; gap: 9px; align-items: center; min-height: 44px; font-size: calc(14px + var(--fs-boost) * 0.875); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.header-phone .icon { width: 16px; height: 16px; }
/* On the booking page the form's own submit is the one primary: the header button
   would only reload the page and lose what was typed (the phone dock does the same). */
body[data-page="reservation.html"] .header-actions > a[href^="/reservation.html"] { visibility: hidden; }
@media (min-width: 1141px) { .desktop-nav > a, .header-phone, .text-link { font-size: calc(15px + var(--fs-boost) * 0.9375); } }
.menu-toggle { display: none; border: 0; background: none; }
.mobile-menu { border: 0; padding: 25px var(--gutter); margin: 0 0 0 auto; width: min(100%, 500px); max-width: 100vw; height: 100dvh; max-height: 100dvh; background: var(--white); overscroll-behavior: contain; }
.mobile-menu::backdrop { background: var(--scrim); }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; gap: 20px; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { display: flex; gap: 24px; align-items: center; padding: 16px 0; min-height: 60px; border-bottom: 1px solid var(--line); }
.mobile-menu nav strong { font-weight: 500; font-size: var(--fs-t2); letter-spacing: -.02em; }
.mobile-menu nav .icon { margin-left: auto; width: 18px; }
.mobile-menu nav [aria-current] { color: var(--bronze); }
.mobile-menu__bottom { padding-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.mobile-menu__phone { display: inline-flex; align-items: center; gap: 12px; font-size: calc(26px + var(--fs-boost) * 1.625); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--bronze-dark); }
.mobile-menu__phone .icon { width: 22px; height: 22px; }
.mobile-menu__bottom > p { font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--body); line-height: 1.8; }

/* One real photograph with a left-weighted shade so the copy stays legible. */
.hero { position: relative; isolation: isolate; overflow: clip; background: #1f3632; }
.hero-backdrop { position: absolute; inset: 0; z-index: -1; }
.hero-backdrop .hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,33,29,.78) 0%, rgba(14,33,29,.55) 42%, rgba(14,33,29,.12) 78%); }
/* The first screen is the photograph alone, whatever the monitor size: the hero
   fills the viewport under the header (svh: stable while mobile toolbars move,
   so its height never jumps). The info bar starts just below the fold. */
.hero-inner { display: flex; align-items: center; min-height: calc(100vh - var(--header)); min-height: calc(100svh - var(--header)); padding-block: 72px 112px; }
.hero-scroll { position: absolute; left: 0; right: 0; bottom: 24px; width: max-content; margin-inline: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; color: #fff; font-size: calc(14px + var(--fs-boost) * 0.875); font-weight: 500; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
/* "아래로" lands with the info bar flush under the header (no photo strip left):
   cancel the extra 24px the page-wide scroll padding adds for headings. */
#clinic-info { scroll-margin-top: -24px; }
.hero-scroll .icon { width: 20px; height: 20px; transform: rotate(90deg); }
.hero-copy { max-width: calc(780px + var(--fs-boost) * 48.75); color: #fff; }
.hero-place { font-size: calc(15px + var(--fs-boost) * 0.9375); font-weight: 500; color: #d8ebe3; margin-bottom: 20px; }
/* The title grows with the screen (76px on a 1800px+ monitor) so it holds its own
   over a full-screen photograph; phones keep their own size below. */
.hero-copy h1 { font-size: calc(clamp(40px, 4.2vw, 76px) + var(--fs-boost) * 4.75); line-height: 1.26; letter-spacing: -.05em; }
.hero-copy h1 + p { margin-top: 24px; font-size: calc(18px + var(--fs-boost) * 1.125); line-height: 1.8; color: #fff; text-wrap: pretty; }
@media (min-width: 1440px) {
  .hero-copy h1 + p { font-size: calc(19px + var(--fs-boost) * 1.188); }
  .hero-place { font-size: calc(16px + var(--fs-boost) * 1); margin-bottom: 24px; }
}
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.btn--light { background: #fff; color: var(--bronze-dark); border-color: #fff; min-width: 168px; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.btn--phone { font-variant-numeric: tabular-nums; font-size: calc(18px + var(--fs-boost) * 1.125); letter-spacing: -.02em; }

/* Practical information directly under the photograph: today's hours update in Korea time. */
.clinic-facts { border-bottom: 1px solid var(--line); background: var(--white); }
.clinic-facts__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { display: flex; flex-direction: column; gap: 3px; padding: 24px 24px 24px 0; min-width: 0; }
.fact + .fact { padding-left: 24px; border-left: 1px solid var(--line); }
.fact__label { font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--muted); font-weight: 500; }
.fact > strong { font-size: calc(18px + var(--fs-boost) * 1.125); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.5; }
.fact__sub { font-size: calc(15px + var(--fs-boost) * 0.9375); color: var(--body); line-height: 1.6; }
/* The phone number and the links keep the row's visible line height (so the four
   cells share one baseline) but get a 44px press area from padding cancelled by a
   negative margin (WCAG 2.5.5 / 2.5.8). */
.fact > strong a { display: inline-flex; align-items: center; min-height: 0; padding-block: calc((44px - 1.5em) / 2); margin-block: calc((1.5em - 44px) / 2); }
.fact__link { display: inline-flex; align-items: center; gap: 6px; color: var(--bronze-dark); font-weight: 700; min-height: 0; padding-block: 10px; margin-block: -10px; }
.fact__link .icon { width: 14px; height: 14px; }
/* "11월 진료 안내 달력 보기": a button styled as the info bar's links (no reserved
   two-line height — that is only for the swapped today note). Laid out as inline
   text so on a narrow phone column the arrow follows the last word when it wraps. */
button.fact__link { display: block; align-self: flex-start; min-height: 0; padding: 10px 0; text-align: left; }
button.fact__link > span { white-space: nowrap; }
button.fact__link .icon { display: inline-block; margin-left: 6px; vertical-align: -2px; }
.fact.is-open [data-today-note] { color: var(--bronze-dark); font-weight: 700; }


/* One panoramic photograph, four calm columns, one clear active state. All four
   reasons stay readable; choosing one only moves the highlight and the photo. */
.standards-heading { padding-block: clamp(56px, 6vw, 88px) 32px; }
.standards-heading h2 { color: #fff; }
.standards-stage { position: relative; isolation: isolate; background: #203c37; color: #fff; }
.standards-backdrops { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.standards-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 450ms var(--ease-out); }
.standards-backdrop.is-active { opacity: 1; }
/* #132a27 at 79%: the always-visible reasons (white at 82%) stay 4.5:1+ even over the brightest photo. */
.standards-stage::before { content: ""; position: absolute; inset: 0; background: #132a27c9; z-index: -1; }
.standards-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin-block: 0; padding: 0; }
.standard-panel { display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; min-height: 460px; padding: 44px 24px 36px; border-left: 1px solid #ffffff36; color: #fff; transition: background 200ms var(--ease-out); }
.standard-heading { margin: 0; width: 100%; font: inherit; }
.standard-select { display: flex; width: 100%; flex-direction: column; align-items: center; padding: 0; color: inherit; text-align: inherit; }
.standard-panel:last-child { border-right: 1px solid #ffffff36; }
.standard-panel.is-active { background: #285c60e6; }
.standard-number { font: 400 calc(44px + var(--fs-boost) * 2.75)/1.3 var(--display); position: relative; margin-bottom: 28px; padding-bottom: 9px; min-width: 40px; }
.standard-number::after { content: ""; height: 2px; position: absolute; left: 8px; right: 8px; bottom: 0; background: #fff; transform: scaleX(0); transition: transform 220ms var(--ease); }
.standard-panel.is-active .standard-number::after { transform: scaleX(1); }
.standard-title { font-size: var(--fs-t2); font-weight: 700; line-height: 1.6; letter-spacing: -.02em; word-break: keep-all; }
@media (min-width: 1680px) { .standard-title { font-size: var(--fs-t1); } }
.standard-detail { font-size: calc(15px + var(--fs-boost) * 0.9375); line-height: 1.85; margin-top: 28px; min-height: 110px; opacity: .82; transition: opacity 200ms var(--ease-out); word-break: keep-all; }
.standard-panel.is-active .standard-detail { opacity: 1; }
.standard-indicator { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px 0 18px; border: 1px solid #ffffff99; border-radius: 22px; margin-top: 18px; font-size: calc(14px + var(--fs-boost) * 0.875); font-weight: 700; transition: color 180ms, background 180ms, transform 180ms; flex-shrink: 0; }
.standard-indicator .icon { width: 18px; height: 18px; }

/* The reference's large heading and image-led tabs, using our own clinic assets.
   Mint ground between the dark standards band and the white gallery; the tabs keep
   their own height (no stretched empty boxes) and stay in view beside a tall panel. */
.environment-section { background: var(--paper); }
.environment { display: grid; grid-template-columns: 1fr 1.1fr; grid-template-rows: auto 1fr; column-gap: clamp(35px, 5vw, 80px); row-gap: 42px; align-items: start; }
.environment-heading { grid-column: 1; }
.environment-heading > p:last-child { margin-top: 16px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--body); }
.environment-tabs { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; border-top: 1px solid var(--line); align-self: start; }
@media (min-width: 981px) { .environment-tabs { position: sticky; top: calc(var(--header) + 32px); } }
.environment-tabs button { flex: none; width: 100%; display: flex; align-items: center; text-align: left; gap: 24px; padding: 23px 22px; border-bottom: 1px solid var(--line); border-top: 3px solid transparent; min-height: 104px; transition: color 180ms, background 180ms, border-color 180ms; }
.environment-tabs button > .icon:first-child { width: 28px; height: 28px; color: var(--muted); }
.environment-tabs [aria-selected="true"] > .icon:first-child { color: var(--bronze); }
.environment-tabs button > .icon:last-child { width: 18px; height: 18px; margin-left: auto; color: var(--bronze); }
.environment-tabs strong { font-size: var(--fs-t2); font-weight: 700; letter-spacing: -.02em; line-height: 1.5; }
.environment-tab__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.environment-tab__text small { font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--body); line-height: 1.6; }
.environment-tabs [aria-selected="true"] small { color: var(--bronze-dark); }
.environment-tabs [aria-selected="true"] { color: var(--bronze-dark); background: var(--white); border-top-color: var(--bronze); }
.environment-panels { grid-column: 2; grid-row: 1/3; min-width: 0; }
.environment-photo { background: var(--white); }
.environment-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* The blog poster fills the same 3:2 frame: the crop keeps its Korean logo and title
   (20–87% of its height) and drops the cyan band with the English strip at the foot.
   Only here; the laser page keeps the whole square poster. */
.environment-photo--poster img { object-fit: cover; object-position: 50% 60%; background: var(--white); }
.environment-photo figcaption { font-size: calc(13px + var(--fs-boost) * 0.8125); color: var(--muted); padding: 11px 18px; border-bottom: 1px solid var(--line); }
.environment-copy { padding: 32px; background: var(--white); min-height: 0; }
.environment-copy h3 { font-size: var(--fs-t1); }
.environment-copy > p { color: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); margin-top: 14px; max-width: 40em; }
.environment-copy .text-link { margin-top: 16px; color: var(--bronze-dark); }
.environment-copy > p.small { font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--body); margin-top: 12px; }

.doctor-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(44px, 6vw, 96px); }
.doctor-photo { min-width: 0; background: var(--paper); }
/* Home rhythm: white info bar, mint doctor, white treatments, dark standards. */
body[data-page="index.html"] .doctor-section { background: var(--paper); }
.doctor-photo > img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 35%; }
.doctor-copy { min-width: 0; max-width: calc(620px + var(--fs-boost) * 38.75); }
.doctor-copy h2 { font-size: calc(clamp(28px, 2.4vw, 40px) + var(--fs-boost) * 2.5); }
.doctor-copy .lead { font-size: var(--fs-lead); font-weight: 500; line-height: var(--lh-body); margin-top: 26px; color: var(--ink); }
.doctor-copy > p:not(.eyebrow):not(.lead) { color: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); margin-top: 14px; }
.doctor-copy > .text-link { margin-top: 22px; }
.doctor-facts { margin-top: 28px; border-top: 1px solid var(--line); }
.doctor-facts > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; border-bottom: 1px solid var(--line); padding-block: 13px; font-size: calc(15px + var(--fs-boost) * 0.9375); }
.doctor-facts dt { color: var(--muted); }
.doctor-facts dd { font-weight: 700; word-break: keep-all; }
.doctor-bio { margin-top: 30px; }
.doctor-name { display: flex; align-items: baseline; gap: 12px; font-size: calc(15px + var(--fs-boost) * 0.9375); color: var(--muted); }
.doctor-name strong { font-size: calc(clamp(26px, 2.3vw, 32px) + var(--fs-boost) * 2); font-weight: 700; letter-spacing: -.04em; color: var(--ink); }
.doctor-bio .doctor-facts { margin-top: 16px; }
.promise-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(40px, 6vw, 90px); }
.promise-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.promise-list { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); counter-reset: promise; }
.promise-list li { padding-block: 22px; border-bottom: 1px solid var(--line); }
.promise-list h3 { font-size: var(--fs-t2); }
.promise-list p { font-size: calc(15px + var(--fs-boost) * 0.9375); line-height: var(--lh-body); color: var(--body); margin-top: 6px; }

.gallery-section { padding-top: var(--section); }
body[data-page="gallery.html"] .gallery-section { padding-top: var(--section); }
.gallery { min-width: 0; }
.gallery-stage { position: relative; overflow: hidden; background: var(--paper); }
.gallery-track { display: flex; transition: transform 320ms var(--ease-out); touch-action: pan-y; }
.gallery-slide { flex: 0 0 100%; min-width: 0; background: var(--paper); }
.gallery-slide > img { width: 100%; aspect-ratio: 1.95; object-fit: cover; }
/* The photo's name and its note read together (not 1,300px apart on a wide monitor). */
.gallery-slide figcaption { display: flex; align-items: baseline; justify-content: flex-start; padding: 19px 25px; gap: 16px; }
.gallery-slide figcaption > strong { font-size: var(--fs-lead); font-weight: 500; }
.gallery-slide figcaption > span { font-size: var(--fs-meta); color: var(--muted); }
.gallery-expand { position: absolute; top: 20px; right: 20px; background: var(--white); border: 0; }
.gallery-footer { display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding-block: 16px; }
.gallery-controls { display: flex; gap: 16px; align-items: center; }
.gallery-count { width: 56px; text-align: center; white-space: nowrap; font-size: calc(14px + var(--fs-boost) * 0.875); font-variant-numeric: tabular-nums; color: var(--body); }
.gallery-thumbs { display: flex; gap: 12px; overflow-x: auto; padding-block: 4px 10px; scroll-snap-type: x proximity; }
.gallery-thumb { min-width: 0; width: calc((100% - 60px)/6); flex-shrink: 0; text-align: left; padding: 0 0 9px; border-bottom: 2px solid transparent; scroll-snap-align: start; opacity: .7; }
.gallery-thumb img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.gallery-thumb > span { font-size: calc(13px + var(--fs-boost) * 0.8125); display: block; margin-top: 9px; }
.gallery-thumb.is-active { border-color: var(--bronze); opacity: 1; }
.gallery-hint { margin-top: 20px; }
.lightbox { padding: 60px 84px; border: 0; width: min(96vw, 1400px); max-width: 96vw; max-height: 96dvh; background: var(--deep); color: #fff; overflow: auto; }
.lightbox::backdrop { background: rgba(16,34,29,.88); }
/* The round buttons are white, so their icons must not inherit the box's white text. */
.lightbox .icon-btn { color: var(--ink); }
.lightbox figure { margin: auto; max-width: 1100px; }
.lightbox figure img { width: 100%; max-height: 75dvh; object-fit: contain; }
.lightbox figcaption { text-align: center; padding-top: 15px; font-size: calc(14px + var(--fs-boost) * 0.875); }
.lightbox-close { position: absolute; top: 10px; right: 12px; }
.lightbox-prev, .lightbox-next { position: absolute; top: calc(50% - 24px); }
.lightbox-prev { left: 15px; }
.lightbox-next { right: 15px; }


.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.journal-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.journal-grid--1 { grid-template-columns: minmax(0, 430px); }
.journal-card { position: relative; min-width: 0; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
/* The title is the only link (its name is the title alone); its ::after covers the
   whole card so a click anywhere still opens the post. The focus ring goes on the card. */
.journal-card__link::after { content: ""; position: absolute; inset: 0; }
.journal-card__link:focus-visible { outline: none; box-shadow: none; }
.journal-card:has(.journal-card__link:focus-visible) { outline: 3px solid var(--bronze-dark); outline-offset: 4px; }
/* Blog posters sit in the same white frame as every other poster on the site. */
.journal-card__image { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.journal-card__image img { width: 100%; aspect-ratio: 1.5; object-fit: contain; transition: transform 300ms var(--ease); }
.journal-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: calc(13px + var(--fs-boost) * 0.8125); color: var(--muted); margin-top: 20px; }
.journal-card h3 { font-size: var(--fs-t2); margin-top: 12px; }
.journal-card p { font-size: calc(15px + var(--fs-boost) * 0.9375); line-height: var(--lh-body); color: var(--body); margin-top: 14px; }
.journal-card .text-link { margin-top: 15px; font-size: var(--fs-meta); }
/* Treatment pages: 관련 블로그 글 is white like the treatment body above it, so it
   continues that section instead of opening a second 100px white gap. */
.section + .journal-section:not(.paper) { padding-top: 0; }

.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.faq-layout > div > p:not(.eyebrow) { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--body); margin-top: 14px; }
.faq-layout .text-link { margin-top: 18px; }
.faq-list { min-width: 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; gap: 22px; min-height: 76px; padding: 20px 4px 20px 0; cursor: pointer; list-style: none; line-height: 1.6; font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.02em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > .icon { width: 18px; height: 18px; margin-left: auto; transition: transform 260ms var(--ease-out); }
.faq-item[open] summary > .icon { transform: rotate(45deg); }
.faq-answer { padding: 0 48px 24px 0; overflow: visible; height: auto; }
.faq-answer > p { color: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 40em; }
[data-faq-count] { font-size: calc(13px + var(--fs-boost) * 0.8125); color: var(--muted); white-space: nowrap; }
/* Same left edge as the page title and breadcrumb; the column keeps its 960px measure. */
.faq-page-content { max-width: var(--max); }
.faq-page-content > * { max-width: calc(960px + var(--fs-boost) * 60); }
.faq-search { display: flex; align-items: center; gap: 20px; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.faq-search label { display: flex; align-items: center; }
.faq-search input { border: 0; background: transparent; min-width: 0; flex: 1; padding: 10px 0; min-height: 48px; font-size: calc(19px + var(--fs-boost) * 1.188); outline-offset: 0; }
.faq-contact { margin-top: 44px; padding: 30px; background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.faq-contact h2 { font-size: var(--fs-t2); letter-spacing: -.02em; }
.faq-contact p { margin-top: 8px; color: var(--body); font-size: calc(13px + var(--fs-boost) * 0.8125); }
.faq-contact a { display: flex; align-items: center; gap: 12px; font-size: calc(26px + var(--fs-boost) * 1.625); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.location-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 65px; align-items: start; }
.map-card { min-width: 0; border: 1px solid var(--line); }
.clinic-map { position: relative; width: 100%; height: 510px; background: var(--paper); overflow: hidden; }
.map-live { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-fallback { height: 100%; display: flex; flex-direction: column; }
.map-fallback > img { width: 100%; height: 55%; object-fit: cover; }
.map-fallback__copy { padding: 24px 28px; flex: 1; }
.map-fallback__label { display: flex; gap: 8px; align-items: center; font-size: calc(13px + var(--fs-boost) * 0.8125); color: var(--body); }
.map-fallback__label .icon { width: 16px; height: 16px; }
.map-fallback__copy > strong { display: block; font-size: calc(17px + var(--fs-boost) * 1.062); line-height: 1.55; letter-spacing: -.03em; font-weight: 700; margin-top: 10px; word-break: keep-all; }
.map-fallback__copy > .btn { margin-top: 19px; font-size: calc(13px + var(--fs-boost) * 0.8125); padding: 11px 17px; min-height: 46px; }
.map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 17px; font-size: calc(13px + var(--fs-boost) * 0.8125); background: var(--white); }
.map-toolbar > span:first-child { display: flex; align-items: center; gap: 8px; }
.map-toolbar .icon { width: 14px; height: 14px; }
[data-map-brand] { color: var(--muted); white-space: nowrap; }
.map-toolbar .text-link { font-size: calc(13px + var(--fs-boost) * 0.8125); min-height: 28px; }
/* No map key (the current state): the card is just the entrance photo and its
   caption, as tall as its content. The one directions button sits beside the
   address; with a key, data-map-state changes and the full card comes back. */
.clinic-map[data-map-state="unconfigured"] { height: auto; }
.clinic-map[data-map-state="unconfigured"] .map-fallback > img { height: auto; aspect-ratio: 4 / 3; }
.clinic-map[data-map-state="unconfigured"] .map-fallback__copy { flex: none; padding: 14px 18px; }
.clinic-map[data-map-state="unconfigured"] .map-fallback__copy > strong, .clinic-map[data-map-state="unconfigured"] .map-fallback__copy > .btn { display: none; }
.clinic-map[data-map-state="unconfigured"] .map-fallback__label { font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--body); }
.clinic-map[data-map-state="unconfigured"] + .map-toolbar { display: none; }
.location-copy { padding-top: 4px; }
.location-copy h3 { font-size: var(--fs-t1); font-weight: 500; text-wrap: wrap; }
.location-copy > .text-link { margin-top: 5px; color: var(--body); font-size: calc(14px + var(--fs-boost) * 0.875); }
/* The directions button sits right under the address it acts on. */
.location-copy .button-row { margin-top: 16px; }
.hours-panel { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 15px; }
/* Day and hours sit side by side in a fixed label column (as in the footer), not at
   the two ends of a wide row. */
.hours-panel > p:not(.hours-note) { display: grid; grid-template-columns: 120px auto; justify-content: start; align-items: center; gap: 24px; padding-block: 10px; }
.hours-panel > p > span { font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--body); }
.hours-panel strong { font-size: calc(20px + var(--fs-boost) * 1.25); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.03em; white-space: nowrap; }
.hours-note { color: var(--body); font-size: calc(15px + var(--fs-boost) * 0.9375); margin-top: 8px; line-height: 1.8; }
.transport { padding-top: 20px; margin-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 13px; }
.transport p { display: flex; align-items: start; gap: 13px; font-size: calc(15px + var(--fs-boost) * 0.9375); color: var(--body); }
.transport .icon { color: var(--muted); width: 18px; height: 18px; margin-top: 3px; }
.transport strong { display: block; font-size: calc(15px + var(--fs-boost) * 0.9375); color: var(--ink); font-weight: 500; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 23px; margin-top: 25px; }
.button-row > .text-link { font-variant-numeric: tabular-nums; }

/* Closing band: the deep teal bookends the dark first screen; the same white +
   white-outline button pair as the hero. */
.visit-cta { background: var(--bronze-dark); color: #fff; padding-block: 64px; }
.visit-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.visit-cta h2 { color: #fff; }
.visit-cta__inner > div:first-child > p { margin-top: 12px; font-size: calc(16px + var(--fs-boost) * 1); line-height: 1.8; color: #d9ebe6; }
.visit-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.visit-cta__actions > .btn { min-width: 220px; }
/* Outside phone hours online booking leads: experience.js moves it first in the
   DOM (so focus and reading order match the screen); sizes stay, colours swap. */
html[data-open="no"] .visit-cta__actions > .btn--ghost { background: #fff; color: var(--bronze-dark); border-color: #fff; }
html[data-open="no"] .visit-cta__actions > .btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.site-footer { padding-block: 44px 20px; background: var(--white); border-top: 1px solid var(--line); }
.footer-main { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: start; gap: 48px; padding-bottom: 32px; }
.footer-brand > p { margin-top: 14px; color: var(--body); font-size: calc(14px + var(--fs-boost) * 0.875); line-height: 1.8; }
.footer-hours { display: grid; gap: 4px; font-size: calc(14px + var(--fs-boost) * 0.875); }
.footer-hours > div { display: grid; grid-template-columns: calc(92px + var(--fs-boost) * 6) auto; gap: 12px; }
.footer-hours dt { color: var(--muted); }
.footer-hours dd { font-variant-numeric: tabular-nums; font-weight: 500; }
.footer-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.footer-contact > span { font-size: calc(13px + var(--fs-boost) * 0.8125); color: var(--muted); }
.footer-phone { font-size: calc(28px + var(--fs-boost) * 1.75); font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--bronze-dark); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.footer-bottom > span { color: var(--muted); font-size: calc(13px + var(--fs-boost) * 0.8125); }
.footer-bottom nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer-bottom a { display: inline-flex; align-items: center; font-size: calc(14px + var(--fs-boost) * 0.875); font-weight: 500; min-height: 44px; color: var(--body); }
.footer-bottom a strong { font-weight: 700; color: var(--ink); }
.footer-bottom .text-link { gap: 5px; }
.footer-bottom .icon { width: 14px; height: 14px; }
.mobile-dock { display: none; }
.back-top { position: fixed; bottom: 28px; right: 25px; z-index: 20; box-shadow: 0 4px 18px #263b3410; }
.back-top .icon { transform: rotate(-90deg); }
.toast { position: fixed; bottom: 32px; left: 50%; transform: translate(-50%, 10px); max-width: calc(100vw - 36px); padding: 13px 23px; background: var(--ink); color: var(--white); font-size: calc(13px + var(--fs-boost) * 0.8125); border-radius: 3px; opacity: 0; visibility: hidden; z-index: 90; transition: opacity 160ms, transform 160ms, visibility 160ms; }
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%,0); }

/* The original calendar stays uncropped; controls remain outside the scroll area. */
.clinic-notice { width: min(520px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--white); box-shadow: 0 18px 80px rgba(18,38,31,.24); overflow: hidden; }
.clinic-notice[open] { display: flex; flex-direction: column; }
.clinic-notice::backdrop { background: rgba(16,34,29,.62); }
.notice-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; flex-shrink: 0; }
.notice-header p { font-size: calc(13px + var(--fs-boost) * 0.8125); color: var(--muted); }
.notice-header h2 { font: 700 var(--fs-t2)/1.5 var(--sans); letter-spacing: -.02em; }
.notice-header .icon-btn { width: 44px; height: 44px; border: 0; }
.notice-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.notice-poster { display: block; }
.notice-poster img { width: 100%; height: auto; }
.notice-summary { padding: 14px 18px; font-size: calc(15px + var(--fs-boost) * 0.9375); color: var(--body); line-height: 1.75; }
.notice-summary .text-link { font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--bronze-dark); justify-content: flex-start; }
.notice-image-error { padding: 20px; color: var(--body); font-size: calc(14px + var(--fs-boost) * 0.875); }
.notice-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); flex-shrink: 0; }
.notice-actions button { display: flex; align-items: center; justify-content: center; min-height: 56px; gap: 12px; padding: 12px 8px; font-size: calc(14px + var(--fs-boost) * 0.875); font-weight: 500; }
.notice-actions button + button { border-left: 1px solid var(--line); color: var(--bronze-dark); }
.notice-actions:has([data-notice-snooze][hidden]) { grid-template-columns: 1fr; }
.notice-actions [data-notice-snooze][hidden] + button { border-left: 0; }
.notice-actions .icon { width: 17px; height: 17px; }

/* Public subpages use the same grid, type, and interaction vocabulary. */
.page-hero { padding-block: 22px 46px; border-bottom: 1px solid var(--line); }
.page-hero > .container { position: relative; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: calc(13px + var(--fs-boost) * 0.8125); color: var(--muted); margin-bottom: 34px; }
/* 44px press area; the negative margins keep the visible line at 32px, so the
   breadcrumb and the title below do not move. */
.breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 6px; margin: -6px; }
.page-hero h1 { font-size: calc(clamp(36px, 3.8vw, 52px) + var(--fs-boost) * 3.25); }
.page-hero p:not(.eyebrow) { margin-top: 16px; color: var(--body); font-size: calc(17px + var(--fs-boost) * 1.062); line-height: 1.8; max-width: calc(640px + var(--fs-boost) * 40); }
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 35px; }
.filter-chip { min-height: 44px; padding: 9px 20px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-size: calc(14px + var(--fs-boost) * 0.875); font-weight: 500; color: var(--body); }
.filter-chip.is-active, .filter-chip[aria-pressed="true"] { background: transparent; color: var(--bronze-dark); border-bottom-color: var(--bronze); }
.treatment-note { margin-top: 28px; max-width: calc(640px + var(--fs-boost) * 40); font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--body); }

/* Home: services as an index with small model thumbnails, not a tab viewer. */
.services-index__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.services-index__intro { position: sticky; top: calc(var(--header) + 32px); }
/* The title and its description sit in one reveal wrapper: 12px between them, as in .section-copy. */
.services-index__intro > div > p { margin-top: 12px; color: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 30em; }
.services-index__intro > .text-link { margin-top: 14px; color: var(--bronze-dark); }
/* "전체 진료 안내" and the booking button for the treatment shown, on one line. */
.services-index__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 14px; }
/* As wide as its longest label ("충치·보존치료 상담 예약"), so walking the treatments
   never makes the button wrap to a new line and push the preview down. */
.services-cta { min-width: 15.75em; justify-content: space-between; }
@media (max-width: 980px) { .services-cta { display: none; } }
.service-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.service-rows li { border-bottom: 1px solid var(--line); }
.service-rows a { display: grid; grid-template-columns: 104px minmax(0, 1fr) 22px; align-items: center; gap: 24px; padding-block: 14px; transition: background 160ms ease; }
.service-rows__thumb { display: block; aspect-ratio: 3/2; overflow: hidden; background: var(--model-bg); }
.service-rows__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Posters (the water-laser artwork) sit whole on a white frame, never cropped. */
.service-rows__thumb.is-poster, .service-item__image.is-poster { background: #fff; border: 1px solid var(--line); }
.service-rows__thumb.is-poster img, .service-item__image.is-poster img { object-fit: contain; object-position: center; }
.service-rows__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.service-rows strong { font-size: var(--fs-t2); font-weight: 700; letter-spacing: -.02em; line-height: 1.5; }
.service-rows__text > span { font-size: calc(15px + var(--fs-boost) * 0.9375); line-height: var(--lh-body); color: var(--body); }
.service-rows a > .icon { width: 20px; height: 20px; color: var(--bronze); transition: transform 180ms var(--ease); }
.model-note { margin-top: 18px; font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--body); line-height: 1.7; }
/* Desktop: the five two-column home sections (doctor, 진료 과목, 장비와 진료 공간,
   questions, directions) share one split line (5 : 7), so the second column starts
   at the same x as the page scrolls. After every base grid rule above. */
@media (min-width: 1141px) {
  .services-index__grid, .faq-layout, .environment, .doctor-grid, .location-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 80px); }
  .services-index__intro { max-width: 520px; }
}

/* Services page: one row per treatment — image, what it is, who it is for. */
.service-list { border-top: 1px solid var(--line); }
.service-item { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; padding-block: 32px; border-bottom: 1px solid var(--line); }
.service-item__image { display: block; aspect-ratio: 3/2; overflow: hidden; background: var(--model-bg); }
.service-item__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
.service-item__head h2 { font-size: var(--fs-t1); }
.service-item__head > p { margin-top: 8px; color: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); }
.service-item__link { margin-top: 10px; color: var(--bronze-dark); justify-content: flex-start; }
.service-item__targets h3 { font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--muted); font-weight: 700; letter-spacing: 0; }
.service-item__targets ul { margin: 10px 0 0; padding: 0; list-style: none; }
.service-item__targets li { position: relative; padding-left: 16px; font-size: calc(15px + var(--fs-boost) * 0.9375); line-height: 1.7; color: var(--ink); }
.service-item__targets li + li { margin-top: 6px; }
.service-item__targets li::before { content: ""; position: absolute; left: 0; top: .75em; width: 6px; height: 6px; border-radius: 50%; background: var(--bronze); }

/* Treatment pages. */
.detail-hero { padding-block: 22px 64px; border-bottom: 1px solid var(--line); }
.detail-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.detail-intro h1 { font-size: calc(clamp(38px, 4vw, 56px) + var(--fs-boost) * 3.5); }
.detail-lead { margin-top: 14px; font-size: var(--fs-t2); font-weight: 500; letter-spacing: -.02em; line-height: 1.6; color: var(--ink); }
.detail-intro > p:not(.detail-lead) { color: var(--body); font-size: calc(16px + var(--fs-boost) * 1); line-height: 1.85; margin-top: 14px; max-width: calc(520px + var(--fs-boost) * 32.5); }
.detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 30px; }
.detail-actions > .text-link { font-variant-numeric: tabular-nums; font-size: calc(16px + var(--fs-boost) * 1); }
.detail-figure { min-width: 0; }
.detail-figure > img { width: 100%; aspect-ratio: 3/2; object-fit: cover; background: var(--model-bg); }
.detail-figure.is-poster > img { aspect-ratio: 1; max-width: 480px; margin-left: auto; object-fit: contain; background: #fff; }
.detail-figure figcaption { margin-top: 10px; font-size: calc(13px + var(--fs-boost) * 0.8125); color: var(--muted); text-align: left; }
/* The square poster sits at the right of its column; its caption follows it. */
.detail-figure.is-poster figcaption { max-width: 480px; margin-left: auto; }
.detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(40px, 6vw, 96px); align-items: start; }
.detail-body__main { min-width: 0; }
.detail-body__main > div + div { margin-top: 56px; }
.target-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.target-list li { display: flex; align-items: center; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--line); font-size: calc(16px + var(--fs-boost) * 1); }
.target-list .icon { width: 20px; height: 20px; color: var(--bronze); }
.step-list { list-style: none; margin: 18px 0 0; padding: 0; }
.step-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 220px; gap: 22px; align-items: start; padding-block: 24px; border-top: 1px solid var(--line); }
.step-list li:last-child { border-bottom: 1px solid var(--line); }
.step-list__no { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white); color: var(--bronze-dark); font-weight: 700; font-size: calc(15px + var(--fs-boost) * 0.9375); font-variant-numeric: tabular-nums; }
.step-list h3 { font-size: calc(20px + var(--fs-boost) * 1.25); margin-top: 3px; }
.step-list p { margin-top: 6px; color: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 40em; }
.step-list__image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; background: var(--model-bg); }
.detail-note { margin-top: 32px; padding: 20px 24px; background: var(--paper); border-left: 3px solid var(--bronze); }
.detail-note strong { font-size: calc(15px + var(--fs-boost) * 0.9375); }
.detail-note p { margin-top: 6px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--body); }
.detail-body__main > .text-link { margin-top: 18px; color: var(--bronze-dark); }
.detail-aside { position: sticky; top: calc(var(--header) + 28px); display: grid; gap: 20px; }
.contact-card { padding: 26px; background: var(--paper); }
.contact-card h2 { font-size: calc(15px + var(--fs-boost) * 0.9375); color: var(--muted); font-weight: 700; letter-spacing: 0; }
.contact-card__phone { display: block; margin-top: 4px; font-size: calc(28px + var(--fs-boost) * 1.75); font-weight: 700; letter-spacing: -.04em; color: var(--bronze-dark); font-variant-numeric: tabular-nums; }
.contact-card dl { margin-top: 16px; display: grid; gap: 6px; font-size: calc(14px + var(--fs-boost) * 0.875); }
.contact-card dl > div { display: flex; justify-content: space-between; gap: 12px; }
.contact-card dt { color: var(--muted); }
.contact-card dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.contact-card .btn { margin-top: 20px; }

/* Process page: six steps in reading order, each with its illustration. */
.process-list { list-style: none; margin: 0; padding: 0; }
/* Number, title and photo start on one line (as in the treatment pages' 진료 순서);
   the 6px centres the 24px title line (1.35) on the 44px number (phones: 4px, 20px on 36px). */
.process-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 360px; gap: 28px; align-items: start; padding-block: 28px; border-top: 1px solid var(--line); }
.process-list li:last-child { border-bottom: 1px solid var(--line); }
.process-list__text { padding-top: 6px; }
.process-list__no { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--bronze-dark); font-weight: 700; font-size: var(--fs-body); align-self: start; }
.process-list h2 { font-size: calc(24px + var(--fs-boost) * 1.5); }
.process-list p { margin-top: 8px; color: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 40em; }
.process-list__image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; background: var(--model-bg); }

/* Reservation and admin retain their original functional markup. */
.reservation-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 75px; align-items: start; }
.reservation-aside { align-self: stretch; min-width: 0; }
.reservation-sticky { position: sticky; top: 116px; }
.reservation-aside h2 { font-size: calc(20px + var(--fs-boost) * 1.25); }
.reservation-aside p:not(.eyebrow) { font-size: calc(15px + var(--fs-boost) * 0.9375); line-height: var(--lh-body); color: var(--body); margin-top: 20px; }
.reservation-phone { display: inline-flex; align-items: center; gap: 14px; font-size: calc(24px + var(--fs-boost) * 1.5); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.04em; margin-top: 23px; }
.reservation-phone .icon { width: 21px; }
.mini-hours { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 15px; }
.mini-hours > p:not(.eyebrow) { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; font-size: calc(13px + var(--fs-boost) * 0.8125); }
.mini-hours strong { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.reservation-photo { margin-top: 28px; }
.reservation-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.reservation-form-wrap { min-width: 0; background: white; padding: clamp(25px, 3vw, 43px); border: 1px solid var(--line); }
.form-section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-bottom: 23px; }
.form-section-head h2 { font-size: var(--fs-t2); letter-spacing: -.02em; }
.form-section-head > .small { margin-left: auto; font-size: calc(13px + var(--fs-boost) * 0.8125); white-space: nowrap; }
.service-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.service-options label { position: relative; cursor: pointer; }
/* '먼저 상담할게요' (the default) takes the whole first row. The fieldset's first
   child is its legend, so this is the first label, not :first-child. */
.service-options label:first-of-type { grid-column: 1 / -1; }
.service-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.service-options label > span { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 14px; border: 1px solid var(--line-strong); font-size: calc(15px + var(--fs-boost) * 0.9375); line-height: 1.5; }
/* Chosen: a 2px deep-teal edge, mint ground and bold text (solid teal is kept for
   the submit, call and booking buttons). */
.service-options input:checked + span { border-color: var(--bronze-dark); box-shadow: inset 0 0 0 1px var(--bronze-dark); background: var(--tint); color: var(--bronze-dark); font-weight: 700; }
.service-options input:focus-visible + span { outline: 3px solid var(--bronze-dark); outline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; margin-bottom: 26px; }
.field { min-width: 0; display: flex; flex-direction: column; }
.field > label, .field > span { font-size: calc(15px + var(--fs-boost) * 0.9375); font-weight: 700; margin-bottom: 9px; }
.field > label > span, .required { color: #a24032; }
.field .optional { color: var(--muted); font-size: calc(13px + var(--fs-boost) * 0.8125); font-weight: 400; margin-left: 6px; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 53px; padding: 14px 15px; border: 1px solid var(--line-strong); border-radius: 2px; background: #fff; font-size: calc(16px + var(--fs-boost) * 1); line-height: 1.4; appearance: auto; }
.field textarea { line-height: 1.8; min-height: 135px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field [aria-invalid="true"] { border-color: #b64634; }
.field-hint { font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--body); margin-top: 9px; line-height: 1.7; }
/* 가까운 진료일: 4 × 2 one-tap chips above the calendar input; the box keeps its
   two-row height before the script fills it (no layout shift). */
.date-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-height: 128px; margin-bottom: 12px; }
.date-chip { display: grid; place-content: center; gap: 2px; min-height: 60px; padding: 6px 4px; border: 1px solid var(--line-strong); background: #fff; font-size: calc(16px + var(--fs-boost) * 1); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.date-chip small { font-size: calc(13px + var(--fs-boost) * 0.8125); font-weight: 400; color: var(--muted); }
.date-chip[aria-pressed="true"] { border-color: var(--bronze-dark); box-shadow: inset 0 0 0 1px var(--bronze-dark); background: var(--tint); color: var(--bronze-dark); }
.date-chip[aria-pressed="true"] small { color: var(--bronze-dark); }
/* Date and time are one decision: date (with its chips) above time at every width,
   so no empty column is left beside the chips. */
.form-grid:has(.date-chips) { grid-template-columns: 1fr; }
/* Desktop: the eight chips in one row; the calendar and time fields keep a field's width. */
@media (min-width: 981px) {
  .date-chips { grid-template-columns: repeat(8, minmax(0, 1fr)); min-height: 60px; }
}
.field-error { font-size: calc(14px + var(--fs-boost) * 0.875); font-weight: 700; color: #a13227; line-height: 1.6; margin-top: 7px; }
.field-error:empty { display: none; }
.align-right { text-align: right; }
.honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent-box { margin-top: 25px; padding-block: 22px; border-block: 1px solid var(--line); display: flex; align-items: start; gap: 15px; justify-content: space-between; }
.checkbox-label { display: flex; gap: 11px; align-items: start; cursor: pointer; font-size: calc(15px + var(--fs-boost) * 0.9375); line-height: 1.8; }
.checkbox-label input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--bronze); flex-shrink: 0; }
.consent-box > a { font-size: calc(14px + var(--fs-boost) * 0.875); display: flex; gap: 5px; align-items: center; white-space: nowrap; min-height: 44px; }
.consent-box > a .icon { width: 14px; height: 14px; }
.consent-note { font-size: calc(14px + var(--fs-boost) * 0.875); margin-top: 15px; line-height: 1.8; }
.form-error { border: 1px solid #dcc0b7; background: #fff5ef; color: #953e2c; font-size: calc(13px + var(--fs-boost) * 0.8125); padding: 13px 16px; margin-top: 18px; line-height: 1.8; }
.reservation-form-wrap form > button[type="submit"] { margin-top: 24px; }
.form-bottom-note { font-size: calc(14px + var(--fs-boost) * 0.875); text-align: center; color: var(--body); margin-top: 13px; }
.reservation-success { text-align: center; padding-block: 30px; }
.reservation-success > .icon { width: 55px; height: 55px; color: var(--bronze-dark); margin-inline: auto; border: 1px solid var(--line); border-radius: 50%; padding: 12px; }
.reservation-success > p { margin-top: 22px; font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--body); }
/* The clinic number in the message can be tapped; underlined so it reads as a link. */
.reservation-success > p a { color: var(--bronze-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.reservation-success .success-reference { background: var(--paper); padding: 12px; font-size: calc(15px + var(--fs-boost) * 0.9375); }
/* What was sent, read back: service, date and time, the number we will call. */
.success-summary { display: grid; gap: 8px; max-width: calc(360px + var(--fs-boost) * 22.5); margin: 22px auto 0; text-align: left; font-size: calc(15px + var(--fs-boost) * 0.9375); }
.success-summary > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.success-summary dt { color: var(--muted); }
.success-summary dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
/* Next step first (오시는 길), then 홈으로, then the quiet "someone else" link. */
.reservation-success > .btn { margin-top: 28px; }
.reservation-success > .text-link { display: flex; width: max-content; margin: 8px auto 0; }
.reservation-success > button.text-link { margin-top: 0; font-size: calc(13px + var(--fs-boost) * 0.8125); font-weight: 500; color: var(--body); }
.legal-content { max-width: calc(850px + var(--fs-boost) * 53.12); }
.legal-content h2 { font: 700 calc(24px + var(--fs-boost) * 1.5)/1.6 var(--sans); margin-top: 35px; margin-bottom: 15px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { color: var(--body); font-size: var(--fs-body); line-height: 1.8; max-width: 40em; }
.legal-content > p:last-child { margin-top: 30px; font-size: calc(13px + var(--fs-boost) * 0.8125); }
.empty-state { text-align: center; padding: 35px 20px; color: var(--body); font-size: calc(14px + var(--fs-boost) * 0.875); }
.admin-shell { min-height: 100dvh; background: var(--paper); padding-bottom: 60px; }
.admin-header { padding: 25px var(--gutter); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 30px; }
.admin-badge { font-size: calc(13px + var(--fs-boost) * 0.8125); font-weight: 700; color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line); }
.admin-header > button { margin-left: auto; }
.admin-login { width: min(calc(100% - 44px), 460px); margin: 65px auto 0; background: var(--white); border: 1px solid var(--line); padding: 35px; }
.login-icon { display: inline-flex; padding: 15px; border: 1px solid var(--line); border-radius: 50%; margin-bottom: 22px; color: var(--bronze); }
.admin-login > h1 { font: 700 calc(35px + var(--fs-boost) * 2.188)/1.5 var(--sans); }
.admin-login > p:not(.eyebrow) { font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--body); margin-top: 15px; }
.admin-login form { margin-top: 25px; }
.admin-login form > button { margin-top: 22px; }
.admin-login > a { margin-top: 20px; }
.admin-dashboard { width: min(calc(100% - var(--gutter) * 2), 1240px); margin: 50px auto 0; }
.dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.dashboard-heading h1 { font: 700 calc(38px + var(--fs-boost) * 2.375)/1.5 var(--sans); }
.dashboard-heading p:not(.eyebrow) { font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--body); margin-top: 12px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 35px; }
.admin-stat { padding: 20px; background: var(--white); border: 1px solid var(--line); }
.admin-stat > span { font-size: calc(13px + var(--fs-boost) * 0.8125); color: var(--body); }
.admin-stat > strong { font-size: calc(32px + var(--fs-boost) * 2); font-weight: 500; display: block; }
.admin-filters { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 15px; align-items: end; margin-block: 30px; }
.admin-filters > .btn { min-height: 53px; }
.reservation-entry { padding: 25px; background: var(--white); border: 1px solid var(--line); margin-bottom: 18px; }
.reservation-entry__header { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.reservation-entry__header h2 { font: 700 calc(23px + var(--fs-boost) * 1.438)/1.6 var(--sans); }
.reservation-entry h2 small { display: inline-block; font-size: calc(13px + var(--fs-boost) * 0.8125); margin-left: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.status-pill { font-size: calc(12px + var(--fs-boost) * 0.75); border-radius: 20px; background: var(--tint); padding: 4px 12px; white-space: nowrap; }
.status-pill[data-status="confirmed"] { background: var(--tint); color: var(--bronze-dark); }
.status-pill[data-status="cancelled"] { background: #f4e4dd; color: #8a4234; }
.reservation-entry__info { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 20px; font-size: calc(14px + var(--fs-boost) * 0.875); }
.reservation-entry__info strong { display: block; font-size: calc(11px + var(--fs-boost) * 0.6875); color: var(--muted); font-weight: 400; }
.reservation-entry__message { background: var(--paper); padding: 13px; margin-top: 20px; font-size: calc(13px + var(--fs-boost) * 0.8125); }
.reservation-entry__actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
.reservation-entry__actions form { display: flex; gap: 10px; }
.reservation-entry__actions select { min-height: 44px; border: 1px solid var(--line); background: white; padding: 8px 12px; font-size: calc(13px + var(--fs-boost) * 0.8125); }
.reservation-entry__actions button { min-height: 44px; background: var(--bronze); color: white; padding: 8px 14px; font-size: calc(13px + var(--fs-boost) * 0.8125); }
.reservation-entry__actions > span { font-size: calc(11px + var(--fs-boost) * 0.6875); color: var(--muted); }
.admin-footnote { margin-top: 25px; }
.notify-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 28px; padding: 18px 22px; background: var(--white); border: 1px solid var(--line); border-left: 3px solid #f2d200; }
.notify-panel h2 { font-size: calc(17px + var(--fs-boost) * 1.062); }
.notify-panel p { margin-top: 4px; font-size: calc(14px + var(--fs-boost) * 0.875); color: var(--body); line-height: 1.7; }
.notify-panel .notify-result:empty { display: none; }
.notify-panel .notify-result { color: var(--bronze-dark); font-weight: 700; }

/* Animate intentional state changes, not every paragraph entering the viewport. */
@media (hover: hover) and (pointer: fine) {
  /* Hover colours only where a mouse can actually hover: on touch screens a tapped
     button would otherwise keep its hover colour until the next tap elsewhere. */
  .btn:hover { background: var(--bronze-dark); border-color: var(--bronze-dark); }
  .btn--outline:hover { color: var(--bronze-dark); background: var(--tint); border-color: var(--bronze); }
  .btn--light:hover { background: var(--tint); border-color: var(--tint); color: var(--bronze-dark); }
  .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
  html[data-open="no"] .visit-cta__actions > .btn--ghost:hover { background: var(--tint); border-color: var(--tint); }
  html[data-open="no"] .visit-cta__actions > .btn--light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
  .text-link:hover > .icon { transform: translateX(3px); }
  .icon-btn:hover, .circle-link:hover { background: var(--tint); border-color: var(--bronze); }
  .desktop-nav > a:hover::after { transform: scaleX(1); }
  .standard-indicator:hover { color: var(--bronze-dark); background: #fff; transform: translateX(3px); }
  .standard-indicator:hover:active { transform: translateX(3px) scale(.94); }
  .notice-actions button:hover { background: var(--paper); }
  .breadcrumb a:hover { color: var(--bronze-dark); }
  .service-item__head h2 a:hover { color: var(--bronze-dark); }
  .journal-card:hover .journal-card__image > img { transform: scale(1.025); }
  .filter-chip:hover { background: var(--paper); }
  .environment-tabs button:hover { background: var(--tint); color: var(--bronze-dark); }
  .gallery-thumb:hover { opacity: 1; }
  .faq-item summary:hover, .faq-item[open] { background: var(--tint); }
  .journal-card:hover h3 { color: var(--bronze-dark); }
  .service-rows a:hover > .icon { transform: translateX(3px); }
  .service-item__image:hover + .service-item__head h2 a { color: var(--bronze-dark); }
  .service-item__image:hover img { transform: scale(1.03); }
  .field :is(input, select, textarea):not([aria-invalid="true"]):hover, .date-chip:not([aria-pressed="true"]):hover { border-color: var(--bronze); }
}
/* Desktop rows show one highlight only (.is-active, picked by scroll, mouse or keyboard). */
@media (max-width: 980px) and (hover: hover) and (pointer: fine) {
  .service-rows a:hover { background: var(--tint); }
  .service-rows a:hover strong { color: var(--bronze-dark); }
}
.faq-item summary, .faq-item { transition: background 180ms; }
/* Touch screens get no hover, so give rows and links a pressed state instead. */
@media (hover: none) {
  .service-rows a:active, .faq-item summary:active, .mobile-menu nav a:active, .environment-tabs button:active, .gallery-thumb:active { background: var(--tint); }
  .text-link:active, .fact__link:active { color: var(--bronze-dark); opacity: .75; }
  .mobile-dock a:active { filter: brightness(.94); }
  .icon-btn:active { background: var(--tint); }
}
/* Windows high-contrast themes drop background colours; keep shapes visible. */
@media (forced-colors: active) {
  .step-list__no, .process-list__no, .standard-indicator, .icon-btn { border: 1px solid CanvasText; }
  .fact + .fact, .service-rows li, .target-list li { border-color: CanvasText; }
  .hero-shade, .standards-stage::before { forced-color-adjust: none; }
  /* Selected states are drawn with fills and shadows the theme removes, and the
     transparent "unselected" edges turn CanvasText: hide those edges (Canvas) and
     mark the chosen item with the theme's own Highlight. */
  .gallery-thumb, .environment-tabs button { border-top-color: Canvas; }
  .environment-tabs button { border-bottom-color: CanvasText; }
  .gallery-thumb { border-bottom-color: Canvas; }
  .gallery-thumb.is-active { border-bottom-color: Highlight; }
  .environment-tabs [aria-selected="true"] { border-top-color: Highlight; }
  .date-chip[aria-pressed="true"], .service-options input:checked + span, .environment-tabs [aria-selected="true"], .service-rows li.is-active > a { outline: 3px solid Highlight; outline-offset: -5px; }
}
@media (min-width: 701px) and (max-width: 1140px) {
  .desktop-nav { gap: 19px; }
  .desktop-nav > a { font-size: calc(13px + var(--fs-boost) * 0.8125); }
  .header-phone { display: none; }
  .brand__ko { font-size: calc(23px + var(--fs-boost) * 1.438); }
  .header-inner { gap: 22px; }
  .doctor-grid { gap: 45px; }
  .location-grid { gap: 35px; }
  .faq-layout { gap: 45px; }
  .detail-hero__grid { gap: 35px; grid-template-columns: .9fr 1.1fr; }
  .reservation-grid { gap: 40px; }
  .journal-grid { gap: 25px; }
}
/* Tablets (701–980px): the phone's hero, copy at the foot over a vertical shade (the
   copy is too wide for the left-hand shade). The buttons stay: no dock above 700px.
   The stops are measured from the bottom, so the deep part always covers the copy
   (about 420px with its padding), on a tall portrait tablet and a short landscape
   phone alike; above it the photo stays clear. */
@media (min-width: 701px) and (max-width: 980px) {
  .hero-inner { align-items: flex-end; padding-block: 72px 88px; }
  .hero-shade { background: linear-gradient(0deg, rgba(14,33,29,.90) 0px, rgba(14,33,29,.80) 470px, rgba(14,33,29,.28) 680px, rgba(14,33,29,.12) 100%); }
}
/* Narrow desktops (981–1140px): the copy spans about half the width, so the shade
   stays deep that far across. */
@media (min-width: 981px) and (max-width: 1140px) {
  .hero-shade { background: linear-gradient(90deg, rgba(14,33,29,.80) 0%, rgba(14,33,29,.70) 55%, rgba(14,33,29,.25) 95%); }
}
@media (max-width: 980px) {
  .standards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .standard-panel { min-height: 340px; padding-block: 25px; border-bottom: 1px solid #ffffff36; }
  .standard-panel:nth-child(2) { border-right: 1px solid #ffffff36; }
  .standard-number { margin-bottom: 15px; font-size: calc(42px + var(--fs-boost) * 2.625); }
  .standard-detail { min-height: 80px; margin-top: 20px; }
  .standard-indicator { margin-top: 10px; }
  .environment { grid-template-columns: .9fr 1.1fr; column-gap: 30px; row-gap: 25px; }
  .environment-tabs button { padding: 18px 12px; gap: 14px; min-height: 94px; }
  .environment-tabs strong { font-size: var(--fs-lead); }
  .environment-tabs button > .icon:first-child { width: 26px; height: 26px; }
  .environment-copy { padding: 22px; }
  .environment-copy h3 { font-size: var(--fs-t2); }
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-phone { display: inline-flex; }
  .header-actions { gap: 17px; }
  .hero-actions { gap: 18px; }
  .hero-actions .btn { padding-inline: 18px; gap: 20px; }
  .hero-backdrop .hero-image { height: 100%; }
  .doctor-grid { align-items: start; }
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .location-grid { grid-template-columns: 1fr; }
  .location-copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: 45px; align-items: start; }
  /* Left: address, copy, directions, transport. Right: the hours. */
  .location-copy > .eyebrow, .location-copy > h3, .location-copy > .text-link { grid-column: 1; }
  .location-copy > .text-link { justify-self: start; }
  .location-copy .hours-panel { grid-column: 2; grid-row: 1/5; margin-top: 0; }
  .location-copy .transport { margin-top: 15px; grid-column: 1; }
  .location-copy .button-row { grid-column: 1; }
  .clinic-map { height: 530px; }
  .map-fallback > img { height: 58%; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-contact { align-items: flex-start; }
  .footer-bottom { align-items: start; flex-direction: column; gap: 10px; }
  .promise-layout { gap: 40px; }
  .reservation-grid { grid-template-columns: .7fr 1.3fr; gap: 30px; }
  .reservation-phone { gap: 13px; }
  .service-options label > span { padding-inline: 10px; font-size: calc(14px + var(--fs-boost) * 0.875); }
  .form-grid { gap: 15px; }
}
@media (max-width: 700px) {
  /* Phones read body text in their own Korean UI font (Android's built-in font is
     Noto Sans CJK, iPhone's is Apple SD Gothic Neo): no 319 KB download and no
     late font swap moving the page. "Noto Sans KR" is deliberately not named here,
     so the web font is never requested on phones. Titles keep Jeju Myeongjo. */
  :root { --header: 60px; --gutter: 22px; --dock: calc(63px + env(safe-area-inset-bottom)); --sans: "Apple SD Gothic Neo", "Noto Sans CJK KR", system-ui, -apple-system, "Malgun Gothic", sans-serif; }
  body { padding-bottom: var(--dock); }
  body[data-page="admin.html"] { padding-bottom: 0; }
  .back-top { display: none; }
  h1 { font-size: calc(39px + var(--fs-boost) * 2.438); }
  h2 { font-size: calc(26px + var(--fs-boost) * 1.625); }
  .brand { gap: 9px; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__ko { font-size: calc(19px + var(--fs-boost) * 1.188); }
  .header-inner { width: calc(100% - 36px); gap: 10px; }
  .header-actions { gap: 6px; }
  .header-actions > .btn { display: none; }
  /* Phones: call and booking live in the bottom dock only (one place, thumb reach). */
  .header-phone { display: none; }
  .menu-toggle { width: 44px; height: 44px; margin-right: -8px; }
  .section-copy { max-width: 100%; }
  .eyebrow { font-size: calc(13px + var(--fs-boost) * 0.8125); margin-bottom: 10px; }
  .hero-copy { padding: 0; }
  .hero-actions { margin-top: 26px; gap: 8px; }
  .hero-actions > .btn { font-size: calc(15px + var(--fs-boost) * 0.9375); padding-inline: 12px; gap: 8px; min-height: 50px; flex: 1 1 140px; white-space: nowrap; }
  .hero-actions > .btn .icon { width: 17px; height: 17px; }
  .hero-backdrop .hero-image { height: 100%; aspect-ratio: auto; object-position: 62% center; }
  /* The home hero's buttons repeat the dock right below them; the dock keeps them. */
  body[data-page="index.html"] .hero-actions { display: none; }
  /* Treatment pages likewise: the dock's "이 진료 상담 예약" and call replace the hero pair. */
  .detail-actions { display: none; }
  /* Shade only behind the copy (bottom), so the photo itself stays visible; at the
     height where the copy starts the shade is already .78+ (white text 8:1+). */
  .hero-shade { background: linear-gradient(180deg, rgba(14,33,29,.15) 0%, rgba(14,33,29,.25) 30%, rgba(14,33,29,.78) 55%, rgba(14,33,29,.90) 100%); }
  .hero-inner { min-height: calc(100vh - var(--header) - var(--dock)); min-height: calc(100svh - var(--header) - var(--dock)); padding-block: 40px 32px; align-items: flex-end; }
  .hero-scroll { display: none; }
  .hero-place { font-size: calc(14px + var(--fs-boost) * 0.875); margin-bottom: 14px; }
  .hero-copy h1 { font-size: calc(clamp(31px, 8.6vw, 40px) + var(--fs-boost) * 2.5); }
  .hero-copy h1 + p { font-size: calc(16px + var(--fs-boost) * 1); margin-top: 16px; }
  .hero-copy h1 + p br { display: none; }
  /* Phones: a plain dark ground instead of photos (no English chart showing
     through, nothing downloaded), full-width rows, every reason readable. */
  .standards-backdrops, .standards-stage::before { display: none; }
  .standards-stage { background: #203c37; }
  .standards-grid { grid-template-columns: 1fr; }
  .standards-grid.container { width: 100%; }
  .standard-panel { display: grid; grid-template-columns: 1fr; align-items: start; min-height: 0; padding: 17px var(--gutter); text-align: left; border-left: 0; border-right: 0; border-bottom: 1px solid #ffffff26; }
  .standard-panel:last-child, .standard-panel:nth-child(2) { border-right: 0; }
  /* 44px press target; the row is centred as a whole (align-content), so the number
     and the title keep their shared top line. The panel's 17px (was 22px) keeps its height. */
  .standard-select { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; align-content: center; min-height: 44px; }
  .standard-number { font-size: calc(22px + var(--fs-boost) * 1.375); margin: 0; padding-bottom: 5px; align-self: start; }
  .standard-number::after { left: 0; right: 12px; }
  .standard-title { font-size: calc(17px + var(--fs-boost) * 1.062); line-height: 1.65; }
  .standard-title br { display: none; }
  .standard-detail { grid-column: 1; grid-row: auto; min-height: 0; max-height: none; margin-top: 10px; padding-left: 40px; font-size: calc(16px + var(--fs-boost) * 1); line-height: 1.75; }
  .standard-indicator { grid-column: 1; grid-row: auto; justify-self: start; margin: 6px 0 0 40px; padding: 0; border: 0; border-radius: 0; color: #c0e4e3; }
  .environment { display: flex; flex-direction: column; gap: 28px; }
  .environment-heading > p:last-child { margin-top: 19px; }
  .environment-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .environment-tabs button { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 15px 6px; min-height: 88px; }
  .environment-tabs strong { line-height: 1.5; word-break: keep-all; }
  .environment-tabs button > .icon:last-child { display: none; }
  .environment-tab__text { align-items: center; }
  .environment-tab__text small { display: none; }
  .environment-panels { width: 100%; }
  .environment-photo img { aspect-ratio: 3 / 2; }
  .environment-photo figcaption { padding: 10px 14px; }
  .environment-copy { min-height: 0; padding: 23px 20px; }
  .section-end { padding-top: 24px; }
  .doctor-grid { grid-template-columns: 1fr; gap: 33px; }
  .doctor-photo > img { aspect-ratio: 1.1; object-position: 50% 30%; }
  .doctor-copy .lead { margin-top: 24px; }
  .doctor-copy > .text-link { margin-top: 20px; }
  .doctor-facts > div { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; font-size: calc(14px + var(--fs-boost) * 0.875); }
  .promise-layout { grid-template-columns: 1fr; gap: 30px; }
  .promise-list h3 { font-size: calc(18px + var(--fs-boost) * 1.125); }
  .gallery-slide > img { aspect-ratio: 1.45; }
  .gallery-slide figcaption { padding: 15px; gap: 12px; }
  .gallery-slide figcaption > strong { font-size: var(--fs-body); }
  .gallery-slide figcaption { flex-direction: column; align-items: flex-start; gap: 2px; }
  .gallery-slide figcaption > span { font-size: calc(13px + var(--fs-boost) * 0.8125); }
  .gallery-expand { top: 12px; right: 12px; width: 44px; height: 44px; }
  .gallery-footer { padding-block: 14px; }
  .gallery-controls { gap: 18px; margin-left: auto; }
  .gallery-count { font-size: calc(13px + var(--fs-boost) * 0.8125); }
  .gallery-thumbs { gap: 9px; }
  .gallery-thumb { width: 95px; }
  .lightbox { padding: 65px 12px; max-width: 100vw; width: 100vw; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 10px; }
  .lightbox figure img { max-height: 68dvh; }
  .journal-grid { grid-template-columns: 1fr; gap: 30px; }
  .journal-card__image img { aspect-ratio: 1.55; }
  .journal-card h3 { font-size: var(--fs-lead); }
  .faq-layout { grid-template-columns: 1fr; gap: 30px; }
  .faq-layout > div > p:not(.eyebrow) { margin-top: 18px; }
  .faq-layout .text-link { margin-top: 12px; }
  .faq-item summary { gap: 15px; font-size: calc(16px + var(--fs-boost) * 1); padding-block: 18px; min-height: 64px; }
  .faq-item summary .icon { width: 17px; }
  .faq-answer { padding: 0 0 22px; }
  .faq-search { gap: 12px; }
  .faq-search input { font-size: calc(16px + var(--fs-boost) * 1); }
  .faq-contact { padding: 25px; flex-direction: column; align-items: start; gap: 20px; }
  .faq-contact h2 { font-size: calc(20px + var(--fs-boost) * 1.25); }
  .faq-contact a { font-size: calc(26px + var(--fs-boost) * 1.625); }
  .location-grid { gap: 30px; }
  /* Address and the directions button come before the entrance photo (first screen). */
  .location-copy { display: block; order: -1; }
  .location-copy .hours-panel { margin-top: 23px; }
  .clinic-map { height: 475px; }
  .map-fallback > img { height: 52%; }
  .map-fallback__copy { padding: 19px 21px; }
  .map-fallback__copy > .btn { margin-top: 16px; }
  .map-toolbar { padding: 12px 14px; }
  .hours-panel strong { font-size: calc(22px + var(--fs-boost) * 1.375); }
  .hours-panel > p > span { font-size: calc(14px + var(--fs-boost) * 0.875); }
  .button-row { gap: 18px; }
  .button-row > .btn { font-size: calc(14px + var(--fs-boost) * 0.875); gap: 24px; }
  .visit-cta { padding-block: 48px; }
  .visit-cta__inner { align-items: start; flex-direction: column; gap: 28px; }
  .visit-cta__inner > div:first-child > p br { display: none; }
  .visit-cta__actions { width: 100%; }
  .visit-cta__actions > .btn { width: 100%; }
  .site-footer { padding-block: 28px 22px; }
  .footer-main { display: grid; grid-template-columns: 1fr; gap: 20px; padding-bottom: 22px; }
  .footer-main .brand__ko { font-size: calc(21px + var(--fs-boost) * 1.312); }
  .footer-brand { grid-column: auto; }
  .footer-contact { align-items: flex-start; }
  .footer-phone { font-size: calc(26px + var(--fs-boost) * 1.625); }
  .footer-bottom { gap: 15px; }
  .footer-bottom nav { gap: 4px 20px; }
  .mobile-dock { display: grid; grid-template-columns: .8fr 1.2fr; position: fixed; bottom: 0; left: 0; right: 0; padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom) env(safe-area-inset-left, 0px); background: var(--white); border-top: 1px solid var(--line); z-index: 25; }
  .mobile-dock a { display: flex; min-height: 62px; align-items: center; justify-content: center; gap: 12px; font-size: calc(15px + var(--fs-boost) * 0.9375); font-weight: 700; }
  .mobile-dock a:last-child { background: var(--bronze); color: var(--white); }
  .mobile-dock .icon { width: 19px; height: 19px; }
  /* A focused field (or one scrolled to) is never left under the dock. */
  html { scroll-padding-bottom: calc(var(--dock) + 16px); }
  /* On the booking page itself the dock only offers the call. */
  body[data-page="reservation.html"] .mobile-dock { grid-template-columns: 1fr; }
  body[data-page="reservation.html"] .mobile-dock a[href^="/reservation.html"] { display: none; }
  /* While typing, the dock steps aside so the keyboard and the field have the room. */
  .mobile-dock { transition: transform 200ms var(--ease-out); }
  body:has(main :is(input:not([type=radio]):not([type=checkbox]), select, textarea):focus) .mobile-dock { transform: translateY(100%); }
  .back-top { bottom: calc(78px + env(safe-area-inset-bottom)); right: 18px; width: 44px; height: 44px; }
  .toast { bottom: calc(82px + env(safe-area-inset-bottom)); width: max-content; font-size: calc(12px + var(--fs-boost) * 0.75); }
  .page-hero { padding-block: 23px 40px; }
  .breadcrumb { margin-bottom: 22px; gap: 8px; }
  .page-hero h1 { font-size: calc(34px + var(--fs-boost) * 2.125); }
  .page-hero p:not(.eyebrow) { margin-top: 12px; }
  .filter-bar { gap: 8px; margin-bottom: 27px; }
  .filter-chip { padding: 9px 17px; min-height: 44px; font-size: calc(13px + var(--fs-boost) * 0.8125); }
  .detail-hero { padding-block: 24px 39px; }
  .detail-hero__grid { grid-template-columns: 1fr; gap: 31px; }
  .detail-intro h1 { font-size: calc(38px + var(--fs-boost) * 2.375); }
  .detail-lead { font-size: calc(18px + var(--fs-boost) * 1.125); }
  .reservation-grid { grid-template-columns: 1fr; gap: 30px; }
  .reservation-aside { display: none; }
  .reservation-section { padding-top: 34px; }
  .reservation-sticky { position: static; }
  .reservation-aside .reservation-photo, .reservation-aside .mini-hours { display: none; }
  .reservation-aside p:not(.eyebrow) { font-size: calc(14px + var(--fs-boost) * 0.875); margin-top: 17px; }
  .reservation-phone { margin-top: 20px; gap: 20px; }
  /* Phones: no card frame around the form, so the fields get the full width. */
  .reservation-form-wrap { padding: 0; border: 0; }
  .form-section-head { gap: 12px; margin-bottom: 20px; }
  .form-section-head h2 { font-size: var(--fs-lead); }
  .service-options { gap: 8px; }
  .service-options label > span { padding: 11px 12px; font-size: calc(15px + var(--fs-boost) * 0.9375); gap: 7px; }
  .form-grid { grid-template-columns: 1fr; gap: 21px; margin-block: 27px; }
  .field input, .field select { min-height: 53px; font-size: calc(16px + var(--fs-boost) * 1); }
  .consent-box { gap: 10px; }
  .checkbox-label { gap: 8px; }
  .reservation-success h2 { font-size: calc(30px + var(--fs-boost) * 1.875); }
  .legal-content h2 { font-size: var(--fs-t2); }
  .admin-header { padding: 22px; gap: 18px; flex-wrap: wrap; }
  .admin-badge { display: none; }
  .admin-login { padding: 28px; margin-top: 35px; }
  .admin-login > h1 { font-size: calc(32px + var(--fs-boost) * 2); }
  .admin-dashboard { margin-top: 32px; }
  .dashboard-heading { align-items: start; flex-direction: column; gap: 22px; }
  .dashboard-heading h1 { font-size: calc(31px + var(--fs-boost) * 1.938); }
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 25px; }
  .admin-stat { padding: 17px; }
  .admin-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .admin-filters .field:first-child { grid-column: 1/-1; }
  .admin-filters .btn { grid-column: 1/-1; }
  .reservation-entry { padding: 20px; }
  .reservation-entry__header h2 { font-size: calc(22px + var(--fs-boost) * 1.375); }
  .reservation-entry h2 small { display: block; margin: 5px 0 0; }
  .reservation-entry__info { display: grid; gap: 15px; }
  .reservation-entry__actions { gap: 15px; }
  /* Phone reading size: body text is 16px like the desktop, never smaller. */
  .doctor-copy > p:not(.eyebrow):not(.lead), .faq-answer > p, .journal-card p, .environment-copy > p, .promise-list p, .legal-content p, .page-hero p:not(.eyebrow), .detail-intro > p:not(.detail-lead), .section-copy { font-size: var(--fs-body); line-height: var(--lh-body); }
  .service-rows__text > span, .environment-tabs strong { font-size: calc(15px + var(--fs-boost) * 0.9375); }
  .location-copy h3, .environment-copy h3 { font-size: var(--fs-t2); }
}
@media (max-width: 359px) {
  .brand { gap: 7px; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__ko { font-size: calc(18px + var(--fs-boost) * 1.125); }
  :root { --gutter: 18px; }
  .hero-actions { gap: 15px; }
  .hero-actions > .btn { padding-inline: 14px; }
  .page-hero h1 { font-size: calc(31px + var(--fs-boost) * 1.938); }
  .detail-intro h1 { font-size: calc(34px + var(--fs-boost) * 2.125); }
  .service-options label > span { font-size: calc(14px + var(--fs-boost) * 0.875); }
  .filter-chip { padding-inline: 15px; }
}
@media (max-width: 1140px) {
  .service-item { grid-template-columns: 180px minmax(0, 1fr); }
  .service-item__targets { grid-column: 2; }
  .process-list li { grid-template-columns: 48px minmax(0, 1fr) 240px; }
  .step-list li { grid-template-columns: 40px minmax(0, 1fr) 180px; }
  .detail-body { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 980px) {
  .clinic-facts__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .services-index__grid { grid-template-columns: 1fr; gap: 26px; }
  .services-index__intro { position: static; }
  .detail-body { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
  .step-list li { grid-template-columns: 40px minmax(0, 1fr) 200px; }
}
@media (max-width: 700px) {
  .fact { padding: 16px 12px 16px 0; }
  .fact + .fact { padding-left: 14px; }
  .fact:nth-child(3) { padding-left: 0; }
  .fact > strong { font-size: calc(17px + var(--fs-boost) * 1.062); }
  .fact__sub { font-size: calc(14px + var(--fs-boost) * 0.875); }
  /* "가동 3층" and "증산역 인근" on their own lines, no dot hanging at a line end. */
  .fact__sep { display: none; }
  .fact__near { display: block; }
  /* The script swaps the weekly hours for today's status after load; reserve two
     lines so the swap never changes the row height (no layout shift). */
  .fact__sub { min-height: 3.2em; }
  .service-rows a { grid-template-columns: 64px minmax(0, 1fr) 18px; gap: 14px; padding-block: 12px; }
  .service-rows strong { font-size: calc(17px + var(--fs-boost) * 1.062); }
  .service-item { grid-template-columns: 1fr; gap: 16px; padding-block: 26px; }
  .service-item__targets { grid-column: auto; }
  .service-item__head h2 { font-size: var(--fs-t2); }
  .detail-body__main > div + div { margin-top: 44px; }
  .target-list li { font-size: calc(15px + var(--fs-boost) * 0.9375); padding-block: 14px; }
  .step-list li { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .step-list__image { grid-column: 2; }
  .step-list__no { width: 32px; height: 32px; font-size: calc(14px + var(--fs-boost) * 0.875); }
  .step-list h3 { font-size: calc(18px + var(--fs-boost) * 1.125); }
  .detail-note { padding: 18px; }
  .contact-card { padding: 22px; }
  .process-list li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding-block: 24px; }
  .process-list__image { grid-column: 2; }
  .process-list__no { width: 36px; height: 36px; font-size: calc(15px + var(--fs-boost) * 0.9375); }
  .process-list h2 { font-size: calc(20px + var(--fs-boost) * 1.25); }
  .process-list__text { padding-top: 4px; }
  .journal-grid--2, .journal-grid--1 { grid-template-columns: 1fr; }
}
/* Home blog list: small square thumbnails beside the text (about a fifth of the
   poster area the old cards used), so the posters no longer take the accent. */
.journal-grid--list .journal-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; align-items: start; padding-block: 24px; }
.journal-grid--list .journal-card__image img { aspect-ratio: 1; object-fit: cover; }
.journal-grid--list .journal-card__meta { margin-top: 0; }
.journal-grid--list .journal-card h3 { font-size: calc(18px + var(--fs-boost) * 1.125); margin-top: 6px; }
.journal-grid--list .journal-card p { margin-top: 8px; }
.journal-grid--list .text-link { display: none; }
/* Below desktop the three posts read as one list (no lone card on a second row). */
@media (max-width: 980px) {
  .journal-grid--list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .journal-grid--list .journal-card { grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; padding-block: 16px; }
  .journal-grid--list .journal-card p { display: none; }
  /* 진료 이야기 and 관련 블로그 글 on phones: the same thumbnail list as the home
     page, with a two-line summary, instead of a wall of full-width posters. */
  .journal-grid:not(.journal-grid--list) { gap: 0; border-top: 1px solid var(--line); }
  .journal-grid:not(.journal-grid--list) .journal-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; align-items: start; padding-block: 16px; border-bottom: 1px solid var(--line); }
  .journal-grid:not(.journal-grid--list) .journal-card__image img { aspect-ratio: 1; object-fit: cover; }
  .journal-grid:not(.journal-grid--list) .journal-card__meta { margin-top: 0; }
  .journal-grid:not(.journal-grid--list) .journal-card h3 { font-size: var(--fs-lead); margin-top: 6px; }
  .journal-grid:not(.journal-grid--list) .journal-card p { margin-top: 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .journal-grid:not(.journal-grid--list) .text-link { display: none; }
}
/* ───────────────────────── Motion ─────────────────────────
   Marketing surface, mostly first-visit: entrances fire once, scroll-driven
   sections explain, everything else is press/state feedback. transform,
   opacity and clip-path only. The reduced-motion block below switches all of
   it off, and the scripts skip hiding/pinning anything in that case. */

/* First screen: the photo settles, the copy rises in order. The photo is the
   LCP element, so it only scales (visible from the first frame). */
@keyframes hero-settle { from { transform: scale(1.06); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes nudge { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(5px); } }
/* After settling, the photo breathes very slightly (owner's request): 1 → 1.04 → 1
   over 24s on a sine curve, slow enough to read as depth rather than movement.
   experience.js pauses it while the first screen is scrolled out of view. */
@keyframes hero-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.hero-image { animation: hero-settle 1800ms var(--ease-out) both, hero-breathe 24s var(--ease-breathe) 1800ms infinite; will-change: transform; }
.hero-copy > * { animation: rise-in 800ms var(--ease-out) both; }
.hero-copy > :nth-child(1) { animation-delay: 120ms; }
.hero-copy > :nth-child(2) { animation-delay: 200ms; }
.hero-copy > :nth-child(3) { animation-delay: 300ms; }
.hero-copy > :nth-child(4) { animation-delay: 400ms; }
.hero-scroll { animation: rise-in 800ms var(--ease-out) 700ms both; }
.hero-scroll .icon { animation: nudge 2200ms var(--ease-in-out) 1600ms 3; }
.page-hero__content > *, .detail-intro > * { animation: rise-in 700ms var(--ease-out) both; }
.page-hero__content > :nth-child(2), .detail-intro > :nth-child(2) { animation-delay: 80ms; }
.detail-intro > :nth-child(3) { animation-delay: 140ms; }
.detail-intro > :nth-child(4) { animation-delay: 200ms; }
@keyframes lift-in { from { transform: translateY(14px); } }
.detail-figure { animation: lift-in 900ms var(--ease-out) 160ms both; }

/* Scroll reveal (scripts add .reveal-pending only to what starts below the fold).
   Section titles, photos and cards only: the info bar, booking band, address and
   questions are never hidden. Short and small, so it reads as arrival, not a show. */
.reveal-pending { opacity: 0; transform: translateY(12px); }
.reveal-pending.is-revealed { opacity: 1; transform: none; transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
[data-reveal="clip"].reveal-pending { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
[data-reveal="clip"].reveal-pending.is-revealed { clip-path: inset(0 0 0 0); transition: clip-path 800ms var(--ease-in-out); }

/* 진료 과목: sticky preview that follows the row in the middle of the screen. */
.service-preview { display: grid; margin-top: 32px; }
.service-preview__item { grid-area: 1 / 1; min-width: 0; opacity: 0; transition: opacity 280ms var(--ease-out); pointer-events: none; }
.service-preview__item.is-active { opacity: 1; }
/* Text never cross-fades: the old caption is gone before the new one comes in. */
.service-preview__item figcaption { opacity: 0; transition: opacity 90ms var(--ease-out); }
.service-preview__item.is-active figcaption { opacity: 1; transition: opacity 200ms var(--ease-out) 90ms; }
.service-preview__image { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--model-bg); }
.service-preview__image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 600ms var(--ease-out); }
.service-preview__item.is-active .service-preview__image img { transform: none; }
.service-preview__image.is-poster { background: #fff; }
.service-preview__image.is-poster img { object-fit: contain; }
.service-preview figcaption { padding-top: 18px; }
.service-preview strong { display: block; font-size: var(--fs-t1); font-weight: 700; letter-spacing: -.035em; line-height: 1.45; }
.service-preview__kicker { display: block; margin-top: 10px; font-size: calc(13px + var(--fs-boost) * 0.8125); font-weight: 700; color: var(--bronze-dark); }
.service-preview ul { list-style: none; margin: 6px 0 0; padding: 0; }
.service-preview li { position: relative; padding-left: 14px; font-size: calc(15px + var(--fs-boost) * 0.9375); line-height: var(--lh-body); color: var(--body); }
.service-preview li::before { content: ""; position: absolute; left: 0; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: var(--bronze); }
.service-rows li { position: relative; transition: background 220ms var(--ease-out); }
.service-rows li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--bronze); transform: scaleY(0); transition: transform 260ms var(--ease-out); }
.service-rows a { padding-inline: 14px; }
@media (min-width: 981px) {
  .service-rows a { padding-block: 20px; }
  .service-rows li.is-active { background: var(--tint); }
  .service-rows li.is-active::before { transform: scaleY(1); }
  .service-rows li.is-active strong { color: var(--bronze-dark); }
}
@media (max-width: 980px) { .service-preview { display: none; } }
/* Pinned on tall desktop screens: the section holds still under the header and
   each step of scrolling (160–220px) moves to the next treatment (7 steps). A
   line beside the rows fills 1:1 with the scroll, so every wheel notch shows. */
@media (min-width: 981px) and (min-height: 800px) {
  .services-scroll .services-track { --step: clamp(160px, 18vh, 220px); height: calc(100vh - var(--header) + var(--step) * 7); }
  .services-scroll .service-rows { position: relative; }
  .services-scroll .service-rows::before, .services-scroll .service-rows::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 1; pointer-events: none; }
  .services-scroll .service-rows::before { background: var(--line); }
  .services-scroll .service-rows::after { background: var(--bronze); transform-origin: top; transform: scaleY(var(--services-progress, 0)); }
  .services-scroll .service-rows li::before { display: none; }
  .services-scroll .services-pin { position: sticky; top: var(--header); height: calc(100vh - var(--header)); display: flex; flex-direction: column; justify-content: center; }
  .services-scroll .services-index__intro { position: static; }
  .services-scroll .service-rows a { padding-block: 12px; }
  .services-scroll .services-index .model-note { margin-top: 12px; }
  /* The pinned list must fit one screen: a description that wraps keeps a compact line. */
  .services-scroll .service-rows__text > span { line-height: var(--lh-small); }
}
/* Narrow desktops wrap most descriptions to two lines: slightly tighter rows. */
@media (min-width: 981px) and (max-width: 1140px) and (min-height: 800px) {
  .services-scroll .service-rows a { padding-block: 10px; }
  .services-scroll .service-preview { margin-top: 24px; }
}
/* Short desktop windows (800–860px, e.g. 1280×800): tighter rows and a 16:9 preview,
   so the pinned block keeps clear space under the header and above the bottom edge. */
@media (min-width: 981px) and (min-height: 800px) and (max-height: 860px) {
  .services-scroll .service-rows a { padding-block: 8px; }
  .services-scroll .service-preview__image { aspect-ratio: 16 / 9; }
}

/* 네 가지 기준: click, keyboard or mouse position (with hover intent) switches the reason. */
.standard-number::after { transition: transform 300ms var(--ease-out); }

/* 진료 순서 / 진료 과정: the line fills as the reader passes each number. */
.steps { position: relative; }
.steps__line { position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--line); pointer-events: none; }
.steps__fill { position: absolute; inset: 0; background: var(--bronze); transform: scaleY(0); transform-origin: top; }
.step-list__no, .process-list__no { position: relative; z-index: 1; background: var(--white); color: var(--bronze-dark); box-shadow: inset 0 0 0 2px var(--bronze); transition: background 300ms var(--ease-out), color 300ms var(--ease-out); }
/* Reached: mint with a deep-teal ring, the site's "chosen" state. Solid #387a80 stays
   for the booking, call and submit buttons; the filled line shows the progress. */
.is-reached > .step-list__no, .is-reached > .process-list__no { background: var(--tint); color: var(--bronze-dark); box-shadow: inset 0 0 0 2px var(--bronze-dark); }

/* Tabs, popups, menu, FAQ: state feedback. */
.environment-panel { transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
@starting-style { .environment-panel { opacity: 0; transform: translateY(8px); } }
.gallery-thumb { transition: opacity 200ms ease, border-color 200ms ease; }
/* Closing is quicker than opening (280ms out, 420ms in): the menu gets out of the way. */
.mobile-menu { transform: translateX(100%); transition: transform 280ms var(--ease-drawer), overlay 280ms allow-discrete, display 280ms allow-discrete; }
.mobile-menu[open] { transform: none; transition-duration: 420ms; }
@starting-style { .mobile-menu[open] { transform: translateX(100%); } }
.lightbox, .clinic-notice { opacity: 0; transform: scale(.96); transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), overlay 250ms allow-discrete, display 250ms allow-discrete; }
.lightbox[open], .clinic-notice[open] { opacity: 1; transform: none; }
@starting-style { .lightbox[open], .clinic-notice[open] { opacity: 0; transform: scale(.96); } }
.mobile-menu::backdrop, .lightbox::backdrop, .clinic-notice::backdrop { opacity: 0; transition: opacity 300ms var(--ease-out), overlay 300ms allow-discrete, display 300ms allow-discrete; }
.mobile-menu[open]::backdrop, .lightbox[open]::backdrop, .clinic-notice[open]::backdrop { opacity: 1; }
@starting-style { .mobile-menu[open]::backdrop, .lightbox[open]::backdrop, .clinic-notice[open]::backdrop { opacity: 0; } }
.mobile-menu::backdrop { transition-duration: 280ms; }
.mobile-menu[open]::backdrop { transition-duration: 420ms; }
.lightbox, .clinic-notice, .lightbox::backdrop, .clinic-notice::backdrop { transition-duration: 160ms; }
.lightbox[open], .clinic-notice[open], .lightbox[open]::backdrop, .clinic-notice[open]::backdrop { transition-duration: 250ms; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content { height: 0; opacity: 0; overflow: clip; transition: height 260ms var(--ease-out), opacity 200ms var(--ease-out), content-visibility 260ms allow-discrete; }
  .faq-item[open]::details-content { height: auto; opacity: 1; }
}

/* "지금 진료 중": a small live dot next to today's hours. */
@keyframes live-ring { from { transform: scale(1); opacity: .5; } to { transform: scale(2.6); opacity: 0; } }
.fact.is-open [data-today-label] { position: relative; padding-right: 16px; }
.fact.is-open [data-today-label]::before, .fact.is-open [data-today-label]::after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #2e9a6a; }
.fact.is-open [data-today-label]::before { animation: live-ring 2000ms var(--ease-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .site-header, .site-footer, .mobile-dock, .back-top { display: none !important; }
  body { padding: 0; background: white; }
  .section { padding-block: 25px; }
}
/* 넓은 화면: 진료 과목 왼쪽(미리보기)은 그대로 두고 목록이 남는 폭을 쓴다. */
@media (min-width: 1680px) {
  .services-index__grid { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); column-gap: clamp(80px, 7vw, 160px); }
}

/* 장비와 진료 공간(PC·노트북): 세로 탭 목록 옆에 사진+설명을 두면 화면 폭마다 왼쪽 아래가
   비었다(11-15 대표님). 탭을 위쪽 가로줄로 올리고, 그 아래에 사진(7)과 설명(5)을 같은 높이의
   한 장으로 붙인다. 고른 탭의 흰 바탕이 아래 장과 이어진다. 마우스를 올려 바꾸는 동작은 그대로. */
@media (min-width: 701px) {
  .environment { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 0; }
  .environment-heading { grid-column: 1; margin-bottom: clamp(32px, 3vw, 48px); }
  .environment-tabs { grid-column: 1; grid-row: auto; position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .environment-tabs button { min-height: 96px; padding: 20px clamp(18px, 2vw, 32px); border-bottom: 1px solid var(--line); }
  .environment-tabs button + button { box-shadow: inset 1px 0 0 var(--line); }
  .environment-tabs [aria-selected="true"] { border-bottom-color: var(--white); }
  .environment-panels { grid-column: 1; grid-row: auto; }
  .environment-panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--white); }
  .environment-photo { display: flex; flex-direction: column; }
  .environment-photo figcaption { border-bottom: 0; }
  /* 탭과 사진이 한 화면에 들어오게: 사진 높이는 화면 높이에서 머리글·탭·설명 줄을 뺀 만큼까지. */
  .environment-photo img { max-height: max(360px, calc(100vh - var(--header) - 230px)); }
  .environment-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(28px, 4vw, 80px); }
}

/* 원장 소개(넓은 화면): 사진과 글을 반씩 나누고, 사진은 조금 눕혀(6:5) 글 높이와 맞추며
   글자를 키워 오른쪽이 비지 않게 한다. */
@media (min-width: 1600px) {
  .doctor-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(64px, 5vw, 120px); }
  .doctor-photo > img { aspect-ratio: 6 / 5; }
  .doctor-copy { max-width: calc(760px + var(--fs-boost) * 47.5); }
  .doctor-facts { margin-top: 36px; }
  .doctor-facts > div { grid-template-columns: 110px minmax(0, 1fr); padding-block: 17px; }
}

/* 오시는 길(PC): 오른쪽 글을 두 칸(진료 시간 | 오시는 방법)으로 펼치고 사진과 가운데를 맞춘다. */
@media (min-width: 1141px) {
  .location-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 4vw, 88px); align-content: center; }
  .location-copy > h3, .location-copy > .button-row { grid-column: 1 / -1; }
  .location-copy > .text-link { grid-column: 1 / -1; justify-self: start; }
  .location-copy > .hours-panel { grid-column: 1; grid-row: 4; margin-top: 30px; }
  .location-copy > .transport { grid-column: 2; grid-row: 4; align-content: start; margin-top: 30px; padding-top: 15px; }
  .hours-panel > p:not(.hours-note) { grid-template-columns: minmax(96px, auto) auto; }
  .transport { gap: 18px; }
}

/* ── 해상도별 빈 곳 정리(11-15, 20가지 화면 크기 자동 측정 결과) ── */
/* 쪽 머리(진료 안내·예약 등): 넓은 화면에서는 제목 왼쪽, 설명 오른쪽으로 한 줄을 채운다. */
@media (min-width: 1280px) {
  .page-hero__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 140px); align-items: end; }
  .page-hero__content > p:not(.eyebrow) { margin-top: 0; padding-bottom: .45em; justify-self: end; }
}
/* 홈 자주 묻는 질문: 왼쪽 제목 묶음이 질문 목록을 따라 내려온다. */
@media (min-width: 981px) {
  .faq-layout > div:first-child { position: sticky; top: calc(var(--header) + 32px); }
}
/* 자주 묻는 질문 쪽: 왼쪽에 검색·분류(따라 내려옴), 오른쪽에 질문 목록과 전화 안내. */
@media (min-width: 1141px) {
  .faq-page-content { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(48px, 5vw, 110px); align-items: start; }
  .faq-page-content > * { grid-column: 2; max-width: none; }
  .faq-page-content > .faq-tools { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: calc(var(--header) + 32px); }
  .faq-tools .filter-bar { flex-wrap: wrap; margin-top: 22px; }
  .faq-page-content .faq-answer > p { max-width: calc(720px + var(--fs-boost) * 45); }
  .faq-page-content > .faq-contact { margin-top: 44px; }
}
/* 진료 상세의 관련 블로그 글: 작은 목록이 한 줄을 다 쓴다(2개면 두 칸). */
.journal-grid--2.journal-grid--list, .journal-grid--1.journal-grid--list { max-width: none; }

/* ── 해상도별 2차(11-15, 디자인 검수 4명이 12가지 화면을 본 결과) ── */
/* 갤러리(홈·병원 둘러보기): 큰 사진·설명·넘김 버튼·작은 사진 줄이 한 화면에 들어오게
   사진 높이를 화면 높이에 맞춘다(넓고 낮은 화면에서는 위아래를 조금 잘라 보여 준다). */
@media (min-width: 701px) {
  .gallery-slide > img { max-height: max(320px, calc(100svh - var(--header) - 230px)); }
}
/* 진료 안내 목록: 사진 | 설명 | 상담 권하는 경우 세 칸을 태블릿 가로부터 유지하고, 세 번째 칸은 오른쪽 끝에 붙인다. */
@media (min-width: 981px) {
  .service-item { grid-template-columns: clamp(160px, 17vw, 400px) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 3vw, 64px); align-items: center; }
  .service-item__targets { grid-column: 3; grid-row: 1; justify-self: stretch; }
}
/* 블로그 글 작은 목록(홈·진료 상세): 1680px 아래에서는 한 줄에 하나씩 넓게, 위로는 세 칸. */
@media (min-width: 701px) and (max-width: 1679px) {
  .journal-grid--list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); max-width: none; }
  .journal-grid--list .journal-card { grid-template-columns: 120px minmax(0, 1fr); padding-block: 22px; }
  .journal-grid--list .journal-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 44em; }
}
@media (min-width: 1680px) {
  .journal-grid--list .journal-card { grid-template-columns: clamp(140px, 8vw, 220px) minmax(0, 1fr); }
  .journal-grid--list .journal-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .journal-grid--1.journal-grid--list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* 진료 이야기 쪽 카드: 정사각 블로그 표지를 정사각으로(흰 띠 없이), 링크는 카드 아래에 맞추고,
   화면이 넓으면 칸 수를 늘린다(3 → 4 → 5). */
@media (min-width: 701px) {
  .journal-grid:not(.journal-grid--list) .journal-card { display: flex; flex-direction: column; }
  .journal-grid:not(.journal-grid--list) .journal-card__image img { aspect-ratio: 1; }
  .journal-grid:not(.journal-grid--list) .journal-card__body { display: flex; flex-direction: column; flex: 1; }
  .journal-grid:not(.journal-grid--list) .journal-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .journal-grid:not(.journal-grid--list) .journal-card .text-link { margin-top: auto; padding-top: 15px; }
}
@media (min-width: 1680px) { .journal-grid--3:not(.journal-grid--list) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 2300px) { .journal-grid--3:not(.journal-grid--list) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* 진료 과정(PC): 짧은 단계 글 옆에 큰 사진을 두면 줄마다 비었다 → 사진이 위인 카드 3칸(2줄).
   세로 진행선 대신 번호가 지나갈 때마다 채워진다. */
@media (min-width: 981px) {
  .steps:has(.process-list) > .steps__line { display: none; }
  .process-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 3.5vw, 72px) clamp(20px, 2.2vw, 44px); }
  .process-list li { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "img img" "no text"; column-gap: 14px; row-gap: 20px; align-items: start; padding: 0; border: 0; }
  .process-list li:last-child { border-bottom: 0; }
  .process-list__image { grid-area: img; }
  .process-list__no { grid-area: no; }
  .process-list__text { grid-area: text; padding-top: 4px; }
  .process-list__image img { aspect-ratio: 3 / 2; }
}
/* 진료 상세(넓은 화면): 상담 권하는 경우는 두 칸, 진료 순서는 사진이 위인 카드로 한 줄에. */
@media (min-width: 1280px) {
  .target-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .steps:has(.step-list) > .steps__line { display: none; }
  .step-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(20px, 2vw, 40px); }
  .step-list li { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "img img" "no text"; column-gap: 12px; row-gap: 16px; padding: 0; border: 0; }
  .step-list li:last-child { border-bottom: 0; }
  .step-list li:not(:has(.step-list__image)) { grid-template-areas: "no text"; padding-top: 18px; border-top: 1px solid var(--line); }
  .step-list__image { grid-area: img; }
  .step-list__no { grid-area: no; }
  .step-list__text { grid-area: text; }
}
/* 태블릿(701–980px) */
@media (min-width: 701px) and (max-width: 980px) {
  /* 원장 소개: 사진을 위로 넓게, 글은 아래로(두 칸이면 사진 옆이 비었다). */
  .doctor-grid { grid-template-columns: minmax(0, 1fr); }
  .doctor-photo > img { aspect-ratio: 16 / 10; object-position: 50% 30%; }
  .doctor-copy { max-width: none; }
  /* 자주 묻는 질문(홈): 제목 아래로 질문 목록. */
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* 오시는 길: 지하철·자가용을 두 칸 아래 한 줄로. */
  .location-copy .transport { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 45px; }
  /* 상담 예약 띠: 버튼을 오른쪽 끝에. */
  .visit-cta__actions { justify-content: flex-end; }
  /* 진료 상세 옆 상담 카드: 한 줄 전체로 늘이지 않는다. */
  .detail-aside { max-width: 480px; }
}
@media (min-width: 981px) and (max-width: 1140px) { .visit-cta__actions { justify-content: flex-end; } }
/* 오시는 길(노트북 이상): 정보가 두 칸으로 펼쳐지는 1141px 부터 사진과 가운데 맞춤. */
@media (min-width: 1141px) { .location-grid { align-items: center; } }
/* 진료할 때 지키는 네 가지: 설명 줄 수가 달라도 버튼이 한 줄에 서게. */
@media (min-width: 981px) {
  .standard-panel { justify-content: flex-start; }
  .standard-detail { flex-grow: 1; }
}
/* 진료 과목(홈) 미리보기 그림을 같은 칸 글과 같은 왼쪽 선에, 아주 넓은 화면에서는 왼쪽 칸도 키운다. */
.service-preview__image.is-poster img { object-position: left center; }
@media (min-width: 2200px) {
  .services-index__grid { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); }
  .services-index__intro { max-width: 640px; }
}

/* ── 해상도별 3차(11-15, 디자인 재검수 결과) ── */
/* 진료 과정·진료 순서 카드: 설명 줄 수가 달라도 번호·제목이 사진 바로 아래 같은 높이에. */
.process-list li, .step-list li { align-content: start; }
/* 갤러리(PC): 넘김 버튼·번호는 큰 사진 아래 설명 줄 오른쪽 끝에 올리고, 작은 사진 6장은 큰 사진과
   같은 폭을 똑같이 나눠 채운다(대표님 11-15: 작은 사진 줄이 꽉 안 차고 아래가 안 맞음).
   작은 사진은 가로로 긴 2:1 이라 줄이 낮고, 큰 사진은 그만큼 화면 높이에 맞춘다. */
@media (min-width: 981px) {
  .gallery { display: grid; grid-template-columns: minmax(0, 1fr); }
  .gallery > .gallery-stage { grid-column: 1; grid-row: 1; }
  .gallery > .gallery-footer { grid-column: 1; grid-row: 1; align-self: end; justify-self: end; z-index: 2; padding: 0 16px 9px 0; }
  .gallery > .gallery-thumbs { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; overflow: visible; padding-top: 14px; }
  .gallery-thumb { width: auto; }
  .gallery-thumb img { aspect-ratio: 2 / 1; object-fit: cover; }
  .gallery-slide figcaption { padding-right: 190px; }
  .gallery-slide > img { max-height: max(320px, calc(100svh - var(--header) - 270px)); }
}
/* 진료할 때 드리는 약속(태블릿): 사진을 위로 넓게. */
@media (min-width: 701px) and (max-width: 980px) {
  .promise-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .environment-panel { grid-template-columns: minmax(0, 1fr); }
  .environment-tabs button { min-height: 84px; padding: 16px 14px; gap: 12px; }
  .environment-tabs button > .icon:last-child { display: none; }
}
/* 휴대폰 첫 화면 아래 안내 칸: 낱말 중간에서 줄이 꺾이지 않게. */
.fact, .fact * { word-break: keep-all; }
/* 아주 넓고 높은 화면(2200px+, 높이 1200px+): 진료 과목 미리보기 칸을 더 키워 목록 줄과 비례를 맞춘다. */
@media (min-width: 2200px) and (min-height: 1200px) {
  .services-index__grid { grid-template-columns: minmax(0, 860px) minmax(0, 1fr); }
  .services-index__intro { max-width: 860px; }
}
/* 오시는 길(981–1140px): 두 칸으로 나누기엔 좁아 시간과 교통 안내가 붙었다 → 태블릿처럼 사진을 위에 넓게(16:9),
   아래에 주소·버튼(왼쪽) | 진료 시간(오른쪽), 그 아래 지하철·자가용 한 줄. */
@media (min-width: 981px) and (max-width: 1140px) {
  .location-grid { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .location-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 45px; align-items: start; }
  .location-copy > h3, .location-copy > .text-link, .location-copy > .button-row { grid-column: 1; }
  .location-copy > .text-link { justify-self: start; }
  .location-copy .hours-panel { grid-column: 2; grid-row: 1 / 5; margin-top: 0; }
  .location-copy .transport { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 45px; }
}
@media (min-width: 701px) and (max-width: 1140px) {
  .clinic-map[data-map-state="unconfigured"] .map-fallback > img { aspect-ratio: 16 / 9; }
}

/* 온라인 예약 없앰(11-15): 카카오톡 채널이 없으면 머리의 버튼이 전화 버튼이 되므로 옆의 전화번호 글자는 감추고,
   휴대폰 아래 막대는 버튼이 하나면 한 줄 전체를 쓴다. */
@media (min-width: 701px) { .header-actions:has(> .header-call) > .header-phone { display: none; } }
.mobile-dock:has(> a:only-child) { grid-template-columns: 1fr; }

/* 진료 과목(화면에 고정되는 PC): 왼쪽 칸과 오른쪽 목록이 고정된 화면 높이를 똑같이 나눠 써서 아래 끝이 맞는다.
   왼쪽 미리보기 사진은 칸 폭을 다 채우고 남은 높이를 차지하며, 목록 7줄은 높이를 고르게 나눠 그 줄 사진도 함께 커진다
   (대표님 11-15: 두 칸 아래가 안 맞고 사진이 꽉 안 참). */
@media (min-width: 981px) and (min-height: 800px) {
  /* 위아래 여백은 고정 틀(.services-pin)에 둔다: #care(제목) 바로가기가 제목에 닿게. */
  .services-scroll .services-pin { --pin-pad: clamp(28px, 5vh, 64px); --row: calc((100vh - var(--header) - var(--pin-pad) * 2) / 7); justify-content: flex-start; padding-block: var(--pin-pad); }
  .services-scroll .services-pin > .container { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .services-scroll .services-index__grid { flex: 1; min-height: 0; align-items: stretch; }
  .services-scroll .services-index__intro { max-width: none; display: flex; flex-direction: column; min-height: 0; }
  .services-scroll .service-preview { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .services-scroll .service-preview__item { display: flex; flex-direction: column; min-height: 0; }
  .services-scroll .service-preview__image { flex: 1; min-height: 120px; aspect-ratio: auto; }
  .services-scroll .service-rows { display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); }
  .services-scroll .service-rows li { display: flex; min-height: 0; }
  .services-scroll .service-rows a { flex: 1; padding-block: 0; grid-template-columns: auto minmax(0, 1fr) 22px; }
  .services-scroll .service-rows__thumb { height: min(calc(var(--row) - 18px), 140px); width: auto; aspect-ratio: 3 / 2; }
}