:root {
  /* 다크 팔레트 — 짙은 남색(hue 250) 3단 레이어. 이전에는 bg/surface/raised가 모두 거의
     순검정(rgb 1,1,1 / 4,8,11 / 9,17,20)이라 카드 경계가 안 보이고 화면이 평평했다.
     레이어 대비 1.28·1.27로 벌려 구조가 눈에 보이게 하고, 보조 텍스트·보더 대비를 끌어올렸다.
     (실측 대비: 본문 17.5:1 / muted 10.2:1 / border 4.65:1 vs bg — 전부 WCAG AA 이상) */
  --color-bg: oklch(0.17 0.02 250);
  --color-surface: oklch(0.27 0.026 250);
  --color-surface-raised: oklch(0.34 0.028 250);
  --color-text: oklch(0.97 0.004 250);
  --color-text-muted: oklch(0.8 0.02 250);      /* 본문 보조(설명·근거·표 헤더) — 8.0:1 on surface */
  --color-text-subtle: oklch(0.71 0.018 250);   /* 진짜 비활성/부가 정보 전용 — 5.8:1 on surface */
  --color-border: oklch(0.59 0.032 250);        /* 컨트롤·구조 경계 — 3.6:1 on surface */
  --color-border-subtle: oklch(0.4 0.028 250);  /* 목록 구분선 등 장식 경계 */
  --color-primary: oklch(0.7 0.15 230);
  --color-primary-dark: oklch(0.58 0.17 230);
  --color-accent: oklch(0.86 0.13 80);
  --color-accent-ink: oklch(0.18 0.03 80);
  --color-accent-warn: oklch(0.82 0.14 60);
  --color-warn-bg: oklch(0.3 0.06 60);
  --color-danger: oklch(0.68 0.19 25);
  --color-danger-bg: oklch(0.28 0.07 25);
  --color-success: oklch(0.72 0.17 145);
  --color-success-bg: oklch(0.28 0.06 145);
  --font-display: "Bricolage Grotesque", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", monospace;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 0 oklch(1 0 0 / 0.03) inset, 0 12px 32px oklch(0 0 0 / 0.4);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 15% 0%, oklch(0.62 0.16 230 / 0.10), transparent 45%),
    radial-gradient(circle at 100% 20%, oklch(0.86 0.13 80 / 0.06), transparent 40%),
    var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

/* 본문 링크: 방문 여부와 무관하게 브랜드 블루로 통일.
   (색 미지정 시 방문한 링크가 브라우저 기본 보라색 #551A8B으로 떠 다크 배경에서 시인성 저하)
   nav·footer·legal 등은 자체 색을 지정해 이 규칙의 영향을 받지 않는다. */
a { color: var(--color-primary); }
a:visited { color: var(--color-primary); }
a:hover { color: var(--color-text); }

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 로딩 스피너 */
.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 0;
}
.spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}
@keyframes spinner-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Header */
.site-header {
  background: oklch(0.17 0.02 250 / 0.85);   /* --color-bg와 동일 색상(투명도만 다름) */
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;   /* 좁은 화면에서 "로또 AI"가 "로/또 AI"로 쪼개지던 문제 방지 */
}

.counter-badge {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.counter-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-accent);
  font-size: 1rem;
}

/* Hero */
.hero {
  text-align: center;
  padding: 56px 0 24px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
  text-wrap: balance;
}

.hero-sub {
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto 16px;
  text-wrap: pretty;
}

.disclaimer {
  display: inline-block;
  background: var(--color-warn-bg);
  color: var(--color-accent-warn);
  font-size: 0.85rem;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  max-width: 560px;
  border: 1px solid oklch(0.78 0.14 60 / 0.25);
}

/* Folklore/entertainment notice banner (dream page top) */
.folklore-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--color-warn-bg);
  border: 1px solid oklch(0.78 0.14 60 / 0.35);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 20px 0 8px;
}
.folklore-banner .fb-badge {
  flex: none;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-accent-ink);
  background: var(--color-accent-warn);
  padding: 4px 10px;
  border-radius: 999px;
}
.folklore-banner p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-accent-warn);
}
.folklore-banner a {
  color: var(--color-accent-warn);
  text-decoration: underline;
  font-weight: 600;
}

/* Generator card */
.generator-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
  margin: 24px 0 40px;
}

.generator-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.generator-controls label {
  font-weight: 600;
  font-size: 0.9rem;
}

select#game-count {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: 0.95rem;
  font-family: var(--font-mono);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.btn-primary {
  background: var(--color-primary);
  color: oklch(0.99 0 0);
  border: none;
  padding: 12px 28px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s var(--ease-out-expo), transform 0.15s var(--ease-out-expo);
}

.btn-primary:hover { background: var(--color-primary-dark); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { background: oklch(0.62 0.16 230 / 0.35); cursor: not-allowed; }

.btn-secondary {
  background: var(--color-surface-raised);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s var(--ease-out-expo);
}

.btn-secondary:hover { background: var(--color-border); }

/* Lotto drawing machine animation */
/* 추첨기: 전체화면 투명 오버레이 + 원형 회전(공이 통 안을 도는) */
.lotto-machine {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: none;
  align-items: center;
  justify-content: center;
  background: oklch(0 0 0 / 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lotto-machine.active { display: flex; }

.machine-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.machine-drum {
  position: relative;
  width: min(380px, 86vw);
  height: min(380px, 86vw);
  border-radius: 50%;
  /* 구체 유리 느낌: 가장자리는 어둡게(림), 좌상단 하이라이트 */
  background:
    radial-gradient(circle at 38% 30%, oklch(1 0 0 / 0.12), transparent 32%),
    radial-gradient(circle at 50% 50%, oklch(0.32 0.03 230 / 0.5) 55%, oklch(0.08 0.02 230 / 0.7) 100%);
  border: 3px solid var(--color-primary);
  box-shadow: 0 0 70px oklch(0.62 0.16 230 / 0.5), inset 0 0 60px oklch(0 0 0 / 0.6);
  overflow: hidden;
  /* 3D 씬: 공의 translateZ(깊이)에 따라 앞쪽은 크게, 뒤쪽은 작게 보이게 한다.
     perspective를 줄이고 depth를 키울수록 입체감이 강해진다. */
  perspective: 520px;
  perspective-origin: 50% 42%;
}
/* 유리 반사광 */
.machine-drum::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(1 0 0 / 0.14), transparent 42%);
  pointer-events: none;
}

/* 공들을 담는 컨테이너 (개별 공이 통 안에서 3D로 제각각 튄다) */
.machine-balls {
  position: absolute;
  inset: 0;
  transform-origin: center;
  transform-style: preserve-3d;
  /* 공이 닿을 수 있는 최대 반경(드럼 반지름 - 공 크기 여유). 키프레임이 이 값을 곱해
     원형 벽까지 닿도록 한다. 드럼 크기에 따라 자동 스케일. */
  --reach: calc(min(380px, 86vw) / 2 - 26px);
  /* 앞뒤 깊이 범위(translateZ) — perspective와 함께 입체감을 만든다 (값↑ = 입체감↑) */
  --depth: clamp(140px, 36vw, 230px);
}

.machine-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  opacity: 0.7;
  filter: drop-shadow(0 0 10px oklch(0.62 0.16 230 / 0.6));
  animation: hub-pulse 1.6s ease-in-out infinite;
  z-index: 0;
}
@keyframes hub-pulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.12); } }

/* 공: 중심 기준으로 배치하고, 각자 다른 카오스 경로로 벽에 부딪히듯 튄다 */
.ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  box-shadow: inset -5px -5px 8px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.45);
  z-index: 1;
  will-change: transform;
  /* linear = 등속 이동 + 지점마다 급격한 방향전환 → 벽에 튀는 느낌 */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 색 = 실제 로또 번호 구간색 + 광택 / 경로(A~D)·속도·딜레이를 달리해 제각각 튀게 함 */
.ball-1  { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.82 0.15 88);  animation-name: bounceA; animation-duration: 1.05s; animation-delay: -0.10s; }
.ball-2  { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.66 0.15 235); animation-name: bounceB; animation-duration: 1.22s; animation-delay: -0.50s; }
.ball-3  { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.64 0.2 22);   animation-name: bounceC; animation-duration: 0.96s; animation-delay: -0.20s; }
.ball-4  { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.5 0.012 230); animation-name: bounceD; animation-duration: 1.34s; animation-delay: -0.80s; }
.ball-5  { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.74 0.18 142); animation-name: bounceA; animation-duration: 1.15s; animation-delay: -0.70s; animation-direction: reverse; }
.ball-6  { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.82 0.15 88);  animation-name: bounceB; animation-duration: 0.90s; animation-delay: -0.30s; }
.ball-7  { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.66 0.15 235); animation-name: bounceC; animation-duration: 1.28s; animation-delay: -0.95s; animation-direction: reverse; }
.ball-8  { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.64 0.2 22);   animation-name: bounceD; animation-duration: 1.00s; animation-delay: -0.15s; }
.ball-9  { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.74 0.18 142); animation-name: bounceA; animation-duration: 1.40s; animation-delay: -1.10s; }
.ball-10 { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.66 0.15 235); animation-name: bounceC; animation-duration: 1.10s; animation-delay: -0.60s; }
.ball-11 { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.64 0.2 22);   animation-name: bounceB; animation-duration: 1.18s; animation-delay: -0.45s; animation-direction: reverse; }
.ball-12 { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.82 0.15 88);  animation-name: bounceD; animation-duration: 0.94s; animation-delay: -0.85s; }
.ball-13 { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.5 0.012 230); animation-name: bounceA; animation-duration: 1.26s; animation-delay: -0.35s; animation-direction: reverse; }
.ball-14 { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.74 0.18 142); animation-name: bounceC; animation-duration: 1.02s; animation-delay: -1.0s; }
.ball-15 { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.66 0.15 235); animation-name: bounceD; animation-duration: 1.32s; animation-delay: -0.25s; animation-direction: reverse; }
.ball-16 { background: radial-gradient(circle at 35% 28%, oklch(1 0 0 / 0.55), transparent 46%), oklch(0.64 0.2 22);   animation-name: bounceB; animation-duration: 0.98s; animation-delay: -0.75s; }

/* 각 지점 = (--reach 비율 x,y) + (--depth 비율 z). z가 앞(+)/뒤(-)로 오가며
   perspective에 의해 공이 커졌다 작아져 3D처럼 보인다. linear = 벽에 튀는 느낌. */
@keyframes bounceA {
  0%   { transform: translate3d(0,0,0); }
  14%  { transform: translate3d(calc(var(--reach) *  0.92), calc(var(--reach) * -0.15), calc(var(--depth) *  0.85)); }
  28%  { transform: translate3d(calc(var(--reach) * -0.45), calc(var(--reach) * -0.85), calc(var(--depth) * -0.60)); }
  42%  { transform: translate3d(calc(var(--reach) *  0.70), calc(var(--reach) *  0.65), calc(var(--depth) *  0.55)); }
  56%  { transform: translate3d(calc(var(--reach) * -0.90), calc(var(--reach) *  0.25), calc(var(--depth) * -0.90)); }
  70%  { transform: translate3d(calc(var(--reach) *  0.20), calc(var(--reach) *  0.93), calc(var(--depth) *  0.35)); }
  85%  { transform: translate3d(calc(var(--reach) * -0.70), calc(var(--reach) * -0.62), calc(var(--depth) * -0.50)); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes bounceB {
  0%   { transform: translate3d(0,0,0); }
  14%  { transform: translate3d(calc(var(--reach) * -0.88), calc(var(--reach) * -0.35), calc(var(--depth) * -0.70)); }
  28%  { transform: translate3d(calc(var(--reach) *  0.55), calc(var(--reach) * -0.80), calc(var(--depth) *  0.60)); }
  42%  { transform: translate3d(calc(var(--reach) * -0.65), calc(var(--reach) *  0.70), calc(var(--depth) * -0.50)); }
  56%  { transform: translate3d(calc(var(--reach) *  0.92), calc(var(--reach) *  0.10), calc(var(--depth) *  0.85)); }
  70%  { transform: translate3d(calc(var(--reach) * -0.25), calc(var(--reach) *  0.92), calc(var(--depth) * -0.35)); }
  85%  { transform: translate3d(calc(var(--reach) *  0.78), calc(var(--reach) * -0.55), calc(var(--depth) *  0.65)); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes bounceC {
  0%   { transform: translate3d(0,0,0); }
  14%  { transform: translate3d(calc(var(--reach) *  0.50), calc(var(--reach) *  0.84), calc(var(--depth) *  0.60)); }
  28%  { transform: translate3d(calc(var(--reach) * -0.85), calc(var(--reach) *  0.40), calc(var(--depth) * -0.85)); }
  42%  { transform: translate3d(calc(var(--reach) *  0.40), calc(var(--reach) * -0.88), calc(var(--depth) *  0.45)); }
  56%  { transform: translate3d(calc(var(--reach) * -0.60), calc(var(--reach) * -0.72), calc(var(--depth) * -0.55)); }
  70%  { transform: translate3d(calc(var(--reach) *  0.93), calc(var(--reach) * -0.05), calc(var(--depth) *  0.90)); }
  85%  { transform: translate3d(calc(var(--reach) * -0.30), calc(var(--reach) *  0.90), calc(var(--depth) * -0.40)); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes bounceD {
  0%   { transform: translate3d(0,0,0); }
  14%  { transform: translate3d(calc(var(--reach) * -0.60), calc(var(--reach) *  0.78), calc(var(--depth) * -0.55)); }
  28%  { transform: translate3d(calc(var(--reach) *  0.82), calc(var(--reach) *  0.35), calc(var(--depth) *  0.70)); }
  42%  { transform: translate3d(calc(var(--reach) * -0.88), calc(var(--reach) * -0.30), calc(var(--depth) * -0.85)); }
  56%  { transform: translate3d(calc(var(--reach) *  0.30), calc(var(--reach) * -0.90), calc(var(--depth) *  0.45)); }
  70%  { transform: translate3d(calc(var(--reach) * -0.50), calc(var(--reach) *  0.80), calc(var(--depth) * -0.60)); }
  85%  { transform: translate3d(calc(var(--reach) *  0.85), calc(var(--reach) * -0.45), calc(var(--depth) *  0.80)); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes bounceE {
  0%   { transform: translate3d(0,0,0); }
  16%  { transform: translate3d(calc(var(--reach) *  0.35), calc(var(--reach) * -0.90), calc(var(--depth) *  0.75)); }
  32%  { transform: translate3d(calc(var(--reach) * -0.92), calc(var(--reach) * -0.12), calc(var(--depth) * -0.55)); }
  48%  { transform: translate3d(calc(var(--reach) *  0.62), calc(var(--reach) *  0.72), calc(var(--depth) *  0.90)); }
  64%  { transform: translate3d(calc(var(--reach) * -0.40), calc(var(--reach) * -0.82), calc(var(--depth) * -0.60)); }
  80%  { transform: translate3d(calc(var(--reach) *  0.90), calc(var(--reach) *  0.22), calc(var(--depth) *  0.45)); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes bounceF {
  0%   { transform: translate3d(0,0,0); }
  16%  { transform: translate3d(calc(var(--reach) * -0.78), calc(var(--reach) *  0.58), calc(var(--depth) * -0.60)); }
  32%  { transform: translate3d(calc(var(--reach) *  0.88), calc(var(--reach) * -0.32), calc(var(--depth) *  0.85)); }
  48%  { transform: translate3d(calc(var(--reach) * -0.20), calc(var(--reach) *  0.94), calc(var(--depth) * -0.45)); }
  64%  { transform: translate3d(calc(var(--reach) *  0.55), calc(var(--reach) * -0.78), calc(var(--depth) *  0.70)); }
  80%  { transform: translate3d(calc(var(--reach) * -0.85), calc(var(--reach) * -0.30), calc(var(--depth) * -0.85)); }
  100% { transform: translate3d(0,0,0); }
}

/* 추출 피날레: 통 안의 공은 사라지고, 6개 결과 공이 튜브로 하나씩 떨어져 번호로 */
.machine-tube,
.machine-tray { display: none; }
.lotto-machine.finale .machine-balls { animation: ball-funnel 0.32s ease-in forwards; }
.lotto-machine.finale .machine-hub { opacity: 0; transition: opacity 0.25s; }
.lotto-machine.finale .machine-tube { display: block; }
.lotto-machine.finale .machine-tray { display: flex; }

.machine-tube {
  width: 24px;
  height: 38px;
  margin-top: -10px;
  background: linear-gradient(oklch(0.62 0.16 230 / 0.35), var(--color-surface));
  border: 2px solid var(--color-primary);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 0 16px oklch(0.62 0.16 230 / 0.4), inset 0 -4px 6px oklch(0 0 0 / 0.4);
}
.machine-tray {
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 999px;
  background: oklch(0.27 0.026 250 / 0.85);  /* --color-surface와 동일 색상(투명도만 다름) */
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.45);
}
.tray-ball {
  width: 42px;
  height: 42px;
  font-size: 1.05rem;
  box-shadow: inset -3px -4px 8px oklch(0 0 0 / 0.3), inset 2px 2px 4px oklch(1 0 0 / 0.18), 0 5px 12px oklch(0 0 0 / 0.4);
  opacity: 0;
  animation: tray-drop 0.5s ease-out forwards;
}
/* 튜브에서 톡 떨어져 자리에 안착 */
@keyframes tray-drop {
  0%   { opacity: 0; transform: translateY(-90px) scale(0.4); }
  55%  { opacity: 1; transform: translateY(8px) scale(1.1); }
  75%  { transform: translateY(-3px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 통 안 공이 사라지는 효과(피날레 시작) */
@keyframes ball-funnel {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.04); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ball { animation-duration: 6s !important; }
  .machine-hub { animation: none; }
  .lotto-machine.finale .machine-balls { animation-duration: 0.2s; }
}

.machine-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: min(440px, 90vw);
  text-align: center;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 600;
  font-family: var(--font-mono);
  text-shadow: 0 1px 8px oklch(0 0 0 / 0.6);
}
.machine-status .engine-icon {
  width: 1.7em;
  height: 1.7em;
  transform-origin: center;
  filter: drop-shadow(0 0 6px oklch(0.62 0.16 230 / 0.5));
  animation: logo-action 1.1s ease-in-out infinite;
}
/* 엔진 로고에 통통 튀고 살짝 흔들리는 액션을 줘 시인성을 높인다 */
@keyframes logo-action {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  25%  { transform: translateY(-8px) rotate(-12deg) scale(1.1); }
  50%  { transform: translateY(0) rotate(0deg) scale(1); }
  75%  { transform: translateY(-5px) rotate(12deg) scale(1.06); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .machine-status .engine-icon { animation: none; }
}

.sound-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s var(--ease-out-expo);
}
.sound-toggle:hover { border-color: var(--color-primary); }

/* Results */
.results { margin-top: 28px; }

.results-toolbar {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.share-wrap {
  position: relative;
  display: inline-block;
}

.share-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transform-origin: top right;
  animation: share-menu-in 0.18s var(--ease-out-expo) both;
}

.share-menu[hidden] { display: none; }

@keyframes share-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .share-menu { animation: none; }
}

.share-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s var(--ease-out-expo);
}

.share-menu-item:hover,
.share-menu-item:focus-visible {
  background: var(--color-border);
  outline: none;
}

.share-menu-item--kakao:hover,
.share-menu-item--kakao:focus-visible {
  background: oklch(0.9 0.17 98 / 0.18);
}

.game-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-row {
  position: relative;   /* .game-top-badge(승격 배지) 기준 */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  animation: rise-in 0.4s var(--ease-out-expo) backwards;
}

.game-row:nth-child(1) { animation-delay: 0.02s; }
.game-row:nth-child(2) { animation-delay: 0.06s; }
.game-row:nth-child(3) { animation-delay: 0.10s; }
.game-row:nth-child(4) { animation-delay: 0.14s; }
.game-row:nth-child(5) { animation-delay: 0.18s; }
.game-row:nth-child(6) { animation-delay: 0.22s; }
.game-row:nth-child(7) { animation-delay: 0.26s; }
.game-row:nth-child(8) { animation-delay: 0.30s; }
.game-row:nth-child(9) { animation-delay: 0.34s; }
.game-row:nth-child(10) { animation-delay: 0.38s; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .game-row { animation: none; }
}

.game-row .game-index {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-text-muted);
  width: 28px;
}

.lotto-ball {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: oklch(0.99 0 0);
  /* 광택 3D 구체: 좌상단 내부 하이라이트 + 우하단 내부 음영 + 소프트 접지(바닥) 그림자.
     구간색(배경)은 그대로 두고 명암만 얹어 사실감을 높인다. */
  box-shadow:
    inset -3px -4px 8px oklch(0 0 0 / 0.40),
    inset 3px 3px 6px oklch(1 0 0 / 0.30),
    0 3px 6px oklch(0 0 0 / 0.34),
    0 1px 2px oklch(0 0 0 / 0.22);
  text-shadow: 0 1px 1px oklch(0 0 0 / 0.22);
}
/* 위→아래 레이어: ① 선명한 작은 반사광 ② 큰 소프트 광택 ③ 우하단 앰비언트 오클루전.
   (숫자 아래 레이어로 렌더되어 가독성 유지, 중앙 구간색 보존) */
.lotto-ball::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 29% 22%, oklch(1 0 0 / 0.92) 0, transparent 9%),
    radial-gradient(ellipse 60% 46% at 35% 28%, oklch(1 0 0 / 0.52), oklch(1 0 0 / 0.10) 44%, transparent 62%),
    radial-gradient(circle at 67% 73%, transparent 48%, oklch(0 0 0 / 0.36) 100%);
}

/* 공식 로또 색상 코딩 (구간별) — 1~10 금색, 11~20 파랑, 21~30 빨강,
   31~40 회색, 41~45 초록. 다크 배경에서 또렷하게 보이도록 명도만 조정. */
.lotto-ball[data-range="1"] { background: oklch(0.82 0.15 88); color: oklch(0.2 0.04 88); }
.lotto-ball[data-range="2"] { background: oklch(0.66 0.15 235); }
.lotto-ball[data-range="3"] { background: oklch(0.64 0.2 22); }
.lotto-ball[data-range="4"] { background: oklch(0.5 0.012 230); }
.lotto-ball[data-range="5"] { background: oklch(0.74 0.18 142); color: oklch(0.2 0.05 142); }

.game-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* AI 종합점수 — 의미 있는 데이터 신호이므로 accent로 강조 */
.game-meta .meta-score {
  color: var(--color-accent);
  font-weight: 600;
}

/* 번호 복사: 링크처럼 보이던 작은 글자를 실제 버튼으로. 터치 타깃 최소 44px 확보 */
.game-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  transition: background 0.15s var(--ease-out-expo), border-color 0.15s var(--ease-out-expo);
}
.game-copy-btn:hover { background: oklch(0.7 0.15 230 / 0.12); border-color: var(--color-primary); }
/* 넓은 화면에선 위쪽 메타와 같은 오른쪽 끝에 맞춰 정렬(자기 줄에 홀로 남아 어색해 보이던 여백 정리) */
@media (min-width: 601px) { .game-copy-btn { margin-left: auto; } }
.game-copy-btn.is-copied { color: var(--color-success); border-color: var(--color-success); }

/* 균형 점수 막대: 이번 추출 안에서의 상대 위치만 표현(절대 기준 아님) */
.score-bar {
  flex-basis: 100%;
  height: 4px;
  margin: 2px 0 0;
  border-radius: 999px;
  background: var(--color-border-subtle);
  overflow: hidden;
}
.score-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* 최고 점수 게임 승격 — 똑같은 카드 5개 중 눈이 멈출 지점을 만든다 */
.game-row.is-top {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), 0 8px 24px oklch(0.86 0.13 80 / 0.12);
}
.game-top-badge {
  /* 흐름에서 빼서 배치 — flex 자식으로 두면 공 6개가 한 줄에 들어갈 폭을 잠식한다 */
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ── 결과 보기 전환(목록 / 마킹용지) ── */
.view-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background: var(--color-surface);
}
.view-toggle[hidden] { display: none; }
.view-toggle-btn {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease-out-expo), color 0.15s var(--ease-out-expo);
}
.view-toggle-btn:hover { color: var(--color-text); }
.view-toggle-btn.is-active { background: var(--color-primary); color: oklch(0.16 0.03 250); }

/* ── 마킹용지 ──
   실제 로또 6/45 용지 은유. 종이는 실물이므로 다크 테마 안에서도 밝은 종이색을 유지한다
   (임의의 밝은 블록이 아니라 "종이"라는 물성을 그대로 가져온 것). */
.slip-sheet {
  background: oklch(0.97 0.008 95);
  border: 1px solid oklch(0.86 0.02 95);
  border-radius: var(--radius-md);
  padding: 14px 14px 16px;
  box-shadow: 0 10px 28px oklch(0 0 0 / 0.35);
}
.slip-sheet[hidden] { display: none; }
/* 용지 몸통: 좌측 세로 로고띠 + 본문 + 우측 타이밍 마크 */
.slip-paper { display: flex; align-items: stretch; gap: 10px; }
.slip-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 4px 2px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);          /* 아래에서 위로 읽히는 실물 용지 로고 방향 */
  border-right: 1px dashed oklch(0.8 0.09 27 / 0.6);
}
.slip-side-brand {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: oklch(0.55 0.21 27);
}
.slip-side-brand b { color: oklch(0.35 0.06 250); }
.slip-side-sub { font-size: 0.6rem; font-weight: 600; color: oklch(0.62 0.05 27); }
.slip-body { flex: 1 1 auto; min-width: 0; }

/* 우측 타이밍 마크(광학 판독용 검은 눈금) */
.slip-edge {
  flex: 0 0 9px;
  background: repeating-linear-gradient(
    to bottom,
    oklch(0.2 0.01 250) 0 10px,
    transparent 10px 20px
  );
}

/* 하단 절취선 + 바코드 */
.slip-tear {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed oklch(0.72 0.06 27);
  height: 22px;
  background-image: repeating-linear-gradient(
    to right,
    oklch(0.2 0.01 250) 0 2px,
    transparent 2px 4px,
    oklch(0.2 0.01 250) 4px 5px,
    transparent 5px 9px
  );
  background-position: 0 10px;
  background-repeat: repeat-x;
  background-size: auto 12px;
}

.slip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid oklch(0.55 0.2 25);
}
.slip-brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: oklch(0.45 0.2 25);
  letter-spacing: -0.01em;
}
.slip-brand b { color: oklch(0.3 0.05 250); }
.slip-note { font-size: 0.72rem; color: oklch(0.5 0.02 95); }

/* 게임 블록(A·B·C…)을 실제 용지처럼 나란히. 폭이 좁으면 자동 줄바꿈 */
.slip-games {
  display: grid;
  /* 실제 용지처럼 A~E 5칸이 한 줄에. 칸 폭을 더 좁혀 태블릿·좁은 데스크톱에서도 5개가 들어가고,
     모바일에서는 2열로 접히도록 최소 폭을 낮췄다. */
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px;
}
.slip-game {
  border: 1.5px solid oklch(0.55 0.21 27);
  border-radius: 3px;
  overflow: hidden;
  background: oklch(0.99 0.004 95);
  /* 한 줄에 하나만 들어가는 좁은 화면에서 블록이 폭을 다 먹어 칸이 커지는 것을 막는다 */
  max-width: 224px;
  justify-self: center;
  width: 100%;
}
.slip-game-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 7px;
  background: oklch(0.55 0.21 27);
  color: #fff;
}
.slip-game-label { font-family: var(--font-display); font-size: 0.8rem; font-weight: 800; }
.slip-game-price { font-size: 0.62rem; font-weight: 700; letter-spacing: -0.02em; }

/* 1~45 사각 격자 — 실물 용지의 인쇄 격자를 그대로. 칸 사이 선은 겹치게 해 인쇄선처럼 보이게 한다 */
.slip-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  padding: 4px;
}
.slip-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: clamp(0.52rem, 1.7vw, 0.62rem);
  font-weight: 600;
  color: oklch(0.55 0.19 27);            /* 마킹 전 번호는 용지 인쇄색(빨강) */
  border: 0.5px solid oklch(0.8 0.09 27 / 0.5);
}
.slip-cell.is-marked {                /* 펜으로 칠한 자국 — 실물처럼 칸을 꽉 채운다 */
  background: oklch(0.3 0.05 250);
  border-color: oklch(0.3 0.05 250);
  color: #fff;
  font-weight: 800;
}
/* 저장한 번호를 용지로 볼 때: 추첨이 끝났으면 적중한 칸을 금색으로 구분(당첨 비교 유지) */
.slip-cell.is-marked.is-hit {
  background: oklch(0.8 0.16 85);
  border-color: oklch(0.6 0.16 85);
  color: oklch(0.25 0.06 85);
}
.slip-cell.is-marked.is-bonus {       /* 보너스 번호와 일치 */
  background: oklch(0.58 0.19 27);
  border-color: oklch(0.58 0.19 27);
  color: #fff;
}

/* 읽을 수 없는 저장 항목 안내(다른 항목은 계속 표시된다) */
.my-game-broken {
  margin: 6px 0;
  font-size: 0.84rem;
  color: var(--color-text-muted);
}

/* 용지 이미지 저장/공유 */
.slip-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.slip-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid oklch(0.72 0.06 27);
  border-radius: var(--radius-sm);
  background: transparent;
  color: oklch(0.42 0.14 27);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s var(--ease-out-expo);
}
.slip-action-btn:hover { background: oklch(0.55 0.21 27 / 0.1); }

/* 게임 블록 하단 등수 배지(저장한 번호를 용지로 볼 때) */
.slip-game-foot {
  display: flex;
  justify-content: center;
  padding: 0 4px 5px;
}
.slip-game-foot .tier-badge {
  width: 100%;
  text-align: center;
  font-size: 0.6rem;
  padding: 3px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 저장 카드 안의 용지는 카드 여백에 맞춰 조금 더 촘촘하게 */
.my-game-entry.is-slip .slip-sheet { margin-top: 10px; padding: 12px 12px 14px; }

/* 종합점수 각주 */
.score-note {
  margin: 12px 2px 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--color-text-subtle);
  word-break: keep-all;
}
.score-note b { color: var(--color-text-muted); font-weight: 600; }

.stats-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
}

.stat-block h3 {
  font-size: 0.85rem;
  margin: 0 0 8px;
  color: var(--color-text-muted);
}

.number-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.number-chips span {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.stat-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.error-message {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-top: 16px;
  border: 1px solid oklch(0.62 0.19 25 / 0.25);
}

/* My saved games */
.my-games-section { margin-top: 16px; }

/* Saved-games controls: count + clear-all */
.my-games-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 12px;
}
.my-games-controls-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.my-games-count { font-size: 0.8rem; color: var(--color-text-muted); }
.my-games-autoclean-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.my-games-autoclean-label input { cursor: pointer; }
.my-games-clear-btn {
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-danger);
  background: transparent;
  border: 1px solid var(--color-border);
}
.my-games-clear-btn:hover { background: var(--color-danger-bg); border-color: var(--color-danger); }

/* Per-entry delete (🗑) sits next to the result label in the card header */
.my-game-entry-right { display: inline-flex; align-items: center; gap: 8px; }
.my-game-delete-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  opacity: 0.6;
}
.my-game-delete-btn:hover { opacity: 1; background: var(--color-danger-bg); }

/* "더보기 / 접기" toggle + collapsed older entries */
.my-games-more-btn {
  display: block;
  width: 100%;
  margin: 4px 0 14px;
  padding: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.my-games-more-btn:hover { color: var(--color-text); }
.my-games-more-btn:disabled { opacity: 0.6; cursor: default; }

.my-game-entry {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  margin-bottom: 14px;
}

.my-game-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.my-game-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
}

.lotto-ball.matched {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: 0 0 12px oklch(0.86 0.13 80 / 0.55);
}

.tier-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
}

.tier-badge.tier-win {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.tier-badge.tier-pending {
  background: var(--color-warn-bg);
  color: var(--color-accent-warn);
}

/* Info sections */
.info-section {
  margin: 40px 0;
}

.info-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* Winning history */
.winning-history-section {
  display: block;
}

/* 섹션 헤더: 제목 + 회차 선택 드롭다운 */
.wh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.wh-header h2 { margin: 0; }

.round-select-wrap { position: relative; }

.round-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 9px 38px 9px 18px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out-expo);
}

.round-select:hover { border-color: var(--color-primary); }
.round-select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.round-select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* ── 추첨 결과 카드 (이전/다음 + 공) ── */
.draw-result { transition: opacity 0.18s var(--ease-out-expo); }
.draw-result.is-loading { opacity: 0.4; }

.draw-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background:
    radial-gradient(circle at 50% -20%, oklch(0.62 0.16 230 / 0.14), transparent 60%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 30px 22px 26px;
  margin-bottom: 18px;
}

.draw-nav {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 모바일에서 탭이 300ms 지연/더블탭줌 경로로 새어 무반응이 되는 것을 방지 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s var(--ease-out-expo), background 0.18s var(--ease-out-expo), transform 0.18s var(--ease-out-expo);
}

.draw-nav:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: oklch(0.62 0.16 230 / 0.12);
  transform: scale(1.06);
}

/* 터치 기기는 :hover가 없으므로 누름 피드백을 :active로 따로 제공 */
.draw-nav:active:not(:disabled) {
  border-color: var(--color-primary);
  background: oklch(0.62 0.16 230 / 0.2);
  transform: scale(0.92);
}

.draw-nav:disabled { opacity: 0.3; cursor: default; }
.draw-nav:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.draw-card-center {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.draw-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.draw-title span { color: var(--color-primary); }

.draw-date {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.draw-balls {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* 공 묶음 + 그 아래 라벨을 한 열로 묶어, 라벨이 항상 공 바로 밑에 정렬되게 한다 */
.draw-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.draw-balls-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.draw-ball {
  width: 46px;
  height: 46px;
  font-size: 1.1rem;
  box-shadow: inset -3px -4px 8px oklch(0 0 0 / 0.3), inset 2px 2px 4px oklch(1 0 0 / 0.18), 0 4px 10px oklch(0 0 0 / 0.36);
}

.draw-plus {
  /* 공(46px)과 같은 높이로 두어 라벨이 아닌 공 중앙에 + 가 오도록 함 */
  height: 46px;
  display: inline-flex;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0 2px;
}

.draw-cap {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.draw-cap.cap-bonus { color: var(--color-accent); }

/* ── 등위별 당첨 상세 표 ── */
.prize-table-wrap {
  overflow-x: auto;
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  /* 가로 스크롤 그림자: 아직 볼 내용이 남은 쪽에만 그늘이 생겨 "옆으로 밀 수 있다"를 알린다.
     (모바일에서 당첨금이 잘려 보이는데 스크롤 가능하다는 단서가 없던 문제) */
  background:
    linear-gradient(to right, var(--color-surface) 40%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--color-surface) 40%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, oklch(0 0 0 / 0.4), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, oklch(0 0 0 / 0.4), transparent) right center / 14px 100% no-repeat scroll;
}

.draw-prize-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 520px;
}

.draw-prize-table thead th {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.draw-prize-table tbody td {
  padding: 16px 12px;
  text-align: center;
  border-bottom: 1px solid var(--color-border-subtle);
}

.draw-prize-table tbody tr:last-child td { border-bottom: none; }

.draw-prize-table .col-rank {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
}

.draw-prize-table .col-num { font-family: var(--font-mono); }

.draw-prize-table .col-cond {
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* 당첨(>0게임)이 있는 등수 행 강조 */
.draw-prize-table tr.is-win .col-rank,
.draw-prize-table tr.is-win .col-num {
  color: var(--color-accent);
}

.prize-note { margin-top: 14px; }

/* ── 전체 누적 당첨 집계 카드 ── */
.result-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px;
  overflow: hidden;
  margin-top: 18px;
}

.result-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), transparent 70%);
}

.result-card h3 {
  font-family: var(--font-display);
  margin: 0 0 16px;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 누적 집계 표는 추첨 결과 표 스타일을 공유 */
.last-draw-prize-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 14px;
}

.last-draw-prize-table thead th {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: right;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--color-border);
}

.last-draw-prize-table thead th:first-child { text-align: left; }

.last-draw-prize-table tbody td {
  padding: 9px 10px;
  text-align: right;
  border-bottom: 1px solid oklch(0.24 0.014 230 / 0.5);
  font-family: var(--font-mono);
}

.last-draw-prize-table tbody td:first-child {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text-muted);
}

.last-draw-prize-table tbody tr:last-child td { border-bottom: none; }

.last-draw-prize-table tr.is-win td { color: var(--color-accent); }

/* Ad slot */
.info-grid article {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-card);
}

.info-grid h3 { margin: 0 0 8px; font-size: 1rem; font-family: var(--font-display); }
.info-grid p { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; }

.ai-credit {
  text-align: center;
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.claude-credit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px 3px 8px;
  margin: 0 2px;
  border: 1px solid oklch(0.67 0.13 40 / 0.45);
  border-radius: 999px;
  background: oklch(0.67 0.13 40 / 0.12);
  vertical-align: middle;
}

.claude-logo {
  display: block;
  flex-shrink: 0;
}

.ai-credit strong {
  color: oklch(0.78 0.12 40);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}

.faq summary { font-weight: 600; cursor: pointer; }
.faq p { color: var(--color-text-muted); margin: 10px 0 0; font-size: 0.9rem; }

/* Comments */
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 18px;
  margin-bottom: 16px;
}

.comment-form input,
.comment-form textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--color-surface-raised);
  color: var(--color-text);
  resize: vertical;
}

.comment-form textarea { min-height: 70px; }
.comment-form .btn-primary { align-self: flex-end; padding: 10px 24px; }

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
}

.comment-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.comment-item-nickname { font-weight: 700; color: var(--color-text); }

.comment-item-content {
  margin: 0 0 10px;
  font-size: 0.92rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-like-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  cursor: pointer;
}

.comment-like-btn.liked {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: oklch(0.68 0.17 145 / 0.3);
}

.comment-secret-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.comment-secret-label input { width: 16px; height: 16px; }
.comment-item-content.comment-secret { color: var(--color-text-muted); font-style: italic; }
.comment-admin-reply {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}
.comment-admin-reply-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.comment-admin-reply-label { font-weight: 800; color: var(--color-primary); }
.comment-admin-reply-content { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: var(--color-text); }

/* Footer */
.site-footer {
  text-align: center;
  padding: 24px 0 40px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.site-footer a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* Legal pages */
.legal-page { padding: 40px 0; max-width: 680px; }
.legal-page h1 { font-family: var(--font-display); margin-bottom: 4px; }
.legal-page h2 { font-family: var(--font-display); font-size: 1.05rem; text-align: left; margin-bottom: 8px; }
.legal-page .info-section { margin: 24px 0; }
.legal-page ul { padding-left: 20px; color: var(--color-text-muted); font-size: 0.9rem; }
.legal-page p { color: var(--color-text-muted); font-size: 0.9rem; }
.legal-page a { color: var(--color-primary); }

/* ── 콘텐츠 문서 페이지 (분석 방법 / 성과) ── */
.doc-page { padding-bottom: 32px; }
.doc-lead { color: var(--color-text); margin: 0 0 12px; }
.doc-page .info-section h2 { text-align: left; }

/* 번호 추천 3단계 파이프라인 */
.method-pipeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.method-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  color: oklch(0.98 0 0);
  background: linear-gradient(140deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: 0 4px 12px oklch(0.62 0.16 230 / 0.35);
}
.step-num.is-brand {
  background: none;
  box-shadow: none;
}
.step-num.is-brand .engine-icon { width: 30px; height: 30px; }

.step-body h3 {
  margin: 2px 0 6px;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.step-body p { margin: 0; color: var(--color-text-muted); }
.step-body strong { color: var(--color-text); }

/* 제약/한계 목록 */
.constraint-list {
  margin: 0 0 12px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.constraint-list li {
  position: relative;
  padding-left: 26px;
  color: var(--color-text-muted);
}
.constraint-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 700;
}
.constraint-list strong { color: var(--color-text); }

.doc-honest { border-top: 1px solid var(--color-border); padding-top: 8px; }

.doc-cta p { margin: 6px 0; }
.doc-link {
  display: inline-block;
  margin: 6px 12px 0 0;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.18s var(--ease-out-expo), transform 0.18s var(--ease-out-expo);
}
.doc-link:hover { border-color: var(--color-primary); transform: translateY(-1px); }

/* 성과 핵심 지표 카드 */
.perf-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.perf-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px 14px;
}
.perf-metric--accent {
  border-color: oklch(0.62 0.16 230 / 0.5);
  background:
    radial-gradient(circle at 50% 0%, oklch(0.62 0.16 230 / 0.16), transparent 70%),
    var(--color-surface);
}
.perf-metric-value {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 600;
  color: var(--color-text);
}
.perf-metric--accent .perf-metric-value { color: var(--color-primary); }
.perf-metric-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.perf-table td:first-child { font-weight: 600; }
.perf-loading { text-align: center; color: var(--color-text-muted); }

/* 추출 엔진 선택 (세그먼트) */
.engine-select { margin-bottom: 18px; }
.engine-select-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.engine-options {
  display: flex;
  gap: 8px;
}
.engine-option {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  text-align: center;
  /* 비선택 엔진은 살짝 어둡게 — 선택된 엔진의 시인성을 높인다 */
  opacity: 0.45;
  filter: saturate(0.7);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s var(--ease-out-expo), background 0.18s var(--ease-out-expo),
    transform 0.18s var(--ease-out-expo), opacity 0.18s var(--ease-out-expo), filter 0.18s var(--ease-out-expo);
}
.engine-option:hover { border-color: var(--engine-color, var(--color-primary)); opacity: 0.8; }
.engine-option.is-active {
  opacity: 1;
  filter: none;
  transform: translateY(-2px);
  border-color: var(--engine-color, var(--color-primary));
  background: var(--color-surface-raised);
  box-shadow: 0 6px 18px oklch(0 0 0 / 0.28);
}
/* 엔진 고유색 (아이콘 SVG와 동일 브랜드 컬러) */
.engine-option[data-engine="claude"]    { --engine-color: #d97757; }
.engine-option[data-engine="gpt"]       { --engine-color: #10a37f; }
.engine-option[data-engine="gemini"]    { --engine-color: #4081f4; }
.engine-option[data-engine="consensus"] { --engine-color: #9b7be0; }
/* 선택 시 엔진 고유색 글로우/그라데이션 */
.engine-option[data-engine="claude"].is-active {
  background: radial-gradient(circle at 50% 0%, rgba(217, 119, 87, 0.22), transparent 75%), var(--color-surface-raised);
  box-shadow: 0 6px 18px rgba(217, 119, 87, 0.34);
}
.engine-option[data-engine="gpt"].is-active {
  background: radial-gradient(circle at 50% 0%, rgba(16, 163, 127, 0.22), transparent 75%), var(--color-surface-raised);
  box-shadow: 0 6px 18px rgba(16, 163, 127, 0.34);
}
.engine-option[data-engine="gemini"].is-active {
  background: radial-gradient(circle at 50% 0%, rgba(64, 129, 244, 0.22), transparent 75%), var(--color-surface-raised);
  box-shadow: 0 6px 18px rgba(64, 129, 244, 0.34);
}
.engine-option[data-engine="consensus"].is-active {
  background: radial-gradient(circle at 50% 0%, rgba(155, 123, 224, 0.22), transparent 75%), var(--color-surface-raised);
  box-shadow: 0 6px 18px rgba(155, 123, 224, 0.34);
}
.engine-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 0.95rem;
}
.engine-desc { font-size: 0.72rem; color: var(--color-text-muted); }
.engine-icon { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.engine-tag { display: inline-flex; align-items: center; gap: 4px; vertical-align: -0.15em; }
.engine-tag .engine-icon { width: 1em; height: 1em; }
.engine-note {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  min-height: 1.2em;
}
.result-engine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid oklch(0.62 0.16 230 / 0.4);
  background: oklch(0.62 0.16 230 / 0.1);
  font-size: 0.95rem;
  color: var(--color-text);
}
.result-engine strong { color: var(--color-primary); }
.result-engine .engine-icon { width: 1.4em; height: 1.4em; }

/* 엔진 대결 챔피언 배지 (홈 누적 집계) */
.engine-champion {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid oklch(0.86 0.13 80 / 0.4);
  background: oklch(0.86 0.13 80 / 0.1);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}
.engine-champion .engine-tag { gap: 4px; }

/* 홈 → 콘텐츠 페이지 진입 링크 */
.aggregate-more { margin: 14px 0 0; text-align: right; }
.section-more { margin: 16px 0 0; text-align: center; }
.aggregate-more a,
.section-more a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.aggregate-more a:hover,
.section-more a:hover { text-decoration: underline; }

/* Ad gate modal (구조만 - ENABLE_AD_GATE=false 기본) */
/* 공지 배너 — 헤더 아래 한 줄. 화면을 덮지 않아 첫 방문자가 바로 서비스를 볼 수 있다.
   (예전 전체화면 모달은 서비스를 보기도 전에 운영 공지를 강제로 읽게 만들었다) */
.notice-banner {
  background: oklch(0.7 0.15 230 / 0.1);
  border-bottom: 1px solid var(--color-border-subtle);
  animation: notice-slide 0.24s var(--ease-out-expo);
}
.notice-banner[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .notice-banner { animation: none; } }
@keyframes notice-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.notice-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.notice-banner-icon { flex: 0 0 auto; line-height: 1.5; }
.notice-banner-body { flex: 1 1 auto; min-width: 0; }
.notice-banner-head {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
  word-break: keep-all;
}
.notice-banner-title { color: var(--color-primary); font-weight: 700; margin-right: 6px; }
.notice-banner-title[hidden] { display: none; }
.notice-banner-lead { color: var(--color-text-muted); }
.notice-banner-lead[hidden] { display: none; }
.notice-banner-full {
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.notice-banner-full[hidden] { display: none; }
.notice-banner-more,
.notice-banner-close {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.notice-banner-more[hidden] { display: none; }
.notice-banner-more:hover,
.notice-banner-close:hover { color: var(--color-text); border-color: var(--color-primary); }
.notice-banner-close { padding: 0 9px; }
@media (max-width: 600px) {
  /* 좁은 화면에선 로고띠·타이밍마크를 줄여 마킹 격자 폭을 확보한다(용지 느낌은 유지) */
  .slip-paper { gap: 6px; }
  .slip-side { padding: 2px 0; gap: 6px; }
  .slip-side-brand { font-size: 0.76rem; }
  .slip-side-sub { display: none; }
  .slip-edge { flex-basis: 6px; }
  .slip-sheet { padding: 10px 10px 12px; }

  .notice-banner-head, .notice-banner-full { font-size: 0.82rem; }
  .notice-banner-inner { gap: 8px; padding-top: 6px; padding-bottom: 6px; }
  /* 배너 높이는 이 보조 버튼들의 min-height가 결정한다. 30px는 WCAG 최소 타깃(24px)을
     넘기면서 배너를 한 줄로 유지한다(주요 동작인 추출 버튼은 44px 유지). */
  .notice-banner-more, .notice-banner-close { min-height: 30px; }
  /* 모바일에선 제목만 한 줄로 두고 본문은 "자세히"로. 배너가 2줄이 되면 추출 버튼이
     첫 화면 밖으로 밀려나므로(도구 우선 배치가 깨짐) 높이를 최소로 유지한다.
     제목이 없는 공지는 첫 줄이 유일한 내용이므로 그대로 노출한다. */
  .notice-banner-title:not([hidden]) + .notice-banner-lead { display: none; }
}

.ad-gate-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

/* [hidden] 속성은 브라우저 기본 스타일시트의 display:none을 적용하는데, 위
   .ad-gate-overlay { display: flex }가 author stylesheet라 그걸 덮어써버려서
   항상 보이는 버그가 있었음. 명시적으로 다시 숨겨준다. */
.ad-gate-overlay[hidden] {
  display: none;
}

.ad-gate-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px oklch(0 0 0 / 0.5);
  padding: 24px;
  width: min(360px, 90vw);
  text-align: center;
}

.ad-gate-ad-slot {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.ad-gate-close-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  cursor: not-allowed;
  font-family: var(--font-mono);
}

.ad-gate-close-btn:not(:disabled) {
  background: var(--color-primary);
  color: oklch(0.99 0 0);
  cursor: pointer;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  z-index: 100;
}

/* Mobile */
@media (max-width: 600px) {
  .hero h1 { font-size: 1.4rem; }
  .generator-card { padding: 20px; }
  .game-meta { width: 100%; margin-left: 0; }
  .counter-badge { display: none; }

  /* 엔진 선택: 390px에서 4열이면 열폭이 ~85px라 한글이 "균형·정통 통/계"처럼
     단어 중간에서 끊겼다. 2×2로 바꿔 폭을 두 배로 주고, 한글은 어절 단위로만 줄바꿈. */
  .engine-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .engine-option { padding: 12px 8px; }
  .engine-name { font-size: 0.85rem; }
  .engine-desc { font-size: 0.7rem; }
  .engine-name, .engine-desc, .engine-select-label, .engine-note { word-break: keep-all; }

  /* 추출 결과: 공 6개가 한 줄에 6px 모자라 5+1로 쪼개지던 문제.
     공 크기를 뷰포트에 맞춰 줄이고 간격·여백을 좁혀 320px에서도 한 줄을 보장한다. */
  .game-row { gap: 6px; padding: 12px 10px; }
  .game-row .lotto-ball,
  .my-game-row .lotto-ball {
    width: clamp(26px, 7.4vw, 32px);
    height: clamp(26px, 7.4vw, 32px);
    font-size: clamp(0.7rem, 3vw, 0.85rem);
  }
  .my-game-row { gap: 6px; }
}

/* 초소형 화면(iPhone SE 등 320px): 위 값으로도 4px 모자라 공이 쪼개져 간격·여백을 한 단계 더 줄인다. */
@media (max-width: 360px) {
  .game-row { gap: 4px; padding: 12px 8px; }
  .my-game-row { gap: 4px; }
  .game-row .game-index { font-size: 0.75rem; }

  /* 회차 이동 화살표를 화면 가장자리(모바일 뒤로가기 제스처 영역)에서 떼어내
     공 아래 가운데에 ‹ › 페이저로 모아 배치한다. 좌측 화살표가 좌측 가장자리
     스와이프 제스처에 먹혀 동작하지 않던 문제를 구조적으로 해결한다. */
  .draw-card {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .draw-card-center {
    order: 0;
    flex-basis: 100%;
  }
  .draw-nav-prev { order: 1; }
  .draw-nav-next { order: 2; }
}

/* ============================================================
   콘텐츠 페이지 확장 (통계·아카이브·가이드·소개·문의) + 상단 내비게이션
   ============================================================ */

/* 상단 내비게이션 */
.site-nav {
  display: flex;
  gap: 2px;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.site-nav a:hover { color: var(--color-text); background: var(--color-surface); }
.site-nav a[aria-current="page"] { color: var(--color-accent); }
@media (max-width: 600px) {
  .site-nav a { padding: 7px 8px; font-size: 0.82rem; }
  .counter-badge { display: none; }
}

.footer-links { line-height: 2; }

/* 통계: 번호별 출현 빈도 그리드 */
.freq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 12px 8px;
  margin: 8px 0 6px;
}
.freq-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.freq-cell .lotto-ball { width: 34px; height: 34px; font-size: 0.82rem; }
.freq-bar {
  width: 14px;
  height: 72px;
  background: var(--color-surface);
  border-radius: 7px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.freq-bar-fill { width: 100%; border-radius: 7px; min-height: 3px; transition: height 0.5s var(--ease-out-expo); }
.freq-bar-fill[data-range="1"] { background: oklch(0.82 0.15 88); }
.freq-bar-fill[data-range="2"] { background: oklch(0.66 0.15 235); }
.freq-bar-fill[data-range="3"] { background: oklch(0.64 0.2 22); }
.freq-bar-fill[data-range="4"] { background: oklch(0.5 0.012 230); }
.freq-bar-fill[data-range="5"] { background: oklch(0.74 0.18 142); }
.freq-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-muted); }

/* 통계: 번호 배지 행(핫/콜드/최다/보너스) */
.ball-stat-row { display: flex; flex-wrap: wrap; gap: 14px 12px; margin: 6px 0 2px; }
.ball-stat { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ball-stat-sub { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-muted); }
.stat-subhead { font-size: 0.98rem; margin: 18px 0 8px; color: var(--color-text); }
.stat-mini-metrics { margin: 8px 0 14px; }

/* 통계: 분포 막대 */
.dist-bars { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.dist-row { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 10px; }
.dist-label { font-size: 0.82rem; color: var(--color-text-muted); white-space: nowrap; }
.dist-track { height: 16px; background: var(--color-surface); border-radius: 8px; overflow: hidden; }
.dist-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
  border-radius: 8px;
  min-width: 3px;
  transition: width 0.5s var(--ease-out-expo);
}
.dist-val { font-family: var(--font-mono); font-size: 0.76rem; color: var(--color-text); white-space: nowrap; }
@media (max-width: 520px) {
  .dist-row { grid-template-columns: 84px 1fr; }
  .dist-val { grid-column: 2; justify-self: end; font-size: 0.72rem; }
}

/* 아카이브: 회차별 당첨번호 */
.archive-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.archive-jump { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--color-text-muted); }
.archive-jump input {
  width: 140px;
  padding: 9px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-mono);
}
.archive-list { display: flex; flex-direction: column; gap: 8px; }
.archive-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.archive-row.is-highlight { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.archive-round { display: flex; flex-direction: column; min-width: 74px; }
.archive-round-no { font-family: var(--font-display); font-weight: 700; }
.archive-round-date { font-size: 0.74rem; color: var(--color-text-muted); font-family: var(--font-mono); }
.archive-balls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.archive-plus { color: var(--color-text-muted); font-weight: 700; margin: 0 1px; }
.draw-ball.bonus-ball { outline: 2px dashed var(--color-accent); outline-offset: 2px; }

/* 페이지네이션 */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.pager-btn {
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
}
.pager-btn:hover:not(:disabled) { background: var(--color-border); }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-label { font-family: var(--font-mono); font-size: 0.84rem; color: var(--color-text-muted); }

/* 가이드: 목차 / 용어사전 / FAQ 아코디언 */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.toc a {
  font-size: 0.82rem;
  padding: 6px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  text-decoration: none;
}
.toc a:hover { color: var(--color-text); border-color: var(--color-primary); }
.glossary { margin: 6px 0; }
.glossary dt { font-weight: 700; color: var(--color-accent); margin-top: 16px; }
.glossary dd { margin: 4px 0 0; color: var(--color-text); }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 8px 0;
  background: var(--color-surface);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; float: right; color: var(--color-text-muted); font-weight: 700; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { margin: 0; padding: 0 16px 14px; color: var(--color-text-muted); }

/* 문의 */
.contact-email { font-size: 1.1rem; margin: 4px 0; }
.contact-email a { font-family: var(--font-mono); }

/* 홈: 콘텐츠 허브 카드 */
.content-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.hub-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.hub-card:hover { border-color: var(--color-primary); transform: translateY(-2px); background: var(--color-surface-raised); }
.hub-icon { font-size: 1.5rem; }
.hub-title { font-family: var(--font-display); font-weight: 700; color: var(--color-text); }
.hub-desc { font-size: 0.86rem; color: var(--color-text-muted); line-height: 1.5; }

/* 당첨금 계산기 */
.calc-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; }
.calc-input-label { display: block; font-weight: 600; margin-bottom: 8px; }
.calc-input-wrap { display: flex; align-items: center; gap: 8px; }
.calc-input-wrap input {
  flex: 1;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  text-align: right;
}
.calc-input-wrap input:focus { outline: none; border-color: var(--color-primary); }
.calc-input-suffix { color: var(--color-text-muted); font-weight: 600; }
.calc-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.calc-presets button {
  padding: 7px 14px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.calc-presets button:hover { border-color: var(--color-primary); background: var(--color-surface); }
.calc-result { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.calc-net {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 16px; margin-bottom: 14px;
  background: var(--color-success-bg); border-radius: var(--radius-md);
}
.calc-net-label { font-size: 0.86rem; color: var(--color-text-muted); }
.calc-net-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--color-success); }
.calc-sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.calc-sub > div { display: flex; flex-direction: column; gap: 3px; align-items: center; padding: 12px 8px; background: var(--color-bg); border-radius: var(--radius-sm); text-align: center; }
.calc-sub span { font-size: 0.76rem; color: var(--color-text-muted); }
.calc-sub b { font-family: var(--font-mono); font-size: 0.92rem; }
.calc-breakdown .calc-total-row { font-weight: 700; }
.calc-breakdown .calc-total-row td { border-top: 2px solid var(--color-border); }
@media (max-width: 480px) {
  .calc-sub { grid-template-columns: 1fr; }
  .calc-sub > div { flex-direction: row; justify-content: space-between; }
}

/* 통계: 합계 분포 곡선 그래프 */
.sum-curve { margin: 10px 0 4px; }
.sc-svg { width: 100%; height: auto; display: block; }
.sc-line { stroke: var(--color-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sc-axis { stroke: var(--color-border); stroke-width: 1; }
.sc-avg { stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sc-avg-label { fill: var(--color-accent); font-size: 12px; font-family: var(--font-mono); font-weight: 600; }
.sc-xlabel { fill: var(--color-text-muted); font-size: 11px; font-family: var(--font-mono); }
.sc-dot { fill: var(--color-primary); }

/* 합계 곡선: 직전 회차 마커 */
.sc-latest { stroke: var(--color-danger); stroke-width: 1.5; }
.sc-latest-dot { fill: var(--color-danger); stroke: var(--color-bg); stroke-width: 1.5; }
.sc-latest-label { fill: var(--color-danger); font-size: 12px; font-family: var(--font-mono); font-weight: 600; }

/* 통계: 분석 회차 범위 표시(신뢰성) */
.stat-range { margin: -2px 0 10px; font-family: var(--font-mono); font-size: 0.86rem; color: var(--color-accent); font-weight: 600; }

/* 이번 주 로또 이슈 카드 */
.issue-list { display: flex; flex-direction: column; gap: 12px; }
.issue-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.issue-emoji { font-size: 1.6rem; line-height: 1.2; flex-shrink: 0; }
.issue-body { flex: 1; min-width: 0; }
.issue-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.issue-tag {
  font-size: 0.72rem; font-weight: 700; color: var(--color-accent-ink);
  background: var(--color-accent); border-radius: 999px; padding: 2px 9px; flex-shrink: 0;
}
.issue-title { margin: 0; font-size: 1.02rem; }
.issue-detail { margin: 0; color: var(--color-text-muted); line-height: 1.6; }
.pr-won { color: var(--color-text-muted); font-size: 0.82rem; }

/* 출현빈도: 최다/최소 TOP5 하이라이트 + 라인그래프 */
.freq-cell { position: relative; border: 1.5px solid transparent; border-radius: 10px; padding: 8px 2px 4px; }
.freq-cell.is-most { border-color: var(--color-danger); background: oklch(0.2 0.06 25 / 0.35); }
.freq-cell.is-least { border-color: oklch(0.7 0.13 230); background: oklch(0.2 0.05 230 / 0.35); }
.freq-cell.is-most .lotto-ball { box-shadow: 0 0 0 2px var(--color-danger); }
.freq-cell.is-least .lotto-ball { box-shadow: 0 0 0 2px oklch(0.72 0.13 230); }

.freq-medal {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 0.58rem; font-weight: 800; line-height: 1;
  padding: 2px 5px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 1px 4px oklch(0 0 0 / 0.35); color: oklch(0.18 0.03 250);
}
.freq-medal b { font-family: var(--font-mono); }
/* 최다: 금·은·동·레드 */
.rank-m1 .freq-medal { background: oklch(0.84 0.16 88); }
.rank-m2 .freq-medal { background: oklch(0.86 0.02 250); }
.rank-m3 .freq-medal { background: oklch(0.66 0.11 55); color: oklch(0.98 0 0); }
.rank-m4 .freq-medal, .rank-m5 .freq-medal { background: var(--color-danger); color: oklch(0.98 0 0); }
/* 최소: 쿨톤, 1등이 진하고 5등으로 갈수록 연해짐 */
.rank-l1 .freq-medal { background: oklch(0.64 0.16 230); color: oklch(0.98 0 0); }
.rank-l2 .freq-medal { background: oklch(0.71 0.13 230); color: oklch(0.98 0 0); }
.rank-l3 .freq-medal { background: oklch(0.78 0.10 230); }
.rank-l4 .freq-medal { background: oklch(0.83 0.07 230); }
.rank-l5 .freq-medal { background: oklch(0.88 0.05 230); }

.freq-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 2px 0 8px; font-size: 0.82rem; color: var(--color-text-muted); }
.lg-item { display: inline-flex; align-items: center; gap: 6px; }
.lg-dot { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid transparent; display: inline-block; }
.lg-dot.most { border-color: var(--color-danger); background: oklch(0.2 0.06 25 / 0.5); }
.lg-dot.least { border-color: oklch(0.72 0.13 230); background: oklch(0.2 0.05 230 / 0.5); }

.fl-dot { fill: var(--color-primary); }

/* 출현빈도 라인그래프: 전체 vs 최근 두 선 비교 */
.fl-all { stroke: var(--color-primary); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.fl-recent { stroke: var(--color-accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.fl-dot { fill: var(--color-primary); }
.fl-dot-recent { fill: var(--color-accent); }
.fl-axis-all { fill: var(--color-primary); font-weight: 600; }
.fl-axis-recent { fill: var(--color-accent); font-weight: 600; }
.freq-line-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 2px; font-size: 0.82rem; color: var(--color-text-muted); }
.freq-line-legend .lg-item { display: inline-flex; align-items: center; gap: 6px; }
.lg-line { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.lg-line.all { background: var(--color-primary); }
.lg-line.recent { background: var(--color-accent); }

/* 꿈 해몽 로또번호 */
.hero-tag-fun { font-size: 0.5em; font-weight: 700; color: var(--color-accent-ink); background: var(--color-accent); padding: 3px 10px; border-radius: 999px; vertical-align: middle; margin-left: 8px; }
.dream-search { display: flex; gap: 8px; }
.dream-search input {
  flex: 1; min-width: 0; padding: 12px 14px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  color: var(--color-text); font-size: 1rem;
}
.dream-search input:focus { outline: none; border-color: var(--color-primary); }
.dream-result { margin-top: 14px; }

/* 오행 색상 (목 초록 · 화 빨강 · 토 금색 · 금 은회색 · 수 파랑) */
.dream-el-badge, .ohaeng-chip { --el: var(--color-text-muted); }
[data-el="mok"] { --el: oklch(0.72 0.16 145); }
[data-el="hwa"] { --el: oklch(0.64 0.2 25); }
[data-el="to"]  { --el: oklch(0.78 0.13 80); }
[data-el="geum"]{ --el: oklch(0.8 0.02 250); }
[data-el="su"]  { --el: oklch(0.66 0.15 235); }

.ohaeng-table { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ohaeng-chip {
  display: inline-flex; align-items: baseline; gap: 6px; font-size: 0.82rem;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--el);
  background: color-mix(in oklch, var(--el) 12%, transparent); color: var(--color-text);
}
.ohaeng-chip b { color: var(--el); }
.ohaeng-chip em { color: var(--color-text-muted); font-style: normal; font-size: 0.92em; }

.dream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 6px 0 8px; }
.dream-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.dream-card.is-generated { border-color: var(--color-primary); }
.dream-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dream-title { margin: 0; font-size: 1rem; }
.dream-el-badge {
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  padding: 2px 9px; border-radius: 999px; color: var(--el);
  border: 1px solid var(--el); background: color-mix(in oklch, var(--el) 14%, transparent);
}
.dream-meaning { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; }
.dream-balls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dream-balls .lotto-ball { width: 30px; height: 30px; font-size: 0.8rem; }

/* 꿈 카드: 클릭 가능 표시 + 상세 모달 */
.dream-card { cursor: pointer; transition: border-color 0.15s, transform 0.15s, background 0.15s; }
.dream-card:hover { border-color: var(--color-primary); transform: translateY(-2px); background: var(--color-surface-raised); }

.dream-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dream-modal[hidden] { display: none; }
.dream-modal-backdrop { position: absolute; inset: 0; background: oklch(0 0 0 / 0.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.dream-modal-card {
  position: relative; z-index: 1; width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto;
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-card);
}
.dream-modal-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  font-size: 0.9rem; cursor: pointer; line-height: 1;
}
.dream-modal-close:hover { background: var(--color-border); }
.dm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 36px; }
.dm-head h3 { margin: 0; font-size: 1.15rem; }
.dm-balls { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 14px; }
.dm-sub { margin: 6px 0 8px; font-size: 0.98rem; }
.dm-table-wrap { overflow-x: auto; }
.dm-num-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.dm-num-table th, .dm-num-table td { padding: 8px 8px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.dm-num-table th { color: var(--color-text-muted); font-weight: 600; font-size: 0.8rem; }
.dm-num-table .lotto-ball { width: 28px; height: 28px; font-size: 0.76rem; }
.dm-el-mean { color: var(--color-text-muted); font-size: 0.88em; margin-left: 4px; }
.dm-rel { font-size: 0.74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.dm-rel.rel-prim { color: var(--color-accent-ink); background: var(--color-accent); }
.dm-rel.rel-sec { color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); }
.dm-explain { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.7; margin: 14px 0 8px; }

/* 꿈 상세: 오행 판단 근거 콜아웃 */
.dm-basis { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: oklch(0.62 0.16 230 / 0.10); }
.dm-basis-h { display: block; font-weight: 700; font-size: 0.86rem; color: var(--color-primary); margin-bottom: 4px; }
.dm-basis p { margin: 0; font-size: 0.88rem; color: var(--color-text); line-height: 1.6; }

/* 상세: 전통해몽 번호 표시 */
.dm-rel.rel-trad { color: oklch(0.98 0 0); background: var(--color-primary); }

/* ── 고급 옵션(고정수/제외수/와일드카드) — 다크 테마 팔레트 준수 ── */
.adv-options { margin: 14px 0 4px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.adv-options > summary { cursor: pointer; padding: 11px 14px; font-weight: 700; font-size: 0.92rem; color: var(--color-text); list-style: none; }
.adv-options > summary::-webkit-details-marker { display: none; }
.adv-options > summary::before { content: '▸ '; color: var(--color-primary); }
.adv-options[open] > summary::before { content: '▾ '; }
.adv-summary { font-weight: 600; font-size: 0.82rem; color: var(--color-accent); margin-left: 4px; }
.adv-body { padding: 4px 14px 14px; }
.adv-help { margin: 0 0 10px; font-size: 0.84rem; color: var(--color-text-muted); }
.adv-tag-fix { color: var(--color-success); }
.adv-tag-ex { color: var(--color-danger); }
.adv-number-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; max-width: 460px; }
.adv-num { appearance: none; border: 1px solid var(--color-border); background: var(--color-surface-raised); border-radius: 8px; padding: 6px 0; font-size: 0.86rem; font-weight: 600; color: var(--color-text); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.adv-num:hover { border-color: var(--color-primary); }
.adv-num.is-fixed { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.adv-num.is-fixed::after { content: ' 고정'; font-size: 0.64rem; }
.adv-num.is-excluded { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); text-decoration: line-through; }
.adv-wildcard { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 10px; font-size: 0.88rem; color: var(--color-text); }
.adv-wildcard input { margin-top: 3px; }
.adv-wildcard small { display: block; color: var(--color-text-muted); }
.adv-reset { appearance: none; border: 1px solid var(--color-border); background: var(--color-surface-raised); border-radius: 8px; padding: 6px 12px; font-size: 0.84rem; cursor: pointer; color: var(--color-text); }
.adv-reset:hover { border-color: var(--color-primary); color: var(--color-primary); }
@media (max-width: 520px) { .adv-number-grid { grid-template-columns: repeat(7, 1fr); } }

/* 와일드카드(순수 랜덤) 볼: 금색, 고정수 볼: 초록 테두리 */
.lotto-ball.is-wild { background: oklch(0.8 0.14 88); color: oklch(0.25 0.05 88); box-shadow: 0 0 0 2px oklch(0.7 0.14 88), 0 2px 6px oklch(0.6 0.1 88 / 0.5); }
.lotto-ball.is-fixed { box-shadow: 0 0 0 2px var(--color-success); }

/* 근거 카드(추출 근거 한 줄) */
.game-rationale { flex-basis: 100%; margin: 4px 0 0; font-size: 0.82rem; color: var(--color-text-muted, oklch(0.45 0.02 230)); }

/* PWA "앱 설치(바탕화면·홈 바로가기)" 버튼 — 홈 히어로. 기본 hidden, 설치 가능/iOS일 때 JS가 노출 */
.install-cta { margin-top: 22px; text-align: center; }
.install-btn {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 13px 24px; border: 0; border-radius: 12px;
  background: #3858f6; color: #fff; font-size: 1rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 6px 18px rgba(56, 88, 246, .38);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.install-btn:hover { background: #2f4ee0; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(56, 88, 246, .48); }
.install-btn:active { transform: translateY(0); }
.install-btn-sub { font-size: 0.75rem; font-weight: 500; opacity: 0.85; }
.ios-install-help {
  margin: 12px auto 0; max-width: 440px; font-size: 0.82rem; line-height: 1.55;
  color: oklch(0.8 0.03 250); background: rgba(56, 88, 246, 0.12);
  border: 1px solid rgba(56, 88, 246, 0.32); border-radius: 10px; padding: 10px 14px;
}
@media (max-width: 480px) {
  .install-btn { flex-direction: column; align-items: center; gap: 2px; padding: 12px 20px; }
}