: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:#16c26a;
  --red:#ee3048; --green:#16c26a; --amber:#ffae1a; --blue:#2f5bff;
  --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:calc(100vh - 48px);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}
.home{font-size:13px;color:var(--ink-2);text-decoration:none}
.home:hover{color:var(--ink)}
.brand-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.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}
.btn--solid:hover{background:var(--ink-hover)}
.text-input{height:40px;padding:0 12px;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:14px;color:var(--ink)}
@media (max-width:640px){ .topbar{padding:14px 16px} }

/* ---------- 반응속도 ---------- */
.main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:32px 28px 56px;display:flex;flex-direction:column;gap:20px}

.pad{position:relative;height:clamp(320px,56vh,560px);border-radius:28px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:var(--ink);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;overflow:hidden;outline:none;transition:background-color .12s}
.pad:focus-visible{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--blue)}
.pad::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0 14px,transparent 14px 28px);pointer-events:none}
.pad-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px}
.pad-icon{width:64px;height:64px;border-radius:999px;border:3px solid currentColor;opacity:.9;display:grid;place-items:center;font-family:var(--mono);font-size:26px;font-weight:500}
.pad-big{font-size:clamp(34px,6vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.pad-sub{font-size:15px;opacity:.85;max-width:420px;line-height:1.5}
.pad-round{position:absolute;top:18px;left:22px;color:rgba(255,255,255,.7)}

.pad[data-state="idle"] .pad-icon::after{content:"▶";font-size:20px;margin-left:4px}
.pad[data-state="wait"]{background:var(--red)}
.pad[data-state="wait"] .pad-icon{animation:pulse 1s ease-in-out infinite}
.pad[data-state="wait"] .pad-icon::after{content:"···"}
.pad[data-state="go"]{background:var(--green);transition:none}
.pad[data-state="go"] .pad-icon::after{content:"!"}
.pad[data-state="early"]{background:var(--amber);color:#2a1d00}
.pad[data-state="early"] .pad-round{color:rgba(42,29,0,.6)}
.pad[data-state="early"] .pad-icon::after{content:"✕"}
.pad[data-state="early"] .pad-inner{animation:shake .35s}
.pad[data-state="result"]{background:var(--blue)}
.pad[data-state="result"] .pad-big,.pad[data-state="done"] .pad-big{font-family:var(--mono);font-weight:500;font-size:clamp(56px,10vw,112px);letter-spacing:-.04em;animation:pop .35s cubic-bezier(.2,1.5,.4,1)}
.pad[data-state="result"] .pad-icon,.pad[data-state="done"] .pad-icon{display:none}
.pad[data-state="done"]{background:linear-gradient(135deg,#1c1c1a,#2a2a60)}
@keyframes pulse{50%{transform:scale(.88);opacity:.6}}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

.board{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px}
.tries{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;grid-column:1 / -1}
.try{display:flex;flex-direction:column;gap:6px;padding:14px 14px 12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;min-width:0}
.try-ms{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--line-2)}
.try.is-done .try-ms{color:var(--ink);animation:pop .3s ease}
.try.is-best{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.try.is-best .mono-label{color:var(--green)}
.try.is-current{border-color:var(--ink);border-style:dashed}
.try-bar{height:4px;border-radius:999px;background:var(--track);overflow:hidden}
.try-bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:inherit;transition:width .4s}
.try.is-best .try-bar i{background:var(--green)}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;min-width:0}
.stat-num{font-family:var(--mono);font-size:28px;font-weight:500;letter-spacing:-.03em;white-space:nowrap}
.stat-num small{font-size:13px;color:var(--muted);margin-left:2px}
.new{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:var(--green);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.08em;vertical-align:middle}

.grade{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--ink);color:#fff;border-radius:14px;animation:pop .4s ease;min-width:0}
.grade .mono-label{color:#a9a69e}
.grade-emoji{font-size:40px;line-height:1}
.grade-title{margin:4px 0 0;font-size:18px;font-weight:700}
.grade-desc{margin:2px 0 0;font-size:13px;color:#cfccc4}

.rules{grid-column:1 / -1;padding:14px 18px;background:var(--panel-soft);border:1px solid var(--line-3);border-radius:14px;font-size:13px;color:var(--ink-2)}
.rules summary{cursor:pointer;font-weight:500;color:var(--ink)}
.rules ul{margin:10px 0 0;padding-left:18px;line-height:1.8}
kbd{font-family:var(--mono);font-size:11px;padding:1px 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:#fff}

@media (max-width:820px){
  .board{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .main{padding:16px 16px 40px;gap:14px}
  .pad{height:clamp(300px,52vh,460px);border-radius:22px}
  .pad-sub{font-size:14px}
  .tries{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .try{padding:10px 6px 8px;border-radius:10px;align-items:center;text-align:center}
  .try .mono-label{font-size:9px;letter-spacing:.06em}
  .try-ms{font-size:14px}
  .try-bar{width:100%}
  .stats{gap:6px}
  .stat{padding:12px 10px}
  .stat .mono-label{font-size:9px;letter-spacing:.06em}
  .stat-num{font-size:18px}
  .stat-num small{font-size:10px}
  .new{display:block;margin:4px 0 0;width:max-content}
}
@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:#141318; --surface:#1a1920; --panel:#1f1e26; --panel-soft:#24232c;
    --ink:#ecebf0; --ink-hover:#ffffff; --ink-2:#c9c7d1; --sub:#a09eab; --muted:#8a8895;
    --line:#2e2d36; --line-2:#393843; --line-3:#26252d; --hover:#2a2932; --soft:#26252d; --track:#34333d;
  }
  :root[data-theme="dark"] .btn--solid,:root[data-theme="dark"] .tb-presets button[aria-pressed="true"]{color:var(--bg)}
  /* 원래 진한 패드(대기)·결과 카드 → 배경보다 한 톤 밝게 + 테두리 */
  :root[data-theme="dark"] .pad[data-state="idle"]{background:#26252e}
  :root[data-theme="dark"] .pad[data-state="idle"],:root[data-theme="dark"] .pad[data-state="done"]{box-shadow:inset 0 0 0 1px var(--line-2)}
  :root[data-theme="dark"] .pad[data-state="done"]{background:linear-gradient(135deg,#1f1e26,#2a2a60)}
  :root[data-theme="dark"] .grade{background:#26252e;box-shadow:inset 0 0 0 1px var(--line-2)}
  :root[data-theme="dark"] .try-ms{color:#6e6c79}
  :root[data-theme="dark"] .try.is-done .try-ms{color:var(--ink)}
  :root[data-theme="dark"] kbd{background:var(--panel)}
}