/* 두레박 — 생성기 화면: 카운트다운 · 지난추첨 · 볼 · 한 라인 컨트롤 · 필터 시트 · 결과 액션 · 기록
   docs/디자인_가이드.md §5·§6.4~6.12 (시안 G · g1 블루) */

/* 축 A(16px) 위 세로 흐름. 간격은 각 블록의 margin-top이 만든다(§4.1). */
.generator-layout { display: block; }

/* 로드 CLS 방지 — idle 레이아웃 높이를 미리 예약한다(라운드 E P1-b).
   원인: #generatorRoot 가 빈 채로 페인트된 뒤 JS 가 채우면서 푸터가 뷰포트 밖으로 밀린다
   (실측 시프트 소스 = footer.site-footer y410→밖). §6.14가 광고에만 걸어둔
   "크기 사전 예약" 원칙을 본문 컨테이너로 확장한 것이다.

   값은 **재정렬(P1-a)·출처 표기(P2-b)까지 반영한 뒤** idle·기록 빈 상태에서 실측했다(2026-07-15).
   #generatorRoot 는 생성기 4종(ko/en × 6·45/파워볼)이 공유하므로 페이지마다 자연 높이가 다르다
   (375px 실측: 파워볼 814 · en파워볼 871 · ko6/45 890 · en6/45 929).
   → **가장 작은 자연 높이**를 쓴다. 과대 예약은 짧은 페이지에 빈 공간을 만들지만,
     과소분(최대 115px)은 이미 푸터가 폴드 밖이라 보이는 시프트를 만들지 않는다(전 페이지 CLS 0 실측).
   레이아웃·카피를 바꾸면 반드시 재측정한다:  MODE=layout node tests/measure-cls.mjs / /powerball/ /en/ /en/lotto-645/
   기록이 쌓이면 실제 높이가 커지지만 min-height 라 문제없다. */
#generatorRoot { min-height: 814px; }
@media (min-width: 412px) { #generatorRoot { min-height: 758px; } }
@media (min-width: 768px) { #generatorRoot { min-height: 721px; } }

/* ── 카운트다운 (§6.4) — 그룹 카드 안 한 행 ───────────────────── */
.countdown {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  padding: 14px var(--inset);
}
.countdown .cd-l { font-size: var(--fs-aux); color: var(--label-2); }
.countdown .cd-v { display: flex; align-items: baseline; gap: var(--sp-2); }
.countdown .cd-days { font-size: var(--fs-body); font-weight: 700; }
/* 시계에 배경 칩을 두지 않는다 — 틴트 텍스트만으로 충분(§6.4) */
.countdown .clock {
  font-family: var(--font-mono); font-size: var(--fs-num); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  color: var(--tint); background: transparent;
}
.countdown .local-note { width: 100%; font-size: var(--fs-cap); color: var(--label-2); }

/* ── 지난 추첨 바 (§6.5) — 그룹 카드 안 .row.tap ──────────────── */
#lastDraw.is-error { color: var(--danger); }
#lastDraw.is-loading { color: var(--label-2); }
.ld-balls { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-left: auto; }

/* ── 로또볼 (§5) ──────────────────────────────────────────────── */
.ball {
  --size: var(--ball);
  width: var(--size); height: var(--size); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: calc(var(--size) * 0.42);
  color: var(--ball-ink);        /* 전 밴드 다크 잉크(§5.2 · §8-31 ②) */
  background: #ccc;              /* 폴백 — 실제 밴드 색은 js/core/games.js가 주입 */
  /* inset = 구형감 · 바깥 = 경계 정의(밴드 색과 흰 카드 대비가 낮아 유일한 경계 단서) */
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12);
  font-variant-numeric: tabular-nums; user-select: none; flex: none;
}
.ball.sm { --size: var(--ball-sm); }
/* 파워볼 화이트볼 — 흰 카드 대비 1.09:1로 경계 소실 → 테두리 의무(§5.4) */
.ball--light { border: 1px solid var(--ball-edge); }
.ball--empty {
  background: var(--track); border: 0.5px solid var(--sep); box-shadow: none;
  color: var(--faint); font-weight: 600;   /* "?" 는 장식 placeholder */
}
/* 레드볼만 흰 숫자 — 흰 4.98:1 > 다크 잉크 3.57:1 (§5.2 · §9-14) */
.ball--power { background: var(--ball-powerball); color: #fff; }
/* 보너스 볼 구분(색상 밴드 + 링) */
.ball--bonus { box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.12), 0 0 0 2px var(--ball-edge); }

.ball-plus { color: var(--faint); font-size: var(--fs-body); font-weight: 300; padding: 0 2px; }
.balls-row { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.balls-row.wrap { justify-content: flex-start; }
/* 좁은 폭 갭 축소 — 폭 예산은 base.css 의 320~359px 블록에 있다.
   그 블록이 아니라 여기 두는 이유: base.css 가 먼저 로드돼 위 gap:6px 에 밀린다(명시도 동률·순서 패배). */
@media (max-width: 359px) {
  .balls-row { gap: 4px; }
}

/* 순차 등장 애니메이션 (§5.5) — 볼은 아래에서 위로 올라온다(브랜드 가이드 §4.2).
   CTA 가 결과 아래에 있으니 당기는 방향과 등장 방향이 같다. 지속시간·이징·오버슈트는 유지(§8-24 ④). */
@keyframes ballPop {
  0%   { transform: scale(.2) translateY(12px); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.ball--enter { animation: ballPop .36s cubic-bezier(.2, .8, .3, 1.15) both; }
@media (prefers-reduced-motion: reduce) {
  .ball--enter { animation: none; }
}

/* ── 결과 영역 (§6.6) — 게임 수 1·3·5 무관 동일 그리드 ────────── */
#resultArea { min-height: 56px; }
.result-row {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--sp-3);
  align-items: center; padding: 11px var(--inset);
}
.result-row + .result-row { border-top: 0.5px solid var(--sep); }
/* 고정폭 26px 라벨이 축을 만든다. 읽는 텍스트이므로 --faint 금지(§9-3) */
.result-row .label { font-size: var(--fs-aux); font-weight: 700; color: var(--label-2); text-align: center; }

.result-caption {
  padding: 11px var(--inset); text-align: center;
  color: var(--label-2); font-size: var(--fs-aux);
}
.result-row + .result-caption { border-top: 0.5px solid var(--sep); }

/* ── 한 라인 컨트롤 (§6.8) — 세그먼트·필터 칩 둘 다 44px 축 ───── */
.control-line {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.ctrl-seg { display: flex; align-items: center; gap: var(--sp-2); }
.ctrl-lbl { font-size: var(--fs-mini); font-weight: 600; color: var(--label-2); white-space: nowrap; }
.filter-chip {
  flex: 1; min-width: 190px; min-height: 44px;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 12px;
  background: var(--card); border: none; border-radius: var(--r-sm);
  box-shadow: var(--shadow-rest);
}
.filter-chip .fc-ico { color: var(--label-2); flex: none; }
.filter-chip .fc-text {
  flex: 1; text-align: left;
  font-size: var(--fs-aux); font-weight: 600; color: var(--tint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-chip .chevron { color: var(--faint); font-size: var(--fs-aux); flex: none; }
.filter-chip:active { background: var(--track); }

/* 주 CTA·결과 액션 (§6.10) */
.cta-row { margin-top: var(--sp-3); }
.actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
/* 3등분 한 줄에 한 줄 라벨로 들어가야 한다(검수 P1) — 이모지 아이콘 없이 라벨만,
   패딩을 좁혀 375px 버튼 폭 109px 안에 "이미지 저장"(≈78px)이 감기지 않게 한다. */
.actions .btn { flex: 1; min-width: 0; padding-inline: var(--sp-2); white-space: nowrap; }
.actions[hidden] { display: none; }

/* 스킵 토글 */
.skip-row { display: flex; justify-content: center; margin-top: var(--sp-2); }
.skip-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: var(--fs-mini); color: var(--label-2); cursor: pointer;
}
.skip-toggle[hidden] { display: none; }

/* 인라인 경고 (§7) — 무엇이 잘못됐고 어떻게 고치는지 말한다 */
.filter-warning {
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs);
  background: var(--danger-bg); color: var(--danger); font-size: var(--fs-aux);
  display: none;
}
.filter-warning.show { display: block; }

/* 보조 설명(그룹 푸터 톤) — --faint 금지 */
.fhint { font-size: var(--fs-cap); color: var(--label-2); margin: 4px 0 0; line-height: 1.4; }

/* ── 필터 세부 설정 시트 (§6.9) ───────────────────────────────── */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(20, 22, 30, 0.42);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-backdrop[hidden] { display: none; }
.sheet {
  width: 100%; max-width: var(--wrap);
  background: var(--bg);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -2px 30px rgba(0, 0, 0, 0.25);
  max-height: 92vh; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* 장식이 아니라 "끌어내려 닫을 수 있다"는 어포던스 */
.grabber {
  width: 36px; height: 5px; border-radius: 3px;
  background: rgba(120, 120, 128, 0.4); margin: 8px auto 0; flex: none;
}
.sheet-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 10px var(--inset); min-height: 48px; flex: none;
}
/* 가중치 차이로 주 행동(완료)을 표시한다 */
.sheet-nav .s-cancel,
.sheet-nav .s-done {
  background: none; border: none; color: var(--tint);
  font-size: var(--fs-body); min-height: 44px; padding: 0 4px;
}
.sheet-nav .s-cancel { font-weight: 400; }
.sheet-nav .s-done { font-weight: 700; }
.sheet-nav .s-title { font-size: var(--fs-body); font-weight: 700; }
/* 카드는 축 A(16px), 행 텍스트는 축 B(32px) — 본문과 같은 두 축(§9-10) */
.sheet-body { padding: 0 var(--sp-4) var(--sp-5); overflow-y: auto; -webkit-overflow-scrolling: touch; }

.s-group { margin-top: var(--sp-4); }
.s-head {
  font-size: var(--fs-cap); font-weight: 600; color: var(--label-2);
  text-transform: uppercase; letter-spacing: 0.03em; padding: 0 var(--inset) 7px;
}
.s-foot { font-size: var(--fs-cap); color: var(--label-2); padding: 7px var(--inset) 0; line-height: 1.4; }
.s-card { background: var(--card); border-radius: var(--r-md); overflow: hidden; }
.s-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 46px; padding: 11px var(--inset);
  background: var(--card); border: none; text-align: left; color: inherit;
  font-size: var(--fs-body);
}
.s-row + .s-row { border-top: 0.5px solid var(--sep); }
.s-row .s-label { font-size: var(--fs-body); color: var(--label); }
.s-row .s-right {
  margin-left: auto; display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-2); flex-wrap: wrap; color: var(--label-2);
}
/* 선택 표시는 체크마크 — 행 배경을 칠하지 않는다(§6.9) */
.s-row .check { color: var(--tint); font-weight: 700; }
.s-row .chevron { color: var(--faint); flex: none; }
/* "지정 안 함"·"제한 없음" — 읽는 텍스트이므로 --faint 금지(§9-4) */
.s-row .s-none { color: var(--label-2); font-size: var(--fs-aux); }
button.s-row:active { background: var(--track); }
.s-row:disabled { opacity: 0.45; cursor: not-allowed; }
.s-row:disabled .s-label { color: var(--label-2); }
/* 선택 행에만 체크 — 자리는 유지해 행 폭이 흔들리지 않게 한다 */
.algo-row[aria-pressed="false"] .check { visibility: hidden; }

/* 고급 필터 — 시트 안에서 펼쳐지는 하위 행 묶음(g1 원본도 aria-expanded 방식) */
.s-adv-body { display: none; }
.s-adv-body.open { display: block; }
.s-adv-body > .s-row {
  border-top: 0.5px solid var(--sep);
  padding-left: calc(var(--inset) + var(--sp-3));
}
.s-row[aria-expanded="true"] > .s-right > .chevron { transform: rotate(90deg); }

.s-reset {
  width: 100%; min-height: 46px; margin-top: var(--sp-4);
  background: var(--card); border: none; border-radius: var(--r-md);
  color: var(--tint); font-size: var(--fs-aux); font-weight: 600;
}
.s-reset:active { background: var(--track); }
/* 프리셋 — 축 A(카드와 같은 좌우 경계, §9-11) */
.preset-btn {
  width: 100%; min-height: 44px; margin-top: var(--sp-2);
  background: var(--tint-soft); border: none; border-radius: var(--r-sm);
  color: var(--tint); font-size: var(--fs-aux); font-weight: 700;
}

/* 값 선택 알약(네이티브 select) — .pill-val 어휘(§6.11) */
.pill-select { position: relative; display: inline-flex; align-items: center; }
.pill-select .caret {
  position: absolute; right: 9px; color: var(--faint);
  font-size: var(--fs-cap); pointer-events: none;
}
.s-select {
  appearance: none; -webkit-appearance: none;
  min-height: 36px; padding: 6px 26px 6px 10px;
  border: none; border-radius: var(--r-xs);
  background: var(--track); color: var(--label);
  font: inherit; font-size: var(--fs-mini); font-weight: 600;
}

/* 포함·제외 칩 (§6.11) — 제외는 색이 아니라 "제외 번호" 행 위치가 1차 단서 */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px 4px 11px; border-radius: var(--r-pill);
  background: var(--tint-soft); color: var(--tint);
  font-size: var(--fs-mini); font-weight: 700;
}
.chip.excl { background: var(--danger-bg); color: var(--danger); }
.chip .x {
  position: relative; width: 16px; height: 16px; padding: 0;
  border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.1); color: inherit;
  font-size: var(--fs-cap); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
/* 시각 16px → 히트 영역 24px (§4.4 · WCAG 2.5.8) */
.chip .x::after { content: ""; position: absolute; inset: -4px; }

/* 시트 내 입력 — 36px(문서화된 예외, §4.4) */
.chip-add {
  width: 64px; min-height: 36px; padding: 6px 8px;
  border: 1px solid var(--sep); border-radius: var(--r-xs);
  background: var(--bg); color: var(--label);
  font: inherit; font-size: var(--fs-mini);
}
.range { display: flex; align-items: center; gap: var(--sp-2); }
.range .num {
  width: 58px; min-height: 36px; padding: 6px 8px; text-align: center;
  border: 1px solid var(--sep); border-radius: var(--r-xs);
  background: var(--bg); color: var(--label);
  font: inherit; font-size: var(--fs-mini);
}
.range .dash { color: var(--faint); }

/* ── 토스트 (§7) — 행동 이름을 그대로 되돌려준다 ──────────────── */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--sticky-ad-h) + 16px);
  transform: translateX(-50%) translateY(20px);
  background: var(--label); color: var(--card);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: var(--fs-aux); box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 60;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* ── 채점 재방문 배너 (§8-36 재방문 루프 · 라운드 E-P2) ────────────
   재방문(새 세션) + 채점된 기록이 있을 때 상단에 뜬다. 늦게 떠도 레이아웃을 밀지 않도록
   position: fixed 로 흐름 밖에 둔다 — fixed·transform·opacity 는 레이아웃을 만들지 않는다(CLS 0).
   헤더(sticky, --header-h) 바로 아래에 고정하고 --wrap 폭으로 가운데 정렬. 배지와 같은 tint-soft 어휘
   (인터랙티브한 것만 파랑 — §0). */
.revisit-banner {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 38;
  display: flex; justify-content: center;
  padding: var(--sp-2) var(--inset) 0;
  pointer-events: none;                 /* 래퍼는 정렬만 담당 — 클릭은 안쪽(.rb-inner)이 받는다 */
  transform: translateY(-8px); opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}
.revisit-banner.show { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .revisit-banner { transition: none; } }
.revisit-banner .rb-inner {
  pointer-events: auto;
  width: 100%; max-width: var(--wrap);
  display: flex; align-items: center; gap: var(--sp-1);
  min-height: 46px; padding: 4px 4px 4px 14px;
  background: var(--tint-soft); color: var(--tint);
  border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
}
.revisit-banner .rb-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-2);
  background: none; border: none; color: inherit; text-align: left;
  padding: 8px 0; font-size: var(--fs-aux); font-weight: 600;
}
/* 문구가 좁은 폭에서 넘치면 말줄임 — 배너가 2줄로 부풀어 헤더 밑을 과도하게 덮지 않게 */
.revisit-banner .rb-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.revisit-banner .rb-main .chevron { flex: none; color: var(--tint); font-size: var(--fs-aux); }
.revisit-banner .rb-main:active { opacity: 0.7; }
.revisit-banner .rb-close {
  flex: none; width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--tint); font-size: 1rem;
  border-radius: var(--r-xs);
}
.revisit-banner .rb-close:active { background: var(--track); }

/* ── 내 번호 기록 (§6.12) — 볼로 그리지 않는다(밀도 우선) ─────── */
.records__empty { padding: 11px var(--inset); color: var(--label-2); font-size: var(--fs-aux); margin: 0; }
.records-clear { margin-top: var(--sp-2); }
.record { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 11px var(--inset); }
.record + .record { border-top: 0.5px solid var(--sep); }
.record .meta {
  font-size: var(--fs-cap); color: var(--label-2);
  min-width: 44px; font-variant-numeric: tabular-nums;
}
.record .lines { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.record .rec-line {
  font-family: var(--font-mono); font-size: var(--fs-mini);
  font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--label);
}
.record .rec-line .b { font-weight: 700; }
/* 자동 채점 등수 (§8-36) — 당첨만 틴트, 낙첨은 --label-2(§6.12 어휘 · 색 단독 정보 전달 아님) */
.record .rec-rank {
  margin-left: 8px;
  font-family: var(--font-sans); font-size: var(--fs-cap); font-weight: 600;
  color: var(--label-2);
}
.record .rec-rank--win { color: var(--tint); font-weight: 700; }
/* 대조 회차 · 추첨 대기 안내 */
.record .rec-draw { font-size: var(--fs-cap); color: var(--label-2); }

/* 기록 메모 (§8-39) — §6.12 어휘 안에서: 번호 라인 아래 --fs-cap/--label-2 */
.record .rec-memo {
  align-self: flex-start; max-width: 100%;
  padding: 2px 0; border: none; background: none; text-align: left;
  font-size: var(--fs-cap); color: var(--label-2); line-height: 1.4;
  overflow-wrap: anywhere;
}
.record .rec-memo:active { color: var(--label); }
/* 인라인 편집 입력 — 시트 입력과 같은 metrics(36px · --r-xs · §4.4 문서화된 예외) */
.record .rec-memo-input { width: 100%; max-width: 220px; align-self: flex-start; }
.record .rec-memo-btn { font-size: 0.95rem; }
.record .rec-actions { display: flex; gap: 2px; flex: none; }
.record .rec-actions button {
  width: 44px; height: 44px; padding: 0;          /* 구 34px에서 상향(§9-6) */
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--tint); font-size: 1rem;
}
.record .rec-actions button:active { background: var(--track); border-radius: var(--r-xs); }

/* ── 통계·분석 미리보기 (결과 하단 — 결정 10) ─────────────────── */
.stats-preview[hidden] { display: none; }
.stats-preview__grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .stats-preview__grid { grid-template-columns: 1fr 1fr; } }
.stat-card {
  display: block; background: var(--card);
  border-radius: var(--r-md); padding: var(--sp-4) var(--inset);
}
.stat-card:hover { text-decoration: none; }
.stat-card:active { background: var(--track); }
.stat-card h3 { font-size: var(--fs-body); margin: 0 0 4px; color: var(--label); }
.stat-card p { font-size: var(--fs-aux); color: var(--label-2); margin: 0 0 8px; }
.stat-card .more { font-size: var(--fs-aux); color: var(--tint); font-weight: 600; }