/* interactions.css — 동작 상태 스타일 (작업 C · docs/markup-contract.md §6·§7)
   동작 JS: motion.js · tabs.js · results-chart.js · cal-modal.js
   원칙: 토큰만 사용 · 직각 · 그림자·블러 없음 · opacity·color 위주 · 120–320ms, --ease-standard
   대체 경로: html.no-js · 모션 줄이기 → 모든 콘텐츠 표시, 최종 상태 */

/* ── 등장 [data-reveal] ───────────────────────────────
   숨김은 html.js + 모션 허용일 때만. motion.js가 실행되지 않으면
   3초 뒤 failsafe 애니메이션으로 표시(motion-ready가 붙으면 해제). */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reduced-motion) [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(6px);
    animation: bmt-reveal-failsafe 0s linear 3s forwards;
  }
  html.js.motion-ready [data-reveal] { animation: none; }
  html.js [data-reveal] {
    transition:
      opacity var(--dur-slow) var(--ease-standard) var(--reveal-delay, 0ms),
      transform var(--dur-slow) var(--ease-standard) var(--reveal-delay, 0ms);
  }
}
@keyframes bmt-reveal-failsafe {
  to { opacity: 1; transform: none; }
}

/* ── 03 체크리스트 순차 점등 ─────────────────────────
   기본(no-js·모션 줄이기)은 전부 점등(Root Green 마커).
   모션 허용 시 점등 전 마커만 괘선 회색으로 — 텍스트 색은 그대로(대비 유지). */
html.js:not(.reduced-motion) .checklist > li[data-root-index]::before {
  transition: background-color var(--dur-slow) var(--ease-standard);
}
html.js:not(.reduced-motion) .checklist > li[data-root-index]:not(.is-lit)::before {
  background: var(--line-dark);
}

/* ── 11 시작 단계 순차 점등 ─────────────────────────
   점등 = 번호 원이 Root Green 면 + Ground Brown 글씨(5.07). no-js는 전부 점등. */
.start-steps > li[data-step] .step__num {
  transition:
    background-color var(--dur-slow) var(--ease-standard),
    color var(--dur-slow) var(--ease-standard);
}
.start-steps > li[data-step].is-lit .step__num,
html.no-js .start-steps > li[data-step] .step__num {
  background: var(--bmt-root-green);
  color: var(--text-on-green);
}

/* ── 09-2 지역 판 순차 등장 (reach-map.js) ──────────────
   기본(no-js·모션 줄이기)은 전부 표시. 모션 허용 시 지도가 화면에 들어오면 data-seq 순서로 판이 아래에서 올라와 자리 잡는다.
   스크롤 비례가 아니라 진입 시 한 번 — 일부만 보이는 지도가 "0곳"으로 읽히지 않게 */
html.js:not(.reduced-motion) .reach-region[data-seq]:not(.is-lit),
html.js:not(.reduced-motion) .reach-label[data-seq]:not(.is-lit) { opacity: 0; }
html.js:not(.reduced-motion) .reach-region[data-seq]:not(.is-lit) .reach-region__top { transform: translateY(calc(var(--lift) * 1px)); }

/* ── 헤더 스크롤 상태 ────────────────────────────────
   최상단: 배경·괘선 투명(씬이 비침) → 스크롤: 불투명 면 + 괘선. 블러 없음 */
html.js .site-header {
  transition:
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
}
html.js .site-header:not(.is-scrolled) {
  background-color: transparent;
  border-bottom-color: transparent;
}
html.js .site-header.is-scrolled {
  background-color: var(--page-bg);
  border-bottom-color: var(--line-dark);
}

/* ── 06 탭 ───────────────────────────────────────── */
.tabs__list[hidden],
.tabs__panel[hidden] { display: none; }

/* ≥1024: 탭 없이 세 패널 3열 나란히 (tabs.js가 목록 hidden · 탭 ARIA 제거).
   grid 기본 stretch로 카드 높이 정렬. 패널 내부 스타일은 sections.css 그대로 */
@media (min-width: 1024px) {
  .tabs:has(> .tabs__list[hidden]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--web-grid-gap);
  }
}

.tabs__list {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  /* 괘선은 inset으로 그려 활성 밑줄이 그 위에 겹치게 (overflow 클리핑 회피) */
  box-shadow: inset 0 calc(var(--line-dark-w) * -1) 0 var(--line-dark);
}
.tabs__list::-webkit-scrollbar { display: none; }

.tabs__tab {
  appearance: none;
  flex: 0 0 auto;
  min-height: calc(var(--web-btn-h) * .8);
  margin: 0;
  padding: 0 var(--web-stack-sm);
  border: 0;
  border-bottom: var(--focus-ring-w) solid transparent;
  border-radius: var(--radius-none);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--web-fs-button);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  color: var(--text-soft);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}
.tabs__tab:first-child { padding-inline-start: 0; }
.tabs__tab:hover { color: var(--text); }
.tabs__tab:active { transform: scale(var(--press-scale)); }
.tabs__tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--bmt-root-green);
}
.tabs__tab:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: calc(var(--focus-ring-w) * -1);
}
.tabs__panel:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.tabs--ready > .tabs__panel {
  transition: opacity var(--dur-slow) var(--ease-standard);
}
.tabs--ready > .tabs__panel.is-entering {
  opacity: 0;
  transition: none;
}

/* ── 08 카운트업 폭 흔들림 방지 ─────────────────────── */
.case__rate { font-variant-numeric: tabular-nums; }

/* ── 모션 줄이기: 상태 전환 즉시 ─────────────────────── */
html.reduced-motion .tabs__panel,
html.reduced-motion .tabs__tab,
html.reduced-motion .site-header,
html.reduced-motion .start-steps .step__num,
html.reduced-motion .checklist > li::before,
html.reduced-motion .reach-region,
html.reduced-motion .reach-region__top,
html.reduced-motion .reach-label,
html.reduced-motion .reach-label__count,
html.reduced-motion [data-reveal] {
  transition: none;
}
html.reduced-motion .tabs__tab:active { transform: none; }
/* 09-2: 떠오름 없이 색·흐림 강조만 */
html.reduced-motion .reach-region.is-active .reach-region__top { transform: none; }
html.reduced-motion .reach-label.is-active { transform: translate(-50%, -50%); }

/* ── 롤링 숫자 (roll-number.js · 09 .time__num · HERO·02·09-2 [data-roll]) ─────────
   JS가 모션 허용 + IO 지원일 때만 .is-roll-ready와 롤링 DOM을 만든다. 쉼표 등 숫자 아닌 글자(.roll__char)는 고정.
   자릿수 칸 = 보이지 않는 최종 숫자(폭·높이·기준선 유지) + 그 위의 숫자 띠.
   overflow 대신 clip-path로 자르므로 inline-block 기준선이 바뀌지 않는다. */
.is-roll-ready { --roll-dur: 1000ms; }
.roll { display: inline; white-space: nowrap; }
/* 숫자 띠 간격 1.3em: 줄 높이 1(Postea 숫자)보다 글리프가 커서 1em 간격이면 이웃 숫자 조각이 칸에 비친다.
   칸은 위아래 음수 여백으로 줄 박스 기여 높이를 1em으로 유지 → 레이아웃·기준선 그대로 */
.roll__digit {
  position: relative;
  display: inline-block;
  line-height: 1.3;
  margin-block: -0.15em;
  vertical-align: baseline;
  clip-path: inset(0);
}
.roll__sizer { visibility: hidden; }
.roll__strip {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  will-change: transform;
}
.roll__strip > span { display: block; }
.is-rolling .roll__strip {
  transform: translateY(var(--roll-to));
  transition: transform var(--roll-dur) var(--ease-standard) var(--roll-delay, 0ms);
}
.is-rolled .roll__strip {
  transform: translateY(var(--roll-to));
  transition: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .roll__strip { transform: translateY(var(--roll-to)); transition: none; }
}
html.reduced-motion .roll__strip { transform: translateY(var(--roll-to)); transition: none; }