: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:#3355ff; /* 일렉트릭 블루 */
  --volt:#d7ff3a; --hot:#ff3d7f;
  --font:"IBM Plex Sans KR",sans-serif; --mono:"JetBrains Mono",monospace;
}
*{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}
button{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}
.btn{height:36px;padding:0 14px;background:transparent;border:1px solid var(--line-2);border-radius:999px;font-size:13px;cursor:pointer}
.btn:hover{background:var(--hover)}
.btn--solid{background:var(--ink);color:#fff;border:none;font-weight:500}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px){ .topbar{padding:14px 16px} }

/* ---------- 레이아웃 ---------- */
.arena{flex:1;display:flex;flex-wrap:wrap;align-items:stretch}
.stage{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:16px;padding:32px 28px 40px;max-width:900px;margin:0 auto}
.side{flex:1 1 280px;min-width:0;max-width:100%;border-left:1px solid var(--line);background:var(--panel);padding:28px 24px 40px;display:flex;flex-direction:column;gap:26px}

.modebar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.seg{display:flex;background:var(--soft);border-radius:999px;padding:3px;gap:2px}
.seg-btn{height:34px;min-width:64px;padding:0 14px;background:transparent;color:var(--sub);border:none;border-radius:999px;font-family:var(--mono);font-size:13px;cursor:pointer}
.seg-btn.is-active{background:var(--ink);color:#fff}
.seg-btn:disabled{opacity:.45;cursor:default}
.input-hint{font-size:12.5px;color:var(--sub);display:flex;align-items:center;gap:6px}
.kbd{display:inline-block;font-family:var(--mono);font-size:11px;line-height:1.4;padding:1px 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--surface);color:var(--ink)}

.hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hud-box{display:flex;flex-direction:column;gap:4px;padding:12px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.hud-val{font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.hud-box--hot{background:var(--ink);border-color:var(--ink)}
.hud-box--hot .mono-label{color:#a8a59c}
.hud-box--hot .hud-val{color:var(--volt)}

/* ---------- 패드 ---------- */
.pad{position:relative;height:340px;border-radius:26px;overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(circle at 50% 120%,rgba(215,255,58,.35),transparent 55%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 28px),
    linear-gradient(150deg,#4a6bff,var(--accent) 45%,#2a1fb8);
  box-shadow:0 3px 0 #1d1890,0 30px 60px -28px rgba(51,85,255,.7);outline:none;transition:transform .05s}
.pad:focus-visible{box-shadow:0 0 0 4px var(--volt),0 30px 60px -28px rgba(51,85,255,.7)}
.pad.is-hit{transform:translateY(2px) scale(.996)}
.pad-progress{position:absolute;left:0;bottom:0;height:6px;width:0;background:var(--volt);box-shadow:0 0 16px var(--volt)}
.pad-idle,.pad-run,.pad-result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;text-align:center;padding:20px;pointer-events:none}
.pad-big{font-family:var(--mono);font-weight:800;font-size:72px;letter-spacing:-.04em;line-height:1;text-shadow:0 4px 0 rgba(0,0,0,.18);animation:wiggle 1.6s ease-in-out infinite}
.pad-sub{font-size:14px;color:rgba(255,255,255,.8)}
.pad-count{font-family:var(--mono);font-weight:800;font-size:120px;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 6px 0 rgba(0,0,0,.18)}
.pad-count.is-bump{animation:bump .12s ease-out}
.pad-result{background:rgba(18,16,60,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadein .3s ease-out;gap:6px}
.res-rank{font-size:46px;line-height:1}
.res-cps{font-family:var(--mono);font-size:68px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--volt)}
.res-cps small{font-size:20px;margin-left:6px;color:#fff;letter-spacing:.04em}
.res-title{font-size:20px;font-weight:700}
.res-sub{font-size:13px;color:rgba(255,255,255,.75)}
.res-record{margin-top:4px;padding:4px 12px;border-radius:999px;background:var(--hot);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;animation:pulse 1s ease-in-out infinite}
.res-again{margin-top:8px;font-size:12px;color:rgba(255,255,255,.6)}
.ripples{position:absolute;inset:0;pointer-events:none}
.ripple{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid var(--volt);animation:ripple .45s ease-out forwards}
.plus{position:absolute;font-family:var(--mono);font-weight:800;font-size:16px;color:var(--volt);animation:float .5s ease-out forwards}
@keyframes ripple{to{transform:scale(5);opacity:0}}
@keyframes float{to{transform:translateY(-34px);opacity:0}}
@keyframes bump{50%{transform:scale(1.08)}}
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) scale(1.04)}}
@keyframes fadein{from{opacity:0}}
@keyframes pulse{50%{transform:scale(1.08)}}

/* ---------- 그래프 ---------- */
.graph-card{padding:14px 16px 10px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.graph-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.graph-legend{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--sub)}
.lg-line{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--accent)}
.lg-avg{display:inline-block;width:14px;height:0;border-top:2px dashed var(--hot);margin-left:8px}
#graph{display:block;width:100%;height:170px}

/* ---------- 사이드 ---------- */
.group{display:flex;flex-direction:column;gap:12px}
.group + .group{border-top:1px solid var(--line-3);padding-top:22px}
.bests{display:flex;flex-direction:column;gap:8px}
.best{display:flex;align-items:baseline;justify-content:space-between;padding:12px 14px;border-radius:12px;background:var(--panel-soft)}
.best.is-current{background:#eef1ff;box-shadow:inset 0 0 0 1px rgba(51,85,255,.3)}
.best-mode{font-family:var(--mono);font-size:12px;color:var(--sub)}
.best-val{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.02em}
.best-val small{font-size:11px;color:var(--muted);margin-left:3px;font-weight:400}
.link-btn{align-self:flex-start;padding:0;background:none;border:none;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ranks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.ranks li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;font-size:13px;color:var(--ink-2)}
.ranks li.is-me{background:var(--ink);color:#fff}
.rank-emoji{font-size:18px;width:24px;text-align:center}
.rank-range{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.ranks li.is-me .rank-range{color:var(--volt)}
.tip{margin:0;font-size:13px;line-height:1.65;color:var(--ink-2)}

@media (max-width:640px){
  .stage{padding:20px 16px 28px;gap:12px}
  .side{border-left:none;border-top:1px solid var(--line);padding:24px 16px 40px}
  .hud{gap:6px}
  .hud-box{padding:10px 10px}
  .hud-val{font-size:22px}
  .pad{height:300px;border-radius:22px}
  .pad-big{font-size:56px}
  .pad-count{font-size:96px}
  .res-cps{font-size:54px}
  #graph{height:140px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* 다크 모드 (인쇄는 라이트 그대로) — 패드는 원래 색 그대로 */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#121319; --surface:#171820; --panel:#1c1d26; --panel-soft:#22232d;
    --ink:#ebecf2; --ink-hover:#ffffff; --ink-2:#c7c8d3; --sub:#9fa0ae; --muted:#8a8b99;
    --line:#2c2d38; --line-2:#373844; --line-3:#262732; --hover:#282934; --soft:#252631; --track:#33343f;
  }
  :root[data-theme="dark"] .btn--solid{color:var(--bg)}
  :root[data-theme="dark"] .seg-btn.is-active{background:var(--accent);color:#fff}
  :root[data-theme="dark"] .hud-box--hot{background:var(--accent);border-color:var(--accent)}
  :root[data-theme="dark"] .hud-box--hot .mono-label{color:rgba(255,255,255,.75)}
  :root[data-theme="dark"] .best.is-current{background:rgba(51,85,255,.18);box-shadow:inset 0 0 0 1px rgba(110,135,255,.45)}
  :root[data-theme="dark"] .ranks li.is-me{background:var(--accent);color:#fff}
  :root[data-theme="dark"] .pad{box-shadow:0 3px 0 #1d1890,0 30px 60px -28px rgba(51,85,255,.45)}
}