/* 두레박 — 디자인 토큰 · 리셋 · 레이아웃 골격 · 공용 컴포넌트
   시안 G(Apple HIG) + g1 블루 확정안 — docs/디자인_가이드.md §1~§7 (§8-29·30·31)
   외부 폰트/CDN 금지: 시스템 폰트 스택만 사용. */

:root {
  /* ── 색 (§1.1) — 틴트 1색 원칙: 인터랙티브한 것만 파랑 ──
     틴트·그라운드는 물 축(198~200°)으로 이동 — docs/브랜드_가이드.md §2.2 */
  --tint: #08658d;              /* 인터랙티브 텍스트·아이콘·포커스 링 */
  --tint-fill: #08658d;         /* 채움 컨트롤 배경 — 주 CTA (다크에서 값이 갈림) */
  --tint-press: #054f6e;        /* 채움 CTA 눌림 — 라벨 대비를 지키는 방향으로 한 단계(다크는 반대로 밝아짐) */
  --on-tint: #ffffff;           /* --tint-fill 위 라벨 (다크에서 다크 잉크로 역전) */
  --tint-soft: #e0f1fa;         /* 배지·포함 칩·프리셋 면 */

  --bg: #eff3f5;                /* 페이지 그라운드 — 구 값과 L* 95.6 동일(그라운드 관여 대비 불변) */
  --card: #ffffff;              /* 카드·시트 행·세그먼트 선택 알약 */
  --sep: rgba(60, 60, 67, 0.16);/* 0.5px 구분선·입력 테두리 */
  --label: #1c1c1e;             /* 본문·행 제목·large title */
  --label-2: #5f6066;           /* 보조 텍스트 — 읽어야 하는 소형 텍스트는 전부 여기 */
  --faint: #767780;             /* 장식 전용(chevron·구분자) — 본문 4.5:1 미달 */
  --danger: #c9372c;
  --danger-bg: #fdeceb;
  --nav-bg: rgba(246, 250, 251, 0.82);
  --track: rgba(120, 120, 128, 0.12);  /* 세그먼트 트랙·pill-val·눌림 상태 */

  /* 로또볼 (§5) — 밴드 5색은 js/core/games.js가 주입 */
  --ball-ink: #15181f;          /* 볼 숫자 다크 잉크(파워볼 레드볼만 예외 — §5.2) */
  --ball-edge: #8a8a8f;         /* 파워볼 화이트볼 테두리 */
  --ball-powerball: #d32f2f;

  /* 광고 placeholder 사선 줄무늬 (§6.14) */
  --ad-a: #e4eaed;
  --ad-b: #dce4e8;

  /* ── 타이포 (§2) — 시스템 폰트 스택(한/영) ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 6단 스케일 — 새 텍스트 크기는 여기서만 고른다(임의값 금지) */
  --fs-cap: 0.78rem;      /* 12.5 — 그룹 헤더·푸터·고지·배지·광고 라벨 */
  --fs-mini: 0.85rem;     /* 13.6 — 칩·기록 번호 라인·세그먼트 라벨 */
  --fs-aux: 0.92rem;      /* 14.7 — 보조 본문·부제·결과 액션·행 보조값 */
  --fs-body: 1.0625rem;   /* 17   — 본문 기준·행 제목·주 CTA·시트 제목 */
  --fs-num: 1.35rem;      /* 21.6 — 카운트다운 시계 */
  --fs-title: 1.85rem;    /* 29.6 — 페이지 large title(h1) */

  /* ── 간격 (§3.1) ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px;

  /* ── 반경 (§3.2) — 중첩 반경 규칙: 안쪽 = 바깥 − 패딩 ── */
  --r-xs: 8px;    /* 입력·시계 칩·pill-val·세그먼트 트랙·포커스 링 */
  --r-sm: 12px;   /* 주 CTA·결과 액션·필터 요약 칩·프리셋 */
  --r-md: 14px;   /* 카드·광고 슬롯·시트 초기화 */
  --r-lg: 18px;   /* 모달 시트 상단 모서리 */
  --r-pill: 999px;/* 배지·포함/제외 칩 */

  /* ── 볼·레이아웃 (§3.3) ── */
  --ball: 34px;         /* 생성 결과 — 게임 수 1·3·5 전부 동일 */
  --ball-sm: 30px;      /* 지난추첨 바·통계·회차 조회 */
  --wrap: 600px;        /* 콘텐츠 최대폭 — 헤더·본문·푸터 단일 축(§4.1) */
  --inset: 16px;        /* 카드 내부 정렬 축 B — --sp-4와 값이 같아도 의미가 다르다 */
  --header-h: 50px;
  --sticky-ad-h: 60px;

  /* ── 그림자 (§3.4) — 이 두 종 외 금지 ── */
  --shadow-pop: 0 1px 3px rgba(0, 0, 0, 0.14);   /* 트랙 위로 떠오른 것 */
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.06);  /* 그라운드 위 놓인 것 */
}

/* 레이아웃 브레이크포인트는 0개 — 아래는 전부 볼 크기 조절용이다(§4.2 · §8-31 ①).
   단을 나누거나 요소를 재배치하지 않는다. 볼 크기는 뷰포트로만 갈리고 게임 수로는 절대 갈리지 않는다(§8-26 ③). */

/* 좁은 폭(320~359px) — 볼 행 감김 방지(라운드 C 검수 P1 · 전 게임 실측 재계산 2026-07-21).
   구 계산은 6/45 생성기(볼 6개)만 봤다. 실제 최악은 .ball-plus("+" 14.03px)가 끼는 두 행이고,
   둘 다 320px 에서 감겨 구분자만 앞줄 끝에 남고 보너스 볼이 다음 줄로 떨어졌다. 320px 기준:

     생성기 결과 행(--ball)      가용 = 320 − 32(.wrap) − 32(.result-row) − 26(라벨) − 12(갭) = 218px
                                최악 = 파워볼 5 + "+" + 1 → 6×28 + 6×4 + 14.03 = 206.03 ✓ 여유 11.97
     당첨번호 표시 행(--ball-sm) 가용 = 256px (라벨 열이 없다 — 지난 추첨·통계)
                                최악 = 6/45 본 6 + "+" + 보너스 → 7×28 + 7×4 + 14.03 = 238.03 ✓ 여유 17.97

   여유를 10px 넘게 잡는 이유: "+" 14.03px 는 시스템 폰트의 글리프 폭이라 기기마다 달라진다.
   여기서 --ball-sm 을 --ball 과 같은 값으로 내리는 것도 그래서다(30px 이면 여유가 3.97px 로 줄어든다).

   갭은 generator.css 에 둔다 — 여기 두면 뒤에 로드되는 generator.css `.balls-row{gap:6px}` 에
   순서로 밀려 죽는다(구 `gap:5px` 가 실제로 그렇게 죽어 있었다). */
@media (max-width: 359px) {
  :root { --ball: 28px; --ball-sm: 28px; }
}
@media (min-width: 520px) {
  :root { --ball: 36px; --ball-sm: 32px; }
}

/* 다크 (§1.2) — 볼 색은 바뀌지 않는다(밴드·--ball-ink·레드볼 전부 라이트와 동일) */
@media (prefers-color-scheme: dark) {
  :root {
    /* 밴드 11–20(#69c8f2)과 색상이 2° 차라 분리는 명도가 전담한다 —
       --tint 의 L* 는 64.5 이하를 유지한다(브랜드 가이드 §2.4 불변식). */
    --tint: #38a2d4;
    --tint-fill: #38a2d4;
    --tint-press: #52b4e2; /* 다크 라벨이 다크 잉크라 눌림은 반대로 밝아진다 */
    --on-tint: #15181f;    /* 밝은 파랑 위 흰 라벨은 대비 미달 → 다크 잉크로 역전 */
    --tint-soft: #0b2b3b;

    --bg: #000000;
    --card: #1c1c1e;
    --sep: rgba(84, 84, 88, 0.65);
    --label: #ffffff;
    --label-2: #a1a1a8;
    --faint: #8a8a92;
    --danger: #ff6b5e;
    --danger-bg: #3a1d1a;
    --nav-bg: rgba(28, 28, 30, 0.82);
    --track: rgba(120, 120, 128, 0.24);

    --ad-a: #232326;
    --ad-b: #1e1e21;
  }
}

/* ── 리셋 ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* display를 지정한 컴포넌트에서도 hidden 속성이 이기게 한다 */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* 하단 고정 광고에 콘텐츠가 닿지 않게 여유(§3.3) */
  padding-bottom: calc(var(--sticky-ad-h) + var(--sp-5) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--sp-3); font-weight: 700; }
h1 { font-size: var(--fs-title); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-body); }
h3 { font-size: var(--fs-body); }
p { margin: 0 0 var(--sp-3); }
button { font: inherit; cursor: pointer; }
a { color: var(--tint); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* 포커스 — 키보드 포커스는 어디서나 보인다(§7) */
:focus-visible {
  outline: 3px solid var(--tint);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ── 레이아웃 컨테이너 — 축 A = 16px, 축 B = 32px (§4.1) ──────── */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--inset); }
.page { min-height: 60vh; padding: var(--sp-3) 0 var(--sp-6); }

/* ── Large title (§6.2) — 좌우 패딩 0, 축 A ────────────────────── */
.large-title { padding: var(--sp-4) 0 var(--sp-1); }
.large-title h1 { margin: 0; }
.large-title .subtitle { color: var(--label-2); font-size: var(--fs-aux); margin: 2px 0 0; }

/* 뒤로 가기는 제목과 같은 줄에 두지 않는다(§6.2 검수 P2).
   구 .page-title 은 뒤로 버튼(44) + 갭(12) 만큼 h1 을 72px로 밀어 제3의 축을 만들었고,
   바로 아래 자기 부제(16px)와도 어긋났다. 별행 텍스트 링크로 두고 둘 다 축 A에 세운다. */
.back-link {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; margin-bottom: 2px;
  color: var(--tint); font-size: var(--fs-aux); font-weight: 600;
}
.back-link:hover { text-decoration: none; }

/* ── 그룹 카드 · inset grouped list (§6.3) ─────────────────────── */
.group { margin-top: var(--sp-5); }
.g-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;   /* 축 B */
  margin: 0;
}
.g-head.row-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.card { background: var(--card); border-radius: var(--r-md); overflow: hidden; }
/* 행이 아닌 콘텐츠(막대·히스토그램 등)를 담는 카드 — 내부 축 B 유지 */
.card--pad { padding: var(--sp-4) var(--inset); display: flex; flex-direction: column; gap: var(--sp-3); }
.g-foot {
  font-size: var(--fs-cap); color: var(--label-2);
  padding: 7px var(--inset) 0; line-height: 1.4; margin: 0;
}
/* 그룹 푸터 안 출처 한 문장 — 같은 어휘, 앞 문장과 한 칸 띄어 잇는다(라운드 E P2-b) */
.g-foot .data-source { display: block; }

.row { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: 10px var(--inset); }
.row + .row { border-top: 0.5px solid var(--sep); }
/* CJK는 임의 위치에서 줄바꿈된다 — "1232회"가 "1232"/"회"로 쪼개지는 것을 막는다(§4.2 · 검수 P2) */
.row .r-title { font-size: var(--fs-body); color: var(--label); white-space: nowrap; }
.row .r-value { margin-left: auto; color: var(--label-2); font-size: var(--fs-aux); display: flex; align-items: center; gap: 6px; }
.row .chevron { color: var(--faint); font-size: var(--fs-aux); flex: none; }
/* 우측 끝으로 밀 것이 없는 행(보조값·볼 묶음이 없는 경우) */
.chevron--end { margin-left: auto; }
.row.tap { width: 100%; background: none; border: none; text-align: left; color: inherit; }
.row.tap:active { background: var(--track); }
.row.tap:hover { text-decoration: none; }

/* ── 세그먼트 (§6.7) — 게임 수·언어 토글·게임 탭·검증 기간 공용 ── */
.segmented { display: inline-flex; background: var(--track); border-radius: var(--r-xs); padding: 2px; }
.segmented button {
  border: none; background: transparent; border-radius: 6px;  /* 8 − 2 (중첩 반경) */
  min-height: 40px; padding: 7px 14px;
  font-size: var(--fs-mini); font-weight: 600; color: var(--label-2);
}
/* 선택은 배경만으로 표시하지 않는다 — 색·가중치·그림자를 함께(§6.7 · WCAG 1.4.1) */
.segmented button[aria-pressed="true"],
.segmented button[aria-selected="true"] {
  background: var(--card); box-shadow: var(--shadow-pop);
  color: var(--label); font-weight: 700;
}
.segmented button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── 헤더 (§6.1) ───────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 0.5px solid var(--sep);
  display: flex; align-items: center;
}
.site-header .wrap { display: flex; align-items: center; gap: var(--sp-3); }
/* 브랜드 마크 — 마크만(워드마크 없음). 틴트를 쓴다(§0 "누를 수 있으면 파랑") */
.brand {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; color: var(--tint);
  margin-left: -9px; padding: 0 9px;  /* 26 + 9×2 = 44 — 탭 영역만 넓히고 마크는 축 A(16px)에 남긴다 */
}
.brand:hover { text-decoration: none; }
.brand svg { display: block; flex: none; }
.header-spacer { flex: 1; }

/* 게임 스위처 — 틴트 텍스트 + caret, 배경·테두리 없음(파랑이면 누를 수 있다) */
.game-switch { position: relative; min-width: 0; }
.game-switch__btn {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 44px;
  background: none; border: none; padding: 0;
  font-size: var(--fs-aux); font-weight: 600; color: var(--tint);
  white-space: nowrap;
}
.game-switch__btn > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.game-switch__btn .caret { font-size: 0.7em; flex: none; }
.game-switch__menu {
  position: absolute; top: calc(100% + 2px); left: 0;
  min-width: 220px; max-width: calc(100vw - 24px);
  background: var(--card); border: 0.5px solid var(--sep);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 6px;
  display: none; z-index: 50;
}
.game-switch__menu.open { display: block; }
.game-switch__menu a {
  display: block; min-height: 44px; padding: 10px 12px; border-radius: var(--r-xs);
  color: var(--tint); font-size: var(--fs-aux); font-weight: 600;
}
.game-switch__menu a small { display: block; font-weight: 400; color: var(--label-2); }
.game-switch__menu a:hover { text-decoration: none; }
.game-switch__menu a:active { background: var(--track); }
.game-switch__menu a[aria-current="page"] { background: var(--tint-soft); }

/* 언어 토글 — 세그먼트의 한 사례. 게임 수 세그먼트와 같은 metrics(§6.1) */
.lang-toggle {
  display: inline-flex; flex: none;
  background: var(--track); border-radius: var(--r-xs); padding: 2px;
}
.lang-toggle a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 7px 12px; border-radius: 6px;
  font-size: var(--fs-mini); font-weight: 600; color: var(--label-2);
}
.lang-toggle a:hover { text-decoration: none; }
.lang-toggle a[aria-current="true"] {
  background: var(--card); box-shadow: var(--shadow-pop);
  color: var(--label); font-weight: 700;
}

/* ── 버튼 (§6.10) — 화면당 채움 틴트는 주 CTA 하나뿐 ──────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: var(--fs-aux); font-weight: 600;
  min-height: 46px; padding: 8px 14px;
  border: none; border-radius: var(--r-sm);
  background: var(--card); color: var(--tint);
}
.btn:hover { text-decoration: none; }
.btn:active { background: var(--track); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary {
  min-height: 50px;
  background: var(--tint-fill); color: var(--on-tint);
  font-size: var(--fs-body); font-weight: 700;
}
/* 채움 CTA 의 눌림은 --track 이 아니라 틴트 한 단계다 — 회색으로 덮으면 라벨 대비가 1.28:1 로 떨어진다.
   .btn:active 와 명시도가 같으므로(둘 다 0,2,0) 반드시 그 뒤에 선언한다. */
.btn--primary:active { background: var(--tint-press); }
.btn--primary:disabled { opacity: 0.45; }
.btn--block { width: 100%; }

/* ── 광고 슬롯 placeholder (§6.14 · CLS 방지: 크기 사전 예약) ──── */
.ad-slot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, var(--ad-a), var(--ad-a) 10px, var(--ad-b) 10px, var(--ad-b) 20px);
  color: var(--label-2); font-size: var(--fs-cap); letter-spacing: 0.04em;  /* 줄무늬 위 --faint 는 3.38:1 */
  border: none; border-radius: var(--r-md);
  margin: var(--sp-5) auto 0; overflow: hidden;
}
.ad-slot::after { content: attr(data-label); }
.ad-slot--b { width: 100%; max-width: 336px; min-height: 280px; }
.ad-slot--c { width: 100%; max-width: 336px; min-height: 250px; }
/* 슬롯 A: 하단 sticky 앵커 */
.ad-slot--a {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  margin: 0; border-radius: 0; border-top: 0.5px solid var(--sep);
  min-height: var(--sticky-ad-h); height: var(--sticky-ad-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ad-slot--a .ad-close {
  position: absolute; top: 4px; right: 6px; width: 28px; height: 28px; padding: 0;
  border: none; background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 50%;
  font-size: 0.8rem; line-height: 28px; text-align: center;
}
.ad-slot[hidden] { display: none; }

/* ── 푸터 ──────────────────────────────────────────────────────── */
.site-footer {
  border-top: 0.5px solid var(--sep);
  background: var(--card);
  padding: var(--sp-5) 0 var(--sp-6);
  margin-top: var(--sp-6);
  font-size: var(--fs-aux); color: var(--label-2);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.site-footer nav a { color: var(--tint); font-weight: 600; }
.site-footer .disclaimer-mini { font-size: var(--fs-cap); color: var(--label-2); }

/* 참여·후원 도선 — 푸터 슬림 블록 (참여_후원_도선_설계 §1.2·§1.3)
   저강조: 무배경 + --tint 텍스트 링크만(푸터 nav 와 동일 위계). 채움 버튼·아이콘·배지 없음. */
.footer-engage { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 0.5px solid var(--sep); }
.footer-engage p { margin: 0; }
.footer-engage p + p { margin-top: var(--sp-1); }
.footer-engage a { color: var(--tint); font-weight: 600; }

/* ── 칩 (§6.11) ────────────────────────────────────────────────── */
/* 배지 = 읽기 전용 표시(누를 수 없으므로 chevron 없음) */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-cap); font-weight: 600;
  background: var(--tint-soft); color: var(--tint);
}
/* 값 알약 */
.pill-val {
  background: var(--track); border-radius: var(--r-xs); padding: 3px 10px;
  font-size: var(--fs-mini); font-weight: 600; color: var(--label);
}

/* ── 유틸 ──────────────────────────────────────────────────────── */
.muted { color: var(--label-2); }
.small { font-size: var(--fs-mini); }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}