/* SEO 정적 페이지 (src/seo.ts) 전용 스타일 — 앱(src/style.css)과 같은 색 토큰을 간단히 옮김 */
:root {
  color-scheme: light;
  --bg: #fff; --band: #f5f5f7; --text: #1d1d1f; --text-2: #3a3a3c; --hairline: #c7c7cc; --link: #00489c;
  --game: #08528f;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #000; --band: #1d1d1f; --text: #f5f5f7; --text-2: #d1d1d6; --hairline: #48484a; --link: #7cb8ff; }
}
/* 흰 글씨 대비 7:1 이상 (RQ-53) */
[data-game='lottomax'] { --game: #08528f; }
[data-game='lotto649'] { --game: #1f3a78; }
[data-game='bc49'] { --game: #a3161b; }
[data-game='dailygrand'] { --game: #9a3409; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text); line-height: 1.55; overflow-wrap: break-word; font-size: 1.125rem; /* 본문 18px (RQ-53) */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;
}
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.top {
  position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline);
}
.brand { font-weight: 700; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
.lang { font-size: 1rem; font-weight: 600; border: 2px solid var(--text-2); border-radius: 980px; padding: 0 16px; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 20px 0 0; font-size: 1rem; color: var(--text-2); }
.crumbs li + li::before { content: '›'; margin-right: 6px; }
h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.15; letter-spacing: -0.01em; margin: 12px 0 20px; }
h2 { font-size: 1.25rem; margin: 32px 0 12px; }
h3 { margin: 0 0 4px; font-size: 1.05rem; }
.balls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.ball {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 1.25rem;
  background: var(--game); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ball.extra { background: transparent; color: var(--text); box-shadow: inset 0 0 0 3px var(--game); }
.big .ball { width: 52px; height: 52px; font-size: 1.4rem; }
.plus { color: var(--text-2); }
.when, .facts, .note { color: var(--text-2); margin: 4px 0; }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cards li { background: var(--band); border-radius: 18px; padding: 16px; }
.latest { background: var(--band); border-radius: 18px; padding: 16px 20px; }
.latest h2 { margin-top: 0; }
.years { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.years span { color: var(--text-2); font-size: 1rem; }
.years a { display: inline-flex; align-items: center; min-height: 48px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
thead th { color: var(--text-2); font-weight: 700; font-size: 1rem; }
td a { display: inline-flex; align-items: center; min-height: 44px; }
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.pager a { display: inline-flex; align-items: center; min-height: 48px; }
.cta { margin: 36px 0; }
.btn { display: inline-flex; align-items: center; min-height: 52px; background: var(--game); color: #fff; border-radius: 980px; padding: 12px 28px; font-weight: 700; text-decoration: none; }
.btn:hover { filter: brightness(1.12); }
.btn:active { filter: brightness(0.78); }
.foot { border-top: 1px solid var(--hairline); margin-top: 40px; padding-top: 16px; padding-bottom: 32px; font-size: 1rem; color: var(--text-2); }
.foot a { display: inline-flex; align-items: center; min-height: 48px; }
/* 좁은 화면 넘침 방지 (BUG-08): 본문은 가로로 넘치지 않고, 표만 자체 스크롤 */
main, .foot, .top { max-width: 100vw; overflow-x: clip; }
.crumbs ol { min-width: 0; }
.crumbs li { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scroll { max-width: 100%; }
@media (max-width: 480px) {
  .ball { width: 38px; height: 38px; font-size: 1.125rem; }
  .big .ball { width: 44px; height: 44px; font-size: 1.25rem; }
  .balls { gap: 6px; }
  th, td { padding: 8px 6px; }
}