/* 제품 전용 추가 — 토큰 밖 리터럴 0(골격 §1). 목업 tokens.css 가 정의하지 않은 상호작용 상태만. */
.card.sel,.slot.sel{outline:calc(var(--s1)/2) solid var(--accent);outline-offset:calc(-1*var(--s1)/2)}
.card.hint,.slot.hint{outline:calc(var(--s1)/2) dashed var(--warn);outline-offset:calc(-1*var(--s1)/2)}
.pile{min-height:0}.pile:empty,.slot.empty-col{min-height:calc(var(--s6)*2)}
.card.drop,.slot.drop{background:var(--bg)}
/* 끌어서 이동(Pointer Events): 끌리는 원본은 자리를 지킨 채 숨고, 따라오는 것은 최상위 떠 있는 층이다. */
.tableau,.cells,.sol-top{touch-action:pan-y}.tableau .card,.cells .card,.sol-top .card,.tableau .slot,.cells .slot,.sol-top .slot{touch-action:none}
.card.dragging{visibility:hidden}
.drag-layer{position:fixed;z-index:9;pointer-events:none}
.drag-layer .card{box-shadow:var(--shadow-2)}
@media(prefers-reduced-motion:reduce){.drag-layer{transition:none!important}}
.board[data-paused]{position:relative}.board[data-paused] .zones,.board[data-paused] .tableau,.board[data-paused] .sol-top,.board[data-paused] .sudoku,.board[data-paused] .pad{visibility:hidden}
.pause-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pause-cover .button{min-width:calc(var(--s6)*4)}
.sudoku button.err{color:var(--bad)}.sudoku button.same{background:var(--bg)}
.sudoku button.sel.given{background:var(--accent);color:var(--accent-ink)}
.pad button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.actions .button[disabled]{opacity:.55;cursor:default}
dialog{border:calc(var(--s1)/4) solid var(--line);border-radius:var(--r2);background:var(--surface);color:var(--ink);padding:var(--s4);max-width:calc(var(--s6)*10);box-shadow:var(--shadow-2)}
dialog::backdrop{background:var(--ink);opacity:.4}
dialog label{display:block;font-size:var(--t2);color:var(--ink-2);margin-bottom:var(--s2)}
dialog input{font:inherit;font-size:var(--t3);width:100%;min-height:calc(var(--s6) + var(--s3));padding:var(--s2) var(--s3);border:calc(var(--s1)/4) solid var(--line);border-radius:var(--r1);background:var(--surface);color:var(--ink);font-variant-numeric:tabular-nums}
dialog .confirm-actions{margin-top:var(--s4)}
.record dl div{min-width:0}
.win-cards .card{cursor:default}
.game-menu summary::after{content:none}
/* 언어 메뉴 — 게임 메뉴와 **같은 문법**(details > summary + .menu-panel), 슬롯 자리·폭은 전 로케일 고정.
   폭을 글자 길이에 맡기면 언어마다 헤더의 다른 요소가 밀린다(원칙 1-1 "언어를 바꾸면 글자만 바뀐다"). */
.language{position:relative;width:calc(var(--s6)*2 + var(--s2))}
.language>summary{display:flex;align-items:center;justify-content:flex-end;gap:var(--s1);height:calc(var(--s6) + var(--s3));padding:0 var(--s2);border-radius:var(--r1);list-style:none;font-size:var(--t2);font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.language>summary::-webkit-details-marker{display:none}.language>summary::after{content:none}
.language[open]>summary{background:var(--bg)}
/* 관련 링크의 탭 면적은 **글자 길이와 무관하게** 44 이상이다 — 목업(일본어)에서는 이름이 길어 저절로 넘었고,
   한국어 「프리셀」·「스도쿠」에서 36px 로 내려앉았다(2026-09-17 브라우저 게이트 실측 20건). 최소 폭을 값으로 못 박는다. */
.related a{min-width:calc(var(--s6) + var(--s3));justify-content:center}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rule-body h4{font-size:var(--t2);color:var(--ink);margin:var(--s3) 0 var(--s1)}
.rule-body dl{margin:0}.rule-body dt{font-weight:700;color:var(--ink);margin-top:var(--s3)}.rule-body dd{margin:var(--s1) 0 0}
.legal p+p{margin-top:var(--s3)}.legal{max-width:calc(var(--s6)*22);font-size:var(--t2);color:var(--ink-2)}
/* 면책 1줄·책임 한계 절(standards 12-1 ⑦) — 값은 전부 토큰, 새 크기·새 색을 만들지 않는다(원칙 3·5). */
.disclaimer{margin-top:var(--s2);font-size:var(--t1);color:var(--ink-2)}
.policy-heading{margin:var(--s3) 0 var(--s1);font-size:var(--t2);color:var(--ink)}
.seg button{display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--s6) + var(--s3));padding:0 var(--s3);border:0;border-radius:calc(var(--r1) - var(--s1)/2);background:none;font-size:var(--t2);font-weight:600;color:var(--ink-2)}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.sol-top .stock{cursor:pointer}
.status{min-height:var(--s5);font-size:var(--t2);color:var(--ink-2);margin-top:var(--s2)}
.resume[hidden]{display:none}
/* Daniel 2026-09-17 제목 줄 정리: 브레드크럼 제거 후 제목 블록(h1+한 줄)과 상태 블록(시간·수·클리어율+일시정지)을
   세로 중심으로 맞추고, 데스크톱에서 상태 3항목을 한 줄로 편다(모바일은 목업 규칙 그대로). 값은 전부 토큰. */
.title-row{align-items:center}
.statwrap{align-items:center}
@media(min-width:601px){.stats{flex-direction:row;align-items:baseline;column-gap:var(--s4)}.stats strong{margin-left:var(--s1)}}