:root{
  --bg:#f5f4f0; --surface:#fbfbf9; --panel:#ffffff; --panel-soft:#f7f6f2;
  --ink:#1c1c1a; --ink-hover:#3a3935; --ink-2:#55534d; --sub:#7a776f; --muted:#8a877f;
  --line:#e3e1db; --line-2:#dcdad3; --line-3:#efeee9; --hover:#efeee9; --soft:#f3f2ee; --track:#ebe9e3;
  --accent:#ffc83d; /* 골드 */
  --navy:#14213d; --navy-2:#1f3160;
  --b1:#f6c200; --b2:#5bb8ef; --b3:#ff6b6b; --b4:#a5a5a5; --b5:#9fcf3a;
  --font:"IBM Plex Sans KR",sans-serif; --mono:"JetBrains Mono",monospace; --display:"Black Han Sans","IBM Plex Sans KR",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;word-break:keep-all}
button,input{font:inherit;color:inherit}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:14px;min-width:0;flex-wrap:wrap}
.brand-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.actions{display:flex;gap:8px}
.actions:empty{display:none}
.btn{height:36px;padding:0 14px;background:#fff;border:1px solid var(--line-2);border-radius:999px;font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn:disabled{opacity:.4;cursor:default}
.btn--sm{height:30px;padding:0 12px;font-size:12px}
:focus-visible{outline:2px solid #2f6fd6;outline-offset:2px}

.wrap{width:100%;max-width:880px;margin:0 auto;padding:20px 28px 44px;display:flex;flex-direction:column;gap:16px}

/* 무대 */
.stage{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;align-items:center;padding:24px 28px;border-radius:28px;color:#fff;overflow:hidden;
  background:radial-gradient(circle at 15% 20%,#2a4180 0,transparent 55%),radial-gradient(circle at 90% 110%,#3b2a66 0,transparent 55%),var(--navy)}
.stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.5px);background-size:22px 22px;opacity:.4;pointer-events:none}
.machine{position:relative;display:flex;flex-direction:column;align-items:center}
.dome{position:relative;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),rgba(255,255,255,.06) 60%,rgba(255,255,255,.12));border:3px solid rgba(255,255,255,.35);overflow:hidden;box-shadow:inset 0 -12px 30px rgba(0,0,0,.25)}
.shine{position:absolute;left:24px;top:18px;width:46px;height:22px;border-radius:50%;background:rgba(255,255,255,.4);transform:rotate(-30deg);filter:blur(2px)}
.mix{position:absolute;inset:0}
.mb{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--c) 45%);box-shadow:inset -2px -3px 4px rgba(0,0,0,.25);left:var(--x);top:var(--y);animation:bob var(--d) ease-in-out infinite alternate}
@keyframes bob{to{transform:translate(var(--tx),var(--ty))}}
.machine.is-mixing .mb{animation:tumble .5s linear infinite;animation-delay:var(--dl)}
@keyframes tumble{0%{transform:translate(0,0)}25%{transform:translate(var(--tx),calc(var(--ty) * -1))}50%{transform:translate(calc(var(--tx) * -1),var(--ty))}75%{transform:translate(var(--ty),var(--tx))}100%{transform:translate(0,0)}}
.machine.is-mixing .dome{animation:shake .25s linear infinite}
@keyframes shake{25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}}
.neck{width:34px;height:20px;background:linear-gradient(90deg,#9aa6c4,#dfe5f5,#9aa6c4);margin-top:-4px}
.base{width:160px;height:46px;border-radius:14px 14px 18px 18px;background:linear-gradient(#ffd75e,#e9a900);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--display);line-height:1.05;font-size:16px;letter-spacing:.06em;box-shadow:0 8px 0 #b98400}
.base span:last-child{font-family:var(--mono);font-weight:700;font-size:11px}
.controls{position:relative;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.eyebrow{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:#b8c3e6}
.games-pick{display:flex;align-items:center;gap:10px;font-size:13px;color:#d7defa}
.seg{display:flex;background:rgba(255,255,255,.1);border-radius:999px;padding:3px}
.seg label{position:relative}
.seg input,.pick-mode input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;justify-content:center;width:36px;height:32px;border-radius:999px;font-family:var(--mono);font-weight:700;cursor:pointer;color:#c9d2f2}
.seg input:checked + span{background:var(--accent);color:var(--navy)}
.seg label:has(input:focus-visible){outline:2px solid #fff;border-radius:999px}
.draw-btn{position:relative;height:64px;padding:0 40px;border:none;border-radius:999px;background:var(--accent);color:var(--navy);font-family:var(--display);font-size:26px;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 0 #c99000,0 14px 30px -8px rgba(255,200,61,.6);transition:transform .08s,box-shadow .08s}
.draw-btn:hover{filter:brightness(1.05)}
.draw-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c99000,0 8px 20px -8px rgba(255,200,61,.6)}
.draw-btn.is-busy span::after{content:" · 건너뛰기";font-family:var(--font);font-size:14px;font-weight:700}
.rule-sum{margin:0;font-size:12.5px;color:#b8c3e6;line-height:1.5}

/* 결과 */
.results,.panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px}
.res-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.res-head h2{margin:0;font-size:16px}
.tray{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tray-empty{color:var(--muted);font-size:13.5px;text-align:center;padding:22px 0}
.row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:16px;background:linear-gradient(#f4f2ec,#fbfaf7);box-shadow:inset 0 2px 4px rgba(0,0,0,.06);overflow:hidden}
.row-label{position:relative;z-index:2;font-family:var(--display);font-size:20px;color:var(--navy);width:20px;flex:none;text-align:center}
.balls{display:flex;gap:8px;flex-wrap:nowrap;min-width:0}
.ball{--s:46px;width:var(--s);height:var(--s);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;font-weight:700;font-size:calc(var(--s) * .4);color:#fff;font-family:var(--font);letter-spacing:-.03em;
  background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.85) 0 9%,rgba(255,255,255,0) 30%),radial-gradient(circle at 50% 50%,var(--c) 55%,color-mix(in srgb,var(--c) 75%,#000) 100%);
  box-shadow:0 3px 6px rgba(0,0,0,.18),inset 0 -3px 6px rgba(0,0,0,.15);text-shadow:0 1px 2px rgba(0,0,0,.35);position:relative}
.ball.is-fixed::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px dashed var(--navy)}
.ball.roll{animation:roll .55s cubic-bezier(.25,1.2,.45,1) both}
@keyframes roll{0%{transform:translateX(-240px) rotate(-420deg) scale(.7);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.c1{--c:var(--b1)} .c2{--c:var(--b2)} .c3{--c:var(--b3)} .c4{--c:var(--b4)} .c5{--c:var(--b5)}
.c1,.c5{color:#fff}

/* 번호판 */
.hint{margin:0 0 10px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.tag{display:inline-block;font-size:11px;padding:0 6px;border-radius:5px;color:#fff}
.tag--fix{background:var(--navy)} .tag--ex{background:#c9c6bd}
.pick-mode{display:inline-flex;background:var(--soft);border-radius:999px;padding:3px;margin-bottom:12px}
.pick-mode label{position:relative}
.pick-mode span{display:flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.pick-mode input:checked + span{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.pick-mode label:has(input:focus-visible){outline:2px solid #2f6fd6;border-radius:999px}
.board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.num{aspect-ratio:1;border-radius:50%;border:2px solid var(--c);background:#fff;color:var(--ink);font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .1s;padding:0}
.num:hover{transform:scale(1.06)}
.num[data-state="fix"]{background:var(--c);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--navy)}
.num[data-state="fix"]::before{content:"고정";position:absolute;top:-8px;right:-6px;font-size:9px;background:var(--navy);color:#fff;border-radius:4px;padding:0 3px;font-weight:700;text-shadow:none}
.num[data-state="ex"]{border-color:#dedad1;color:#c0bcb2;background:#f5f4f0}
.num[data-state="ex"]::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:2px;background:#bdb8ad;transform:rotate(-35deg)}
.pick-msg{margin:10px 0 0;font-size:12.5px;color:#c0392b;min-height:0}
.pick-msg:empty{display:none}

/* 기록 */
.history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-height:420px;overflow:auto}
.history li{border-bottom:1px solid var(--line-3);padding-bottom:10px}
.history li:last-child{border-bottom:none}
.h-time{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-bottom:6px;display:flex;justify-content:space-between;gap:8px}
.h-time button{border:none;background:none;color:var(--sub);font-size:11.5px;cursor:pointer;text-decoration:underline}
.h-games{display:flex;flex-direction:column;gap:4px}
.h-games .balls{gap:4px}
.h-games .ball{--s:26px}
.h-empty{color:var(--muted);font-size:13px;text-align:center;padding:12px}

.notice{font-size:12.5px;line-height:1.7;color:var(--ink-2);background:#fff8e1;border:1px solid #f3dd9a;border-radius:16px;padding:14px 16px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:2000;max-width:calc(100vw - 32px)}
.toast.is-show{opacity:1;transform:translate(-50%,0)}

@media (max-width:640px){
  .topbar{padding:14px 16px}
  .wrap{padding:14px 16px 32px}
  .stage{grid-template-columns:1fr;justify-items:center;padding:20px 16px;gap:16px;border-radius:22px}
  .controls{align-items:center;text-align:center}
  .dome{width:150px;height:150px}
  .draw-btn{width:100%;font-size:24px}
  .results,.panel{padding:14px 12px;border-radius:20px}
  .row{gap:6px;padding:6px 8px}
  .row-label{font-size:16px;width:14px}
  .balls{gap:4px}
  .ball{--s:clamp(30px,calc((100vw - 110px) / 6),44px)}
  .board{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
  .num{font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* 다크 모드 (인쇄는 라이트 그대로) — 공 색은 그대로 */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#121319; --surface:#181920; --panel:#1d1e26; --panel-soft:#22232c;
    --ink:#eaebf1; --ink-hover:#ffffff; --ink-2:#c6c8d2; --sub:#9c9eab; --muted:#878996;
    --line:#2b2c36; --line-2:#363843; --line-3:#24252e; --hover:#272832; --soft:#24252e; --track:#31333d;
  }
  :root[data-theme="dark"] :focus-visible{outline-color:#7aa7ff}
  :root[data-theme="dark"] .btn{background:var(--panel)}
  :root[data-theme="dark"] .btn:hover{background:var(--hover)}
  :root[data-theme="dark"] .stage{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
  :root[data-theme="dark"] .base{background-color:#f2bd1c}
  :root[data-theme="dark"] .results,:root[data-theme="dark"] .panel{background:var(--panel)}
  :root[data-theme="dark"] .row{background:linear-gradient(#17181f,#1f2029);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
  :root[data-theme="dark"] .row-label{color:var(--accent)}
  :root[data-theme="dark"] .ball.is-fixed::after{border-color:var(--accent)}
  :root[data-theme="dark"] .tag--fix{background:#2f4a8f}
  :root[data-theme="dark"] .tag--ex{background:#4a4a55}
  :root[data-theme="dark"] .pick-mode label:has(input:focus-visible){outline-color:#7aa7ff}
  :root[data-theme="dark"] .pick-mode input:checked + span{background:var(--track);box-shadow:0 1px 3px rgba(0,0,0,.35)}
  :root[data-theme="dark"] .num{background:var(--panel)}
  :root[data-theme="dark"] .num[data-state="fix"]{background:var(--c);box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--accent)}
  :root[data-theme="dark"] .num[data-state="fix"]::before{background:#2f4a8f}
  :root[data-theme="dark"] .num[data-state="ex"]{border-color:#3a3b46;color:#80828e;background:var(--soft)}
  :root[data-theme="dark"] .num[data-state="ex"]::after{background:#5e606b}
  :root[data-theme="dark"] .pick-msg{color:#ff8b7c}
  :root[data-theme="dark"] .notice{background:rgba(255,200,61,.07);border-color:rgba(255,200,61,.28)}
  :root[data-theme="dark"] .toast{color:var(--bg)}
}