/* 제품 전용 추가 — 토큰 밖 리터럴 0(골격 §1). 목업 tokens.css 가 정의하지 않은 상호작용 상태만. */
/* 한국어 조판: 낱말 중간에서 줄을 바꾸지 않는다(「계산하 / 기.」 — 페르소나 웨이브 R11 F7, ORCHE 09-29 결함 수리 분류). 제목(h1)만 keep-all 이던 것을 본문 전체로. 긴 무공백 문자열은 넘치지 않게 break-word. */
html:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
.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)}
/* 거절된 자리(UIUX 8-3(나)② — Q안): 힌트와 같은 점선 문법, 색만 --bad. 갈 수 있는 곳은 위 .hint 를 그대로 쓴다. */
.card.nope,.slot.nope{outline:calc(var(--s1)/2) dashed var(--bad);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}/* 멈춤 = 판 위 전부 가림(덮개만 남긴다). 게임별 클래스를 늘어놓던 목록은 뒤에 온 미로·麻雀를 빠뜨려 멈춤 중에도 문제가 보이고 입력칸에 초점이 갔다(페르소나 웨이브 R7 F8). */
.board[data-paused]>:not(.pause-cover){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);box-shadow:inset 0 0 0 calc(var(--s1)/2) var(--bad)}
/* 선택된 충돌 칸(astra C6 ④, 2026-09-25 열람 대행 C안): 강조 녹색 배경 위 빨강은 명암 1.03:1 — 글자와 안쪽 테두리를 accent-ink 로(6.83·9.97:1). 선택 중에도 충돌 모양 표식이 남는다. */
.sudoku button.sel.err{color:var(--accent-ink);box-shadow:inset 0 0 0 calc(var(--s1)/2) var(--accent-ink)}
/* 충돌 칸 = 색 + **칸 안쪽 테두리**(색 단독 신호 금지 — WCAG 1.4.1, 2026-09-25 ORCHE 열람 대행 C안). box-shadow 라 레이아웃 이동 0. */.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}
/* 다크에서는 --ink 가 밝은 글자색이라 대화상자 뒤가 연민트로 밝아졌다(페르소나 웨이브 R24 F8) — 어둡게 가리는 막은 두 테마 모두 어두운 쪽 토큰으로. 선택자는 tokens.css 테마 규칙과 같은 두 벌. */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) dialog::backdrop{background:var(--bg);opacity:.7}}
:root[data-theme=dark] dialog::backdrop{background:var(--bg);opacity:.7}
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))}
/* 아주 좁은 폭(≤350 — 320 폰·확대 리플로)에서는 머리의 고정 폭(로고 128·게임 128·언어 72 + 틈·여백)이 화면을 넘어 전 면이 옆으로 밀렸다
   (320 에서 문서 폭 333~340, 언어 메뉴를 열면 13px 밀린 채 남음 — 페르소나 웨이브 R27 F1·F2). 로고·게임 여닫이를 글자 폭으로 줄인다 — 360 이상은 무변. */
@media(max-width:350px){.logo{width:auto}.game-menu summary{width:auto;gap: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}
/* 제목 위계 수리(R13, 2026-09-25): 규칙 절 h3→h2·하위 h4→h3·기록 대화상자 h3→h2 — **모양은 그대로** 새 태그에 다시 입힌다.
   tokens.css(목업 파생)의 `.rule-body h3`·`.record h3`·전역 h2(line-height 1.4) 가 새 태그에 새지 않게 같은 값으로 덮는다. */
.rule-body h2{font-size:var(--t3);color:var(--ink);margin:var(--s4) 0 var(--s2);line-height:inherit}
.rule-body h2:first-child{margin-top:0}
.rule-body h3{font-size:var(--t2);color:var(--ink);margin:var(--s3) 0 var(--s1)}
.record h2{font-size:var(--t3);margin-bottom:var(--s3);line-height:inherit}
.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)}}
/* ── PS0920 수리(2026-09-21) ── 값은 전부 토큰, 새 크기·새 색 0(원칙 3·5) ── */
/* K 상단 줄: 「지금 이 판」(시간·이동 수·번호)과 「이 기기 누계」(승률)는 다른 종류의 수다 — 누계 쪽만 선으로 끊는다. */
.stats .total{border-left:calc(var(--s1)/4) solid var(--line);padding-left:var(--s3)}
@media(max-width:600px){.stats .total{padding-left:var(--s2)}}
/* P 다크 무늬색 안내는 다크일 때만 선다(라이트에서는 사실이 아니라 소음이다). 토큰 정의와 같은 셀렉터 3벌. */
.dark-note{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .dark-note{display:block}}
:root[data-theme=dark] .dark-note{display:block}
/* R 0수 되돌리기: disabled 인데 primary 초록이면 여전히 "제일 눌러야 할 버튼"으로 읽힌다 — 강조를 뗀다. */
.actions .button[disabled].primary{background:var(--surface);color:var(--ink-2);border-color:var(--line)}
/* B 기록 지우기 확인 패널 — 조작행의 패널 폭(s6*9 = 288)을 그대로 쓰면 기록 대화상자의 내용 폭(256)을 넘어
   상자 밖으로 샌다. 기록 블록(대화상자·승리 화면) 안에서만 폭을 상자에 맞춘다. */
.record .confirm-panel{width:calc(var(--s6)*8)}
.record .confirm-panel .button{margin-top:0}
/* C 조작행 붙박이(데스크톱 전용). 보드 높이는 **가로 폭만** 따르므로 세로 800 이하 노트북에서는 되돌리기·힌트가
   언제나 첫 화면 밖이었다(1280×720/800/900/1080 전부 actions bottom=932 고정 실측).
   ≤600 은 건드리지 않는다: 그 폭은 FIX-27 기하 계약이 이미 첫 화면 안을 보증하고, 거기서 붙박이로 만들면
   FIX-27 주입 시험(노출 44px 고정 → bottom>844)이 뷰포트 하단에 물려 **거짓 초록**이 된다. */
/* 폰(≤600): 「新しいゲーム」 확인은 조작행 **아래로** 연다 — 위로 열면 판을 덮어 아이의 다음 판 탭이 확인 버튼에 닿았다(페르소나 웨이브 R14 F7, 열람본 docs/yopumi-confirm-popover-20260930.pdf, ORCHE·Daniel 위임 GO 09-30).
   601 이상은 조작행이 화면 아래에 고정이라 아래로 열면 화면 밖 — 기존대로 위로(판이 넓어 덮는 면이 작다). */
@media(max-width:600px){main>.actions .confirm-panel{bottom:auto;top:calc(100% + var(--s2))}}
@media(min-width:601px){main>.actions{position:sticky;bottom:0;z-index:4;background:var(--bg);padding-top:var(--s2);padding-bottom:var(--s2)}
 /* 끝난 판(클리어 화면)·麻雀 채점 뒤에는 고정하지 않는다 — 고정줄이 클리어 화면 버튼·「記録を消す」·点数の内訳 을 덮었다(페르소나 웨이브 R15 F8·R17 F4·F6·F7, 열람본 docs/yopumi-sticky-bar-20260930.pdf, ORCHE 대행 심사 ⓑ만 09-30).
    진행 중에는 고정 유지 — 元に戻す·ヒント 가 늘 닿는 것이 판 끝 카드 가림보다 무겁다(알려진 한계: 진행 중 긴 열 끝 카드는 굴려서 본다, 드롭은 R15 수리로 착지). */
 main:has(.board.win)>.actions,main:has(.mj-result)>.actions{position:static}}
/* N CLS: 판은 JS 가 그린다 — 빈 채로 넘어간 첫 프레임에서 높이가 0 이라 조작행·푸터가 나중에 통째로 밀렸다(CLS 0.11~0.12).
   자리를 미리 잡아 둔다. 값은 면마다 실측한 종횡비(폭이 정해지면 판 높이가 정해진다)이고, 채워지면 :empty 가 풀린다. */
.board:empty{aspect-ratio:var(--board-ratio,1)}
body[data-game=freecell] .board:empty{--board-ratio:912/703}
body[data-game=klondike] .board:empty{--board-ratio:912/532}
body[data-game=nanpure] .board:empty{--board-ratio:912/684}
@media(max-width:600px){
 body[data-game=freecell] .board:empty{--board-ratio:366/461}
 body[data-game=klondike] .board:empty{--board-ratio:366/304}
 body[data-game=nanpure] .board:empty{--board-ratio:366/534}
}
/* 방침 개정일 — 본문보다 한 단 작고 흐리게(캡션 역할). 값은 토큰만. */
.policy-revised{margin-top:var(--s4);font-size:var(--t1);color:var(--ink-2)}
.policy-operator{margin-top:var(--s5);font-size:var(--t1);color:var(--ink-2)}
.policy-operator + .policy-revised{margin-top:var(--s1)}
/* 루트 언어 선택면(RW-A6) — 푸터의 3언어 방침 링크 한 묶음(로케일 면 푸터 링크와 같은 탭 높이) · 카드 안 게임명은 단어 중간에서 끊지 않는다. */
.footer-langs{display:flex;flex-wrap:wrap;column-gap:var(--s4)}
/* 로케일 면 푸터의 브랜드 글자 = 루트 링크 — 옆 방침 링크와 같은 모양·같은 탭 높이(2026-09-25). */
.footer-brand a{display:inline-flex;align-items:center;min-height:calc(var(--s6) + var(--s3));min-width:calc(var(--s6) + var(--s3));color:var(--ink-2)}
.footer-langs a{display:inline-flex;align-items:center;min-height:calc(var(--s6) + var(--s3));color:var(--ink-2)}
.nowrap{white-space:nowrap}
/* UIUX 1-1d(CJK 로케일 글꼴 선행, 2026-09-25): 전역 스택(tokens.css)은 일본어 글꼴(Hiragino·Yu Gothic)이 앞이다 — ja 면엔 맞지만 ko 면(과 루트의
   lang=ko 카드)은 한국어 글꼴이 먼저여야 한다(Windows 에선 Yu Gothic 이 Malgun Gothic 보다 먼저 잡혔다). 줄 수 재측정: ko 5면 × 390·1280 증가 0. */
:lang(ko){font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}
/* 미로(SB-0384, 2026-09-28 — 목업 ref/maze-mockup-20260928 ORCHE 열람 대행 통과). 판 = 엔진 1벌이 그린 SVG 하나.
   손가락으로 판 위를 그어 길을 따라가므로 판 위에서는 페이지 스크롤을 넘겨받지 않는다(touch-action) — 판 밖 여백·조작행에서는 그대로 굴러간다.
   높이 상한 62vh: 데스크톱에서 미로가 조작행을 첫 화면 밖으로 밀지 않게(목업 실측 1280×900 → 조작행 하단 900 이내). */
.maze{display:block;width:100%;height:auto;max-height:62vh;touch-action:none;-webkit-user-select:none;user-select:none}
/* 미로 판은 초점을 받는다(키보드 WASD 는 판 안에서만 — a11y 감사 0929 Y1). 초점 테두리는 버튼과 같은 값, 포인터로 누를 때는 안 보인다(:focus-visible). */
.maze:focus{outline:0}.maze:focus-visible{outline:calc(var(--s1)/2) solid var(--accent);outline-offset:var(--s1)}
.maze-walls{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:square}
.maze-answer{fill:none;stroke:var(--accent);stroke-opacity:.55;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.maze-start{fill:var(--ink-2)}
.maze-goal{fill:none;stroke:var(--accent);stroke-width:1.6}
.maze-you{fill:var(--accent)}
.hub-mini .maze-mini{width:calc(var(--s6) * 2);height:auto;fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-linecap:square}
/* N CLS 동형: 빈 판 자리 = 기본 크기(中 12×12) viewBox 비율 135/124 + 같은 높이 상한. */
body[data-game=maze] .board:empty{--board-ratio:135/124;max-height:62vh}
/* 인쇄 = 미로 1쪽 + 정답 1쪽(규칙 절 약속). 화면에서는 숨은 인쇄 전용 블록만 남기고 나머지를 뺀다. */
.maze-print{display:none}
@media print{
 body[data-game=maze] header,body[data-game=maze] main>:not(.maze-print){display:none}
 body[data-game=maze] .maze-print{display:block}
 .maze-print-page{break-inside:avoid}
 .maze-print-page+.maze-print-page{break-before:page}
 .maze-print .maze{max-height:none}
 .maze-print-title{margin:0 0 var(--s3);font-size:var(--t2);color:#000}
 .maze-print .maze-walls{stroke:#000}
 /* 종이는 흰 바탕 — 골격 토큰(목업 파생)의 print-color-adjust:exact 가 화면 바탕(연회색)을 A4 전면에 찍었다(페르소나 웨이브 R4 F7). */
 body[data-game=maze]{background:#fff}
}
/* 「ほかのゲーム」 줄(ORCHE 09-28 지적 ② — 미로 추가로 링크 4개가 되자 390 에서 마지막 하나만 다음 줄로 떨어졌다, ja 迷路·en Maze Generator 동일).
   좁은 화면에서는 라벨 한 줄 + 링크 2열 격자로 고르게 놓는다(목업 ref/related-row-mockup-20260928 B안). 넓은 화면은 한 줄 그대로. 링크·문구 무변(CSS 만).
   ORCHE 열람 판정(09-28) 부분 반려 반영: 격자는 **링크 4개 이상인 줄에만**. 링크 3개 이하 줄은 한 줄 그대로(격자면 2+1 로 나빠진다).
   09-29 麻雀 추가로 게임 면도 다른 게임 링크가 4개가 되어 격자 쪽이다(규칙은 그대로 — 면이 넘어왔다, astra 공용 검수 지적 반영). */
@media(max-width:600px){.related:has(> a:nth-of-type(4)){display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s4);row-gap:0}.related:has(> a:nth-of-type(4)) p{grid-column:1/-1}.related:has(> a:nth-of-type(4)) a{justify-content:flex-start}}
/* 麻雀点数計算練習(SB-0210, 2026-09-29 — 목업 ref/mahjong-mockup-20260929 ORCHE 열람 대행 조건부 통과). 牌 = mahjong-tiles.js 자체 SVG.
   牌는 실물처럼 상아색 면을 테마와 무관하게 유지한다(다크에서도 牌는 牌 — 글자·원·막대 색은 면 위 대비로 고정). */
.mj-situ{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;margin:0 0 var(--s3);font-size:var(--t2)}
.mj-situ span{white-space:nowrap}
.mj-hand,.mj-melds{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-end}
.mj-tile{display:block;height:auto}.mj-hand > .mj-tile{width:calc((100% - 13*2px - var(--s3)) / 14);min-width:22px}
.mj-win{display:inline-block;width:calc((100% - 13*2px - var(--s3)) / 14);min-width:22px;margin-left:var(--s3);outline:calc(var(--s1)/2) solid var(--accent);outline-offset:1px;border-radius:var(--r1)}
.mj-win .mj-tile{width:100%}
.mj-melds{margin-top:var(--s2);gap:var(--s3)}.mj-melds-label{font-size:var(--t1);color:var(--ink-2);align-self:center}
.mj-meld{display:flex;gap:2px}.mj-meld .mj-tile{width:calc(var(--s6) + var(--s1))}
@media(max-width:600px){.mj-hand > .mj-tile,.mj-win{width:calc((100% - 6*2px) / 7)}.mj-win{margin-left:0}.mj-meld .mj-tile{width:calc(var(--s5) + var(--s2))}}
.mj-small{width:22px;display:inline-block;vertical-align:middle}
.mj-face{fill:#fbf7ec;stroke:#8a8472;stroke-width:1}.mj-back .mj-face{fill:#2f6b4f}.mj-back :not(.mj-face){display:none}
.mj-b{fill:#1f5fa8}.mj-g{fill:#1e7a45}.mj-r{fill:#c0392b}.mj-hole{fill:#fbf7ec}
.mj-num{font:700 13px "Hiragino Mincho ProN","Yu Mincho",serif;text-anchor:middle;fill:#1b1b1b}
.mj-man{font:700 12px "Hiragino Mincho ProN","Yu Mincho",serif;text-anchor:middle;fill:#c0392b}
.mj-honor{font:700 19px "Hiragino Mincho ProN","Yu Mincho",serif;text-anchor:middle;fill:#1b1b1b}.mj-g-text{fill:#1e7a45}.mj-r-text{fill:#c0392b}
.mj-haku{fill:none;stroke:#1f5fa8;stroke-width:1.4}
.hub-mini .mj-tile{width:calc(var(--s5) + var(--s1))}
.mj-given{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);align-items:center;margin:var(--s3) 0 0;font-size:var(--t2)}.mj-given-h{color:var(--ink-2)}
.mj-chip{border:calc(var(--s1)/4) solid var(--line);border-radius:var(--r1);padding:0 var(--s2);background:var(--surface);white-space:nowrap}
.mj-answer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin-top:var(--s4)}
@media(max-width:600px){.mj-answer{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mj-field{display:flex;flex-direction:column;gap:var(--s1);min-width:0;font-size:var(--t1);color:var(--ink-2)}
.mj-field select,.mj-field input{font:inherit;font-size:var(--t3);min-height:calc(var(--s6) + var(--s3));padding:0 var(--s2);border:calc(var(--s1)/4) solid var(--line);border-radius:var(--r1);background:var(--surface);color:var(--ink);width:100%;min-width:0;box-sizing:border-box}
.mj-mark{font-weight:700}.mj-mark.ok{color:var(--good)}.mj-mark.ng{color:var(--bad)}.mj-right{margin-left:var(--s1);font-weight:700;color:var(--ink)}
.mj-result{margin-top:var(--s4)}.mj-result h2{font-size:var(--t3);margin:var(--s3) 0 var(--s2)}
/* 채점 뒤 초점이 내려앉는 자리(tabindex -1, 조작 요소 아님) — 초점을 옮겨도 화면 모양은 그대로(a11y 감사 0929 Y2). */
.mj-result h2:focus{outline:0}
.mj-lines{list-style:none;padding:0;margin:0 0 var(--s2)}.mj-lines li{display:flex;justify-content:space-between;gap:var(--s3);padding:2px 0;border-bottom:calc(var(--s1)/4) solid var(--line)}
.mj-calc{margin:var(--s1) 0;font-size:var(--t1);color:var(--ink-2)}
body[data-game=mahjong] .board:empty{--board-ratio:912/360}
@media(max-width:600px){body[data-game=mahjong] .board:empty{--board-ratio:366/420}}
/* 스도쿠 칸 초점 테두리는 칸 **안쪽**에 — 전역 값(바깥 4px)은 뒤 칸(오른쪽·아래)이 덮고 판 가장자리(overflow:hidden)가 잘라 테두리가 왼쪽 위로 밀려 보였다(페르소나 웨이브 R32 F7).
   초점 칸은 대개 선택 칸(초록 채움)이라 그 위에선 글자색(accent-ink) 테두리로. */
.sudoku button:focus-visible{outline-offset:calc(-1*var(--s1))}.sudoku button.sel:focus-visible{outline-color:var(--accent-ink)}
/* 숫자판 「消す」: 목업의 판은 1~9 만(9열) — 지우기가 10번째로 한 칸 폭 둘째 줄에 떨어져 글자가 칸 밖으로 넘쳤다(데스크톱, R32 F1).
   601px 이상은 7~9 아래 세 칸 폭(폰의 「줄 끝」 자리와 같은 쪽). 같은 줄 끝(10번째 열) 안은 숫자 버튼이 37~38px 로 줄어 조작 목표 44px 게이트 적색이라 기각(열람본 실측).
   둘째 줄은 1440×900 첫 화면에서 고정 조작줄에 18% 가린다 — 지금과 같다(R17 고정 조작줄 축, 굴리면 닿는다). 폰(5열 두 줄)은 무변. */
@media(min-width:601px){.pad [data-v="0"]{grid-column:7/span 3}}