/* sections.css — 섹션별 레이아웃 (작업자 B)
 * 컴포넌트 기본 스타일은 components.css(A). 여기서는 배치·간격·섹션 고유 형태만.
 * 모바일 우선 · min-width 768 / 1024 / 1280 · 토큰만 사용.
 * 섹션 면은 투명(캔버스가 비치게), 가독성이 필요한 블록만 불투명 --panel-bg.
 */

/* ── 공통: 섹션 제목 블록 ───────────────────────────── */
.section-head {
  display: grid;
  align-content: start;
  gap: var(--web-stack-sm);
  margin-bottom: var(--web-stack-lg);
}
.section-head__body {
  max-width: var(--web-measure);
  margin-top: calc(var(--web-stack-md) - var(--web-stack-sm));
  color: var(--text-soft);
}

main > section[id] { scroll-margin-top: calc(var(--web-btn-h) + var(--web-stack-sm)); }

/* ── 헤더 ─────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--page-bg);
  border-bottom: var(--line-dark-w) solid var(--line-dark);
}
/* 헤더 아래에 지상(light) 섹션이 걸림 — .is-on-light는 JS(작업 K)가 부여.
   토큰은 tokens.css §5 라이트 스코프가 다시 매핑(글씨 Ground Brown, 괘선 헤어라인).
   interactions.css의 html.js .site-header(:not).is-scrolled 보다 우선하도록 :is()로 특이도 보강 */
.site-header.is-on-light,
html.js .site-header.is-on-light:is(.is-scrolled, :not(.is-scrolled)) {
  background-color: var(--light-bg);
  border-bottom-color: var(--border-hairline);
  color: var(--text);
  transition:
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
}
/* 페이지 최상단(HERO 위, 스크롤 전): 헤더 면·하단선을 비워 하늘과 수관이 헤더 뒤로 이어지게.
   스크롤이 시작되면(.is-scrolled) 문구가 헤더 밑을 지나가므로 위 불투명 라이트 면으로 복귀 */
html.webgl-live .site-header.is-on-light:not(.is-scrolled) {
  background-color: transparent;
  border-bottom-color: transparent;
}
/* 캔버스가 없는 페이지·환경: 헤더 뒤가 본문 배경(브라운)이므로 면은 라이트로 두고 하단선만 비운다 */
html.js:not(.webgl-live) .site-header.is-on-light:not(.is-scrolled) { border-bottom-color: transparent; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--web-stack-sm);
  padding-block: calc(var(--web-stack-sm) * .75);
}
.site-header__brand {
  display: flex;
  flex-direction: column;
  gap: calc(var(--web-stack-sm) * .3);
  min-width: 0;
}
.site-header__logo {
  display: inline-flex;
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
.site-header__logo .wordmark { width: auto; height: calc(var(--web-fs-body) * 1.25); }
.site-header__desc {
  font-size: var(--web-fs-small);
  color: var(--text-soft);
  transition: color var(--dur-base) var(--ease-standard);
  letter-spacing: var(--ls-snug);
  white-space: nowrap;
}
.site-header__desc[aria-hidden="true"] { display: none; }
.site-header__cta {
  flex-shrink: 0;
  min-height: calc(var(--web-btn-h) * .8);
  padding-inline: calc(var(--web-btn-px) * .75);
  font-size: var(--web-fs-small);
}

@media (min-width: 768px) {
  .site-header__brand { flex-direction: row; align-items: center; gap: calc(var(--web-stack-sm) * .6); }
  .site-header__desc[aria-hidden="true"] { display: inline; }
  .site-header__cta { font-size: var(--web-fs-button); }
}

/* ── 00 HERO ──────────────────────────────────────── */
/* 이미지 없이 문구 + WebGL 나무가 주인공 (improvement-plan-v2 §7). lg↑ 오른쪽 열은 비워 수관이 보이게 한다.
   헤더 바로 아래 여백은 섹션 기본값 대신 stack-lg — 첫 화면에 문구·CTA가 앉고 강점 스트립이 걸쳐 보이게 */
.section--hero { padding-top: var(--web-stack-lg); }
.hero__grid { display: grid; }
.hero__text { display: grid; gap: var(--web-stack-sm); }
.hero__lead {
  max-width: var(--web-measure);
  margin-top: calc(var(--web-stack-md) - var(--web-stack-sm));
  color: var(--text-soft);
}
.hero__actions { margin-top: calc(var(--web-stack-md) - var(--web-stack-sm)); }
/* HERO 핵심 지표 3개: 모바일은 한 줄(숫자 · 설명)씩 3행, 768↑ 3열 균등(숫자 위 · 설명 아래). 카드 면은 DS .card */
.hero__strengths {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--web-grid-gap);
  margin: var(--web-stack-lg) 0 0;
  padding: 0;
  list-style: none;
}
.hero-metric {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--web-stack-sm);
}
.hero-metric__num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-h2);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}
.hero-metric__label {
  font-size: var(--web-fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  white-space: nowrap;
  color: var(--text-soft);
}
@media (min-width: 768px) {
  .hero__strengths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-metric { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: calc(var(--web-stack-sm) * .6); }
}

@media (max-width: 767.98px) {
  .hero__actions .btn { width: 100%; justify-content: center; }
  /* 나무 창: CTA와 강점 카드 사이를 비워 HERO 수관 전체를 보인다 (world.js가 이 사이에 수관을 맞춤, 05·10 모바일 씬 창과 같은 규격).
     지표 카드는 한 줄씩 낮게 쌓아 지표면까지 거리를 줄인다 */
  .hero__strengths {
    margin-top: var(--web-scene-window);
    gap: calc(var(--web-grid-gap) * .7);
  }
  .hero-metric { padding: calc(var(--web-card-p) * .7) calc(var(--web-card-p) * .8); }
}
@media (min-width: 1024px) {
  /* H1 2줄(<br> 기준): --web-fs-hero-lg는 최장 줄(13.4em)이 2fr 열에 맞는 크기라 열 비율과 함께 유지.
     더 키우면 문구가 오른쪽 수관 영역을 침범한다 */
  .hero__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .hero__text .h-display { font-size: var(--web-fs-hero-lg); }
}

/* ── 01 WHY ───────────────────────────────────────── */
.why__cards .card__body { color: var(--text-soft); }

/* ── 02 REVIEW ────────────────────────────────────── */
.review__grid { display: grid; gap: var(--web-stack-md); }
.review__head { margin-bottom: 0; }
/* 제목 아래 핵심 실적: 숫자(Postea) 위 · 설명 아래 (화면 폭과 무관하게 같은 모양) */
.review__stat {
  display: grid;
  justify-items: start;
  gap: calc(var(--web-stack-sm) * .5);
  margin-top: var(--web-stack-md);
}
.review__stat-num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: calc(var(--web-fs-number) * .5);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}
.review__stat-label {
  font-size: var(--web-fs-lead);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  color: var(--text-soft);
}
.review__body {
  display: grid;
  gap: var(--web-stack-sm);
  max-width: var(--web-measure);
  color: var(--text-soft);
}
.review__body strong { color: var(--text); }
.review__specs { margin-top: var(--web-stack-lg); }

@media (min-width: 768px) {
  .review__specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--web-grid-gap);
  }
  .review__specs .spec-row {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: var(--web-stack-sm);
  }
  /* 3열: 칸별 아랫선 대신 표 전체를 닫는 한 줄 (모바일 1열과 같은 규칙 — 윗선 회색 · 닫는 선 1px 흰색).
     공통 .spec-row:last-child 강조선이 세 번째 칸에만 걸려 굵기가 달라 보이던 문제 */
  .review__specs { border-bottom: 1px solid var(--border-rule-light); }
  .review__specs .spec-row,
  .review__specs .spec-row:last-child { border-bottom: 0; }
}
/* F1 사진: 초점(손·형광펜)이 이미지 세로 45~55%에 있음 */
.review__photo img { object-position: 50% 42%; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* 한 열에서 4:5 전폭은 너무 길어 3:2로 */
  .review__photo { aspect-ratio: 3 / 2; }
  .review__photo img { object-position: 50% 55%; }
}
@media (min-width: 1024px) {
  /* 좌측 제목+본문 / 우측 사진 */
  .review__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "head photo" "body photo";
    grid-template-rows: auto 1fr;
    column-gap: var(--web-stack-lg);
    row-gap: var(--web-stack-md);
  }
  .review__head { grid-area: head; }
  .review__body { grid-area: body; align-content: start; }
  .review__photo { grid-area: photo; align-self: start; }
}

/* ── 03 OPENING ───────────────────────────────────── */
.opening__grid {
  display: grid;
  gap: var(--web-stack-lg);
  align-items: start;
}
.checklist {
  display: grid;
  column-gap: var(--web-grid-gap);
}
.checklist > li {
  position: relative;
  padding-block: calc(var(--web-stack-sm) * .8);
  padding-inline-start: calc(var(--web-bullet-size) + var(--web-stack-sm));
  border-bottom: var(--line-dark-w) solid var(--line-dark);
  font-size: var(--web-fs-body);
  line-height: var(--web-lh-body);
  letter-spacing: var(--ls-snug);
}
.checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--web-stack-sm) * .8 + 0.85em - var(--web-bullet-size) / 2);
  width: calc(var(--web-bullet-size) * 1.6);
  height: calc(var(--web-bullet-size) * 1.6);
  background: var(--bmt-root-green);
}
.opening__photo { margin: 0; }
.section--opening .callout,
.section--before-ads .callout,
.funnel + .callout { margin-top: var(--web-stack-lg); }

@media (min-width: 768px) {
  .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
}
@media (min-width: 1024px) {
  .opening__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ── 04 BEFORE ADS ────────────────────────────────── */
.before-ads__photo { margin: 0 0 var(--web-stack-lg); }
.before-ads__photo img { object-position: center 40%; }
.before-ads__steps {
  display: grid;
  gap: var(--web-grid-gap);
}
.before-ads__step {
  display: grid;
  align-content: start;
  gap: var(--web-stack-sm);
  padding: var(--web-card-p);
  background: var(--panel-bg);
  box-shadow: var(--panel-stroke);
}

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

/* ── 05 FUNNEL (아래로 좁아지는 형태) ────────────────── */
.funnel {
  display: grid;
  gap: calc(var(--web-grid-gap) * .5);
  justify-items: center;
}
.funnel__stage {
  --funnel-w: 100%;
  width: var(--funnel-w);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--web-stack-sm);
  row-gap: calc(var(--web-stack-sm) * .4);
  padding: calc(var(--web-card-p) * .75) var(--web-card-p);
  background: var(--panel-bg);
  box-shadow: var(--panel-stroke);
}
.funnel__stage[data-stage="2"] { --funnel-w: 94%; }
.funnel__stage[data-stage="3"] { --funnel-w: 88%; }
.funnel__stage[data-stage="4"] { --funnel-w: 82%; }
.funnel__stage[data-stage="5"] { --funnel-w: 76%; }
.funnel__num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-eyebrow);
  line-height: var(--lh-normal);
  color: var(--text-emphasis);
  padding-top: 0.2em;
}
.funnel__title {
  font-size: var(--web-fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
}
.funnel__desc {
  font-size: var(--web-fs-body);
  line-height: var(--web-lh-body);
  letter-spacing: var(--ls-snug);
  color: var(--text-soft);
}

/* 모바일: 섹션 헤더와 카드 목록 사이에 씬이 비치는 창(투명 여백) — 작업 F 기준 영역 */
@media (max-width: 767.98px) {
  .section--funnel .section-head { margin-bottom: 0; }
  .funnel { margin-block-start: var(--web-scene-window); }
}

@media (min-width: 768px) {
  .funnel__stage {
    grid-template-columns: calc(var(--web-fs-eyebrow) * 3) minmax(8em, 2fr) minmax(0, 5fr);
    align-items: baseline;
  }
  .funnel__num { grid-row: auto; padding-top: 0; }
  .funnel__stage[data-stage="2"] { --funnel-w: 90%; }
  .funnel__stage[data-stage="3"] { --funnel-w: 80%; }
  .funnel__stage[data-stage="4"] { --funnel-w: 70%; }
  .funnel__stage[data-stage="5"] { --funnel-w: 60%; }
}

/* ── 06 SCOPE ─────────────────────────────────────── */
.scope__tabs {
  display: grid;
  gap: var(--web-grid-gap);
}
.scope__panel {
  display: grid;
  align-content: start;
  gap: var(--web-stack-sm);
  padding: var(--web-card-p);
  background: var(--panel-bg);
  box-shadow: var(--panel-stroke);
}
.scope__panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--web-stack-sm) * .6);
}
.scope__panel-title { margin: 0; }
/* 배지는 공통 .badge의 align-self:flex-start를 덮어 번호·제목과 세로 중앙 정렬 */
.scope__panel-head .badge { align-self: center; }
.scope__sub {
  font-size: var(--web-fs-body);
  line-height: var(--web-lh-body);
  color: var(--text-emphasis);
  letter-spacing: var(--ls-snug);
}
.scope__quote {
  margin: calc(var(--web-stack-sm) * .5) 0 0;
  padding-inline-start: var(--web-stack-sm);
  border-inline-start: var(--focus-ring-w) solid var(--bmt-root-green);
  font-size: var(--web-fs-body);
  line-height: var(--web-lh-body);
  letter-spacing: var(--ls-snug);
  color: var(--text-soft);
}
.scope__link { justify-self: start; margin-top: calc(var(--web-stack-sm) * .5); }

/* JS 미실행(탭 목록 숨김) 상태에서는 3단 전부 노출 */
@media (min-width: 1024px) {
  .scope__tabs:has(> .tabs__list[hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 07 HOW WE WORK ───────────────────────────────── */
.how-we-work__cards .card__body { color: var(--text-soft); }

/* ── 08 RESULTS ───────────────────────────────────── */
.results__cases {
  display: grid;
  gap: var(--web-grid-gap);
}
.case {
  display: grid;
  align-content: start;
  gap: calc(var(--web-stack-sm) * .6);
  padding: var(--web-card-p);
  background: var(--panel-bg);
  box-shadow: var(--panel-stroke);
}
.case__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--web-stack-sm);
}
.case__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-eyebrow);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-flat);
  color: var(--text-emphasis);
}
.case__rate {
  display: block;
  margin-top: calc(var(--web-stack-sm) * .6);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: calc(var(--web-fs-number) * .7);
  line-height: var(--lh-flat);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.case__label {
  font-size: var(--web-fs-body);
  line-height: var(--web-lh-body);
  color: var(--text-soft);
  letter-spacing: var(--ls-snug);
}
.case__visual {
  position: relative;
  margin-top: var(--web-stack-sm);
  aspect-ratio: 200 / 140;
}
.case__rings { position: absolute; inset: 0; }
.case__chart {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.case__bar { fill: var(--bmt-root-green); }
.case__bar--start { fill: var(--bmt-leaf-mid); }
.case__period {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  column-gap: calc(var(--web-stack-sm) * .6);
  padding-top: calc(var(--web-stack-sm) * .8);
  border-top: var(--line-dark-w) solid var(--line-dark);
  font-size: var(--web-fs-small);
  font-variant-numeric: tabular-nums;
}
.case__period dt { color: var(--text-soft); }
.case__period dd { margin: 0; color: var(--text); }
.results__note { margin-top: var(--web-stack-md); }

@media (min-width: 768px) {
  .results__cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case__rate { font-size: calc(var(--web-fs-number) * .45); }
}

/* ── 09 TIME ──────────────────────────────────────── */
.time__grid {
  display: grid;
  gap: var(--web-stack-lg);
  align-items: center;
}
.time__figure { display: grid; gap: var(--web-stack-sm); }
.time__value {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  line-height: var(--lh-flat);
}
.time__num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: calc(var(--web-fs-number) * 1.5);
  line-height: var(--lh-flat);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.time__unit {
  font-size: var(--web-fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tighter);
  color: var(--text);
}
.time__label {
  font-size: var(--web-fs-body);
  color: var(--text-soft);
  letter-spacing: var(--ls-snug);
}
.time__body {
  display: grid;
  gap: var(--web-stack-sm);
  max-width: var(--web-measure);
  color: var(--text-soft);
}
.time__body strong { color: var(--text); }

@media (min-width: 1024px) {
  .time__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ── 09-2 REACH (지역 분포) ─────────────────────────
   정사각 타일 지도: 시·도 1칸 = 정사각 1개. 색·숫자는 권역 단위로만 (시·도별 수는 드러내지 않음).
   타일 사이 틈으로 씬(chapters/reach.js)의 균사가 지나간다 → 틈 = --web-grid-gap 고정 */
.reach {
  display: grid;
  gap: var(--web-stack-lg);
  align-items: center;
}
.reach .section-head { margin-bottom: 0; }
.reach__text { display: grid; gap: var(--web-stack-md); }

.reach__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--line-dark-w) solid var(--line-dark);
}
.reach__stat {
  display: grid;
  gap: calc(var(--web-stack-sm) / 2);
  padding-top: var(--web-stack-sm);
}
.reach__stat + .reach__stat {
  padding-left: var(--web-stack-sm);
  border-left: var(--line-dark-w) solid var(--line-dark);
}
.reach__stat dt {
  font-size: var(--web-fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-soft);
}
.reach__stat dd {
  display: flex;
  align-items: baseline;
  gap: 0;
  white-space: pre;
  font-size: var(--web-fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.reach__num {
  font-family: var(--font-display);
  font-size: calc(var(--web-fs-number) * .56);
  line-height: var(--lh-flat);
  font-variant-numeric: tabular-nums;
}
.reach__approx { margin-right: 0.25em; color: var(--text-soft); }
.reach__num + .reach__unit { margin-left: 0.08em; }

.reach__figure { margin: 0; display: grid; justify-items: center; }

/* 지도: 권역 판(plate) 두 겹 — 받침판(base, 흙색 옆면) 위에 윗판이 놓이고, 활성 시 윗판만 떠올라 두께가 드러난다.
   그림자·블러 없음. 권역 사이 틈 = 바탕색 획(--reach-gap).
   크기: 남한은 세로로 긴 형태(약 1:1.86) → 화면 높이 기준으로 최대한 크게, 폭은 비율로 따라간다.
   --lift: 윗판 상승 거리(viewBox 단위). reach-map.js가 화면 8px에 맞춰 갱신 */
.reach-map {
  --lift: 12;
  --reach-gap: 2px;
  /* 헤더(약 80px)와 위아래 여백을 뺀 화면 높이 */
  --reach-max-h: calc(100svh - 150px);
  position: relative;
  width: min(100%, calc(var(--reach-max-h) * var(--reach-w) / var(--reach-h)));
  aspect-ratio: var(--reach-w) / var(--reach-h);
}
.reach-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.reach-map__inset {
  fill: none;
  stroke: var(--line-dark);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.reach-region { transition: opacity var(--dur-slow) var(--ease-standard); }
.reach-region__base,
.reach-region__plate {
  stroke: var(--page-bg);
  stroke-width: var(--reach-gap);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.reach-region__base { fill: var(--bmt-earth-950); }
.reach-region__top { transition: transform var(--dur-slow) var(--ease-standard); }
.reach-region[data-level="1"] .reach-region__plate { fill: var(--reach-fill-1); }
.reach-region[data-level="2"] .reach-region__plate { fill: var(--reach-fill-2); }
.reach-region[data-level="3"] .reach-region__plate { fill: var(--reach-fill-3); }
/* 함께하는 병원이 없는 권역: 괘선만 */
.reach-region:not([data-level]) .reach-region__base { fill: none; stroke: none; }
.reach-region:not([data-level]) .reach-region__plate {
  fill: none;
  stroke: var(--line-dark);
  stroke-width: 1px;
}
.reach-region[data-level] { cursor: pointer; }
.reach-region.is-active .reach-region__top { transform: translateY(calc(var(--lift) * -1px)); }
/* 키보드(숨긴 권역 버튼) 포커스 위치 표시 */
.reach-region.is-focus .reach-region__plate { stroke: var(--focus-ring); stroke-width: var(--focus-ring-w); }

/* 라벨: 권역 이름은 항상, 병원 수는 활성 시 아래에서 올라온다 */
.reach-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  justify-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  color: var(--text);
  transition:
    transform var(--dur-slow) var(--ease-standard),
    opacity var(--dur-slow) var(--ease-standard);
}
.reach-label[data-level="3"] { color: var(--text-on-green); }
.reach-label:not([data-level]) { color: var(--text-soft); }
.reach-label__name {
  font-size: var(--web-fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
}
.reach-label__count {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-h3);
  line-height: var(--lh-flat);
  font-variant-numeric: tabular-nums;
  height: 0;
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity var(--dur-slow) var(--ease-standard),
    transform var(--dur-slow) var(--ease-standard);
}
.reach-label.is-active { transform: translate(-50%, calc(-50% - 8px)); }
.reach-label.is-active .reach-label__count { height: auto; opacity: 1; transform: none; margin-bottom: 0.15em; }

/* 권역 강조 중: 나머지 권역을 낮춘다 */
.reach[data-active] .reach-region[data-level]:not(.is-active),
.reach[data-active] .reach-label[data-level]:not(.is-active) { opacity: .4; }

/* 모바일: 지도를 화면 끝까지 (좌우 여백만큼 확장) */
@media (max-width: 767.98px) {
  .reach__figure { margin-inline: calc(var(--web-gutter) * -1 + 8px); }
  .reach-map { --reach-max-h: 88svh; }
}

@media (min-width: 1024px) {
  .reach { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--web-stack-lg); }
  .reach__figure { justify-items: center; }
  .reach-map { --reach-max-h: min(calc(100svh - 150px), 920px); }
}

/* ── 10 GROUP ─────────────────────────────────────── */
.group-grid {
  display: grid;
  gap: calc(var(--web-grid-gap) * .5);
}
.group-item {
  display: grid;
  gap: calc(var(--web-stack-sm) * .3);
  padding: calc(var(--web-card-p) * .75);
  background: var(--panel-bg);
  box-shadow: var(--panel-stroke);
}
.group-item__name {
  font-size: var(--web-fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.group-item__desc {
  font-size: var(--web-fs-body);
  line-height: var(--web-lh-body);
  letter-spacing: var(--ls-snug);
  color: var(--text-soft);
}
.group-item--self { background: var(--surface-brand); box-shadow: none; }
.group-item--self .group-item__name,
.group-item--self .group-item__desc { color: var(--text-on-green); }
.group__more { margin-top: var(--web-stack-md); }

/* 모바일: 섹션 헤더와 카드 목록 사이 씬 창 (05 funnel과 동일 규격) */
@media (max-width: 767.98px) {
  .section--group .section-head { margin-bottom: 0; }
  .group-grid { margin-block-start: var(--web-scene-window); }
}

@media (min-width: 768px) {
  .group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--web-grid-gap); }
  .group-item { padding: var(--web-card-p); }
}

/* ── 11 START ─────────────────────────────────────── */
.start-steps {
  display: grid;
  gap: var(--web-grid-gap);
}
.start-steps > .step {
  display: grid;
  align-content: start;
  gap: var(--web-stack-sm);
  padding: var(--web-card-p);
  background: var(--panel-bg);
  box-shadow: var(--panel-stroke);
}
.start-steps .step__body { color: var(--text-soft); }

@media (min-width: 768px) {
  .start-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 11-2 FAQ ─────────────────────────────────────────
   <details> 펼침 목록 (JS 없음 · 접혀 있어도 본문은 HTML에 있어 검색·AI가 읽는다).
   행 사이 괘선만, 카드·그림자 없음. 열림 표시는 얇은 직각 +/− (1px 선 두 개, currentColor) */
.faq { display: grid; gap: var(--web-stack-md); }
.faq .section-head { margin-bottom: 0; }
.faq__list { border-top: var(--line-dark-w) solid var(--line-dark); }
.faq__item { border-bottom: var(--line-dark-w) solid var(--line-dark); }
.faq__q {
  position: relative;
  display: block;
  padding: var(--web-stack-sm) calc(var(--web-stack-md) + 1em) var(--web-stack-sm) 0;
  list-style: none;
  cursor: pointer;
  color: var(--text);
  transition: color var(--dur-base) var(--ease-standard);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  right: 0.2em;
  top: 50%;
  width: 0.9em;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-slow) var(--ease-standard), opacity var(--dur-slow) var(--ease-standard);
}
.faq__q::after { transform: rotate(90deg); }
.faq__item[open] > .faq__q::after { transform: rotate(0deg); opacity: 0; }
.faq__q:hover { color: var(--text-emphasis); }
.faq__q:focus-visible { outline-offset: calc(var(--focus-ring-w) * -1); }
.faq__title {
  font-size: var(--web-fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  text-wrap: pretty;
}
.faq__a {
  max-width: var(--web-measure);
  padding-bottom: var(--web-stack-md);
  font-size: var(--web-fs-body);
  line-height: var(--web-lh-body);
  color: var(--text-soft);
}
.faq__link { margin-left: 0.3em; }

@media (min-width: 1024px) {
  .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--web-stack-lg); align-items: start; }
}

/* ── 12 FINAL CTA ─────────────────────────────────── */
/* 「한 그루, 그리고 그 아래의 뿌리」(improvement-plan-v2 §8): 상단 하늘(문구·CTA, 뒤는 비움)
   + 가운데 한 그루가 설 공간 + 하단 땅속 띠(.final-cta__ground). 땅속 띠 윗변 = 지표면(씬이 DOM으로 측정).
   땅속 띠: 캔버스가 없으면 푸터와 같은 흙색 면(라이트/다크 두 면), html.webgl-live면 투명(캔버스가 흙과 뿌리를 그림) */
.section--final-cta:has(.final-cta__ground) {
  --final-cta-tree: clamp(240px, 40svh, 440px);
  --final-cta-ground: clamp(180px, 28svh, 280px);
  padding-bottom: 0;
}
@media (min-width: 768px) {
  .section--final-cta:has(.final-cta__ground) {
    --final-cta-tree: clamp(300px, 48svh, 560px);
    --final-cta-ground: clamp(240px, 36svh, 400px);
  }
}
.section--final-cta:has(.final-cta__ground) > .container { padding-bottom: var(--final-cta-tree); }
.final-cta__ground {
  height: var(--final-cta-ground);
  /* 소수점 경계에서 바탕색이 비치는 이음새 방지: 푸터와 1px 겹침 */
  margin-bottom: -1px;
  background-color: var(--footer-bg);
  transition: background-color var(--dur-slow) var(--ease-standard);
}
html.webgl-live .final-cta__ground { background-color: transparent; }
/* 땅속 띠 → 푸터: 같은 흙색으로 이음새 없이 (괘선 제거) */
main:has(.final-cta__ground) + .site-footer { border-top: 0; }

.final-cta__inner {
  display: grid;
  justify-items: center;
  gap: var(--web-stack-md);
  text-align: center;
}
.final-cta__body { max-width: var(--web-measure); color: var(--text-soft); }
/* FINAL CTA 버튼만 라이트 면 기본 순서를 뒤집음 (2026-09-30 사용자 요청):
   기본 Root Green 면 + Ground Brown 글씨(5.07) → hover Ground Brown 면 + 흰 글씨(14.35) */
.section--final-cta .btn--primary.final-cta__btn {
  background: var(--bmt-root-green);
  color: var(--text-on-green);
}
.section--final-cta .btn--primary.final-cta__btn:hover {
  background: var(--bmt-ground-brown);
  color: var(--bmt-white);
}

@media (max-width: 767.98px) {
  .final-cta__inner .btn { width: 100%; justify-content: center; }
}

/* ── 푸터 ─────────────────────────────────────────
   상단(브랜드 | 주 CTA) → 사업자 정보(인라인 한 줄) → 하단(저작권 | 개인정보 처리방침).
   괘선은 구역 사이 1개씩만. 표(spec-list) 대신 작은 글씨 인라인 나열로 무게를 낮춘다 */
.site-footer {
  background: var(--footer-bg);
  border-top: var(--line-dark-w) solid var(--line-dark);
}
.site-footer__inner {
  display: grid;
  padding-block: var(--web-stack-lg) var(--web-stack-md);
}

.site-footer__top {
  display: grid;
  gap: var(--web-stack-md);
  padding-bottom: var(--web-stack-lg);
}
.site-footer__brand { display: grid; justify-items: start; }
.site-footer__logo { display: inline-flex; color: var(--text); text-decoration: none; }
.site-footer__logo .wordmark { width: auto; height: calc(var(--web-fs-h3) * 1.4); }
.site-footer__tagline-en { margin: var(--web-stack-sm) 0 0; }
.site-footer__tagline-ko {
  margin-top: calc(var(--web-stack-sm) / 2);
  font-size: var(--web-fs-body);
  letter-spacing: var(--ls-snug);
  color: var(--text-soft);
}

.site-footer__action { display: grid; gap: var(--web-stack-sm); justify-items: stretch; }
.site-footer__cta { justify-content: center; }
.site-footer__mail {
  justify-self: center;
  font-size: var(--web-fs-small);
  color: var(--text-soft);
  text-decoration-color: transparent;
}
.site-footer__mail:hover { color: var(--text); text-decoration-color: var(--bmt-root-green); }

.site-footer__legal {
  display: grid;
  gap: calc(var(--web-stack-sm) / 2);
  padding-block: var(--web-stack-md);
  border-top: var(--line-dark-w) solid var(--line-dark);
  font-size: var(--web-fs-small);
  line-height: var(--web-lh-body);
  color: var(--text-soft);
}
.site-footer__org { font-weight: var(--fw-semibold); color: var(--text); }
.site-footer__biz {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--web-stack-md);
}
.site-footer__biz > div { display: flex; gap: 0.5em; }
.site-footer__biz dt { font-weight: var(--fw-semibold); }
.site-footer__biz address { font-style: normal; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--web-stack-sm) / 2) var(--web-stack-md);
  padding-top: var(--web-stack-sm);
  border-top: var(--line-dark-w) solid var(--line-dark);
  font-size: var(--web-fs-small);
}
.site-footer__copy { color: var(--text-soft); }
.site-footer__copy small { font-size: inherit; }
/* 개인정보 처리방침은 다른 항목과 구분되게 굵게 (개인정보 보호법 표시 관행) */
.site-footer__privacy { font-weight: var(--fw-semibold); color: var(--text); }

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .site-footer__action { justify-items: end; }
  .site-footer__mail { justify-self: end; }
}