:root {
 --bg:#F2F4F6; --surface:#FFFFFF; --surface-2:#F2F4F6; --border:#E5E8EB; --border-ui:#7B8591;
 --text:#191F28; --text-sub:#4E5968; --text-muted:var(--text-sub);
 --primary:#2563EB; --primary-soft:#EAF1FF; --on-primary:#FFFFFF;
 --banner-bg:#EAF1FF; --banner-fg:#191F28; --banner-sub:#4E5968; --banner-link:#2563EB;
 --element-wood:#047857; --element-fire:#C62828; --element-earth:#97690B; --element-metal:#7B8591; --element-water:#2563EB;
 --accent-warm:#F59E0B; --warm-soft:#FFF5E3;
 --success:#047857; --danger:#C62828; --warn:var(--text-sub);
 --kakao-bg:var(--primary-soft); --kakao-fg:var(--primary);
 --shadow-1:0 2px 8px rgba(25,31,40,.035); --shadow-2:var(--shadow-1);
 --ball-1-bg:#FBC400; --ball-1-fg:#191F28;
 --ball-2-bg:#2563EB; --ball-2-fg:#FFFFFF;
 --ball-3-bg:#C62828; --ball-3-fg:#FFFFFF;
 --ball-4-bg:#4E5968; --ball-4-fg:#FFFFFF;
 --ball-5-bg:#047857; --ball-5-fg:#FFFFFF;
 --ball-ring:rgba(25,31,40,.18); --tab-inactive:var(--text-sub); --tab-active:var(--primary);
 --bg-card:var(--surface); --bg-inner:var(--surface-2); --text-main:var(--text);
 --border-color:var(--border); --border-highlight:var(--border-ui); --primary-light:var(--primary-soft);
 --ball-yellow:var(--ball-1-bg); --ball-blue:var(--ball-2-bg); --ball-red:var(--ball-3-bg); --ball-gray:var(--ball-4-bg); --ball-green:var(--ball-5-bg);
 --shadow-md:var(--shadow-1); --ball-size:36px;
 color-scheme:light;
}
[data-theme="dark"] {
 --bg:#0F1115; --surface:#1A1D24; --surface-2:#0F1115; --border:#2C2F37; --border-ui:#7A8594;
 --text:#F2F4F6; --text-sub:#B0B8C1; --primary:#4795FF; --primary-soft:#14233D; --on-primary:#0F1115;
 --banner-bg:#283952; --banner-fg:#F2F4F6; --banner-sub:#D0DCEE; --banner-link:#F2F4F6;
 --element-wood:#49B993; --element-fire:#FF7272; --element-earth:#D4AF61; --element-metal:#B0B8C1; --element-water:#4795FF;
 --accent-warm:#FFB547; --warm-soft:#2C251B; --success:var(--text-sub); --danger:var(--text-sub);
 --ball-2-bg:#4795FF; --ball-2-fg:#191F28; --ball-3-bg:#FF7272; --ball-3-fg:#191F28;
 --ball-4-bg:#9CA3AF; --ball-4-fg:#191F28; --ball-5-bg:#49B993; --ball-5-fg:#191F28;
 --ball-ring:rgba(242,244,246,.18); --shadow-1:none; --shadow-2:none; color-scheme:dark;
}
/* System fallback also works before theme-init is applied. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
 --bg:#0F1115; --surface:#1A1D24; --surface-2:#0F1115; --border:#2C2F37; --border-ui:#7A8594;
 --text:#F2F4F6; --text-sub:#B0B8C1; --primary:#4795FF; --primary-soft:#14233D; --on-primary:#0F1115;
 --banner-bg:#283952; --banner-fg:#F2F4F6; --banner-sub:#D0DCEE; --banner-link:#F2F4F6;
 --element-wood:#49B993; --element-fire:#FF7272; --element-earth:#D4AF61; --element-metal:#B0B8C1; --element-water:#4795FF;
 --accent-warm:#FFB547; --warm-soft:#2C251B; --success:var(--text-sub); --danger:var(--text-sub);
 --ball-2-bg:#4795FF; --ball-2-fg:#191F28; --ball-3-bg:#FF7272; --ball-3-fg:#191F28;
 --ball-4-bg:#9CA3AF; --ball-4-fg:#191F28; --ball-5-bg:#49B993; --ball-5-fg:#191F28;
 --ball-ring:rgba(242,244,246,.18); --shadow-1:none; --shadow-2:none; color-scheme:dark; } }
/* TP-018. Tokens above this comment are copied verbatim from index.html. */
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 "Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; }
a { color:var(--primary); text-underline-offset:4px; }
button,input { font:inherit; color:inherit; }
button { cursor:pointer; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--primary); outline-offset:4px; }
::selection { color:var(--on-primary); background:var(--primary); }
html { scrollbar-color:var(--border-ui) var(--bg); scroll-padding-top:24px; }
.skip-link { position:absolute; left:16px; top:-80px; z-index:10; padding:12px; background:var(--surface); }
.skip-link:focus { top:8px; }
.page-header { background:var(--surface); border-bottom:1px solid var(--border); }
.header-inner { max-width:1100px; margin:auto; padding:14px 20px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.brand { display:flex; gap:8px; align-items:center; color:var(--text); font-size:22px; font-weight:700; letter-spacing:-1px; text-decoration:none; }
.brand-mark { display:grid; grid-template-columns:repeat(3,6px); gap:3px; transform:rotate(-12deg); }
.brand-mark i { width:6px; height:6px; border-radius:50%; background:currentColor; }
#theme-toggle { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--border-ui); border-radius:12px; background:var(--surface); margin-left:auto; }
.header-inner nav { display:flex; gap:4px; order:1; }
.header-inner nav a { padding:10px; color:var(--text-sub); text-decoration:none; font-size:14px; font-weight:700; border-radius:12px; }
.header-inner nav a[aria-current] { color:var(--primary); background:var(--primary-soft); }
.header-inner nav a:hover { background:var(--surface-2); }
main { max-width:1000px; padding:24px 24px 56px; margin:auto; }
.breadcrumbs { display:flex; gap:8px; flex-wrap:wrap; color:var(--text-sub); font-size:14px; margin-bottom:28px; }
h1,h2,h3 { word-break:keep-all; line-height:1.35; text-wrap:balance; }
h1 { font-size:32px; letter-spacing:-.7px; margin:0 0 12px; }
h2 { font-size:24px; letter-spacing:-.5px; margin:0 0 16px; }
h3 { font-size:18px; margin:24px 0 8px; }
p { max-width:72ch; margin:8px 0 16px; word-break:keep-all; overflow-wrap:anywhere; }
.muted,.draw-date { color:var(--text-sub); font-size:14px; }
section { margin-top:44px; }
.result-panel,.latest-round { background:var(--surface); padding:28px; border-radius:20px; border:1px solid var(--border); }
.result-panel { margin-top:24px; }
.latest-round { margin-top:24px; }
.winning-balls { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.balls-group { display:flex; gap:8px; }
.lotto-ball { width:40px; height:40px; border:1px solid var(--ball-ring); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:700; font-size:16px; }
.ball-1 { background:var(--ball-1-bg); color:var(--ball-1-fg); }
.ball-2 { background:var(--ball-2-bg); color:var(--ball-2-fg); }
.ball-3 { background:var(--ball-3-bg); color:var(--ball-3-fg); }
.ball-4 { background:var(--ball-4-bg); color:var(--ball-4-fg); }
.ball-5 { background:var(--ball-5-bg); color:var(--ball-5-fg); }
.bonus { display:flex; align-items:center; gap:8px; color:var(--text-sub); font-size:14px; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:var(--surface); }
caption { text-align:left; color:var(--text-sub); font-size:14px; padding:0 0 10px; }
th,td { padding:14px 16px; border-bottom:1px solid var(--border); text-align:right; }
th:first-child { text-align:left; }
thead { background:var(--surface-2); color:var(--text-sub); }
.picks-table { min-width:0; }
.picks-table td { white-space:nowrap; }
@media (max-width:480px){ .picks-table th,.picks-table td { padding-left:6px; padding-right:6px; font-size:14px; } }
.picks-table .hit { color:var(--primary); font-weight:800; }
.picks-table td:nth-child(2) { white-space:nowrap; }
.sales { padding:16px 0; display:flex; justify-content:space-between; gap:12px; max-width:none; }
.facts { margin:20px 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--border); }
.facts div { padding:16px 0; border-bottom:1px solid var(--border); }
dt { color:var(--text-sub); font-size:14px; }
dd { margin:4px 0 0; font-weight:700; }
.exclusion { margin-top:28px; }
.round-nav,.page-footer nav { display:flex; flex-wrap:wrap; gap:20px; }
.round-nav { margin-top:40px; padding-top:24px; border-top:1px solid var(--border); font-size:14px; }
.round-nav span { color:var(--text-sub); }
.actions { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.actions a { display:flex; align-items:center; justify-content:center; min-height:52px; padding:12px 20px; border-radius:14px; font-weight:700; text-decoration:none; }
.primary { color:var(--on-primary); background:var(--primary); }
.secondary { background:var(--surface); border:1px solid var(--border-ui); }
.actions a:hover { text-decoration:underline; }
.page-footer { max-width:1000px; margin:auto; border-top:1px solid var(--border); padding:28px 24px 40px; font-size:14px; color:var(--text-sub); }
.detail-link { display:inline-block; margin-top:24px; font-weight:700; }
.year-nav { display:flex; gap:8px 18px; flex-wrap:wrap; margin-top:32px; }
.round-list { margin:0; padding:0; list-style:none; }
.round-list li { border-bottom:1px solid var(--border); }
.round-list a { display:grid; grid-template-columns:90px 130px 1fr; gap:16px; padding:16px 0; text-decoration:none; color:var(--text); }
.round-list a:hover strong { color:var(--primary); text-decoration:underline; }
.round-list time { color:var(--text-sub); font-size:14px; }
.list-numbers { font-weight:600; }
.notice { background:var(--primary-soft); color:var(--text); padding:20px; border-radius:14px; margin:24px 0 16px; font-weight:600; }
.period-switch { border:0; margin:0; padding:0; }
legend { color:var(--text-sub); font-size:14px; margin-bottom:12px; }
.period-switch > input { margin:0 6px 0 0; accent-color:var(--primary); width:16px; height:16px; }
.period-switch > label { display:inline-block; padding:8px 12px 8px 0; margin-right:8px; cursor:pointer; }
.period-switch > input:checked + label { color:var(--primary); font-weight:700; }
.period-panel { display:none; }
#period-all:checked ~ .period-panels .panel-all,#period-52:checked ~ .period-panels .panel-52,#period-100:checked ~ .period-panels .panel-100 { display:block; }
.bar-chart { margin:20px 0 0; }
.bar-row { display:grid; grid-template-columns:84px minmax(0,1fr) 54px; gap:12px; align-items:center; min-height:32px; font-size:14px; }
.bar-row > span:last-child { text-align:right; }
.bar-track { height:12px; background:var(--border); border-radius:3px; overflow:hidden; }
.bar { display:block; height:100%; background:var(--primary); }
.distribution-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
summary { cursor:pointer; color:var(--primary); padding:8px 0; }
.overdue-table { max-height:410px; margin-top:12px; }
.overdue-table thead { position:sticky; top:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (max-width:700px) {
 .header-inner { gap:8px; padding:12px 16px; }
 .header-inner nav { width:100%; overflow-x:auto; white-space:nowrap; gap:0; }
 .header-inner nav a { padding:10px 8px; }
 main { padding:20px 20px 40px; }
 h1 { font-size:28px; } h2 { font-size:22px; }
 .breadcrumbs { margin-bottom:24px; }
 .result-panel,.latest-round { padding:20px 16px; }
 .winning-balls { gap:16px; }
 .lotto-ball { width:36px; height:36px; }
 .bonus { width:100%; }
 th,td { padding:12px 10px; font-size:14px; }
 .actions { flex-direction:column; }
 .round-list a { grid-template-columns:72px 1fr; gap:8px; }
 .list-numbers { grid-column:1 / -1; font-size:14px; }
 .distribution-grid { grid-template-columns:1fr; gap:0; }
 .bar-row { grid-template-columns:78px minmax(0,1fr) 42px; gap:8px; }
 .period-switch > label { padding-right:8px; margin-right:0; font-size:14px; }
}

::selection { background:var(--primary); color:var(--on-primary); }
* { scrollbar-color:var(--primary) var(--surface-2); scrollbar-width:thin; }
input,textarea { caret-color:var(--primary); }
a { text-underline-offset:3px; }
summary { display:flex; align-items:center; gap:8px; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::before { content:''; flex:0 0 16px; height:16px; background:var(--primary); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3 5 5-5 5' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform 160ms ease-out; }
details[open] > summary::before { transform:rotate(90deg); }
