/*
 * 메디셀플러스의원 척추관협착증 랜딩
 * 기준: 메디셀 DESIGN.md (White + Royal Blue, 0 radius, flat) 계승,
 *       50~60대 모바일 가독성 기준으로 글자 크기·터치 영역 상향.
 * 단일 라이트 테마 고정 (의료기관 브랜드 톤 유지).
 */

:root {
  --bg: #ffffff;
  --bg-tint: #f4f5f8;
  --ink: #23262b;
  --ink-2: #4a4f59;
  --ink-3: #5d626c;
  --accent: #2f46d6;
  --accent-ink: #2438ad;
  --accent-soft: #eaeeff;
  --line: #e3e5ea;
  --line-strong: #cfd2da;
  --danger: #b3261e;
  --ok: #1d6b3a;

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;

  --fs-body: 1.125rem;      /* 18px */
  --fs-lead: 1.25rem;       /* 20px */
  --fs-small: 1.0625rem;    /* 17px - 보조 문구 최소 크기 (50~60대 기준) */
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);   /* 28 → 40px */
  --fs-h1: clamp(2.375rem, 1.6rem + 3.2vw, 3.625rem);  /* 38 → 58px */

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 3rem + 4vw, 7rem);
  --header-h: 60px;
  --sticky-h: 64px;
  --z-header: 20;
  --z-sticky: 30;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body.has-sticky { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom)); }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.wrap { width: 100%; max-width: 75rem; margin: 0 auto; padding: 0 var(--gutter); }
.u-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.br-d { display: none; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: #fff; padding: .75rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 1.5rem;
  font: inherit; font-size: 1.125rem; font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; border-radius: 0;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost { background: #fff; color: var(--accent); border-color: var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); }
.btn--ghost-inverse { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn--lg { min-height: 60px; font-size: 1.1875rem; padding: 0 1.75rem; }
.btn--sm { min-height: 44px; padding: 0 1rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- Header ---------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); gap: 1rem;
}
.brand {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em;
  text-decoration: none; color: var(--ink);
}

/* ---------- Typography ---------- */
.section-title {
  font-size: var(--fs-h2); font-weight: 800; line-height: 1.32; letter-spacing: -0.035em;
}
.lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--ink); }
.lead--strong { font-weight: 700; }
.body { font-size: var(--fs-body); color: var(--ink-2); }
.note { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.6; }

/* ---------- Sections ---------- */
.section { padding: var(--section-y) 0; }
.section--tint { background: var(--bg-tint); }

/* ---------- 01 Hero ----------
   헤드라인 두 줄을 같은 색·같은 굵기의 한 문장으로 묶어 첫 화면에서 가장 강한 요소로 만든다.
   신뢰 근거는 그 아래 한 덩어리로 두고, 미국 마취통증의학과 전문의만 색과 크기로 강조한다. */

/* ---------- 02 Symptoms ---------- */

/* ---------- 03 About ---------- */
.about { display: grid; gap: 2.5rem; }
.about__text { display: grid; gap: 1.25rem; align-content: start; }
.canal { display: grid; gap: 1.5rem; }
.canal__item { display: grid; gap: .75rem; }
.canal svg { width: 100%; max-width: 250px; margin: 0 auto; height: auto; }
.canal .bone { fill: #e7e9ef; stroke: #9aa0ad; stroke-width: 2; }
.canal .canal-space { fill: #ffffff; stroke: #9aa0ad; stroke-width: 2; }
.canal .nerve { fill: var(--accent); }
.canal .thick { fill: #b9bfcc; stroke: #8a909d; stroke-width: 1.5; }
.canal__label {
  display: grid; gap: .15rem; text-align: center;
  font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5;
}
.canal__label strong { font-size: 1.1875rem; color: var(--ink); }
.canal__label--key strong { color: var(--accent); }
.canal__legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem;
  margin-top: 1.5rem; font-size: var(--fs-small); color: var(--ink-2);
}
.canal__legend span { display: inline-flex; align-items: center; gap: .45rem; }
.sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #8a909d; }
.sw--nerve { background: var(--accent); border-color: var(--accent); }
.sw--thick { background: #b9bfcc; }
.sw--bone { background: #e7e9ef; }
.about__figure .note { margin-top: .5rem; text-align: center; }

/* ---------- 04 Compare ---------- */
.compare__table { width: 100%; margin-top: 2rem; border-collapse: collapse; }
.compare__table thead { display: none; }
.compare__table tbody { display: grid; gap: 1rem; }
/* 모바일: 항목별 카드, 카드 안에서 두 질환을 나란히 비교 */
.compare__table tr {
  display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-top: 3px solid var(--ink);
}
.compare__table th[scope='row'] {
  grid-column: 1 / -1; text-align: left; padding: 1rem 1.125rem .75rem;
  font-size: 1.1875rem; font-weight: 800; border-bottom: 1px solid var(--line);
}
.compare__table td {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .875rem 1rem 1.125rem 1.125rem; font-size: 1.125rem; line-height: 1.45; font-weight: 600;
}
.compare__table td::before {
  content: attr(data-label);
  font-size: var(--fs-small); font-weight: 700; color: var(--ink-3);
}
.compare__table td:last-child { background: #f7f8ff; }
.compare__table td:last-child::before { color: var(--accent); }
.compare .note { margin-top: 1rem; }

/* ---------- 05 Approach ---------- */
.approach__intro { margin-top: 1.5rem; color: var(--ink-2); }
.approach__list { margin-top: 2.5rem; display: grid; gap: 0; }
.approach__list li {
  display: grid; grid-template-columns: 3.5rem 1fr; column-gap: .75rem;
  padding: 1.25rem 0; border-top: 1px solid var(--line-strong);
}
.approach__list .num {
  grid-row: span 2;
  font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* 4단계를 하나의 과정으로: 번호 사이를 잇는 절제된 선 (모바일 세로) */
.approach__flow { position: relative; }
.approach__flow li { position: relative; border-top: 0; padding: 1rem 0 1.5rem; }
.approach__flow li:not(:last-child)::after {
  content: ''; position: absolute; left: 1.05rem; top: 3.1rem; bottom: .1rem;
  width: 2px; background: var(--line-strong);
}
.approach__list h3 { font-size: 1.3125rem; font-weight: 800; line-height: 1.35; }
.approach__list p { font-size: 1.125rem; color: var(--ink-2); margin-top: .25rem; }

/* ---------- 03 Doctor (HERO 차별점의 근거) ---------- */
.doctor { background: var(--ink); color: #fff; }
.doctor__headline {
  font-size: var(--fs-h2); font-weight: 800; line-height: 1.32; letter-spacing: -0.035em; color: #fff;
}
.doctor__grid { display: grid; gap: 2rem; margin-top: 2.5rem; }
.doctor__photo { background: #3a3e45; max-width: 26rem; }
.doctor__photo img { width: 100%; }
.doctor__who { font-size: 1.1875rem; font-weight: 600; color: #c9ccd4; }
.doctor__name { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); font-weight: 800; letter-spacing: -0.04em; color: #fff; margin-right: .35rem; }
.doctor .note { color: #c3c7cf; margin-top: .75rem; }

/* ---------- 중간 전환 밴드 (폼 없음) ---------- */

/* 전화번호 미확정 안내 */
.consult__pending { font-size: var(--fs-small); color: var(--ink-3); }

/* ---------- 07 Retreatment ---------- */

/* ---------- 08 Process ---------- */

/* ---------- 09 FAQ ---------- */
.faq__list { margin-top: 2rem; border-top: 2px solid var(--ink); }
.faq__list details { border-bottom: 1px solid var(--line-strong); background: transparent; }
.faq__list summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 1.25rem 2.75rem 1.25rem 0; min-height: 56px;
  font-size: 1.1875rem; font-weight: 700; line-height: 1.5;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: '';
  position: absolute; right: .5rem; top: 1.65rem;
  width: .7rem; height: .7rem;
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
}
.faq__list details[open] summary::after { transform: rotate(-135deg); top: 1.95rem; }
.faq__a { padding: 0 0 1.5rem; font-size: 1.125rem; color: var(--ink-2); line-height: 1.75; }
.faq__a p + p { margin-top: .5rem; }

/* ---------- 10 Consult ---------- */
.consult { border-top: 4px solid var(--accent); }
.consult__grid { display: grid; gap: 2.5rem; }
.consult__intro { display: grid; gap: 1.5rem; align-content: start; }
.consult__phone-label { font-size: var(--fs-small); font-weight: 700; color: var(--ink-3); }
.consult__phone-num {
  display: inline-block; margin-top: .15rem;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em;
  color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums;
}
.consult__hours { font-size: var(--fs-small); }
.consult__hours p + p { margin-top: .15rem; }

.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: .5rem; }
.field label { font-size: 1.125rem; font-weight: 700; }
.req { color: var(--danger); font-weight: 600; font-size: var(--fs-small); }
.opt { color: var(--ink-3); font-weight: 500; font-size: var(--fs-small); }
.field input[type='text'], .field input[type='tel'], .field select, .field textarea {
  width: 100%; min-height: 56px; padding: .75rem 1rem;
  font: inherit; font-size: 1.125rem; color: var(--ink);
  background: #fbfbfd; border: 1px solid #8a909d; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 15px) 50%;
  background-size: 7px 7px; background-repeat: no-repeat; padding-right: 2.75rem;
}
.field textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.field [aria-invalid='true'] { border-color: var(--danger); border-width: 2px; }
.field__help { font-size: var(--fs-small); color: var(--ink-3); }
.field__err { font-size: var(--fs-small); font-weight: 700; color: var(--danger); }
.field__err:empty { display: none; }

.check { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; font-weight: 600 !important; }
.check input { flex: 0 0 auto; width: 26px; height: 26px; margin: .15rem 0 0; accent-color: var(--accent); }
.consent__detail { margin-top: .25rem; font-size: var(--fs-small); color: var(--ink-2); }
.consent__detail summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
.consent__detail dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; padding: .75rem 1rem; background: var(--bg-tint); }
.consent__detail dt { font-weight: 700; color: var(--ink); }
.consent__detail p { margin-top: .6rem; line-height: 1.6; }

.form__actions { display: grid; gap: .625rem; margin-top: .25rem; }
.form__status { padding: 1rem 1.125rem; font-size: 1.0625rem; line-height: 1.6; border: 1px solid var(--accent); background: var(--accent-soft); }
.form__status[data-type='error'] { border-color: var(--danger); background: #fdecea; }
.form__status[data-type='success'] { border-color: var(--ok); background: #e8f3ec; }
.form__status a { font-weight: 800; color: var(--accent); }

/* ---------- Footer ---------- */
.footer { background: var(--bg-tint); border-top: 1px solid var(--line); padding: 3rem 0 3.5rem; font-size: var(--fs-small); color: var(--ink-2); }
.footer__grid { display: grid; gap: 1.5rem; }
.footer__name { font-size: 1.1875rem; font-weight: 800; color: var(--ink); margin-bottom: .35rem; }
.footer__info { display: grid; gap: .35rem; }
.footer__info div { display: flex; gap: .75rem; }
.footer__info dt { flex: 0 0 7.5rem; font-weight: 700; color: var(--ink); }
.footer__note { color: var(--ink-3); }

/* ---------- Sticky CTA (mobile) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: 1fr 1.35fr; gap: .5rem;
  padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line-strong);
  transform: translateY(110%); transition: transform .2s ease;
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { min-height: 52px; font-size: 1.125rem; }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* =========================================================
   Tablet 48rem+
   ========================================================= */
@media (min-width: 48rem) {
  .canal { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1.2fr; }
  .footer__note { grid-column: 1 / -1; }
  .br-m { display: none; }
}

/* =========================================================
   Desktop 60rem+
   ========================================================= */
@media (min-width: 60rem) {
  :root { --header-h: 72px; }
  .site-header { position: sticky; top: 0; z-index: var(--z-header); }
  .brand { font-size: 1.375rem; }
  .br-d { display: inline; }

  /* PC 헤드라인: 900px 높이에서 72px, 720px 노트북에서 약 65px (CTA가 첫 화면에 남도록 높이에 연동) */
  /* 1차(최대 440px) 대비 약 13% 확대(최대 500px). 1280x720에서도 CTA가 첫 화면에 들어오도록 뷰포트 높이에 맞춘다 */

  .about { grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: center; }

  .compare__table { margin-top: 2.5rem; background: #fff; }
  .compare__table thead { display: table-header-group; }
  .compare__table tbody { display: table-row-group; }
  .compare__table tr { display: table-row; border-top: 0; background: transparent; }
  .compare__table th, .compare__table td {
    display: table-cell; padding: 1.25rem 1.5rem; text-align: left; vertical-align: top;
    border-top: 1px solid var(--line); font-size: 1.125rem;
  }
  .compare__table thead th { border-top: 0; border-bottom: 2px solid var(--ink); font-size: 1.1875rem; font-weight: 800; }
  .compare__table thead th:first-child { width: 20%; }
  .compare__table thead th.is-key { color: var(--accent); }
  .compare__table th[scope='row'] { padding: 1.5rem; font-size: 1.1875rem; border-bottom: 0; }
  .compare__table td { padding: 1.5rem; font-size: 1.1875rem; }
  .compare__table td::before { content: none; }
  .compare__table td:last-child { background: #f7f8ff; font-weight: 600; }

  .approach { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; }
  .approach .section-title { grid-column: 1 / -1; }
  .approach__intro { grid-column: 1; }
  .approach__list { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .approach__list li { grid-template-columns: 1fr; align-content: start; }
  .approach__list .num { grid-row: auto; font-size: 2.75rem; margin-bottom: 1rem; }
  /* PC: 네 단계를 가로지르는 한 줄 + 각 단계 시작점 표시 */
  .approach__flow { border-top: 2px solid var(--line-strong); }
  .approach__flow li { padding: 1.75rem 0 0; }
  .approach__flow li::before {
    content: ''; position: absolute; left: 0; top: -2px; width: 3rem; height: 2px; background: var(--accent);
  }
  .approach__flow li:not(:last-child)::after { content: none; }

  .doctor__grid { grid-template-columns: minmax(0, 420px) 1fr; gap: 5rem; align-items: center; margin-top: 3.5rem; }

  .faq { display: grid; grid-template-columns: .7fr 1.3fr; column-gap: 4rem; }
  .faq__list { margin-top: .5rem; }

  .consult__grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .form__actions { grid-template-columns: 1.6fr 1fr; }

  .sticky-cta { display: none; }
  body.has-sticky { padding-bottom: 0; }
}

/* =========================================================
   최종 polishing (3차) — 구조 변경 없이 위계·여백·전환 영역만 조정
   ========================================================= */

/* 중반부 정보 섹션은 여백을 줄여 정보성 페이지처럼 늘어지지 않게 한다 */
.nowrap { white-space: nowrap; }
.section--compact { padding: clamp(3.25rem, 2.5rem + 3vw, 5rem) 0; }

/* HERO CTA: 1차 60px → 70px(+17%), 좌우 여백 28px → 34px(+20%) */

/* ---------- 의료진: 핵심 경력 3개 → 세부 경력 ---------- */
.doctor__key { margin-top: 1.5rem; border-top: 1px solid #494d55; }
.doctor__key li {
  padding: 1rem 0; border-bottom: 1px solid #494d55;
  font-size: 1.5rem; font-weight: 800; line-height: 1.35; letter-spacing: -0.035em; color: #fff;
}
.doctor__key .is-key { color: #b4c0ff; }
.doctor__key .is-key::after {
  content: ''; display: block; width: 3rem; height: 3px; margin-top: .5rem; background: #fbff3b;
}

/* ---------- 디스크 비교: 훑어보기용 압축 표 ---------- */
.compare { display: grid; }
.compare__head { display: contents; }
.compare .section-title { order: 1; }
.compare__table { order: 2; margin-top: 1.75rem; }
.compare__note { order: 3; }
.compare__conclusion { order: 4; margin-top: 1.75rem; }
.compare__cta { order: 5; margin-top: 1.25rem; justify-self: start; }

.compare__table thead { display: block; }
.compare__table thead tr { display: grid; grid-template-columns: 1fr 1fr; background: transparent; border-top: 0; }
.compare__table thead th:first-child { display: none; }
.compare__table thead th {
  text-align: left; padding: 0 .75rem .6rem 1rem; font-size: 1.125rem; font-weight: 800; color: var(--ink);
}
.compare__table thead th.is-key { color: var(--accent); }
.compare__table tbody { gap: 0; border-top: 2px solid var(--ink); }
.compare__table tbody tr { border-top: 0; border-bottom: 1px solid var(--line-strong); }
.compare__table th[scope='row'] {
  padding: .75rem 1rem .1rem; font-size: var(--fs-small); font-weight: 700; color: var(--ink-3); border-bottom: 0;
}
.compare__table td { padding: .25rem .75rem .85rem 1rem; font-size: 1.125rem; line-height: 1.45; }
.compare__table td::before { content: none; }
.compare__note { margin-top: .75rem; }

/* ---------- 최종 상담: 마지막 전환 영역 ---------- */
.consult { background: var(--accent-soft); border-top: 0; }
.form { background: #fff; padding: 1.5rem 1.25rem; border: 1px solid #cdd5fb; }
.form [data-submit] { min-height: 72px; font-size: 1.3125rem; }
.form__actions .btn--ghost { min-height: 56px; font-size: 1.125rem; }

@media (min-width: 60rem) {
  /* HERO 사진: 최대 540px, 하단을 섹션 경계에 붙여 증명사진처럼 잘린 느낌을 줄인다 (사진 자체는 무변형) */

  .doctor__key li { font-size: 2rem; padding: 1.25rem 0; }

  .compare { grid-template-columns: .8fr 1.2fr; column-gap: 4.5rem; align-items: start; }
  .compare__head { display: block; grid-column: 1; grid-row: 1 / span 2; }
  .compare__conclusion { margin-top: 1.5rem; }
  .compare__cta { display: inline-flex; margin-top: 1.5rem; }
  .compare__table, .compare__note { grid-column: 2; }
  .compare__table { margin-top: .5rem; background: transparent; }
  .compare__table thead { display: table-header-group; }
  .compare__table thead tr { display: table-row; }
  .compare__table thead th:first-child { display: table-cell; width: 24%; }
  .compare__table thead th { padding: 0 1.25rem .75rem; border-bottom: 2px solid var(--ink); font-size: 1.1875rem; }
  .compare__table tbody { border-top: 0; }
  .compare__table tbody tr { border-bottom: 0; }
  .compare__table th[scope='row'] { padding: 1.1rem 1.25rem; font-size: 1.125rem; color: var(--ink); }
  .compare__table td { padding: 1.1rem 1.25rem; font-size: 1.125rem; border-top: 1px solid var(--line-strong); }
  .compare__table th[scope='row'] { border-top: 1px solid var(--line-strong); }
  .compare__table td:nth-child(2) { background: #fff; }

  .compare__table th[scope='row'] { background: #fff; }
  .consult__intro { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
  .form { padding: 2.5rem; }
  .form__actions { grid-template-columns: 1fr; }
}

/* =========================================================
   v5 — 증상 탐색기 / 비교 모바일 카드 / 처음 방문 안내 / 질환 설명 가독성
   ========================================================= */

/* ---------- 증상 탐색기 (진단 기능 아님) ---------- */
.explorer { display: grid; gap: 1.75rem; }
.explorer__sub { margin-top: 1rem; color: var(--ink-2); }
.explorer__figure { margin: 0; }
.explorer__body { position: relative; width: min(215px, 60%); margin: 0 auto; }
.explorer__body img { width: 100%; height: auto; }

.hotspot {
  position: absolute; transform: translate(calc(-.6rem - 9px), -50%);
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem; margin: 0; border: 0; background: transparent; cursor: pointer; font: inherit;
}
.hotspot__dot {
  display: block; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; outline: 1px solid var(--accent);
  transform: scale(.6); opacity: .75;
  transition: transform .15s ease, opacity .15s ease;
}
.hotspot:hover .hotspot__dot { transform: scale(.8); opacity: 1; }
.hotspot.is-active .hotspot__dot { transform: scale(1); opacity: 1; }
/* 라벨은 선택된 부위 하나만 표시 */
.hotspot__label { display: none; }
.hotspot.is-active .hotspot__label {
  display: block; white-space: nowrap; padding: .2rem .65rem;
  font-size: var(--fs-small); font-weight: 700; line-height: 1.4;
  color: #fff; background: var(--accent); border: 1px solid var(--accent);
}
.hotspot--left { flex-direction: row-reverse; transform: translate(calc(-100% + .6rem + 9px), -50%); }

.explorer__choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.explorer__btn {
  min-height: 64px; padding: .5rem .4rem; word-break: keep-all;
  font: inherit; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--ink);
  background: #fff; border: 2px solid var(--line-strong); border-radius: 0; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.explorer__btn:hover { border-color: var(--accent); }
.explorer__btn[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: #fff; }

.explorer__panels { margin-top: 1.5rem; }
.explorer__panel-title { font-size: 1.3125rem; font-weight: 800; line-height: 1.4; color: var(--ink); }
.explorer__list { margin-top: .75rem; border-top: 2px solid var(--ink); }
.explorer__list li {
  position: relative; padding: .9rem 0 .9rem 2.1rem;
  font-size: 1.1875rem; font-weight: 600; line-height: 1.5; border-bottom: 1px solid var(--line-strong);
}
.explorer__list li::before {
  content: ''; position: absolute; left: .25rem; top: 1.3rem; width: .8rem; height: .45rem;
  border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(-45deg);
}

/* ---------- 질환 설명 가독성 ---------- */
.about .lead { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.4375rem); line-height: 1.7; max-width: 32ch; }
.about .body { font-size: 1.1875rem; }

/* ---------- 비교: 모바일은 질환별 카드, PC는 표 ---------- */
.compare__table { display: none; }
.compare__cards { order: 2; display: grid; gap: 1rem; margin-top: 1.75rem; }
.compare__card { background: #fff; border-top: 3px solid var(--line-strong); padding: 1rem 1.125rem 1.125rem; }
.compare__card.is-key { border-top-color: var(--accent); background: #f7f8ff; }
.compare__card-name { font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.compare__card.is-key .compare__card-name { color: var(--accent); }
.compare__card dl { margin-top: .5rem; }
.compare__card dl > div { display: grid; grid-template-columns: 7rem 1fr; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.compare__card dt { font-size: var(--fs-small); font-weight: 700; color: var(--ink-3); line-height: 1.5; }
.compare__card dd { font-size: 1.125rem; font-weight: 600; line-height: 1.5; color: var(--ink); }

/* ---------- 처음 방문 안내: 번호 없는 3단계 흐름 ---------- */

@media (min-width: 48rem) {
  .explorer__choices { grid-template-columns: repeat(3, auto); justify-content: start; gap: .625rem; }
  .explorer__btn { min-height: 58px; }
  .explorer__btn { padding: .5rem 1.25rem; }
  .explorer__body { width: 300px; }
  .compare__cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 60rem) {
  .explorer { grid-template-columns: 1.15fr .85fr; column-gap: 4rem; row-gap: 0; align-items: start; }
  .explorer__head { grid-column: 1; grid-row: 1; }
  .explorer__content { grid-column: 1; grid-row: 2; margin-top: 2rem; }
  .explorer__figure { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .explorer__body { width: 350px; }
  .hotspot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

  .compare__table { display: table; }
  .compare__cards { display: none; }
}

/* =========================================================
   최종 마감 (Design QA) — 구조 유지, 위계·가독성·여백만 조정
   ========================================================= */

/* 증상 탐색기: 마지막 메시지 한 단계 위, 진단 불가 안내는 작은 보조 문구 */
.explorer__after { margin-top: 2rem; }
.explorer__message {
  font-size: 1.3125rem; font-weight: 800; line-height: 1.5; letter-spacing: -0.02em; color: var(--ink);
}
.explorer__notice { margin-top: .6rem; font-size: var(--fs-small); color: var(--ink-3); }

/* 질환 설명: 일러스트·라벨 확대 */
.canal__label { font-size: 1.125rem; }
.canal__label strong { font-size: 1.25rem; }

/* 비교: 항목명 가독성 */
.compare__card dt { font-size: 1.125rem; }

/* 01~04: 항목명·설명 확대 */
.approach__list h3 { font-size: 1.4375rem; }
.approach__list p { font-size: 1.1875rem; line-height: 1.6; color: var(--ink-2); margin-top: .4rem; }

/* 기존 치료 경험: 헤드라인 1개 + 상황 목록 한 덩어리 (체크박스처럼 보이던 네모 4개 정리) */

/* 처음 방문 안내: 3단계 크게 */

/* FAQ: 질문 20px, 터치 영역 확대 */
.faq__list summary { font-size: 1.25rem; padding-top: 1.35rem; padding-bottom: 1.35rem; }
.faq__list summary::after { top: 1.8rem; }
.faq__list details[open] summary::after { top: 2.1rem; }
.faq__a { font-size: 1.1875rem; }

/* 최종 상담: 제목 → 설명 → Form */
.consult__desc { color: var(--ink-2); }
.consult__pending, .consult__hours { font-size: 1.125rem; }

@media (min-width: 60rem) {
  /* 증상 탐색기: 정보 55% / 인체 45%, 인체 이미지 350 → 450px (+29%) */
  .explorer { grid-template-columns: 1.2fr 1fr; column-gap: 3.5rem; }
  .explorer__sub { white-space: nowrap; }
  .explorer__body { width: 450px; }
  .explorer__message { font-size: 1.5rem; }

  .canal svg { max-width: 300px; }

  .consult__grid { grid-template-columns: .9fr 1.1fr; gap: 4.5rem; }
}

@media (min-width: 60rem) {
  /* 인체 이미지가 커져도 왼쪽 제목과 부위 버튼 사이가 벌어지지 않도록 */
  .explorer { grid-template-rows: min-content 1fr; }
  .explorer__content { align-self: start; }
  /* 처음 방문 안내: 제목 위, 3단계 전폭 */

}

/* =========================================================
   Header — 기준: design-reference.pptx 2번 슬라이드 상단
   [로고] ··········· [☎ 전화 CTA 1개]. 메뉴·언어 선택·추가 CTA 없음.
   로고 이미지는 원본 그대로(비율·색 유지, 필터 없음). 원본 2170x725 중 보이는 픽셀(알파>0)은
   x 88~2068, y 251~475 → 2px 여유를 둔 x 86~2070, y 249~477(1984x228, 약 8.70:1)만 표시하고
   그 바깥의 투명 여백만 가린다 (로고 자체는 자르지 않음).
   ========================================================= */
.brand--logo { display: block; flex: 0 1 auto; min-width: 0; line-height: 0; }
.brand__logo {
  --logo-h: min(26px, calc((100vw - 2 * var(--gutter) - 9.5rem) / 8.7));  /* 모바일: 전화 CTA 공간 확보 */
  position: relative; display: block; overflow: hidden;
  height: var(--logo-h); width: calc(var(--logo-h) * 1984 / 228);
}
.brand__logo img {
  position: absolute; max-width: none;
  height: calc(var(--logo-h) * 725 / 228); width: auto;
  left: calc(var(--logo-h) * -86 / 228); top: calc(var(--logo-h) * -249 / 228);
}

.header-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; flex: 0 0 auto;
  min-height: 44px; padding: 0 .95rem;
  font-size: 1.0625rem; font-weight: 800; line-height: 1; letter-spacing: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #fff; background: var(--accent); border: 0; border-radius: 0; text-decoration: none;
  transition: background-color .15s ease;
}
.header-phone:hover { background: var(--accent-ink); }
.header-phone__icon { flex: 0 0 auto; width: 16px; height: 16px; }

@media (min-width: 48rem) {
  .brand__logo { --logo-h: 34px; }
}
@media (min-width: 60rem) {
  .brand__logo { --logo-h: 42px; }   /* PC: 로고 폭 약 365px, 헤더 72px */
  .header-phone { min-height: 48px; padding: 0 1.5rem; gap: .55rem; font-size: 1.125rem; }
  .header-phone__icon { width: 18px; height: 18px; }
}

/* =========================================================
   HERO — 기준: CLIENTS/메디셀플러스/references/design-reference.pptx 2번 슬라이드
   (2026-09-29부터 메디셀 랜딩 기본 디자인 기준. PPT 편집용 검은 텍스트 박스·밑줄은 미적용)
   - 제목 두 줄을 같은 크기·같은 굵기로 (PC: "척추관협착증," / "통증을 오래 봐온 의료진에게")
   - 경력 한 줄은 제목의 약 40% 크기, 세 항목 동일 굵기
   - 사진은 전체를 고르게 어둡게 (부분 그라데이션 없음), 카피 묶음은 정중앙
   - PC 수치는 1920px 슬라이드 실측값을 vw로 환산 (제목 64px, 경력 26px, CTA 254x82px)
   ========================================================= */
.hero {
  --hero-navy: 12, 16, 26;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: 640px;
  background: rgb(var(--hero-navy));
  color: #fff; text-align: center;
}
.hero__bg { position: absolute; inset: 0 0 auto; height: 430px; z-index: -1; }
.hero__bg picture, .hero__img { display: block; width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 80% 0%; }
/* 모바일: 사진 위쪽은 PPT와 같은 톤으로 고르게 어둡게, 아래는 카피 영역 배경으로 이어짐 */
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--hero-navy), .5) 0%,
    rgba(var(--hero-navy), .58) 55%,
    rgb(var(--hero-navy)) 100%);
}

.hero__inner { position: relative; padding-top: 17rem; padding-bottom: 3.5rem; }

.hero__title {
  font-size: 2.125rem; font-weight: 700; line-height: 1.34; letter-spacing: -0.03em;
  color: #fff; word-break: keep-all;
}
.hero__title > span { display: block; }
.hero__title .nw { display: inline-block; white-space: nowrap; }

.hero__creds {
  margin: 1.75rem auto 0; max-width: 40rem;
  font-size: 1.125rem; font-weight: 600; line-height: 1.6; letter-spacing: -0.01em; color: #fff;
}
.hero__creds span { white-space: nowrap; }
.hero__sep { display: inline-block; margin: 0 .5rem; }

.hero__cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: .625rem;
  max-width: 24rem; margin: 2.25rem auto 0;
}
.hero__cta .btn { min-height: 60px; padding: 0 1rem; font-size: 1.1875rem; font-weight: 700; }
.hero__cta .btn--primary { background: var(--accent); border-color: var(--accent); }
.hero__cta .btn--primary:hover { background: #3b53e6; border-color: #3b53e6; }
.btn--hero-ghost { background: transparent; color: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .6); }
.btn--hero-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: #fff; }
.hero__cta .btn:focus-visible { outline-color: #fff; }

@media (max-width: 47.99rem) {
  /* 모바일: 경력 문구를 구분점 앞에서 2줄로 (줄 맨 앞에 '·'가 오지 않도록) */
  .hero__sep--2 { display: block; height: 0; overflow: hidden; }
}
@media (max-width: 24rem) {
  /* 360px대: 경력 첫 줄이 한 줄에 들어가도록 */
  .hero__creds { font-size: 1.0625rem; }
  .hero__sep { margin: 0 .35rem; }
}

@media (min-width: 48rem) {
  /* 태블릿 이상: PPT처럼 사진 전체를 배경으로 깔고 카피를 정중앙에 */
  .hero {
    align-items: center;
    min-height: clamp(600px, calc(100vh - var(--header-h)), 1000px);
  }
  .hero__bg { inset: 0; height: auto; }
  .hero__img { object-position: 50% 30%; }
  .hero__bg::after { background: rgba(var(--hero-navy), .64); }
  .hero__inner { padding-top: 4rem; padding-bottom: 4rem; }

  .hero__title { font-size: 2.75rem; line-height: 1.36; }
  .hero__creds { max-width: none; margin-top: 2.25rem; font-size: 1.25rem; }
  .hero__cta { grid-template-columns: auto auto; justify-content: center; gap: .875rem; max-width: none; margin-top: 2.5rem; }
  .hero__cta .btn { min-width: 11.5rem; min-height: 62px; padding: 0 2rem; }
}

@media (min-width: 60rem) {
  /* PC: 1920px 기준 제목 64px / 경력 26px / 제목→경력 68px / 경력→CTA 82px / CTA 254x82px, 간격 23px */
  .hero__title { font-size: clamp(3rem, 3.35vw, 4.25rem); line-height: 1.36; letter-spacing: -0.025em; }
  .hero__creds { margin-top: clamp(2.5rem, 3.5vw, 4.5rem); font-size: clamp(1.25rem, 1.35vw, 1.6875rem); }
  .hero__sep { margin: 0 .4em; }
  .hero__cta { margin-top: clamp(2.75rem, 4.25vw, 5.25rem); gap: clamp(.875rem, 1.2vw, 1.5rem); }
  .hero__cta .btn {
    min-width: clamp(12rem, 13.25vw, 16.5rem); min-height: clamp(3.75rem, 4.3vw, 5.25rem);
    padding: 0 1.5rem; font-size: clamp(1.1875rem, 1.35vw, 1.625rem);
  }
}

/* =========================================================
   의료진 — 기준: design-reference.pptx 4번 슬라이드
   밝은 배경 / 사진 왼쪽 크게 / 오른쪽에 제목·핵심 경력·약력, 약력 분류명은 블루
   (문구는 기존 그대로, 레이아웃·색만 변경)
   ========================================================= */
.doctor { background: #fff; color: var(--ink); }
.doctor__grid { display: grid; gap: 2rem; margin-top: 0; }
.doctor__headline { color: var(--ink); }
.doctor__photo { background: var(--bg-tint); max-width: 26rem; }
.doctor__who { color: var(--ink-2); }
.doctor__name { color: var(--ink); }
.doctor .note { color: var(--ink-3); }

.doctor__key { margin-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.doctor__key li {
  padding: .9rem 0; border-bottom: 1px solid var(--line);
  font-size: 1.3125rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: var(--ink);
}
.doctor__key .is-key { color: var(--accent); }
.doctor__key .is-key::after { content: none; }

.doctor__bio { margin-top: 0; padding-top: 1.75rem; border-top: 1px solid var(--line-strong); }
.doctor__bio-title { font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.doctor__bio-list { display: grid; gap: 1rem; margin-top: 1.25rem; }
.doctor__bio-group { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: .75rem; }
.doctor__bio-group h4 { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.65; color: var(--accent); }
.doctor__bio-group ul { display: grid; gap: .1rem; }
.doctor__bio-group li { position: relative; padding-left: .9rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.doctor__bio-group li::before {
  content: ''; position: absolute; left: 0; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}

@media (min-width: 60rem) {
  .doctor__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 5rem; row-gap: 0;
    grid-template-areas: 'photo head' 'photo body' 'photo bio';
    grid-template-rows: auto auto 1fr; align-items: start;
  }
  .doctor__headline { grid-area: head; }
  /* 대표원장 사진 sticky (PC 전용): 헤더(72px) 아래 32px에 고정.
     sticky 범위 = 부모 .doctor__grid(대표원장 영역)까지 → 약력이 끝나면 멈추고, 아래 .doctor-team(한진우·김진희)은 별도 블록이라 따라오지 않음 */
  .doctor__photo { grid-area: photo; max-width: none; position: sticky; top: calc(var(--header-h) + 2rem); }
  .doctor__body { grid-area: body; margin-top: 2rem; }
  .doctor__bio { grid-area: bio; margin-top: 2.5rem; }
  .doctor__key li { font-size: 1.4375rem; padding: 1rem 0; }
  .doctor__bio-group { grid-template-columns: 6.5rem 1fr; }
  .doctor__bio-group h4, .doctor__bio-group li { font-size: 1.125rem; }
}
.doctor { border-top: 1px solid var(--line); }

/* =========================================================
   HERO 2차 (PPT 기준 재조정) — Eyebrow / Main Headline 위계, 오버레이 시선 순서
   시선 순서: 흰 헤드라인 → 원장 얼굴 → MRI → 환자 실루엣
   ========================================================= */
.hero__line1 { font-size: 1.625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: rgba(255, 255, 255, .9); }
.hero__line2 { margin-top: .35rem; font-size: 2.25rem; font-weight: 700; line-height: 1.28; letter-spacing: -0.03em; color: #fff; }
.hero__title { font-size: inherit; line-height: normal; }
.hero__creds { font-weight: 500; }
.hero__sep { color: rgba(255, 255, 255, .6); }

@media (min-width: 48rem) {
  .hero__line1 { font-size: 2.125rem; }
  .hero__line2 { font-size: 3rem; }
  /* 기본 명도(PPT 시안 수준) + 카피 뒤만 한 단계 더 어둡게 + 왼쪽 환자 실루엣 쪽을 약간 더 눌러 원장 얼굴이 두 번째로 읽히게 */
  .hero__bg::after {
    background:
      radial-gradient(ellipse 44% 40% at 50% 54%, rgba(var(--hero-navy), .4) 0%, rgba(var(--hero-navy), 0) 100%),
      linear-gradient(90deg, rgba(var(--hero-navy), .32) 0%, rgba(var(--hero-navy), 0) 38%),
      rgba(var(--hero-navy), .5);
  }
}

@media (min-width: 60rem) {
  /* PPT 1920px 실측: 타이틀 약 64px(3.35vw). 메인 헤드라인은 이 스케일을 유지(1440px 약 50px) */
  .hero__line1 { font-size: clamp(2.25rem, 2.6vw, 3.25rem); }
  .hero__line2 { margin-top: .4rem; font-size: clamp(3.125rem, 3.5vw, 4.5rem); line-height: 1.24; }
  .hero__creds { font-size: clamp(1.25rem, 1.4vw, 1.75rem); }
}

/* =========================================================
   증상 탐색기 2차 — 타이틀·여백 확대, 인체 이미지 약 30% 확대, 좌 45 : 우 55
   모바일 순서: 타이틀 → 설명 → 부위 선택 → 인체 → 선택 부위 증상
   ========================================================= */
.explorer-section { background: #fff; padding: clamp(4.5rem, 3.5rem + 4vw, 8rem) 0; }
.explorer {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'head' 'choices' 'figure' 'content';
}
.explorer__head { grid-area: head; }
.explorer__choices { grid-area: choices; margin-top: 2rem; }
.explorer__figure { grid-area: figure; margin-top: 2rem; }
.explorer__content { grid-area: content; margin-top: 1.75rem; }

.explorer__sub { margin-top: 1.25rem; font-size: 1.1875rem; color: var(--ink-2); }

.explorer__btn { min-height: 60px; border-width: 1px; border-color: var(--line-strong); background: #fff; }
.explorer__btn:hover { border-color: var(--accent); color: var(--accent); }
.explorer__btn[aria-pressed='true'], .explorer__btn[aria-pressed='true']:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.explorer__body { width: min(340px, 88%); }
/* 터치 영역 약 48px, 비활성 부위는 작은 점만 (라벨은 선택된 부위 1개만) */
.hotspot { padding: .95rem; transform: translate(calc(-.95rem - 9px), -50%); }
.hotspot--left { transform: translate(calc(-100% + .95rem + 9px), -50%); }
.hotspot__dot { transform: scale(.5); opacity: .55; }
.hotspot:hover .hotspot__dot { transform: scale(.7); opacity: .9; }
.hotspot.is-active .hotspot__dot { transform: scale(1); opacity: 1; box-shadow: 0 0 0 6px rgba(47, 70, 214, .18); }

@media (min-width: 48rem) {
  .explorer__body { width: 400px; }
}

@media (min-width: 60rem) {
  .explorer {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); column-gap: 3rem;
    grid-template-areas: 'head figure' 'choices figure' 'content figure';
    grid-template-rows: auto auto 1fr; align-items: start;
  }
  .explorer__head, .explorer__choices, .explorer__content, .explorer__figure { grid-column: auto; grid-row: auto; }
  .explorer__head { grid-area: head; }
  .explorer__choices { grid-area: choices; margin-top: 2.5rem; }
  .explorer__content { grid-area: content; margin-top: 2rem; }
  .explorer__figure { grid-area: figure; margin-top: 0; align-self: center; }
  /* 인체: 기존 450px → 오른쪽 열 폭 전체(1440px 화면 약 580px, +29%) */
  .explorer__body { width: min(100%, 600px); }
  .explorer__sub { margin-top: 1.375rem; font-size: 1.25rem; white-space: nowrap; }
  .explorer__choices { grid-template-columns: repeat(3, auto); justify-content: start; gap: .625rem; }
  .explorer__btn { min-height: 60px; padding: .5rem 1.5rem; font-size: 1.1875rem; }
}

@media (min-width: 60rem) {
  /* 헤드라인 크기는 유지하고, 사진을 116% 폭·왼쪽 기준으로 두어 원장 얼굴을 헤드라인 오른쪽 밖으로 비켜 놓는다 */
  .hero__img { width: 116%; max-width: none; object-position: 0% 28%; }
  .hero__bg::after {
    background:
      radial-gradient(ellipse 40% 42% at 50% 54%, rgba(var(--hero-navy), .42) 0%, rgba(var(--hero-navy), 0) 100%),
      linear-gradient(90deg, rgba(var(--hero-navy), .34) 0%, rgba(var(--hero-navy), 0) 36%),
      rgba(var(--hero-navy), .55);
  }
}
@media (min-width: 60rem) and (max-width: 84.99rem) {
  /* 1280px대: 헤드라인 최소 크기(50px)가 화면 대비 커지므로 사진을 조금 더 오른쪽으로 */
  .hero__img { width: 124%; }
}

/* =========================================================
   HERO 3차 — "척추관협착증,"을 메인 헤드라인 그룹으로 (메인 헤드라인의 약 85%)
   메인 헤드라인 크기는 그대로, 두 줄이 하나의 제목으로 읽히도록 같은 굵기·색·좁은 행간
   ========================================================= */
.hero__line1 { font-size: 1.9rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; color: #fff; }
.hero__line2 { margin-top: .12em; }
@media (min-width: 48rem) {
  .hero__line1 { font-size: 2.55rem; }
}
@media (min-width: 60rem) {
  .hero__line1 { font-size: clamp(2.65rem, 2.975vw, 3.825rem); letter-spacing: -0.025em; }
  .hero__line2 { margin-top: .12em; }
}

/* 헤더 전화번호 010-3654-1064: 줄바꿈·잘림 방지
   모바일: 번호 버튼 약 160px 확보 → 로고는 남는 폭에 맞춰 비율 그대로 축소 (390px에서 높이 약 19.5px) */
.header-phone span { white-space: nowrap; }
@media (max-width: 47.99rem) {
  .site-header__inner { gap: .75rem; }
  .header-phone { padding: 0 .7rem; font-size: 1rem; gap: .35rem; }
  .header-phone__icon { width: 15px; height: 15px; }
  .brand__logo { --logo-h: min(26px, calc((100vw - 2 * var(--gutter) - 11.25rem) / 8.7)); }
}

/* =========================================================
   증상 탐색기 3차 — 기준: design-reference.pptx 3번 슬라이드
   타이틀 = 페이지 공통 Section Title(.section-title: 1440px 40px / 800)
   위계: Section Title > Closing Message > 증상 제목 > 설명·증상 > Disclaimer
   PC: 왼쪽 정보 영역(약 448px) | 넓은 여백 | 오른쪽 인체(최대 600px)
   ========================================================= */
.explorer-section .wrap { max-width: 80rem; }
.explorer__sub { margin-top: 1.5rem; font-size: 1.1875rem; line-height: 1.6; color: var(--ink-2); }
.explorer__choices { margin-top: 2.5rem; }
.explorer__panels { margin-top: 0; }
.explorer__panel-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.explorer__list li { font-size: 1.1875rem; font-weight: 500; color: var(--ink); }

/* 증상 목록 → 넓은 여백 → Closing Message (2026-09-30: 목록 아래 빈 공간의 단독 구분선 제거, 여백은 유지) */
.explorer__after { margin-top: 2.5rem; padding-top: 2.75rem; }
.explorer__message { font-size: 1.625rem; font-weight: 800; line-height: 1.42; letter-spacing: -0.03em; color: var(--ink); }
.explorer__notice { margin-top: .9rem; font-size: 1rem; color: var(--ink-3); }

.explorer__body { width: min(360px, 92%); }

@media (min-width: 60rem) {
  .explorer {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    column-gap: clamp(4rem, 6.5vw, 7rem);
  }
  .explorer__sub { margin-top: 1.75rem; font-size: 1.25rem; }
  .explorer__choices { margin-top: 3.5rem; }
  .explorer__content { margin-top: 2.75rem; }
  /* 2026-09-30: 인체 600 → 500px(약 -17%). 인체 하단이 왼쪽 마지막 문구 하단과 비슷한 높이가 되도록. 포인트는 % 좌표라 그대로 따라감 */
  .explorer__figure { align-self: start; justify-self: center; width: 100%; max-width: 500px; }
  .explorer__body { width: 100%; }
  .explorer__after { margin-top: 3rem; padding-top: 3.25rem; }
  .explorer__message { font-size: 1.875rem; line-height: 1.4; }  /* 30px: 두 줄 유지 (Section Title 40px 다음 위계) */
}

/* =========================================================
   함께 진료하는 의료진 — 대표원장(Main) 아래 Sub Doctor 2인
   카드·그림자·라운드·배지 없음. hairline + 타이포 위계만 사용
   ========================================================= */
.doctor-team {
  margin-top: 4rem; padding-top: 3rem;
  /* 구분선은 본문 폭(좌우 gutter 제외)에만 */
  background: linear-gradient(var(--line-strong), var(--line-strong)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.doctor-team__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.doctor-team__grid { display: grid; gap: 3.5rem; margin-top: 2rem; }

.subdoc__photo { margin: 0; width: min(100%, 17.5rem); aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-tint); }
.subdoc__photo picture, .subdoc__photo img { display: block; width: 100%; height: 100%; }
.subdoc__photo img { object-fit: cover; object-position: 50% 20%; }
.subdoc__who { margin-top: 1.5rem; font-size: 1.125rem; font-weight: 600; color: var(--ink-2); }
.subdoc__name { margin-right: .3rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.subdoc__cred { margin-top: .35rem; font-size: 1.25rem; font-weight: 700; color: var(--accent); }

.subdoc__group { margin-top: 1.25rem; }
.subdoc__group h4 { margin: 0 0 .4rem; font-size: 1.0625rem; font-weight: 700; color: var(--accent); }
.subdoc__group ul { display: grid; gap: .1rem; }
.subdoc__group li { position: relative; padding-left: .9rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.subdoc__group li::before { content: ''; position: absolute; left: 0; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.subdoc__pubs li { line-height: 1.55; word-break: normal; }
.subdoc__pubs li + li { margin-top: .35rem; }

.subdoc__more { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.subdoc__more summary {
  display: inline-flex; align-items: center; min-height: 48px; cursor: pointer;
  font-size: 1.0625rem; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}

@media (min-width: 60rem) {
  .doctor-team { margin-top: 5.5rem; padding-top: 3.5rem; }
  .doctor-team__grid { grid-template-columns: 1fr 1fr; column-gap: 5rem; margin-top: 2.5rem; }
  .subdoc__group li, .subdoc__group h4, .subdoc__more summary { font-size: 1.125rem; }
}

/* =========================================================
   척추관협착증이란? — 중앙 정렬 (제목 → 설명 → Medical Visual)
   ========================================================= */
.about { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 2.75rem; }
.about__text { justify-items: center; max-width: 46rem; }
.about .lead { max-width: 40ch; margin: 0 auto; }
.about__figure { width: 100%; max-width: 50rem; }
@media (min-width: 60rem) {
  .about { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
}

/* =========================================================
   HERO 4차 — 기준: design-reference.pptx 2번 슬라이드 (2026-09-29 16:30 수정본)
   PPT 실측(960pt 슬라이드 → 1920px): Experience 16pt(숫자부 Bold) / Headline 36pt ExtraBold 두 줄 동일·행간 약 1.14
   / Credential 14pt Regular / CTA 254x84px·간격 23px. 메인 헤드라인은 기존 크기(3.5vw) 유지, 두 줄을 같은 크기로.
   ========================================================= */
.hero__exp {
  margin: 0 auto 1.25rem; font-size: 1rem; font-weight: 400; line-height: 1.55; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .92);
}
.hero__exp strong { font-weight: 700; color: #fff; }
.hero__exp .nw { display: inline-block; white-space: nowrap; }

.hero__line1, .hero__line2 { font-size: 2.125rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: #fff; }
.hero__line2 { margin-top: 0; }
.hero__creds { font-weight: 400; }

@media (min-width: 48rem) {
  .hero__exp { margin-bottom: 1.75rem; font-size: 1.1875rem; }
  .hero__line1, .hero__line2 { font-size: 2.875rem; }
}

@media (min-width: 60rem) {
  .hero__exp { margin-bottom: clamp(2rem, 3.4vw, 4rem); font-size: clamp(1.1875rem, 1.6vw, 2rem); }
  .hero__line1, .hero__line2 { font-size: clamp(3.125rem, 3.5vw, 4.5rem); line-height: 1.16; letter-spacing: -0.025em; }
  .hero__creds { margin-top: clamp(2.25rem, 3.2vw, 4rem); font-size: clamp(1.25rem, 1.45vw, 1.8125rem); }
  .hero__cta { margin-top: clamp(3.25rem, 5.9vw, 7rem); gap: clamp(.875rem, 1.2vw, 1.5rem); }
  .hero__cta .btn {
    min-width: clamp(12rem, 13.25vw, 16.5rem); min-height: clamp(3.75rem, 4.4vw, 5.5rem);
    font-size: clamp(1.1875rem, 1.45vw, 1.8125rem); font-weight: 800;
  }
}

/* =========================================================
   HERO 최종 — 기준: design-reference.pptx 2번 슬라이드 (2026-09-30 수정본)
   메인 타이틀 두 줄(1줄 ExtraBold "28년간 12,600여 명" / 2줄 Medium, 약간 작게) → 서브 타이틀 → CTA
   PPT의 검은 텍스트 박스는 편집용이므로 미적용. 배경사진·오버레이·원장 위치·CTA는 4차 그대로.
   가독성은 박스 대신 은은한 text-shadow로 보강.
   ========================================================= */
.hero__title { text-shadow: 0 1px 24px rgba(var(--hero-navy), .45); }
.hero__line1 {
  font-size: clamp(1.875rem, 8.6vw, 2.5rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.03em; color: #fff;
}
.hero__line2 {
  margin-top: .3em;
  font-size: clamp(1.3125rem, 6.1vw, 1.875rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.03em;
  color: rgba(255, 255, 255, .9);
}
.hero__sub {
  margin: 1.5rem auto 0;
  font-size: clamp(1.0625rem, 4.4vw, 1.1875rem); font-weight: 600; line-height: 1.5; letter-spacing: -0.02em;
  color: rgba(255, 255, 255, .92); word-break: keep-all;
  text-shadow: 0 1px 16px rgba(var(--hero-navy), .45);
}
.hero__sub .nw { display: inline-block; white-space: nowrap; }
.hero__cta { margin-top: 2rem; }

@media (min-width: 48rem) {
  .hero__line1 { font-size: 3rem; }
  .hero__line2 { font-size: 2.5rem; }
  .hero__sub { margin-top: 1.75rem; font-size: 1.375rem; }
  .hero__cta { margin-top: 2.5rem; }
}

@media (min-width: 60rem) {
  /* 1440px: 1줄 약 54px / 2줄 약 45px / 서브 약 27px */
  .hero__line1 { font-size: clamp(3.25rem, 3.75vw, 4.75rem); line-height: 1.16; letter-spacing: -0.025em; }
  .hero__line2 { margin-top: .35em; font-size: clamp(2.75rem, 3.15vw, 4rem); letter-spacing: -0.025em; }
  .hero__sub { margin-top: clamp(1.75rem, 2.4vw, 3rem); font-size: clamp(1.375rem, 1.9vw, 2.25rem); }
  .hero__cta { margin-top: clamp(2.75rem, 4.2vw, 5.5rem); }
  /* PPT의 검은 박스 대신: 카피 뒤 어두운 타원을 약하게 (오버레이 톤은 유지) */
  .hero__bg::after {
    background:
      radial-gradient(ellipse 42% 44% at 50% 52%, rgba(var(--hero-navy), .3) 0%, rgba(var(--hero-navy), 0) 100%),
      linear-gradient(90deg, rgba(var(--hero-navy), .34) 0%, rgba(var(--hero-navy), 0) 36%),
      rgba(var(--hero-navy), .55);
  }
}

/* =========================================================
   HERO 톤·타이포 보정 (2026-09-30) — design-reference.pptx 2번 슬라이드
   - 배경: 네이비 필터 → 뉴트럴 차콜 (PPT는 검정 49% 오버레이). 사진 크롭·위치는 그대로
   - PC 오버레이: 카피가 놓이는 중앙~왼쪽만 조금 더 어둡게, 오른쪽 의료진 얼굴은 기본 톤 유지
   - 숫자(28 / 12,600)는 900, 단위(년간 / 여 명)는 700 → 크기 변화 없이 숫자가 가장 먼저 읽히도록
   - 2줄은 SemiBold(600), 1줄의 약 89% 크기 / 서브카피는 1줄의 약 53%
   ========================================================= */
.hero { --hero-navy: 13, 13, 14; }   /* 변수명은 기존 유지, 값만 뉴트럴 차콜로 */

.hero__line1 { font-weight: 700; line-height: 1.2; }
.hero__num { font-weight: 900; }
.hero__line2 { margin-top: .4em; font-weight: 600; color: rgba(255, 255, 255, .92); }
.hero__sub { margin-top: 1.75rem; font-weight: 600; color: rgba(255, 255, 255, .95); }
.hero__cta { margin-top: 2.25rem; }

@media (min-width: 48rem) {
  .hero__line2 { font-size: 2.625rem; }
  .hero__sub { margin-top: 2rem; font-size: 1.5rem; }
  .hero__cta { margin-top: 2.75rem; }
  .hero__bg::after {
    background:
      radial-gradient(ellipse 46% 46% at 47% 52%, rgba(var(--hero-navy), .28) 0%, rgba(var(--hero-navy), 0) 100%),
      linear-gradient(90deg, rgba(var(--hero-navy), .3) 0%, rgba(var(--hero-navy), .12) 42%, rgba(var(--hero-navy), 0) 70%),
      rgba(var(--hero-navy), .56);
  }
}

@media (min-width: 60rem) {
  /* 1440px: 1줄 54px(유지) / 2줄 48px / 서브 약 29px */
  .hero__line2 { margin-top: .42em; font-size: clamp(2.875rem, 3.35vw, 4.25rem); }
  .hero__sub { margin-top: clamp(2rem, 2.8vw, 3.5rem); font-size: clamp(1.375rem, 2vw, 2.375rem); }
  .hero__cta { margin-top: clamp(3rem, 4.4vw, 5.75rem); }
  .hero__bg::after {
    background:
      radial-gradient(ellipse 44% 46% at 47% 52%, rgba(var(--hero-navy), .3) 0%, rgba(var(--hero-navy), 0) 100%),
      linear-gradient(90deg, rgba(var(--hero-navy), .34) 0%, rgba(var(--hero-navy), .14) 40%, rgba(var(--hero-navy), 0) 68%),
      rgba(var(--hero-navy), .57);
  }
}

/* =========================================================
   HERO 최종 미세조정 (2026-09-30) — design-reference.pptx 2번 슬라이드
   - 1행 800(숫자 900) / 2행 600, 두 줄 같은 크기(태블릿·PC). 모바일은 기존 크기 유지
   - 두 줄 간격: 하나의 헤드라인으로 읽히도록 축소
   - 서브카피 약 +12% (PPT: 제목 대비 60%)
   - 배경: 사진 채도를 약간 낮춰 청회색 기운 제거 + 뉴트럴 차콜 오버레이 (파란 색조 없음)
   ========================================================= */
.hero__line1 { font-weight: 800; }
.hero__num { font-weight: 900; }
.hero__line2 { font-weight: 600; color: rgba(255, 255, 255, .94); }
.hero { --hero-navy: 15, 14, 13; }   /* 뉴트럴 다크 차콜 (파란 기운 없음) */
.hero__img { filter: saturate(.7); }

@media (min-width: 48rem) {
  .hero__line2 { margin-top: .12em; font-size: 3rem; line-height: 1.2; }
}

@media (min-width: 60rem) {
  .hero__line1 { line-height: 1.2; }
  .hero__line2 { margin-top: .16em; font-size: clamp(3.25rem, 3.75vw, 4.75rem); line-height: 1.2; }
  .hero__sub { font-size: clamp(1.5rem, 2.25vw, 2.625rem); }
  .hero__bg::after {
    background:
      radial-gradient(ellipse 46% 48% at 47% 52%, rgba(var(--hero-navy), .34) 0%, rgba(var(--hero-navy), 0) 100%),
      linear-gradient(90deg, rgba(var(--hero-navy), .34) 0%, rgba(var(--hero-navy), .14) 40%, rgba(var(--hero-navy), 0) 70%),
      rgba(var(--hero-navy), .58);
  }
}

/* =========================================================
   HERO PC 스케일 한 단계 축소 (2026-09-30)
   타이틀 약 -9% / 서브카피 약 -7% / CTA 폭·높이·패딩·글자 약 -9%
   굵기·색·오버레이·요소 사이 여백(vw)·두 줄 간격 비율(.16em)은 그대로
   ========================================================= */
@media (min-width: 60rem) {
  .hero__line1,
  .hero__line2 { font-size: clamp(2.9375rem, 3.4vw, 4.3125rem); }
  .hero__sub { font-size: clamp(1.375rem, 2.1vw, 2.4375rem); }
  .hero__cta .btn {
    min-width: clamp(10.75rem, 12.05vw, 15rem); min-height: clamp(3.4375rem, 4vw, 5rem);
    padding: 0 1.375rem; font-size: clamp(1.0625rem, 1.32vw, 1.65rem);
  }
}

/* 증상 탐색기 (2026-09-30): 설명문 → 부위 선택 탭 사이 여백 56px → 88px (+32px)
   design-reference.pptx 3번 슬라이드처럼 제목·설명 영역과 탭 영역을 분리. 탭·목록·인체 스타일은 그대로 */
@media (min-width: 60rem) {
  .explorer__choices { margin-top: 5.5rem; }
}

/* 증상 탐색기 자가 체크형 개편 (2026-09-30)
   - 설명문 → 탭 여백 88px → 104px: PPT 3번 슬라이드 비율(설명문→탭 ≈ 제목→설명문의 약 2.7배)에 맞춤
   - 하단 안내문 3줄: 본문보다 작고 옅게, 의료정보 안내문 위계 */
.explorer__notice { margin-top: 1.25rem; font-size: .9375rem; line-height: 1.65; color: var(--ink-3); }
@media (max-width: 47.99rem) {
  .explorer__notice br { display: none; }   /* 모바일: 좁은 폭에서는 자연스럽게 이어서 줄바꿈 */
}
@media (min-width: 60rem) {
  .explorer__choices { margin-top: 6.5rem; }
}

/* =========================================================
   선 정리 (2026-09-30) — 표·이력서처럼 잘게 나뉘어 보이지 않도록
   ========================================================= */
/* 증상 목록: 제목 아래 진한 선·항목마다 아래 선 제거 → 항목 사이에만 아주 연한 선 (마지막 항목 아래 선 없음) */
.explorer__list { border-top: 0; }
.explorer__list li { border-bottom: 0; }
.explorer__list li + li { border-top: 1px solid var(--line); }

/* 대표원장: 핵심 경력 3개는 선 없이 여백으로 한 그룹, 상세 약력은 아주 연한 배경톤으로 구분 */
.doctor__key { margin-top: 1.25rem; border-top: 0; }
.doctor__key li { padding: .35rem 0; border-bottom: 0; }
.doctor .note { margin-top: 1rem; }
.doctor__bio {
  margin-top: 2.5rem; padding: 1.75rem 1.25rem 2rem; border-top: 0;
  background: #f7f8fa;
}
@media (min-width: 60rem) {
  .doctor__key { margin-top: 1.5rem; }
  .doctor__key li { padding: .45rem 0; }
  .doctor .note { margin-top: 1.25rem; }
  .doctor__bio { margin-top: 3.5rem; padding: 2.5rem 2rem 2.75rem; }
}
@media (max-width: 59.99rem) {
  /* 모바일·태블릿: 배경만 화면 끝까지 넓히고 글 폭은 기존과 동일하게 (카드처럼 보이지 않도록) */
  .doctor__bio { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
}

/* 증상 탐색기 최종 균형 (2026-09-30, PC만)
   - 증상 목록 → 하단 메시지 100px → 64px (메시지·안내문 사이 간격은 그대로)
   - 인체 500 → 550px (+10%), 포인트는 % 좌표라 이미지와 함께 이동
   - 섹션 아래 여백 113.6px → 약 80px (다음 의료진 섹션과 간격 정리) */
@media (min-width: 60rem) {
  .explorer__after { margin-top: 1.25rem; padding-top: 2.75rem; }
  .explorer__figure { max-width: 550px; }
  .explorer-section { padding-bottom: clamp(3.5rem, 2.25rem + 3vw, 6rem); }
}

/* =========================================================
   대표원장 영역 배경 위계 (2026-09-30) — 선 대신 배경·여백으로 구분
   VERY LIGHT BLUE-GRAY 대표원장 영역 (+ WHITE 상세 약력) → 배경 전환 → WHITE 함께 진료하는 의료진
   HTML 구조는 그대로: .doctor 전체를 blue-gray로, .doctor-team만 화면 폭 전체 흰색으로 확장
   ========================================================= */
.doctor { background: #f5f7fa; border-top: 0; padding-bottom: 0; }
.doctor__bio { background: #fff; margin-inline: 0; padding: 1.75rem 1.25rem 2rem; border-radius: 0; }

.doctor-team {
  margin-top: 3.5rem; padding-top: 3rem; padding-bottom: var(--section-y);
  background: #fff;                                   /* 기존 hairline(그라데이션 선) 제거 */
  box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax);   /* 흰 배경을 화면 좌우 끝까지 */
}

@media (min-width: 60rem) {
  .doctor__bio { padding: 2.5rem 2rem 2.75rem; }
  .doctor-team { margin-top: 5rem; padding-top: 4.5rem; }
}
@media (max-width: 59.99rem) {
  /* 모바일·태블릿: 흰 약력 영역을 좌우로 살짝 넓혀 글 폭 확보 (양옆에 blue-gray가 얇게 남아 영역 안에 놓인 느낌 유지) */
  .doctor__bio { margin-inline: calc(-.5 * var(--gutter)); padding-inline: .875rem; }
}

/* =========================================================
   의료진 영역 WHITE 통일 (2026-09-30) — 대표원장~함께 진료하는 의료진 전체 흰 배경
   배경색·박스 대신 타이포 위계·행간·여백으로 정리. 상세 약력은 전체 노출(접기·축약 금지)
   ========================================================= */
.doctor { background: #fff; }
.doctor__bio { margin-inline: 0; padding: 0; background: transparent; }
.doctor__bio-title { font-size: 1.3125rem; letter-spacing: -0.02em; }
.doctor__bio-list { gap: 1.25rem; margin-top: 1.5rem; }
.doctor__bio-group ul { gap: .2rem; }
.doctor-team { margin-top: 4.5rem; padding-top: 0; }

@media (max-width: 59.99rem) {
  .doctor__bio { margin-inline: 0; padding-inline: 0; }
}
@media (min-width: 60rem) {
  .doctor__bio { padding: 0; }
  .doctor__bio-title { font-size: 1.4375rem; }
  .doctor__bio-list { gap: 1.5rem; margin-top: 1.75rem; }
  .doctor-team { margin-top: 7.5rem; padding-top: 0; }
}

/* =========================================================
   2026-09-30 PPT 기준 구조 개편 (design-reference.pptx 3~7번 슬라이드)
   섹션 순서: HERO → 증상 확인 → 왜 걸으면(신규 인터랙션) → 대표원장 → 함께하는 의료진
             → 치료 방향 → 기존 치료 경험 → 처음 방문 → FAQ → 상담
   ========================================================= */

/* 공통 eyebrow: 섹션 구분용 작은 라벨 (한글 / 영문) */
.eyebrow { margin: 0 0 .875rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--accent); }
.eyebrow--en { font-size: .9375rem; letter-spacing: .16em; }

/* 증상 확인: 안내문 한 문장 */
.explorer__notice { margin-top: 1rem; }

/* ---------- 신경인성 파행: 왜 걸으면 불편하고 쉬면 나아질까요? ----------
   BLUE 섹션(브랜드 Royal Blue = --accent #2f46d6) — 앞뒤 WHITE 섹션 사이의 전환점.
   기본: 플랫한 사람 이미지 2장 / hover(PC)·터치(모바일): 같은 자리에서 척추관 이미지로 cross-fade + 부드러운 그림자 + 미세 확대 */
.why { background: #2f42b9; color: #fff; text-align: center; }   /* 브랜드 Royal Blue(#2f46d6) 명도·채도 약 11% 톤다운 (넓은 면적용) */
.why__eyebrow { color: rgba(255, 255, 255, .88); }
.why__title { color: #fff; word-break: keep-all; }
.why__desc {
  max-width: 50rem; margin: 1.25rem auto 0;
  font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, .8); word-break: keep-all;
}

.und { display: grid; gap: 2.25rem; max-width: 26rem; margin: 2.5rem auto 0; }
.und__item {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent;
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 4장 모두 같은 4:3 영역 → 전환 전후 크기·위치 고정. 확대·그림자는 transform/box-shadow라 레이아웃에 영향 없음 */
.und__frame {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 15px; background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0);
  transform: scale(1);
  transition: transform .35s ease, box-shadow .35s ease;
}
.und__img { position: absolute; inset: 0; display: block; }
.und__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.und__img--base img { object-position: 50% 100%; }   /* 사람: 발끝 기준 */
.und__img--alt img { object-position: 50% 0; }       /* 척추관: 그림이 있는 위쪽 기준 */
.und__img--base { opacity: 1; transition: opacity .3s ease; }
.und__img--alt { opacity: 0; transition: opacity .35s ease .05s; }   /* 사람이 살짝 먼저 흐려지고 척추관이 이어서 나타남 */

/* 라벨: 같은 칸에서 cross-fade → 문구가 바뀌어도 위치 고정 */
.und__cap { display: grid; margin-top: 1.125rem; font-size: 1.3125rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.35; color: #fff; }
.und__cap-base, .und__cap-alt { grid-area: 1 / 1; transition: opacity .35s ease; }
.und__cap-alt { opacity: 0; }
.und__item:first-child .und__cap-alt { color: #ffb84d; }   /* 걸을 때 hover·터치 라벨 "신경 압박 ↑"만 골드 오렌지 포인트 */
.und__arrow { font-weight: 700; }

/* 활성 상태: PC hover / 키보드 포커스 / 터치(aria-pressed) */
.und__item[aria-pressed='true'] .und__frame,
.und__item:focus-visible .und__frame { transform: scale(1.015); box-shadow: 0 16px 40px rgba(0, 0, 0, .16); }
.und__item[aria-pressed='true'] .und__img--alt,
.und__item:focus-visible .und__img--alt,
.und__item[aria-pressed='true'] .und__cap-alt,
.und__item:focus-visible .und__cap-alt { opacity: 1; }
.und__item[aria-pressed='true'] .und__img--base,
.und__item:focus-visible .und__img--base,
.und__item[aria-pressed='true'] .und__cap-base,
.und__item:focus-visible .und__cap-base { opacity: 0; }
.und__item:focus-visible { outline: 3px solid #fff; outline-offset: 8px; border-radius: 18px; }
@media (hover: hover) and (pointer: fine) {
  /* .is-touch(터치 입력 중)에서는 hover 미적용 → 탭 토글만 반영 (2026-10-01). 마우스 동작은 기존과 동일 */
  .und:not(.is-touch) .und__item:hover .und__frame { transform: scale(1.015); box-shadow: 0 16px 40px rgba(0, 0, 0, .16); }
  .und:not(.is-touch) .und__item:hover .und__img--alt, .und:not(.is-touch) .und__item:hover .und__cap-alt { opacity: 1; }
  .und:not(.is-touch) .und__item:hover .und__img--base, .und:not(.is-touch) .und__item:hover .und__cap-base { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .und__frame, .und__img--base, .und__img--alt, .und__cap-base, .und__cap-alt { transition-duration: .01s; transition-delay: 0s; }
}

@media (min-width: 60rem) {
  .why__title { white-space: nowrap; }                /* PC: 한 줄 */
  .why__desc { margin-top: 1.5rem; font-size: 1.1875rem; }
  .und { grid-template-columns: 1fr 1fr; column-gap: 4rem; max-width: 55.25rem; margin-top: 3rem; }
  .und__frame { border-radius: 18px; }
  .und__cap { margin-top: 1.125rem; font-size: 1.5rem; }
}

/* ---------- 대표원장 · 함께하는 의료진 ---------- */
.doctor__bio { margin-top: 2.75rem; }
@media (min-width: 60rem) { .doctor__bio { margin-top: 3.25rem; } }
.doctor-team .eyebrow { margin-bottom: .6rem; }

/* ---------- 치료 방향: 5개 요소를 '함께 본다'는 흐름으로 ---------- */
.direction { background: #fff; }
.direction__wrap { text-align: center; }
.direction__label { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 600; color: var(--ink-3); }
.direction__factors { display: grid; gap: 1.5rem; margin: 2.5rem auto 0; max-width: 26rem; text-align: left; }
.direction__factors li { display: grid; grid-template-columns: 2.75rem 1fr; column-gap: .75rem; }
.direction__num { grid-row: span 2; font-size: 1.0625rem; font-weight: 800; color: var(--accent); line-height: 1.9; }
.direction__name { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.direction__desc { margin-top: .15rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); word-break: keep-all; text-wrap: balance; }

@media (min-width: 60rem) {
  .direction__label { font-size: 1.25rem; }
  /* PC: 5개 요소를 한 줄로, 사이에 옅은 +로 "함께 확인한다"는 의미를 표현 (카드·박스 없음) */
  .direction__factors { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; max-width: none; margin-top: 3.5rem; text-align: center; }
  .direction__factors li { position: relative; display: block; padding: 0 1.25rem; }
  .direction__factors li + li::before {
    content: "+"; position: absolute; left: 0; top: 2.1rem; transform: translateX(-50%);
    font-size: 1.75rem; font-weight: 300; color: #b7c1f0;
  }
  .direction__num { display: block; line-height: 1.4; }
  .direction__name { display: block; margin-top: .6rem; font-size: 1.625rem; }
  .direction__desc { display: block; margin-top: .6rem; font-size: 1.125rem; }
}

/* ---------- 기존 치료 경험: 어두운 차콜 배경으로 리듬 전환 ---------- */

/* 증상 섹션 (2026-09-30): 하단 큰 문구 삭제 → 안내문만 증상 목록 바로 아래에 */
.explorer__after { margin-top: 1.5rem; padding-top: 0; }
.explorer__notice { margin-top: 0; }
@media (min-width: 60rem) {
  .explorer__after { margin-top: 1.75rem; padding-top: 0; }
}

/* =========================================================
   대표원장 섹션 (2026-09-30): 상단 중앙 타이틀 그룹(의료진 / 헤드라인 / 서브카피) → 사진 | 전체 약력 2열
   중복 강조 경력 3개·별도 이름 줄 삭제 (이름·직책은 약력 제목에 유지). 전체 약력은 그대로 노출
   ========================================================= */
.doctor__intro { text-align: center; }
.doctor__intro .doctor__headline { word-break: keep-all; }
.doctor__sub {
  margin-top: 1rem; font-size: 1.125rem; font-weight: 500; line-height: 1.6; letter-spacing: -0.02em;
  color: var(--ink-2); word-break: keep-all;
}
.doctor__grid { margin-top: 2.5rem; }
.doctor__bio { margin-top: .5rem; }

@media (min-width: 60rem) {
  .doctor__sub { margin-top: 1.25rem; font-size: 1.25rem; }
  .doctor__grid {
    margin-top: 4rem;
    grid-template-areas: 'photo bio'; grid-template-rows: auto;
  }
  .doctor__bio { margin-top: 0; }
}

/* =========================================================
   2026-09-30 의료진 → 치료 방향 정리
   - 한진우·김진희: 중앙 감성 타이틀(대표원장 헤드라인보다 한 단계 작게), 글자 소폭 확대, 약력 bullet·간격을 대표원장 약력과 통일
   - 상세 약력 보기: 위 가로선 삭제, 작은 BLUE 텍스트 링크 + →
   - 의료진 끝 → 치료 방향 시작 공백 절반 (양쪽 padding을 각각 section-y의 50%로)
   ========================================================= */
.doctor-team__title {
  text-align: center; font-size: 1.625rem; font-weight: 800; line-height: 1.4; letter-spacing: -0.03em;
  color: var(--ink); word-break: keep-all;
}
.doctor-team__grid { margin-top: 2.25rem; }
.subdoc__group h4 { margin-bottom: .5rem; }
.subdoc__group ul { gap: .2rem; }                     /* 대표원장 약력과 같은 항목 간격 */
.subdoc__more { margin-top: 1rem; border-top: 0; }
.subdoc__more summary { text-decoration: none; list-style: none; }
.subdoc__more summary::-webkit-details-marker { display: none; }
.subdoc__more summary::after { content: "→"; margin-left: .4rem; transition: transform .2s ease; }
.subdoc__more[open] summary::after { transform: rotate(90deg); }
.doctor-team { padding-bottom: calc(var(--section-y) * .5); }
.direction { padding-top: calc(var(--section-y) * .5); }

@media (min-width: 60rem) {
  .doctor-team__title { font-size: 2rem; }
  .doctor-team__grid { margin-top: 3.25rem; }
  .subdoc__name { font-size: 1.875rem; }
  .subdoc__cred { font-size: 1.3125rem; }
}

/* =========================================================
   치료의 기준 (2026-09-30): "+" 연결 → 작은 BLUE dot + 아주 얇은 연결선
   PC: 가로 타임라인(5개 동일 폭 column, dot·번호·제목·설명 중심축 정렬) / 모바일: 세로 타임라인
   ========================================================= */
.direction__factors { position: relative; padding-left: 1.75rem; }
.direction__factors li { position: relative; }
.direction__factors li::before,
.direction__factors li + li::before {
  content: ""; position: absolute; left: -1.75rem; top: .95rem; transform: translate(0, -50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); font-size: 0;
}
/* 모바일 세로 연결선: 각 dot 중심에서 다음 dot 중심까지 */
.direction__factors li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(-1.75rem + 3.5px); top: calc(.95rem + 8px); width: 1px;
  height: calc(100% + 1.5rem - 16px); background: #dde1ec;
}

@media (min-width: 60rem) {
  .direction__factors { padding-left: 0; margin-top: 3rem; }
  /* 가로 연결선: 첫 dot 중심(10%) ~ 마지막 dot 중심(90%) */
  .direction__factors::before {
    content: ""; position: absolute; left: 10%; right: 10%; top: 3.5px; height: 1px; background: #dde1ec;
  }
  .direction__factors li { padding: 1.75rem 1rem 0; }
  .direction__factors li::before,
  .direction__factors li + li::before { left: 50%; top: 0; transform: translateX(-50%); }
  .direction__factors li:not(:last-child)::after { content: none; }
  .direction__num { line-height: 1.4; }
  .direction__name { margin-top: .5rem; line-height: 1.35; white-space: nowrap; }
  .direction__desc { margin-top: .6rem; line-height: 1.55; }
}

/* =========================================================
   의료진 위계·배치 (2026-09-30)
   - 대표원장 "전문 자격" 두 항목만 BLUE + SemiBold (크기는 그대로)
   - 한진우·김진희 전문의 표기 한 단계 낮춤 (이름보다 먼저 보이지 않도록)
   - PC 2열: column 폭 동일(344px)·gap 64px. 두 사진의 바깥 여백이 좌우 같도록 그룹 위치를 잡음
     (한진우 약력 줄이 사진보다 넓어 틀만 가운데 두면 시각 중심이 왼쪽으로 치우침)
   ========================================================= */
.doctor__bio-group--spec li { color: var(--accent); font-weight: 600; }
.subdoc__cred { font-size: 1.125rem; font-weight: 600; }

@media (min-width: 60rem) {
  .subdoc__cred { font-size: 1.1875rem; }
  .doctor-team__grid {
    grid-template-columns: repeat(2, 21.5rem); column-gap: 4rem;
    width: 47rem; max-width: 100%;
    /* 시각 중심 = 한진우 사진 왼쪽 끝 ~ 김진희 사진 오른쪽 끝의 가운데: (344 + 64 + 280) / 2 = 344px */
    margin-left: calc(50% - 21.5rem); margin-right: 0;
  }
}

/* =========================================================
   치료의 기준 — 치료 정보 2열 (2026-09-30): 5가지 판단 요소와 결론 사이
   카드·박스·그림자 없이 타이포와 여백, PC 가운데 아주 얇은 세로 구분선만
   ========================================================= */
.direction__care { display: grid; gap: 2.25rem; margin: 3rem auto 0; max-width: 60rem; text-align: left; }
.direction__care-title { font-size: 1.3125rem; font-weight: 800; line-height: 1.4; letter-spacing: -0.03em; color: var(--ink); }
.direction__care-text { margin-top: .75rem; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); word-break: keep-all; }
.direction__care-text + .direction__care-text { margin-top: .5rem; }
.direction__care-stat { display: grid; gap: .2rem; margin-top: 1.25rem; }
.direction__care-stat strong { font-size: 1.875rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: var(--accent); }
.direction__care-stat span { font-size: 1rem; font-weight: 500; color: var(--ink-3); }

@media (min-width: 60rem) {
  .direction__care { grid-template-columns: 1fr 1fr; gap: 0; margin-top: 4rem; }
  .direction__care-col { padding: .25rem 3.5rem; }
  .direction__care-col + .direction__care-col { border-left: 1px solid #dde1ec; }   /* 연결선과 같은 색의 아주 얇은 세로 구분선 */
  .direction__care-title { font-size: 1.5rem; }
  .direction__care-text { font-size: 1.125rem; }
  .direction__care-stat { margin-top: 1.5rem; }
  .direction__care-stat strong { font-size: 2.25rem; }
  .direction__care-stat span { font-size: 1.0625rem; }
}

/* 치료 정보 2열 가로 폭 확대 (2026-09-30, PC만): wrapper 960 → 992px(5가지 판단 요소 폭의 약 90%),
   바깥쪽 여백은 없애 좌우 끝까지 펼치고, 가운데 구분선 양옆 여백만 넉넉하게 */
@media (min-width: 60rem) {
  .direction__care { max-width: 62rem; }
  .direction__care-col { padding: .25rem 4.5rem .25rem 0; }
  .direction__care-col + .direction__care-col { padding: .25rem 0 .25rem 4.5rem; }
}

/* 치료의 기준 섹션 배경 (2026-09-30): 아주 연한 BLUE-GRAY, section 자체 배경이라 화면 좌우 끝까지 */
.direction { background-color: #eef3fa; }

/* =========================================================
   치료의 기준 마무리 DARK closing band (2026-09-30)
   색은 기존 어두운 섹션에서 쓰던 #17191d 재사용. 버튼·아이콘·장식 없이 2단계 타이포만
   ========================================================= */
.closing-band { background: #17191d; color: #fff; text-align: center; padding: 3.25rem 0; }
.closing-band__q { font-size: 1.125rem; font-weight: 600; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.closing-band__msg {
  margin-top: .5rem; font-size: 1.375rem; font-weight: 800; line-height: 1.45; letter-spacing: -0.02em;
  color: #fff; word-break: keep-all; text-wrap: balance;
}
@media (min-width: 60rem) {
  .closing-band { padding: 4.25rem 0; }
  .closing-band__q { font-size: 1.25rem; }
  .closing-band__msg { font-size: 1.75rem; }
}

/* closing band 타이포 위계 강화 (2026-09-30): 보조 문장 +20% / 핵심 문장 +29%, 간격 16px. 배경·padding 그대로 */
.closing-band__q { font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); font-weight: 500; }
.closing-band__msg { margin-top: 1rem; font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.25rem); font-weight: 700; line-height: 1.4; }
@media (min-width: 60rem) {
  .closing-band__q { font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); }
  .closing-band__msg { font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.25rem); }
}

/* FAQ 아코디언 전환 (2026-09-30): 답변이 부드럽게 펼쳐지고 화살표가 가볍게 회전 (디자인·여백은 그대로)
   ::details-content + interpolate-size 미지원 브라우저는 기존처럼 즉시 열림 */
.faq__list details { interpolate-size: allow-keywords; }
.faq__list details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .25s ease, content-visibility .25s allow-discrete;
}
.faq__list details[open]::details-content { block-size: auto; }
.faq__list summary::after { transition: transform .25s ease, top .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .faq__list details::details-content, .faq__list summary::after { transition: none; }
}

/* =========================================================
   모션 레이어 (2026-09-30) — 레이아웃·색·크기는 그대로, opacity/transform만
   .js-motion 은 JS가 붙임(동작 줄이기 설정·JS 미실행 시 붙지 않음 → 처음부터 최종 화면)
   ========================================================= */
/* 숨김은 즉시(전환 없음), 등장만 전환 → 숨김 클래스를 붙일 때 "사라지는" 전환이 생기지 않음 */
.js-motion .rv { opacity: 0; transform: translateY(14px); }
.js-motion .rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--rv-d, 0ms);
}

/* 치료의 기준: PC 가로 연결선이 왼쪽 → 오른쪽으로 그려짐 (scaleX, 레이아웃 변화 없음) */
@media (min-width: 60rem) {
  .js-motion .rv-line::before { transform: scaleX(0); transform-origin: left center; }
  .js-motion .rv-line.is-in::before { transform: scaleX(1); transition: transform .9s cubic-bezier(.22, .61, .36, 1) .1s; }
}

/* 증상 탭 전환: 새 증상 목록이 짧게 나타남 (0.25초, slide 없음) */
.js-motion .explorer__panel:not([hidden]) { animation: panel-fade .25s ease-out; }
@keyframes panel-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 47.99rem) {
  /* 모바일: 이동거리·확대·그림자 더 약하게 */
  .js-motion .rv { transform: translateY(10px); }
  .js-motion .rv.is-in { transform: none; transition-duration: .5s; }
  .und__item[aria-pressed='true'] .und__frame { transform: scale(1.008); box-shadow: 0 10px 28px rgba(0, 0, 0, .12); }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .rv, .js-motion .rv-line::before { opacity: 1; transform: none; transition: none; }
  .js-motion .explorer__panel:not([hidden]) { animation: none; }
  .und__item[aria-pressed='true'] .und__frame, .und__item:focus-visible .und__frame { transform: none; }
}

/* 한진우·김진희 2인 그룹 확대 (2026-09-30, PC만): wrapper 752 → 920px(+22%), 열 344 → 420px, 간격 64 → 80px,
   사진 280 → 300px(4:5 비율·크롭 방식 그대로), 제목 → 사진 52 → 64px.
   시각 중심 = 한진우 사진 왼쪽 끝 ~ 김진희 사진 오른쪽 끝의 가운데: (420 + 80 + 300) / 2 = 400px
   2026-10-01 신규사업부: 960~1030px(iPad 가로 1024 포함)에서 920px 고정 폭이 컨테이너를 넘어 문서 가로 스크롤 발생
   → 열을 최대 420px까지 줄어들 수 있게 하고, 그리드 폭은 오른쪽 여백 안으로 제한.
   넓은 화면(컨테이너 여유가 있을 때)은 계산값이 기존과 동일(420 / 80 / 920px, 같은 위치). */
@media (min-width: 60rem) {
  .doctor-team__grid {
    grid-template-columns: repeat(2, minmax(0, 26.25rem)); column-gap: 5rem;
    width: min(57.5rem, calc(100% - max(0px, 50% - 25rem)));
    margin-left: max(0px, calc(50% - 25rem)); margin-top: 4rem;
  }
  .subdoc__photo { width: 18.75rem; }
}

/* 내 증상 알아보기 인체 이미지 PC 12% 축소 (2026-09-30): 이미지 자리(550×877 틀)는 그대로 두고 그림만 88%로 줄여 가운데 배치
   → 세로 중심·섹션 높이·왼쪽 콘텐츠 위치 유지. 포인트는 그림 기준 % 좌표라 함께 이동 */
@media (min-width: 60rem) {
  .explorer__figure { display: flex; align-items: center; justify-content: center; aspect-ratio: 640 / 1020; }
  .explorer__body { width: 88%; }
}

/* 10,000 회 이상 (2026-09-30): 숫자 크게 + "회 이상"은 숫자의 약 50% 단위, 같은 기준선·같은 블루, 한 줄 */
.direction__care-stat strong { white-space: nowrap; }
/* .direction__care-stat span(보조 문구용 회색 규칙)보다 우선하도록 부모 클래스를 함께 지정 */
.direction__care-stat .direction__care-num { font-size: 2.125rem; font-weight: 800; color: inherit; }
.direction__care-stat .direction__care-unit { margin-left: .2rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; color: inherit; }
@media (min-width: 60rem) {
  .direction__care-stat .direction__care-num { font-size: 2.5rem; }
  .direction__care-stat .direction__care-unit { font-size: 1.25rem; }
}

/* =========================================================
   하단 전환 흐름 정리 (2026-09-30): 치료의 기준 → 결론 배너 → 상담 → FAQ → 오시는 길 → Footer
   ========================================================= */
/* 상담 폼: 입력 부담 완화 (40~60대 모바일 입력 가능한 크기 유지) */
.form { gap: 1.25rem; }
.field input[type='text'], .field input[type='tel'] { min-height: 52px; padding: .625rem 1rem; }
.field textarea { min-height: 5.5rem; height: 5.5rem; }          /* 120 → 88px (−27%) */
.form__actions { margin-top: .5rem; }
.consult__desc { margin-top: 1.25rem; word-break: keep-all; }

/* 오시는 길: 컴팩트한 정보 + 지도 (카드·그림자 없음) */
.location { background: #fff; padding: calc(var(--section-y) * .75) 0; }
.location__grid { display: grid; gap: 2rem; }
.location__name { margin-top: 1.25rem; font-size: 1.3125rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.location__list { display: grid; gap: .6rem; margin-top: 1rem; }
.location__list > div { display: grid; grid-template-columns: 5rem 1fr; column-gap: .75rem; }
.location__list > div[hidden] { display: none; }
.location__list dt { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.location__list dd { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); word-break: keep-all; }
.location__list dd p + p { margin-top: .15rem; }
.location__actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.75rem; }
.location__actions .btn { min-height: 52px; padding: 0 1.5rem; font-size: 1.0625rem; }
.location__map { aspect-ratio: 4 / 3; background: var(--bg-tint); }
.location__map iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (min-width: 60rem) {
  .location__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 4.5rem; align-items: center; }
  .location__list dt, .location__list dd { font-size: 1.125rem; }
  .location__map { aspect-ratio: 16 / 10; }
}
/* 상담 제목: 구절 단위로만 줄바꿈 (치료를 결정하기 전, / 경험 있는 의료진과 / 현재 상태부터 확인해보세요.) */
#consult-title .nw { display: inline-block; white-space: nowrap; }

/* =========================================================
   치료의 기준 미세 조정 (2026-09-30)
   - 라벨 700 → 800, 라벨→제목 14 → 10px / 설명 → 01~05: PC 48 → 24px, 모바일 40 → 20px
   - 01~05: 번호·제목·설명 행 높이와 설명 폭·행간을 명시적으로 고정
   - 연결 문구(bridge) 추가, 01~05 → 치료 설명 간격 재조정
   - 의료진 끝 → 치료의 기준 시작: 양쪽 padding 각각 section-y의 50% → 42% (약 −16%)
   ========================================================= */
.direction__wrap > .eyebrow { font-weight: 800; margin-bottom: .625rem; }
.direction__factors { margin-top: 1.25rem; }
.direction__bridge {
  margin: 2rem auto 0; max-width: 40rem; text-align: center;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.6; color: var(--ink-3); word-break: keep-all;
}
.direction__bridge + .direction__care { margin-top: 2rem; }
.doctor-team { padding-bottom: calc(var(--section-y) * .42); }
.direction { padding-top: calc(var(--section-y) * .42); }

@media (min-width: 60rem) {
  .direction__factors { margin-top: 1.5rem; }
  .direction__num { height: 1.5rem; line-height: 1.5rem; }
  .direction__name { height: 2.2rem; line-height: 2.2rem; }
  .direction__desc { max-width: 11.8rem; margin-left: auto; margin-right: auto; line-height: 1.55; }
  .direction__bridge { margin-top: 2.75rem; font-size: 1.125rem; }
  .direction__bridge + .direction__care { margin-top: 2.25rem; }
}

/* =========================================================
   섹션 eyebrow 타이틀 시스템 통일 (2026-09-30)
   역할 기준: 주요 섹션 메인 제목 바로 위 라벨 (내 증상 알아보기 / 척추관협착증 주요 증상 / 의료진 소개 / 치료의 기준 / LOCATION)
   크기·굵기·제목과의 간격만 통일, 색은 섹션별 기존 값 유지
   ========================================================= */
.eyebrow,
.why__eyebrow,
.direction__wrap > .eyebrow,
.eyebrow--en { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: .75rem; }
.eyebrow--en { letter-spacing: .08em; }
#location-title .nw { display: inline-block; white-space: nowrap; }
@media (min-width: 60rem) {
  .eyebrow,
  .why__eyebrow,
  .direction__wrap > .eyebrow,
  .eyebrow--en { font-size: 1.3125rem; margin-bottom: .875rem; }
}

/* Footer 딥 네이비 (2026-09-30): 실제 전화번호·진료시간, 어두운 배경용 텍스트 위계 */
.footer { background: #111b32; border-top: 0; color: rgba(255, 255, 255, .75); }
.footer__name { color: #fff; font-weight: 700; }
.footer__info { gap: .6rem; }
.footer__info dt { color: rgba(255, 255, 255, .92); }
.footer__info dd { margin: 0; }
.footer__tel { color: rgba(255, 255, 255, .85); text-decoration: none; text-underline-offset: 3px; }
.footer__tel:hover, .footer__tel:focus-visible { text-decoration: underline; color: #fff; }
.footer__hours { display: grid; gap: .2rem; }
.footer__hours li { display: flex; gap: .75rem; }
.footer__hours span { flex: 0 0 6.5rem; color: rgba(255, 255, 255, .6); }
.footer__note { color: rgba(255, 255, 255, .58); }
@media (max-width: 23.99rem) {
  .footer__hours span { flex-basis: 5.75rem; }
}
/* 오시는 길: 단독 병원명 삭제 후 제목 → 정보 목록 간격 (2026-09-30) */
.location__list { margin-top: 1.5rem; }

/* 상담 영역 좌우 균형 (2026-09-30, PC만): 왼쪽 카피를 폼 높이 기준 세로 중앙에서 약간 위(시각적 중심) */
@media (min-width: 60rem) {
  .consult__grid { align-items: center; }
  /* 기존 sticky(상단 고정) 해제 → 폼 높이 기준 세로 중앙보다 약간 위 */
  .consult__intro { position: static; align-self: center; padding-bottom: 3rem; }
}
/* 오시는 길: 타이틀 그룹 → 방문 정보 간격 (2026-09-30) 모바일 24 → 26px / PC 24 → 36px */
.location__list { margin-top: 1.625rem; }
@media (min-width: 60rem) { .location__list { margin-top: 2.25rem; } }

/* 치료의 기준 간소화 (2026-09-30): 설명 문구 2개 삭제 → 제목 → 5요소 → 치료 정보를 여백으로 구분 */
.direction__title + .direction__factors { margin-top: 2.25rem; }
@media (min-width: 60rem) {
  .direction__title + .direction__factors { margin-top: 3.25rem; }
  /* 오시는 길: 타이틀 그룹을 왼쪽 영역 상단(지도 상단선)에 고정 */
  .location__info { align-self: start; }
}
/* 내 증상 알아보기 인체 이미지 PC 30px 위로 (2026-09-30): transform이라 레이아웃·섹션 높이 영향 없음, 포인트도 함께 이동 */
@media (min-width: 60rem) { .explorer__body { transform: translateY(-30px); } }

/* Footer 컴팩트 (2026-09-30): 콘텐츠 폭 1104 → 1060px, 글자 한 단계 작게(모바일도 13px 이상), padding 약 −17% */
.footer { padding: 2.5rem 0 2.875rem; font-size: .875rem; }
.footer .wrap { max-width: calc(66.25rem + 2 * var(--gutter)); }
.footer__name { font-size: 1rem; font-weight: 700; margin-bottom: .3rem; }
.footer__grid p { line-height: 1.6; }
.footer__info { gap: .45rem; }
.footer__info dt { flex-basis: 6.75rem; font-size: .875rem; font-weight: 700; }
.footer__info dd, .footer__hours li { font-size: .875rem; line-height: 1.6; }
.footer__hours { gap: .1rem; }
.footer__hours span { flex-basis: 5.75rem; }
@media (min-width: 60rem) {
  .footer__grid { column-gap: 4rem; }
}

/* =========================================================
   오시는 길 — 진한 메디셀 블루 (2026-09-30)
   배경은 '신경인성 파행' 섹션과 같은 #2f42b9 재사용 → Footer(#111b32)와 명확히 구분
   ========================================================= */
.location { background: #2f42b9; color: #fff; }
.location .eyebrow { color: #c9d2ff; }
.location #location-title { color: #fff; }
.location__list dt { color: #fff; font-weight: 600; }
.location__list dd { color: rgba(255, 255, 255, .85); }
.location__map { background: #e9ecf6; }

/* 카카오 / 네이버 지도 pill 버튼 (컴팩트) */
.location__actions { gap: .625rem; }
.map-pill {
  display: inline-flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 48px; padding: 0 1.125rem 0 1.375rem; border-radius: 999px;
  font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none;
  transition: filter .15s ease;
}
.map-pill:hover { filter: brightness(.95); }
.map-pill:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.map-pill--kakao { background: #fee500; color: #191919; }
.map-pill--naver { background: #03c75a; color: #fff; }
.map-pill__icon { flex: 0 0 auto; }
.map-pill__n { font-size: 1.125rem; font-weight: 900; line-height: 1; }

/* =========================================================
   세로 리듬 정리 (2026-09-30) — 의료진 챕터 압축 (문구·사진·색 변경 없음)
   ========================================================= */
.doctor { padding-top: calc(var(--section-y) * .85); }
.doctor__grid { margin-top: 2rem; }
.doctor__bio-list { gap: 1.125rem; }
.doctor__bio-group li { line-height: 1.6; }
.doctor-team { margin-top: 3.5rem; }
.doctor-team__grid { margin-top: 1.75rem; row-gap: 3rem; }
.subdoc__who { margin-top: 1.125rem; }
.subdoc__group { margin-top: 1rem; }
.subdoc__group li { line-height: 1.6; }
.subdoc__more { margin-top: .75rem; }
@media (min-width: 60rem) {
  .doctor { padding-top: calc(var(--section-y) * .78); }
  .doctor__grid { margin-top: 3rem; }
  .doctor__bio-list { gap: 1.25rem; }
  .doctor-team { margin-top: 4.5rem; }
  .doctor-team__grid { margin-top: 2.75rem; }
}
@media (min-width: 60rem) {
  .doctor { padding-top: calc(var(--section-y) * .7); }
  .doctor-team { margin-top: 3.75rem; }
  .doctor-team__grid { margin-top: 2.25rem; }
}
/* 인체 이미지 PC 추가 12px 위로 (2026-09-30): 합계 −42px. 머리 상단이 '내 증상 알아보기' 라벨 상단보다 높아지지 않는 한계 */
@media (min-width: 60rem) { .explorer__body { transform: translateY(-42px); } }

/* =========================================================
   공통 세로 여백 시스템 (2026-09-30) — 개별 수정으로 누적된 섹션 padding을 한 기준으로 정리
   일반 섹션 96px(PC) / 64px(모바일), 컴팩트(오시는 길) 80 / 56, 전환 밴드 52 / 40, Footer 48·52 / 40·44
   ========================================================= */
:root { --space-section: 4rem; --space-section-compact: 3.5rem; --space-band: 2.5rem; }
@media (min-width: 60rem) {
  :root { --space-section: 6rem; --space-section-compact: 5rem; --space-band: 3.25rem; }
}
.explorer-section, .why, .direction, .consult, .section--tint { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.doctor { padding-top: var(--space-section); padding-bottom: 0; }
.doctor-team { padding-bottom: var(--space-section); }
.closing-band { padding: var(--space-band) 0; }
.location { padding: var(--space-section-compact) 0; }
.footer { padding: 2.5rem 0 2.75rem; }

@media (min-width: 60rem) {
  /* 콘텐츠가 긴 의료진 챕터: 88px (허용 범위 하단) */
  .doctor { padding-top: 5.5rem; }
  .doctor-team { padding-bottom: 5.5rem; }
  /* 내 증상 알아보기: 인체 그림 틀의 빈 공간(위 10px만 남기고 아래 여백 제거) → 그림 아래 88px에서 섹션 종료.
     그림의 화면상 위치·크기·포인트는 이전과 동일 (틀 위 10px + 이전 translate 제거) */
  .explorer-section { padding-bottom: 5.5rem; }
  .explorer__figure { display: block; aspect-ratio: auto; }
  .explorer__body { width: 88%; margin: 10px auto 0; transform: none; }
  /* 제목 그룹 내부 간격 기준: 제목→설명 24 / 제목→콘텐츠 40~48 */
  .explorer__sub { margin-top: 1.5rem; }
  .doctor-team__grid { margin-top: 2.5rem; }
  .direction__title + .direction__factors { margin-top: 3rem; }
  .footer { padding: 3rem 0 3.25rem; }
}

/* =========================================================
   Dark 메시지 밴드 → 병원 건물 사진 배경 (2026-09-30)
   PC: background-attachment: fixed (스크롤 시 건물이 고정되어 보임) / 모바일: 일반 스크롤 배경
   딥네이비(#111b32) 반투명 오버레이로 흰 문구 가독성 확보. 문구·타이포·높이는 그대로
   ========================================================= */
.closing-band {
  position: relative; isolation: isolate;
  background-color: #111b32;
  background-image: url('../images/treatment/clinic-building-800.webp');
  background-size: cover; background-position: center 12%; background-repeat: no-repeat;
}
.closing-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(17, 27, 50, .6);
}
@media (min-width: 60rem) {
  .closing-band {
    background-image: url('../images/treatment/clinic-building-1600.webp');
    background-attachment: fixed;
    /* fixed 배경은 화면(뷰포트) 기준: 밴드가 화면 중앙에 올 때 간판이 문구 바로 아래에 보이도록 */
    background-position: center 17%;
  }
}
@media (hover: none) and (pointer: coarse) {
  .closing-band { background-attachment: scroll; }   /* 터치 기기(태블릿 포함) fixed 미지원·떨림 방지 */
}

/* =========================================================
   오시는 길 + Footer 에디토리얼 정리 (2026-09-30)
   - 두 영역 콘텐츠 폭을 1024px로 맞춰 같은 세로 축에서 끝나도록
   - 오시는 길: 정보 5 : 지도 6, 제목 존재감↑, 주소/지하철은 아주 얇은 선으로 나눈 label|value 행
   - Footer: 컴팩트(상하 40px), 3단 grid(병원 / 연락·대표 / 진료시간), 한 단계 작은 글자
   - 연결: Footer 상단 1px 미세 하이라이트 + 오시는 길 하단 여백을 상단보다 살짝 크게
   ========================================================= */
.location .wrap, .footer .wrap { max-width: calc(64rem + 2 * var(--gutter)); }

/* 제목 위계 */
.location .eyebrow--en { letter-spacing: .14em; }
.location #location-title { font-size: 1.875rem; font-weight: 800; line-height: 1.28; letter-spacing: -0.035em; }
.location #location-title .nw { display: inline-block; }

/* 주소 / 지하철: 카드 없이 hairline 행 + label|value 정렬 */
.location__list { gap: 0; margin-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.location__list > div {
  grid-template-columns: 4.5rem 1fr; column-gap: 1rem; align-items: baseline;
  padding: .875rem 0; border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.location__list dt { font-size: .9375rem; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .72); }
.location__list dd { font-size: 1.0625rem; color: #fff; }
.location__actions { margin-top: 1.75rem; }
.location__map { aspect-ratio: 4 / 3; }

@media (min-width: 60rem) {
  .location { padding: 5rem 0 5.5rem; }
  .location__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 4.5rem; align-items: center; }
  .location__info { align-self: center; }
  .location #location-title { font-size: 2.75rem; }
  .location #location-title .nw { display: block; }              /* "메디셀플러스의원 / 오시는 길" 2줄 에디토리얼 */
  .location__list { margin-top: 2.25rem; }
  .location__list > div { grid-template-columns: 5rem 1fr; padding: 1rem 0; }
  .location__list dd { font-size: 1.125rem; }
  .location__actions { margin-top: 2rem; }
  .location__map { aspect-ratio: 5 / 4; }
}

/* ---------- Footer (compact) ---------- */
.footer { padding: 2.25rem 0 2.5rem; font-size: .8125rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.footer__grid { gap: 1.5rem; }
.footer__name { font-size: .9375rem; margin-bottom: .4rem; }
.footer__grid p { font-size: .8125rem; line-height: 1.65; color: rgba(255, 255, 255, .7); }
.footer__info { gap: .5rem; }
.footer__info dt { flex-basis: 6.25rem; font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .9); }
.footer__info dd, .footer__hours li { font-size: .8125rem; line-height: 1.65; }
.footer__hours { gap: 0; }
.footer__hours span { flex-basis: 5.5rem; }

@media (min-width: 60rem) {
  .footer { padding: 2.5rem 0 2.75rem; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 4.5rem; align-items: start; }
  /* 오른쪽 2열: (전화·대표자·사업자등록번호) | (진료시간) */
  .footer__info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 3rem; row-gap: .5rem; align-items: start; }
  .footer__info > div:nth-child(1) { grid-column: 1; grid-row: 1; }
  .footer__info > div:nth-child(2) { grid-column: 2; grid-row: 1 / span 3; }
  .footer__info > div:nth-child(3) { grid-column: 1; grid-row: 2; }
  .footer__info > div:nth-child(4) { grid-column: 1; grid-row: 3; }
  .footer__info > div:nth-child(2) dt { flex-basis: 4.5rem; }
}
.footer__grid .footer__name { font-size: .9375rem; font-weight: 700; color: #fff; }

/* 상담 신청 섹션 흰 배경 (2026-09-30): 라벤더(--accent-soft) 제거 → #fff.
   폼은 배경에 묻히지 않도록 아주 옅은 선 + 극히 약한 그림자만 (라운드 없음) */
.consult { background: #fff; }
.form { border: 1px solid #dfe3ec; border-radius: 0; box-shadow: 0 1px 2px rgba(17, 27, 50, .04), 0 8px 24px rgba(17, 27, 50, .04); }

/* =========================================================
   치료의 기준 분리 (2026-09-30)
   연블루 = 제목 + 01~05 판단 기준 / 흰색 = 보존적 치료·프롤로 치료 (카드·선·그림자 없이 배경색과 여백으로 구분)
   ========================================================= */
.direction { padding-bottom: 3.5rem; }
.care-info { background: #fff; padding-top: 3rem; padding-bottom: var(--space-section); }
.care-info .direction__care { margin-top: 0; }
.care-info .direction__care-col + .direction__care-col { border-left-color: #e6e9f0; }   /* 흰 배경용으로 한 톤 더 옅은 구분선 */
@media (min-width: 60rem) {
  .direction { padding-bottom: 5rem; }
  .care-info { padding-top: 4.5rem; }
}

/* 하단 타이포 위계 통일 (2026-09-30): FAQ에 eyebrow(Q&A) 추가, 오시는 길 제목을 다른 섹션 제목과 같은 크기로 */
.location #location-title { font-size: var(--fs-h2); line-height: 1.32; }
@media (min-width: 60rem) {
  .location #location-title { font-size: var(--fs-h2); }
}
/* 치료 정보(흰색) 상·하 여백 동일 (2026-09-30): 하단을 상단 값에 맞춤 */
.care-info { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 60rem) { .care-info { padding-top: 4.5rem; padding-bottom: 4.5rem; } }
/* 한진우·김진희 전문의 표기: 블루 → 짙은 차콜 (2026-09-30). 학력·경력 / 상세 약력 보기는 블루 유지 */
.subdoc__cred { color: var(--ink); font-weight: 600; }
/* 내 증상 알아보기 인체 이미지 PC 35px 위로 (2026-09-30): transform만 사용 → 섹션 높이·좌측·하단 레이아웃 불변, 포인트 동반 이동 */
@media (min-width: 60rem) { .explorer__body { transform: translateY(-35px); } }

/* =========================================================
   최종 정돈 (2026-09-30)
   - 내 증상 알아보기 인체 이미지 PC 8% 축소: 폭 88% → 81% (484 → 445px), 위쪽 기준 축소라 머리 높이·좌우 중심 유지.
     이미지 칸은 이전 높이 비율(550:781)을 그대로 유지 → 섹션 높이·하단·다음 섹션 위치 불변. 포인트는 % 좌표라 함께 축소
   - 오시는 길 상·하 여백 동일(80/80)
   ========================================================= */
@media (min-width: 60rem) {
  .explorer__figure { aspect-ratio: 550 / 781; }
  .explorer__body { width: 81%; }
  .location { padding: 5rem 0; }
}

/* =========================================================
   모바일·태블릿 정렬 정리 (2026-09-30) — 960px 미만에서만 적용, 데스크톱 CSS 변경 없음
   ========================================================= */
@media (max-width: 59.99rem) {
  /* 내 증상 알아보기: 제목 → 설명 → 부위 탭 → 증상 내용 → 인체 이미지 순서 */
  .explorer { grid-template-areas: 'head' 'choices' 'content' 'figure'; }
  .explorer__content { margin-top: 1.75rem; }
  .explorer__figure { margin-top: 2.5rem; }
  .explorer__body { margin-left: auto; margin-right: auto; transform: none; }   /* 데스크톱 이동값이 오지 않도록 명시 */

  /* 한진우·김진희: 사진을 본문 폭(대표원장 사진과 같은 좌우 기준선)으로 */
  .subdoc__photo { width: 100%; max-width: 26rem; }

  /* 대표원장 약력: 분류명(현재·전문 자격…)을 항목 위에 두어 약력 글줄에 전체 폭 사용 → 불필요한 줄바꿈 감소 */
  .doctor__bio-group { grid-template-columns: 1fr; row-gap: .35rem; }
  .doctor__bio-list { gap: 1.25rem; }
}

/* 모바일 헤더 균형 (2026-09-30, 48rem 미만만): 로고 소폭 확대 + 전화 버튼 한 단계 축소, 사이 간격 확보 */
@media (max-width: 47.99rem) {
  .site-header__inner { gap: .875rem; }
  .brand__logo { --logo-h: min(26px, calc((100vw - 2 * var(--gutter) - 10.75rem) / 8.7)); }
  .header-phone { min-height: 40px; padding: 0 .625rem; gap: .3rem; font-size: .875rem; }
  .header-phone__icon { width: 14px; height: 14px; }
}

/* Footer 지정 사실 고지 (2026-10-01): 기관정보와 같은 작은 보조 텍스트, 강조·아이콘 없음 */
.footer__grid .footer__cert {
  grid-column: 1 / -1; margin-top: .25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .8125rem; line-height: 1.6; color: rgba(255, 255, 255, .6); word-break: keep-all;
}
.footer__cert .nw { white-space: nowrap; }

/* 오시는 길: 지정 사실 고지 (2026-10-01, Footer에서 이동) — 박스·배지·아이콘 없이 흰색 계열 타이포 위계만 */
.location__cert { margin-top: 1rem; line-height: 1.5; word-break: keep-all; }
.location__cert-label { font-size: .875rem; font-weight: 500; color: rgba(255, 255, 255, .72); }
.location__cert-name { font-size: 1rem; font-weight: 700; color: #fff; }
.location__cert-no { display: block; margin-top: .15rem; font-size: .8125rem; font-weight: 400; color: rgba(255, 255, 255, .62); }
.location__cert + .location__list { margin-top: 1.5rem; }
@media (min-width: 60rem) {
  .location__cert { margin-top: 1.125rem; }
  .location__cert-label { font-size: .9375rem; }
  .location__cert-name { font-size: 1.0625rem; }
  .location__cert-no { font-size: .875rem; }
  .location__cert + .location__list { margin-top: 1.75rem; }
}

/* 지정 사실 고지 위치 이동 (2026-10-01): 오시는 길에서 삭제 → 결론 밴드 바로 아래 흰 여백의 한 줄 보조 정보 (상담 섹션 padding은 그대로) */
.location__cert { display: none; }
.trust-note { background: #fff; padding-top: 1.75rem; }
.trust-note__text {
  text-align: center; font-size: .8125rem; font-weight: 500; line-height: 1.6; letter-spacing: -0.01em;
  color: var(--ink-3); word-break: keep-all;
}
.trust-note__text strong { font-weight: 700; color: var(--ink-2); }
.trust-note__text .nw { white-space: nowrap; }
@media (min-width: 60rem) {
  .trust-note { padding-top: 2rem; }
  .trust-note__text { font-size: .875rem; }
}

/* 지정 문구를 건물 이미지의 캡션처럼 (2026-10-01): 블록 높이는 이전과 동일하게 고정(PC 54.4px / 모바일 69.6px)
   → 상담 섹션 위치·섹션 여백 불변. 글자만 이미지 쪽으로 붙이고 한 단계 작고 가볍게 */
.trust-note { box-sizing: border-box; height: 4.35rem; padding-top: .75rem; }
.trust-note__text { font-size: .75rem; font-weight: 400; line-height: 1.6; letter-spacing: .005em; color: var(--ink-3); }
.trust-note__text strong { font-weight: 600; color: var(--ink-2); }
@media (min-width: 60rem) {
  .trust-note { height: 3.4rem; padding-top: .875rem; }
  .trust-note__text { font-size: .8125rem; }
}
/* 대표원장 약력: 줄바꿈 시 의미 단위 유지 (2026-10-01, 메릴랜드 항목 "통증의학센터 전문의" 묶음) */
.doctor__bio-group .nw { white-space: nowrap; }

/* ── 모바일 최종 마감 (2026-10-01): 단독 줄바꿈 방지·지정 문구 가독성. PC(≥60rem) 영향 없음 ── */
.doctor .nw, .faq .nw, .consult .nw { white-space: nowrap; }
@media (max-width: 59.99rem) {
  .location dd[data-address-full] { text-wrap: balance; }      /* "서울특별시 서초구 / 남부순환로 2646" (JS가 텍스트를 다시 채움) */
  .faq__a p { text-wrap: pretty; }                             /* 답변 마지막 줄 한 단어 고립 완화 */
  .trust-note__text { font-size: .8125rem; }                   /* 12→13px, 블록 높이(4.35rem) 그대로 */
}

/* 증상 선택 탭 모바일 (2026-10-01): 버튼 너비를 글자 길이에 맞춰 세 항목 모두 한 줄. 글자 크기·높이 규칙 그대로 */
@media (max-width: 47.99rem) {
  .explorer__choices { grid-template-columns: auto auto auto; }  /* 남는 폭은 세 버튼에 고르게 분배 */
  .explorer__btn { white-space: nowrap; }
}

/* 모바일 헤더 좌우 확장 (2026-10-01, 48rem 미만만): 좌우 안전 여백 20→14px, 로고 왼쪽·전화 버튼 오른쪽 끝으로(space-between 유지).
   로고 크기(--logo-h는 --gutter 기준)·전화 버튼 크기·헤더 높이 그대로 */
@media (max-width: 47.99rem) {
  .site-header__inner { padding-left: .875rem; padding-right: .875rem; }
}

/* =========================================================
   모바일 섹션 타이틀 위계 통일 (2026-10-01, 48rem 미만만 — PC·태블릿 불변)
   기준: 의료진 소개 "경험의 깊이는, / 시간만으로 만들어지지 않습니다."
   - 타이틀: .section-title 공통값(28px / 800 / 1.32) 그대로 사용
   - 타이틀 위: 섹션 padding(--space-section) → [eyebrow] → 타이틀 (기존 규칙 유지)
   - 타이틀 → 설명문: --title-desc-gap 하나로 통일 (기준 16px)
   - 설명문 타이포: 상담 설명을 의료진 서브카피와 같은 비율(18px / 500 / 1.6)로
   ========================================================= */
@media (max-width: 47.99rem) {
  :root { --title-desc-gap: 1rem; --title-desc-fs: var(--fs-body); }
  .doctor__sub,
  .explorer__sub,
  .why__desc { margin-top: var(--title-desc-gap); }
  .consult__intro { row-gap: 0; }                                   /* 그리드 gap 24 + margin 20 = 44px 중복 제거 */
  .consult__desc {
    margin-top: var(--title-desc-gap);
    font-size: var(--title-desc-fs); font-weight: 500; line-height: 1.6; letter-spacing: -0.02em;
  }
  .consult__phone { margin-top: 1.5rem; }                           /* (현재 hidden) 노출 시 기존 간격 유지 */
}

/* 모바일 하단 고정 CTA 순서 HERO와 통일 (2026-10-01): [온라인 상담(Primary)] [전화상담(Secondary)].
   열 비율은 기존 1 : 1.35를 좌우만 뒤집어 각 버튼 폭(넓은 Primary / 좁은 Secondary)·높이·바 높이 그대로 */
.sticky-cta { grid-template-columns: 1.35fr 1fr; }

/* 상담폼 안내문구 모바일 한 줄 유지 (2026-10-01, 48rem 미만만 — PC 불변)
   "숫자만 입력하셔도 됩니다."는 기존 17px 그대로 / 예시 번호 줄과 상담 내용 안내는 같은 13.5px로 한 줄 고정 (360px 폼 폭 288px 기준) */
@media (max-width: 47.99rem) {
  /* 2026-10-01 통일: 두 안내문구 모두 같은 규칙(--form-help-fs) 한 줄. 연락처 안내는 "숫자만 입력하셔도 됩니다.  예) 010-1234-5678" 한 줄 */
  :root { --form-help-fs: .84375rem; }
  #f-phone-help, #f-msg-help { font-size: var(--form-help-fs); font-weight: 400; line-height: 1.6; color: var(--ink-3); white-space: nowrap; }
  #f-phone-help .nowrap { display: inline; font-size: inherit; margin-left: .25em; }
}

/* 모바일 하단 고정 CTA 1:1 (2026-10-01): 두 버튼 동일 폭. minmax(0,1fr)로 글자 길이와 무관하게 정확히 반씩, 간격(.5rem)·높이·패딩·글자 동일 */
.sticky-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sticky-cta .btn { padding-left: .75rem; padding-right: .75rem; font-size: 1.125rem; font-weight: 700; min-height: 52px; }

/* =========================================================
   결론 밴드(건물 사진) 모바일 고정 배경 효과 (2026-10-01, 48rem 미만만 — PC는 기존 background-attachment: fixed 그대로)
   background-attachment: fixed 대신: 밴드에 clip-path: inset(0) → 밴드 안의 position: fixed 사진 레이어(::after)가
   밴드 영역 밖으로는 절대 보이지 않음(다음 상담 섹션으로 따라오지 않음). 문구만 스크롤되고 사진은 화면에 고정된 것처럼 보임.
   레이어 높이는 100lvh(주소창이 접혀도 변하지 않는 최대 뷰포트) → iOS/Android 주소창 변화 시 사진 크기 튐 방지.
   사진·오버레이 색·문구·밴드 높이 변경 없음.
   ========================================================= */
@media (max-width: 47.99rem) {
  .closing-band { background-image: none; clip-path: inset(0); }
  .closing-band::after {
    content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -2;
    background: #111b32 url('../images/treatment/clinic-building-800.webp') center 30% / cover no-repeat;
    pointer-events: none;
  }
}

/* ── 모바일 한 줄 고정 (2026-10-01 사용자 지시): LOCATION 주소·개인정보 동의 문구. PC·폼 너비·체크박스 크기·하단 CTA 불변 ── */
@media (max-width: 47.99rem) {
  .location dd[data-address-full] { white-space: nowrap; font-size: 1rem; }   /* 17→16px, "서울특별시 서초구 남부순환로 2646" 한 줄 */
  .field--consent .check { gap: .5rem; }                                      /* 체크박스↔문구 12→8px (체크박스 26px 유지) */
  .field--consent .check > span { white-space: nowrap; font-size: 1rem; }     /* 18→16px, "(필수)" 색은 .req 그대로 */
}