/* ==========================================================================
   강남이룸안과의원 SEO SILO — DESIGN TOKENS & BASE SYSTEM
   Brand Accent extracted from official site (erumeye.co.kr) theme variables:
   --color-main:#3393EC / --color1:#2171BA / --color2:#112C4F

   택소노미 참조 (planning/taxonomy-*.md, 2026-08-28 저장):
   - 디자인 사조: Swiss / Editorial [design] — 명료·콘텐츠 중심·시간을 초월하는 톤
   - 컬러 전략: 60-30-10 Rule [design] — 60% 흰 배경(--c-canvas), 30% 소프트그레이 섹션
     (--c-bg-soft/--c-bg-secondary), 10% 브랜드블루 액센트(--c-brand)
   - AI 슬롭 회피: Purple-Blue Gradient·Indigo-500 Accent 미사용, Uniform Rounding 대신
     라운드 전면 제거(0px), shadcn/Lucide 등 UI 키트 미사용 — planning/taxonomy-ai-slop.md 자가점검 결과 참조
   - 순수 PHP + vanilla CSS/JS 스택이므로 GSAP·Framer Motion·Three.js 전제 패턴은 적용 불가.
     동등 효과가 필요하면 vanilla CSS/IntersectionObserver로 근사 구현(예: .reveal 시스템).

   2026-08-28 3차 리디자인(완성도 상향) 추가 근거 — 동종 업계 우수 사례(jlnun.veteranfix.com) 실측 비교:
   - .grid-frame/.grid-frame__cell: Exposed Grid Framing [layout, planning/taxonomy-layout.md §23]
     — 카드 사이 gap 대신 공유 괘선으로 격자를 짜는 방식. 배경의 대형 고스트 넘버(::before counter)는
     "몇 번째 항목"을 세는 색인이지 Numbered 1-2-3 Steps(실제 절차 아닌데 단계처럼 보이는 것, weak 슬롭)가
     아님 — 병렬 항목(진료 분야 5개, 검사 4종)에만 쓰고 실제 순서 있는 절차에는 쓰지 않는다.
   - .section-head: 대칭 카드 그리드 섹션의 중앙 정렬 인트로(eyebrow+h2+lead+rule). 히어로 자체는 여전히
     비대칭 스플릿 유지(Centered Hero는 taxonomy-ai-slop.md에서 strong 슬롭으로 명시) — section-head는
     히어로가 아니라 그리드 섹션 도입부에만 쓴다.
   - .hero__metrics: 지표 밴드. taxonomy-ai-slop.md의 Stat Banner Row(맥락 없는 숫자 나열, weak 슬롭)를
     피하기 위해 전부 이 페이지 안에서 이미 검증된 사실(의료진 2인, 진료 분야 5개, 각막지형도 측정
     22,000개 지점, 실제 진료시간)만 쓰고 별도의 신규 수치를 만들지 않는다.
   - 이전(2026-08-27) "주요 진료"를 5카드 그리드 → 대형 피처+텍스트링크로 재구성한 결정(Icon-Top 3
     Feature Cards 회피)은 유지 — 해당 섹션은 grid-frame으로 되돌리지 않는다.

   2026-08-28 4차 리디자인 — "다크 럭셔리 에디토리얼"로 사조 전환 (사용자: "템플릿 느낌 벗어나야해",
   구체 지적: 레이아웃 구조 + 타이포그래피/톤). 원칙(전체 상세는 worklog 참조):
   - "다크는 챕터, 전면이 아니다" — 히어로·진료철학 인용구·검사장비 인덱스(홈 전용)·CTA·푸터·헤더만
     다크(.on-ink). FAQ·비교표·진료 상세 본문(editorial-split)·위치정보는 아이보리 유지 — 전면 다크는
     taxonomy-ai-slop.md의 Permanent Dark Mode(weak)/Low-Contrast Body(strong) 슬롭이자, 이 사이트의
     노안·백내장 타깃(50~70대) 롱폼 콘텐츠 가독성을 해친다.
   - 브랜드 hex(--c-brand*)는 값 그대로 — 톤/구성만 바뀌고 엔티티 브랜드 컬러는 불변.
   - .on-ink 유틸(하단 정의)로 CSS 커스텀 프로퍼티를 스코프 재정의해 다크 섹션을 구현 — 컴포넌트별
     색 규칙을 다시 쓰지 않고 토큰 캐스케이드로 해결(대비값은 WCAG AA 검증 완료, worklog 참조).

   2026-08-28 6차 — 세리프(--font-serif, Noto Serif KR) 시도 전면 롤백. 사용자 피드백:
   "산세리프 세련된 느낌으로 해줘. 요즘 고객들은 촌스러운 디자인이면 병원에 신뢰도조차 가지지 않아."
   h1/h2/인용구/phrase/고스트 넘버/로고/푸터명 전부 Pretendard 산세리프로 원복, 타이트한 자간과
   가벼운 웨이트(200~300 고스트 넘버)로 세련된 인상을 만든다. header.php의 Noto Serif KR 웹폰트
   로드도 제거(불필요한 폰트 요청 감소).

   2026-09-01 8차 — "레퍼런스 수준 정제" 재작업. 배경: 7차(쿨 네이비 전면 전환)를 사용자가
   "더 별로됐다"고 반려 → 원복. 이어진 사용자 교정 브리프("LESS DESIGN, BETTER DESIGN" — 컴포넌트
   종류를 3개 문법(FULL IMAGE / IMAGE+TEXT / TYPOGRAPHIC INDEX)으로 제한, 다크 네이비는 Header·
   Footer·CTA 정도로만 축소)와 사용자가 제시한 레퍼런스(kojungaclinic.co.kr, Playwright로 실제
   렌더 스크린샷 확인)의 실측 신호(거의 흰 배경, 사진이 색을 대신함, 카드/그림자 없이 타이포와
   여백만으로 위계, 사진 위 숫자는 크게 전시하지 않고 작게 오버레이)를 반영. 팔레트 값은 사용자가
   교정 브리프 §29에서 직접 지정한 hex를 그대로 사용(추측 없음). 다크 챕터(.on-ink) 적용 범위를
   축소 — 히어로/헤더/푸터/CTA 외 섹션(정밀검사, 진료철학 등)에는 더 이상 .on-ink를 붙이지 않는다.
   ========================================================================== */

:root {
  /* Base — Cool Blue Editorial Palette (2026-09-01 14차 후속 — 세이지그린 시도 직후 사용자가
     "컬러톤은 시원한 블루톤으로" 재지시. 세리프 포인트/고스트 타이포 등 14차의 다른 결정은
     유지하고 액센트 hue만 그린→블루로 교체. 8차의 탁한 클리니컬 블루(#347FB6)와는 다른,
     더 선명하고 "시원한" 톤으로 새로 잡음 — 캔버스도 웜톤 대신 쿨톤 화이트로. */
  --c-canvas: #F5F8FB;
  --c-bg-soft: #FFFFFF;
  --c-bg-secondary: #E4EEF7;
  --c-text-strong: #16202B;
  --c-text-body: #3E4C59;
  --c-text-muted: #7C8A99;
  --c-border: #DCE6EE;
  --c-border-strong: #BFD0DE;

  /* Brand Accent — 시원한 블루 단일 액센트 */
  --c-brand: #2568C8;
  --c-brand-bright: #3B7FDB;
  --c-brand-soft: #E4EEF7;
  --c-brand-deep: #10233F;
  --c-on-brand: #FFFFFF;
  /* 텍스트/링크용 액센트 — 버튼 등 "채우기" 용도의 --c-brand와 분리해서
     다크 챕터(.on-ink)에서만 더 밝은 값으로 바꿔도 버튼 대비(백색 텍스트)는 그대로 유지되게 함 */
  --c-accent: var(--c-brand);

  /* Typography — 한글 본문/UI는 그대로 Pretendard(가독성, 50~70대 타깃 고려).
     영문/숫자 디스플레이 포인트(고스트 타이포·섹션 영문 라벨·통계 숫자)만 세리프로 —
     레퍼런스가 한글 문장에는 세리프를 쓰지 않는 것과 동일한 절제. */
  --font-kr: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Source Serif 4', 'Noto Serif KR', Georgia, serif;

  /* Spacing scale (4px base) */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-30: 120px; --sp-36: 144px;

  /* Radius */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;

  /* Shadow — 매우 절제됨 */
  --shadow-soft: 0 8px 32px rgba(0,0,0,0.05);

  /* Container */
  --container-max: 1240px;
  --container-text: 760px;
  --container-wide: 1180px;

  /* Motion */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --dur-entry: 450ms;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 9차의 순수 CSS scroll-snap 근사는 13차(2026-09-01) Vertical Swiper 도입 때 폐기됐고,
   그 Swiper 풀페이지 자체도 2026-09-11에 제거됐다(아래 HOMEPAGE 블록 참조) — scroll-snap은
   되살리지 않고 일반 네이티브 스크롤로 둔다. */
body {
  margin: 0;
  font-family: var(--font-kr);
  color: var(--c-text-body);
  background: var(--c-canvas);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* 한글 타이포 규칙: 어절(공백) 단위로만 줄바꿈, 음절 중간 개행 방지 */
  word-break: keep-all;
  /* Overflow Containment 안전망: 혹시 모를 긴 미분리 문자열(URL 등)은 강제 개행 */
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   ON-INK — 다크 챕터 유틸리티. 개별 컴포넌트 CSS를 다시 쓰지 않고 이 스코프
   안의 CSS 커스텀 프로퍼티를 재정의해 하위 컴포넌트(버튼·룰선·텍스트) 색을
   한 번에 뒤집는다. 대비값은 WCAG AA 검증 완료(worklog 2026-08-28 4차 참조).
   히어로(.hero)에도 동일 재정의를 직접 적용 — 전역 셀렉터라 7개 페이지
   마크업을 건드리지 않고도 모든 히어로가 다크 챕터가 된다.
   ========================================================================== */
.on-ink, .hero, .cta-section--strong, .site-header, .mobile-sticky {
  --c-canvas: var(--c-brand-deep);
  --c-bg-soft: rgba(255,255,255,0.05);
  --c-bg-secondary: rgba(255,255,255,0.08);
  --c-text-strong: #FFFFFF;
  --c-text-body: rgba(255,255,255,0.82);
  --c-text-muted: rgba(255,255,255,0.6);
  --c-border: rgba(255,255,255,0.16);
  --c-border-strong: rgba(255,255,255,0.35);
  --c-accent: #6FA8F0;
  background: var(--c-canvas);
  color: var(--c-text-body);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 { margin: 0; color: var(--c-text-strong); font-weight: 600; }

.h1 { font-size: 52px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; }
.h2 { font-size: 40px; line-height: 1.22; letter-spacing: -0.025em; font-weight: 600; }
.h3 { font-size: 27px; line-height: 1.35; font-weight: 600; }
.body-lg { font-size: 22px; line-height: 1.7; color: var(--c-text-body); }
.body { font-size: 18px; line-height: 1.75; color: var(--c-text-body); }
.caption { font-size: 14px; line-height: 1.6; color: var(--c-text-muted); }

@media (max-width: 767px) {
  .h1 { font-size: 38px; line-height: 1.18; }
  .h2 { font-size: 29px; }
  .h3 { font-size: 22px; }
  .body-lg { font-size: 20px; }
  .body { font-size: 17px; }
  .caption { font-size: 13px; }
  .only-desktop { display: none; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.section-number {
  display: block;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-3);
}

/* ── EYEBROW SERIF (2026-09-01 14차) — 짧은 영문 디스플레이 라벨. 한글 문장에는 세리프를
   쓰지 않는다는 원칙(레퍼런스 실측 근거) 아래, 이 라벨만 영문 단어로 세리프 포인트를 준다.
   Korean H2 바로 위에 놓여 "Sincerity / Less is more" 같은 레퍼런스의 인트로 라벨 패턴을
   재현 — 장식 아이콘/글리프 없이 순수 타이포. */
.eyebrow-serif {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.01em;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-3);
}
.on-ink .eyebrow-serif { color: rgba(255,255,255,0.55); }

/* ==========================================================================
   LAYOUT / GRID
   택소노미: .editorial-split(4fr/8fr)은 Asymmetric Two-up [layout], Margin & Gutter [layout]
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;
}
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 48px; }
.container-text { max-width: var(--container-text); margin: 0 auto; padding: 0 48px; }

@media (max-width: 1023px) {
  .container, .container-wide, .container-text { padding: 0 28px; }
}
@media (max-width: 767px) {
  .container, .container-wide, .container-text { padding: 0 20px; }
}

.section { padding: var(--sp-30) 0; }
.section--lg { padding: var(--sp-36) 0; }
.section--sm { padding: var(--sp-20) 0; }
@media (max-width: 767px) {
  .section { padding: var(--sp-16) 0; }
  .section--lg { padding: var(--sp-20) 0; }
  .section--sm { padding: var(--sp-12) 0; }
}

.editorial-split {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--sp-12);
}
@media (max-width: 1023px) {
  .editorial-split { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* 스티키 왼쪽 라벨 변형 — 오른쪽 칼럼 콘텐츠가 길어서 스크롤하는 동안 왼쪽 제목이
   고정돼 있는 편집 패턴(사용자 지시: "스마일라식이란 섹션은 고정, 오른쪽만 내려가게").
   기본 .editorial-split은 그대로 두고 이 모디파이어를 쓰는 섹션에서만 적용 —
   오른쪽 콘텐츠가 짧은 다른 페이지의 editorial-split에는 영향 없음. */
.editorial-split--sticky { align-items: start; }
.editorial-split--sticky > div:first-child { position: sticky; top: 104px; }
@media (max-width: 1023px) {
  .editorial-split--sticky > div:first-child { position: static; top: auto; }
}

.divider { border: none; border-top: 1px solid var(--c-border); margin: var(--sp-8) 0; }

/* 대칭 카드 그리드 섹션 전용 중앙 인트로 — 히어로에는 쓰지 않는다(비대칭 스플릿 유지) */
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-12); }
.section-head .eyebrow { justify-content: center; }
.section-head .h2 { margin-top: var(--sp-3); }
.section-head p { margin-top: var(--sp-3); color: var(--c-text-muted); }
.section-head__rule { display: block; width: 40px; height: 1px; background: var(--c-accent); margin: var(--sp-6) auto 0; }

/* 라벨-제목 사이 짧은 매듭선 — 라벨과 본문의 시각적 구분 */
.rule-sm { display: block; width: 28px; height: 1px; background: var(--c-text-strong); margin: 0 0 var(--sp-3); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* 상시 다크 크롬 — 스크롤 상태와 무관하게 잉크 톤 블러 유지(2026-08-28 4차) */
  background: rgba(16,35,63,0.9);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-border);
  height: 80px;
  display: flex;
  align-items: center;
  transition: box-shadow 200ms var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.22); }
.site-header__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}
.site-logo { font-size: 19px; font-weight: 700; color: var(--c-text-strong); letter-spacing: -0.02em; }
.site-logo small { display: block; font-size: 12px; font-weight: 500; color: var(--c-text-muted); letter-spacing: 0.02em; }

.site-nav { display: flex; align-items: center; gap: var(--sp-8); }
.site-nav a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text-body);
  padding: var(--sp-2) 0;
}
.site-nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--c-brand);
  transition: right 200ms var(--ease-standard);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }
.site-nav a[aria-current="page"] { color: var(--c-accent); }

.nav-toggle { display: none; background: none; border: none; padding: var(--sp-2); }
@media (max-width: 1023px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }

  /* 모션 감사 finding #1 — 이전엔 .site-nav.is-open에 대응하는 표시 규칙이 아예 없어
     햄버거를 눌러도 메뉴가 열리지 않았다. .site-header가 position:sticky라 이미
     absolute 자식의 containing block이 되므로 top:100%로 헤더 바로 아래 붙인다. */
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--sp-2) 48px var(--sp-6);
    background: rgba(16,35,63,0.97);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--c-border);
    opacity: 0;
    transform: translateY(-8px);
    animation: nav-drop-in 200ms var(--ease-standard) forwards;
  }
  .site-nav.is-open a:not(.btn) {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--c-border);
  }
  .site-nav.is-open .btn { width: 100%; margin-top: var(--sp-4); }
}

@keyframes nav-drop-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 54px;
  padding: 0 28px;
  border-radius: var(--r-sm);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 150ms var(--ease-standard), background 150ms;
  min-width: 44px;
}
.btn-primary { background: var(--c-brand); color: var(--c-on-brand); border: 1px solid var(--c-brand); }
.btn-primary:hover { background: var(--c-brand-bright); border-color: var(--c-brand-bright); }
.btn-secondary { background: transparent; color: var(--c-text-strong); border: 1px solid var(--c-border-strong); }
.btn-secondary:hover { border-color: var(--c-text-strong); }
.btn:active { transform: scale(0.98); }

/* ==========================================================================
   HERO — 2026-08-31 12차: 세부페이지(13개)와 홈페이지 히어로를 분리 (사용자 피드백
   "세부페이지 히어로는 메인페이지 히어로와 다르게 베리에이션을 준 디자인이어야해").
   지금까지 .hero/.hero__visual/.hero__content가 공유 클래스라 10~11차에서 홈페이지에
   준 풀블리드+불투명박스+켄번즈가 세부 13개 페이지에도 그대로 번져 있었음 — 이제
   기본값(.hero)은 세부페이지의 절제된 박스형 스플릿(8차 디자인 복귀)이고, 홈페이지
   전용 풀블리드+켄번즈는 .hero--full 모디파이어로 격리한다(index.php에만 부여).
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-16) 0;
}
@media (max-width: 767px) { .hero { padding: var(--sp-12) 0; } }

.breadcrumb { font-size: 13px; color: var(--c-text-muted); margin-bottom: var(--sp-6); }
.breadcrumb a:hover { color: var(--c-accent); }

.hero__lead { margin-top: var(--sp-4); max-width: var(--container-text); }

/* 세부페이지 기본형 — 박스형 스플릿(사진이 오른쪽 칼럼 안에 일반 .img-frame으로 담김,
   풀블리드 아님). .hero 자체가 .on-ink 유틸 그룹에 포함돼 배경이 --c-brand-deep
   다크 네이비라 텍스트가 이 평면 배경 위에서 바로 읽힌다(스크림 불필요).
   2026-08-31 13차: 사진 칼럼이 작아 보인다는 피드백("세부페이지 히어로에도 사진이
   잘 보여야해") — 그리드 비율을 텍스트 쪽에 덜 치우치게 하고 사진 max-width를
   440→560px로 키움. 그래도 풀블리드는 아니라 홈페이지와는 여전히 다른 인상. */
.hero--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-8), 5vw, var(--sp-12));
  align-items: center;
}
@media (max-width: 1023px) { .hero--split { grid-template-columns: 1fr; gap: var(--sp-8); } }

.hero__content { max-width: 520px; }
/* 히어로 텍스트 박스 전용 — 14차 후속: 640px 박스 안에서 "강남역에서 정밀검사와 진료가
   필요할 때," 한 줄이 어중간하게 두 번째 줄로 끊겨(orphan) 보이던 문제. 박스를 조금 넓히고
   본문 크기를 살짝 줄여 의도한 <br> 지점에서만 줄바꿈되게 한다. */
.hero--full .hero__content { max-width: 620px; }

.hero__visual-frame { position: relative; }
.hero__visual .hero__caption { margin-top: var(--sp-3); font-size: 12px; color: var(--c-text-muted); }
.hero__visual { max-width: 560px; margin-left: auto; }
@media (max-width: 1023px) { .hero__visual { max-width: 420px; margin: 0 auto; } }

/* ── .hero--full 모디파이어 (홈페이지 전용) ──────────────────────────────
   2026-09-01 8차: 텍스트 뒤 불투명 네이비 박스를 폐기 — 사용자 교정 브리프 §7
   "텍스트 뒤 네이비 박스 금지, 사진 전체에 bottom-left 방향의 아주 미세한 dark
   gradient만 사용. 사진이 보여야 한다." 텍스트는 좌하단 정렬, 대비는 그라디언트
   스크림으로만 확보. 반복 켄번즈도 폐기 — §9 "사진 1장, scale 1.02→1 약 1.3초,
   반복 없음"에 맞춰 1회성 모션으로 교체. */
.hero--full { min-height: 100svh; display: flex; align-items: flex-end; }
@media (max-width: 767px) { .hero--full { min-height: 100svh; } }

.hero--full .container.hero--split {
  display: flex;
  justify-content: flex-start;
  padding-bottom: var(--sp-16);
}
@media (max-width: 767px) { .hero--full .container.hero--split { padding-bottom: var(--sp-10); } }

/* 14차 후속: 사진 전체를 덮던 다크 그라디언트 스크림을 빼서 병원 사진 자체가 밝고 선명하게
   보이게 하고, 대신 텍스트 블록에만 반투명 다크 패널을 씌워 대비를 확보한다(사진은 밝게,
   글자만 읽히게 — "우중충해 보인다"는 피드백 반영). */
.hero--full .hero__content {
  position: relative; z-index: 1;
  background: rgba(16,35,63,0.8);
  padding: var(--sp-10);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}
@media (max-width: 767px) { .hero--full .hero__content { padding: var(--sp-8) var(--sp-6); } }

/* 히어로 세리프 워터마크(2026-09-01 14차) — 레퍼런스의 대형 고스트 타이포 패턴을 히어로에도
   적용, 사진 위 텍스트 반대편(우상단)에 배치해 실제 카피와 겹치지 않게 한다. */
.hero--full .hero__watermark {
  position: absolute; z-index: 1; top: var(--sp-12); right: var(--sp-12);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(15px, 1.4vw, 19px); letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7); text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  pointer-events: none;
}
@media (max-width: 767px) { .hero--full .hero__watermark { top: var(--sp-8); right: var(--sp-6); } }

.hero--full .hero__visual { position: absolute; inset: 0; z-index: 0; max-width: none; margin: 0; }
.hero--full .hero__visual-frame { width: 100%; height: 100%; overflow: hidden; position: relative; }
/* 14차 후속: 사진 전체를 어둡게 덮던 다크 그라디언트 스크림 제거 — "병원이 우중충해 보인다"는
   피드백. 대비는 이제 위 .hero__content의 다크 패널이 담당(사진 자체는 그대로 밝게 노출). */
.hero--full .hero__visual .img-frame {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0;
  /* 후속 피드백: "너무 푸른끼 돈다" — sepia를 살짝 섞어 웜톤 쪽으로 보정(과하게 주황/빈티지로
     안 가도록 낮은 값만). */
  filter: brightness(1.04) contrast(1.03) saturate(1.05) sepia(0.16);
}
.js .hero--full .hero__visual .img-frame {
  animation: hero-photo-in 1300ms var(--ease-standard) both;
}
@keyframes hero-photo-in {
  from { transform: scale(1.02); }
  to   { transform: scale(1); }
}
.hero--full .hero__visual .hero__caption {
  position: absolute; z-index: 1; right: var(--sp-6); bottom: var(--sp-4);
  margin: 0; font-size: 12px; color: rgba(255,255,255,0.75);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* 히어로 신뢰 배지 — 아이콘 글리프 없이 텍스트 태그만(6차 리디자인에서 아이콘 배지류를
   "촌스러움/세기말 디자인"으로 제거한 결정 유지). 라운드 없이 사각 테두리(--r-* 전부 0 원칙).
   전체 박스 테두리 대신 얇은 상단 룰선 하나로 절제 — H1 바로 아래 캡션처럼 읽히게. */
.hero__badge {
  display: inline-block;
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.3);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.75);
}
.hero__badge strong { font-weight: 600; color: var(--c-text-strong); }

/* 히어로 비주얼 위 증거 카드 — 이미 검증된 사실(hero__metrics와 동일 출처)만 사용,
   새 수치를 만들지 않는다(Stat Banner Row 슬롭 회피). 캡션(우하단)과 겹치지 않게 좌하단 배치.
   2026-08-31: --sp-5가 이 프로젝트 spacing 스케일(1·2·3·4·6·8·10·12·16·20·24·30·36)에
   존재하지 않는 토큰이었음 — var()가 shorthand 안에서 하나라도 못 풀리면 선언 전체가
   무효화되어 padding이 통째로 0이 되는 버그(사용자 피드백: "패딩없이 딱 붙어있어").
   실재하는 토큰으로 교체하고 여백도 넉넉하게. */
.hero__proof {
  position: absolute; z-index: 1; left: var(--sp-6); bottom: var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--c-canvas);
  padding: 20px var(--sp-6);
  box-shadow: var(--shadow-soft);
}
.hero__proof-num { font-size: 30px; font-weight: 700; color: var(--c-brand); letter-spacing: -0.02em; line-height: 1; font-feature-settings: "tnum"; }
.hero__proof-num em { font-style: normal; font-weight: 500; font-size: 0.55em; margin-left: 1px; color: var(--c-text-muted); }
.hero__proof-lab { font-size: 12.5px; color: var(--c-text-muted); line-height: 1.4; }
@media (max-width: 767px) {
  .hero__badge { font-size: 12px; }
  .hero__proof { left: var(--sp-4); bottom: var(--sp-4); padding: var(--sp-4) var(--sp-6); gap: var(--sp-3); }
  .hero__proof-num { font-size: 24px; }
}

/* 히어로가 아닌 다른 다크 챕터(.on-ink, 예: 진료철학) 안에 놓인 프레임형 사진의
   절제된 인화 처리 — 풀블리드 배경용인 위 .hero__visual .img-frame과는 별도 */
.on-ink .img-frame { filter: saturate(0.92) brightness(0.96) contrast(1.02); box-shadow: 0 0 0 1px rgba(255,255,255,0.14); }

/* 히어로 메인 비주얼 메시지 — H1보다 실제 시각적 무게를 갖는 브랜드 카피.
   2026-08-28 6차: 대형 반투명 인용부호 글리프 제거(사용자 피드백 "촌스러움/세기말
   디자인" — 클립아트성 따옴표 아이콘과 볼드+느낌표 조합이 오래된 마케팅 배너처럼
   읽힘). 2026-08-31 7차: 원장 개인 인용구 + 어트리뷰션 조합 자체를 제거(사용자
   피드백 "원장 인용 쓰지 말고 이룸안과에 대한 설명을 해") — 특정 인물의 발언이
   아니라 병원 전체를 설명하는 문장으로 전환하며, "인용"을 표시하던 세로 룰선도
   함께 제거(더 이상 인용이 아니므로). border 없이 여백만으로 무게를 준다. */
/* 브랜드명 서브라인(14차 후속) — H1(SEO 키워드 "강남역안과") 바로 아래 실제 병원명을
   자연스러운 문장 크기로. 배지/라벨처럼 보이지 않게 장식 없이 텍스트만. */
.hero__brand {
  margin-top: var(--sp-3);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--c-text-body);
}
.hero__statement {
  margin-top: var(--sp-6);
  font-size: 27px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-text-strong);
  max-width: 560px;
}
.hero__attribution {
  display: block;
  margin-top: var(--sp-4);
  padding-left: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-muted);
  letter-spacing: 0.01em;
}
.hero__attribution::before { content: "— "; }
.hero__caption { margin-top: var(--sp-6); font-size: 14px; color: var(--c-text-muted); }
@media (max-width: 767px) {
  .hero__statement { font-size: 22px; }
  .hero__attribution { padding-left: 16px; }
}

/* 히어로 하단 CTA(14차 후속, 세로 스택+짧은 구분선으로 재조정) — 네모난 filled 버튼 대신
   심플한 텍스트+화살표 링크 3개(진료상담/의료진 알아보기/오시는 길). 박스·배경 없이
   타이포와 화살표 마이크로 인터랙션만. 각 줄 위에 짧은 룰선(rule-sm과 동일 폭 28px)을 둬
   가로 나열 대신 세로로 쌓았을 때도 항목 사이 구분이 또렷하게. */
.hero__links {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}
.hero__links a {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-2);
}
.hero__links-rule { display: block; width: 28px; height: 1px; background: rgba(255,255,255,0.45); }
.hero__links-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 16px; font-weight: 600;
  color: var(--c-accent);
}
.hero__links-arrow { display: inline-block; transition: transform 200ms var(--ease-standard); }
.hero__links a:hover .hero__links-arrow { transform: translateX(3px); }
.hero__links a:hover .hero__links-rule { background: var(--c-accent); }
@media (max-width: 767px) {
  .hero__links { gap: var(--sp-3); margin-top: var(--sp-8); }
  .hero__links-label { font-size: 15px; }
}

/* 히어로 하단 CTA — 스크림 위 텍스트 블록의 마지막 요소 */
.hero__content .btn { position: relative; z-index: 1; }

/* 히어로 내 의료진 핵심 경력 미니 그리드 — "증거를 디자인의 주인공으로" */
.hero__credentials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-border);
}
.hero__credentials h4 { font-size: 16px; font-weight: 700; color: var(--c-text-strong); margin: 0 0 var(--sp-3); }
.hero__credentials ul { display: flex; flex-direction: column; gap: 6px; }
.hero__credentials li { font-size: 14px; line-height: 1.5; color: var(--c-text-body); }
@media (max-width: 767px) { .hero__credentials { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* 히어로 진료범위 라인 */
.hero__scope { margin-top: var(--sp-8); font-size: 15px; font-weight: 600; color: var(--c-text-strong); }
.hero__scope span { color: var(--c-text-muted); font-weight: 500; }

/* 히어로 지표 밴드 — 페이지 안에서 이미 검증된 사실만 배치(Stat Banner Row 슬롭 회피) */
.hero__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--c-border); }
.hero__metric { padding-right: var(--sp-4); border-right: 1px solid var(--c-border); }
.hero__metric:last-child { border-right: 0; padding-right: 0; }
.hero__metric + .hero__metric { padding-left: var(--sp-4); }
.hero__metric .num { display: block; font-size: clamp(21px, 2.1vw, 27px); font-weight: 300; color: var(--c-text-strong); letter-spacing: -0.02em; line-height: 1; font-feature-settings: "tnum"; }
.hero__metric .num em { font-style: normal; color: var(--c-accent); font-weight: 500; font-size: .6em; margin-left: 2px; }
.hero__metric .lab { display: block; margin-top: var(--sp-2); font-size: 12.5px; color: var(--c-text-muted); line-height: 1.4; }
@media (max-width: 767px) {
  .hero__metrics { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-4); }
  .hero__metric:nth-child(2n) { padding-right: 0; border-right: 0; }
  .hero__metric:nth-child(2n+1) { padding-left: 0; }
}

/* ==========================================================================
   TRUST BAND — 히어로 바로 아래 아이콘형 마케팅 포인트 4개. 외부 아이콘 라이브러리
   (FontAwesome 등) 대신 파비콘·nav-toggle과 동일한 minimal line-SVG 자체 제작
   (stroke-width 1.6, currentColor) — 일반 템플릿 아이콘 느낌 회피. 문구는 전부
   페이지 내 이미 검증된 사실 재사용(Stat Banner Row 슬롭 회피 원칙, hero__metrics와 동일)
   ========================================================================== */
.trust-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-band__item { padding: 0 var(--sp-6); text-align: center; border-right: 1px solid var(--c-border); }
.trust-band__item:last-child { border-right: none; }
.trust-band__icon { display: inline-flex; color: var(--c-accent); margin-bottom: var(--sp-3); }
.trust-band__title { display: block; font-size: 17px; font-weight: 700; color: var(--c-text-strong); letter-spacing: -0.01em; }
.trust-band__label { display: block; margin-top: 4px; font-size: 13px; color: var(--c-text-muted); line-height: 1.4; }
@media (max-width: 767px) {
  .trust-band { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-8); }
  .trust-band__item:nth-child(2n) { border-right: none; }
}

/* ==========================================================================
   PHILOSOPHY (진료철학 — Large Typography + Whitespace, 카드 아님)
   택소노미: Macro/Micro Whitespace [layout] + Scale Contrast [layout] (Icon-Top 3 Feature Cards 슬롭 회피)
   ========================================================================== */
/* ── PHILOSOPHY BACKGROUND (2026-09-11 후속) — 눈 클로즈업 사진을 이 씬 배경으로 깐다
   (원래 바로 아래 있던 #s-eye 풀블리드 패럴렉스 씬은 내용이 겹쳐 통째로 제거되고 이
   배경 하나로 합쳐짐). 실제 <img> 태그 대신 background-image로 처리하는 이유: .scene은
   display:flex(기본 row 방향)라 자식을 하나 더 추가하면 텍스트와 가로로 나란히 배치돼버린다
   — 배경 레이어는 DOM 자식이 아니어야 안전하다. 캔버스색 그라디언트를 사진 위에 겹쳐
   흐리게 만든다(opacity를 쓰면 텍스트 자식까지 같이 흐려짐). rgba 값은 --c-canvas
   (#F5F8FB)와 동일 톤 — 팔레트가 바뀌면 같이 맞출 것. 2026-09-11 후속: 사용자가 "더
   진하게" 요청 — 알파를 0.92→0.72로 낮춰 사진이 더 뚜렷하게 보이게 함(텍스트는 여전히
   진한 --c-text-strong이라 대비 충분, 가독성 문제 없음).
   */
.philosophy-bg {
  background-image: linear-gradient(rgba(245, 248, 251, 0.72), rgba(245, 248, 251, 0.72)), url('/images/img_smile_lasik_20.png');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

.philosophy__tag { display: block; font-size: 13px; letter-spacing: 0.12em; color: var(--c-accent); font-weight: 700; margin-bottom: var(--sp-3); }
.philosophy__statement {
  font-size: 32px;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-text-strong);
}
.philosophy__statement + .philosophy__tag { margin-top: var(--sp-12); }
@media (max-width: 767px) { .philosophy__statement { font-size: 23px; } .philosophy__statement + .philosophy__tag { margin-top: var(--sp-10); } }

/* 진료 원칙을 뒷받침하는 근거 3개 — 문장 하나로 끝나 "텅 빈" 인상을 주던 것을 보완.
   전부 사이트 내 다른 곳(히어로 인용구·주요 진료 인트로)에서 이미 검증된 문장 재사용 */
.philosophy__pillars { margin-top: var(--sp-8); display: flex; flex-direction: column; }
.philosophy__pillars li { padding: var(--sp-4) 0; border-top: 1px solid var(--c-border); font-size: 16px; line-height: 1.6; color: var(--c-text-body); }
.philosophy__pillars li:first-child { border-top: none; padding-top: 0; }
.philosophy__pillars strong { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 700; color: var(--c-text-strong); }

/* ==========================================================================
   DOCTOR FEATURE (에디토리얼 포트레이트 — 화면의 40~60%를 쓰는 대형 의료진 소개)
   택소노미: Alternating (Zig-zag) Rows [layout] + Asymmetric Two-up [layout]
   ========================================================================== */
/* 2026-09-01 12차 — 레퍼런스(Dr. Ko Jung A 슬라이드) 대비 "칸에 맞춰 넣은 느낌" 피드백 반영.
   문제 진단: ① 사진 컬럼이 텍스트와 동일한 1fr이라 인물이 화면을 압도하지 못함, ② 고스트
   워터마크가 콘텐츠 블록 바로 위(-0.28em)에 딱 붙어 실제 제목 글자와 겹쳐 "배경 텍스처"가
   아니라 "글자 위 글자 사고"처럼 보임. 레퍼런스는 고스트 타이포가 인물 반대편(여백)에 크게
   깔리고 실제 이름·경력과는 자리가 겹치지 않는다 — 그 구조를 그대로 따른다: 고스트를
   .doctor-feature__content의 ::before가 아니라 .doctor-feature 전체의 자식으로 옮기고,
   행 전체 세로 중앙에 훨씬 크게, 사진 반대쪽 가장자리로 붙여 텍스트와 자리가 겹치지 않게 한다. */
.doctor-feature { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-16); align-items: center; overflow: hidden; }
.doctor-feature + .doctor-feature { margin-top: var(--sp-30); }
.doctor-feature__photo { order: 1; position: relative; z-index: 1; }
/* 누끼 컷아웃이 배경색 위에 그냥 "붙여넣은" 것처럼 붕 떠 보이던 문제 — 그림자 하나로
   바닥에 서 있는 느낌(grounding)을 준다. 인물 사진 자체를 다시 찍거나 리터칭할 수는
   없으니 CSS로 보완하는 절제된 장치(장식 아님, 사실적 단서). */
.doctor-feature__photo::after {
  content: "";
  position: absolute; left: 50%; bottom: 9%;
  width: 58%; height: 6%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(21,25,29,0.14) 0%, rgba(21,25,29,0) 75%);
  z-index: -1;
  pointer-events: none;
}
.doctor-feature__content { order: 2; position: relative; z-index: 1; }
.doctor-feature--reverse { grid-template-columns: 5fr 7fr; }
.doctor-feature--reverse .doctor-feature__photo { order: 2; }
.doctor-feature--reverse .doctor-feature__content { order: 1; }
@media (max-width: 1023px) {
  .doctor-feature, .doctor-feature--reverse { grid-template-columns: 1fr; gap: var(--sp-8); }
  .doctor-feature .doctor-feature__photo, .doctor-feature--reverse .doctor-feature__photo { order: -1; }
}
.doctor-feature__label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--sp-3); }

/* 고스트 워터마크 — .doctor-feature 행 전체 기준 세로 중앙, 텍스트 콘텐츠 컬럼 쪽 가장자리에
   크게 깔아 실제 제목 글자 뒤로 은은하게 비친다(사진은 불투명이라 사진 쪽에 두면 완전히
   가려져 안 보인다 — 기본형은 사진이 order:1/왼쪽·텍스트가 order:2/오른쪽이라 right:0,
   reverse는 반대라 left:0. 이전엔 사진 쪽에 붙어 있어 항상 안 보이는 상태였다).
   2026-09-01 14차: 레퍼런스의 "KO / JUNG A / CLINIC" 세로 적층 세리프 고스트를 근거로
   한글 브랜드명 대신 영문 세리프 적층으로 전환(font-display, index.php에서 줄바꿈 마크업). */
.doctor-feature__ghost {
  position: absolute; z-index: 0;
  top: 50%; right: 0;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(64px, 8.4vw, 132px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.98;
  color: var(--c-text-strong);
  opacity: 0.07;
  white-space: nowrap;
  pointer-events: none;
  text-align: right;
}
.doctor-feature--reverse .doctor-feature__ghost { right: auto; left: 0; text-align: left; }
/* 모바일/태블릿 — 예전엔 아예 display:none으로 꺼뒀는데("모바일에 디자인 요소가 하나도
   없어 보인다" 피드백) 이제 다시 켠다. 단 스택 레이아웃에서는 top:50%(컨테이너 전체 기준
   세로 중앙)로 두면 사진(order:-1, 위쪽) 영역과 겹쳐 사진에 완전히 가려 안 보이는 문제가
   재발하므로, 컨테이너 하단(콘텐츠가 끝나는 지점)에 고정해 항상 텍스트 영역 쪽에 걸치게
   한다. */
@media (max-width: 1023px) {
  .doctor-feature__ghost {
    top: auto; bottom: var(--sp-6); right: var(--sp-2);
    transform: none;
    font-size: clamp(40px, 14vw, 72px);
  }
  .doctor-feature--reverse .doctor-feature__ghost { left: var(--sp-2); right: auto; }
}
.doctor-feature__quote {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-accent);
  margin: var(--sp-3) 0 var(--sp-8);
}
@media (max-width: 767px) { .doctor-feature__quote { font-size: 21px; } }
/* 세부페이지(예: cataract-surgery)의 짧은 신뢰 배지 목록에서 계속 쓰임 — 14차 후속에서
   박스/테두리 장식을 없애 홈페이지 .doctor-feature__credentials와 같은 무장식 톤으로 정리. */
.doctor-feature__highlights { display: flex; flex-direction: column; gap: var(--sp-2); }
.doctor-feature__highlights li { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--c-text-strong); }

/* 2026-09-01 14차 후속 — 사용자가 레퍼런스(kojungaclinic.co.kr) 대비 "더 에디토리얼하고
   세련된 무드"를 요청하며, 접었다 펼치는 <details> 대신 전체 경력을 항상 펼쳐서 보여달라고
   지시. 파란 테두리 박스(.doctor-feature__highlights, border-left)로 강조하던 방식은
   "코퍼레이트 카드" 느낌이 강해 폐기 — 사이트 다른 곳(FAQ·hours-typo·link-index)에 이미
   쓰는 무장식 타이포그래픽 인덱스 문법을 그대로 재사용해 하나의 흐르는 리스트로 통일한다.
   핵심 경력(처음 3개)만 크고 굵게, 나머지는 옅고 작게 — 위계는 색/크기만으로, 박스·테두리
   색은 쓰지 않는다. <details>/<summary> 토글은 markup에서 완전히 제거됨. */
.doctor-feature__credentials { display: flex; flex-direction: column; margin-bottom: var(--sp-8); }
.doctor-feature__credentials li {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--c-border);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-text-muted);
}
.doctor-feature__credentials li:first-child { border-top: none; }
.doctor-feature__credentials li:nth-child(-n+3) {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-text-strong);
  padding: var(--sp-2) 0;
}
@media (max-width: 767px) {
  .doctor-feature__credentials li:nth-child(-n+3) { font-size: 18px; }
}

/* ==========================================================================
   FEATURE SECTION (주요 진료 — 대형 에디토리얼 피처, 좌우 교차 배치)
   택소노미: 50-50 Block [layout] + Alternating (Zig-zag) Rows [layout] (Fixed Section Stack 슬롭 회피)
   ========================================================================== */
.feature-section { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-16); align-items: center; }
.feature-section + .feature-section { margin-top: var(--sp-24); }
.feature-section__media { order: 1; }
.feature-section__content { order: 2; }
.feature-section--reverse .feature-section__media { order: 2; }
.feature-section--reverse .feature-section__content { order: 1; }
@media (max-width: 1023px) {
  .feature-section { grid-template-columns: 1fr; gap: var(--sp-8); }
  .feature-section .feature-section__media, .feature-section--reverse .feature-section__media { order: -1; }
}
.feature-section__media img { aspect-ratio: 5 / 4; }
.feature-section__eyebrow { display: block; font-size: 13px; letter-spacing: 0.12em; color: var(--c-text-muted); margin-bottom: var(--sp-3); }
.feature-section__rule { display: block; width: 28px; height: 1px; background: var(--c-brand); margin: 0 0 var(--sp-4); }
.feature-section__link { display: inline-block; margin-top: var(--sp-6); font-size: 16px; font-weight: 700; color: var(--c-accent); }

/* ==========================================================================
   LINK LIST 텍스트 (link-list__item 그리드용 타이틀/메타)
   ========================================================================== */
.link-list__title { font-size: 19px; font-weight: 600; color: var(--c-text-strong); transition: color 200ms; min-width: 0; }
.link-list__meta { font-size: 14px; color: var(--c-text-muted); flex-shrink: 0; }

/* ==========================================================================
   IMAGE PLACEHOLDER (실제 사진 확보 전 자리표시자 — 가짜 스톡/AI 이미지 금지)
   ========================================================================== */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-secondary);
  border: 1px dashed var(--c-border-strong);
  color: var(--c-text-muted);
  font-size: 14px;
  text-align: center;
  padding: var(--sp-6);
  aspect-ratio: var(--ph-ratio, 4 / 3);
  border-radius: var(--r-sm);
}

/* ==========================================================================
   PHOTO (실사진 표시 — img-placeholder와 동일 비율 변수 공유)
   ========================================================================== */
.img-frame {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: var(--ph-ratio, 4 / 3);
  border-radius: var(--r-sm);
  background: var(--c-bg-secondary);
}
.img-frame--natural { aspect-ratio: auto; }
.img-frame--circle { border-radius: 50%; }
.img-frame--top { object-position: center top; }

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.photo-grid figcaption { margin-top: var(--sp-2); }
@media (max-width: 767px) { .photo-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } }

/* ==========================================================================
   SERVICE CARD (진료분야 그리드 — 홈/세부페이지 공용)
   택소노미: Uniform Card Grid [layout] (Icon-Top 3 Feature Cards로 안 굳게 photo+link만 유지)
   ========================================================================== */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
@media (max-width: 1023px) { .service-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (max-width: 767px) { .service-grid { grid-template-columns: 1fr; } }

.service-card {
  display: block;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow 200ms var(--ease-standard), transform 200ms var(--ease-standard), border-color 200ms;
}
.service-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-3px); border-color: var(--c-border-strong); }
.service-card__img { aspect-ratio: 4 / 3; }
.service-card__body { padding: var(--sp-6); }
.service-card__num { font-size: 13px; letter-spacing: 0.12em; color: var(--c-text-muted); display: block; margin-bottom: var(--sp-2); }
.service-card__link { display: inline-block; margin-top: var(--sp-3); font-size: 15px; font-weight: 600; color: var(--c-accent); }

/* ==========================================================================
   MEDICAL LIST (아이콘 없는 넘버 리스트)
   ========================================================================== */
.medical-list__item { padding: var(--sp-6) 0; border-top: 1px solid var(--c-border); }
.medical-list__item:first-child { border-top: none; }
.medical-list__num { font-size: 13px; letter-spacing: 0.12em; color: var(--c-text-muted); display: block; margin-bottom: var(--sp-2); }

/* ==========================================================================
   GRID FRAME — Exposed Grid Framing [layout] (planning/taxonomy-layout.md §23)
   카드 사이 gap 없이 공유 괘선으로 짠 격자. 배경의 대형 고스트 넘버는 항목 색인용
   (Numbered 1-2-3 Steps 슬롭과 달리 실제 순서를 주장하지 않는 병렬 목록에만 사용)
   ========================================================================== */
.grid-frame {
  display: grid;
  gap: 0;
  counter-reset: gf;
  border-top: 1px solid var(--c-border);
  border-left: 1px solid var(--c-border);
}
.grid-frame--2 { grid-template-columns: repeat(2, 1fr); }
.grid-frame--3 { grid-template-columns: repeat(3, 1fr); }
.grid-frame--4 { grid-template-columns: repeat(4, 1fr); }
.grid-frame--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1023px) {
  .grid-frame--3, .grid-frame--4, .grid-frame--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-frame--2, .grid-frame--3, .grid-frame--4, .grid-frame--5 { grid-template-columns: 1fr; }
}

.grid-frame__cell {
  position: relative;
  display: block;
  background: var(--c-canvas);
  padding: var(--sp-10) var(--sp-6) var(--sp-8);
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
  transition: background 200ms var(--ease-standard);
}
.grid-frame__cell::before {
  counter-increment: gf;
  content: counter(gf, decimal-leading-zero);
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 200;
  color: var(--c-border);
  letter-spacing: -0.04em;
  line-height: 1;
  pointer-events: none;
  transition: color 200ms var(--ease-standard);
  z-index: 0;
}
.grid-frame__cell > * { position: relative; z-index: 1; }
.grid-frame__cell:hover { background: var(--c-bg-soft); }
.grid-frame__cell:hover::before { color: var(--c-brand-soft); }
.grid-frame__label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--sp-10); }
.grid-frame__cell h3, .grid-frame__cell .h3 { margin: 0 0 var(--sp-2); font-size: 19px; letter-spacing: -0.01em; }
.grid-frame__cell p { font-size: 14px; color: var(--c-text-muted); line-height: 1.7; max-width: 30ch; margin: 0; }
.grid-frame__more { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-4); font-size: 13px; font-weight: 700; color: var(--c-accent); }
@media (max-width: 767px) {
  .grid-frame__cell { padding: var(--sp-8) var(--sp-4) var(--sp-6); }
  .grid-frame__label { margin-bottom: var(--sp-6); }
}

/* ==========================================================================
   PROCESS / TIMELINE
   ========================================================================== */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); }
.process__step { padding-top: var(--sp-6); border-top: 2px solid var(--c-border); }
.process__num { font-size: 52px; font-weight: 200; color: var(--c-border-strong); line-height: 1; }
@media (max-width: 767px) {
  .process { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ==========================================================================
   STEPS — .process의 좁은 컬럼용 세로 버전. editorial-split 콘텐츠 컬럼처럼
   폭이 좁고 문장 길이의 절차 설명이 있는 곳에 사용(실제 순서가 있는 절차에만 —
   Numbered 1-2-3 Steps 슬롭 회피 원칙은 .process와 동일하게 적용)
   ========================================================================== */
.steps { display: flex; flex-direction: column; gap: var(--sp-4); counter-reset: steps; margin-bottom: var(--sp-4); }
.steps__item { display: flex; gap: var(--sp-4); align-items: baseline; }
.steps__item::before {
  counter-increment: steps;
  content: counter(steps, decimal-leading-zero);
  flex: none;
  width: 32px;
  font-size: 19px;
  font-weight: 700;
  color: var(--c-border-strong);
  font-feature-settings: "tnum";
}
.steps__item p { margin: 0; }

/* ==========================================================================
   FACT GRID — 순서 없는 병렬 사실(소요시간 등)을 스캔하기 쉬운 카드형으로 표시.
   .steps(절차)와 시각적으로 확실히 구분되는 다른 컴포넌트를 써서 "같은 종류로
   보이는 서로 다른 클러스터" 문제를 피한다.
   ========================================================================== */
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-4); }
.fact-grid__item { padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.fact-grid__num { display: block; font-size: 21px; font-weight: 700; color: var(--c-text-strong); letter-spacing: -0.01em; font-feature-settings: "tnum"; }
.fact-grid__label { display: block; margin-top: 4px; font-size: 13px; color: var(--c-text-muted); line-height: 1.5; }

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */
.compare-table th, .compare-table td {
  padding: var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  font-size: 16px;
}
.compare-table thead th { background: var(--c-bg-soft); color: var(--c-text-strong); font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 80px;
  padding: var(--sp-4) 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 18px;
  font-weight: 500;
  color: var(--c-text-strong);
}
.faq-item__icon { flex: none; font-size: 20px; color: var(--c-accent); transition: transform 260ms var(--ease-standard); }
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }
/* grid-template-rows 0fr→1fr 아코디언(모션 감사 finding #2) — 높이를 몰라도 되고, width/height를
   직접 애니메이션하지 않는다. overflow:hidden은 반드시 grid 아이템(inner)에 있어야 padding이
   0fr에서 같이 접힌다(container 자체에 padding을 두면 접히지 않고 새어나옴). 접힘 자체는 기존과
   동일하게 .js 스코프 — JS가 없으면 항상 펼쳐진 상태로 폴백(no-JS에서 hidden도 안 걸리므로). */
.faq-item__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 260ms var(--ease-standard); }
/* [hidden]은 author 규칙(.faq-item__a{display:grid})이 브라우저 기본 [hidden]{display:none}보다
   항상 우선하는 cascade 규칙 때문에 무시됐었다 — JS가 hidden 속성을 걸어도 grid로 계속 렌더링되어
   전체 FAQ 답변이 항상 펼쳐진 채로 보이는 버그였다. attribute selector로 specificity를 올려 되살림. */
.faq-item__a[hidden] { display: none; }
.js .faq-item__a { grid-template-rows: 0fr; }
.js .faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a-inner { overflow: hidden; padding: 0 0 var(--sp-6); font-size: 16px; line-height: 1.75; color: var(--c-text-body); }

/* ==========================================================================
   NOTICE / LEGAL COPY
   ========================================================================== */
.notice-box {
  background: var(--c-bg-soft);
  border-radius: var(--r-sm);
  padding: var(--sp-6);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text-body);
}

/* ── TRUST NOTE — 세부페이지에서 반복되는 "강남이룸안과는 ~합니다" 차별화/원칙 문장을
   파란 강조 박스로. 사각 유지(--r-sm 그대로 0), 배경은 브랜드 소프트 틴트 + 왼쪽 굵은
   브랜드 블루 바로 강조. */
.trust-note {
  background: var(--c-brand-soft);
  border-left: 3px solid var(--c-brand);
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-6);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--c-text-strong);
}
.legal-copy { font-size: 15px; line-height: 1.75; color: var(--c-text-body); }

/* ==========================================================================
   DOCTOR SECTION
   ========================================================================== */
.doctor-card { display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-10); align-items: start; }
@media (max-width: 767px) { .doctor-card { grid-template-columns: 1fr; } }

/* ==========================================================================
   RELATED / LINK LIST
   ========================================================================== */
.link-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-6) 0; border-top: 1px solid var(--c-border); }
.link-list__item:first-child { border-top: none; }
.link-list__item:hover .link-list__title { color: var(--c-accent); }

/* ==========================================================================
   CTA SECTION — 페이지에서 가장 강한 대비를 주는 최종 전환 지점.
   2026-08-28 4차에서 그라디언트 블롭을 대형 워터마크 글리프(.ink-mark)로 대체했으나,
   6차에서 그마저 제거 — 사용자 피드백 "촌스러움/세기말 디자인"은 아이콘성 장식으로
   빈 공간을 채우려는 습관 자체를 지적한 것으로 판단. 진짜 절제된 럭셔리는 장식 없이
   여백 + 타이포만으로 성립한다는 원칙으로 되돌림(.on-ink 토큰 캐스케이드만 사용).
   ========================================================================== */
.cta-section { text-align: left; }
.cta-section .btn { margin-top: var(--sp-8); }
.cta-section--strong { position: relative; }
/* 2026-09-01: CTA(120px)+푸터(80px) 패딩이 겹쳐 버튼과 사업자정보 사이에 죽은 공간(~200px)이
   생기던 문제 — CTA 전용 패딩으로 압축(전 페이지 공용 파샬이라 서브페이지에도 함께 적용됨,
   과함이 부족함보다 나쁘다는 원칙에 부합하는 보편 개선). */
.section.cta-section--strong { padding: var(--sp-20) 0; }

/* ==========================================================================
   SKIP LINK — 키보드/스크린리더 사용자가 헤더 내비게이션을 건너뛸 수 있도록
   ========================================================================== */
.skip-link {
  position: absolute; left: 0; top: -100%;
  z-index: 200;
  background: var(--c-brand); color: #fff;
  padding: var(--sp-3) var(--sp-6);
  font-size: 15px; font-weight: 600;
  transition: top 150ms var(--ease-standard);
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* CTA(.cta-section--strong)와 배경 토큰이 같아(둘 다 --c-brand-deep) 경계 없이 한 덩어리로
   붙어 보이던 문제 — 푸터만 한 톤 더 어둡게 낮추고 상단에 얇은 구분선을 둬 CTA→푸터 전환을
   시각적으로 분리한다(글리프/그라디언트 없이 색 톤 + 선만으로). */
.site-footer { background: #0B1A2E; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.82); padding: var(--sp-16) 0 var(--sp-8); }
.site-footer a:hover { color: #fff; }
.site-footer__name { color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--sp-4); }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-10); }
@media (max-width: 767px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.site-footer__nav a { display: block; padding: var(--sp-1) 0; font-size: 15px; }
.site-footer__label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: var(--sp-3); }
.site-footer__bottom { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,0.14); font-size: 13px; color: rgba(255,255,255,0.72); }

/* ==========================================================================
   MOTION — 다양한 리빌 스크롤 인터랙션 (JS는 .reveal에 is-visible 토글만 담당,
   방향/속도는 모두 CSS 모디파이어로 조합)
   택소노미: Scroll-triggered Reveal [layout]의 GSAP 없는 vanilla 구현체
   (ScrollReveal/StaggeredReveal [design]과 동등 효과, 순수 IntersectionObserver + CSS Transition)
   AI 슬롭 주의: Generic Fade-In on Scroll(전 요소 동일 타이밍) 방지 위해 방향(left/right/scale)·
   딜레이(d1~d5)를 콘텐츠 맥락에 맞춰 다르게 조합할 것 — 기계적으로 전부 같은 값 쓰지 말 것
   ========================================================================== */
/* 기본값은 항상 보이는 상태 — JS가 실패/차단되어도 콘텐츠는 그대로 노출된다.
   애니메이션은 <html class="js">가 붙었을 때만 적용(진행적 향상). */
.reveal { opacity: 1; transform: none; }

.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity var(--dur-entry) var(--ease-standard), transform var(--dur-entry) var(--ease-standard); }

.js .reveal--left { transform: translateX(-28px); }
.js .reveal--left.is-visible { transform: translateX(0); }
.js .reveal--right { transform: translateX(28px); }
.js .reveal--right.is-visible { transform: translateX(0); }
.js .reveal--scale { transform: scale(0.94); }
.js .reveal--scale.is-visible { transform: scale(1); }

.reveal-d1 { transition-delay: 90ms; }
.reveal-d2 { transition-delay: 180ms; }
.reveal-d3 { transition-delay: 270ms; }
.reveal-d4 { transition-delay: 360ms; }
.reveal-d5 { transition-delay: 450ms; }

/* 밑줄이 좌→우로 자라나는 리빌 — section-number 등 짧은 라벨에 사용
   기본은 완성된 상태(width:40px)로 노출, .js에서만 0에서 자라난다 */
.reveal-line { position: relative; display: inline-block; }
.reveal-line::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 40px;
  background: var(--c-brand);
}
.js .reveal-line::after { width: 0; transition: width 500ms var(--ease-standard) 120ms; }
.js .reveal-line.is-visible::after { width: 40px; }

/* ==========================================================================
   PHRASE (의미단위 줄바꿈 강조 문구 — 줄글 대신 짧은 임팩트 문장에 사용)
   ========================================================================== */
.phrase {
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--c-text-strong);
}
.phrase strong { color: var(--c-accent); font-weight: 700; }
@media (max-width: 767px) { .phrase { font-size: 22px; } }

/* ==========================================================================
   MOBILE STICKY CONTACT
   ========================================================================== */
.mobile-sticky {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--c-canvas);
  border-top: 1px solid var(--c-border);
  height: 60px;
}
.mobile-sticky__inner { display: grid; grid-template-columns: 1fr; height: 100%; }
.mobile-sticky a { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: 15px; font-weight: 600; background: var(--c-brand); color: #fff; }
@media (max-width: 767px) { .mobile-sticky { display: block; } body { padding-bottom: 60px; } }

/* ==========================================================================
   HOMEPAGE — 씬(.scene)은 일반 세로 스택(네이티브 스크롤)이다. 13~14차(2026-09-01)에
   Vertical Full-page Swiper(휠 캡처)를 도입했었으나, 2026-09-11 신고로 완전히 제거했다 —
   마지막 씬(#location, "Visit Us")에서 휠 입력이 튀며 씬이 휘리릭 넘어가 최하단으로
   스크롤이 튕겨버려 내용을 볼 수 없는 문제가 있었다. 씬 등장 시 제목→본문→CTA 순차
   페이드인은 assets/js/scroll-motion.js(GSAP+ScrollTrigger)가 계속 담당한다. */

/* ── QUICK MENU — 데스크톱 전용(≤1023px는 기존 .mobile-sticky 전화바 유지). 기본은 점
   하나, 클릭 시 전화·위치·TOP 3개로 펼쳐진다(design.md §62-66, 카카오 채널은 프로젝트
   컨벤션상 미보유라 제외 — no_webform_db 메모리 참조). Bounce 없이 opacity+Y8px만. */
.quick-menu { position: fixed; z-index: 85; right: var(--sp-6); bottom: var(--sp-8); display: none; }
@media (min-width: 1024px) { .quick-menu { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--sp-3); } }
.quick-menu__toggle {
  width: 44px; height: 44px; border-radius: 50%; position: relative;
  background: var(--c-canvas); border: 1px solid var(--c-border-strong); cursor: pointer;
  transition: border-color 200ms var(--ease-standard);
}
.quick-menu__toggle::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand);
}
.quick-menu__toggle:hover, .quick-menu.is-open .quick-menu__toggle { border-color: var(--c-brand); }
.quick-menu__list {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 200ms var(--ease-standard), transform 200ms var(--ease-standard);
}
.quick-menu.is-open .quick-menu__list { opacity: 1; transform: translateY(0); pointer-events: auto; }
.quick-menu__list a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 var(--sp-6);
  background: var(--c-brand-deep); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.16);
  transition: background 150ms var(--ease-standard);
}
.quick-menu__list a:hover { background: var(--c-brand); }

/* ── SLIDE DOTS — 우측 세로 진행 인디케이터(데스크톱 전용). 클릭은 일반 앵커 점프이고,
   활성 점은 assets/js/scroll-motion.js의 IntersectionObserver가 스크롤 위치에 따라
   동기화한다. */
.slide-dots {
  position: fixed; z-index: 80; right: var(--sp-6); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.slide-dots a {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-border-strong);
  transition: background 200ms var(--ease-standard), transform 200ms var(--ease-standard);
}
.slide-dots a:hover { background: var(--c-brand); }
.slide-dots a.is-active { background: var(--c-brand); transform: scale(1.35); }
@media (max-width: 1279px) { .slide-dots { display: none; } }

/* ── TREATMENT EXPLORER — 주요 진료 3개 zig-zag 대신 좌측 리스트 + 우측 사진
   1개 영역으로 압축(TYPE B의 인터랙티브 변형). 클릭 시 사진/설명만 전환 —
   새 카드나 그리드를 만들지 않는다. .js 없으면 3개 패널이 그냥 세로로 쌓여
   보인다(폴백, SEO 텍스트 그대로 노출).
   14차 후속 — 항목마다 설명 문구 길이가 달라 패널 전환 시 높이가 들쑥날쑥하고,
   display:none↔block 즉시 전환이라 뚝뚝 끊겨 보인다는 피드백. 모든 패널을 같은 grid
   셀에 겹쳐 쌓아(grid-area) 컨테이너 높이가 항상 "가장 긴 패널" 기준으로 고정되게 하고,
   전환은 display 토글 대신 opacity 크로스페이드로 바꿈. 설명 문구도 최소 2줄 높이를
   예약해 "자세히 보기" 링크 위치가 패널마다 흔들리지 않게 한다. 여백도 전반적으로 더
   넉넉하게. */
.explorer__grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-16); align-items: center; }
@media (max-width: 1023px) { .explorer__grid { grid-template-columns: 1fr; gap: var(--sp-10); } }

.explorer__list { display: flex; flex-direction: column; }
.explorer__item {
  display: flex; align-items: baseline; gap: var(--sp-4); width: 100%; text-align: left;
  background: none; border: none; border-top: 1px solid var(--c-border);
  padding: var(--sp-6) 0 var(--sp-6) var(--sp-4);
  margin-left: calc(-1 * var(--sp-4));
  border-left: 2px solid transparent;
  font-size: 17px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--c-text-muted);
  transition: color 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
}
.explorer__list .explorer__item:first-child { border-top: none; }
.explorer__item-num { flex: none; font-size: 40px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.22; color: var(--c-text-muted); font-feature-settings: "tnum"; }
.js .explorer__item.is-active { color: var(--c-text-strong); border-left-color: var(--c-brand); }
.js .explorer__item.is-active .explorer__item-num { color: var(--c-accent); }
@media (hover: hover) and (pointer: fine) { .explorer__item:hover { color: var(--c-text-strong); } }

.explorer__media { position: relative; }
.explorer__panel { padding-top: var(--sp-8); border-top: 1px solid var(--c-border); }
.explorer__panel:first-child { padding-top: 0; border-top: none; }
/* .js 모드 — 모든 패널을 같은 grid 셀(1/1)에 겹쳐 쌓는다. grid 트랙 높이는 자동으로
   그 셀에 겹친 항목 중 가장 큰 것 기준으로 고정되므로, 어떤 패널이 활성이든 .explorer__media
   전체 높이가 흔들리지 않는다(패널마다 사진+제목+설명 길이가 달라도 동일). 전환은
   display 토글이 아니라 opacity만 바꿔서 부드럽게 겹쳐 사라지고 나타난다. */
.js .explorer__media { display: grid; }
.js .explorer__panel {
  grid-area: 1 / 1;
  padding-top: 0; border-top: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms var(--ease-standard);
}
.js .explorer__panel.is-active { opacity: 1; pointer-events: auto; }
.explorer__panel-media { position: relative; }
.explorer__panel .img-frame { aspect-ratio: 16 / 10; }
.explorer__panel-num {
  position: absolute; z-index: 1; left: var(--sp-6); bottom: var(--sp-4);
  font-size: clamp(40px, 4.6vw, 60px); font-weight: 200; letter-spacing: -0.02em; line-height: 1;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.35);
  font-feature-settings: "tnum";
}
.explorer__desc {
  margin-top: var(--sp-6);
  font-size: 17px; line-height: 1.7; max-width: 52ch;
  min-height: calc(17px * 1.7 * 2); /* 항목마다 1~2줄로 들쭉날쭉해도 항상 2줄 자리를 예약 */
}
/* 14차 후속(레퍼런스 kojungaclinic 카테고리 페이드 슬라이더 참고) — 패널에 제목 추가.
   eyebrow-serif 아래 패널 제목이 크게 오는 흐름이라 상단 margin은 없애고 사진과의 간격만. */
.explorer__panel-title { margin: 0 0 var(--sp-8); }
.explorer__panel-link { display: inline-block; margin-top: var(--sp-8); font-size: 16px; font-weight: 700; color: var(--c-accent); }

/* ── SPACE MARQUEE (2026-09-11 후속, 구 PHOTO COMPOSE 대체) — Clinic Gallery(공간 사진)가
   사진 3장을 세로로 쌓아 씬 높이를 넘기던 것을 낮은 높이 가로 자동 흐름 배너로 교체.
   이미지 세트를 트랙에 두 번 반복해 넣고 -50% translateX로 이음매 없이 무한 루프,
   hover/focus 시 정지(콘텐츠를 읽고 싶을 때). prefers-reduced-motion에서는 애니메이션
   자체를 끈다(트랙이 정적으로 남아 스크롤 없이도 첫 세트는 그대로 보인다). */
/* 2026-09-11 후속(2차) — "사진은 크게, 섹션 높이는 줄여달라" 요청: 섹션 자체의 상하 여백은
   section--sm보다 더 좁힌 전용 패딩(.space-marquee-section)으로 줄이고, 그렇게 아낀 여백을
   사진 크기(260px→380px)로 되돌려준다 — 결과적으로 씬 전체 높이는 이전과 비슷하거나 더
   낮게 유지되면서 사진만 커 보이게 함. */
.space-marquee-section { padding: var(--sp-12) 0; }
@media (max-width: 1023px) { .space-marquee-section { padding: var(--sp-10) 0; } }
.space-marquee { overflow: hidden; margin-top: var(--sp-2); }
.space-marquee__track {
  display: flex;
  gap: var(--sp-6);
  width: max-content;
  animation: space-marquee-scroll 36s linear infinite;
}
.space-marquee:hover .space-marquee__track,
.space-marquee:focus-within .space-marquee__track { animation-play-state: paused; }
.space-marquee__item { flex: 0 0 auto; width: 380px; }
/* 2026-09-11 후속 — 사진 아래 회색 캡션 한 줄이 "대충 붙인" 느낌이라는 피드백. 사이트 다른
   곳(.explorer__item-num, .link-index__num)에서 이미 쓰는 "번호+얇은 상단 구분선" 이름표
   문법을 그대로 재사용 — 새 장식을 만들지 않고 기존 인덱스 표기 패턴과 통일감을 준다. */
.space-marquee__label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border);
}
.space-marquee__label-num { flex: none; font-size: 12px; font-weight: 600; color: var(--c-accent); font-feature-settings: "tnum"; }
.space-marquee__label-text { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--c-text-strong); }
@keyframes space-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .space-marquee__track { animation: none; } }
@media (max-width: 767px) { .space-marquee__item { width: 260px; } }

/* ── LINK INDEX — 진료 전체 목록처럼 카드/사진 없이 얇은 텍스트로만 나열하는 실제 링크 목록.
   .medical-list와 같은 결(넘버+구분선)이지만 <a>가 direct child라 hover 컬러가 필요해
   modifier로 분리. */
.link-index__item {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-top: 1px solid var(--c-border);
  font-size: 18px; font-weight: 600; color: var(--c-text-strong);
  transition: color 200ms var(--ease-standard);
}
.link-index__item:first-child { border-top: none; }
.link-index__item:hover { color: var(--c-accent); }
.link-index__num { flex: none; font-size: 13px; font-weight: 600; color: var(--c-text-muted); font-feature-settings: "tnum"; }

/* ── PRECISION STAT — 정밀검사 수치. 14차 후속: 좌우 그리드(.precision-row)는 Equipment
   섹션이 photo-overlay 패턴으로 바뀌며 더 이상 안 쓰여 제거, 숫자 타이포만 재사용. */
.precision-row__stat { margin-top: var(--sp-6); font-family: var(--font-display); font-size: clamp(40px, 4.6vw, 60px); font-weight: 400; letter-spacing: -0.01em; line-height: 1; color: var(--c-text-strong); font-feature-settings: "tnum"; }
.precision-row__stat em { font-family: var(--font-kr); font-style: normal; font-weight: 500; font-size: .38em; margin-left: 4px; color: var(--c-accent); }

/* ── HOURS TYPOGRAPHIC(TYPE C) — 진료시간을 표 대신 타이포그래픽 스케줄로 */
/* 진료시간·오시는길 아이콘 요약(2026-09-14 후속 — 사용자가 보내준 참고 예시(강남이룸안과
   다른 사이트) 문법으로 교체: 원형 아이콘 배지 + 2x2, 항목당 1~2줄로 간결하게). */
.visit-info { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-6); }
@media (max-width: 639px) { .visit-info { grid-template-columns: 1fr; } }
.visit-info__item { display: flex; align-items: flex-start; gap: var(--sp-4); }
.visit-info__icon { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--c-brand-soft); display: flex; align-items: center; justify-content: center; color: var(--c-brand); }
.visit-info__title { font-size: 16px; font-weight: 700; color: var(--c-text-strong); margin-bottom: var(--sp-2); }
.visit-info__detail { font-size: 15px; line-height: 1.6; color: var(--c-text-body); }
.visit-info__map-link { display: flex; margin: var(--sp-8) auto 0; width: fit-content; }

.hours-typo { display: flex; flex-direction: column; }
.hours-typo__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--c-border); }
.hours-typo__row:first-child { border-top: none; }
.hours-typo__label { font-size: 16px; font-weight: 600; color: var(--c-text-strong); }
.hours-typo__time { font-size: 19px; color: var(--c-text-body); font-feature-settings: "tnum"; }

/* 홈페이지 히어로(.hero--full) 전용 대형 타이포 — 서브페이지 .hero(기본)는 영향 없음.
   교정 브리프 §31: 64~82px 선에서, 126px까지 키우지 않는다 */
.hero--full .h1 { font-size: clamp(44px, 5.6vw, 78px); line-height: 1.08; letter-spacing: -0.03em; }
@media (max-width: 767px) { .hero--full .h1 { font-size: 40px; } }

/* ── FULL-BLEED PHOTO(TYPE A) — 시설 사진 한 장면. 사진 위에 캡션을 직접
   오버레이(사진 아래 별도 캡션 바를 만들지 않는다 — 레퍼런스 관찰 근거). */
.photo-bleed { position: relative; }
.photo-bleed img { width: 100%; height: clamp(360px, 62vh, 620px); object-fit: cover; display: block; }
.photo-bleed__caption {
  position: absolute; left: var(--sp-8); bottom: var(--sp-8); z-index: 1;
  color: #fff; font-size: 14px; letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
@media (max-width: 767px) { .photo-bleed__caption { left: var(--sp-4); bottom: var(--sp-4); } }

/* ── PHOTO OVERLAY(TYPE A 변형, 2026-09-01 14차 후속) — 풀블리드 사진 위에 메인컬러(딥
   네이비) 다크 스크림을 깔고 텍스트 블록 전체를 올리는 패턴(Clinical Approach 섹션).
   `.on-ink`를 텍스트 래퍼에 직접 부여해 하위 컴포넌트(philosophy__pillars 등)의 색 토큰이
   자동으로 다크 챕터 버전으로 바뀐다 — 컴포넌트별로 색을 다시 쓰지 않는다. */
.photo-overlay {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 70vh, 720px);
}
.photo-overlay__media { position: absolute; inset: 0; z-index: 0; }
.photo-overlay__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-overlay__media::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(16,35,63,0.86);
}
.photo-overlay > .container { position: relative; z-index: 1; width: 100%; }
.photo-overlay__content { max-width: 640px; padding: var(--sp-16) 0; }
/* 후속 피드백: 텍스트 뒤에 별도 박스(패널)를 씌우지 말 것 — 사진 전체의 스크림만 더
   어둡게 해서 대비를 확보한다(위 ::after 0.72→0.86). .on-ink는 색 토큰 캐스케이드만
   가져오고, .on-ink 자체가 기본으로 까는 background/padding은 이 컴포넌트에서 무효화. */
.photo-overlay__content.on-ink { background: none; padding: var(--sp-16) 0; }
@media (max-width: 767px) { .photo-overlay { min-height: 560px; } }

/* 대칭 변형(Equipment/Precision) — Clinical Principle(왼쪽 정렬)과 짝을 이루도록 콘텐츠를
   오른쪽으로 보낸다. 텍스트 자체의 정렬(글자)이 아니라 박스의 위치를 미러링하는 것 —
   문장은 그대로 왼쪽 정렬 유지, 박스만 컨테이너 오른쪽 끝에 붙는다. */
.photo-overlay--right .photo-overlay__content { margin-left: auto; }
/* 스크림 컬러 변형(Precision) — Clinical Principle의 딥네이비 대신 흰색 스크림 + 네이비
   텍스트. .on-ink를 쓰지 않으므로 기본(라이트) 토큰이 그대로 적용돼 텍스트가 이미
   --c-text-strong(다크 네이비 계열)이다 — 별도로 색을 다시 지정할 필요가 없다. */
.photo-overlay--white .photo-overlay__media::after { background: rgba(245,248,251,0.9); }