/* 시안 03 — 따뜻함 · 사람 중심 · 중앙정렬
   인사말과 사람 소개를 앞으로 끌어올린 "사람 먼저" 판입니다.
   인물 사진은 전부 원형, 카드 안 글도 중앙정렬입니다.
   테두리 대신 면과 그늘로 덩어리를 나눕니다. */

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

.hero__title,
.h2 {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* 섹션 헤딩 — 국문 제목 아래에 영문을 답니다. */
.label {
  font-size: var(--fs-xs);
  line-height: normal;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--primary);
  margin-top: 6px;
}

/* ── 공통 ─────────────────────────────────── */
.section > .container > .h2 { margin-bottom: 0; }
.section > .container > .label { margin-bottom: 15px; }

/* 카드는 테두리 없이 흰 면과 옅은 그늘로 */
/* 카드 구분은 1px 테두리로만 합니다. 그림자는 쓰지 않습니다. */
.card {
  border: 1px solid var(--line);
  text-align: center;
}

/* ── 1 헤더 ─────────────────────────────────── */
.hd {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

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

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

.hd__right { display: flex; align-items: center; gap: 16px; }

.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: 10px 18px; font-size: var(--fs-sm); }

@media (max-width: 768px) {
  .hd { position: static; }
}

/* 히어로 위 소재지 한 줄 */
.hero__eyebrow {
  font-size: var(--fs-sm);
  line-height: normal;
  color: var(--muted);
  margin-bottom: 8px;
}

.hero .label { margin-bottom: 12px; }

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

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

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

.hero__btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}

.hero__photo {
  max-width: 460px;
  margin: 16px auto 0;
}

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

/* ── 3 인사말 + 시설장 소개 ─────────────────
   왼쪽에 얼굴 하나, 오른쪽에 인사말과 경력. */
.greet__in {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}

.greet__photo { width: 280px; }

.greet__body { margin-top: 4px; }

.lead-person {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lead-person__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--heading);
  line-height: normal;
}

.lead-person__role { font-weight: 400; }

.lead-person__career { margin-top: 4px; line-height: 1.7; }

@media (max-width: 900px) {
  .greet__in {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    justify-items: center;
    text-align: center;
  }
  .greet__photo { width: 180px; }
}

/* ── 4 함께 일하는 사람들 ───────────────────
   얼굴 원형 여섯. 각 원 아래에 직종만 한 줄. */
.people {
  display: grid;
  grid-template-columns: repeat(6, 180px);
  justify-content: center;
  gap: 24px;
}

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

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

@media (max-width: 1240px) {
  .people { grid-template-columns: repeat(3, minmax(0, 150px)); }
}

@media (max-width: 768px) {
  .people { grid-template-columns: repeat(2, minmax(0, 140px)); gap: 18px; }
}

/* ── 4 지금 상황 ────────────────────────────── */
.now__item {
  background: var(--surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  padding: 20px var(--sp-card);
}

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

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

.now__sub { line-height: normal; margin-top: 4px; }

.now__note { margin-top: 12px; line-height: normal; }

/* ── 5 우리 센터 ────────────────────────────── */
.about { align-items: center; }

.lead-person { padding: 20px var(--sp-card); }

.lead-person__photo {
  width: 104px;
  margin: 0 auto 10px;
}

.lead-person__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--heading);
  line-height: normal;
}

.lead-person__role { font-weight: 400; }

.lead-person__career { margin-top: 6px; line-height: 1.8; }

.about__right { text-align: left; }
.about__note { margin-top: 10px; line-height: normal; }

/* ── 6 인력 배치 ────────────────────────────── */
.staff__law { line-height: normal; margin-top: 6px; }

.staff__ours {
  font-size: 38px;
  font-weight: 700;
  line-height: normal;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.staff__tag {
  display: inline-block;
  line-height: normal;
  font-weight: 700;
  color: var(--primary-dk);
  background: var(--primary-lt);
  border-radius: 100px;
  padding: 3px 10px;
  margin-top: 4px;
}

.staff__note {
  line-height: 1.55;
  margin-top: 6px;
}

/* 인력 카드 아래 시설 정보 표 */
.staff__table-title {
  line-height: normal;
  margin-top: 20px;
  color: var(--heading);
}

.staff__table {
  margin-top: 10px;
  text-align: left;
  background: var(--surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  overflow: hidden;
}

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

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

.about__note { margin-top: 10px; text-align: left; line-height: normal; }

/* ── 7 하루 일과 ────────────────────────────── */
.day {
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
}

.day .timeline__row {
  padding-block: 6px;
  border-bottom: 1px solid rgba(83, 66, 56, 0.12);
}

.day .timeline__row:last-child { border-bottom: 0; }

/* ── 8 비용 안내 ────────────────────────────── */
.cost {
  max-width: 900px;
  margin-inline: auto;
  text-align: left;
  background: var(--surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  overflow: hidden;
}

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

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

.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(--heading);
}

.cost__notes {
  max-width: 900px;
  margin: 12px auto 0;
  text-align: left;
  line-height: 1.7;
}

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

.worry__list { margin-top: 4px; }

/* ── 10 상담 절차 ───────────────────────────── */
.steps__no {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--primary-lt);
  color: var(--primary-dk);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 40px;
}

.steps__desc { line-height: 1.55; margin-top: 4px; }

.papers {
  max-width: 760px;
  margin: 18px auto 0;
  padding: 14px var(--sp-card);
  background: var(--surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
}

.papers__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: normal;
  color: var(--heading);
}

.papers__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  margin-top: 8px;
  line-height: 1.8;
  color: var(--muted);
}

.papers__list li { padding-inline-start: 14px; position: relative; }
.papers__list li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--primary);
}

/* ── 11 유틸 4블록 ──────────────────────────── */
.util__item { display: flex; flex-direction: column; }

.util__desc { line-height: 1.55; margin-top: 4px; }

.util__link {
  margin-top: 12px;
  align-self: center;
  color: var(--primary-dk);
  font-weight: 700;
  line-height: normal;
  border-bottom: 1px solid var(--primary);
}

/* ── 12 문의 ────────────────────────────────── */
.contact { align-items: stretch; }

.contact__call {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px var(--sp-card);
}

.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__off { line-height: normal; margin-top: 4px; }

.contact__btn { margin-top: 16px; align-self: center; }

.contact__form { text-align: left; }

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

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

.field__input {
  width: 100%;
  padding: 10px 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: 14px; }

/* ── 13 푸터 ────────────────────────────────── */
.ft {
  background: var(--footer-bg);
  color: rgba(255, 255, 255, 0.78);
  padding-block: 30px;
}

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

.ft__map {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 12px;
  line-height: normal;
}

.ft__addr {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  line-height: normal;
}

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

/* ═══ 테마 03 — 서체 · 사진 자리 · 대비 ════════════════════
   구조 수치(컨테이너 1200 / 제목 52 / 히어로 60 / 섹션 120 /
   본문 16)는 tokens.css 의 .theme-03 에 있습니다.
   명조는 같은 px 에서 고딕보다 작아 보여 본문을 16px 로 올렸습니다. */

/* 제목만 고운바탕. 본문·표·숫자는 Pretendard. */
.hero__title,
.h2 {
  font-family: var(--font-heading);
  font-weight: 700;
}

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

/* 사진 자리 — 1:1 만 원형, 나머지는 20px. 원형은 이 시안의 표식입니다. */
.photo-slot { border-radius: 20px; }
.photo-slot[data-ratio="1:1"],
.photo-slot--round { border-radius: 50%; }

/* 대비 — 버튼과 링크는 진한 살구(--primary-dk #A85F3E)만 씁니다. */
.btn--primary { background: var(--primary-dk); }
.btn--accent { background: var(--accent-dk); }
.label { color: var(--primary-dk); }
.util__link { color: var(--primary-dk); border-bottom-color: var(--primary-dk); }
.staff__tag { color: var(--primary-dk); }
.steps__no { color: var(--primary-dk); }

/* ── 인력 배치 카드를 2×2 로 ─────────────────────────
   한 줄에 넷을 늘어놓으면 칸이 좁아 법정 기준과 우리 센터가
   위아래로 눌립니다. 두 줄로 나눠 넓힌 뒤 좌우로 나란히 둡니다.
   왼쪽 칸이 두 줄을 차지해 오른쪽에 숫자와 꼬리표가 함께 섭니다. */
.staff {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-2);
}

.staff__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title title"
    "law   ours"
    "law   tag"
    "note  note";
  align-content: start;
  gap: 2px 24px;
  padding: 32px;
  text-align: left;
}

.staff__card .card__title { grid-area: title; margin-bottom: 6px; }
.staff__law  { grid-area: law; align-self: center; margin-top: 0; }
.staff__ours { grid-area: ours; margin-top: 0; text-align: right; }
.staff__tag  { grid-area: tag; justify-self: end; margin-top: 0; }
.staff__note { grid-area: note; margin-top: 12px; }

@media (max-width: 768px) {
  .staff { grid-template-columns: minmax(0, 1fr); }
  .staff__card { padding: 22px; }
}

/* 소식 섹션 머리도 다른 섹션과 같이 가운데로 둡니다.
   카드 안쪽 글은 읽기 쉽도록 왼쪽 정렬 그대로입니다. */
#news .sec__head { text-align: center; }
#news .news__more { text-align: center; }

.hd__call { white-space: nowrap; }
.hd__btns .btn { padding: 10px 14px; }