/* =====================================================================
   games.css — 게임 · 퍼즐관(G). tokens.css · app.css · common.css 다음에 읽음
   값은 tokens 변수만. 전자칠판(1920)은 html[data-dev="board"] 로 저절로 커짐
   ===================================================================== */
.g-body { min-height: 100vh; background: var(--bg); }
.g-top { gap: var(--s4); }
.g-title { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.g-title h1 { font-size: var(--t-l); white-space: nowrap; }
.g-lvpick { display: flex; align-items: center; gap: var(--s2); }
.g-small { font-size: var(--t-s); color: var(--ink-2); }
.g-main0 { padding: var(--s5); }

/* ───── 목록 ───── */
.g-list { max-width: 1680px; margin: 0 auto; }
.g-note { padding: var(--s3) var(--s4); margin-bottom: var(--s4); border-radius: var(--r-m); background: var(--hint-bg); color: var(--hint); font-weight: 700; font-size: var(--t-s); }
.g-filters { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4); }
.g-frow { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.g-frow > b { width: 56px; font-size: var(--t-s); color: var(--ink-2); flex: none; }
.g-filter { display: flex; flex-wrap: wrap; gap: var(--s2); }
.g-count { font-size: var(--t-s); color: var(--ink-2); margin: 0 0 var(--s3); }
.g-cardlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--s4); }
.g-gc { display: flex; gap: var(--s4); padding: var(--s4); text-decoration: none; color: var(--ink); border-left: 6px solid var(--c); transition: transform var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease); }
.g-gc:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.g-gcpic { flex: none; width: 120px; height: 84px; border-radius: var(--r-m); background: var(--bg-2); display: grid; place-items: center; }
.g-thumb { width: 112px; height: 68px; }
.g-gcbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g-gcbody h3 { font-size: var(--t-m); }
.g-gcfacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--t-s); color: var(--ink-2); }
.g-gcfacts li { display: flex; gap: 6px; align-items: center; }
.g-gcst { display: flex; flex-wrap: wrap; gap: 4px; }

/* ───── 게임 판 + 오른쪽 줄 ───── */
.g-play { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s4); height: calc(100vh - 72px); padding: var(--s4); }
[data-dev="board"] .g-play { grid-template-columns: minmax(0, 1fr) 470px; gap: var(--s5); padding: var(--s5); }
.g-stage { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s5); overflow: auto; }
.g-rule { display: flex; gap: var(--s3); align-items: baseline; font-size: var(--t-s); color: var(--ink-2); }
.g-rule b { flex: none; padding: 2px 12px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-deep); }
.g-msg { min-height: calc(var(--t-m) * 1.8); display: flex; align-items: center; gap: var(--s2); font-size: var(--t-m); font-weight: 800; color: var(--ink); }
.g-msg .ico, .g-msg .g-star { width: calc(var(--icon) + 6px); height: calc(var(--icon) + 6px); flex: none; }
.g-msg.is-ok { color: var(--ok); } .g-msg.is-no { color: var(--no); } .g-msg.is-hint { color: var(--hint); }
.g-star path { fill: var(--spark); stroke: #8A5A00; stroke-width: 1.5; }
.g-board { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.g-board > div { flex: 1; display: flex; flex-direction: column; gap: var(--s4); align-items: center; }
.g-paused .g-board { pointer-events: none; }
.g-pause { position: absolute; left: 50%; top: var(--s4); transform: translateX(-50%); display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: var(--t-m); box-shadow: var(--sh-3); z-index: 5; }
.g-pause span { font-size: var(--t-s); color: #E7EAFB; }
.g-done .g-board { opacity: .96; }
.g-turn { align-self: stretch; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-m); color: var(--ink-2); }
.g-turn b { color: var(--ink); }
.g-tm { width: calc(var(--icon) + 4px); height: calc(var(--icon) + 4px); flex: none; fill: var(--tc); stroke: rgba(0,0,0,.35); stroke-width: 1.5; }
.g-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; justify-content: center; }

.g-rail { display: flex; flex-direction: column; gap: var(--s3); overflow: auto; }
.g-box { background: var(--card); border: var(--line-w) solid var(--line); border-radius: var(--r-l); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.g-h { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-s); color: var(--ink-2); font-weight: 800; }
.g-teams { display: flex; flex-direction: column; gap: var(--s2); }
.g-team { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-m); border: var(--line-w3) solid transparent; background: var(--bg); }
.g-team.now { border-color: var(--tc); background: var(--ts); }
.g-team.won { border-color: var(--ok-line); background: var(--ok-bg); }
.g-tn { font-size: var(--t-s); font-weight: 800; display: flex; flex-direction: column; line-height: 1.2; }
.g-tn small { font-size: var(--t-badge); color: var(--ink-2); font-weight: 700; }
.g-ts { font-size: var(--t-xl); font-weight: 900; min-width: 1.6em; text-align: right; }
.g-tpm { display: flex; gap: 4px; }
.g-pm { width: 40px; height: 40px; border-radius: var(--r-s); border: var(--line-w2) solid var(--line-2); background: var(--card); font: inherit; font-size: var(--t-s); font-weight: 800; cursor: pointer; color: var(--ink-2); }
[data-dev="board"] .g-pm { width: 56px; height: 56px; }
.g-modes { display: flex; flex-wrap: wrap; gap: var(--s2); }
.g-time { display: flex; align-items: center; gap: var(--s3); }
.g-range { flex: 1; accent-color: var(--brand); height: 36px; min-width: 120px; cursor: grab; }
[data-dev="board"] .g-range { height: 56px; }
.g-tleft { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-s); color: var(--ink-2); }
.g-tleft svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.g-tleft b { font-size: var(--t-l); color: var(--ink); }
.g-tbg { fill: none; stroke: var(--bg-2); stroke-width: 6; } .g-tfg { fill: none; stroke: var(--brand); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.g-tleft.low .g-tfg { stroke: var(--hint); } .g-tleft.low b { color: var(--hint); }
.g-saybox p { font-size: var(--t-s); font-weight: 600; color: var(--ink); }
.g-saybox .btn { align-self: flex-start; }
.g-teach { border-style: dashed; }
.g-tbtns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.g-tbtns .btn { padding: 0 var(--s3); }

/* ───── 공용: 카드 · 보기 · 칸 ───── */
.g-card { min-width: 84px; min-height: 112px; padding: var(--s2); border-radius: var(--r-m); border: var(--line-w3) solid var(--ink); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font: inherit; color: var(--ink); transition: transform var(--m-fast) var(--ease); }
.g-card b { font-size: var(--t-2xl); line-height: 1; }
.g-card svg { width: 60px; height: 24px; } .g-card svg circle { fill: var(--k-tomato); }
.g-card:disabled { opacity: .55; cursor: default; }
.g-card.sel, .g-card:not(:disabled):hover { transform: translateY(-6px); border-color: var(--brand); box-shadow: var(--sh-2); }
.g-card.big { min-width: 120px; min-height: 150px; }
.is-hint { outline: var(--line-w3) dashed var(--hint) !important; outline-offset: 4px; animation: g-glow 1.6s var(--ease) infinite; }
@keyframes g-glow { 50% { outline-color: var(--spark); } }
.g-choices { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s4); width: min(100%, 1100px); }
.g-ch { min-height: 96px; padding: var(--s3); border-radius: var(--r-l); border: var(--line-w3) solid var(--line-2); background: #fff; font: inherit; font-size: var(--t-xl); font-weight: 800; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--s2); }
.g-ch:hover { border-color: var(--brand); }
.g-ch.is-ok { border-color: var(--ok-line); background: var(--ok-bg); }
.g-ch.is-no { border-color: var(--no-line); background: var(--no-bg); }
.g-ch:disabled { opacity: .45; }
.g-ch svg { width: 120px; height: 120px; }
.g-ch .g-chface { width: 72px; height: 72px; }
.g-q { font-size: var(--t-l); font-weight: 800; text-align: center; max-width: 1100px; }
.g-qfig { display: flex; justify-content: center; max-width: 100%; }
.g-qfig.wide { width: min(100%, 1100px); }
.g-cfig { width: min(100%, 680px); height: auto; }
.g-qfig.wide .g-cfig { width: 100%; }
.g-cl { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.g-flash { transition: opacity var(--m-mid) var(--ease); }
.g-flash.g-hidden circle { opacity: 0; transition: opacity var(--m-slow) var(--ease); }
.g-pline { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; justify-content: center; }
.g-pt { width: 76px; height: 76px; }
.g-pn { min-width: 88px; height: 88px; padding: 0 var(--s3); display: inline-grid; place-items: center; border-radius: var(--r-m); background: var(--card); border: var(--line-w3) solid var(--line-2); font-size: var(--t-xl); font-weight: 900; }
.g-pn.q { border-style: dashed; border-color: var(--brand); color: var(--brand); font-weight: 900; }

/* 칭찬 · 다시 — 부드럽게 한 번 */
.g-pop { animation: g-pop var(--m-slow) var(--ease); }
@keyframes g-pop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
.g-again { animation: g-again 420ms var(--ease); }
@keyframes g-again { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ───── 돌 가져가기 ───── */
.g-stones { width: min(100%, 900px); height: auto; }
.g-stone .st { fill: #9AA3BF; stroke: var(--ink); stroke-width: 4; } .g-stone .sh { fill: rgba(21,33,59,.15); } .g-stone .hl { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; opacity: .7; }
.g-stone.gone { opacity: .12; transition: opacity var(--m-slow) var(--ease); }
.g-take { min-width: 200px; }

/* ───── 상자 닫기 ───── */
.g-dsvg { width: min(100%, 900px); height: auto; max-height: 64vh; }
.g-edge .hit { fill: transparent; cursor: pointer; }
.g-edge line { stroke: var(--line); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 2 16; }
.g-edge:hover line { stroke: var(--brand); stroke-dasharray: none; opacity: .5; }
.g-edge.on line { stroke-width: 14; stroke-dasharray: none; opacity: 1; }
.g-edge.on .hit { cursor: default; }
.g-edge.hint line { stroke: var(--hint); stroke-dasharray: none; opacity: 1; animation: g-blink 1s infinite; }
@keyframes g-blink { 50% { opacity: .35; } }
.g-dot { fill: var(--ink); }
.g-bmark { fill: var(--tc); opacity: .9; }

/* ───── 합 만들기 ───── */
.g-sumtop { display: flex; gap: var(--s5); align-items: stretch; justify-content: center; flex-wrap: wrap; }
.g-sumtop > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s3) var(--s5); border-radius: var(--r-l); background: var(--bg); min-width: 180px; }
.g-sumtop span { font-size: var(--t-s); color: var(--ink-2); font-weight: 700; }
.g-sumtop b { font-size: var(--t-3xl); line-height: 1; font-weight: 900; }
.g-target { background: var(--spark-soft) !important; }
.g-pcards { display: flex; gap: 6px; align-items: center; font-size: var(--t-m); } .g-pcards i { font-style: normal; font-weight: 800; } .g-pcards em { font-style: normal; color: var(--ink-2); }
.g-hands { display: flex; flex-direction: column; gap: var(--s3); width: 100%; }
.g-hand { display: flex; align-items: center; gap: var(--s4); padding: var(--s3); border-radius: var(--r-l); border: var(--line-w3) solid transparent; }
.g-hand.now { border-color: var(--tc); background: var(--card); box-shadow: var(--sh-2); }
.g-hname { display: flex; align-items: center; gap: var(--s2); min-width: 180px; font-size: var(--t-s); font-weight: 800; }
.g-hcards { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ───── 짝 맞추기 ───── */
.g-cards { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 150px)); gap: var(--s3); justify-content: center; }
.g-mc { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-l); border: var(--line-w3) solid var(--brand-deep); background: var(--brand); cursor: pointer; padding: 0; display: grid; place-items: center; transition: transform var(--m-mid) var(--ease); }
.g-mc.up { background: #fff; border-color: var(--ink); }
.g-mc.gone { background: var(--bg-2); border-color: var(--tc); cursor: default; }
.g-mc.gone .g-face { opacity: .55; }
.g-back svg { width: 70%; } .g-face { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.g-face svg { width: 84px; height: 84px; } .g-face b { font-size: var(--t-2xl); color: var(--ink); line-height: 1; }
.g-face svg .f { fill: var(--k-tomato); } .g-face svg .e { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.g-face svg[viewBox="0 0 60 26"] { height: 30px; }
.g-mcm { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; fill: var(--tc); }

/* ───── 하노이 ───── */
.g-hsvg { width: min(100%, 1100px); height: auto; max-height: 62vh; }
.g-hbase { fill: var(--ink-2); } .g-peg .pole { fill: var(--line-2); } .g-peg .hit { fill: transparent; cursor: pointer; }
.g-peg.sel .pole { fill: var(--brand); } .g-peg .disk { stroke: var(--ink); stroke-width: 4; transition: y var(--m-mid) var(--ease); }
.g-peg .lab { font-size: 30px; font-weight: 800; fill: var(--ink-2); text-anchor: middle; }
.g-peg.is-hint .pole { fill: var(--hint); }

/* ───── 마방진 · 스도쿠 · 팔레트 ───── */
.g-mwrap { display: flex; gap: var(--s3); align-items: center; }
.g-mgrid { display: grid; grid-template-columns: repeat(3, 120px); grid-template-rows: repeat(3, 120px); gap: 6px; }
[data-dev="board"] .g-mgrid { grid-template-columns: repeat(3, 150px); grid-template-rows: repeat(3, 150px); }
.g-mcell, .g-scell { border: var(--line-w3) solid var(--ink); border-radius: var(--r-m); background: #fff; font: inherit; cursor: pointer; display: grid; place-items: center; padding: 0; }
.g-mcell b { font-size: var(--t-2xl); font-weight: 900; }
.g-mcell.given, .g-scell.given { background: var(--bg-2); cursor: default; }
.g-msums, .g-msums2 { display: flex; gap: 6px; font-size: var(--t-m); font-weight: 800; color: var(--ink-2); }
.g-msums { flex-direction: column; gap: 6px; } .g-msums span { height: 120px; display: grid; place-items: center; } [data-dev="board"] .g-msums span { height: 150px; }
.g-msums2 span { width: 126px; text-align: center; } [data-dev="board"] .g-msums2 span { width: 156px; }
.g-msums .ok, .g-msums2 .ok { color: var(--ok); }
.g-pal { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; }
.g-pv { width: 76px; height: 76px; border-radius: var(--r-m); border: var(--line-w3) solid var(--line-2); background: #fff; cursor: pointer; font: inherit; display: grid; place-items: center; padding: 6px; }
[data-dev="board"] .g-pv { width: 92px; height: 92px; }
.g-pv b { font-size: var(--t-xl); font-weight: 900; } .g-pv svg { width: 100%; height: 100%; }
.g-pv.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 4px var(--brand-soft); }
.g-pv:disabled { opacity: .3; }
.g-sgrid { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(62vh, 640px); aspect-ratio: 1; gap: 0; border: 5px solid var(--ink); border-radius: var(--r-m); overflow: hidden; }
.g-scell { border-radius: 0; border: 1px solid var(--line-2); padding: 12%; }
.g-scell svg { width: 100%; height: 100%; }
.g-scell.br { border-right: 5px solid var(--ink); } .g-scell.bb { border-bottom: 5px solid var(--ink); }

/* ───── 칠교 ───── */
.g-tsvg { width: 100%; height: auto; max-height: 62vh; touch-action: none; }
.g-tray { fill: var(--bg); stroke: var(--line-2); stroke-width: 3; stroke-dasharray: 10 8; }
.g-shadow { fill: #3A3A3A; stroke: #3A3A3A; stroke-width: 2; }
.g-shadow.lines { stroke: #8A8A8A; stroke-width: 3; }
.g-shadow.is-hint { fill: #6E4A00; animation: g-blink 1.1s infinite; outline: none; }
.g-piece polygon { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; cursor: grab; }
.g-piece .pat { pointer-events: none; stroke: none; }
.g-piece.sel polygon:first-child { stroke: var(--spark); stroke-width: 7; }
.g-piece.set polygon { cursor: default; }

/* ───── 땅따먹기 ───── */
.g-pwrap { display: flex; gap: var(--s5); align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.g-pgrid { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(60vh, 620px); aspect-ratio: 1; gap: 4px; }
.g-pc { border-radius: 8px; border: 2px solid var(--line-2); background: #fff; cursor: pointer; padding: 0; display: grid; place-items: center; }
.g-pc.on { background: var(--ts); border-color: var(--tc); }
.g-pc.prev { background: var(--bg-2); border-color: var(--tc); border-style: dashed; }
.g-pcm { width: 55%; height: 55%; fill: var(--tc); }
.g-pside { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; max-width: 360px; }
.g-pset { display: flex; flex-wrap: wrap; gap: var(--s2); }
.g-pp { width: 92px; height: 92px; border-radius: var(--r-m); border: var(--line-w3) solid var(--line-2); background: #fff; cursor: pointer; padding: 10px; display: grid; place-items: center; }
.g-pp svg { max-width: 100%; max-height: 100%; } .g-pp rect { fill: var(--tc); stroke: var(--ink); stroke-width: 1.5; }
.g-pp.on { border-color: var(--brand); background: var(--brand-soft); }

/* ───── 성냥개비 ───── */
.g-msvg { width: min(100%, 1200px); height: auto; }
.g-stick .hit { stroke: transparent; stroke-width: 44; cursor: pointer; }
.g-stick .wood { stroke-width: 15; stroke-linecap: round; }
.g-stick.on .wood { stroke: #D9A066; } .g-stick.off .wood { stroke: var(--line); stroke-dasharray: 4 12; stroke-width: 9; }
.g-stick .head { fill: var(--k-tomato); stroke: var(--k-tomato-deep); stroke-width: 2; }
.g-stick.held .wood { stroke: var(--brand); stroke-dasharray: 4 10; stroke-width: 12; }
.g-stick.is-hint .wood { stroke: var(--hint); stroke-dasharray: none; animation: g-blink 1s infinite; }
.g-stick.is-hint { outline: none; animation: none; }
.g-eqs line { stroke: var(--ink); stroke-width: 12; stroke-linecap: round; }

/* ───── 미로 ───── */
.g-mzwrap { display: flex; gap: var(--s5); align-items: center; justify-content: center; width: 100%; }
.g-mzsvg { width: min(100%, 1000px); height: auto; max-height: 62vh; }
.g-mzbg { fill: #fff; }
.g-mzc { fill: transparent; } .g-mzc.can { fill: var(--go-glow); opacity: .35; cursor: pointer; animation: g-blink 1.4s infinite; }
.g-wall { stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }
.g-mzpath { fill: none; stroke: var(--hint); stroke-width: 10; stroke-dasharray: 4 14; stroke-linecap: round; }
.g-flag path:first-child { stroke: var(--ink); stroke-width: 5; } .g-flag .cloth { fill: var(--k-tomato); stroke: var(--ink); stroke-width: 3; }
.g-token circle { fill: #fff; stroke: var(--tc); stroke-width: 8; } .g-token .tm { fill: var(--tc); }
.g-token.now circle { stroke-width: 12; }
.g-mzside { display: flex; flex-direction: column; gap: var(--s3); align-items: center; max-width: 280px; text-align: center; }
.g-die { width: 120px; height: 120px; } .g-die rect { fill: #fff; stroke: var(--ink); stroke-width: 5; } .g-die circle { fill: var(--ink); }

/* ───── 한붓그리기 ───── */
.g-esvg { width: min(100%, 60vh); height: auto; }
.g-el { stroke: var(--line-2); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 2 18; }
.g-el.on { stroke: var(--brand); stroke-dasharray: none; stroke-width: 14; }
.g-epath { fill: none; stroke: var(--hint); stroke-width: 6; stroke-dasharray: 8 10; }
.g-ev .hit { fill: transparent; cursor: pointer; } .g-ev .dot { fill: #fff; stroke: var(--ink); stroke-width: 6; }
.g-ev.at .dot { fill: var(--spark); } .g-ev.is-hint .dot { fill: var(--hint); }
.g-ev.is-hint { outline: none; }

/* ───── 도형 · 패턴 ───── */
.g-cfig text { font-family: var(--font); }

/* ───── 수 맞히기 ───── */
.g-udtop { display: flex; gap: var(--s5); align-items: center; justify-content: center; flex-wrap: wrap; }
.g-udbox { display: flex; flex-direction: column; align-items: center; padding: var(--s3) var(--s6); border-radius: var(--r-l); background: var(--spark-soft); }
.g-udbox span { font-size: var(--t-s); color: var(--ink-2); font-weight: 700; } .g-udbox b { font-size: var(--t-3xl); line-height: 1.1; font-weight: 900; }
.g-udsay { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xl); font-weight: 900; color: var(--ink-2); }
.g-udsay svg { width: 64px; height: 64px; fill: currentColor; }
.g-udsay.up { color: var(--ok); } .g-udsay.down { color: var(--no); } .g-udsay.hit { color: var(--ok); }
.g-udrng { font-size: var(--t-m); color: var(--ink-2); }
.g-udgrid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; width: min(100%, 1100px); }
.g-udn { min-height: 56px; border-radius: var(--r-s); border: var(--line-w2) solid var(--line-2); background: #fff; font: inherit; font-size: var(--t-m); font-weight: 800; color: var(--ink); cursor: pointer; }
[data-dev="board"] .g-udn { min-height: 72px; }
.g-udn.out { background: var(--bg-2); color: var(--ink-3); border-color: transparent; cursor: default; }

/* ───── 저울 ───── */
.g-info { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; justify-content: center; padding: var(--s2) var(--s4); background: var(--bg); border-radius: var(--r-l); }
.g-eq { font-size: var(--t-xl); font-weight: 900; }
.g-ball { width: 64px; height: 64px; }
.g-bal { position: relative; width: min(100%, 900px); }
.g-balsvg { width: 100%; height: auto; }
.g-balsvg .post { fill: var(--ink-2); } .g-balsvg .beam { fill: var(--ink); } .g-balsvg .rope { stroke: var(--ink-2); stroke-width: 3; } .g-balsvg .pan { fill: var(--k-aqua-soft); stroke: var(--k-aqua-deep); stroke-width: 4; } .g-balsvg .pin { fill: var(--spark); }
.g-balsvg g { transition: transform var(--m-slow) var(--ease); }
.g-panl, .g-panr { position: absolute; top: 24%; width: 30%; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: flex-end; min-height: 90px; transition: transform var(--m-slow) var(--ease); }
.g-panl { left: 13%; } .g-panr { right: 13%; }
.g-tiltword { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); font-size: var(--t-m); font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.g-wt { width: var(--w); height: var(--w); min-width: 56px; min-height: 56px; border-radius: 12px 12px 8px 8px; border: var(--line-w3) solid var(--ink); background: linear-gradient(#B9C0D0, #8D96AE); cursor: pointer; display: grid; place-items: center; padding: 0; font: inherit; }
.g-wt b { font-size: var(--t-m); color: #fff; font-weight: 900; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.g-wt:disabled { cursor: default; opacity: 1; }
.g-bag { position: relative; width: 84px; height: 84px; display: grid; place-items: center; } .g-bag svg { position: absolute; inset: 0; } .g-bag b { position: relative; top: 10px; font-size: var(--t-m); font-weight: 900; color: var(--k-tomato-deep); }

/* ───── 시계 ───── */
.g-cwrap { display: flex; gap: var(--s6); align-items: center; justify-content: center; flex-wrap: wrap; }
.g-cq { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; font-size: var(--t-m); max-width: 380px; }
.g-cq > b { font-size: var(--t-2xl); font-weight: 900; color: var(--brand-deep); }
.g-csvg { width: min(56vh, 560px); height: auto; touch-action: none; }
.g-csvg .rim { fill: #fff; stroke: var(--ink); stroke-width: 10; }
.g-csvg .tk1 { stroke: var(--ink-3); stroke-width: 3; } .g-csvg .tk5 { stroke: var(--ink); stroke-width: 6; }
.g-csvg .hn { font-size: 46px; font-weight: 800; text-anchor: middle; fill: var(--ink); font-family: var(--font); }
.g-csvg .hh { stroke: var(--k-tomato); stroke-width: 18; stroke-linecap: round; } .g-csvg .mh { stroke: var(--k-blue); stroke-width: 11; stroke-linecap: round; }
.g-csvg .grab { fill: transparent; cursor: grab; } .g-csvg .pin { fill: var(--ink); }

/* ───── 가게 ───── */
.g-shtop { display: flex; gap: var(--s5); align-items: stretch; justify-content: center; flex-wrap: wrap; width: 100%; }
.g-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s3) var(--s5); background: var(--spark-soft); border-radius: var(--r-l); min-width: 220px; }
.g-item svg { width: 120px; height: 120px; } .g-item > b { font-size: var(--t-l); }
.g-price { font-size: var(--t-m); font-weight: 800; } .g-price b { font-size: var(--t-2xl); font-weight: 900; }
.g-tray { flex: 1; max-width: 760px; min-height: 200px; border: var(--line-w3) dashed var(--line-2); border-radius: var(--r-l); padding: var(--s3); background: var(--card); }
.g-coins { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.g-coin { border: 0; background: transparent; cursor: pointer; padding: 2px; display: flex; flex-direction: column; align-items: center; font: inherit; font-size: var(--t-s); font-weight: 800; color: var(--ink-2); }
.g-wallet .g-coin { min-width: 96px; }

/* ───── 규칙 상자 · 탐정 · 돌리기 ───── */
.g-machine { display: flex; flex-direction: column; gap: var(--s2); }
.g-mrow { display: flex; align-items: center; gap: var(--s3); }
.g-mbox { width: 150px; height: 76px; } .g-mbox rect { fill: var(--k-grape); stroke: var(--k-grape-deep); stroke-width: 4; } .g-mbox path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; } .g-mbox circle { fill: #fff; } .g-mbox path:last-child { stroke: #fff; }
.g-liars { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; width: 100%; }
.g-liar { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 260px; }
.g-liar svg { width: 96px; height: 96px; } .g-liar > b { font-size: var(--t-m); }
.g-bubble { position: relative; padding: var(--s2) var(--s4); background: #fff; border: var(--line-w3) solid var(--ink); border-radius: var(--r-l); font-size: var(--t-m); font-weight: 700; text-align: center; }
.g-tfig { display: flex; align-items: center; gap: var(--s4); }
.g-tgrid3 { width: 150px; height: 150px; } .g-tgrid3 .e { fill: #fff; stroke: var(--line-2); stroke-width: 2; } .g-tgrid3 .f { fill: var(--k-blue); stroke: var(--ink); stroke-width: 3; } .g-tgrid3 .mk { fill: var(--k-sun); stroke: var(--ink); stroke-width: 3; }
.g-arrow { width: 80px; } .g-arrow path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

/* ───── 달리기 ───── */
.g-speed { display: grid !important; grid-template-columns: repeat(var(--lanes), minmax(0, 1fr)); gap: var(--s4); align-items: stretch !important; }
.g-lane { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); border-radius: var(--r-l); border: var(--line-w3) solid var(--tc); background: var(--ts); }
.g-lhead { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-m); font-weight: 800; }
.g-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.g-tc { aspect-ratio: 1; border-radius: 8px; background: #fff; display: grid; place-items: center; border: 2px solid var(--line); }
.g-tc.goal { border-color: var(--ink); } .g-tc svg { width: 70%; height: 70%; }
.g-runner { fill: var(--tc); stroke: var(--ink); stroke-width: 1.5; }
.g-lq { font-size: var(--t-2xl); font-weight: 900; text-align: center; background: #fff; border-radius: var(--r-m); padding: var(--s2); }
.g-lch { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.g-lch .g-ch { min-height: 88px; font-size: var(--t-xl); }

/* ───── 사다리 · 돌림판 · 점수판 ───── */
.g-lsvg { width: 100%; height: auto; max-height: 52vh; }
.g-lv { stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }
.g-lp { fill: none; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.g-ltop { min-width: 120px; justify-content: center; border-color: var(--tc); }
.g-lbot { min-width: 120px; padding: var(--s2) var(--s3); border-radius: var(--r-m); border: var(--line-w3) solid var(--tc); background: #fff; font-size: var(--t-s); font-weight: 800; display: flex; flex-direction: column; align-items: center; }
.g-lbot small { font-size: var(--t-badge); color: var(--ink-2); }
.g-wwrap { display: flex; gap: var(--s6); align-items: center; justify-content: center; flex-wrap: wrap; }
.g-wsvg { width: min(64vh, 640px); height: auto; }
.g-wsvg .wt { font-size: 28px; font-weight: 800; fill: #fff; text-anchor: middle; font-family: var(--font); } .g-wsvg .wt.dark { fill: var(--ink); }
.g-wside { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }
.g-wres { font-size: var(--t-3xl); font-weight: 900; color: var(--brand-deep); min-height: 1.2em; }
.g-sbgrid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--s4); width: 100%; }
.g-sbt { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border-radius: var(--r-xl); border: var(--line-w3) solid var(--tc); background: var(--ts); }
.g-sbn { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-l); font-weight: 900; }
.g-sbbig { border: 0; border-radius: var(--r-l); background: #fff; cursor: pointer; padding: var(--s4); display: flex; flex-direction: column; align-items: center; font: inherit; }
.g-sbbig b { font-size: var(--t-3xl); font-weight: 900; line-height: 1; color: var(--ink); } .g-sbbig span { font-size: var(--t-s); color: var(--ink-2); }
.g-sbbar { height: 14px; border-radius: 99px; background: #fff; overflow: hidden; } .g-sbbar i { display: block; height: 100%; background: var(--tc); transition: width var(--m-slow) var(--ease); }

/* ───── 빙고 ───── */
.g-bwrap { display: flex; gap: var(--s6); align-items: center; justify-content: center; flex-wrap: wrap; }
.g-bq { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s4) var(--s5); border-radius: var(--r-l); background: var(--spark-soft); min-width: 260px; }
.g-bq > span:first-child { font-size: var(--t-s); color: var(--ink-2); font-weight: 700; } .g-bq b { font-size: var(--t-2xl); font-weight: 900; }
.g-bgrid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; width: min(58vh, 600px); aspect-ratio: 1; }
.g-bc { position: relative; border-radius: var(--r-m); border: var(--line-w3) solid var(--ink); background: #fff; cursor: pointer; font: inherit; display: grid; place-items: center; }
.g-bc b { font-size: var(--t-2xl); font-weight: 900; } .g-bc.on { background: var(--ts); border-color: var(--tc); }
.g-bcm { position: absolute; right: 8px; top: 8px; width: 30%; height: 30%; fill: var(--tc); }

/* ───── 10칸 ───── */
.g-tenwrap { display: flex; gap: var(--s5); align-items: center; justify-content: center; width: 100%; flex-wrap: wrap; }
.g-frames { display: flex; flex-direction: column; gap: var(--s3); flex: 1; max-width: 900px; }
.g-tf { padding: var(--s3); border-radius: var(--r-l); border: var(--line-w3) solid transparent; background: var(--card); }
.g-tf.now { border-color: var(--tc); background: var(--ts); }
.g-tfn { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-s); font-weight: 800; margin-bottom: var(--s2); }
.g-tgrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.g-tgrid span { aspect-ratio: 1; border-radius: 8px; border: var(--line-w3) solid var(--line-2); background: #fff; }
.g-tgrid span:nth-child(5) { margin-right: 10px; }
.g-tgrid span.on { background: var(--tc); border-color: var(--ink); }

/* ───── 바구니 · 두 원 ───── */
.g-swrap { display: flex; gap: var(--s6); align-items: center; justify-content: center; }
.g-block { width: 160px; height: 160px; border-radius: var(--r-xl); border: var(--line-w3) dashed var(--line-2); background: #fff; cursor: pointer; padding: 0; }
.g-block svg { width: 100%; height: 100%; } .g-block.sel { border-color: var(--brand); border-style: solid; }
.g-keycard { display: flex; flex-direction: column; align-items: center; padding: var(--s3) var(--s5); border-radius: var(--r-l); background: var(--ink); color: #fff; }
.g-keycard span { font-size: var(--t-s); color: #E7EAFB; } .g-keycard b { font-size: var(--t-2xl); font-weight: 900; }
.g-baskets { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; }
.g-basket { width: 240px; padding: var(--s3); border-radius: var(--r-l); border: var(--line-w3) solid var(--line-2); background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; }
.g-basket svg { width: 100%; height: auto; } .g-basket .bk { fill: #FFE6DE; stroke: #A93718; stroke-width: 4; } .g-basket .rim { stroke: #A93718; stroke-width: 8; stroke-linecap: round; }
.g-basket b { font-size: var(--t-m); }
.g-basket:hover { border-color: var(--brand); }
.g-vwrap { display: flex; gap: var(--s5); align-items: center; justify-content: center; width: 100%; }
.g-vnum { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; background: var(--spark-soft); border: var(--line-w3) solid #8A5A00; font-size: var(--t-3xl); font-weight: 900; flex: none; }
.g-vsvg { width: min(100%, 900px); height: auto; }
.g-vbox { fill: var(--bg); stroke: var(--ink-2); stroke-width: 4; cursor: pointer; }
.g-vc { stroke-width: 6; cursor: pointer; } .g-vc.a { fill: rgba(47,98,224,.14); stroke: var(--k-blue); } .g-vc.b { fill: rgba(224,80,44,.14); stroke: var(--k-tomato); }
.g-vmid { fill: rgba(122,80,222,.22); stroke: none; cursor: pointer; }
.g-vsvg .vl { font-size: 34px; font-weight: 800; fill: var(--ink); text-anchor: middle; font-family: var(--font); } .g-vsvg .vs { font-size: 28px; font-weight: 700; fill: var(--ink-2); font-family: var(--font); }
.g-vsvg .is-hint { outline: none; animation: g-blink 1s infinite; }

/* ───── 큰 수 ───── */
.g-bigrows { display: flex; flex-direction: column; gap: var(--s3); width: 100%; }
.g-bigrow { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s3); border-radius: var(--r-l); border: var(--line-w3) solid var(--tc); background: var(--ts); }
.g-bigrow.won { box-shadow: 0 0 0 6px var(--ok-line); }
.g-bslots { display: flex; gap: var(--s2); }
.g-slot { width: 96px; height: 120px; border-radius: var(--r-m); border: var(--line-w3) dashed var(--ink-2); background: #fff; cursor: pointer; font: inherit; display: grid; place-items: center; }
.g-slot b { font-size: var(--t-2xl); font-weight: 900; } .g-slot small { font-size: var(--t-s); color: var(--ink-3); }
.g-bcards { display: flex; gap: var(--s2); } .g-bcards .g-card { min-width: 72px; min-height: 96px; }
.g-bval { font-size: var(--t-m); font-weight: 800; } .g-bval b { font-size: var(--t-xl); }

/* ───── 옷 입히기 ───── */
.g-ofwrap { display: flex; gap: var(--s6); align-items: center; justify-content: center; flex-wrap: wrap; }
.g-ofkid { display: flex; flex-direction: column; align-items: center; gap: var(--s3); } .g-ofkid svg { width: 180px; height: 270px; }
.g-ofpick { display: flex; flex-direction: column; gap: var(--s3); } .g-ofcat > b { font-size: var(--t-s); color: var(--ink-2); }
.g-ofcat .g-row { justify-content: flex-start; }
.g-sw { width: 22px; height: 22px; border-radius: 6px; border: 3px solid; display: inline-block; }
.g-ofmade { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.g-ofm { width: 64px; height: 96px; border-radius: var(--r-m); background: var(--card); border: var(--line-w) solid var(--line); display: grid; place-items: center; }
.g-ofm svg { width: 54px; height: 84px; }

/* ───── 쌓기나무 ───── */
.g-bltop { display: flex; justify-content: center; }
.g-blt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s3) var(--s5); background: var(--spark-soft); border-radius: var(--r-l); }
.g-blt > b { font-size: var(--t-m); } .g-blt .g-iso { width: 240px; height: auto; max-height: 220px; }
.g-blteams { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; }
.g-blteam { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s3); border-radius: var(--r-l); border: var(--line-w3) solid var(--tc); background: var(--ts); min-width: 240px; }
.g-blteam .g-iso { width: 150px; height: 120px; }
.g-blgrid { display: grid; grid-template-columns: repeat(var(--n), 72px); gap: 6px; }
.g-blc { height: 72px; border-radius: var(--r-s); border: var(--line-w3) solid var(--ink); background: #fff; cursor: pointer; font: inherit; }
.g-blc b { font-size: var(--t-l); font-weight: 900; }

/* ───── 틀린 그림 ───── */
.g-spwrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); width: 100%; }
.g-spsvg { width: 100%; height: auto; } .g-spbg { fill: #fff; stroke: var(--ink); stroke-width: 4; }
.g-spsvg [data-o] { cursor: pointer; }
.g-found { fill: none; stroke-width: 8; } .g-sphint { fill: none; stroke: var(--hint); stroke-width: 6; stroke-dasharray: 10 8; animation: g-blink 1s infinite; }

/* 12px · 영어 금지 검사에 걸리지 않게 그림 속 글자도 화면 글꼴 */
svg text { font-family: var(--font); }

/* 전자칠판: 오른쪽 줄은 조금 작게(판이 주인공) · 머리 단계 띠도 */
[data-dev="board"] .g-rail { --t-s: 22px; --t-m: 26px; --t-l: 30px; --t-xl: 44px; --t-badge: 20px; --hit: 64px; --icon: 30px; gap: var(--s2); }
[data-dev="board"] .g-rail .chip { min-height: 56px; }
[data-dev="board"] .g-lvpick { --t-s: 22px; --hit: 64px; }
[data-dev="board"] .g-top .tk-home, [data-dev="board"] .g-tolist { font-size: 22px; }
.g-speed { align-content: start; }
.g-lane { align-self: start; }
/* 쌓기나무: 팀 칸 안에서 그림 | 판 나란히 */
.g-blocks { gap: var(--s3) !important; }
.g-blt .g-iso { width: 200px; max-height: 170px; }
.g-blteam { display: grid; grid-template-columns: auto auto; grid-template-areas: "n n" "i g" "b b"; align-items: center; justify-items: center; column-gap: var(--s4); }
.g-blteam .g-hname { grid-area: n; } .g-blteam .g-iso { grid-area: i; width: 140px; height: 120px; } .g-blteam .g-blgrid { grid-area: g; } .g-blteam .btn { grid-area: b; }
.g-blgrid { grid-template-columns: repeat(var(--n), 64px); } .g-blc { height: 64px; }

/* ───── [D3 10-21] 게임관 — 앱과 같은 틀(본문 최대 폭 · 양옆 여백) ───── */
html.tk .g-main0 { padding: var(--s5) var(--gutter); }
html.tk .g-list { max-width: var(--page-max); }
html.tk .g-frow > b { color: var(--accent-deep); }
html.tk .g-gcpic { background: var(--sky-1); }
html.tk:not([data-dev="board"]) .g-play { padding: var(--s4) var(--gutter); }