/* =========================================================
   서울맥치과 홈페이지 디자인 파일
   - 색상, 글꼴 크기 같은 기본값은 맨 위 :root 에 모아 두었어요.
     색을 바꾸고 싶으면 이 부분만 고치면 됩니다.
   ========================================================= */

:root {
  /* 색상 */
  --color-bg: #ffffff;          /* 기본 배경 (흰색) */
  --color-bg-soft: #f7f6f3;     /* 살짝 따뜻한 회백색 배경 */
  --color-text: #1f2430;        /* 본문 글자 */
  --color-text-muted: #5b6270;  /* 보조 글자 */
  --color-navy: #1e3a5f;        /* 서울맥치과 대표색 (남색) */
  --color-navy-dark: #152b47;   /* 버튼에 마우스를 올렸을 때 */
  --color-accent: #b89b72;      /* 포인트 색 (차분한 샴페인 골드) — 선·장식용 */
  --color-accent-text: #8a6b40; /* 작은 골드 글자용 (흰 배경 대비 4.9:1) */
  --color-line: #e6e3dd;        /* 구분선 */

  /* 크기 */
  --header-height: 72px;
  --container-width: 1200px;
  --radius: 12px;
}

/* ---------- 기본 설정 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height); /* 메뉴 클릭 시 제목이 상단 메뉴에 가려지지 않게 */
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all; /* 한글 단어가 중간에서 끊기지 않게 */
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* 한 단어처럼 붙어 있어야 하는 글자 (줄바꿈 금지) */
.nowrap {
  white-space: nowrap;
}

.icon {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  flex-shrink: 0;
}

/* 화면에는 안 보이지만 화면낭독기(시각장애인용 프로그램)는 읽는 글자 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 키보드로 이동할 때 현재 위치를 분명하게 표시
   11차: 밝은 배경에서 테두리 대비가 3:1에 못 미쳐(#b89b72, 흰 배경 2.64:1 · 회백색 2.44:1, WCAG 1.4.11)
   이미 정의된 진한 금색으로 바꿈(흰 배경 4.93:1 · 회백색 4.56:1). 어두운 하단에서는 기존 금색 유지(5.43:1). */
:focus-visible {
  outline: 3px solid var(--color-accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

.site-footer :focus-visible {
  outline-color: var(--color-accent);
}

/* '본문 바로가기' 링크: 평소엔 숨어 있다가 Tab 키를 누르면 나타남 */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--color-navy);
  color: #fff;
  border-radius: 8px;
}

.skip-link:focus {
  top: 12px;
}

/* 아직 정보가 확정되지 않은 자리표시 (눈에 띄게 표시)
   ⚠️ 이 표시가 붙은 글자는 공개 전에 반드시 실제 정보로 교체해야 합니다. */
.placeholder {
  color: var(--color-accent);
}

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 15px;
}

.btn-lg {
  min-height: 54px;
  padding: 0 28px;
  font-size: 17px;
}

.btn-primary {
  background: var(--color-navy);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-navy-dark);
}

.btn-outline {
  border-color: var(--color-navy);
  color: var(--color-navy);
  background: #fff;
}

.btn-outline:hover {
  background: var(--color-navy);
  color: #fff;
}

/* 가벼운 링크형 버튼 ('오시는 길'): 아이콘 + 밑줄 + 화살표 */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px; /* 손가락으로 누르기 편한 높이 */
  padding: 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-navy);
}

.btn-link-text {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.btn-link-arrow {
  transition: transform 0.2s;
}

.btn-link:hover .btn-link-arrow {
  transform: translateX(4px);
}

.btn-link:hover .btn-link-text {
  text-decoration-color: var(--color-navy);
}

/* =========================================================
   상단 메뉴 (header)
   ========================================================= */
.site-header {
  position: sticky; /* 스크롤해도 항상 위에 붙어 있음 */
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-line);
  backdrop-filter: blur(8px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: 24px;
}

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

.logo-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.02em;
}

.logo-sub {
  font-size: 12px; /* 12차 후보(승인 전): 10px → 12px. 대비 6.13:1은 그대로 */
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.12em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-list {
  display: flex;
  gap: 4px;
}

.nav-list a {
  display: block;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  border-radius: 8px;
  transition: color 0.2s, background-color 0.2s;
}

.nav-list a:hover {
  color: var(--color-navy);
  background: var(--color-bg-soft);
}

.header-actions {
  display: flex;
  gap: 8px;
}

/* 모바일 메뉴 버튼 (컴퓨터 화면에서는 숨김) */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

/* 줄 세 개(≡) 모양 아이콘 */
.menu-toggle-bar,
.menu-toggle-bar::before,
.menu-toggle-bar::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.menu-toggle-bar {
  top: 21px;
}

.menu-toggle-bar::before,
.menu-toggle-bar::after {
  content: "";
  left: 0;
}

.menu-toggle-bar::before {
  top: -7px;
}

.menu-toggle-bar::after {
  top: 7px;
}

/* 메뉴가 열리면 ≡ 아이콘이 X 모양으로 바뀜 */
.menu-toggle[aria-expanded="true"] .menu-toggle-bar {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar::before {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   첫 화면 (hero)
   ========================================================= */
.hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(184, 155, 114, 0.10), transparent 45%),
    linear-gradient(180deg, var(--color-bg-soft) 0%, #ffffff 100%); /* 아래로 갈수록 흰색 → 다음 섹션과 자연스럽게 이어짐 */
  padding: 64px 0 72px;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px; /* 왼쪽 글자 넓게, 오른쪽 사진 자리 고정 폭 */
  align-items: center;
  gap: 72px;
}

.hero-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
}

@media (max-width: 560px) {
  .hero-location {
    font-size: 14px;
    border-radius: 16px;
  }
}

.hero-title {
  margin: 0 0 24px;
  font-size: clamp(27px, 8.4vw, 52px); /* 화면 크기에 맞춰 글자 크기 자동 조절 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.hero-title strong {
  color: var(--color-navy);
  font-weight: 800;
}

/* 제목의 각 줄: 한 줄씩 나눠 보이고, 화면이 아주 좁으면 단어 단위로만 줄바꿈 */
.hero-title .line {
  display: block;
}

/* 컴퓨터 화면에서는 오른쪽 사진 자리를 고려해 제목 크기를 조절 */
@media (min-width: 961px) {
  .hero-title {
    font-size: clamp(40px, 3.8vw, 52px);
  }
}

.hero-desc {
  max-width: 34em;
  margin: 0 0 32px;
  text-wrap: pretty; /* 마지막 줄에 글자가 한두 개만 남지 않게 */
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* 오른쪽 사진 자리 (사진이 준비되면 교체) */
.hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 450px;
}

.hero-visual-card {
  position: absolute;
  inset: 0;
  border-radius: 200px 200px var(--radius) var(--radius); /* 위가 둥근 아치 모양 */
  background:
    linear-gradient(160deg, rgba(30, 58, 95, 0.08), rgba(184, 155, 114, 0.18)),
    var(--color-bg-soft);
  border: 1px solid var(--color-line);
}

/* =========================================================
   공통: 섹션 제목
   ========================================================= */
.section-title {
  position: relative;
  margin: 0 0 32px;
  padding-top: 20px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* 제목 위 짧은 골드 선 */
.section-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* =========================================================
   서울맥치과 한눈에 보기 (overview)
   ========================================================= */
.overview {
  padding: 60px 0 88px;
  background: var(--color-bg);
}

/* 컴퓨터: 3칸 배치 (병원 정보 | 진료시간 | 의료진+예약), 아래 주요 진료는 가로 전체 */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.overview-stack {
  display: grid;
  gap: 20px;
}

.info-card {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.info-card-wide {
  grid-column: 1 / -1;
}

.info-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
}

/* 제목 옆 작은 원형 아이콘 */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(184, 155, 114, 0.14);
  color: var(--color-navy);
}

.info-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* 병원 정보: 항목명(dt) + 내용(dd) */
.info-address {
  font-style: normal; /* address 태그의 기본 기울임 없애기 */
}

.info-list {
  display: grid;
  gap: 14px;
  margin: 0;
}

.info-list dt {
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.info-list dd {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

.info-tel {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
}

.info-tel:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 진료시간 표 */
.hours-table {
  width: 100%;
  border-collapse: collapse;
}

.hours-table th,
.hours-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 16px;
  text-align: left;
  vertical-align: middle;
}

.hours-table th {
  width: 40%;
  font-weight: 500;
  color: var(--color-text-muted);
}

.hours-table td {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums; /* 숫자 폭을 같게 해서 줄이 가지런히 */
}

.hours-table tr:first-child th,
.hours-table tr:first-child td {
  padding-top: 0;
}

.hours-table .is-closed td {
  color: var(--color-text-muted);
}

/* '야간진료' 작은 배지 */
.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #7a5f3a;
  background: rgba(184, 155, 114, 0.18);
  border-radius: 999px;
  vertical-align: 2px;
}

.hours-notes {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.hours-notes li::before {
  content: "· ";
}

/* 의료진 (두 분을 위아래로, 가는 선으로 구분) */
.info-doctors {
  display: grid;
  gap: 12px;
}

.info-doctors li + li {
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
}

.info-doctor {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.info-doctor strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}

/* 예약 링크 */
.info-booking {
  display: grid;
  gap: 8px;
}

.info-booking a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-bg-soft);
  border-radius: 10px;
  transition: background-color 0.2s;
}

.info-booking a:hover {
  background: #efece6;
}

/* 주요 진료 태그 */
.treatment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.treatment-tags li {
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
}

/* =========================================================
   다섯 가지 진료 원칙 (philosophy)
   - 카드 대신 '번호 + 제목 + 설명'을 가는 선으로 나눈 글 중심 목록
   ========================================================= */
.philosophy {
  padding: 96px 0;
  background: var(--color-bg-soft);
}

/* 컴퓨터: 왼쪽 소개 | 오른쪽 원칙 목록 */
.philosophy-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 72px;
  align-items: start;
}

.philosophy-intro {
  position: sticky; /* 스크롤하는 동안 제목이 왼쪽에 머무름 */
  top: calc(var(--header-height) + 40px);
}

.philosophy-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.principle-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ddd8cf;
}

.principle {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid #ddd8cf;
}

/* 01~05 번호: 가늘고 큰 골드 숫자 */
.principle-num {
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-accent-text); /* 12차 후보(승인 전): #b89b72(2.44~2.64:1) → 진한 금색(4.56~4.93:1) */
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.principle-title {
  margin: 4px 0 10px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.principle-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* =========================================================
   의료진 소개 (doctor)
   ========================================================= */
.doctors {
  padding: 96px 0;
  background: var(--color-bg);
}

.doctors-head {
  max-width: 640px;
  margin-bottom: 40px;
}

.doctors-head .section-title {
  margin-bottom: 16px;
}

.doctors-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* 컴퓨터: 두 분을 같은 크기로 나란히 */
.doctor-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* 카드: 왼쪽 사진 + 오른쪽 정보 */
.doctor-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  height: 100%;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.doctor-photo {
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-bg-soft);
}

.doctor-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 사진이 없을 때 보이는 임시 영역 (부드러운 색 + 작은 사람 아이콘) */
.doctor-photo-placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(170deg, var(--color-bg-soft) 0%, #ece6dc 100%);
}

.doctor-photo-placeholder svg {
  width: 70%;
  fill: rgba(30, 58, 95, 0.08);
}

.doctor-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* '대표원장' / '원장' 작은 표시 */
.doctor-role {
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #7a5f3a;
  background: rgba(184, 155, 114, 0.16);
  border-radius: 999px;
}

.doctor-name {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* 이름 위 전문과목 (같은 제목 태그 안에 있어 '전문과목 + 이름'이 한 문장으로 읽힘) */
.doctor-specialty {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: 0;
}

.doctor-desc {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.doctor-career {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
  font-size: 14px;
}

/* 공개용 설정: <body class="launch"> 이면 약력 [자리표시] 줄을 숨기고,
   자리표시만 있는 약력 목록은 구분선까지 통째로 숨김 */
body.launch .doctor-career .placeholder {
  display: none;
}

body.launch .doctor-career:not(:has(li:not(.placeholder))) {
  display: none;
}

/* 메인 카드에서 소개 글이 마지막 줄일 때 아래 여백 없애기 */
.doctor-info .doctor-desc:last-child {
  margin-bottom: 0;
}

/* 의료진 자세히 보기 링크 */
.doctors-more {
  margin: 20px 0 0;
  text-align: right;
}

/* 아래: 함께 진료하는 방식 안내 */
.doctors-note {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  margin-top: 24px;
  padding: 24px 28px;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
}

.doctors-note-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-navy);
}

.doctors-note p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* 컴퓨터지만 폭이 좁을 때: 사진 폭을 조금 줄이기 */
@media (max-width: 1180px) and (min-width: 961px) {
  .doctor-card {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 22px;
  }
}

/* =========================================================
   주요 진료 (services)
   - 하나의 흰 판을 가는 선으로 4칸(2×2) 나눈 구성
   ========================================================= */
.services {
  padding: 96px 0;
  background: var(--color-bg-soft);
}

.services-head {
  max-width: 680px;
  margin-bottom: 40px;
}

.services-head .section-title {
  margin-bottom: 16px;
}

.services-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* 칸 사이의 1px 틈으로 배경색이 비쳐 '가는 선'처럼 보이게 함 */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.service-area {
  display: flex;
  flex-direction: column;
  padding: 40px 44px;
  background: #fff;
}

/* 분류 이름 위 작은 영문 표시 (장식용) */
.service-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.service-title {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.service-desc {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* 하위 진료 목록: 2줄로 정돈, 각 항목 앞에 짧은 골드 선 */
.service-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}

.service-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.service-item::before {
  content: "";
  width: 10px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

/* 긴 진료명은 한 줄을 통째로 사용 (중간에 줄바꿈되지 않게) */
.service-items .is-wide {
  grid-column: 1 / -1;
}

/* 문장 속 작은 전화·예약 링크: 위아래 여백으로 '누르는 영역'만 넓힘
   (글줄 안의 링크라 위아래 여백은 화면 배치에 영향을 주지 않음) */
.info-tel,
.location-tel,
.faq-a a,
.footer-address a,
a.footer-link {
  padding: 12px 4px;
  margin: 0 -4px;
}

/* 주요 진료 섹션 하단 '전체 진료 보기' 링크 */
.services-more {
  margin: 20px 0 0;
  text-align: right;
}

/* 나중에 링크(a)로 바뀌었을 때의 모양 */
/* 링크가 된 진료명: 남색으로 구분하고, 위아래 여백으로 누르는 영역만 넓힘 (배치는 그대로) */
a.service-item {
  color: var(--color-navy);
  padding: 10px 0;
  margin: -10px 0;
}

a.service-item:hover {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =========================================================
   시설·디지털 진료 환경 (facility)
   - 진료 과정 순서(검사 → 치료 계획 → 보철 작업 → 진료 공간)대로
     가로로 이어지는 4칸 구성. 각 칸 위의 선이 과정의 흐름을 보여줌
   ========================================================= */
.facility {
  padding: 96px 0;
  background: var(--color-bg);
}

.facility-head {
  max-width: 680px;
  margin-bottom: 48px;
}

.facility-head .section-title {
  margin-bottom: 16px;
}

.facility-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.facility-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 각 칸 위의 선: 기본은 연한 선, 앞부분만 남색 */
.facility-item {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid var(--color-line);
}

.facility-item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--color-navy);
}

/* 나중에 넣을 장비 사진 자리 */
.facility-photo {
  margin: 0 0 20px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-bg-soft);
}

.facility-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 과정 이름 (검사 / 치료 계획 …) */
.facility-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #7a5f3a;
}

.facility-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(184, 155, 114, 0.14);
  color: var(--color-navy);
}

.facility-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.facility-title {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.facility-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* 컴퓨터지만 폭이 좁을 때: 2칸 × 2줄 */
@media (max-width: 1180px) {
  .facility-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
}

/* =========================================================
   자주 묻는 질문 (faq)
   - 왼쪽 제목 | 오른쪽 질문 목록, 질문을 누르면 답변이 펼쳐짐
   ========================================================= */
.faq {
  padding: 96px 0;
  background: var(--color-bg-soft);
}

.faq-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: 72px;
  align-items: start;
}

.faq-intro {
  position: sticky;
  top: calc(var(--header-height) + 40px);
}

.faq-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.faq-list {
  border-top: 1px solid #ddd8cf;
}

.faq-item {
  border-bottom: 1px solid #ddd8cf;
}

/* 질문 줄 (누르는 부분) */
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none; /* 기본 삼각형 표시 숨기기 */
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-q {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.faq-item summary:hover .faq-q,
.faq-item[open] .faq-q {
  color: var(--color-navy);
}

/* 오른쪽 + / − 표시 (가는 선 두 개) */
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) center / 1.5px 14px no-repeat;
}

.faq-item[open] summary::after {
  background:
    linear-gradient(var(--color-navy), var(--color-navy)) center / 14px 1.5px no-repeat;
}

/* 답변 */
.faq-a {
  padding: 0 40px 28px 4px;
}

.faq-a p {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-muted);
}

.faq-a p + p {
  margin-top: 10px;
}

.faq-a a {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
}

/* =========================================================
   오시는 길·진료시간 (location)
   - 컴퓨터: 왼쪽 정보 | 오른쪽 지도, 휴대폰: 정보 먼저
   ========================================================= */
.location {
  padding: 96px 0;
  background: var(--color-bg);
}

.location-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: stretch;
}

.location-info {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.location-address {
  font-style: normal;
}

.location-name {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
}

.location-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

/* 항목명 | 내용 을 한 줄에 나란히 */
.location-list > div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
}

.location-list dt {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.location-list dd {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

.location-tel {
  font-weight: 700;
  color: var(--color-navy);
}

.location-tel:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.location-hours {
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
}

.location-subtitle {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-navy);
}

.location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 지도 자리 */
.location-map {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.map-placeholder {
  position: relative;
  flex: 1;
  min-height: 360px;
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  /* 은은한 격자 무늬 (지도 느낌) */
  background:
    linear-gradient(rgba(30, 58, 95, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(30, 58, 95, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--color-bg-soft);
  overflow: hidden;
}

.map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(31, 36, 48, 0.12);
  color: var(--color-navy);
  transform: translate(-50%, -50%);
}

.map-pin svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

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

.map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-bg-soft);
  border-radius: 10px;
  transition: background-color 0.2s;
}

.map-link:hover {
  background: #efece6;
}

/* =========================================================
   마지막 상담 안내 (cta)
   - 배너 대신 글 중심, 가운데 정렬
   ========================================================= */
.cta {
  padding: 88px 0 96px;
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-line);
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 제목 위 짧은 골드 선 */
.cta-inner::before {
  content: "";
  width: 32px;
  height: 3px;
  margin-bottom: 20px;
  background: var(--color-accent);
  border-radius: 2px;
}

.cta-title {
  margin: 0 0 16px;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.cta-desc {
  max-width: 40em;
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* =========================================================
   푸터 (footer)
   ========================================================= */
.site-footer {
  padding: 56px 0 32px;
  background: var(--color-navy-dark);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.8;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}

.footer-name {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.footer-address {
  font-style: normal;
}

.footer-address a {
  color: #fff;
  font-weight: 600;
}

.footer-heading {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.footer-list {
  display: grid;
  gap: 2px;
}

.footer-link {
  color: rgba(255, 255, 255, 0.72);
}

a.footer-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 아직 페이지가 없는 항목: 링크처럼 보이지 않게 일반 글자로 */
.footer-link.is-disabled {
  cursor: default;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-policy {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.footer-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
}

/* 컴퓨터지만 폭이 좁을 때: 2칸 × 2줄 */
@media (max-width: 1180px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   하위 페이지 공통 (/doctor 등)
   ========================================================= */

/* 상단 메뉴에서 지금 보고 있는 페이지 표시 */
.nav-list a[aria-current="page"] {
  color: var(--color-navy);
  background: var(--color-bg-soft);
}

/* 하위 페이지 첫 화면 (메인보다 낮고 단순하게) */
.page-hero {
  padding: 48px 0 56px;
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, #ffffff 100%);
}

/* 이동경로: 홈 > 의료진 */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--color-text-muted);
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: 6px;
  color: var(--color-accent);
}

.breadcrumb a:hover {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-title {
  margin: 0 0 16px;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.page-lead {
  max-width: 40em;
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* 같은 페이지 안 바로가기 */
.page-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.page-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  transition: border-color 0.2s;
}

.page-jump a:hover {
  border-color: var(--color-navy);
}

/* 함께 보면 좋은 안내 */
.related {
  padding: 56px 0 64px;
  background: var(--color-bg);
}

.related-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
}

.related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  background: var(--color-bg-soft);
  color: var(--color-navy);
}

a.related-link:hover {
  background: #efece6;
}

/* 아직 페이지가 없는 항목: 링크처럼 보이지 않게 흐린 글자 */
.related-link.is-disabled {
  color: var(--color-text-muted);
  background: transparent;
  border: 1px dashed var(--color-line);
  cursor: default;
}

/* =========================================================
   의료진 페이지 (/doctor)
   ========================================================= */
.profile {
  padding: 72px 0;
  border-top: 1px solid var(--color-line);
  scroll-margin-top: var(--header-height);
}

.profile-inner {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.profile-photo {
  position: sticky;
  top: calc(var(--header-height) + 32px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-soft);
}

.profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* '대표원장' / '원장' 표시를 글자 길이만큼만 */
.profile-body .doctor-role {
  display: inline-block;
}

.profile-name {
  margin: 0 0 20px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.profile-name .doctor-specialty {
  font-size: 16px;
  margin-bottom: 4px;
}

/* 진료 철학 한 줄: 왼쪽 골드 선 */
.profile-quote {
  margin: 0 0 36px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--color-accent);
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-text);
}

/* 약력: 분류별 묶음을 2칸으로 */
.career-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
}

.career-title {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-line);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-accent-text);
}

.career-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.career-list li {
  position: relative;
  padding-left: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
}

.career-list li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 5px;
  height: 1.5px;
  background: var(--color-accent);
}

/* 두 전문의 진료 방식 */
.care-way {
  padding: 72px 0;
  background: var(--color-bg-soft);
}

.care-way-inner .section-title {
  margin-bottom: 16px;
}

.care-way p {
  max-width: 760px;
  margin: 0;
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-text-muted);
}

/* =========================================================
   오시는 길 페이지 (/location)
   - 위치 정보·지도·진료시간 표는 메인 '오시는 길' 섹션 스타일을 재사용
   ========================================================= */
.loc-section {
  padding: 64px 0 72px;
  border-top: 1px solid var(--color-line);
}

.loc-section .section-title {
  margin-bottom: 0; /* 아래 정보와의 간격은 location-info 의 gap 으로 */
}

.loc-hours {
  padding: 72px 0;
  background: var(--color-bg-soft);
}

/* 진료시간 표 (요일 | 진료시간 | 점심시간) */
.hours-wide-wrap {
  max-width: 760px;
  padding: 8px 28px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.hours-table-wide th,
.hours-table-wide td {
  padding: 16px 0;
  font-size: 17px;
}

.hours-table-wide th {
  width: 30%;
}

.hours-table-wide thead th {
  padding: 14px 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* 메인 표의 '첫 줄 위 여백 없음' 규칙을 이 표에서는 되돌림 */
.hours-table-wide tbody tr:first-child th,
.hours-table-wide tbody tr:first-child td {
  padding-top: 16px;
}

.hours-table-wide tbody tr:last-child th,
.hours-table-wide tbody tr:last-child td {
  border-bottom: 0;
}

.hours-table-wide td:last-child {
  font-weight: 500;
  color: var(--color-text-muted);
}

.loc-hours .hours-notes {
  max-width: 760px;
  margin-top: 20px;
  font-size: 15px;
}

/* 진료 의료진 (짧게) */
.loc-doctors {
  padding: 48px 0;
}

.loc-doctors-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.loc-doctors-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
}

.loc-doctors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

/* =========================================================
   진료안내 페이지 (/services)
   - 진료 분류마다 한 줄: 왼쪽 분류 설명 | 오른쪽 세부 진료 목록
   ========================================================= */
.svc-group {
  padding: 64px 0;
  border-top: 1px solid var(--color-line);
  scroll-margin-top: var(--header-height);
}

.svc-group:nth-child(even) {
  background: var(--color-bg-soft);
}

.svc-group-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 56px;
  align-items: start;
}

.svc-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.svc-group-title {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.svc-group-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* 세부 진료 목록: 2칸, 항목 사이 가는 선 */
.svc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-list-single {
  grid-template-columns: minmax(0, 1fr);
}

.svc-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
}

.svc-item h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.svc-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* 진료명: 앞에 짧은 골드 선 */
.svc-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
}

.svc-name::before {
  content: "";
  width: 12px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

/* 상세페이지가 생겨 링크가 되었을 때 */
a.svc-name {
  color: var(--color-navy);
  padding: 10px 0; /* 누르는 영역만 넓힘 (배치는 그대로) */
  margin: -10px 0;
}

a.svc-name::after {
  content: "→";
  font-size: 15px;
  color: var(--color-accent-text);
  transition: transform 0.2s;
}

a.svc-name:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

a.svc-name:hover::after {
  transform: translateX(3px);
}

/* 아직 상세페이지가 없는 진료: 일반 글자 */
.svc-name.is-disabled {
  cursor: default;
}

/* 의료진 · 오시는 길 안내 */
.svc-info {
  padding: 56px 0;
  border-top: 1px solid var(--color-line);
}

.svc-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.svc-info-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.svc-info-item .loc-doctors-title {
  margin: 0;
}

.svc-info-text {
  margin: 0;
  font-size: 16px;
  color: var(--color-text-muted);
}

.svc-info-item .btn-link {
  margin-top: auto;
  padding-left: 0;
}

/* =========================================================
   진료 상세페이지 공통 (/implant 등)
   - 진료 원칙: .philosophy / 검사와 진단: .facility / FAQ: .faq 스타일 재사용
   ========================================================= */

/* 첫 화면 H1 위 한 줄 문구 */
.page-kicker {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-accent-text);
}

.imp-section {
  scroll-margin-top: var(--header-height);
}

.imp-head {
  max-width: 680px;
  margin-bottom: 40px;
}

.imp-head .section-title {
  margin-bottom: 16px;
}

.imp-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* 검사와 진단: 3칸 */
.imp-diagnosis-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 치료 과정: 번호 단계 (컴퓨터 3칸 × 2줄) */
.imp-process {
  padding: 96px 0;
  background: var(--color-bg-soft);
}

.step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.step {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.step-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-navy);
}

.step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-muted);
}

/* 치료 전 확인사항: 3칸, 위쪽 골드 선 */
.imp-consider {
  padding: 96px 0;
}

.consider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.consider-item {
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  border-top: 2px solid var(--color-accent);
}

.consider-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
}

.consider-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.consider-item .consider-link,
.insurance-box .consider-link {
  margin-top: 16px;
}

/* 치료 후 관리: 왼쪽 설명 | 오른쪽 체크 목록 */
.imp-aftercare {
  padding: 96px 0;
  background: var(--color-bg-soft);
}

.imp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 56px;
  align-items: start;
}

.imp-split .imp-head {
  margin-bottom: 0;
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: grid;
  gap: 4px;
  padding: 20px 24px 20px 52px;
  position: relative;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

/* 체크 표시 */
.check-list li::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 22px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}

.check-list strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.check-list span {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* 건강보험 임플란트 안내 상자 */
.imp-insurance {
  padding: 72px 0;
}

.insurance-box {
  max-width: 860px;
  padding: 36px 40px;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-navy);
  border-radius: var(--radius);
  background: #fff;
}

.insurance-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
}

.insurance-box p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* 함께 보면 좋은 안내: 묶음별 */
.related-group + .related-group {
  margin-top: 24px;
}

.related-label {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* 치료 과정 단계가 많을 때 (8단계 등): 컴퓨터 4칸 */
.step-list-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* =========================================================
   신경치료 페이지 (/root-canal) — 진료 상세 공통 스타일 + 아래 몇 가지만 추가
   섹션 바탕: 흰색 / 웜그레이를 번갈아 사용
   ========================================================= */
.rct-about {
  padding: 96px 0;
  border-top: 1px solid var(--color-line);
}

.rct-body p {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-muted);
}

.rct-subtitle {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
}

/* 오해 바로잡기 안내 */
.rct-note {
  padding: 24px 28px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.rct-body .rct-note p {
  margin: 0;
  font-size: 15px;
}

.rct-body .rct-note .rct-note-title {
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}

.rct-when {
  background: var(--color-bg-soft);
}

.rct-callout {
  max-width: none;
  margin-top: 48px;
}

.rct-principles {
  background: var(--color-bg);
}

.rct-aftercare {
  padding: 96px 0;
}

/* 신경치료와 발치: 판단 기준 */
.rct-vs {
  padding: 96px 0;
  border-top: 1px solid var(--color-line);
}

.rct-factors {
  padding: 32px 36px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.rct-factors-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
}

.rct-factor-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rct-factor-list li {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 2px solid var(--color-accent);
}

.rct-factor-list strong {
  font-size: 16px;
  color: var(--color-text);
}

.rct-factor-list span {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.rct-factors-note {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* =========================================================
   잇몸치료 페이지 (/gum) — 진료 상세 공통 + 신경치료 페이지 스타일 재사용, 아래만 추가
   ========================================================= */

/* 휴대폰에서만 줄바꿈 */
.br-mobile {
  display: none;
}

/* 치은염 · 치주염 비교 */
.gum-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.gum-compare-item {
  padding: 22px 24px;
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-navy);
  border-radius: var(--radius);
}

.rct-body .gum-compare-item p {
  margin: 0;
  font-size: 15px;
}

.gum-compare-item strong {
  color: var(--color-text);
}

/* 치료 종류: 2칸 */
.gum-types {
  padding: 96px 0;
  border-top: 1px solid var(--color-line);
}

.consider-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
}

/* 건강보험 스케일링 */
.gum-insurance {
  border-top: 1px solid var(--color-line);
}

.gum-insurance-list {
  display: grid;
  gap: 10px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.gum-insurance-list li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-line);
  font-size: 15px;
  line-height: 1.7;
}

.gum-insurance-list strong {
  color: var(--color-navy);
}

.gum-insurance-list span {
  color: var(--color-text);
}

.insurance-box .gum-insurance-note {
  font-size: 15px;
}

.gum-insurance-source {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* =========================================================
   사랑니 페이지 (/wisdom-tooth) — 기존 진료 상세 스타일 재사용, 아래만 추가
   ========================================================= */

/* 발치 후 증상: 두 칸 상자 안 목록 */
.wt-compare {
  margin-bottom: 0;
}

.wt-compare .gum-compare-item {
  background: #fff;
}

.wt-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.wt-list li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
}

.wt-list li::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 6px;
  height: 1.5px;
  background: var(--color-accent);
}

.wt-list-note,
.wt-keep-note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* =========================================================
   치과 Q&A (/qna 목록 · /qna/질문 상세)
   ========================================================= */

/* 목록: 분류별 묶음 */
.qna-group {
  padding: 56px 0;
  border-top: 1px solid var(--color-line);
  scroll-margin-top: var(--header-height);
}

.qna-group:nth-of-type(even) {
  background: var(--color-bg-soft);
}

.qna-group-title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
}

.qna-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 질문 카드 (카드 전체가 링크) */
.qna-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color 0.2s;
}

a.qna-card:hover {
  border-color: var(--color-navy);
}

.qna-card-q {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
}

a.qna-card:hover .qna-card-q {
  color: var(--color-navy);
}

.qna-card-a {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.qna-card-more {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-text);
}

/* 병원 이용 질문 안내 */
.qna-intro-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.qna-intro-note a {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
}

/* 메인페이지 자주 묻는 질문 → 치과 Q&A 연결 문장 */
.faq-qna-link {
  margin-top: 16px;
}

/* 상세: 첫 화면 바로 아래 핵심 답변 */
.qna-answer {
  max-width: 860px;
  margin-top: 28px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-navy);
  border-radius: var(--radius);
}

.qna-answer-label {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent-text);
}

.qna-answer p:last-child {
  margin: 0;
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-text);
}

.qna-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--color-text-muted);
}

.qna-meta a {
  color: var(--color-navy);
  font-weight: 600;
}

/* 상세 본문 */
.qna-body {
  padding: 64px 0 72px;
}

.qna-body .container > * {
  max-width: 860px;
}

.qna-section + .qna-section {
  margin-top: 48px;
}

.qna-section h2 {
  margin: 0 0 14px;
  font-size: clamp(21px, 2.4vw, 25px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.qna-section p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-muted);
}

.qna-section p a {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
}

.qna-section .gum-compare {
  margin: 8px 0 0;
}

.qna-section .gum-compare-item p {
  margin: 12px 0 0;
  font-size: 14px;
}

.qna-section h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}

/* 본문 속 짧은 목록 (점) */
.qna-points {
  display: grid;
  gap: 6px;
  margin: 10px 0 14px;
  padding-left: 20px;
  list-style: disc;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.qna-points li::marker {
  color: var(--color-accent);
}

.gum-compare-item .qna-points {
  margin-bottom: 0;
}

.qna-section .rct-note {
  margin-top: 8px;
}

.qna-section .rct-note p {
  margin: 0;
  font-size: 15px;
}

.qna-section .rct-note .rct-note-title {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

/* 참고 자료 */
.qna-sources {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}

.qna-sources-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.qna-sources ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.qna-sources a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}

/* 컴퓨터지만 폭이 좁을 때 */
@media (max-width: 1180px) {
  .step-list-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rct-factor-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 컴퓨터지만 폭이 좁을 때 */
@media (max-width: 1180px) {
  .imp-diagnosis-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   태블릿·모바일 화면 (가로 960px 이하)
   ========================================================= */
@media (max-width: 960px) {
  :root {
    --header-height: 64px;
  }

  .menu-toggle {
    display: block;
  }

  /* 모바일 메뉴: 평소엔 숨겨 두고, 버튼을 누르면 아래로 펼쳐짐 */
  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px 24px 24px;
    background: #fff;
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 12px 24px rgba(31, 36, 48, 0.06);
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav-list {
    flex-direction: column;
    gap: 0;
  }

  .nav-list a {
    padding: 14px 4px;
    font-size: 17px;
    border-bottom: 1px solid var(--color-line);
    border-radius: 0;
  }

  .header-actions .btn {
    flex: 1;
    min-height: 48px;
  }

  .hero {
    padding: 48px 0 56px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  /* 모바일에서는 사진 자리를 숨겨 글자가 먼저 보이게 */
  .hero-visual {
    display: none;
  }

  /* 한눈에 보기: 태블릿은 2칸 */
  .overview {
    padding: 56px 0 64px;
  }

  .overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-stack {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 진료 원칙: 소개 위, 목록 아래로 */
  .philosophy {
    padding: 64px 0;
  }

  .philosophy-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .philosophy-intro {
    position: static;
  }

  /* 의료진: 한 분씩 위아래로 */
  .doctors {
    padding: 64px 0;
  }

  .doctor-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .doctors-note {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* 주요 진료: 한 분야씩 위아래로 */
  .services {
    padding: 64px 0;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-area {
    padding: 32px 28px;
  }

  /* 시설 */
  .facility {
    padding: 64px 0;
  }

  .facility-head {
    margin-bottom: 36px;
  }

  /* FAQ: 제목 위, 질문 목록 아래 */
  .faq {
    padding: 64px 0;
  }

  .faq-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .faq-intro {
    position: static;
  }

  /* 오시는 길: 정보 먼저, 지도 아래 */
  .location {
    padding: 64px 0;
  }

  .location-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .map-placeholder {
    flex: none;
    min-height: 240px;
  }

  /* 의료진 페이지: 사진 위, 정보 아래 */
  .profile {
    padding: 56px 0;
  }

  .profile-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .profile-photo {
    position: static;
    width: 100%;
    max-width: 280px;
  }

  .care-way {
    padding: 56px 0;
  }

  /* 진료안내 페이지: 분류 설명 위, 목록 아래 */
  .svc-group {
    padding: 48px 0;
  }

  .svc-group-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 진료 상세페이지 */
  .imp-diagnosis-list,
  .step-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .consider-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .imp-process,
  .imp-consider,
  .imp-aftercare {
    padding: 64px 0;
  }

  .imp-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .imp-insurance {
    padding: 48px 0;
  }

  /* 신경치료 페이지 */
  .rct-about,
  .rct-aftercare,
  .rct-vs {
    padding: 64px 0;
  }

  .rct-callout {
    margin-top: 36px;
  }

  /* 잇몸치료 페이지 */
  .gum-types {
    padding: 64px 0;
  }
}

/* 휴대폰 화면 (가로 560px 이하) */
@media (max-width: 560px) {
  .container {
    padding: 0 16px;
  }

  .hero-desc {
    font-size: 16px;
  }

  /* 버튼을 화면 너비에 맞춰 세로로 쌓기 */
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .hero-buttons .btn-link {
    align-self: center;
    margin-top: 4px;
  }

  /* 한눈에 보기: 휴대폰은 카드를 세로 한 줄로 */
  .overview-grid,
  .overview-stack {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .info-card {
    padding: 22px 20px;
  }

  .section-title {
    margin-bottom: 24px;
  }

  /* 진료 원칙: 번호를 제목 위에 두고 한 항목씩 읽기 */
  .philosophy-lead {
    font-size: 16px;
  }

  .principle {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 28px 0;
  }

  .principle-num {
    font-size: 30px;
  }

  .principle-title {
    margin-top: 0;
    font-size: 19px;
  }

  /* 의료진: 휴대폰에서는 사진을 작게 왼쪽에 두고 정보를 옆에 */
  .doctors-lead {
    font-size: 16px;
  }

  .doctor-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    padding: 20px;
  }

  .doctor-name {
    font-size: 20px;
  }

  .doctors-note {
    padding: 20px;
  }

  /* 주요 진료: 휴대폰 여백과 글자 크기 */
  .services-lead {
    font-size: 16px;
  }

  .service-area {
    padding: 28px 20px;
  }

  .service-title {
    font-size: 22px;
  }

  .service-items {
    gap: 10px 16px;
  }

  .service-item {
    font-size: 15px;
  }

  /* 시설: 한 항목씩 위아래로 */
  .facility-lead {
    font-size: 16px;
  }

  .facility-list {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .facility-item {
    padding-top: 24px;
  }

  .facility-title {
    font-size: 20px;
  }

  /* FAQ: 휴대폰 글자 크기와 여백 */
  .faq-lead {
    font-size: 16px;
  }

  .faq-item summary {
    padding: 20px 2px;
    gap: 16px;
  }

  .faq-q {
    font-size: 16px;
  }

  .faq-a {
    padding: 0 2px 22px;
  }

  .faq-a p {
    font-size: 15px;
  }

  /* 오시는 길: 버튼을 화면 너비에 맞춰 나란히 */
  .location-actions .btn {
    flex: 1;
    min-height: 48px;
  }

  .map-link {
    flex: 1;
    justify-content: center;
  }

  /* 마지막 상담: 버튼을 세로로 쌓아 누르기 편하게 */
  .cta {
    padding: 64px 0 72px;
  }

  .cta-desc {
    font-size: 16px;
  }

  .br-desktop {
    display: none;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .cta-buttons .btn {
    width: 100%;
  }

  .cta-buttons .btn-link {
    align-self: center;
  }

  /* 하위 페이지 공통 */
  .page-hero {
    padding: 32px 0 40px;
  }

  .page-lead {
    font-size: 16px;
  }

  /* 의료진 페이지: 사진을 작게, 약력은 한 칸 */
  .profile-photo {
    max-width: 200px;
  }

  .profile-name {
    font-size: 24px;
  }

  .profile-quote {
    font-size: 16px;
    margin-bottom: 28px;
  }

  .career-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .care-way p {
    font-size: 16px;
  }

  /* 오시는 길 페이지 */
  .loc-section {
    padding: 40px 0 48px;
  }

  .loc-hours {
    padding: 48px 0;
  }

  .hours-wide-wrap {
    padding: 4px 16px;
  }

  .page-title {
    font-size: 28px;
  }

  .hours-table-wide th,
  .hours-table-wide td {
    padding: 14px 0;
    font-size: 14px;
  }

  .hours-table-wide tbody tr:first-child th,
  .hours-table-wide tbody tr:first-child td {
    padding-top: 14px;
  }

  /* 진료시간과 점심시간이 붙어 보이지 않게 간격 */
  .hours-table-wide td:nth-child(2) {
    padding-right: 10px;
  }

  .hours-table-wide th {
    width: 30%;
  }

  .loc-doctors-list {
    flex-direction: column;
  }

  /* 진료안내 페이지: 세부 진료 한 줄씩 */
  .svc-list {
    grid-template-columns: 1fr;
  }

  .svc-item h3 {
    font-size: 17px;
  }

  .svc-info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .svc-info-item {
    padding: 22px 20px;
  }

  /* 진료 상세페이지: 한 칸씩 */
  .imp-diagnosis-list,
  .step-list {
    grid-template-columns: 1fr;
  }

  .step {
    padding: 22px 20px;
  }

  .imp-lead {
    font-size: 16px;
  }

  .check-list li {
    padding: 18px 18px 18px 46px;
  }

  .check-list li::before {
    left: 18px;
    top: 22px;
  }

  .insurance-box {
    padding: 24px 20px;
  }

  .insurance-title {
    font-size: 19px;
  }

  /* 신경치료 페이지: 한 칸씩 */
  .step-list-4,
  .rct-factor-list {
    grid-template-columns: 1fr;
  }

  .rct-note {
    padding: 20px;
  }

  .rct-factors {
    padding: 22px 20px;
  }

  /* 치과 Q&A: 한 칸씩 */
  .qna-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .qna-card {
    padding: 20px;
  }

  .qna-card-q {
    font-size: 17px;
  }

  .qna-group {
    padding: 40px 0;
  }

  .qna-answer {
    padding: 20px;
  }

  .qna-answer p:last-child {
    font-size: 16px;
  }

  .qna-body {
    padding: 44px 0 56px;
  }

  /* 잇몸치료 페이지: 한 칸씩 */
  .br-mobile {
    display: inline;
  }

  .gum-compare,
  .consider-grid-2 {
    grid-template-columns: 1fr;
  }

  .gum-insurance-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  /* 푸터: 한 줄에 하나씩 */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

}

/* 움직임을 줄이도록 설정한 사용자를 위해 애니메이션 끄기 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}

/* =========================================================
   지역 안내 보강 (메인 오시는 길 소개 문장 · 오시는 길 페이지 출발지별 안내)
   ========================================================= */
.location .section-title {
  margin-bottom: 16px;
}

.location-lead {
  max-width: 760px;
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.loc-routes .section-title {
  margin-bottom: 16px;
}

.loc-routes .imp-lead {
  max-width: 760px;
}

.loc-routes .check-list {
  max-width: 860px;
  margin-top: 28px;
}

.loc-routes-note {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--color-text-muted);
}

@media (max-width: 560px) {
  .location-lead,
  .loc-routes .imp-lead {
    font-size: 16px;
  }
}

/* =========================================================
   고지 페이지 (/privacy 개인정보처리방침 · /fees 비급여 진료비 안내)
   ========================================================= */

/* 초안·준비 단계 안내 상자 */
.legal-draft {
  max-width: 860px;
  margin-top: 28px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
}

.legal-draft p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.legal-draft .legal-draft-title {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

/* 병원 확인이 필요한 부분 표시 */
.legal-todo {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #7a5f3a;
  background: rgba(184, 155, 114, 0.18);
  border-radius: 999px;
  vertical-align: 1px;
  white-space: nowrap;
}

.legal-body {
  padding: 56px 0 88px;
  border-top: 1px solid var(--color-line);
}

.legal-section {
  max-width: 860px;
}

.legal-section + .legal-section {
  margin-top: 44px;
}

.legal-section h2 {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.2vw, 23px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.legal-section h3 {
  margin: 18px 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.legal-section p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-muted);
}

.legal-list {
  display: grid;
  gap: 4px;
  margin: 4px 0 10px;
  padding-left: 20px;
  list-style: disc;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.legal-list li::marker {
  color: var(--color-accent);
}

.legal-meta {
  display: grid;
  gap: 2px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
  font-size: 14px;
  color: var(--color-text-muted);
}

/* 비급여 진료비 표 */
.legal-section:has(.fee-table) {
  max-width: none;
}

.fee-table-wrap {
  margin-top: 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.fee-table {
  width: 100%;
  border-collapse: collapse;
}

.fee-table th,
.fee-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-line);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}

.fee-table thead th {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  background: var(--color-bg-soft);
  white-space: nowrap;
}

.fee-table tbody tr:last-child td {
  border-bottom: 0;
}

.fee-table td[data-label="금액"] {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.fee-table .fee-empty td {
  padding: 28px 18px;
  text-align: center;
  color: var(--color-text-muted);
}

/* 휴대폰·태블릿: 표를 항목별 카드처럼 세로로 (항목명과 금액이 한눈에 보이게) */
@media (max-width: 900px) {
  .fee-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .fee-table,
  .fee-table tbody,
  .fee-table tr,
  .fee-table td {
    display: block;
    width: 100%;
  }

  .fee-table tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-line);
  }

  .fee-table tbody tr:last-child {
    border-bottom: 0;
  }

  .fee-table td {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    padding: 3px 0;
    border: 0;
  }

  .fee-table td::before {
    content: attr(data-label);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .fee-table td[data-label="항목"],
  .fee-table td[data-label="증명서 종류"] {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
  }

  .fee-table td[data-label="금액"] {
    white-space: normal;
  }

  .fee-table .fee-empty td {
    display: block;
    padding: 12px 0;
  }

  .fee-table .fee-empty td::before {
    content: none;
  }
}

@media (max-width: 560px) {
  .legal-draft {
    padding: 18px 20px;
  }

  .legal-body {
    padding: 40px 0 64px;
  }

  .legal-section p {
    font-size: 15px;
  }
}

/* =========================================================
   충치치료 페이지 (/cavity) — 진료 상세 공통 스타일 재사용, 아래만 추가
   ========================================================= */

/* 카드 묶음 바로 아래에 오는 판단 기준 상자 */
.consider-grid + .rct-factors {
  margin-top: 48px;
}

/* 좁은 본문 칸 안에서는 2칸 */
.rct-body .rct-factors {
  padding: 28px 30px;
}

.rct-body .rct-factor-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 560px) {
  .consider-grid + .rct-factors {
    margin-top: 32px;
  }

  .rct-body .rct-factors {
    padding: 22px 20px;
  }

  .rct-body .rct-factor-list {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   건강보험 임플란트 페이지 (/insurance-implant) — 공통 스타일 재사용, 아래만 추가
   ========================================================= */

/* 본문 속 '한눈에 보는 기준' 상자 */
.ins-summary {
  max-width: none;
  margin-bottom: 24px;
  padding: 28px 30px;
}

.rct-body .ins-summary .gum-insurance-note {
  margin: 14px 0 0;
}

/* 표가 들어가는 섹션: 제목 아래 간격 */
.ins-table-section .fee-table-wrap {
  margin-top: 0;
}

/* 기준 표: 첫 칸(구분)과 둘째 칸(결과)을 또렷하게 */
.ins-table td:first-child {
  font-weight: 700;
  color: var(--color-text);
}

.ins-table td:nth-child(2) {
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
}

/* 소개 문장 속 링크 */
.ins-inline-link {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
}

@media (max-width: 900px) {
  .ins-table td:first-child {
    font-size: 16px;
  }

  .ins-table td:nth-child(2) {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .ins-summary {
    padding: 22px 20px;
  }
}

/* =========================================================
   크라운 페이지 (/crown) — 공통 스타일 재사용, 아래만 추가
   ========================================================= */

/* 재료 비교 표: 첫 칸(재료 이름)을 또렷하게 */
.crown-table td:first-child {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

/* 본문 안에 링크 버튼이 두 개 나란히 있을 때 */
.rct-body .consider-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}

@media (max-width: 900px) {
  .crown-table td:first-child {
    font-size: 17px;
    color: var(--color-navy);
    white-space: normal;
  }
}

/* =========================================================
   임플란트 페이지: 치료 후 생길 수 있는 문제 (사랑니 페이지 스타일 재사용, 간격만 추가)
   ========================================================= */
.imp-risk-later {
  margin-top: 40px;
}

@media (max-width: 560px) {
  .imp-risk-later {
    margin-top: 28px;
  }
}

/* ---------- 404 안내 페이지 (없는 주소로 들어왔을 때) ---------- */
.notfound {
  padding: 72px 0 96px;
}

.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.notfound-links {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
}

.notfound-links-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.notfound-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notfound-links a {
  display: inline-block;
  padding: 6px 0;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.notfound-links a:hover {
  color: var(--color-navy-dark);
}

@media (max-width: 560px) {
  .notfound {
    padding: 48px 0 64px;
  }

  .notfound-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   12차 시범(승인 전 후보): 모바일 하단 고정 상담 버튼 (진료 상세 8개 페이지)
   - 머리글의 전화·예약 버튼이 메뉴 안으로 숨는 폭(960px 이하)에서만 보임
   - 본문 마지막 상담 안내(.cta)나 하단(푸터)이 화면에 보이면 숨김 (js/main.js) → 중복·가림 방지
   - 화면 높이가 낮을 때(가로 모드, 화면 확대)는 고정하지 않고 본문 끝의 보통 버튼으로 표시
   ========================================================= */
.mobile-cta {
  display: none;
}

@media (max-width: 960px) {
  /* 하단 정보 맨 아래에 버튼 높이만큼 여백 (하단 남색 배경 안) — 버튼이 숨지 않는 경우에도 법정 링크를 가리지 않게.
     12차 1차 시안은 body에 여백을 줘서 페이지 맨 끝에 흰 띠(약 68px)가 생겼음 → 하단 안쪽 여백으로 바꿈 */
  .has-mobile-cta .site-footer {
    padding-bottom: calc(32px + 68px + env(safe-area-inset-bottom));
  }

  html:has(.has-mobile-cta) {
    scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); /* Tab 이동 시 포커스가 버튼 뒤에 숨지 않게 */
  }

  .mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90; /* 머리글(100)과 열린 메뉴보다 아래 */
    display: flex;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--color-line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  }

  .mobile-cta.is-hidden {
    visibility: hidden; /* 숨김 중에는 Tab 이동 대상에서도 빠짐 */
  }

  .mobile-cta-btn {
    flex: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }

  .mobile-cta-tel {
    border: 1px solid var(--color-navy);
    background: #fff;
    color: var(--color-navy);
  }

  .mobile-cta-book {
    border: 1px solid var(--color-navy);
    background: var(--color-navy);
    color: #fff;
  }
}

@media (max-width: 960px) and (max-height: 500px) {
  .has-mobile-cta .site-footer {
    padding-bottom: 32px;
  }

  html:has(.has-mobile-cta) {
    scroll-padding-bottom: 0;
  }

  .mobile-cta {
    position: static;
    margin: 0 16px 24px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .mobile-cta.is-hidden {
    visibility: visible;
  }
}

@media print {
  .mobile-cta {
    display: none;
  }
}

/* 배포 준비(2026-10-24): 아래 비급여·처리방침 전용 스타일은 4차 작업본(작업본/2026-10-16-4차/css/style.css 3903~4373줄)을 그대로 옮긴 것 */

/* =========================================================
   비급여 진료비 안내 (/fees) — 고지 지침 별표 2 양식 표
   - 비급여 전용 클래스(np-)만 사용합니다. 기존 .fee-table(크라운·건강보험 임플란트 표)은 건드리지 않습니다.
   - 1180px 이상: 표 / 1179px 이하: 한 항목을 카드 한 장으로 (모든 칸의 정보를 그대로 보여 줌)
   ========================================================= */
.np-intro {
  max-width: 860px;
}

.np-basis {
  display: grid;
  gap: 10px;
  margin: 8px 0 16px;
  padding: 18px 20px;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
}

.np-basis div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 4px 16px;
}

.np-basis dt {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.np-basis dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* 검색 */
.np-tools {
  margin-top: 40px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.np-tools[hidden] {
  display: none;
}

.np-search-label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
}

.np-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.np-search-input {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  font: inherit;
  font-size: 16px; /* 16px 미만이면 아이폰에서 입력할 때 화면이 확대됨 */
  color: var(--color-text);
  background: #fff;
  border: 1.5px solid #b9b4ab;
  border-radius: 10px;
}

.np-search-input::placeholder {
  color: #7a808b;
}

.np-search-input:focus-visible {
  border-color: var(--color-navy);
}

.np-search-clear {
  min-height: 48px;
  padding: 0 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
  background: #fff;
  border: 1.5px solid var(--color-navy);
  border-radius: 10px;
  cursor: pointer;
}

.np-search-clear:hover {
  background: var(--color-bg-soft);
}

.np-search-clear[hidden] {
  display: none;
}

.np-result {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--color-text-muted);
}

/* 분류 바로가기 */
.np-jump {
  margin-top: 24px;
}

.np-jump-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.np-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
}

.np-jump a:hover {
  border-color: var(--color-navy);
}

/* 분류 구역 */
.np-section {
  margin-top: 48px;
  scroll-margin-top: 16px; /* 상단 메뉴 높이는 html의 scroll-padding-top이 이미 반영 */
}

.np-section-title {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.2vw, 23px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.np-section-note {
  max-width: 860px;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.np-notice {
  margin-top: 56px;
}

/* 표 (넓은 화면) */
.np-table-wrap {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.np-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}

.np-table th,
.np-table td {
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.np-table thead th {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  vertical-align: middle;
  background: var(--color-bg-soft);
  border-left: 1px solid var(--color-line);
}

.np-table thead tr:first-child th:first-child {
  border-left: 0;
}

.np-table td {
  color: var(--color-text);
}

.np-table .np-name {
  font-weight: 600;
  min-width: 9em;
}

.np-table .np-code {
  white-space: nowrap;
  font-size: 13px;
}

.np-table .np-note {
  min-width: 11em;
}

.np-table-act td:nth-child(1),
.np-table-act td:nth-child(2),
.np-table-material td:nth-child(1) {
  min-width: 6.5em;
}

.np-table .np-cost {
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
  text-align: right;
}

.np-table .np-num,
.np-table .np-date {
  white-space: nowrap;
  text-align: right;
}

.np-table .np-ox {
  text-align: center;
}

.np-table .np-note {
  color: var(--color-text-muted);
}

.np-table .np-group-head th {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  text-align: left;
  background: #fbfaf8;
}

.np-table .np-empty td,
.np-table .np-nomatch td {
  padding: 22px 16px;
  color: var(--color-text-muted);
  text-align: center;
}

.np-table tbody:last-of-type tr:last-child td {
  border-bottom: 0;
}

.np-table tr[hidden],
.np-table tbody[hidden] {
  display: none;
}

/* 좁은 화면: 한 항목 = 카드 한 장 (12칸 표가 들어가지 않는 1179px 이하) */
@media (max-width: 1179px) {
  .np-table-wrap {
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .np-table,
  .np-table tbody,
  .np-table tr,
  .np-table td,
  .np-table th {
    display: block;
    width: 100%;
  }

  .np-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .np-table tbody + tbody {
    margin-top: 12px;
  }

  .np-table .np-group-head th {
    padding: 4px 2px 8px;
    font-size: 15px;
    background: transparent;
    border: 0;
  }

  .np-table tr.np-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
  }

  .np-table tr.np-item td {
    display: grid;
    grid-template-columns: 136px 1fr; /* 글자 크기와 상관없이 값 시작 위치를 맞춤 */
    gap: 12px;
    padding: 7px 0;
    font-size: 15px;
    text-align: left;
    white-space: normal;
    border-bottom: 1px dashed var(--color-line);
  }

  .np-table tr.np-item td:last-child {
    border-bottom: 0;
  }

  .np-table tr.np-item td::before {
    content: attr(data-label);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  /* 카드 맨 위: 명칭 → 구분 → 비용 순으로 먼저 보이게 */
  .np-table tr.np-item .np-name {
    order: -3;
    display: block;
    padding: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    border-bottom: 0;
  }

  .np-table tr.np-item .np-name::before {
    display: none;
  }

  .np-table tr.np-item .np-sub {
    order: -2;
  }

  .np-table tr.np-item .np-cost {
    order: -1;
    font-size: 18px;
  }

  .np-table .np-empty td,
  .np-table .np-nomatch td {
    padding: 20px 16px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
  }
}

@media (max-width: 560px) {
  .np-basis div {
    grid-template-columns: 1fr;
  }

  .np-tools {
    padding: 18px 16px;
  }

  .np-search-clear {
    flex: 1 1 100%;
  }

  .np-table tr.np-item {
    padding: 14px 14px;
  }

  .np-table tr.np-item td {
    grid-template-columns: 118px 1fr;
  }
}

@media print {
  .np-tools,
  .np-jump {
    display: none !important;
  }
}

/* 개인정보처리방침 (/privacy) — 목차와 "해당하는 경우에만" 표시 */
.pv-toc {
  margin: 20px 0 0;
  padding: 18px 22px;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
}

.pv-toc-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.pv-toc ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.6;
}

.pv-toc a {
  display: inline-block;
  padding: 6px 0;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-section[id^="pv-"] {
  scroll-margin-top: 16px;
}

.pv-cond {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text-muted);
  vertical-align: 3px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
}

.pv-internal-note {
  padding: 12px 14px;
  font-size: 14px !important;
  background: rgba(184, 155, 114, 0.1);
  border-radius: 8px;
}

/* 지역 상담 안내 (진료 페이지 '함께 보면 좋은 안내' 위) — 2026-10-26 */
.related-area {
  margin-bottom: 40px;
}

.related-area-text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text);
  word-break: keep-all;
}

/* =========================================================
   사진 (2026-10-26 추가)
   ========================================================= */
/* 첫 화면 오른쪽: 아치 모양 안에 원장 사진 */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 200px 200px var(--radius) var(--radius);
}

/* 병원 둘러보기 */
.tour {
  margin-top: 64px;
}

.tour-title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
}

.tour-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour-item figure {
  margin: 0;
}

.tour-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--color-bg-soft);
}

.tour-item figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .tour {
    margin-top: 48px;
  }

  .tour-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* 휴대폰·태블릿 첫 화면에도 사진 표시 (글자·버튼 아래, 가로 사진) — 2026-10-26 */
@media (max-width: 960px) {
  .hero-inner {
    gap: 20px;
  }

  .hero-visual {
    display: block;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    max-height: none;
    order: -1;
  }

  .hero-visual-card,
  .hero-photo {
    border-radius: var(--radius);
    object-position: 50% 40%;
  }
}

/* 진료 페이지·오시는 길 첫 화면 아래 사진 */
.page-photo {
  margin: 32px 0 0;
}

.page-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 10px;
  background: var(--color-bg-soft);
}

@media (max-width: 560px) {
  .page-photo {
    margin-top: 24px;
  }

  .page-photo img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 20px;
  }
}

/* 첫 화면 사진: 가로 사진을 크게, 덜 자르게 (2026-10-26) */
.hero-visual-card,
.hero-photo {
  border-radius: var(--radius);
}

@media (min-width: 961px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: 48px;
  }

  .hero-visual {
    aspect-ratio: 3 / 2;
    max-height: none;
  }
}

/* =========================================================
   첫 화면: 전체 폭 배경 슬라이드 + 어두운 막 위 흰 글씨 (2026-10-26)
   사진 5장 x 3초 = 15초 반복, 각 사진은 천천히 확대되며 겹쳐 바뀜
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(680px, calc(100vh - var(--header-height, 72px)));
  padding: 96px 0;
  background: #1c2533;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide {
  opacity: 0;
  animation: heroSlide 15s linear infinite;
}

.hero-slide:nth-child(3) { animation-delay: 3s; }
.hero-slide:nth-child(4) { animation-delay: 6s; }
.hero-slide:nth-child(5) { animation-delay: 9s; }
.hero-slide:nth-child(6) { animation-delay: 12s; }

@keyframes heroSlide {
  0%   { opacity: 0; transform: scale(1); }
  4%   { opacity: 1; }
  20%  { opacity: 1; }
  24%  { opacity: 0; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* 글자가 잘 보이도록 왼쪽을 어둡게 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(16, 26, 42, 0.82) 0%, rgba(16, 26, 42, 0.6) 45%, rgba(16, 26, 42, 0.18) 100%);
}

.hero .hero-inner {
  display: block;
  width: 100%;
}

.hero-text {
  max-width: 640px;
}

.hero-location {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

.hero-title,
.hero-title strong {
  color: #fff;
}

.hero-title strong {
  color: #e6cfa6;
}

.hero-desc {
  color: rgba(255, 255, 255, 0.88);
}

.hero .btn-primary {
  background: #fff;
  color: var(--color-navy);
}

.hero .btn-primary:hover {
  background: #e9edf3;
}

.hero .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.hero .btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.hero .btn-link {
  color: #fff;
}

.hero .btn-link:hover .btn-link-text {
  text-decoration-color: #fff;
}

@media (max-width: 960px) {
  .hero {
    min-height: 0;
    padding: 56px 0 64px;
  }

  /* 휴대폰은 위아래로 고르게 어둡게 */
  .hero::after {
    background: linear-gradient(180deg, rgba(16, 26, 42, 0.55) 0%, rgba(16, 26, 42, 0.75) 100%);
  }
}

/* 움직임 줄이기 설정을 켠 사용자는 첫 사진만 고정해서 보여줌 */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none;
  }
}

/* 약도 이미지 (지도 자리) — 2026-10-26 */
.location-map-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
}

/* 진료과목 아이콘 */
.subject-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}

.subject {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 8px;
  border-radius: var(--radius);
  color: var(--color-text);
  text-align: center;
  transition: background 0.2s;
}

.subject:hover {
  background: var(--color-bg-soft);
}

.subject img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(30, 58, 95, 0.08);
}

.subject-name {
  font-size: 16px;
  font-weight: 600;
  word-break: keep-all;
}

.page-hero .subject-list {
  margin: 32px 0 0;
}

@media (max-width: 960px) {
  .subject-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .subject img {
    width: 76px;
    height: 76px;
  }

  .subject-name {
    font-size: 14px;
  }
}

/* 오시는 길: 지역별 안내 링크 */
.area-links {
  margin-top: 32px;
}

/* 병원소개: 기본 정보 표 */
.fact-list {
  margin: 0;
  border-top: 1px solid var(--color-line);
}

.fact-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-line);
}

.fact-row dt {
  font-weight: 700;
  color: var(--color-navy);
}

.fact-row dd {
  margin: 0;
  line-height: 1.7;
  word-break: keep-all;
}

@media (max-width: 560px) {
  .fact-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* =========================================================
   소개·진료 페이지 구성 개편 (2026-10-26, 마곡베스트치과 구성 참고 — 글·사진은 서울맥치과 자료)
   ========================================================= */

/* 페이지 첫머리: 배경의 흐린 영어 큰 글씨 + 진료명 강조 */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
}

.page-hero .container {
  position: relative;
}

.page-hero-mark {
  position: absolute;
  right: 0;
  bottom: -40px;
  z-index: 0;
  font-size: clamp(64px, 11vw, 150px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(30, 58, 95, 0.12);
  pointer-events: none;
  user-select: none;
}

.page-hero .breadcrumb,
.page-hero .page-kicker,
.page-hero .page-title,
.page-hero .page-lead,
.page-hero .page-jump,
.page-hero .subject-list,
.page-hero .page-photo {
  position: relative;
  z-index: 1;
}

.page-hero .page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.page-hero .page-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}

.page-title {
  font-size: clamp(32px, 4.6vw, 52px);
}

.title-accent {
  color: var(--color-navy);
}

.page-title .title-accent {
  color: var(--color-accent-text);
}

/* 작은 영어 분류 표시 (선 + 글자) */
.eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-accent-text);
}

.eyebrow-line::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}

/* 진료 상세: 이런 경우 상담해 보세요 */
.self-check-wrap {
  padding: 8px 0 24px;
}

.self-check {
  padding: 28px 32px;
  border: 1px solid #dfe6ef;
  border-radius: 16px;
  background: linear-gradient(180deg, #f5f8fc 0%, #ffffff 100%);
}

.self-check-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-accent-text);
}

.self-check-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
}

.self-check-list {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.self-check-list li {
  position: relative;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
}

.self-check-list li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 1.5px solid var(--color-navy);
  border-radius: 4px;
}

.self-check-list li::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 50%;
  width: 6px;
  height: 9px;
  margin-top: -6px;
  border: solid var(--color-navy);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.self-check-note {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* 진료안내: 핵심 진료 사진 카드 */
.core-care {
  padding: 72px 0 24px;
}

.core-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0 64px;
  padding: 0;
  list-style: none;
}

.core-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  border-radius: 18px;
  background: var(--color-navy);
  color: #fff;
}

.core-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.core-card:hover img {
  transform: scale(1.05);
}

.core-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 26, 42, 0) 40%, rgba(16, 26, 42, 0.8) 100%);
}

.core-card-body {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.core-card-body strong {
  font-size: 24px;
  font-weight: 700;
}

.core-card-body span {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* 진료안내: 일반 진료 목록 */
.care-rows {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--color-text);
}

.care-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text);
  transition: background 0.2s;
}

.care-row:hover {
  background: var(--color-bg-soft);
}

.care-row strong {
  font-size: 18px;
}

.care-row span {
  color: var(--color-text-muted);
}

.care-row em {
  font-style: normal;
  font-size: 14px;
  color: var(--color-accent-text);
}

/* 병원소개: 한 줄 약속 */
.promise-quote {
  padding: 72px 0;
  text-align: center;
  background: var(--color-bg-soft);
}

.promise-quote-text {
  margin: 0 0 16px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
  word-break: keep-all;
}

.promise-quote-by {
  margin: 0;
  font-size: 15px;
  color: var(--color-accent-text);
}

/* 병원소개: 진료 원칙을 카드로 */
.principles-cards .philosophy-inner {
  grid-template-columns: 1fr;
  gap: 32px;
}

.principles-cards .philosophy-intro {
  position: static;
}

.principles-cards .principle-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.principles-cards .principle {
  position: relative;
  display: block;
  padding: 28px 24px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #fff;
}

.principles-cards .principle-num {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 40px;
  opacity: 0.5;
}

/* 병원소개: 사진 STEP 진료 과정 */
.steps-photo {
  padding: 80px 0;
}

.photo-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.photo-step {
  position: relative;
}

.photo-step img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

.photo-step-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-navy);
}

.photo-step h3 {
  margin: 16px 0 6px;
  font-size: 19px;
  color: var(--color-text);
}

.photo-step p {
  margin: 0;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* 상담 안내 띠: 짙은 남색 */
.cta {
  padding: 72px 0;
  background: #fff;
  border-top: 0;
}

.cta-inner {
  padding: 64px 32px;
  border-radius: 24px;
  background: radial-gradient(circle at 80% 0%, #2b5280 0%, #1b3354 45%, #12233b 100%);
}

.cta-title {
  color: #fff;
}

.cta-desc {
  color: rgba(255, 255, 255, 0.82);
}

.cta .btn-primary {
  background: #fff;
  color: var(--color-navy);
}

.cta .btn-primary:hover {
  background: #e9edf3;
}

.cta .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.cta .btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

@media (max-width: 960px) {
  .core-cards,
  .photo-steps,
  .principles-cards .principle-list {
    grid-template-columns: 1fr 1fr;
  }

  .care-row {
    grid-template-columns: 1fr auto;
  }

  .care-row span {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 560px) {
  .page-hero {
    padding: 40px 0 48px;
  }

  .page-hero-mark {
    bottom: -18px;
  }

  .self-check {
    padding: 22px 18px;
  }

  .core-cards,
  .photo-steps,
  .principles-cards .principle-list {
    grid-template-columns: 1fr;
  }

  .cta {
    padding: 40px 0;
  }

  .cta-inner {
    padding: 44px 20px;
    border-radius: 18px;
  }
}

/* 보정: 흐린 영어 글씨는 오른쪽 위에 (사진·아이콘과 겹치지 않게) */
.page-hero-mark {
  top: 8px;
  bottom: auto;
}

.principles-cards .principle-title {
  padding-right: 56px;
}

@media (max-width: 560px) {
  .page-hero-mark {
    top: 4px;
    bottom: auto;
    font-size: 56px;
  }
}

/* =========================================================
   상단 드롭다운 메뉴 (2026-10-26) — 소개 · 진료 · 치과 Q&A · 상담·안내
   컴퓨터: 마우스를 올리거나 Tab으로 들어가면 펼쳐짐 / 휴대폰: ≡ 메뉴 안에 펼친 목록
   ========================================================= */
.sub-icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-navy);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item.is-current > .nav-top {
  color: var(--color-navy);
  background: var(--color-bg-soft);
}

@media (min-width: 961px) {
  .nav-item {
    position: relative;
  }

  .has-sub > .nav-top {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* 아래 화살표 */
  .has-sub > .nav-top::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border: solid currentColor;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
    opacity: 0.6;
    transition: transform 0.2s;
  }

  .has-sub:hover > .nav-top::after,
  .has-sub:focus-within > .nav-top::after {
    margin-top: 3px;
    transform: rotate(-135deg);
  }

  .has-sub:hover > .nav-top,
  .has-sub:focus-within > .nav-top {
    color: var(--color-navy);
    background: #eaf0f7;
  }

  .sub-menu {
    position: absolute;
    top: 100%;
    left: -12px;
    z-index: 50;
    padding-top: 12px; /* 메뉴와 펼친 상자 사이를 마우스가 지나갈 수 있게 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  }

  .has-sub:hover > .sub-menu,
  .has-sub:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .sub-list {
    min-width: 240px;
    margin: 0;
    padding: 14px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(20, 35, 60, 0.14);
  }

  .sub-list-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    width: 520px;
  }

  .sub-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
  }

  .sub-list a:hover,
  .sub-list a[aria-current="page"] {
    background: var(--color-bg-soft);
    color: var(--color-navy);
  }

  .sub-all {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--color-line);
  }
}

@media (max-width: 960px) {
  /* 휴대폰: 메뉴가 길어지면 메뉴 안에서 스크롤 */
  .site-nav {
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }

  .nav-top {
    font-weight: 700;
  }

  .sub-list {
    margin: 0;
    padding: 4px 0 8px;
    list-style: none;
  }

  .sub-list-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
  }

  .nav-list .sub-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 0;
    color: var(--color-text-muted);
  }

  .sub-all {
    grid-column: 1 / -1;
  }

  .sub-icon {
    width: 18px;
    height: 18px;
  }
}

/* =========================================================
   진료 상세 보강 (2026-10-26): 핵심 답변 · 비교표 · 오해와 사실 · 용어
   ========================================================= */
.key-answer {
  margin: 0 0 16px;
  padding: 20px 24px;
  border-left: 4px solid var(--color-navy);
  border-radius: 12px;
  background: #eef3f9;
}

.key-answer-label {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
}

.key-answer p:last-child {
  margin: 0;
  line-height: 1.8;
  color: var(--color-text);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
}

.compare-table th,
.compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.compare-table thead th {
  background: var(--color-navy);
  color: #fff;
  font-weight: 700;
}

.compare-table thead th:first-child {
  border-radius: 10px 0 0 0;
}

.compare-table thead th:last-child {
  border-radius: 0 10px 0 0;
}

.compare-table tbody th {
  width: 120px;
  color: var(--color-navy);
  background: var(--color-bg-soft);
}

.table-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.table-note a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.myth-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.myth {
  padding: 22px 24px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #fff;
}

.myth-q,
.myth-a {
  margin: 0;
  line-height: 1.7;
}

.myth-q {
  margin-bottom: 10px;
  font-weight: 700;
  color: var(--color-text);
}

.myth-a {
  color: var(--color-text-muted);
}

.myth-q span,
.myth-a span {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  vertical-align: 2px;
}

.myth-q span {
  background: #f6e9e6;
  color: #9a3b2a;
}

.myth-a span {
  background: #e6eef7;
  color: var(--color-navy);
}

.myth-a a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.term-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
}

.term {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-line);
}

.term dt {
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--color-navy);
}

.term dd {
  margin: 0;
  line-height: 1.7;
  color: var(--color-text-muted);
}

@media (max-width: 760px) {
  .myth-list,
  .term-list {
    grid-template-columns: 1fr;
  }

  .key-answer {
    padding: 18px;
  }
}

/* 보강 섹션 위아래 여백 */
section#compare, section#timing, section#myths, section#terms {
  padding: 64px 0;
}

section#terms {
  padding-top: 0;
}

@media (max-width: 560px) {
  section#compare, section#timing, section#myths {
    padding: 48px 0;
  }

  section#terms {
    padding: 0 0 48px;
  }
}

/* 시설·장비: 보유 장비 15종 */
.equip-section {
  padding: 72px 0;
  background: var(--color-bg-soft);
}

.equip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.equip-card {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #fff;
}

.equip-img {
  aspect-ratio: 540 / 376;
  background: #fff;
  border-bottom: 1px solid var(--color-line);
}

.equip-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.equip-body {
  padding: 18px 20px 22px;
}

.equip-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-text);
}

.equip-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: #dfe5f0;
  color: var(--color-navy);
  font-size: 12px;
}

.equip-name {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
}

.equip-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

@media (max-width: 960px) {
  .equip-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .equip-section {
    padding: 48px 0;
  }

  .equip-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   진료 상세: 세부 진료 카드 · 활용 장비 · 오른쪽 따라다니는 상자 (2026-10-26)
   ========================================================= */
.subcare-section {
  padding: 64px 0 24px;
}

.subcare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.subcare-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #fff;
  color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

a.subcare-card:hover {
  border-color: var(--color-navy);
  box-shadow: 0 8px 20px rgba(20, 35, 60, 0.08);
}

.subcare-card strong {
  font-size: 17px;
  color: var(--color-navy);
}

.subcare-card span {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.subcare-card em {
  margin-top: auto;
  padding-top: 6px;
  font-style: normal;
  font-size: 13px;
  color: var(--color-accent-text);
}

.tools-section {
  padding: 48px 0 24px;
}

.tools-section .imp-lead a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.equip-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.equip-grid-4 .equip-name {
  font-size: 16px;
}

.equip-grid-4 .equip-desc {
  font-size: 14px;
}

/* 오른쪽 상자: 기본은 숨김 (좁은 화면·휴대폰) */
.treat-aside {
  display: none;
}

@media (min-width: 1240px) {
  /* 본문을 왼쪽으로 좁혀 오른쪽에 상자 자리를 만듦 (첫 화면·마지막 상담 안내·하단 링크 묶음은 그대로) */
  body.has-aside main > section:not(.page-hero):not(.cta):not(.related) > .container {
    padding-right: 332px;
  }

  .treat-aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: fixed;
    top: calc(var(--header-height) + 20px);
    right: max(24px, calc((100vw - var(--container-width)) / 2 + 24px));
    z-index: 20;
    width: 284px;
    max-height: calc(100vh - var(--header-height) - 40px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }

  .treat-aside.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.aside-box {
  padding: 16px 18px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 35, 60, 0.05);
}

.aside-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
}

.aside-toc,
.aside-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aside-toc a,
.aside-list a {
  display: block;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.aside-toc a:hover,
.aside-list a:hover,
.aside-toc a.is-current {
  background: var(--color-bg-soft);
  color: var(--color-navy);
}

.aside-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.aside-book {
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.aside-book .aside-title,
.aside-book .aside-text {
  color: #fff;
}

.aside-book .btn {
  width: 100%;
  margin-top: 8px;
}

.aside-book .btn-primary {
  background: #fff;
  color: var(--color-navy);
}

.aside-book .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.aside-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.aside-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-text);
}

.aside-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.aside-tags a {
  padding: 4px 10px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.aside-tags a:hover {
  border-color: var(--color-navy);
  color: var(--color-navy);
}

@media (max-width: 960px) {
  .equip-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .subcare-grid {
    grid-template-columns: 1fr;
  }

  .subcare-section {
    padding: 48px 0 16px;
  }
}

/* 3:1로 미리 잘라 둔 대표 사진은 그대로 보여 줌 (휴대폰에서는 가운데 기준으로 조금 잘림) */
.page-photo img.page-photo-wide {
  object-position: 40% 50%;
}

.area-more {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.area-more a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 빠른 상담 버튼 (오른쪽 아래 고정) — 카톡 상담 · 네이버 예약 · 전화 상담 */
.float-cta {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.float-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(20, 35, 60, 0.22);
  transition: transform 0.15s, box-shadow 0.15s;
}

.float-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(20, 35, 60, 0.28);
}

.float-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.float-kakao {
  background: #fee500;
  color: #191919;
}

.float-naver {
  background: #03c75a;
  color: #fff;
}

.float-tel {
  background: var(--color-navy);
  color: #fff;
}

/* 휴대폰: 동그란 아이콘 버튼으로 작게, 진료 페이지 하단 고정 버튼 위로 올림 */
@media (max-width: 960px) {
  .float-cta {
    right: 14px;
    bottom: 16px;
    gap: 8px;
  }

  .has-mobile-cta .float-cta {
    bottom: 84px;
  }

  .float-btn {
    justify-content: center;
    width: 50px;
    min-height: 50px;
    padding: 0;
  }

  .float-btn span:not(.visually-hidden) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .float-btn svg {
    width: 22px;
    height: 22px;
  }

  /* 진료 페이지에는 하단에 전화·예약 버튼이 이미 있어 카톡 버튼만 남김 */
  .has-mobile-cta .float-naver,
  .has-mobile-cta .float-tel {
    display: none;
  }
}

@media print {
  .float-cta {
    display: none;
  }
}

/* 넓은 화면: 오른쪽 상자가 빠른 상담 버튼과 겹치지 않게 아래 여백 확보 */
@media (min-width: 1240px) {
  .treat-aside {
    max-height: calc(100vh - var(--header-height) - 230px);
  }
}

.service-title a {
  color: inherit;
}

.service-title a:hover {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 진료 페이지 안내 그림 (기존 서울맥치과 홈페이지 그림) */
.info-figure {
  margin: 28px 0 0;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.info-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.info-figure + .info-figure {
  margin-top: 16px;
}