/* 두레박 — 데이터 페이지(지난추첨 M8 · 통계 M6 · 시뮬레이터 M9)
   생성기와 같은 어휘를 쓴다 — 새 컴포넌트를 만들지 않는다(§6.15).
   .ball/.balls-row/.ball-plus/.segmented 등은 base.css·generator.css를 함께 로드해 재사용. */

/* 로드 CLS 방지 — 데이터 페이지 컨테이너 높이 예약 (라운드 E P1-c).
   생성기(#generatorRoot)와 원인은 같지만 처방이 다르다: 이 페이지들은 데이터 길이에 따라
   본문이 2,600~3,900px로 변동해 고정 예약이 부적절하다(실측, 2026-07-15).

   대신 **첫 화면분만 예약**한다. CLS 는 뷰포트 안에서 보이는 이동만 센다 —
   실측 시프트 소스가 전부 footer.site-footer(y410 → 화면 밖) 하나였으므로,
   초기 페인트에서 푸터가 이미 폴드 아래에 있으면 이후 본문이 얼마나 자라든 보이는 이동이 없다.
   100vh 면 컨테이너 상단(≈150px)과 합쳐 어떤 뷰포트에서도 푸터가 폴드 밖에서 시작한다.

   파워볼도 데이터가 붙었으므로 함께 예약한다(2026-07-21). 소스 응답이 1.2초로 6/45(0.07초)보다
   15~20배 느려 "불러오는 중 → 본문" 교체가 눈에 띄는 만큼, 예약이 6/45보다 더 필요하다.
   단 시뮬레이터는 등수 규칙이 정해질 때까지 "준비 중" 짧은 카드라 예약하면 빈 공간만 생긴다 —
   그 화면이 열릴 때(games.js hasRankRules) 여기 선택자도 함께 되돌린다. */
#drawsRoot,
#statsRoot,
#simulatorRoot[data-game="lotto-645"] { min-height: 100vh; }

/* 세로 리듬은 .group(margin-top:--sp-5)이 만든다 — 그룹이 아닌 직계 블록만 여기서 보정 */
.data-content { display: block; }
.data-content > .draw-card,
.data-content > .draw-list,
.data-content > .coming-soon { margin-top: var(--sp-5); }
.data-content > .btn,
#simulatorRoot > .btn { margin-top: var(--sp-3); }
#simulatorRoot > .sim-settings-card { margin-top: var(--sp-5); }
.data-loading, .data-error { text-align: center; color: var(--label-2); padding: var(--sp-5) 0; }
.data-error { color: var(--danger); }
.data-error.small { padding: var(--sp-2) 0; text-align: left; font-size: var(--fs-aux); }
.data-subhead { color: var(--label-2); font-size: var(--fs-aux); margin: 0 0 var(--sp-2); }
/* 데이터 출처 (라운드 E P2-b) — 영수증이지 면책이 아니다. ⚠·--danger 쓰지 않는다.
   그룹 푸터와 같은 어휘(--fs-cap/--label-2). */
.data-source { font-size: var(--fs-cap); color: var(--label-2); margin: 0 0 var(--sp-2); }
.data-h2 {
  font-size: var(--fs-cap); font-weight: 600; color: var(--label-2);
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0 var(--inset) 7px; margin: var(--sp-5) 0 0;
}

/* 컨트롤 라인(검증 기간 등) — 생성기 한 라인 컨트롤과 같은 축·높이(§6.8) */
.segment-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.segment-row .label { font-size: var(--fs-mini); color: var(--label-2); font-weight: 600; white-space: nowrap; }

/* ── 번호 조회 — 1~45 그리드 ──────────────────────────────────── */
.num-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.num-cell {
  aspect-ratio: 1; padding: 0;
  border: 0.5px solid var(--sep); background: var(--card); border-radius: 50%;
  font: inherit; font-size: var(--fs-mini); font-weight: 700; color: var(--label);
  font-variant-numeric: tabular-nums;
}
.num-cell:active { background: var(--track); }
/* 선택 시 볼 밴드 색 위 — 볼과 같은 잉크 규칙(§5.2) */
.num-cell[aria-pressed="true"] {
  background: var(--cell); color: var(--ball-ink); border-color: transparent;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
}
@media (min-width: 560px) { .num-grid { grid-template-columns: repeat(15, 1fr); } }

.lookup-result { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.lookup-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.lookup-summary strong { font-size: var(--fs-body); }
.jump-row {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 0.5px solid var(--sep);
}
.jump-row .chip-add { width: 96px; }
/* 날짜 입력(파워볼)은 로케일 형식·달력 아이콘까지 담아야 해 96px 로는 잘린다 —
   같은 명시도라 이 규칙이 위 .chip-add 뒤에 와야 이긴다. 좁은 폭에선 jump-row 가 줄바꿈. */
.jump-row .chip-add--date { width: auto; min-width: 148px; }
.jump-result:not(:empty) { margin-top: var(--sp-2); }

/* ── 회차 카드 (최신 하이라이트 · 회차 조회) ───────────────────── */
.draw-card {
  background: var(--card); border: none; border-radius: var(--r-md);
  padding: var(--sp-4) var(--inset);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.draw-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.draw-card__no { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); }
/* 읽기 전용 배지 — 채움 틴트(§1.3 · 라벨은 --on-tint) */
.badge-latest {
  font-size: var(--fs-cap); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--tint-fill); color: var(--on-tint);
}
.draw-card__date { color: var(--label-2); font-size: var(--fs-cap); }
.draw-card__prize {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding-top: var(--sp-2); border-top: 0.5px solid var(--sep); font-weight: 600;
}

/* 회차 조회 네비 */
.lookup__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.lookup__title { font-weight: 700; text-align: center; flex: 1; font-size: var(--fs-aux); }
.nav-arrow {
  width: 44px; height: 44px; padding: 0; flex: none;
  border: none; background: var(--track); border-radius: var(--r-sm);
  font-size: 1.3rem; line-height: 1; color: var(--tint);
}
.nav-arrow:active { background: var(--track); }
.nav-arrow:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── 회차 리스트 (지난 추첨) — inset grouped list ──────────────── */
.draw-list { background: var(--card); border-radius: var(--r-md); overflow: hidden; }
.draw-list:empty { display: none; }
.draw-row { padding: 11px var(--inset); display: flex; flex-direction: column; gap: var(--sp-2); }
.draw-row + .draw-row { border-top: 0.5px solid var(--sep); }
.draw-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.draw-row__no { font-weight: 700; color: var(--label); font-size: var(--fs-aux); }
.draw-row.highlight { background: var(--tint-soft); }

/* ── 통계 섹션 — .group + .card 어휘(base.css)를 그대로 쓴다 ───── */
.win-toggle { align-self: flex-start; }

.hc-row { display: flex; align-items: center; gap: var(--sp-3); }
/* 핫/콜드는 라벨 텍스트가 정보를 전달한다 — 색으로 구분하지 않는다(§8.3) */
.hc-label { width: 40px; flex: none; font-weight: 700; font-size: var(--fs-mini); color: var(--label-2); }

/* 막대(미출현 갭) — 막대 색은 --tint 단색, 번호대별만 밴드 색 허용(§6.15) */
.bar-row { display: flex; align-items: center; gap: var(--sp-2); }
.bar-row__key { width: 28px; flex: none; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; font-size: var(--fs-aux); }
.bar-row__key.wide { width: 46px; text-align: left; font-size: var(--fs-mini); }
.bar-track { flex: 1; height: 12px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; }
.bar-fill { height: 100%; background: var(--tint); border-radius: var(--r-pill); }
.bar-row__val { width: 48px; flex: none; text-align: right; color: var(--label-2); font-size: var(--fs-cap); }

/* 비율 막대(홀짝·고저) */
.prop-row { display: flex; flex-direction: column; gap: 4px; }
.prop-head { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-aux); font-weight: 600; }
.prop-track { height: 14px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; }
.prop-fill { height: 100%; background: var(--tint); }

/* 히스토그램(합계·끝자리·AC 분포) */
.histogram { display: flex; align-items: flex-end; gap: 4px; height: 110px; }
.histogram__col { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.histogram__bar { width: 100%; background: var(--tint); border-radius: 4px 4px 0 0; min-height: 3px; }
.histogram-x { display: flex; gap: 4px; margin-top: 4px; }
.histogram-x span { flex: 1; text-align: center; font-size: 0.6rem; color: var(--label-2); font-variant-numeric: tabular-nums; }

/* 월별 경향 행 */
.month-row { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 0; border-top: 0.5px solid var(--sep); }
.month-row:first-of-type { border-top: none; }
.month-row__m { font-weight: 700; width: 42px; flex: none; font-size: var(--fs-aux); }
.month-row__d { width: 52px; flex: none; }

/* 동반 쌍 */
.pair-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 0.5px solid var(--sep); }
.pair-row:first-of-type { border-top: none; }
.pair-row__k { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 시뮬레이터 요약(통계 페이지) + 시뮬레이터 페이지 ──────────── */
.sim-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-chip {
  background: var(--track); color: var(--label); border-radius: var(--r-xs);
  padding: 3px 10px; font-size: var(--fs-mini); font-weight: 600;
}

.sim-stats { display: flex; gap: var(--sp-3); }
.sim-stat {
  flex: 1; background: var(--track); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 4px;
}
.sim-stat.big { padding: var(--sp-4); }
.sim-stat.primary { background: var(--tint-soft); }
.sim-rate { font-size: var(--fs-num); font-weight: 800; font-variant-numeric: tabular-nums; }

.sim-settings-card {
  background: var(--card); border: none; border-radius: var(--r-md);
  padding: var(--sp-4) var(--inset);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.sim-settings-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.link-arrow { font-weight: 600; font-size: var(--fs-aux); color: var(--tint); }

.sim-progress { height: 8px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--sp-3); }
.sim-progress[hidden] { display: none; }
.sim-progress__fill { height: 100%; width: 0; background: var(--tint); transition: width .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .sim-progress__fill { transition: none; }
}

/* 근접도·기간별 흐름 스파크라인 (라운드 B §5) */
.sim-subhead {
  font-size: var(--fs-cap); font-weight: 600; color: var(--label-2);
  text-transform: uppercase; letter-spacing: 0.03em; margin: var(--sp-3) 0 var(--sp-2);
}
.spark-wrap { background: var(--track); border-radius: var(--r-xs); padding: var(--sp-2); }
.spark { display: block; width: 100%; }
.spark polyline { vector-effect: non-scaling-stroke; }
.spark-mine { stroke: var(--tint); stroke-width: 2; }
.spark-rand { stroke: var(--faint); stroke-width: 2; stroke-dasharray: 3 3; }
.spark-legend { display: flex; gap: var(--sp-4); margin-top: 6px; font-size: var(--fs-cap); }
.spark-legend .legend { display: inline-flex; align-items: center; gap: 5px; color: var(--label-2); }
.spark-legend .legend::before { content: ""; width: 14px; border-top: 2px solid var(--faint); }
.spark-legend .legend--mine::before { border-color: var(--tint); }

/* ── 연속 시뮬 병렬 비교 패널 (§8-34 ④) ───────────────────────────
   나란히 두는 것이 요점이라 좁은 뷰포트에서도 2열을 유지한다 — 대신 값을 라벨 아래로
   쌓고 금액은 억/만 축약(fmtPrize)을 써서 320px에서도 넘치지 않게 한다. */
.sim-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.sim-panel { background: var(--card); border-radius: var(--r-md); overflow: hidden; min-width: 0; }
.sim-panel__head {
  padding: 8px var(--sp-3);
  font-size: var(--fs-cap); font-weight: 700; color: var(--label-2);
  text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--track);
}
.sim-panel__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: 6px; }
.sim-metric { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sim-metric .k { font-size: var(--fs-cap); color: var(--label-2); }
.sim-metric .v {
  font-size: var(--fs-aux); font-weight: 700; color: var(--label);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.sim-ranks { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 0.5px solid var(--sep); }
.sim-rank { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.sim-rank .k { font-size: var(--fs-cap); color: var(--label-2); flex: none; min-width: 30px; }
.sim-rank .v { font-size: var(--fs-mini); font-weight: 700; color: var(--label); margin-left: auto; }
.sim-rank .p { font-size: var(--fs-cap); color: var(--label-2); min-width: 48px; text-align: right; flex: none; }

.sim-result { display: block; }
.sim-result-card {
  margin-top: var(--sp-5);
  background: var(--card); border: none; border-radius: var(--r-md);
  padding: var(--sp-4) var(--inset);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.sim-result-card h2 { font-size: var(--fs-body); margin: 0; }

/* 등수 분포 표 */
.rank-table { background: var(--card); border-radius: var(--r-md); overflow: hidden; }
.rank-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3);
  align-items: center; padding: 11px var(--inset);
}
.rank-row + .rank-row { border-top: 0.5px solid var(--sep); }
.rank-row--head {
  background: var(--track); font-weight: 700;
  font-size: var(--fs-cap); color: var(--label-2);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.rank-row__name { font-weight: 600; font-size: var(--fs-aux); }
.rank-row__mine { font-weight: 700; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-aux); }
.rank-row__rand { min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-aux); }