/* ===== View Transitions (MPA cross-document) =====
   페이지 이동 시 풀 리로드 깜빡임 → 시네마틱 크로스페이드 + 미세 rise.
   Chrome 126+ 네이티브, 미지원 브라우저는 선언 무시 = 일반 네비게이션 폴백. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vtFadeOut 200ms var(--ease) both;
}
::view-transition-new(root) {
  animation: vtFadeIn 320ms var(--ease) both;
}
@keyframes vtFadeOut {
  to { opacity: 0; }
}
@keyframes vtFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ===== Container ===== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--sp-4); }
}

/* ===== Section ===== */
/* 장식 요소(doctor-orbit 등)의 의도된 블리드가 좁은 뷰포트에서 가로 스크롤을 만들지 않도록.
   fixed 요소(플로팅 CTA·배경)는 main 밖이라 영향 없음 */
main { overflow-x: clip; }

.section { padding: var(--sp-6) 0; }
@media (min-width: 768px) { .section { padding: var(--sp-7) 0; } }
/* 연속 섹션 사이 128+128px 균일 보이드가 스크롤 리듬을 죽여서 뒤 섹션의 상단만 압축.
   챕터 전환감은 배경 교차·ECG 디바이더가 담당 */
@media (min-width: 768px) { main > .section + .section { padding-top: var(--sp-6); } }

/* 배경 통일: 섹션 색 면을 투명화해 body 다크 배경 + 전역 starfield(.bg-fx)가
   모든 섹션/페이지에 일관되게 비치도록. (이전: bg-soft/bg-cream 불투명 면) */
.section-soft  { background: transparent; }
.section-cream { background: transparent; }

.section-light {
  background: var(--color-card-bg);
  color: var(--color-card-text);
}
.section-light .section-eyebrow { color: var(--color-accent); }
.section-light .section-title,
.section-light h2,
.section-light h3 { color: var(--color-primary); }
.section-light .section-lead { color: var(--color-card-text-muted); }

.section-dark {
  background: var(--color-primary-dark);
  color: var(--color-text);
}

/* ===== Section text ===== */
.section-title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 700;
  margin-bottom: var(--sp-2);
  letter-spacing: -0.01em;
}
.section-lead {
  color: var(--color-text-muted);
  font-size: var(--fs-body-lg);
  margin-bottom: var(--sp-5);
  max-width: 640px;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  transition: background 300ms var(--ease), backdrop-filter 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.site-header.is-scrolled {
  background: var(--color-glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 var(--color-border);
}
/* reduced-motion: 헤더 글래스 전환 즉시 적용 (스크롤 임계 직후 어지러움 방지) */
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--fs-body-lg);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand-mark {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 4px;
}
@media (max-width: 768px) { .brand-mark { width: 36px; height: 36px; } }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 흰색 배경 칩 위에 본래 navy+gold 로고 문양 표시 (네이비 헤더 대비 확보) */

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }

/* Desktop nav */
.primary-nav { display: none; }
/* 헤더 전환점 1150 — 데스크톱 내비를 1024에 켜면 내용물(브랜드 313 + 메뉴 488 + 배지·검색·CTA)이
   1114px을 요구해 1024~1135px 구간에서 가로 오버플로. 그 구간은 햄버거 유지 */
@media (min-width: 1150px) {
  .primary-nav { display: flex; gap: var(--sp-1); align-items: center; }
}
.primary-nav > li { position: relative; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px var(--sp-2);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
  border-radius: var(--radius-pill);
  transition: color 0.15s;
  /* 배지·검색 버튼 추가로 헤더가 좁아져도 "오시는 길" 등 공백 포함 메뉴가 줄바꿈되지 않도록 */
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: var(--sp-2);
  right: var(--sp-2);
  bottom: 6px;
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s var(--ease);
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"] { color: var(--color-accent); }
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-caret { width: 12px; height: 12px; }

/* 리퀴드 글래스 드롭다운 (Trend #3) — hover 시만 표시라 blur 비용 평시 0 */
.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  padding: var(--sp-1);
  background: var(--color-glass-strong);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--color-border-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s var(--ease);
  /* G1: header(100) ↔ scroll-progress(300) 사이 — dropdown이 main 콘텐츠 위로 펼쳐지도록 */
  z-index: 200;
}
.primary-nav > li:hover .dropdown,
.primary-nav > li:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav > li.is-dismissed .dropdown { opacity: 0; visibility: hidden; pointer-events: none; }
.dropdown a {
  display: block;
  padding: 10px var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
}
.dropdown a:hover,
.dropdown a:focus-visible { background: var(--color-accent-soft); color: var(--color-accent); }

/* Header CTA — .btn(components.css, 동일 특이성·후순위 로드)의 inline-flex가 display:none을
   덮어써서 모바일에도 렌더되던 버그. 조상 셀렉터로 특이성을 올려 고정 */
.site-header .header-cta { display: none; align-items: center; gap: var(--sp-1); }
@media (min-width: 1150px) { .site-header .header-cta { display: inline-flex; } }

/* 지금 진료 중 라이브 배지 — open-status.js 동적 생성. 모바일 헤더는 좁아 ≥768px만 */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-glass);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
@media (max-width: 767px) {
  /* 좁은 헤더에서는 폭을 차지하지 않되 live status는 접근성 트리에 유지 */
  .open-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
@media (min-width: 768px) { .open-status { display: inline-flex; } }
.open-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-subtle);
  flex-shrink: 0;
}
.open-status[data-status="open"] { color: var(--color-text); border-color: rgba(var(--color-teal-rgb), 0.35); }
.open-status[data-status="open"] .open-status-dot {
  background: var(--color-teal);
  box-shadow: 0 0 8px var(--glow-teal);
  animation: openStatusPulse 2.4s ease-in-out infinite;
}
.open-status[data-status="lunch"] .open-status-dot { background: var(--color-accent); }
@keyframes openStatusPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .open-status-dot { animation: none !important; }
}

/* Hamburger */
.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: var(--color-text);
}
@media (max-width: 374px) {
  .site-header .container { gap: var(--sp-1); }
  .site-header .brand { font-size: var(--fs-body-sm); }
  .site-header .brand-mark { display: none; }
  .site-header .search-open { margin-left: 0; }
}
@media (min-width: 1150px) { .hamburger { display: none; } }
.hamburger-bar { display: block; width: 22px; height: 2px; background: currentColor; position: relative; }
.hamburger-bar::before,
.hamburger-bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s;
}
.hamburger-bar::before { top: -7px; }
.hamburger-bar::after  { top:  7px; }
.hamburger[aria-expanded="true"] .hamburger-bar { background: transparent; }
.hamburger[aria-expanded="true"] .hamburger-bar::before { top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-bar::after  { top: 0; transform: rotate(-45deg); }

/* Mobile menu */
/* 리퀴드 글래스 모바일 메뉴 (Trend #3) — is-open 시만 렌더, 평시 비용 0 */
.mobile-menu {
  position: fixed;
  inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom) 0;
  background: var(--color-glass-strong);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  z-index: 90;
  overflow-y: auto;
  display: none;
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
}
.mobile-menu.is-open { display: block; }
@media (min-width: 1150px) { .mobile-menu { display: none !important; } }

.mobile-menu .accordion { border-bottom: 1px solid var(--color-border); }
.mobile-menu .accordion-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) 0;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--color-text);
}
.mobile-menu .accordion-trigger:hover,
.mobile-menu .accordion-trigger:focus-visible { color: var(--color-accent); }
.mobile-menu .accordion-trigger .nav-caret { transition: transform 0.2s; }
.mobile-menu .accordion-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.mobile-menu .accordion-panel { display: none; padding-bottom: var(--sp-2); }
.mobile-menu .accordion-trigger[aria-expanded="true"] + .accordion-panel { display: block; }
.mobile-menu .accordion-panel a {
  display: block;
  padding: 10px var(--sp-2);
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
}
.mobile-menu .accordion-panel a:hover,
.mobile-menu .accordion-panel a:focus-visible { color: var(--color-accent); }
.mobile-menu .mobile-cta { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }

/* ===== Footer ===== */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: var(--sp-6) 0 var(--sp-4);
  margin-top: var(--sp-6);
}

/* Footer logo — 흰색 배경 칩 위에 본래 navy+gold 문양 표시 */
.site-footer .footer-logo {
  width: 140px;
  height: auto;
  margin-bottom: var(--sp-3);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  box-sizing: border-box;
}
.site-footer .footer-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.site-footer h3 {
  color: var(--color-white);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-accent);
  margin-bottom: 14px;
  display: inline-block;
}
.site-footer a { color: var(--color-footer-text); }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--color-accent); }
.site-footer ul li { font-size: 0.875rem; line-height: 1.7; }
/* WCAG 2.5.8 최소 24px 터치 타겟 — 인라인 앵커 16.9px라 padding으로 확장 */
.site-footer ul li a { display: inline-block; padding-block: 4px; }
.site-footer .footer-brand { font-size: var(--fs-h4); font-weight: 700; color: var(--color-white); }
.site-footer p { font-size: 0.875rem; line-height: 1.7; }
.site-footer .sns-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-2); }
.site-footer .sns-row a {
  width: 76px;
  min-height: 84px;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--color-white);
  text-decoration: none;
}
.site-footer .social-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; }
.site-footer .social-icon img { display: block; width: 32px; height: 32px; }
.site-footer .social-link--kakaotalk .social-icon { background: #fee500; }
.site-footer .social-link--kakaotalk img { width: 42px; height: 42px; }
.site-footer .social-link--instagram .social-icon { background: radial-gradient(circle at 28% 105%, #feda75 0%, #fa7e1e 25%, #d62976 52%, #962fbf 76%, #4f5bd5 100%); }
.site-footer .social-link--naver .social-icon { background: #03c75a; }
.site-footer .social-link--instagram img,
.site-footer .social-link--naver img { filter: invert(1); }
.site-footer .social-label { font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.site-footer .sns-row a:hover,
.site-footer .sns-row a:focus-visible { color: var(--color-white); background: rgba(255,255,255,.08); }
.site-footer .sns-row a:focus-visible { outline: 2px solid var(--color-white); outline-offset: 4px; }
.site-footer .copyright {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-footer-border);
  font-size: 0.8125rem;
  color: var(--color-footer-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: space-between;
}

/* ===== Page hero (sub-pages) ===== */
.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-bg-cream), var(--color-bg));
  padding: var(--sp-6) 0 var(--sp-5);
  border-bottom: 1px solid var(--color-border);
}
/* 인덱스 히어로와의 프리미엄 패리티 — 골드 aura 한 점으로 평면감 제거 */
.page-hero::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -100px;
  width: 440px;
  height: 440px;
  background: radial-gradient(closest-side, rgba(var(--color-accent-rgb), 0.12), transparent 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-2);
}
.page-hero .breadcrumb a:hover { color: var(--color-accent); }
.page-hero .breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 500; }
/* 디스플레이 헤드라인 한정 세리프 허용(결정 A) — 인덱스 hero-headline과 동일 보이스 */
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-1);
}
.page-hero .page-lead { color: var(--color-text-muted); max-width: 720px; }

/* ===== Grid ===== */
.grid { display: grid; gap: var(--sp-3); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Split ===== */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .split.split-narrow { grid-template-columns: 5fr 7fr; }
  .split.split-wide   { grid-template-columns: 7fr 5fr; }
}