/* ─────────────────────────────────────────────────────────────
   style.css — 레이아웃 · 모션
   색은 전부 var() 로만 참조한다 (정의는 tokens.css).
   라이브러리 0개: scroll-snap + IntersectionObserver 로만 동작.
   ───────────────────────────────────────────────────────────── */

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

html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--bg-deep);
}

body {
  font-family: var(--font-kr);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: keep-all;   /* 한글 단어 중간에서 안 끊기게 */
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, li { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── 풀스크린 스크롤 덱 (fullPage.js 대체) ───────────────── */

#deck {
  height: 100svh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
#deck::-webkit-scrollbar { display: none; }

.section {
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  /* scroll-snap-stop: always 는 쓰지 않는다 —
     앵커(#footer 등)로 여러 섹션을 건너뛰는 이동을 막아버린다 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 32px) 24px 64px;
}

/* 화면이 낮으면 스냅을 끈다 — 이게 없으면 콘텐츠가 잘린다.
   한 칸이 100svh 이고 .section 이 overflow:hidden 이라, 내용이 화면보다 크면
   넘친 부분이 그냥 사라진다. 스크롤로 꺼낼 방법도 없다.
   1366×768 노트북에서 진료과목·근거 섹션이 실제로 수십 px 씩 잘려 있었다.

   1080p 이상에서만 덱을 유지하고, 그보다 낮으면 모바일과 똑같이
   평범한 문서 스크롤로 떨어뜨린다. 잘리는 것보다 스크롤되는 게 낫다. */
@media (min-width: 1025px) and (max-height: 1000px) {
  #deck { scroll-snap-type: none; height: auto; overflow: visible; }
  .section { min-height: auto; padding: calc(var(--header-h) + 56px) 24px 88px; }
  .s-hero { min-height: 100svh; }   /* 첫 화면만은 꽉 채운다 */
}

.inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* ── 사진 슬롯 ───────────────────────────────────────────────
   파일이 없으면 <img> 가 스스로 remove() 되고 (inline onerror),
   라벨이 붙은 회색 박스만 남는다. 파일을 넣으면 그대로 사진이 뜬다. */

.photo {
  position: relative;
  overflow: hidden;
  background: repeating-linear-gradient(
    45deg, #cfcfcf, #cfcfcf 12px, #c6c6c6 12px, #c6c6c6 24px
  );
}
/* 사진이 실제로 들어오면 라벨은 사라진다.
   (img 는 파일이 없을 때 inline onerror 로 스스로 remove 된다 →
    그때만 :has(img) 가 거짓이 되어 라벨이 뜬다) */
.photo:has(img)::after { content: none; }

/* 라벨은 "칩"이다 — 면 전체를 덮는 오버레이가 아니라.
   (덮어버리면 그 위에 깔아야 할 스크림을 씻어낸다) */
.photo::after {
  content: attr(data-slot);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  max-width: calc(100% - 28px);
  padding: 9px 15px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.photo > img {
  position: relative;
  z-index: 1;               /* 사진이 있으면 라벨을 덮는다 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 배경 전면을 채우는 사진 슬롯 —
   라벨을 가운데 두면 헤드라인과 겹치므로 좌하단 칩으로 뺀다 */
.photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #4a4a4a;
}
.photo-bg::after {
  /* 배경 슬롯은 라벨을 헤더 아래 좌상단으로 — 헤드라인과 안 겹치게 */
  top: calc(var(--header-h) + 18px);
  left: 22px;
  transform: none;
}

/* ── 스크롤 등장 모션 ──────────────────────────────────────
   진입 전: translateY(±) + opacity 0 + blur
   .active: 전부 0 으로, 요소마다 조금씩 늦게 (스태거)
   속도는 tokens.css 의 --dur-slow / --d-scale 로 조절한다.  */

/* .js 로 스코프한다 — JS 가 죽거나 꺼져 있으면 .reveal 이 숨지 않고
   그냥 다 보이는 정적 페이지가 된다. (안 그러면 백지가 된다) */
.js .reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(46px);
  /* 인라인 --d 에 --d-scale 을 곱해 스태거를 한 번에 조인다.
     각 페이지의 style="--d:.9s" 를 손대지 않고 tokens.css 에서 제어한다. */
  transition:
    opacity var(--dur-slow) var(--ease) calc(var(--d, 0.3s) * var(--d-scale)),
    filter var(--dur-slow) var(--ease) calc(var(--d, 0.3s) * var(--d-scale)),
    transform var(--dur-slow) var(--ease) calc(var(--d, 0.3s) * var(--d-scale));
}
.js .reveal.from-top { transform: translateY(-46px); }
.js .reveal.from-left { transform: translateX(-70px); }
.js .reveal.from-right { transform: translateX(70px); }

.js .section.active .reveal {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html, #deck { scroll-behavior: auto; }
  #deck { scroll-snap-type: none; }
  .js .reveal, .js .section.active .reveal {
    opacity: 1; filter: none; transform: none; transition: none;
  }
  .s-hero .photo-bg > img { transform: none !important; transition: none !important; }
}

/* ── 공지 팝업 (홈 · 하루 1회) ─────────────────────────────── */

.pop-wrap {
  position: fixed;
  inset: 0;
  z-index: 90;              /* 헤더(40)·띠(41)·퀵메뉴보다 위 */
  display: grid;
  place-items: center;
  padding: 24px;
}
.pop-wrap[hidden] { display: none; }

.pop-back {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
}
body.pop-open { overflow: hidden; }   /* 뒤 페이지가 같이 스크롤되지 않게 */

.pop {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100svh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border-top: 3px solid var(--accent);
  background: var(--bg-deep);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
  animation: pop-in 0.45s var(--ease) both;
  /* 폭은 즉시 바뀐다 — 애니메이션으로 늘였다 줄이면 리사이징이 어색하다.
     탭 전환의 부드러움은 새 패널 페이드인(.pop-panel.is-on)이 담당한다. */
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pop { animation: none; }
  .pop-panel.is-on { animation: none; }
}

.pop-x {
  position: absolute;
  z-index: 2;
  top: 10px; right: 12px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: var(--on-deep-mute);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pop-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--on-deep); }

.pop-body { padding: 38px 30px 26px; overflow-y: auto; }

.pop-panel[hidden] { display: none; }
/* 탭을 누를 때마다 새 패널이 부드럽게 떠오른다 (display 토글은 전환이 안 되므로 애니메이션으로) */
@keyframes pop-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.pop-panel.is-on { animation: pop-panel-in 0.3s var(--ease) both; }
.pop-panel .en {
  display: block;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 12px;
}
.pop-panel h3 {
  margin: 0;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--on-deep);
}
.pop-panel ul { margin: 22px 0 0; display: grid; gap: 10px; }
.pop-panel li {
  padding-left: 14px;
  border-left: 2px solid var(--rule);
  font-size: 14px;
  line-height: 1.7;
  color: var(--on-deep-mute);
}
.pop-panel li b { color: var(--on-deep); font-weight: 700; }
/* 휴진은 눈에 띄어야 한다 — 헛걸음을 막는 유일한 줄이다 */
.pop-panel li b.warn { color: var(--accent); }
.pop-panel li:has(b.warn) { border-left-color: var(--accent); }

/* ── 팝업 월 달력 (진료 달력 탭) — 브라우저에서 자동 생성 ─────────
   워밍 벽걸이 달력 스타일: 크림 카드 + 토프 월 밴드 + 테두리 둥근 셀 + 우상단 세리프 숫자.
   공휴일·강조일 = 파란 '정상진료' 알약, 휴진 = 빨간 '휴진' 알약. 테마 무관 고정 라이트 카드. */
.pop-cal {
  --cal-cream: #faf6ee;
  --cal-band: #b9ab96;
  --cal-ink: #5b5041;
  --cal-line: #d8ccb4;
  --cal-sun: #c0563f;       /* 일요일·공휴일 숫자 */
  --cal-sat: #4a6fa5;       /* 토요일 숫자 */
  --cal-on: #5b86b3;        /* 정상진료 알약 */
  --cal-off: #cc5544;       /* 휴진 알약 */
  margin: 18px 0 4px;
  font-family: var(--font-kr);
}
.pop-cal-card {
  background: var(--cal-cream);
  color: var(--cal-ink);
  border-radius: 8px;
  padding: 18px 18px 16px;
  box-shadow: 0 16px 38px -18px rgba(0, 0, 0, 0.6);
}
.pop-cal-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--cal-band);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.pop-cal-when {
  flex: 1;
  text-align: center;
  font-family: var(--font-en);
  color: #4f4638;
  line-height: 1;
}
.pop-cal-when .yr { font-size: 16px; letter-spacing: 0.24em; margin-right: 10px; opacity: 0.75; }
.pop-cal-when .mo { font-size: 30px; font-weight: 600; letter-spacing: 0.04em; }
.pop-cal-band button {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
  color: #4f4638;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.pop-cal-band button:hover { background: rgba(255, 255, 255, 0.7); }
.pop-cal-dow,
.pop-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.pop-cal-dow span {
  text-align: center;
  padding: 6px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #8c8069;
}
.pop-cal-dow span:first-child { color: var(--cal-sun); }
.pop-cal-dow span:last-child { color: var(--cal-sat); }
.pop-cal-grid { gap: 5px; }
.pop-cal-cell {
  position: relative;
  min-height: 68px;
  padding: 6px 8px;
  border: 1px solid var(--cal-line);
  border-radius: 6px;
  background: #fffdf8;
}
.pop-cal-cell.is-empty { background: transparent; border-color: transparent; }
.pop-cal-cell .d {
  display: block;
  text-align: right;
  font-family: var(--font-en);
  font-size: 18px;
  line-height: 1;
  color: var(--cal-ink);
}
.pop-cal-cell.is-sat .d { color: var(--cal-sat); }
.pop-cal-cell.is-sun .d,
.pop-cal-cell.is-holiday .d { color: var(--cal-sun); }   /* 공휴일은 토요일이어도 빨강 우선 */
.pop-cal-cell.is-today { background: #f1e7d1; border-color: #cbb98f; }
/* 정상진료 / 휴진 알약 — 셀 하단 중앙 */
.pop-cal-pill {
  position: absolute;
  left: 50%; bottom: 7px;
  transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pop-cal-pill.on { background: var(--cal-on); }
.pop-cal-pill.off { background: var(--cal-off); }
/* 하단 강조 — "매일 정상 진료"를 아주 크고 눈에 띄게 */
.pop-cal-foot {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 10px;
  background: #fbe9e2;
  border: 1.5px solid #e6b6a6;
  text-align: center;
}
.pop-cal-foot b {
  display: block;
  font-family: "Gowun Batang", var(--font-kr);
  font-size: clamp(18px, 2.5vw, 25px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #b0492f;
}

.pop-note {
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--on-deep-mute);
}
.pop-note a { color: var(--accent); border-bottom: 1px solid var(--accent); }

/* 이벤트 패널 — 이벤트 하나가 탭 하나이므로, 여기는 그 하나만 크게 보여준다 */
.pop-img {
  margin: 0 0 20px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.pop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 포스터형 이벤트 이미지 — 글자가 잘리지 않게 자연 비율(전체 표시) */
.pop-img--poster { aspect-ratio: auto; background: none; }
.pop-img--poster img { height: auto; object-fit: contain; }

/* 가로로 긴 가격표 탭 — 활성일 때 팝업 창을 자동으로 넓혀(min 920px) 가격표를 크게 보여준다 */
.pop.pop--wide { width: min(920px, 100%); }

.pop-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 0;
}
.pop-meta em { font-style: normal; font-size: 12px; }
/* 클래스 이름을 .price 로 쓰면 안 된다 —
   비급여 가격표의 .price { width:100%; min-width:640px } 가 그대로 걸려서
   알약이 650px 로 늘어나고 팝업에 가로 스크롤바가 생긴다. */
.pop-meta .fee {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--accent);
  font-weight: 700;
}
.pop-meta .until { color: var(--on-deep-mute); }

/* 하단 탭 — 이벤트가 늘면 탭도 는다 (공지 2 + 이벤트 N).
   flex 한 줄로 밀어넣으면 6개째부터 모바일에서 글자가 뭉개진다.
   auto-fit 격자로 줄바꿈시켜 전부 읽히게 한다.
   gap:1px + 배경색으로 칸 사이 실선을 만든다 — 줄바꿈돼도 선이 깨지지 않는다. */
.pop-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  border-top: 1px solid var(--rule);
  /* 실선을 gap+배경색으로 만들면 안 된다 — 마지막 줄의 빈 칸까지
     그 색으로 칠해져 회색 덩어리가 보인다. 칸마다 테두리를 준다. */
  background: var(--bg-deep);
}
.pop-tab {
  padding: 13px 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--on-deep-mute);
  background: var(--bg-deep);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pop-tab:hover { color: var(--on-deep); background: var(--bg-deep-2); }
.pop-tab.is-on { background: var(--accent); color: var(--bg-deep); }

.pop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--bg-deep-2);
  /* border-top 을 주지 않는다 — 탭의 border-bottom 과 겹쳐 이중선이 된다 */
}
.pop-hide {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--on-deep-mute);
  cursor: pointer;
}
.pop-hide input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

.pop-act { display: flex; align-items: center; gap: 8px; }
/* 응급 환자가 팝업을 닫는 법을 찾느라 헤매지 않도록, 팝업 안에서 바로 전화 */
.pop-call {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-deep);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.pop-call:hover { filter: brightness(1.08); }
.pop-done {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-deep-mute);
}
.pop-done:hover { color: var(--on-deep); border-color: var(--accent); }

@media (max-width: 640px) {
  .pop-wrap { padding: 14px; }
  .pop-body { padding: 34px 20px 22px; }
  .pop-tab { font-size: 11px; padding: 12px 4px; }
  .pop-foot { justify-content: center; }
}

/* ── 최상단 공지 띠 (마퀴) ───────────────────────────────── */

.topbar {
  position: fixed;
  top: 0; left: 0;
  z-index: 41;                /* 헤더(40)보다 위 */
  width: 100%;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--accent);
  color: var(--bg-deep);
}

/* "지금 진료 중" 배지 — main.js 가 현재 시각으로 채운다.
   JS 가 없으면 hidden 인 채로 남아 아예 안 보인다 (빈 껍데기가 남지 않게). */
.live {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 16px;
  background: var(--bg-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.live[hidden] { display: none; }
.live .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--on-deep-mute);   /* 마감 = 회색 */
}
.live.is-open .dot {
  background: #4ade80;               /* 진료 중 = 초록 */
  animation: live-pulse 2s ease-in-out infinite;
}
.live b { font-weight: 700; }

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .live.is-open .dot { animation: none; }
}

.ticker { width: 100%; overflow: hidden; }

/* 같은 내용을 두 번 이어붙이고 절반만큼 밀면 이음매 없이 반복된다. */
.ticker .track {
  display: flex;
  width: max-content;
  animation: ticker-scroll var(--ticker-speed) linear infinite;
}
.topbar:hover .track { animation-play-state: paused; }

.ticker .track > span {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ticker em {
  font-style: normal;
  padding: 0 18px;
}
.ticker .dot {
  opacity: 0.55;
  font-weight: 400;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 모션을 끈 사용자에겐 흐르지 않고 첫 세트만 가운데에 세워둔다 */
@media (prefers-reduced-motion: reduce) {
  .ticker .track { animation: none; width: 100%; justify-content: center; }
  .ticker .track > span:not(:first-child) { display: none; }
  .ticker .track > span:first-child > .dot:last-child { display: none; }
}

/* ── 헤더 ────────────────────────────────────────────────── */

.header {
  position: fixed;
  top: var(--bar-h);          /* 공지 띠 아래에 붙는다 */
  left: 0;
  z-index: 40;
  width: 100%;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 40px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--rule);
}

/* 로고 락업 — 데스크톱·태블릿은 가로 워드마크(logo-wide), 폰(≤640)은 콤팩트(logo-mark). */
.brand { display: flex; align-items: center; }
.brand img { width: auto; display: block; }
.brand .logo-wide { height: 28px; }
.brand .logo-mark { height: 30px; display: none; }

.gnb { display: flex; gap: 30px; margin-left: 24px; }
.gnb a {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  color: var(--on-deep);
  padding: 6px 0;
}
.gnb a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width var(--dur-fast) var(--ease);
}
.gnb a:hover::after { width: 100%; }

/* ── 센터 드롭다운 (메가 메뉴) ─────────────────────────────
   .gnb-item 을 헤더 높이만큼 늘려야 top:100% 가 "헤더 아래"가 된다.
   링크 높이(≈30px)에만 맞추면 패널이 헤더 한가운데서 튀어나온다.
   또 링크와 패널 사이에 틈이 생기면 마우스가 지나갈 때 닫혀버린다. */
.gnb { align-items: center; align-self: stretch; }
.gnb-item {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* 링크 중앙 기준으로 펼치면(left:50% + translateX(-50%)) 폭 760px 패널이
   왼쪽으로 380px 삐져나가 로고 아래를 덮는다. 링크 왼쪽 모서리에 맞춰 떨군다. */
.mega {
  position: absolute;
  z-index: 45;
  top: 100%;
  left: -14px;
  transform: translateY(-10px);
  width: max-content;
  max-width: min(760px, calc(100vw - 48px));
  background: var(--bg-deep-2);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55);
  /* visibility 를 함께 껐다 켜야 안 보이는 패널이 마우스를 먹지 않는다 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    visibility 0s linear var(--dur-fast);
}
.gnb-item:hover .mega,
.gnb-item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

/* ── 치료센터 항목을 메인 네비에 직접 노출 (치료 강조) ───────
   4개를 한 그룹으로 살짝 붙여 "치료 묶음"으로 읽히게. */
.gnb-care {
  display: flex;
  align-items: center;
  gap: 20px;
  align-self: stretch;
}
.gnb-care a { white-space: nowrap; }

.mega-in { padding: 22px 24px 24px; }

.mega-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.mega-head .en {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.mega-head b { font-size: 13px; font-weight: 500; color: var(--on-deep-mute); }
.mega-head .all {
  margin-left: auto;
  font-size: 12px;
  color: var(--on-deep-mute);
  padding: 0;
}
.mega-head .all::after { display: none; }
.mega-head .all:hover { color: var(--accent); }
/* 치료센터 메가메뉴에만 붙는 보험 단서 pill (site.treatments.care.note). beauty 엔 없다. */
.mega-head .mega-note {
  align-self: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mega ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}
.mega li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  font-weight: 400;
  transition: background var(--dur-fast) var(--ease);
}
.mega li a::after { display: none; }   /* gnb 밑줄이 여기까지 따라오면 안 된다 */
.mega li a:hover { background: rgba(255, 255, 255, 0.06); }

.mega li img {
  width: 46px;
  height: 46px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}
.mega li .t { display: block; min-width: 0; }
.mega li b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--on-deep);
}
.mega li i {
  display: block;
  margin-top: 1px;
  font-family: var(--font-en);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.mega li em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-deep-mute);
}
.mega li a:hover b { color: var(--accent); }

.tel {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  transition: filter var(--dur-fast) var(--ease);
}
.tel:hover { filter: brightness(1.1); }

.burger { display: none; margin-left: auto; padding: 10px; }
.burger span {
  display: block; width: 24px; height: 2px;
  background: var(--on-deep); margin: 5px 0;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

/* ── 1. 히어로 ───────────────────────────────────────────── */

/* 히어로 배경이 "밝은 로비 + 정중앙 로고 사인" 사진이다.
   가운데에 큰 흰 글씨를 얹으면 (1) 밝은 벽에 묻혀 안 읽히고
   (2) 로고 사인을 정통으로 가린다.
   → 로고 사인이 있는 위쪽은 거의 손대지 않고, 텍스트는 아래로 내려
     어둡게 깔린 하단에 앉힌다. */
.s-hero {
  background: #000;
  text-align: center;
  align-items: flex-end;
  padding-bottom: clamp(48px, 9vh, 96px);
}

.s-hero .photo-bg > img {
  transform: scale(1.14);
  transition: transform 15s var(--ease);
}
.s-hero.active .photo-bg > img { transform: scale(1); }

/* 위쪽(로비·로고 사인)은 거의 그대로 보이게 두고,
   아래로 갈수록 진해져서 하단 텍스트가 확실히 읽히게 한다. */
.s-hero .scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.30) 0%,     /* 헤더 아래 — 살짝만 */
    rgba(0,0,0,0.06) 24%,    /* 로고 사인 영역 — 거의 투명하게 남긴다 */
    rgba(0,0,0,0.16) 42%,
    rgba(0,0,0,0.58) 54%,    /* 로고 사인 바로 아래부터 빠르게 어두워진다 */
    rgba(0,0,0,0.86) 70%,
    rgba(0,0,0,0.94) 100%    /* 텍스트가 앉는 하단 */
  );
}

/* 밝은 사진이 들어와도 헤드라인이 뭉개지지 않도록 최소한의 보험 */
.s-hero .hero-title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }

/* 히어로 배경(로비 사진) 정중앙에 이음 로고 사인이 크게 박혀 있다.
   그 위에 맨 글자를 얹으면 사인과 겹쳐 아무것도 안 읽힌다.
   이 한 줄이 페이지 전체의 주장이므로, 알약으로 감싸 배경에서 떼어낸다. */
.s-hero .eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: rgba(6, 32, 42, 0.72);
  backdrop-filter: blur(4px);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.hero-mark { width: 74px; margin: 0 auto 28px; }
.hero-title {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 60px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--on-deep);
}
.hero-sub {
  margin: 26px auto 0;
  max-width: 640px;
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 400;
  line-height: 1.85;
  color: var(--on-deep-mute);
}
.hero-pills {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 10px;
  margin-top: 40px;
}
.hero-pills li {
  padding: 9px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--on-deep-mute);
  background: rgba(0, 0, 0, 0.22);
}

/* 홈 본문에 전화번호가 처음 등장하는 자리.
   그동안 헤더·푸터·퀵메뉴(layout.js)에만 있어서, 다친 사람이 본문을 읽다
   전화를 걸려면 눈을 다른 데로 옮겨야 했다. */
.hero-call {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 26px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-deep);
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.hero-call span { font-size: 13px; font-weight: 600; opacity: 0.85; }
.hero-call b { font-size: 19px; font-weight: 800; letter-spacing: 0.02em; }
.hero-call:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* ── 2. 야간 진료 ────────────────────────────────────────── */

.s-night { background: var(--bg-deep); text-align: center; }
.s-night .photo-bg { opacity: 0.28; }
.s-night .photo-bg::after { opacity: 0.5; }
/* 야간 배경(건물 외관) — 사진을 아래쪽 기준으로 잡으면 건물 사인이
   프레임 위쪽으로 올라와 헤드라인과 겹치지 않는다. */
.s-night .photo-bg > img { object-position: center 75%; }

.eyebrow {
  display: block;
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 22px;
}
.s-night h2 {
  margin: 0;
  font-size: clamp(24px, 2.9vw, 42px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--on-deep);
}
.s-night p {
  margin: 30px auto 0;
  max-width: 620px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.9;
  color: var(--on-deep-mute);
}

/* ── 3. 진료의 시간축 ────────────────────────────────────────
   예전엔 여기가 "치료센터 : 미용센터" 50:50 좌우 패널이었다.
   둘을 대칭으로 놓으면 "우리는 둘 다 합니다"가 되고, 그건 모든 병원이 하는 말이다.
   하나의 선 위에 얹으면 미용이 '옆 갈래'가 아니라 '같은 선의 끝'이 된다. */

.s-timeline { background: var(--bg-deep-2); }
.s-timeline .body-copy {
  margin: -18px 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--on-deep-mute);
}

.stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(32px, 4.5vh, 52px);
}
/* 마디를 잇는 가로 선 — 사진 중앙 높이에 깔린다 */
.stops::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 6%; right: 6%;
  top: 34%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--rule) 12%, var(--rule) 88%, transparent);
}

.stop {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}
.stop .photo {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 3px solid var(--bg-deep-2);   /* 뒤의 선을 사진 뒤에서 끊어준다 */
  transition: transform var(--dur-fast) var(--ease);
}
.stop:hover .photo { transform: translateY(-6px); }

.stop .when {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.stop h3 {
  margin: 6px 0 0;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  color: var(--on-deep);
}
.stop p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--on-deep-mute);
}

/* 시간축의 한 마디에 묶이지 않는 진료 (모반 · 양성종양) */
/* ── 3.5 모반 · 양성 종양 섹션 (좌우 배너 = 한 덩어리) ─────────── */
.s-lesion { background: var(--bg-deep); }
.lesion-banner {
  display: grid;
  grid-template-columns: minmax(280px, 34%) 1fr;
  margin-top: clamp(32px, 4.5vh, 52px);
  background: var(--bg-deep-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
}
.lb-photo { position: relative; min-height: 300px; background: #1a1a1a; }
.lb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.lb-common { opacity: 1; }
/* 행에 마우스를 올리면 그 진료 사진으로 크로스페이드 (기본 = 공통 사진) */
.lesion-banner:has(.lb-row[data-i="0"]:hover) .lb-common,
.lesion-banner:has(.lb-row[data-i="1"]:hover) .lb-common { opacity: 0; }
.lesion-banner:has(.lb-row[data-i="0"]:hover) .lb-i0 { opacity: 1; }
.lesion-banner:has(.lb-row[data-i="1"]:hover) .lb-i1 { opacity: 1; }
.lb-list { display: flex; flex-direction: column; }
.lb-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  padding: clamp(24px, 2.6vw, 40px);
  transition: background var(--dur-fast) var(--ease);
}
.lb-row + .lb-row { border-top: 1px solid var(--rule); }
.lb-row:hover { background: var(--pill-bg); }
.lb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.lb-head .en {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.lb-head h3 {
  margin: 6px 0 0;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-deep);
}
.lb-row .more {
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  transition: transform var(--dur-fast) var(--ease);
}
.lb-row:hover .more { transform: translateX(4px); }
.lb-ex {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--on-deep-mute);
}

/* ── 4. 근거 (자격) ──────────────────────────────────────────
   id 는 여전히 #philosophy 다 — 헤더 GNB "이음 소개"가 여기로 착지한다. */

.s-record { background: var(--bg-deep-2); }
.s-record .inner {
  display: grid;
  grid-template-columns: 0.68fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.s-record > .inner > .photo {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
}

/* 자격 서명 — 원장이 위 선언에 '서명'하듯, 얇은 구분선 아래 이름·직함·자격 */
.record-sign {
  margin-top: clamp(24px, 3.2vh, 40px);
  padding-top: clamp(16px, 2.2vh, 24px);
  border-top: 1px solid var(--rule);
}
.rs-name {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-deep);
}
.rs-title { margin: 3px 0 0; font-size: 13px; color: var(--on-deep-mute); }
.rs-cred { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--on-deep-mute); }
.record-sign .record-more { margin-top: 14px; }
.record-copy { border-left: 1px solid var(--rule); padding-left: clamp(24px, 3vw, 48px); }
.record-copy h2 {
  margin: 0;
  font-size: clamp(23px, 2.5vw, 38px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--on-deep);
}
.record-copy > p {
  margin: 22px 0 0;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.9;
  color: var(--on-deep-mute);
}

/* 물증 목록 — 형용사가 아니라 사실만 */
.record {
  margin: clamp(22px, 3vh, 34px) 0 0;
  display: grid;
  gap: 14px;
}
.record li {
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}
.record b {
  display: block;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 700;
  color: var(--on-deep);
}
.record span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--on-deep-mute);
}
/* 논문 7편 : 미용 0편 — 이 대비가 이 섹션에서 가장 센 한 줄이다 */
.record em {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
}

.record-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 2.6vh, 30px);
  font-size: 14px;
  font-weight: 700;
  color: var(--on-deep);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  transition: gap var(--dur-fast) var(--ease);
}
.record-more em { font-style: normal; color: var(--accent); }
.record-more:hover { gap: 14px; }

/* ── 5. 진료과목 슬라이더 ────────────────────────────────── */

.s-treat { background: var(--bg-deep); }
.s-treat .inner { max-width: 1680px; }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.sec-head h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-deep);
}
.sec-head .en {
  display: block;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 14px;
}
/* 한글 병명이 h2 로 올라가면, 원래 제목이던 설명 문장이 여기로 내려온다 */
.sec-lead {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 500;
  line-height: 1.65;
  color: var(--on-deep-mute);
}

.slider-nav { display: flex; gap: 10px; flex-shrink: 0; }
.slider-nav button {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  color: var(--on-deep);
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.slider-nav button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.slider-nav button:disabled { opacity: 0.3; cursor: default; }
.slider-nav button:disabled:hover {
  background: none; color: var(--on-deep); border-color: var(--rule);
}

/* 진료 분야 탭 — 치료 / 미용 */
.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.tab {
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-size: 15px;
  font-weight: 600;
  color: var(--on-deep-mute);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--on-deep); border-color: var(--accent); }
.tab.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-deep);
}

.rail[hidden] { display: none; }

.rail {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.rail::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 calc((100% - 26px * 3) / 4);
  scroll-snap-align: start;
  background: var(--accent);
  border-radius: 14px;
  overflow: hidden;
  color: var(--bg-deep);
  transition: transform var(--dur-fast) var(--ease);
}
.card:hover { transform: translateY(-6px); }
.card .thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.card:hover .thumb img { transform: scale(1.06); }
.card .body {
  position: relative;
  padding: 24px 22px 54px;
}
.card .body h3 {
  margin: 0;
  font-size: clamp(17px, 1.3vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.card .body .en {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  opacity: 0.65;
  margin-top: 6px;
}
.card .body p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.85;
}
.card .plus {
  position: absolute;
  right: 16px; bottom: 16px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-deep);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: 18px; line-height: 1;
  font-weight: 300;
}
/* 치료센터 카드 전용 — 금색 카드 위 어두운 pill(=.plus 와 같은 색계열). 중립 문구. */
.card .ins-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── 5.5 건강보험 적용 진료 섹션 (홈, s-treat 와 s-cases 사이) ───
   .s-night / .sub-cta 와 같은 가운데 정렬 스테이트먼트 톤. 한 화면 안에 들어온다. */
.s-insurance {
  background: var(--bg-deep-2);
  text-align: center;
  border-top: 1px solid var(--rule);
}
.s-insurance h2 {
  margin: 0;
  font-size: clamp(24px, 2.9vw, 42px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--on-deep);
}
.s-insurance .ins-lead {
  margin: 30px auto 0;
  max-width: 680px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.9;
  color: var(--on-deep-mute);
}
.s-insurance .ins-note {
  margin: 16px auto 0;
  max-width: 620px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--on-deep-mute);
  opacity: 0.75;
}

/* ── 6. 강점 4카드 ───────────────────────────────────────── */

.s-why { background: var(--bg-deep-2); }
.s-why .photo-bg { opacity: 0.18; }

/* .s-why 안에서만 쓰지 않는다 — 서브페이지에서도 4칸 격자로 쓴다.
   (.s-why .grid4 로 묶어두면 서브페이지에선 격자가 안 잡혀 세로로 쌓인다) */
.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.why-card {
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.why-card .photo { aspect-ratio: 4 / 3; }
.why-card .body { padding: 22px 22px 26px; }
.why-card h3 {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 21px);
  font-weight: 700;
  color: var(--card-ink);
  letter-spacing: -0.01em;
}
.why-card p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-mute);
}

/* ── 6. 치료 기록 (전후 사진) ────────────────────────────────
   예전엔 여기가 대형 워드마크 타이포 섹션(.s-typo)이었다. 정보량이 0이라
   물증에 자리를 내줬다. 워드마크는 strip() 이 대신 낸다 (스냅 칸을 안 먹는다).

   ⚠ 전후 사진은 의료광고에서 가장 예민하다. .ba-note(개인차·부작용 고지)를
     절대 지우지 말 것. 관련 없는 사진을 짝지어 전후로 파는 것도 금지. */

.s-cases { background: var(--bg-deep); }

.ba {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(28px, 4vh, 44px);
}
.ba .pair { margin: 0; }

/* 한 쌍 = Before | After 가 맞붙는다. 가운데 실선이 경계를 못 박는다. */
.ba .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: 12px;
  overflow: hidden;
}
.ba .photo {
  aspect-ratio: 3 / 4;
  border-radius: 0;
}
.ba .tag {
  position: absolute;
  z-index: 3;
  left: 10px; top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.ba .tag.on { background: var(--accent); }

.ba figcaption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--on-deep-mute);
}

/* 법정 고지 — 렌더링되는지 검증 대상이다 */
.ba-note {
  margin: clamp(24px, 3.4vh, 38px) 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--rule);
  font-size: 12px;
  line-height: 1.75;
  color: var(--on-deep-mute);
}

/* ── 8. 푸터 ─────────────────────────────────────────────── */

.s-foot {
  min-height: 100svh;
  align-items: stretch;
  background: var(--bg-deep);
  padding: calc(var(--header-h) + 40px) 24px 0;
}
.s-foot .inner { display: flex; flex-direction: column; }

.foot-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-content: center;
  padding-bottom: 48px;
}
.foot-col h3 {
  margin: 0 0 20px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: var(--accent);
}
.foot-phone {
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  color: var(--on-deep);
  letter-spacing: -0.01em;
}
.hours { margin-top: 30px; }
.hours li {
  display: flex;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  color: var(--on-deep-mute);
}
.hours li b {
  flex: 0 0 92px;
  font-weight: 600;
  color: var(--on-deep);
}
.hours .note {
  border-bottom: none;
  color: var(--accent);
  font-size: 14px;
}

.foot-addr {
  font-size: 15px;
  line-height: 1.85;
  color: var(--on-deep-mute);
}
.map-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.map-links a {
  padding: 10px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-deep);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.map-links a:hover { background: var(--accent); border-color: var(--accent); }

.chan li { margin-bottom: 16px; }
.chan a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--on-deep);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chan a:hover { background: var(--pill-bg); border-color: var(--accent); }
.chan a span:last-child { color: var(--accent); }

.copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--on-deep-mute);
}
.copyright .logo { height: 26px; width: auto; margin-right: 12px; opacity: 0.9; }

/* 병원 안내 링크 줄 */
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 0 0 28px;
  font-size: 13px;
}
.foot-links a {
  color: var(--on-deep-mute);
  transition: color var(--dur-fast) var(--ease);
}
.foot-links a:hover { color: var(--accent); }

/* ── 우측 플로팅 퀵메뉴 ──────────────────────────────────── */

.quick {
  position: fixed;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.quick a {
  display: grid;
  place-items: center;
  gap: 6px;
  width: 82px;
  padding: 14px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--card-ink);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  transition: background var(--dur-fast) var(--ease);
}
.quick a:last-child { border-bottom: none; }
.quick a:hover { background: var(--surface-2); }
.quick svg { width: 22px; height: 22px; stroke: var(--card-ink); fill: none; stroke-width: 1.6; }

/* ═══════════════════════════════════════════════════════════
   서브페이지 (main.doc)
   홈은 #deck 스크롤 스냅 덱이지만, 서브페이지는 그냥 긴 문서다.
   .section 의 min-height:100svh 와 스냅을 여기서 전부 푼다.
   ═══════════════════════════════════════════════════════════ */

.doc { background: var(--bg-deep); }

.doc .section {
  min-height: 0;
  scroll-snap-align: none;
  align-items: flex-start;
  padding-top: clamp(72px, 9vh, 120px);
  padding-bottom: clamp(72px, 9vh, 120px);
  /* 고정 헤더 + sticky 목차 바 아래로 제목이 깔리지 않도록.
     (JS 를 거치지 않는 네이티브 앵커 이동에도 필요하다) */
  scroll-margin-top: calc(var(--header-h) + 58px);
}

/* ── 페이지 헤더 ─────────────────────────────────────────── */

.sub-hero {
  position: relative;
  background: #000;
  min-height: 62svh !important;
  align-items: flex-end !important;
  padding-top: calc(var(--header-h) + 64px) !important;
  padding-bottom: clamp(56px, 7vh, 88px) !important;
  overflow: hidden;
}
/* 소개 페이지 — 리셉션 사진(로고 사인 + 데스크)이 다 보이도록 히어로를 높인다.
   46vw 로 두면 화면 폭이 달라져도 사진 구도(가로:세로 ≈ 2.17)가 유지된다. */
.sub-hero.tall { min-height: clamp(560px, 46vw, 900px) !important; }

.sub-hero .photo-bg > img { transform: scale(1.08); transition: transform 15s var(--ease); }
.sub-hero.active .photo-bg > img { transform: scale(1); }

.sub-hero .scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.40) 40%,
    rgba(0,0,0,0.82) 100%
  );
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--on-deep-mute);
}
.crumb a { transition: color var(--dur-fast) var(--ease); }
.crumb a:hover { color: var(--accent); }
.crumb em { font-style: normal; color: var(--accent); font-weight: 600; }
.crumb span { opacity: 0.4; }

.sub-hero h1 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 54px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--on-deep);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.sub-hero .lead {
  margin: 26px 0 0;
  max-width: 760px;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.9;
  color: var(--on-deep-mute);
  text-wrap: balance;   /* 강제 <br> 없이도 줄 길이를 고르게 나눈다 */
}

/* ── 목차 바 (섹션으로 점프) ─────────────────────────────── */

/* 좌우 여백은 .section 과 똑같이 맞춰야 본문과 정렬이 맞는다.
   (.jump 는 .section 이 아니라서 그 패딩을 물려받지 못한다) */
.jump {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  padding: 0 24px;
  background: var(--bg-deep-2);
  border-bottom: 1px solid var(--rule);
}
.jump .inner {
  display: flex;
  gap: clamp(12px, 2vw, 32px);
  max-width: var(--maxw);
}
.jump a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--on-deep-mute);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.jump a b { font-family: var(--font-en); font-size: 13px; color: var(--accent); }
.jump a:hover { color: var(--on-deep); border-bottom-color: var(--accent); }

/* ── 본문 섹션 ───────────────────────────────────────────── */

.section.sub { background: var(--bg-deep); }
.section.sub.alt { background: var(--bg-deep-2); }

.section.sub .sec-head { margin-bottom: 32px; }
.section.sub .sec-head h2 {
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.4;
}

.body-copy {
  margin: 0;
  max-width: 820px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 2;
  color: var(--on-deep-mute);
}
.body-copy + .body-copy { margin-top: 18px; }

/* ── 임상 사진 ───────────────────────────────────────────── */

/* 열 수는 사진 개수에 맞춘다.
   auto-fit 으로 두면 2장일 때도 3열이 잡혀 한 칸이 비어 어색해진다. */
.shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(36px, 5vh, 56px);
  max-width: 820px;
}
.shots:has(figure:nth-child(3)) {          /* 3장 이상 — 수술 단계 3컷 */
  grid-template-columns: repeat(3, 1fr);
  max-width: 960px;
}
.shots:has(figure:only-child) {            /* 1장 — 반쪽만 차지하면 어색하다 */
  grid-template-columns: 1fr;
  max-width: 420px;
}
.shots figure { margin: 0; }
.shots .photo {
  /* 원본이 대부분 세로 사진(9:16 ~ 2:3)이다. 가로 비율로 자르면
     정작 봐야 할 상처가 잘려나가므로 세로 비율을 유지한다. */
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: #1a1a1a;
}
.shots .photo img { object-position: center; }
.shots figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--on-deep-mute);
  letter-spacing: 0.01em;
}

/* ── PROGRESS 6단계 ──────────────────────────────────────── */

.steps { margin-top: clamp(40px, 6vh, 72px); }
.steps-label {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 28px;
}
/* 상단 번호 스텝바 — 번호 배지를 연결선으로 잇고, 아래에 단계명·설명 */
.steps ol {
  display: flex;
  align-items: flex-start;
}
.steps li {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  text-align: center;
  padding: 66px 14px 0;      /* 위: 배지 자리 */
}
/* 배지 중심(23px)에서 다음 배지 중심까지 연결선 */
.steps li::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--rule);
  z-index: 0;
}
.steps li:last-child::before { display: none; }
/* 번호 원형 배지 — 불투명 배경이 연결선을 덮는다(섹션색 토큰으로 일치) */
.steps .num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg-deep);
  color: var(--accent);
  font-family: var(--font-en);
  font-size: 17px;
  line-height: 1;
  z-index: 1;
}
.section.sub.alt .steps .num { background: var(--bg-deep-2); }
.steps .en {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--on-deep-mute);
}
.steps h3 {
  margin: 6px 0 0;
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 700;
  color: var(--on-deep);
}
.steps p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--on-deep-mute);
}

/* ── 2단 분할 ────────────────────────────────────────────── */

.split-2 {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
/* 뒤에 카드·표 등이 이어질 때 사진과 맞닿지 않게 (등장 애니메이션 여유 포함) */
.split-2:not(:last-child) { margin-bottom: clamp(40px, 6vh, 72px); }

/* 케이스 사진 2장 나란히 — 비율을 맞춰(cover) 높이를 같게 */
.case-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(32px, 4.5vh, 48px);
  max-width: 1120px;
}
.case-photos .photo { aspect-ratio: 7 / 4; border-radius: 14px; border: 1px solid var(--rule); }
/* split-2 우측 컬럼 안에 들어가면 좁으니 세로로 쌓는다 */
.split-2 > .case-photos { grid-template-columns: 1fr; max-width: none; margin-top: 0; }
/* 제목 옆에 사진을 둘 때 — 컬럼을 꽉 채우지 않고 80% 로, 바깥 여백에 맞춰 정렬.
   (justify-self 를 쓰면 그리드가 fit-content 로 쪼그라들어 width+margin 으로 맞춘다) */
.split-2 > .shots { margin-top: 0; max-width: none; width: 80%; margin-left: auto; }
/* 사진이 한 장뿐이면 80% 는 너무 크다 — 더 좁게 잡는다 */
.split-2 > .shots:has(figure:only-child) { width: 62%; }
/* 장비 사진(슈링크 등) — 데스크톱은 우측 42%, 좁은 화면에선 가운데로 크게(아래 미디어쿼리) */
.device-figure { margin: 0 0 0 auto; width: 42%; }
/* 해부 도해(목거상 등) — 데스크톱 우측 80%, 좁은 화면에선 가운데 */
.anat-figure { margin: 0 0 0 auto; width: 80%; }
/* 사진이 왼쪽(rev)일 때는 글 컬럼이 넓어야 하고, 사진은 왼쪽 끝에 붙는다 */
.split-2.rev { grid-template-columns: 1fr 1.15fr; }
.split-2.rev > .shots { margin-left: 0; margin-right: auto; }
.split-2.rev > .shots:has(figure:only-child) { width: 62%; }

/* ── 강조 박스 ───────────────────────────────────────────── */

/* 좌측 리본 대신 균일한 둥근 박스 — 강조는 테두리 색이 아니라 굵은 글씨로만 */
.note-box {
  margin: 28px 0 0;
  padding: 20px 24px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--pill-bg);
  font-size: 15px;
  line-height: 1.85;
  color: var(--on-deep-mute);
}
.note-box b { color: var(--on-deep); font-weight: 700; }
/* 한글 먼저, 영어는 작은 라벨로 (groups 와 동일 규칙) */
.note-box b .en {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-left: 8px;
  vertical-align: middle;
}

/* 화상 경고 — 응급실로 보내야 하는 경우다. 눈에 띄어야 한다. */
.warn-box {
  margin: clamp(32px, 5vh, 56px) 0 0;
  padding: 22px 26px;
  border: 1px solid var(--rule);   /* accent 테두리 → 중립. 강조는 b 의 accent 로만 */
  border-radius: 14px;
  background: var(--pill-bg);
  font-size: 15px;
  line-height: 1.9;
  color: var(--on-deep-mute);
}
.warn-box b { color: var(--accent); font-weight: 700; }
.warn-box a {
  color: var(--on-deep);
  font-weight: 700;
  border-bottom: 1px solid var(--accent);
}

/* ── 사례 목록 ───────────────────────────────────────────── */

.case-title {
  margin: 0 0 20px;
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight: 700;
  color: var(--on-deep);
}
/* 전체폭으로 내려온 목록은 2열로 — 한 줄짜리 항목이 가로로 늘어지지 않게 */
.case-list.cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.case-list.cols li { margin-bottom: 0; }

.case-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 8px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 15px;
  color: var(--on-deep);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.case-list li:hover { border-color: var(--accent); background: var(--pill-bg); }
.case-list .num {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--accent);
}

/* 사진 없는 카드 (why-card 재사용) */
.why-card.flat .body { padding: 26px 24px 30px; }

/* ── 2열 대비 (레이저가 유리한 경우 / 수술이 유리한 경우) ── */

.compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(36px, 5vh, 56px);
}
.compare > div {
  padding: 30px 28px 34px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--pill-bg);
}
/* 한 칸만 있을 때 — 반쪽으로 두지 않고 전체폭 카드 + 항목 2열 */
.compare.single { grid-template-columns: 1fr; }
.compare.single ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 56px); }
.compare .en {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.compare h3 {
  margin: 10px 0 20px;
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight: 700;
  color: var(--on-deep);
}
.compare li {
  position: relative;
  padding: 9px 0 9px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--on-deep-mute);
}
.compare li::before {
  content: "";
  position: absolute;
  left: 0; top: 18px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── 체크리스트 (이런 경우 수술이 권유됩니다) ────────────── */

.checks { margin-top: 26px; }
/* 전체폭으로 내려온 체크리스트는 2열로 */
.checks.cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 56px); }
.checks.cols li:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.7;
  color: var(--on-deep);
}
.checks li:last-child { border-bottom: none; }
.checks li::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ── 병변 사전 (기타 모반 / 기타 양성종양) ───────────────── */

.terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  margin-top: clamp(36px, 5vh, 56px);
}
.terms li {
  background: var(--bg-deep);
  padding: 26px 24px 30px;
}
.section.sub.alt .terms li { background: var(--bg-deep-2); }
.terms .en {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.terms h3 {
  margin: 8px 0 0;
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 700;
  color: var(--on-deep);
}
.terms p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--on-deep-mute);
}

/* ── Q&A ─────────────────────────────────────────────────── */

.qa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: clamp(36px, 5vh, 56px);
}
.qa li {
  padding: 22px 24px 26px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition: border-color var(--dur-fast) var(--ease);
}
.qa li:hover { border-color: var(--accent); }
.qa .q {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--on-deep);
}
.qa .a {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--on-deep-mute);
}
.qa .q::before {
  content: "Q. ";
  font-family: var(--font-en);
  color: var(--accent);
}

/* ── 레이저 장비 ─────────────────────────────────────────── */

.devices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(36px, 5vh, 56px);
}
.devices li {
  padding: 30px 28px 34px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--pill-bg);
}
.devices .brand {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-deep-mute);
}
.devices h3 {
  margin: 6px 0 0;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 700;
  color: var(--on-deep);
}
.devices .spec {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.devices p {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--on-deep-mute);
}

/* ── 그룹 목록 (수술 종류별 흉터) ────────────────────────── */

/* 오시는 길 상단 — 제목/리드(좌) + 정사각 약도(우) */
.loc-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.loc-top .sec-head { margin: 0; }
.loc-map {
  width: 100%;
  max-width: 640px;       /* 지도를 컬럼에 꽉 채우지 않고 조금 작게 */
  justify-self: end;      /* 콘텐츠 오른쪽 끝에 정렬 */
  border: 1px solid var(--rule);
}

.groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(36px, 5vh, 56px);
}
.groups > div {
  padding: 28px 26px 32px;
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.groups h3 {
  margin: 0;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 700;
  color: var(--on-deep);
}
/* 한글 제목이 크게 앞에, 영어는 작은 라벨로 뒤에 */
.groups h3 .en {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-left: 9px;
  vertical-align: middle;
}
.groups > div > p {
  margin: 12px 0 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--on-deep-mute);
}
.groups ul { display: flex; flex-wrap: wrap; gap: 8px; }
.groups li {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 13px;
  color: var(--on-deep);
}

/* ── 선택 비교표 (같은 "처진 눈"이라도 원인이 다르면 수술이 다릅니다) ── */

.matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(36px, 5vh, 56px);
}
.matrix > div {
  padding: 28px 26px 30px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  transition: border-color var(--dur-fast) var(--ease);
}
.matrix > div:hover { border-color: var(--accent); }
.matrix .en {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.matrix h3 {
  margin: 8px 0 22px;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  color: var(--on-deep);
}
.matrix dl { margin: 0; }
.matrix dl > div {
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.matrix dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.matrix dd {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--on-deep-mute);
}

/* ── 금액표 (제증명 수수료 · 비급여 안내) ────────────────────
   법정 고지 항목이다. 읽기 쉬운 것이 최우선. */

.price-wrap {
  margin-top: clamp(36px, 5vh, 56px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow-x: auto;          /* 좁은 화면에서 표가 가로로 스크롤된다 */
}
.price {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
}
.price th {
  padding: 18px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--pill-bg);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.price td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule);
  color: var(--on-deep-mute);
  line-height: 1.6;
}
.price tr:last-child td { border-bottom: none; }
.price td:first-child {
  font-weight: 700;
  color: var(--on-deep);
  white-space: nowrap;
}
.price .won {
  text-align: right;
  font-weight: 700;
  color: var(--on-deep);
  white-space: nowrap;
}
.price .note { font-size: 13px; }
.price tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* ── 진료시간 표 ─────────────────────────────────────────── */

.hours-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(36px, 5vh, 56px);
}
.hours-grid > div {
  padding: 30px 28px 34px;
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.hours-grid .en {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.hours-grid h3 {
  margin: 8px 0 4px;
  font-size: clamp(21px, 1.8vw, 28px);
  font-weight: 700;
  color: var(--on-deep);
}
.hours-grid .days {
  font-size: 14px;
  color: var(--on-deep-mute);
  margin-bottom: 18px;
}
.hours-grid li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--on-deep-mute);
}
.hours-grid li b {
  font-weight: 600;
  color: var(--on-deep);
  flex-shrink: 0;
  font-size: clamp(15px, 1.2vw, 17px);
}
/* 진료 시간(값)을 크고 굵게, 밝게 — 한눈에 들어오게 */
.hours-grid li span {
  text-align: right;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-deep);
}

/* ── 의료진 ──────────────────────────────────────────────── */

/* 두 컬럼 equal-height 는 flex 가 그리드보다 안정적이다(중첩 margin/aspect 누락 회피).
   오른쪽(텍스트+저서)이 높이를 정하고, 왼쪽 사진이 그 바닥까지 늘어난다. */
.doctor {
  display: flex;
  align-items: stretch;
  gap: clamp(32px, 5vw, 72px);
}
.doctor > .photo {
  flex: 0.8 1 0;          /* 0.8fr : 1fr 비율 유지 */
  min-width: 0;
  aspect-ratio: auto;     /* 고정 4:5 해제 → 오른쪽 높이에 맞춰 늘어남 */
  border-radius: 4px;
}
.doctor > .photo > img { position: absolute; inset: 0; }   /* in-flow 높이 0 → 오른쪽이 높이 결정 */
.doctor > .from-right { flex: 1 1 0; min-width: 0; }
.doctor-name {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
}
.doctor-name strong {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-deep);
}
.doctor-name span { font-size: 15px; color: var(--accent); font-weight: 600; }

.career { margin-top: 30px; }
.career h3 {
  margin: 0 0 14px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 400;
}
.career li {
  position: relative;
  padding: 8px 0 8px 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--on-deep-mute);
}
.career li::before {
  content: "";
  position: absolute;
  left: 0; top: 17px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.career + .career { margin-top: 28px; }

/* 저서 */
.book {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  margin-top: clamp(36px, 5vh, 56px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--pill-bg);
}
/* 3/4 로 두면 책 표지(가로세로 0.71)가 cover 로 잘려 위쪽 제목과
   아래쪽 출판사 로고가 걸린다. 판형에 맞춰 5/7 로 둔다. */
.book .photo { aspect-ratio: 5 / 7; border-radius: 6px; }
.book h3 {
  margin: 0;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 700;
  color: var(--on-deep);
}
.book .sub { margin: 8px 0 0; font-size: 15px; color: var(--accent); }
.book .author { margin: 6px 0 0; font-size: 14px; color: var(--on-deep-mute); }
.book p.desc {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--on-deep-mute);
}

/* 논문 */
.papers { margin-top: clamp(36px, 5vh, 56px); }
.papers li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.papers .t {
  flex: 1 1 420px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-deep);
}
.papers .j {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--accent);
  white-space: nowrap;
}
.papers .y {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--on-deep-mute);
  white-space: nowrap;
}

/* ── FAQ 아코디언 ────────────────────────────────────────────
   <details>/<summary> 를 쓴다 — JS 0줄, 키보드·스크린리더 기본 지원. */

.faq {
  margin-top: clamp(36px, 5vh, 56px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq details:last-child { border-bottom: none; }

.faq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 26px;
  cursor: pointer;
  list-style: none;                 /* 기본 삼각형 제거 */
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 700;
  color: var(--on-deep);
  transition: background var(--dur-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--pill-bg); }

.faq summary .q {
  font-family: var(--font-en);
  font-size: 15px;
  color: var(--accent);
  flex-shrink: 0;
}
.faq summary .t { flex: 1; }

/* + / − 표시 */
.faq summary .mark {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule);
  color: var(--accent);
  font-size: 17px; line-height: 1;
  font-weight: 300;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.faq details[open] summary .mark {
  transform: rotate(45deg);         /* + 를 돌려 × 처럼 */
  border-color: var(--accent);
}

.faq .a {
  padding: 0 26px 26px 60px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--on-deep-mute);
}

/* ═══════════════════════════════════════════════════════════
   밝은 테마 전용 — 형태를 바꾼다
   기존 컴포넌트는 전부 "테두리 있는 상자"라 다 똑같아 보인다.
   여기서는 테두리를 걷어내고 얇은 선·여백·큰 이미지로 간다.
   ═══════════════════════════════════════════════════════════ */

.lit { background: var(--bg-deep); }

/* 밝은 배경에선 히어로 스크림이 필요 없다 — 사진 위 그라디언트만 */
.lit .sub-hero {
  background: var(--surface-2);
  min-height: 56svh !important;
}
.lit .sub-hero .scrim {
  background: linear-gradient(
    100deg,
    var(--surface-2) 0%,
    var(--surface-2) 42%,
    rgba(242, 236, 227, 0.72) 58%,
    rgba(242, 236, 227, 0) 88%
  );
}
.lit .sub-hero h1 { text-shadow: none; }
.lit .sub-hero .photo-bg > img { object-position: 78% center; }

/* 해시태그 칩 */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.tags li {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}

/* ── 수술정보 (아이콘 + 라벨 + 값, 상자 없음) ────────────── */

.opinfo {
  margin-top: clamp(36px, 5vh, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.opinfo .badge {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 26px;
}
.opinfo ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px 40px;
}
.opinfo li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.opinfo svg {
  flex-shrink: 0;
  width: 26px; height: 26px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.5;
}
.opinfo b {
  font-size: 15px;
  font-weight: 700;
  color: var(--on-deep);
}
.opinfo span {
  font-size: 15px;
  color: var(--on-deep-mute);
  margin-left: auto;
  padding-left: 12px;
}
/* 야간 섹션(#night)의 진료시간만 글씨를 키운다 — 다른 페이지의 수술정보 표는 그대로. */
.s-night .opinfo b,
.s-night .opinfo span { font-size: 18px; }
.s-night .opinfo svg { width: 30px; height: 30px; }
.s-night .opinfo .badge { font-size: 14px; }

/* ── 특장점 — 좌측 제목 고정 + 우측 스크롤 ────────────────── */

.spec {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.spec-title {
  position: sticky;
  top: calc(var(--header-h) + 80px);   /* 헤더 + 목차바 아래 */
}
.spec-title .en {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 14px;
}
.spec-title h2 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--on-deep);
}
.spec-title p {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--on-deep-mute);
}

/* 우측 항목 — 카드가 아니라 큰 이미지 + 텍스트, 사이는 얇은 선 */
.spec-list > li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(28px, 4vh, 48px) 0;
  border-bottom: 1px solid var(--rule);
}
.spec-list > li:first-child { padding-top: 0; }
.spec-list > li:last-child { border-bottom: none; }

.spec-list .photo {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
}
.spec-list .num {
  position: absolute;
  z-index: 4;
  top: 14px; left: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.spec-list .lead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.spec-list .lead::before { content: "✓"; }
.spec-list h3 {
  margin: 12px 0 0;
  font-size: clamp(19px, 1.7vw, 26px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--on-deep);
}
.spec-list p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--on-deep-mute);
}

/* ── 추천 대상 — Case 배지 카드 ──────────────────────────── */

.cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(36px, 5vh, 56px);
}
.cases li {
  padding: 40px 26px 44px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform var(--dur-fast) var(--ease);
}
.cases li:hover { transform: translateY(-6px); }
.cases .badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--accent);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
}
.cases p {
  margin: 20px 0 0;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.65;
  color: var(--on-deep);
}

/* ── VS 비교 ─────────────────────────────────────────────── */

.vs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(36px, 5vh, 56px);
}
.vs > div {
  padding: 32px 30px 36px;
  border-radius: 16px;
  background: var(--card);
}
.vs > div.mine {
  outline: 2px solid var(--accent);   /* 이음 쪽만 강조 */
  box-shadow: var(--shadow);
}
.vs h3 {
  margin: 0 0 20px;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  color: var(--on-deep);
}
.vs > div:not(.mine) h3 { color: var(--on-deep-mute); }
.vs li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--on-deep-mute);
}
.vs li::before {
  content: "○";
  flex-shrink: 0;
  color: var(--rule);
  font-size: 13px;
  line-height: 1.9;
}
.vs .mine li::before { content: "●"; color: var(--accent); }
.vs .mine li { color: var(--on-deep); }

/* 가운데 VS 배지 */
.vs::after {
  content: "VS";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ── 히어로 아치 컷 + 대형 반투명 워드마크 ────────────────── */

/* 히어로 하단을 곡선으로 도려낸다. 사진 아래가 부드럽게 페이지로 이어진다.
   z-index 는 1 — 사진(0)·스크림(1) 위, 콘텐츠(.inner, 2) 아래여야 한다.
   3 으로 두면 아치가 헤드라인과 태그 칩을 덮어버린다. */
.lit .sub-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -6%; right: -6%;
  bottom: -1px;
  height: clamp(48px, 7vw, 120px);
  background: var(--bg-deep);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* 콘텐츠가 곡선에 걸치지 않도록 아치 높이만큼 아래를 비워둔다 */
.lit .sub-hero {
  padding-bottom: clamp(88px, 11vw, 170px) !important;
}

/* 배경에 크게 깔리는 반투명 워드마크 */
.hero-mark-lg {
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: 12%;
  font-family: var(--font-en);
  font-size: clamp(60px, 11vw, 190px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  user-select: none;
}

/* ── 진행 단계 — 이미지 + 원형 번호 ──────────────────────── */

.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: clamp(36px, 5vh, 56px);
}
.flow figure { margin: 0; text-align: center; }

.flow .photo {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  margin-bottom: 34px;      /* 원형 번호가 걸칠 자리 */
  /* .photo 는 기본이 overflow:hidden 이라 경계에 걸친 번호의 아랫절반이 잘린다.
     여기서만 풀고, 대신 사진 자체에 라운드를 준다. */
  overflow: visible;
}
.flow .photo img { border-radius: 14px; }
/* 번호는 이미지 하단 경계에 걸친다 */
.flow .n {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35);
}
.flow h3 {
  margin: 0;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 700;
  color: var(--on-deep);
}
.flow p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--on-deep-mute);
}

/* ── SPECIAL POINT — 핵심 한 줄 알약 ─────────────────────── */

.point { margin-top: clamp(28px, 4vh, 44px); }
.point .label {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 14px;
}
/* 알약 배경은 흰색이면 안 된다 — .lit 섹션 절반이 이미 흰색이라 형체가 사라진다.
   연한 골드 필로 깔아야 어느 배경에서도 뜬다. */
.point p {
  margin: 0;
  display: inline-block;
  padding: 18px 32px;
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--on-deep);
}

/* 섹션 배경 리듬 — 크림 / 흰색 / 연그레이가 번갈아 나온다 */
.lit .section.sub.gray { background: #f0efec; }

/* ── 대형 워드마크 구분 띠 ───────────────────────────────── */

.strip {
  overflow: hidden;
  padding: clamp(28px, 4vh, 48px) 0;
  background: var(--bg-deep-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.strip .track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 60s linear infinite;
}
.strip span {
  white-space: nowrap;
  font-family: var(--font-en);
  font-size: clamp(38px, 5.5vw, 76px);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--rule);          /* 아주 연하게 — 장식이지 콘텐츠가 아니다 */
  padding-right: 40px;
}
@media (prefers-reduced-motion: reduce) {
  .strip .track { animation: none; }
}

/* ── 밝은 테마에서 기존 컴포넌트의 테두리를 걷어낸다 ───────── */

/* .steps 는 이제 토큰 기반 스텝바라 라이트 테마에서도 그대로 동작 — 별도 오버라이드 불필요 */

.lit .faq {
  border: none;
  border-radius: 0;
}
.lit .faq details { border-bottom: 1px solid var(--rule); }
.lit .faq summary { padding-left: 0; padding-right: 0; }
.lit .faq summary:hover { background: transparent; color: var(--accent); }
.lit .faq .a { padding-left: 34px; padding-right: 0; }

/* .lit 에선 --rule / --pill-bg 가 밝은 값으로 재정의되므로
   기본 .note-box / .warn-box 규칙이 그대로 어울린다 — 예외 규칙 불필요. */

/* 병변/항목 사전 — 격자선 대신 얇은 윗선 */
.lit .terms {
  border: none;
  border-radius: 0;
  background: transparent;
  gap: 0 clamp(24px, 3vw, 48px);
}
.lit .terms li {
  background: transparent !important;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}

/* 선택 비교표 — 흰 카드, 테두리 없이 그림자만 */
.lit .matrix > div {
  border: none;
  background: var(--card);
  box-shadow: var(--shadow);
}
.lit .matrix > div:hover { border: none; }

/* 체크리스트 */
.lit .checks li { border-bottom: 1px solid var(--rule); }

/* 2열 대비 (레이저 vs 수술) */
.lit .compare > div {
  border: none;
  background: var(--card);
  box-shadow: var(--shadow);
}

/* 사례 목록 */
.lit .case-list li {
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
}
.lit .case-list li:hover { background: transparent; }

/* 사진 없는 카드 */
.lit .why-card { box-shadow: var(--shadow); }
.lit .why-card.flat {
  background: transparent;
  box-shadow: none;
  border-top: 1px solid var(--rule);
  border-radius: 0;
}
.lit .why-card.flat .body { padding: 26px 0 30px; }

/* ── 페이지 하단 CTA ─────────────────────────────────────── */

.sub-cta {
  background: var(--bg-deep-2);
  text-align: center;
  border-top: 1px solid var(--rule);
}
.sub-cta h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-deep);
}
.sub-cta p {
  margin: 20px 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.85;
  color: var(--on-deep-mute);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
/* 버튼 — apple.com 형태(완전 알약 · 가는 글씨 · 부드러운 호버)를 따오되,
   색은 병원 브랜드(금색 --accent)를 유지한다. */
.cta {
  padding: 13px 27px;
  border-radius: 980px;
  border: 1px solid var(--rule);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--on-deep);
  transition: background .25s var(--ease),
              border-color .25s var(--ease),
              color .25s var(--ease),
              filter .25s var(--ease);
}
.cta:hover { border-color: var(--accent); background: var(--pill-bg); }
.cta.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-deep);
}
.cta.primary:hover { filter: brightness(1.06); background: var(--accent); }

/* 서브페이지의 푸터는 한 화면을 다 먹을 이유가 없다 */
.doc .s-foot {
  min-height: 0;
  align-items: stretch;
  border-top: 1px solid var(--rule);
}
.doc .foot-grid { flex: none; padding-bottom: 56px; }

/* ── 반응형 ──────────────────────────────────────────────── */

/* 우측 퀵메뉴가 떠 있는 화면(=데스크톱)에서는 본문이 그 아래로
   파고들지 않도록 좌우 패딩을 퀵메뉴 폭만큼 넓힌다.
   한쪽만 넓히면 가운데 정렬 섹션(히어로·야간·타이포)의 중심이 틀어지므로
   반드시 양쪽에 같이 준다. */
@media (min-width: 1025px) {
  .section,
  .jump {                                   /* 목차 바도 섹션과 같은 여백을 써야 정렬이 맞는다 */
    padding-left: calc(24px + var(--quick-w));
    padding-right: calc(24px + var(--quick-w));
  }
}

@media (max-width: 1280px) {
  .card { flex-basis: calc((100% - 26px * 2) / 3); }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  :root { --nav-h: 68px; --bar-h: 34px; }
  .ticker .track > span { font-size: 12px; }
  .ticker em { padding: 0 14px; }

  /* 태블릿·모바일에선 강제 스냅 해제 — 콘텐츠가 화면보다 길어질 수 있다 */
  #deck { scroll-snap-type: none; height: auto; overflow: visible; }
  .section { min-height: auto; padding: 88px 20px; }
  .s-hero, .s-night { min-height: 100svh; }

  .header { padding: 0 20px; gap: 16px; }
  .burger { display: block; }
  .tel { padding: 9px 16px; font-size: 14px; }

  /* 모바일 메뉴 — 헤더 아래로 펼쳐지는 패널 */
  .gnb {
    position: absolute;
    top: var(--header-h);
    left: 0;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px 20px 20px;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--rule);
    display: none;
  }
  .header.open .gnb { display: flex; }
  .gnb a { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
  .gnb a:last-child { border-bottom: none; }
  .gnb a::after { display: none; }
  /* 치료 항목 그룹도 세로 메뉴에선 한 줄씩, 전체폭 좌측 정렬로 쌓는다
     (데스크톱 align-items:center 를 풀지 않으면 가운데로 쏠린다) */
  .gnb-care { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }

  /* 메뉴가 화면보다 길어질 수 있다 (진료과목 8개가 펼쳐진 채 들어간다) */
  .gnb { max-height: calc(100svh - var(--header-h)); overflow-y: auto; }

  /* 데스크톱 드롭다운용 align-items:center 를 여기서 되돌린다.
     세로 메뉴에서 center 는 링크를 글자 폭만큼 쪼그라뜨려, 전체폭 구분선이 깨진다. */
  .gnb { align-items: stretch; align-self: auto; }

  /* 미용센터 = 탭하면 펼쳐지는 아코디언(드롭다운). 기본은 접힘.
     터치엔 hover 가 없으니 JS(.open 토글)로 여닫는다. */
  .gnb-item { display: block; align-self: auto; }
  .gnb-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* 펼침 캐럿 — 데스크톱 밑줄 ::after(위에서 display:none)를 여기서 되살려 화살표로 */
  .gnb-item > a::after {
    content: "";
    display: block;
    position: static;
    left: auto; bottom: auto;
    width: 8px; height: 8px;
    border: 0;
    border-right: 2px solid var(--on-deep-mute);
    border-bottom: 2px solid var(--on-deep-mute);
    background: none;
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease);
  }
  .gnb-item.open > a::after { transform: rotate(-135deg); }
  .mega {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: none;
    border: 0;
    box-shadow: none;
    /* display:none 대신 max-height 로 접어야 펼침이 부드럽게 애니메이션된다 */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s var(--ease);
  }
  .gnb-item.open .mega { max-height: 300px; }
  .mega-in { padding: 4px 0 6px; }
  .mega-head { display: none; }
  .mega ul { grid-template-columns: 1fr; gap: 0; }
  .mega li a {
    padding: 12px 0 12px 14px;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    border-left: 2px solid var(--rule);
  }
  .mega li a:hover { background: none; }
  .mega li img, .mega li em { display: none; }   /* 목록이 너무 길어진다 */
  .mega li i { display: inline; margin-left: 8px; }

  /* 시간축 — 좁은 화면에선 5열이 안 된다. 2열로 접고 잇는 선은 지운다
     (세로로 쌓인 마디를 가로선이 관통하면 아무 의미가 없다). */
  .stops { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .stops::before { display: none; }

  .s-record .inner { grid-template-columns: 1fr; }
  .s-record > .inner > .photo { aspect-ratio: 16 / 10; }
  .record-copy { border-left: none; padding-left: 0; }

  /* 전후 사진 — 3쌍을 가로로 두면 한 장이 너무 좁아진다 */
  .ba { grid-template-columns: 1fr; gap: 28px; }
  .ba .photo { aspect-ratio: 4 / 3; }

  .card { flex-basis: calc((100% - 20px) / 2); }
  .rail { gap: 20px; }

  /* 서브페이지 */
  /* 스텝바 → 좁은 화면에선 세로 타임라인 */
  .steps ol { flex-direction: column; }
  .steps li { flex: none; text-align: left; padding: 0 0 30px 66px; }
  .steps li::before { top: 0; left: 23px; width: 2px; height: 100%; }
  .steps .num { left: 23px; }
  .terms { grid-template-columns: repeat(2, 1fr); }
  .devices, .groups { grid-template-columns: 1fr; }
  .loc-top { grid-template-columns: 1fr; }   /* 좁은 화면: 제목 위, 지도 아래 */
  .split-2, .split-2.rev { grid-template-columns: 1fr; }
  .case-photos { grid-template-columns: 1fr; }
  .checks.cols { grid-template-columns: 1fr; }
  .split-2.rev > .shots { order: 2; }   /* 좁은 화면에선 제목이 사진보다 먼저 */
  /* 커스텀 사진 — 세로로 접히면 우측 정렬 대신 가운데로 */
  .device-figure { width: 66%; margin: 24px auto 0; }
  .anat-figure { width: 90%; margin: 24px auto 0; }
  .split-2 > .shots { width: 100%; max-width: none; }  /* 스택되면 사진은 전체 폭으로 */
  .case-list.cols { grid-template-columns: 1fr; }
  .book, .hours-grid { grid-template-columns: 1fr; }
  .doctor { flex-direction: column; }         /* 좁은 화면: 세로 스택 */
  .doctor > .photo { flex: none; aspect-ratio: 4 / 5; }   /* 스택되면 사진이 스스로 높이를 가져야 한다 */

  /* 미용센터 페이지 컴포넌트 */
  .spec { grid-template-columns: 1fr; }
  .spec-title { position: static; }        /* 좁은 화면에선 고정 해제 */
  .spec-list > li { grid-template-columns: 1fr; }
  .vs { grid-template-columns: 1fr; }
  .vs::after { display: none; }            /* 세로로 쌓이면 가운데 VS 배지가 어색하다 */
  .jump .inner { overflow-x: auto; scrollbar-width: none; }
  .jump .inner::-webkit-scrollbar { display: none; }
  .jump a { white-space: nowrap; padding: 15px 4px; }

  /* 푸터는 모바일에서 세로로 쌓이면 이미 충분히 길다 —
     100svh 강제 + align-content:center 를 풀지 않으면 위에 빈 공간이 생긴다 */
  .s-foot { min-height: auto; padding-top: 88px; }
  .foot-grid {
    flex: none;
    grid-template-columns: 1fr;
    gap: 44px;
    align-content: start;
  }

  .quick { display: none; }
}

@media (max-width: 640px) {
  /* 폰: 가로 워드마크 대신 콤팩트 로고로 스왑 */
  .brand .logo-wide { display: none; }
  .brand .logo-mark { display: block; height: 28px; }
  .tel span { display: none; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .card { flex-basis: 78%; }
  .grid4 { grid-template-columns: 1fr; }
  .stops { grid-template-columns: 1fr; }

  /* 좁은 화면에서도 상태 배지 + 마퀴를 함께 둔다. 배지는 좌측 고정(flex:none),
     마퀴는 남는 폭에서 흐른다. 배지 글씨·여백을 줄여 마퀴 자리를 확보한다. */
  .live { padding: 0 10px; font-size: 11px; }
  .ticker .track > span { font-size: 11px; }
  .ticker em { padding: 0 12px; }

  /* 서브페이지 */
  .terms { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  /* 사진은 좁은 화면에서도 한 장씩 크게 깔지 않고 두 장씩 나란히 — 스크롤을 줄인다.
     3장 세트(수술 단계)도 3열은 너무 좁으니 2열로 접어 2+1 로 보인다. */
  .shots,
  .shots:has(figure:nth-child(3)) { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .compare.single ul { grid-template-columns: 1fr; }
  .lesion-banner { grid-template-columns: 1fr; }
  .lb-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .sub-hero { min-height: 72svh !important; }
  .cta-row { flex-direction: column; }
  .cta { text-align: center; }
}