: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:#1c1c1a;
  --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:disabled{opacity:.4;cursor:default}
.btn:disabled:hover{background:transparent}
.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} }

/* ---------- 게임 공통 셸 ---------- */
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn--accent{background:var(--accent);color:#fff;border:none;font-weight:500}
.btn--accent:hover{background:var(--accent);filter:brightness(1.08)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.game{flex:1;display:flex;flex-wrap:wrap;align-items:stretch;min-height:0}
.stage{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 28px}
.side{flex:1 1 300px;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:28px}
.group{display:flex;flex-direction:column;gap:12px}
.group + .group{border-top:1px solid var(--line-3);padding-top:24px}
.rules{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-2);line-height:1.6;counter-reset:rule}
.rules li{display:flex;gap:10px}
.rules li::before{counter-increment:rule;content:counter(rule,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--accent);padding-top:3px;flex-shrink:0}
.keys{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--ink-2)}
.keys div{display:flex;justify-content:space-between;align-items:center;gap:12px}
.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)}
.best-card{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px;border-radius:12px;background:var(--panel-soft)}
.best-val{font-family:var(--mono);font-size:28px;font-weight:500;letter-spacing:-.02em}
.seg{display:flex;background:var(--soft);border-radius:999px;padding:3px;gap:2px}
.seg-btn{flex:1;height:30px;padding:0 10px;background:transparent;color:var(--sub);border:none;border-radius:999px;font-size:12px;cursor:pointer;white-space:nowrap}
.seg-btn.is-active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.link-btn{padding:0;background:none;border:none;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:640px){
  .stage{padding:24px 16px}
  .side{border-left:none;border-top:1px solid var(--line);padding:24px 16px 40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}


/* ---------- 스도쿠 (신문 퍼즐면 + 파란 잉크) ---------- */
:root{--accent:#2f5bea;--ink-blue:#2448c9;--paper:#fffdf8;--grid:#23262f;--peer:#eef2ff;--same:#cdd8ff;--sel:#2f5bea;--wrong:#e5484d}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage{background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(47,91,234,.035) 23px 24px),var(--bg)}
.paper{width:min(100%,500px);display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:6px;background:var(--paper);box-shadow:0 1px 0 var(--line),0 2px 0 #ece8dc,0 4px 0 var(--paper),0 5px 0 var(--line),0 26px 50px -30px rgba(35,38,47,.45)}
.paper-head{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between}
.paper-head .seg{flex:1 1 210px;max-width:260px}
.meta{display:flex;gap:14px}
.meta-item{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.meta-item .mono-label{font-size:9.5px}
.meta-item b{font-family:var(--mono);font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
#mistakeWrap b{color:var(--wrong)}

.board-wrap{position:relative}
.board{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;border:2.5px solid var(--grid);border-radius:4px;background:var(--grid);gap:1px;outline:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.board:focus-visible{box-shadow:0 0 0 3px rgba(47,91,234,.35)}
.cell{position:relative;display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;min-width:0;min-height:0;-webkit-tap-highlight-color:transparent}
.cell.bR{margin-right:1.5px}
.cell.bB{margin-bottom:1.5px}
.cell.is-peer{background:var(--peer)}
.cell.is-same{background:var(--same)}
.cell.has-note-same{background:#f4f6ff}
.cell.is-sel{background:var(--sel)}
.cell.is-sel .val{color:#fff !important}
.cell.is-sel .notes i{color:#dfe6ff}
.val{font-family:var(--mono);font-size:clamp(17px,5.4vw,26px);line-height:1;font-weight:500;color:var(--grid)}
.cell.is-given .val{font-weight:800}
.cell.is-user .val{color:var(--ink-blue);font-family:"IBM Plex Sans KR",var(--font);font-weight:500}
.cell.is-hint .val{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:#f5b500}
.cell.is-wrong .val{color:var(--wrong) !important}
.cell.is-wrong{background:#fff0f0}
.cell.is-wrong.is-sel{background:var(--wrong)}
.cell.is-user .val,.cell.is-given .val{animation:none}
.notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);pointer-events:none}
.notes i{font-style:normal;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:clamp(7.5px,2.1vw,10.5px);line-height:1;color:#6b6f80}
.notes i.hl{color:#fff;background:var(--accent);border-radius:3px}
.cell.is-sel .notes i.hl{background:#fff;color:var(--accent)}
.cell:not(:empty) .val:not(:empty) + .notes{display:none}
.board.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;background:rgba(255,253,248,.94);backdrop-filter:blur(6px);border-radius:4px}
.cover .mono-label{color:var(--accent);font-weight:700}
.cover strong{font-size:28px;letter-spacing:-.02em}
.cover p{margin:0;font-size:13px;color:var(--ink-2);word-break:keep-all}
.cover--win strong{font-family:var(--mono);font-size:40px;color:var(--ink-blue)}
.cover--win{animation:fade .3s}
@keyframes fade{from{opacity:0}}
.cover--busy{background:rgba(255,253,248,.85)}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--same);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tool{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:none;border-radius:12px;background:transparent;cursor:pointer;font-size:12px;color:var(--ink-2)}
.tool:hover{background:var(--hover)}
.tool:disabled{opacity:.35;cursor:default}
.tool:disabled:hover{background:transparent}
.tool-ico{font-size:20px;line-height:1;height:22px;color:var(--ink)}
.tool em{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:999px;background:var(--soft);color:var(--muted);margin-left:2px}
.tool.is-on{background:#eef2ff;color:var(--accent)}
.tool.is-on em{background:var(--accent);color:#fff}
.pad{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.num{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:58px;border:1px solid var(--line-2);border-radius:10px;background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .08s}
.num b{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink-blue);line-height:1}
.num small{font-family:var(--mono);font-size:9.5px;color:var(--muted);min-height:11px}
.num:hover{background:#f5f7ff;border-color:#c9d4ff}
.num:active{transform:scale(.94)}
.num.is-cur{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.num.is-done b{color:var(--line-2)}
.app[data-state="paused"] .num,.app[data-state="won"] .num{pointer-events:none;opacity:.5}

.switch{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-ui{position:relative;width:34px;height:20px;border-radius:999px;background:var(--line-2);flex-shrink:0;transition:background .15s}
.switch-ui::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.switch input:checked + .switch-ui{background:var(--accent)}
.switch input:checked + .switch-ui::after{transform:translateX(14px)}
.switch input:focus-visible + .switch-ui{outline:2px solid var(--accent);outline-offset:2px}
.records{display:flex;flex-direction:column;gap:6px}
.rec{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border-radius:10px;background:var(--panel-soft);font-size:12.5px;color:var(--ink-2)}
.rec.is-cur{background:#eef2ff}
.rec b{font-family:var(--mono);font-size:16px;color:var(--ink);margin-left:auto}
.rec em{font-style:normal;font-size:11px;color:var(--muted)}
.rec b + em{margin-left:0}
.rec span + em{margin-left:auto}
@media (max-width:640px){
  .stage{padding:14px 16px 24px}
  .paper{padding:10px;gap:12px}
  .pad{gap:4px}
  .num{height:52px;border-radius:8px}
  .num b{font-size:20px}
  .meta{gap:10px}
  .paper-head .seg{max-width:none}
}

/* 다크 모드 (인쇄는 라이트 그대로): 신문 지면 → 밤 지면, 파란 잉크는 밝게 */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#121318; --surface:#17181f; --panel:#1c1d25; --panel-soft:#21222b;
    --ink:#eaebf1; --ink-hover:#ffffff; --ink-2:#c6c8d3; --sub:#9da0ad; --muted:#888b98;
    --line:#2b2d37; --line-2:#363845; --line-3:#23252e; --hover:#272933; --soft:#23252e; --track:#32343f;
    --accent:#6f8dff; --ink-blue:#93a9ff; --paper:#1a1b23; --peer:#1f2438; --same:#2c3870; --sel:#3a63f0; --wrong:#ff6b70;
  }
  :root[data-theme="dark"] .btn--solid{color:var(--bg)}
  :root[data-theme="dark"] .btn--accent{background:#2f5bea}
  :root[data-theme="dark"] .seg-btn.is-active{background:var(--track);box-shadow:0 1px 3px rgba(0,0,0,.4)}
  :root[data-theme="dark"] .stage{background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(111,141,255,.04) 23px 24px),var(--bg)}
  :root[data-theme="dark"] .paper{box-shadow:0 0 0 1px var(--line),0 4px 0 var(--paper),0 5px 0 var(--line),0 26px 50px -30px rgba(0,0,0,.7)}
  :root[data-theme="dark"] .board{background:#5a5f73;border-color:#6a7086}
  :root[data-theme="dark"] .board:focus-visible{box-shadow:0 0 0 3px rgba(111,141,255,.45)}
  :root[data-theme="dark"] .cell{background:#16171e}
  :root[data-theme="dark"] .cell.is-peer{background:var(--peer)}
  :root[data-theme="dark"] .cell.is-same{background:var(--same)}
  :root[data-theme="dark"] .cell.has-note-same{background:#1b2033}
  :root[data-theme="dark"] .cell.is-sel{background:var(--sel)}
  :root[data-theme="dark"] .cell.is-wrong{background:#3a1d22}
  :root[data-theme="dark"] .cell.is-wrong.is-sel{background:#d63b41}
  :root[data-theme="dark"] .val{color:var(--ink)}
  :root[data-theme="dark"] .cell.is-user .val{color:var(--ink-blue)}
  :root[data-theme="dark"] .notes i{color:#9296a8}
  :root[data-theme="dark"] .notes i.hl{background:#3a63f0}
  :root[data-theme="dark"] .cell.is-sel .notes i.hl{background:#fff;color:#2f5bea}
  :root[data-theme="dark"] .cover{background:rgba(26,27,35,.94)}
  :root[data-theme="dark"] .cover--busy{background:rgba(26,27,35,.85)}
  :root[data-theme="dark"] .tool.is-on{background:rgba(111,141,255,.16)}
  :root[data-theme="dark"] .tool.is-on em{background:#3a63f0}
  :root[data-theme="dark"] .num{background:var(--panel)}
  :root[data-theme="dark"] .num:hover{background:#222842;border-color:#3d4c8c}
  :root[data-theme="dark"] .rec.is-cur{background:#1f2640}
}