/* 시안 06 — 최소 구성
   섹션 여덟 개. 인사말·우리 센터·상담 절차·유틸은 홈에서 빼고
   푸터 위 텍스트 링크 한 줄로만 남깁니다. */

/* 제목 글꼴은 layouts.css 의 --font-heading 이 정합니다. */

.hero__title,
.h2,
.card__title,
.worry__q,
.ft__logo {
  font-family: var(--font-heading);
  font-weight: 400;
}

/* ── 공통 ─────────────────────────────────── */
.eyebrow {
  line-height: normal;
  font-weight: 700;
  color: var(--primary-dk);
  margin-bottom: 4px;
}

.sec__head { margin-bottom: 12px; }

/* ── 1 헤더 ─────────────────────────────────── */
.hd {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.hd__in {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 11px;
}

.hd__logo {
  font-size: 18px;
  font-weight: 700;
  color: var(--heading);
  line-height: normal;
  white-space: nowrap;
}

.hd__call { text-align: right; }

.hd__tel {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-dk);
  font-variant-numeric: tabular-nums;
  line-height: normal;
}

.hd__hours { line-height: normal; }

.hd__btns { display: flex; gap: 8px; }
.hd__btns .btn { padding: 9px 16px; font-size: var(--fs-sm); }

/* ── 2 히어로 ───────────────────────────────── */
.hero { padding-block: 32px; }

.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: -0.015em;
}

.hero__lead { margin-top: 10px; color: var(--muted); }

.hero__btns { display: flex; gap: 10px; margin-top: 20px; }

@media (max-width: 1040px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 768px) {
  .hero__btns { flex-direction: column; }
}

/* ── 3 센터 개요 ────────────────────────────
   카드도 표도 아닌 2열 정의형 목록입니다.
   왼쪽이 항목, 오른쪽이 값. 행마다 아래 선 하나. */
.facts { border-top: 1px solid var(--line); }

.facts__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  padding-block: 9px;
  border-bottom: 1px solid var(--line);
}

.facts__k {
  font-weight: 700;
  color: var(--heading);
  line-height: normal;
}

.facts__v { line-height: normal; }

.facts__num {
  font-size: 21px;
  font-weight: 700;
  color: var(--primary-dk);
  font-variant-numeric: tabular-nums;
}

.facts__num--wait { color: var(--accent); }

.facts__sub {
  display: inline-block;
  margin-inline-start: 10px;
  line-height: normal;
}

.facts__note { margin-top: 10px; line-height: normal; }

@media (max-width: 768px) {
  .facts__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .facts__sub { display: block; margin-inline-start: 0; }
}

/* ── 4 하루 일과 — 오전과 오후를 좌우로 ────── */
.day .timeline__row { padding-block: 8px; }
.day .timeline__row:last-child { border-bottom: 0; }

/* ── 5 비용 안내 ────────────────────────────── */
.cost {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.cost .table th:first-child,
.cost .table td:first-child { padding-inline-start: 20px; }

.cost .table th:last-child,
.cost .table td:last-child { padding-inline-end: 20px; }

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

.cost__sum {
  background: var(--table-sum);
  font-weight: 700;
  color: var(--primary-dk);
}

.cost__notes { margin-top: 10px; line-height: 1.6; }

/* ── 6 자주 묻는 걱정 ───────────────────────
   앞뒤 섹션과 다른 배경. 접지 않고 전부 펼쳐 둡니다. */
.worry { background: var(--accent-lt); }

/* ── 7 문의 ────────────────────────────────── */
.contact { align-items: start; }

.contact__tel {
  font-size: 40px;
  font-weight: 700;
  line-height: normal;
  color: var(--primary-dk);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.contact__hours { line-height: normal; margin-top: 6px; }
.contact__addr { line-height: normal; margin-top: 4px; }
.contact__btn { margin-top: 14px; }

.contact__form { padding: 18px; }

.field { display: block; margin-top: 8px; }

.field__label {
  display: block;
  line-height: normal;
  color: var(--muted);
  margin-bottom: 3px;
}

.field__input {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  line-height: normal;
}

.field__area { resize: vertical; }

.contact__submit { width: 100%; margin-top: 12px; }

/* ── 8 푸터 ─────────────────────────────────
   홈에서 뺀 자리(시설장 소개·상담 절차·등급 신청·오시는 길)는
   여기 한 줄로만 둡니다. */
.ft {
  background: var(--footer-bg);
  color: rgba(255, 255, 255, 0.78);
  padding-block: 24px;
}

.ft__more {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  line-height: normal;
  color: #FFFFFF;
}

.ft__more a { border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.ft__sep { color: rgba(255, 255, 255, 0.4); }

.ft__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin-top: 14px;
}

.ft__logo {
  font-size: 17px;
  line-height: normal;
  color: #FFFFFF;
}

.ft__addr { line-height: normal; }

.ft__legal {
  margin-top: 10px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.6);
}

/* ═══ 테마 06 — 서체 · 사진 자리 · 대비 · 색 면적 ═══════════
   구조 수치(컨테이너 1040 / 제목 28 / 히어로 34 / 섹션 48)는
   tokens.css 의 .theme-06 에 있습니다. */

/* 제목만 고운돋움. 본문·표·숫자는 Pretendard. */
.hero__title,
.h2,
.card__title,
.worry__q,
.ft__logo {
  font-family: var(--font-heading);
  font-weight: 400;
}

/* 숫자는 전부 Pretendard */
.hd__tel,
.facts__num,
.contact__tel,
.timeline__time,
.table,
.num,
.cost__sum {
  font-family: var(--font-body);
}

/* 사진 자리 — 둥근 네모에 종이색. */
.photo-slot,
.photo-slot--round {
  border-radius: 20px;
  background: var(--paper);
}

/* 대비 — 버튼과 링크는 진한 주황(--primary-dk #C57518)만 씁니다. */
.btn--primary { background: var(--primary-dk); }
.btn--accent { background: var(--accent-dk); }
.eyebrow { color: var(--primary-dk); }
.facts__num { color: var(--primary-dk); }
.facts__num--wait { color: var(--accent-dk); }
.hd__tel,
.contact__tel { color: var(--primary-dk); }

/* 색 면적 — 종이색 섹션은 비용 하나뿐입니다. */
.section--alt { background: var(--bg); }
#cost.section--alt { background: var(--paper); }

/* 정렬 — 중앙 */
.sec__head,
.facts__note,
.cost__notes,
.hero__in { text-align: center; }

.hero__in { grid-template-columns: minmax(0, 1fr); }
.hero__btns { justify-content: center; }
.facts__row { text-align: left; }
.contact { text-align: left; }

/* 히어로 사진은 컨테이너(1040) 폭을 다 쓰면 585px 이 됩니다.
   최소 구성이라는 성격에 맞게 폭을 줄여 둡니다. */
.hero__photo {
  max-width: 720px;
  margin-inline: auto;
}

/* ── 3 센터 개요 위의 큰 숫자 세 개 ─────────────── */
.now { margin-bottom: 26px; }

.now__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px var(--sp-card);
  text-align: center;
}

.now__item--open { border-color: var(--primary); }

.now__num {
  font-family: var(--font-body);
  font-size: 44px;
  font-weight: 700;
  line-height: normal;
  font-variant-numeric: tabular-nums;
  color: var(--primary-dk);
}

.now__label {
  font-weight: 700;
  color: var(--heading);
  line-height: normal;
  margin-top: 2px;
}

.now__sub { line-height: normal; color: var(--muted); margin-top: 2px; }

/* ── 5 비용에 포함된 것 ──────────────────────────── */
.include {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.include__title { line-height: normal; color: var(--heading); }

.include__list { margin-top: 14px; }

.include__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px 16px;
}

.include__k {
  font-weight: 700;
  color: var(--heading);
  line-height: normal;
}

.include__v { line-height: 1.5; margin-top: 4px; }

/* ── 7 문의 옆 상담 절차 세 걸음 ─────────────────── */
.steps {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.steps__item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-block: 7px;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.steps__no {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-dk);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

.steps__name { color: var(--heading); }

@media (max-width: 768px) {
  .include__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}