:root {
  color-scheme: light;
  --bg: #f5f7fb; --surface: #ffffff; --text: #18233b; --muted: #667186;
  --line: #dfe5ee; --accent: #2354df; --accent-hover: #1743c3;
  --soft: #f5f7fb; --empty: #f5f7fb; --empty-text: #a7b0c0;
  --yellow: #e08f00; --blue: #0063cc; --red: #d8314f; --gray: #6e7382; --green: #2c9e44;
  --ball-text: #ffffff; --radius: var(--layout-radius); --small-radius: var(--layout-control-radius);
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 1rem; line-height: 1.5; }
button, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
h1 { margin: 0; font-size: 1.75rem; font-weight: 700; }
.week-label { margin: var(--space-1) 0 0; color: var(--muted); font-size: .875rem; }
.draw-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--space-2) var(--space-3); }
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 5), auto); grid-auto-flow: column; column-gap: var(--space-4); }
.game-row { display: flex; gap: var(--space-2); align-items: center; min-width: 0; padding-block: var(--space-2); border-bottom: 1px solid var(--line); }
.game-row.column-end { border-bottom-color: transparent; }
.game-label { flex: 0 0 22px; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.balls { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-1); align-items: center; }
.ball { width: 100%; max-width: 48px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; justify-self: center; border-radius: 50%; font-size: 1.125rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ball-text); }
.ball-empty { background: var(--empty); border: 1px dashed var(--line); color: var(--empty-text); }
.ball-yellow { background: var(--yellow); }
.ball-blue { background: var(--blue); }
.ball-red { background: var(--red); }
.ball-gray { background: var(--gray); }
.ball-green { background: var(--green); }
.controls { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.draw-button, .secondary-button { min-height: 46px; padding: 10px 20px; border-radius: var(--small-radius); font-size: .875rem; font-weight: 600; }
.draw-button { border: 1px solid var(--accent); background: var(--accent); color: #ffffff; }
.draw-button:hover:not(:disabled) { background: var(--accent-hover); }
.draw-button:disabled { color: var(--muted); background: var(--surface); border-color: var(--line); cursor: default; }
.draw-button[aria-busy="true"] { cursor: wait; }
.secondary-button { color: var(--text); background: var(--surface); border: 1px solid var(--line); }
.secondary-button:disabled { color: var(--muted); cursor: default; }
.status { min-height: 1.5em; margin: 12px 0 0; font-size: .8125rem; text-align: center; color: var(--muted); overflow-wrap: anywhere; }
.status:empty { margin-top: 0; min-height: 0; }
.record-tools { width: min(340px, 100%); margin: var(--space-2) auto 0; color: var(--muted); font-size: .8125rem; }
.record-tools summary { cursor: pointer; text-align: center; min-height: 44px; padding: 12px var(--space-1); }
select { width: 100%; min-width: 0; min-height: 44px; margin-top: var(--space-1); padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--small-radius); background: var(--surface); color: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
:root[data-theme="dark"] { color-scheme: dark; --bg: #101724; --surface: #182131; --text: #ecf1fa; --muted: #a6b2c6; --line: #334157; --accent: #7c9cff; --accent-hover: #95aeff; --soft: #1d293c; --empty: #1d293c; --empty-text: #8190a7; }
:root[data-theme="dark"] .draw-button:not(:disabled) { color: #101e3d; }
@media (max-width: 780px) {
  h1 { font-size: 1.5rem; }
  .draw-panel { padding: var(--space-1) var(--space-2); }
  .results { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .game-row { padding-block: 12px; gap: var(--space-1); }
  .game-row.column-end:not(:last-child) { border-bottom-color: var(--line); }
}
@media (max-width: 360px) {
  .game-label { flex-basis: 18px; }
  .balls { gap: 5px; }
  .ball { font-size: 1rem; }
}