/* Layout: 흰 바탕 위에 가는 기준선으로 구획을 나누는 차분한 문서형 구성. 첫 화면은 청력검사표 한 장이 병원의 성격을 보여준다. */
:root {
  /* 색: 진한 파랑 하나를 기본색으로, 글자는 짙은 회청색, 구역 바탕은 옅은 회청색. 주황은 청력도 선과 주의 표시에만 쓴다. */
  --paper: #FFFFFF;
  --paper-deep: #F1F4F9;
  --card: #F7F9FC;
  --ink: #1F2A3A;
  --muted: #5B6678;
  --line: #DCE3EC;
  --accent: #1A4F8B;
  --accent-soft: #E6EEF8;
  --mark: #B85C0F;
  --photo: #FFFFFF;
  /* 예약 버튼: 노란 바탕에 짙은 남색 글자 (세브란스 홈페이지의 노란 강조색 참고). 다크 모드에서도 그대로 쓴다. */
  --cta: #FFD553;
  --cta-hover: #F5C631;
  --cta-ink: #1F2A3A;
  /* 진료일정 원장님 표시: 한지혁 원장 파랑, 이재용 원장 초록(진료일정 그림과 같은 계열), 일요일 빨강 */
  --han: #1A4F8B;
  --han-soft: #E6EEF8;
  --lee: #2E6B30;
  --lee-soft: #E5F2E2;
  --sun: #B42318;

  --font-display: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: clamp(2.125rem, 4.6vw, 3.25rem);
  --wrap: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0F1620;
    --paper-deep: #151E2A;
    --card: #1A2433;
    --ink: #E6ECF4;
    --muted: #9AA8BA;
    --line: #2A3648;
    --accent: #7FB0E8;
    --accent-soft: #1C2D44;
    --mark: #F0A55A;
    --photo: #F4F6F9;
    --han: #9CC3F0;
    --han-soft: #1C2D44;
    --lee: #9AD69A;
    --lee-soft: #1D3320;
    --sun: #FF8F85;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0F1620;
  --paper-deep: #151E2A;
  --card: #1A2433;
  --ink: #E6ECF4;
  --muted: #9AA8BA;
  --line: #2A3648;
  --accent: #7FB0E8;
  --accent-soft: #1C2D44;
  --mark: #F0A55A;
  --photo: #F4F6F9;
  --han: #9CC3F0;
  --han-soft: #1C2D44;
  --lee: #9AD69A;
  --lee-soft: #1D3320;
  --sun: #FF8F85;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper);
}
img { max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
p { margin: 0; }

.wrap {
  max-width: var(--wrap); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}

.eyebrow {
  font-family: var(--font-data); font-size: var(--step--1); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.todo { color: var(--mark); border-bottom: 1px dashed var(--mark); font-size: 0.92em; }
.dim { color: var(--muted); }

/* 머리글 */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1.25; }
.brand-mark { width: 40px; height: 40px; flex: none; display: block; }
.brand-text { display: flex; flex-direction: column; }
.brand strong { font-family: var(--font-display); font-size: var(--step-1); }
.brand-text span { font-family: var(--font-data); font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.nav { display: none; gap: 26px; font-size: 0.9375rem; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.call {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--cta); color: var(--cta-ink); text-decoration: none;
  padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.call:hover { background: var(--cta-hover); }
.call-quiet { background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 8px 14px; font-weight: 600; }
.call-quiet:hover { background: var(--accent-soft); }
.head-actions { display: flex; gap: 8px; align-items: center; }
@media (max-width: 520px) {
  .head-actions .num, .head-actions .long { display: none; }
  .brand-text span { display: none; }
  .brand { gap: 7px; }
  .brand-mark { width: 30px; height: 30px; }
  .site-head .wrap { gap: 12px; }
  .head-actions { gap: 6px; }
}
@media (min-width: 1000px) { .nav { display: flex; } }
/* 휴대폰·태블릿 메뉴 (☰). 화면 폭 1000px 이상에서는 가로 메뉴(.nav)를 쓰므로 숨긴다. */
.m-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
}
.m-menu > summary::-webkit-details-marker { display: none; }
.m-icon, .m-icon::before, .m-icon::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); }
.m-icon { position: relative; }
.m-icon::before, .m-icon::after { content: ""; position: absolute; left: 0; transition: transform .15s; }
.m-icon::before { top: -6px; }
.m-icon::after { top: 6px; }
.m-menu[open] .m-icon { background: transparent; }
.m-menu[open] .m-icon::before { transform: translateY(6px) rotate(45deg); }
.m-menu[open] .m-icon::after { transform: translateY(-6px) rotate(-45deg); }
.m-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  display: grid; padding: 8px 16px 16px; background: var(--paper);
  border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgb(0 0 0 / 0.08);
}
.m-nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; }
.m-nav a:last-child { border-bottom: 0; }
.m-nav a:hover { color: var(--accent); }
@media (min-width: 1000px) { .m-menu { display: none; } }
.btn-line {
  display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--ink); text-decoration: none; font-weight: 500; font-size: 0.9375rem;
}

/* 첫 화면 */
.hero .wrap { display: grid; gap: 48px; padding-block: 64px 72px; align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1.1fr 0.9fr; padding-block: 88px 96px; } }
.hero h1 { font-size: var(--step-4); margin-block: 18px 22px; letter-spacing: -0.01em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-badge { display: inline-block; margin: 0; padding: 8px 18px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--step-1); font-weight: 600; }
.hero-badge b { font-weight: 800; }
.hero .lede { font-size: var(--step-1); color: var(--muted); max-width: 32em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.creds { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem; }
.creds b { color: var(--ink); font-weight: 600; }

.schedule { margin: 0; display: grid; gap: 10px; justify-items: center; }
.schedule img { width: 100%; max-width: 520px; height: auto; border: 1px solid var(--line); border-radius: 6px; display: block; }
.schedule figcaption { font-size: var(--step--1); color: var(--muted); text-align: center; }
.schedule-full img { max-width: 718px; }
/* 메인 맨 위 사진: 대기실 배경 + 두 원장님 (메인사진.ps1). PC는 가로, 휴대폰은 hero-mobile.jpg */
.hero .wrap.hero-photo { display: block; padding-block: 24px 0; }
.hero-photo img { display: block; width: 100%; height: auto; border-radius: 8px; }
.hero .wrap.hero-photo + .wrap { padding-top: 40px; }
/* 진료일정 달력 (build.py schedule_block). 메인 첫 화면은 .sched-compact(이번 달만, 이름 첫 글자) */
.hero-sched { width: 100%; max-width: 520px; justify-self: center; }
.sched-note { font-size: var(--step--1); color: var(--muted); margin: 10px 0 0; }
.today-card { padding: 12px 16px; margin-bottom: 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; background: var(--card); }
.today-head { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.today-docs { margin: 2px 0 0; font-size: var(--step-1); font-weight: 700; color: var(--ink); }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: 0.875rem; }
.cal-legend .dr { display: inline-block; margin: 0; }
.cal-wrap + .cal-wrap { margin-top: 28px; }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.cal caption { text-align: left; font-weight: 700; font-size: var(--step-1); padding-bottom: 8px; }
.cal th { padding: 6px 0; font-size: 0.8125rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--ink); }
.cal th:first-child, .cal td.sun .cal-d { color: var(--sun); }
.cal td { height: 92px; padding: 6px; vertical-align: top; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.cal td:last-child { border-right: 0; }
.cal-d { display: block; margin-bottom: 4px; font-size: 0.9375rem; font-weight: 600; }
.dr { display: block; margin-top: 3px; padding: 1px 6px; border-radius: 4px; font-size: 0.8125rem; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr b { font-weight: 700; }
.dr small { font-size: 0.75rem; font-weight: 600; }
.dr-han { background: var(--han-soft); color: var(--han); }
.dr-lee { background: var(--lee-soft); color: var(--lee); }
.cal-off { display: block; margin-top: 3px; font-size: 0.75rem; color: var(--muted); }
.cal td.today { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.cal td.today .cal-d::after { content: " 오늘"; font-size: 0.6875rem; color: var(--accent); }
.cal td.past > * { opacity: 0.4; }
.cal-empty { padding: 16px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); }
.sched-compact .dr-rest { display: none; }
.sched-compact .cal td { height: 58px; padding: 3px 4px; }
.sched-compact .cal-d { margin-bottom: 1px; font-size: 0.8125rem; }
.sched-compact .dr { padding: 0 4px; font-size: 0.75rem; }
@media (max-width: 600px) {
  .cal td { height: 66px; padding: 3px; }
  .cal .dr-rest { display: none; }
  .dr { padding: 0 3px; font-size: 0.75rem; }
  .dr small { font-size: 0.6875rem; }
}
.audiogram { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 22px 22px 18px; margin: 0; }
.audiogram figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.audiogram figcaption strong { font-family: var(--font-display); font-size: var(--step-1); }
.audiogram figcaption span { font-family: var(--font-data); font-size: 0.75rem; color: var(--muted); }
.audiogram svg { display: block; width: 100%; height: auto; }
.ag-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.ag-band { fill: var(--accent-soft); }
.ag-axis { fill: var(--muted); font-family: var(--font-data); font-size: 10px; }
.ag-line { stroke: var(--mark); stroke-width: 2; fill: none; }
.ag-dot { fill: var(--card); stroke: var(--mark); stroke-width: 2; }
.ag-band-label { fill: var(--accent); font-family: var(--font-body); font-size: 10.5px; }
.audiogram .note { font-size: var(--step--1); color: var(--muted); margin-top: 8px; }

/* 안내 띠 */
.facts { background: var(--paper-deep); border-block: 1px solid var(--line); }
.facts .wrap { display: grid; gap: 20px; padding-block: 28px; margin-block: 0; }
@media (min-width: 760px) { .facts .wrap { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.fact dt { font-family: var(--font-data); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.fact dd { margin: 4px 0 0; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.fact dd small { display: block; color: var(--muted); font-size: 0.875rem; }
.fact-line { display: block; }

/* 공통 구획 */
.section .wrap { padding-block: 88px; }
.section + .section .wrap { border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 40em; }
.sec-head h2 { font-size: var(--step-3); }
.sec-head p { color: var(--muted); }

/* 귀 전문 클리닉 목록 */
.ear-list { display: grid; border-top: 1px solid var(--ink); }
.ear-item { display: grid; gap: 10px; padding-block: 26px; border-bottom: 1px solid var(--line); text-decoration: none; }
@media (min-width: 820px) { .ear-item { grid-template-columns: 220px 1fr; gap: 32px; align-items: baseline; } }
.ear-item h3 { font-size: var(--step-2); }
.ear-item p { color: var(--muted); max-width: 34em; }
a.ear-item h3::after { content: " →"; color: var(--accent); font-family: var(--font-body); font-weight: 400; font-size: 0.8em; }
a.ear-item:hover h3 { color: var(--accent); }

/* 귀·코·목 */
.ent { display: grid; gap: 16px; }
@media (min-width: 760px) { .ent { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.ent-col { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 26px 26px 22px; }
.ent-col h3 { font-size: var(--step-2); display: flex; align-items: baseline; gap: 10px; }
.ent-col h3 small { font-family: var(--font-data); font-size: 0.75rem; font-weight: 400; color: var(--muted); letter-spacing: 0.1em; }
.ent-col ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
.ent-col li { padding-block: 9px; border-top: 1px solid var(--line); }
.ent-col li a { text-decoration: none; }
/* 귀는 항목이 많아 넓은 화면에서 두 줄로 놓는다 */
@media (min-width: 1000px) { .ent { grid-template-columns: 2fr 1fr 1fr; } .ent-col.ear ul { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
.ent-col li a::after { content: " →"; color: var(--accent); }

/* 의료진 */
.doctors { display: grid; gap: 40px; }
.doc + .doc { border-top: 1px solid var(--line); padding-top: 40px; }
.doc { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; }
@media (min-width: 900px) { .doc { grid-template-columns: 240px 1fr; gap: 40px; } }
/* 원장님 사진은 원본 그대로 쓴다(자르지 않음). 원본 비율대로 보인다. */
.doc img { width: 100%; height: auto; background: var(--photo); border-radius: 4px; display: block; }
.doc h3 { font-size: var(--step-2); }
.doc .role { font-size: 0.875rem; color: var(--accent); margin-top: 2px; }
.doc dl { margin: 14px 0 0; display: grid; gap: 12px; }
.doc dt { font-family: var(--font-data); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.doc dd { margin: 0; }
.doc ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 0.9375rem; }
@media (max-width: 559px) { .doc { grid-template-columns: 1fr; } .doc img { max-width: 220px; } }

/* 검사 장비 */
.center-photo { display: grid; gap: 24px; align-items: center; margin-bottom: 56px; }
@media (min-width: 860px) { .center-photo { grid-template-columns: 380px 1fr; gap: 48px; } }
.center-photo img { width: 100%; max-width: 380px; height: auto; border-radius: 6px; display: block; }
.center-photo h3 { font-size: var(--step-2); margin-bottom: 10px; }
.center-photo p { color: var(--muted); }
.test-list { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 32px; }
.test-list li { break-inside: avoid; padding: 3px 0; }
.equip { display: grid; gap: 32px 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.eq { display: grid; gap: 6px; align-content: start; }
.eq img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--photo); border: 1px solid var(--line); border-radius: 6px; padding: 14px; margin-bottom: 8px; display: block; }
.eq .name { font-family: var(--font-data); font-size: 0.8125rem; color: var(--accent); }
.eq h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--step-1); }
.eq p { color: var(--muted); font-size: 0.9375rem; }

/* 수액 */
.band { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding: 28px 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.band h3 { font-size: var(--step-2); }
.band p { color: var(--muted); max-width: 40em; }

/* 병원 둘러보기: 사진 4장. 넓은 화면은 2열, 휴대폰은 1열 */
.gallery { display: grid; gap: 20px; }
@media (min-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; gap: 24px; } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; display: block; background: var(--card); }
.gallery figcaption { margin-top: 8px; font-size: 0.9375rem; color: var(--muted); }

/* 오실 때 챙겨 주세요 (메인, 자주 묻는 질문 위) */
.bring { padding: 24px 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.bring h3 { font-size: var(--step-1); margin: 0 0 10px; }
.bring ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
@media (min-width: 900px) { .bring ul { grid-template-columns: repeat(3, 1fr); gap: 8px 32px; } }

.map-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* 공지 띠: src/notices.json. 기간(start~end)이 지나면 빌드 때 빠지고, 이미 올린 페이지에서도 스크립트가 숨긴다. */
.notice-bar { background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.notice-bar ul { list-style: none; margin: 0; padding: 10px 0; display: grid; gap: 4px; }
.notice-bar li { font-size: 0.9375rem; line-height: 1.5; }
.notice-bar .tag { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: var(--paper); font-size: 0.8125rem; font-weight: 700; }
.notice-bar a { color: var(--accent); font-weight: 600; margin-left: 6px; }
.notice-bar .sample { color: var(--muted); font-size: 0.8125rem; margin-left: 6px; }

/* 질문 */
.faq { border-top: 1px solid var(--ink); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-data); font-weight: 400; color: var(--accent); font-size: 1.25rem;
}
.faq details[open] summary::after { content: "−"; }
.faq .ans { padding: 0 0 22px; color: var(--muted); max-width: 40em; display: grid; gap: 8px; }

/* 진료시간·오시는 길 */
.visit { display: grid; gap: 32px; }
@media (min-width: 860px) { .visit { grid-template-columns: 1fr 1fr; gap: 48px; } }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours caption { text-align: left; padding-bottom: 10px; }
.hours th, .hours td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours th { color: var(--muted); width: 7em; }
.hours-note { margin-top: 12px; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.addr { display: grid; gap: 18px; }
.addr .big { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.45; }
.addr .btn-line { justify-self: start; }
.parking { margin: 0; display: grid; gap: 12px; }
.parking div { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.parking dt { font-weight: 600; font-size: 0.9375rem; }
.parking dd { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.book { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-top: 40px; padding: 24px 28px; border-radius: 6px; background: var(--accent-soft); }
.book strong { font-family: var(--font-display); font-size: var(--step-1); display: block; }
.book p { color: var(--muted); font-size: 0.9375rem; }

/* 질환 페이지 */
.subnav { border-bottom: 1px solid var(--line); background: var(--paper-deep); }
.subnav .wrap { display: flex; gap: 6px 22px; flex-wrap: wrap; padding-block: 12px; font-size: 0.9375rem; }
.subnav a { text-decoration: none; color: var(--muted); }
.subnav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); }
.page-hero .wrap { padding-block: 56px 48px; display: grid; gap: 16px; max-width: var(--wrap); }
.page-hero h1 { font-size: var(--step-4); }
.page-hero .lede { font-size: var(--step-1); color: var(--muted); max-width: 36em; }
.crumbs { font-size: var(--step--1); color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.reviewed { font-size: var(--step--1); color: var(--muted); }

.block { display: grid; gap: 24px; padding-block: 44px; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .block { grid-template-columns: 220px 1fr; gap: 40px; } }
.block > h2 { font-size: var(--step-2); }
.block .body { display: grid; gap: 14px; max-width: 46em; }
.block .body p { color: var(--ink); }
.block .body h3 { font-size: var(--step-1); margin-top: 8px; }

.symptoms { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.symptoms li { padding: 14px 16px 14px 44px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); position: relative; }
.symptoms li::before {
  content: ""; position: absolute; left: 16px; top: 19px; width: 14px; height: 14px;
  border: 1.5px solid var(--accent); border-radius: 3px;
}
.causes { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.causes div { display: grid; gap: 4px; padding-block: 14px; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .causes div { grid-template-columns: 9em 1fr; gap: 20px; } }
.causes dt { font-weight: 600; }
.causes dd { margin: 0; color: var(--muted); }
.callout { padding: 20px 24px; border-radius: 6px; background: var(--accent-soft); display: grid; gap: 8px; }
.callout strong { font-family: var(--font-display); font-size: var(--step-1); }
.warn { padding: 20px 24px; border-radius: 6px; border: 1px solid var(--mark); display: grid; gap: 8px; }
.warn strong { color: var(--mark); }
.warn ul, .body ul.plain { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.figs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); margin-top: 8px; }
.figs figure { margin: 0; display: grid; gap: 6px; }
.figs img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--photo); border: 1px solid var(--line); border-radius: 6px; padding: 10px; display: block; }
.figs figcaption { font-size: 0.875rem; color: var(--muted); }
.figs figcaption b { color: var(--ink); font-weight: 600; display: block; }

/* 건강정보 글 */
.byline { font-size: 0.9375rem; color: var(--muted); }
.byline b { color: var(--ink); font-weight: 600; }
.prose { max-width: 44em; padding-block: 8px 24px; display: grid; gap: 16px; }
.prose > h2 { font-size: var(--step-2); margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-1); margin-top: 12px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.prose .figs { margin-block: 4px; }
.prose .faq { margin-top: 8px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9375rem; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--paper-deep); font-weight: 600; }
.compare tbody th { color: var(--muted); font-weight: 500; width: 7em; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.block .body.wide { max-width: none; }
@media (min-width: 860px) { .block.stack { grid-template-columns: 1fr; gap: 20px; } }
.fees { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.8125rem; line-height: 1.45; }
/* 개인정보 처리방침 표, 원장님 확인이 필요한 칸 표시 */
.ptable { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ptable th, .ptable td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.ptable thead th { background: var(--paper-deep); font-weight: 600; }
@media (max-width: 720px) { .ptable { font-size: 0.875rem; } .ptable th, .ptable td { padding: 6px 7px; } }
mark.todo { background: #FFE58A; color: #1F2A3A; padding: 0 4px; border-radius: 3px; }
.fees th, .fees td { border: 1px solid var(--line); padding: 6px 7px; text-align: left; vertical-align: top; }
.fees thead th { background: var(--paper-deep); font-weight: 600; text-align: center; vertical-align: middle; }
.fees tbody tr:nth-child(even) td { background: var(--card); }
.fees td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fees .table-scroll, .table-scroll:has(.fees) { border: 0; }
.refs { font-size: var(--step--1); color: var(--muted); display: grid; gap: 4px; padding-left: 1.3em; margin: 0; }
/* 의료진 소개 이름 아래 논문 목록 (작업/papers_to_html.py). 눌러서 펼친다 */
.papers { margin-top: 14px; }
.papers-title { margin: 0 0 8px; font-family: var(--font-data); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--muted); }
.papers .refs { gap: 8px; overflow-wrap: anywhere; list-style: none; padding-left: 0; }
.papers-more { margin-top: 0; }
.papers-more summary { display: inline-block; cursor: pointer; list-style: none; padding: 3px 12px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 0.875rem; font-weight: 600; }
.papers-more summary::-webkit-details-marker { display: none; }
.papers-more summary:hover { background: var(--accent-soft); }
.papers-more .less, .papers-more[open] .more { display: none; }
.papers-more[open] .less { display: inline; }
.papers-more summary .more::after { content: " ▾"; }
.papers-more summary .less::after { content: " ▴"; }
.papers-more .refs { margin-top: 10px; }
.related { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.related li { border-bottom: 1px solid var(--line); }
.related a { display: grid; gap: 2px; padding-block: 14px; text-decoration: none; }
.related a strong { font-weight: 600; }
.related a strong::after { content: " →"; color: var(--accent); font-weight: 400; }
.related a:hover strong { color: var(--accent); }
.related a span { font-size: 0.9375rem; color: var(--muted); }
.health-group { display: grid; gap: 16px; padding-block: 36px; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .health-group { grid-template-columns: 220px 1fr; gap: 40px; } }
.health-group h2 { font-size: var(--step-2); }
.health-group h2 a { text-decoration: none; }
/* 최신 연구 소식 */
.research-note { font-size: 0.9375rem; color: var(--muted) !important; padding: 12px 16px; background: var(--accent-soft); border-radius: 6px; }
.research-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.research-list li { display: grid; gap: 6px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.research-list h3 { font-size: var(--step-1); }
.research-meta { font-size: 0.875rem; color: var(--muted) !important; }
.research-meta a { text-decoration: none; font-weight: 600; }
.research-type { color: var(--accent); font-weight: 600; }
.research-draft { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--warn, #B85C0F); color: #fff; font-size: 0.75rem; font-weight: 700; }
.research-ref { font-size: 0.8125rem; color: var(--muted) !important; overflow-wrap: anywhere; }
/* 질환 안내 페이지: 귀·코·목 묶음 제목, 질환마다 '자세히 보기' */
.health-band { border-top: 2px solid var(--ink); margin-top: 24px; }
.health-band-title { margin: 0; padding-top: 20px; font-size: var(--step-2); font-weight: 800; color: var(--accent); }
.health-band .health-group:first-of-type { border-top: 0; }
.health-more { margin: 14px 0 4px; font-size: 0.8125rem; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
/* 질환 페이지 첫머리 아래 '자세히 보기' 바로가기 */
.more-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; margin-bottom: 8px; border-radius: 6px; background: var(--accent-soft); }
.more-top span { font-weight: 700; font-size: 0.875rem; margin-right: 4px; }
.more-top a { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; font-size: 0.875rem; }
.more-top a:hover { border-color: var(--accent); color: var(--accent); }
.related-page { border-top: 1px solid var(--ink); }
.related-page + .related { border-top: 0; }
.related-page strong { color: var(--accent); }
/* 건강정보 맨 위 질환 안내 바로가기 */
.health-index { display: grid; gap: 16px; padding-block: 8px 36px; }
.health-index h2 { font-size: var(--step-2); }
.health-index dl { margin: 0; display: grid; gap: 12px; }
.health-index dl > div { display: grid; grid-template-columns: 2.5em 1fr; gap: 12px; align-items: start; }
.health-index dt { font-weight: 600; padding-top: 7px; }
.health-index dd { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.health-index p { margin: 0; }
.health-index button { display: inline-block; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-deep); color: var(--ink); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.health-index button:hover { border-color: var(--accent); color: var(--accent); }
.health-index button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 바닥글 */
.foot { background: var(--paper-deep); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.foot .wrap { padding-block: 40px 48px; display: grid; gap: 16px; }
.foot strong { color: var(--ink); font-family: var(--font-display); font-size: var(--step-1); }
.foot .row { display: flex; flex-wrap: wrap; gap: 4px 20px; }

@media (prefers-reduced-motion: no-preference) {
  .ag-line { stroke-dasharray: 400; stroke-dashoffset: 0; animation: draw 1.6s ease-out both; }
  @keyframes draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
}