: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:#ff2f7d;
  --rainbow:linear-gradient(90deg,#ff2f7d,#ff9a1f,#ffd400,#2fd27a,#2f8bff,#8b5cff);
  --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}
.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} }

/* ---------- 색감 테스트 ---------- */
.topbar{position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--rainbow)}
.main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:44px 28px 56px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:start}

.side{display:flex;flex-direction:column;gap:24px;position:sticky;top:24px}
.side-head{display:flex;flex-direction:column;gap:10px}
.title{margin:0;font-size:34px;line-height:1.2;font-weight:700;letter-spacing:-.03em}
.title-em{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}
.desc{margin:0;font-size:14px;line-height:1.65;color:var(--ink-2)}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.rules li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.rules li::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:3px;background:var(--accent);vertical-align:-1px}
.rules li:nth-child(2)::before{background:#2fd27a}
.rules li:nth-child(3)::before{background:#2f8bff}
.rules b{color:var(--ink)}
.best-card{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:16px;background:var(--ink);color:#fff}
.best-card .mono-label{color:#a9a69e}
.best-num{font-family:var(--mono);font-size:48px;font-weight:500;line-height:1.05;letter-spacing:-.04em}
.best-grade{font-size:13px;color:#d6d3cb}

.game{display:flex;flex-direction:column;gap:12px;width:100%;max-width:560px;justify-self:center}
.hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hud-item{display:flex;flex-direction:column;gap:4px;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.hud-item b{font-family:var(--mono);font-size:28px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.hud-time.is-low b{color:var(--accent);animation:blink .6s steps(2) infinite}
.hud-item b.bump{animation:bump .3s ease}
@keyframes bump{50%{transform:scale(1.25)}}
@keyframes blink{50%{opacity:.4}}
.timebar{height:8px;border-radius:999px;background:var(--track);overflow:hidden}
.timebar i{display:block;height:100%;width:100%;background:var(--rainbow);border-radius:inherit;transform-origin:left;transition:transform .1s linear}

.board-wrap{position:relative;width:100%;aspect-ratio:1}
.board{position:absolute;inset:0;display:grid;gap:var(--gap,8px);padding:var(--gap,8px);background:var(--panel);border:1px solid var(--line);border-radius:20px}
.board.is-wrong{animation:shake .35s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.tile{padding:0;border:none;border-radius:var(--r,12px);cursor:pointer;transition:transform .12s;animation:tileIn .3s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--d) * 8ms)}
.tile:hover{transform:scale(.95)}
.tile:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.tile.is-answer{position:relative;z-index:1;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--ink);animation:answer 1s ease infinite}
.board.is-over .tile:not(.is-answer){opacity:.55}
@keyframes tileIn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes answer{50%{transform:scale(1.08)}}

.overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:rgba(251,251,249,.94);backdrop-filter:blur(4px);border-radius:20px;border:1px solid var(--line);animation:fade .3s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.swatches{display:grid;grid-template-columns:repeat(2,40px);gap:6px;margin-bottom:8px}
.swatches i{width:40px;height:40px;border-radius:10px;background:#ff5d97}
.swatches i.odd{background:#ff7aa9;animation:answer 1.4s ease infinite}
.ov-title{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em}
.ov-desc{margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}
.start{margin-top:8px;height:50px;padding:0 32px;background:var(--accent);color:#fff;border:none;border-radius:999px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 0 #c2125a;transition:transform .08s,box-shadow .08s}
.start:hover{filter:brightness(1.05)}
.start:active{transform:translateY(4px);box-shadow:0 0 0 #c2125a}
.overlay--end{gap:8px}
.end-emoji{font-size:52px;line-height:1.1;animation:pop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.end-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:340px;margin-top:8px}
.end-stats div{display:flex;flex-direction:column;gap:2px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px}
.end-stats b{font-family:var(--mono);font-size:22px;font-weight:500}
.end-actions{display:flex;gap:8px;align-items:center}
.feedback{margin:0;min-height:20px;font-size:13px;color:var(--muted);text-align:center}

@media (max-width:900px){
  .main{grid-template-columns:minmax(0,1fr);gap:28px}
  .side{position:static;order:2}
  .game{order:1}
}
@media (max-width:640px){
  .main{padding:20px 16px 40px}
  .hud-item{padding:10px 12px}
  .hud-item b{font-size:22px}
  .title{font-size:28px}
  .ov-title{font-size:22px}
  .end-emoji{font-size:40px}
  .end-stats b{font-size:18px}
  .overlay{padding:16px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important}
}

/* 다크 모드 (인쇄는 라이트 그대로) — 판별하는 타일 색(JS 인라인 hsl)은 테마와 무관하게 그대로 */
@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"] .best-card{background:#26252e;box-shadow:inset 0 0 0 1px var(--line-2)}
  :root[data-theme="dark"] .overlay{background:rgba(26,25,32,.94)}
  :root[data-theme="dark"] .end-stats div{background:var(--panel)}
  :root[data-theme="dark"] .title-em{color:var(--ink);-webkit-text-fill-color:transparent}
  :root[data-theme="dark"] .tile.is-answer{box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--ink)}
}