/* ==========================================================================
   be my tree — components.css
   docs/markup-contract.md §5 컴포넌트 클래스. 모바일 우선, min-width 768 · 1024 · 1280만.
   지하(다크) 기본 + 지상([data-theme="light"]) 변형 (improvement-plan-v2.md §1). 값은 tokens.css 토큰만 사용.
   ========================================================================== */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: calc(var(--web-container) + var(--web-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--web-gutter);
}

.section {
  position: relative;
  padding-block: var(--web-section-y);
}

/* ── Typography ──────────────────────────────────────────────────────────── */
.eyebrow {
  display: block;
  margin-bottom: var(--web-stack-sm);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);          /* 보유 굵기 Postea 700 (DS 600 미보유) */
  font-size: var(--web-fs-eyebrow);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-wide);
  color: var(--text-emphasis);
  word-break: normal;
}

/* 라이트 면 eyebrow: Ground Brown 글씨 + 앞에 Root Green 정사각 마커(장식) */
[data-theme="light"] .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
[data-theme="light"] .eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  background: var(--bmt-root-green);
}

.h-display {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-display);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tighter);
  color: var(--text);
}

.h-section {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-h2);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tighter);
  color: var(--text);
}

.h-card {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-h3);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}

.lead {
  max-width: var(--web-measure);
  font-size: var(--web-fs-lead);
  line-height: var(--web-lh-body);
  letter-spacing: var(--ls-snug);
  color: var(--text);
}

.body {
  max-width: var(--web-measure);
  font-size: var(--web-fs-body);
  line-height: var(--web-lh-body);
  letter-spacing: var(--ls-snug);
  color: var(--text);
}

.small {
  font-size: var(--web-fs-small);
  line-height: var(--web-lh-body);
  letter-spacing: var(--ls-snug);
  color: var(--text-soft);
}

.lead strong,
.body strong { color: var(--text); font-weight: var(--fw-bold); }

/* 라임 강조 — 페이지당 1회, 다크·그린 면 위 대형 디스플레이 한 단어 */
.accent-lime {
  font-style: normal;
  color: var(--text-accent);
}
/* 라이트 면: 라임 글씨는 대비 불가 → 글자 아래 60%만 칠한 형광펜 + Ground Brown 글씨 (13.55) */
[data-theme="light"] .accent-lime {
  padding-inline: 0.06em;
  color: var(--light-text);
  box-shadow: inset 0 -0.6em 0 var(--bmt-accent-lime);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── Button ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--web-btn-h);
  padding: 0 var(--web-btn-px);
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--web-fs-button);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(var(--press-scale)); }

.btn__glyph {
  display: inline-block;
  font-weight: var(--fw-regular);
  line-height: var(--lh-flat);
}

/* 주 CTA: Root Green 면 + Ground Brown 글씨 (5.07) → hover 흰 면 (14.35) */
.btn--primary {
  background: var(--bmt-root-green);
  color: var(--text-on-green);
}
.btn--primary:hover {
  background: var(--bmt-white);
  color: var(--text-on-green);
}

/* 라이트 면 주 CTA: Ground Brown 면 + 흰 글씨 (14.35) → hover Root Green 면 + Ground Brown 글씨 (5.07) */
:is([data-theme="light"], .site-header.is-on-light) .btn--primary {
  background: var(--bmt-ground-brown);
  color: var(--bmt-white);
}
:is([data-theme="light"], .site-header.is-on-light) .btn--primary:hover {
  background: var(--bmt-root-green);
  color: var(--text-on-green);
}

/* 보조: 1px 흰 30% 테두리 + 흰 글씨 → hover 테두리 Root Green */
.btn--secondary {
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--text);
}
.btn--secondary:hover {
  box-shadow: var(--stroke-accent);
}

/* Root Green 면 위 버튼 (design-system.md §8 btn--on-brand): Ground Brown 면 + 흰 글씨 → #24221B */
.btn--on-brand {
  background: var(--bmt-ground-brown);
  color: var(--text);
}
.btn--on-brand:hover { background: var(--bmt-earth-950); }

/* 링크: 텍스트 + 1px 밑줄 + 글리프 → hover 밑줄 Root Green 2px
   inline-flex라 글자·글리프가 별도 조각이 되어 text-decoration은 그 사이(gap)에서 끊긴다.
   → 밑줄을 상자 아래 단색 선(background, 같은 색 두 점의 linear-gradient = 그라디언트 아님)으로 그려 끝까지 잇는다 */
.btn--link {
  --link-line: currentColor;
  --link-line-w: 1px;
  min-height: 0;
  padding: 0 0 0.2em;
  gap: 0.4em;
  font-weight: var(--fw-semibold);
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(var(--link-line), var(--link-line)) left bottom / 100% var(--link-line-w) no-repeat;
  transition: background-size var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.btn--link:hover {
  --link-line: var(--bmt-root-green);
  --link-line-w: 2px;
  background-size: 100% 2px;
}
.btn--link:active { transform: none; }

/* ── Bento grid ──────────────────────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--web-grid-gap);
}

/* ── Card (bento cell) ───────────────────────────────────────────────────── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--web-stack-sm);
  padding: var(--web-card-p);
  border-radius: var(--radius-none);
  background: var(--panel-bg);
  box-shadow: var(--panel-stroke);
  color: var(--text);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
}
.card:hover,
.card:focus-within { box-shadow: var(--stroke-accent); }

.card__num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-eyebrow);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-wide);
  color: var(--text-emphasis);
}

.card__title {
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-h3);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}

.card__body {
  font-size: var(--web-fs-body);
  line-height: var(--web-lh-body);
  letter-spacing: var(--ls-snug);
  color: var(--text-soft);
}

/* Root Green 면 — 글씨는 Ground Brown (5.07) */
.card--accent {
  background: var(--bmt-root-green);
  box-shadow: none;
  color: var(--text-on-green);
}
.card--accent:hover,
.card--accent:focus-within { box-shadow: none; }   /* #41A34A 면은 Ground Brown 대비 4.46 → hover 면 변경 없음 */
.card--accent .card__num,
.card--accent .card__title,
.card--accent .card__body,
.card--accent .h-card { color: var(--text-on-green); }
.card--accent :focus-visible { outline-color: var(--bmt-ground-brown); }

/* ── Spec list (DS SpecList tone=light · 다크 괘선) ──────────────────────── */
.spec-list {
  display: flex;
  flex-direction: column;
  border-top: var(--line-dark-w) solid var(--line-dark);
}

.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--web-stack-sm) / 2);
  padding-block: var(--web-stack-md);
  border-bottom: var(--line-dark-w) solid var(--line-dark);
}
.spec-row:last-child { border-bottom: 1px solid var(--border-rule-light); }
/* 라이트 면: DS SpecList 기본형처럼 Ground Brown 괘선 (흰 괘선은 #F4F4F4 위에서 보이지 않음) */
[data-theme="light"] .spec-list,
[data-theme="light"] .spec-row { border-color: var(--light-text); }

.spec-row__label {
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-h3);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-snug);
  color: var(--text);
}

.spec-row__value {
  margin: 0;
  font-size: var(--web-fs-body);
  line-height: var(--web-lh-body);
  letter-spacing: var(--ls-tight);
  color: var(--text-soft);
}

/* ── Bullet list — 정사각 마커만 (DS BulletItem) ─────────────────────────── */
.bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-list);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bullet-list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--web-bullet-gap);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-tight);
}
.bullet-list > li::before {
  content: "";
  flex-shrink: 0;
  width: var(--web-bullet-size);
  height: var(--web-bullet-size);
  margin-top: var(--web-bullet-top);
  background: currentColor;
}

/* ── Badge ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.4em 0.75em;
  border-radius: var(--radius-none);
  box-shadow: var(--stroke-accent);
  color: var(--text-emphasis);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--web-fs-small);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-snug);
  white-space: nowrap;
}

/* ── Callout (섹션 하단 강조문) ──────────────────────────────────────────── */
.callout {
  max-width: var(--web-measure);
  padding-left: var(--web-stack-md);
  box-shadow: inset 2px 0 0 var(--bmt-root-green);
  font-size: var(--web-fs-lead);
  font-weight: var(--fw-medium);
  line-height: var(--web-lh-body);
  letter-spacing: var(--ls-snug);
  color: var(--text);
}

/* ── Note (08 하단 고지) ─────────────────────────────────────────────────── */
.note {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  font-size: var(--web-fs-small);
  line-height: var(--web-lh-body);
  letter-spacing: var(--ls-snug);
  color: var(--text-soft);
  list-style: none;
  padding: 0;
}
.note > li {
  display: flex;
  align-items: flex-start;
  gap: var(--web-bullet-gap);
}
.note > li::before {
  content: "";
  flex-shrink: 0;
  width: var(--web-bullet-size);
  height: var(--web-bullet-size);
  margin-top: 0.68em;
  background: currentColor;
}

/* ── Photo — radius 15px 유일 예외 ───────────────────────────────────────── */
.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: var(--panel-bg);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo--4x5  { aspect-ratio: 4 / 5; }
.photo--3x2  { aspect-ratio: 3 / 2; }
.photo--16x6 { aspect-ratio: 3 / 2; }   /* 모바일은 16:6이 너무 얇아 3:2로, md 이상 16:6 */

/* ── Step (번호 단계 · DS ProcessStep 원형) ──────────────────────────────── */
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--web-stack-md);
  row-gap: var(--web-stack-sm);
  align-items: start;
}
.step__num {
  display: inline-grid;
  place-items: center;
  width: var(--web-step-size);
  height: var(--web-step-size);
  border-radius: var(--radius-round);
  background: var(--bmt-earth-900);
  box-shadow: var(--panel-stroke);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-h3);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-none);
  color: var(--text);
  grid-row: span 2;
}
/* 라이트 면: Ground Brown 원 + 흰 숫자 (14.35) — 다크 원(#37342A) 위 브라운 숫자는 1.15로 판독 불가 */
[data-theme="light"] .step__num {
  background: var(--bmt-ground-brown);
  box-shadow: none;
  color: var(--bmt-white);
}
.step__title {
  align-self: end;
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-h3);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.step__body {
  font-size: var(--web-fs-body);
  line-height: var(--web-lh-body);
  letter-spacing: var(--ls-snug);
  color: var(--text-soft);
}

/* ── md 768 ──────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .bento--2,
  .bento--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .card--wide { grid-column: span 2; }
  .card--tall { grid-row: span 2; }

  .spec-row {
    grid-template-columns: minmax(10em, 1fr) minmax(0, 2fr);
    column-gap: var(--web-stack-lg);
  }

  .photo--16x6 { aspect-ratio: 16 / 6; }
}

/* ── lg 1024 ─────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── xl 1280 ─────────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .spec-row { grid-template-columns: minmax(12em, 1fr) minmax(0, 2.4fr); }
}

/* ── Section nav (section-nav.js) ────────────────────────────────────────────
   boostree.partners 점 레일 구성을 DS로 옮김: 원형 점(50% 예외) + 필 라벨(100px 예외) · 그 외 직각, 그림자·블러 없음.
   ≥1024: 오른쪽 가운데 세로 레일 — 점 사이 가는 선, 지나온 구간은 Root Green으로 채움(--nav-fill), hover·focus 시 라벨.
   <1024: 오른쪽 아래 필 버튼(현재 섹션 · n/전체) → 아래에서 올라오는 섹션 목록 시트(<dialog>).
   레일 색은 아래 섹션 톤을 따른다(.is-on-light → tokens.css 라이트 스코프) */
.section-nav__rail {
  --nav-gap: clamp(14px, 1.6svh, 22px);
  --nav-fill: 0px;
  position: fixed;
  top: 50%;
  right: clamp(12px, 1.4vw, 28px);
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: var(--nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
  color: var(--text);
}
@media (min-width: 1024px) {
  .section-nav__rail { display: flex; }
}
/* 점 사이 선: 전체(옅게) + 지나온 구간(Root Green) */
.section-nav__rail::before,
.section-nav__rail::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 4.5px;
  width: 1px;
  pointer-events: none;
}
.section-nav__rail::before { bottom: 5px; background: var(--line-dark); }
.section-nav__rail::after {
  height: var(--nav-fill);
  background: var(--bmt-root-green);
  transition: height var(--dur-slow) var(--ease-standard);
}
.section-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 10px;
  color: inherit;
  text-decoration: none;
}
/* 포인터 판정 영역을 점보다 넓게 (가운데 정렬 유지) */
.section-nav__item::after { content: ""; position: absolute; inset: -6px -8px; }
.section-nav__dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  transform: scale(.6);
  transition: transform var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
}
.section-nav__item.is-past .section-nav__dot { background: var(--bmt-root-green); opacity: 1; }
.section-nav__item[aria-current="true"] .section-nav__dot {
  background: var(--bmt-root-green);
  opacity: 1;
  transform: scale(1);
}
.section-nav__item:hover .section-nav__dot { opacity: 1; transform: scale(1); }
.section-nav__label {
  position: absolute;
  top: 50%;
  right: 22px;
  margin-top: -13px;
  padding: 5px 12px;
  border-radius: var(--radius-pill, 100px);
  background: var(--bmt-ground-brown);
  box-shadow: var(--nav-pill-stroke);
  color: var(--bmt-white);
  font-size: var(--web-fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(4px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.section-nav__item:hover .section-nav__label,
.section-nav__item:focus-visible .section-nav__label { opacity: 1; transform: none; }
.section-nav__item:focus-visible { outline: none; }
.section-nav__item:focus-visible .section-nav__dot { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 3px; opacity: 1; transform: scale(1); }

/* 모바일·태블릿: 필 버튼 */
.section-nav__fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill, 100px);
  background: var(--bmt-ground-brown);
  box-shadow: var(--nav-pill-stroke);
  color: var(--bmt-white);
  font-family: var(--font-body);
  font-size: var(--web-fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-slow) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
html.js .section-nav__fab { display: inline-flex; }
@media (min-width: 1024px) {
  html.js .section-nav__fab { display: none; }
}
.section-nav__fab:active { transform: scale(var(--press-scale)); }
.section-nav__fab.is-hidden { opacity: 0; pointer-events: none; }
/* 목록 표시: 1px 가로선 세 개 (아이콘 세트 대신 직각 선) */
.section-nav__bars {
  width: 14px;
  height: 9px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 70% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 45% 1px no-repeat;
}
.section-nav__count { color: var(--nav-pill-soft); font-variant-numeric: tabular-nums; }

/* 섹션 목록 시트 — 직각, 불투명 막(블러 없음) */
.section-nav__sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  max-height: min(78svh, 640px);
  margin: 0;
  padding: 20px var(--web-gutter) max(20px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: var(--radius-none);
  background: var(--light-bg);
  color: var(--text);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* ::backdrop은 구형 브라우저에서 변수를 상속받지 못해 같은 값을 대체값으로 둔다 */
.section-nav__sheet::backdrop { background: var(--scrim, rgba(36, 34, 27, .64)); }
.section-nav__sheet[open] { animation: section-nav-up var(--dur-slow) var(--ease-standard); }
@keyframes section-nav-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.section-nav__sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--light-text);
}
.section-nav__sheet-title {
  font-size: var(--web-fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}
.section-nav__close {
  appearance: none;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--web-fs-small);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.section-nav__sheet-list { margin: 0; padding: 0; list-style: none; }
.section-nav__sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--text);
  font-size: var(--web-fs-body);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-standard);
}
.section-nav__sheet-item:hover { background: var(--hover-tint); }
.section-nav__num {
  min-width: 1.8em;
  color: var(--text-soft);
  font-size: var(--web-fs-small);
  font-variant-numeric: tabular-nums;
}
/* 현재 섹션: 굵게 + DS 정사각 마커(Root Green) */
.section-nav__sheet-item[aria-current="true"] { font-weight: var(--fw-bold); }
.section-nav__sheet-item[aria-current="true"]::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  margin-right: 4px;
  background: var(--bmt-root-green);
}
@media (prefers-reduced-motion: reduce) {
  .section-nav__sheet[open] { animation: none; }
}