@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');
:root{--bg:#f5f3ec;--ink:#22302a;--muted:#66746c;--line:#ddd8c8;--card:#fffdf7;--accent:#2f6b4f;--accent-ink:#f2f6ea;--warm:#b8742d;--danger:#a83a2c;--felt:#16211d;--felt-2:#21302a;--radius:16px;font-family:'DM Sans','Noto Sans KR',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-text-size-adjust:100%}
a{color:var(--accent)}img{max-width:100%}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:50;background:#fff;padding:8px 12px;border-radius:8px}
.site-header{position:sticky;top:0;z-index:20;background:#f5f3ecee;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-inner{max-width:1280px;margin:auto;display:flex;align-items:center;gap:18px;padding:10px 16px}
.brand{font-weight:700;font-size:20px;text-decoration:none;color:var(--ink);letter-spacing:-.5px}.brand span{color:var(--accent)}.brand small{color:var(--muted);font-weight:500}
.header-nav{display:flex;gap:14px;flex:1;overflow-x:auto;scrollbar-width:none}.header-nav a{text-decoration:none;color:var(--muted);white-space:nowrap;font-size:14px;padding:6px 2px}.header-nav a[aria-current]{color:var(--ink);font-weight:600;border-bottom:2px solid var(--accent)}
.language-select select{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:5px 8px;color:var(--ink)}
main{max-width:1280px;margin:auto;padding:16px}
.breadcrumb{font-size:13px;color:var(--muted);margin:4px 0 12px}.breadcrumb a{color:var(--muted)}
h1{font-size:clamp(24px,3.2vw,36px);letter-spacing:-1px;line-height:1.2;margin:0 0 6px}
.lead{color:var(--muted);margin:0 0 16px;max-width:820px}
/* 플레이 영역 */
.play{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.stage{position:relative;height:min(74vh,760px);min-height:420px;border-radius:22px;overflow:hidden;background:radial-gradient(circle at 50% 40%,var(--felt-2),var(--felt));box-shadow:0 18px 50px #1b2a2340;touch-action:none;user-select:none;-webkit-user-select:none}
.stage-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab}
.stage:not(.ready)::after{content:'';position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px;border:3px solid #ffffff30;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage.curtain .stage-canvas{filter:blur(18px) brightness(.5)}
.hud{position:absolute;inset:0;pointer-events:none}.hud>*{pointer-events:auto}
.players{position:absolute;left:12px;right:12px;top:12px;display:flex;flex-wrap:wrap;gap:8px;pointer-events:none}
.player{position:relative;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#0e1714c0;color:#e9efe6;font-size:13px;border:1px solid #ffffff1c;backdrop-filter:blur(4px);transition:.2s}
.player.active{background:#2f6b4fe6;border-color:#bfe3c9;box-shadow:0 0 0 3px #bfe3c933}.player.me .name{font-weight:700}.player.offline{opacity:.55}
.player .chip{width:13px;height:13px;border-radius:50%;background:var(--chip);box-shadow:inset 0 0 0 1px #ffffff55}.player .timer{font-variant-numeric:tabular-nums;color:#d8e6c8}.player .timer.low{color:#ffb4a4;font-weight:700}
.bubble{position:absolute;top:110%;left:0;white-space:nowrap;background:#fff;color:#222;border-radius:12px;padding:4px 10px;font-size:13px;box-shadow:0 6px 20px #0004;animation:pop .2s}
@keyframes pop{from{transform:scale(.6);opacity:0}}
/* 상태 알림은 왼쪽 아래(도구 단추와 같은 줄) — 판 가운데 아래(내 진영·손패·주사위)를 덮지 않는다 */
.status{position:absolute;left:12px;bottom:12px;background:#0e1714d0;color:#f1f5ec;padding:6px 14px;border-radius:999px;font-size:14px;line-height:1.35;pointer-events:none;max-width:calc(100% - 250px);text-align:left}.status:empty{display:none}
.stage-tools{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}.stage-tools button{font:inherit;font-size:13px;border:0;border-radius:10px;background:#0e1714c0;color:#eef3ea;padding:7px 10px;cursor:pointer}
.toast{position:absolute;left:50%;top:60px;transform:translateX(-50%);background:#fffdf7;color:var(--ink);padding:9px 16px;border-radius:12px;box-shadow:0 10px 30px #0005;font-size:14px;z-index:5}
.result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;background:#0b120fa8;color:#fff;opacity:0;transition:opacity .25s;z-index:4;padding:16px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}.result.show{opacity:1}
/* 결과 창이 판보다 길면(휴대폰·결과 카드) 가운데 맞춤 대신 위에서부터 스크롤 — 위·아래 빈 칸(::before·::after)이 남는 높이만큼만 늘어나 제목이 위로 잘리지 않는다 */
.result::before,.result::after{content:'';flex:1 0 0}.result>*{flex:none;max-width:100%}
/* 새 게임·뒤로·판 보기는 창 아래에 붙여 둔다 — 결과가 길어 스크롤해도 늘 누를 수 있다 */
.result{padding-bottom:0}.result>.actions{position:sticky;bottom:0;z-index:1;align-self:stretch;max-width:none;margin:0 -16px;padding:8px 16px 14px;background:linear-gradient(#0b120f00,#0b120fe6 28%)}
.result.peek>.actions{position:static;align-self:auto;margin:0;padding:0;background:none}
.result h2{font-size:clamp(26px,5vw,44px);margin:0 0 6px;letter-spacing:-1px}.result p{margin:0 0 14px;color:#d7e3d3}.result .actions{justify-content:center}
.standings{list-style:none;margin:0 auto 14px;padding:0;display:grid;gap:4px;min-width:min(300px,80vw);max-width:420px}.standings li{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:12px;background:#ffffff14;font-size:15px;text-align:left}.standings li.me{background:#2f6b4fd0;box-shadow:inset 0 0 0 1px #bfe3c9}
.standings b{min-width:3.2em;color:#ffe9a8}.standings .chip{width:12px;height:12px;border-radius:50%;background:var(--chip);box-shadow:inset 0 0 0 1px #ffffff66;flex:none}.standings .who{flex:1}.standings small{color:#d7e3d3;font-variant-numeric:tabular-nums;font-size:13px}
.result .record{font-size:13px;color:#ffe9a8;margin:-4px 0 14px}.result .btn.ghost{background:#ffffff22;color:#fff}
/* '판 보기' — 결과를 아래 띠로 접어 마지막 국면을 드러낸다 */
.result.peek{inset:auto 12px 58px 12px;display:flex;flex-direction:row;overflow:visible;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;padding:8px 12px;border-radius:16px;background:#0b120fd8}.result.peek h2{font-size:18px;margin:0;letter-spacing:0}.result.peek .detail,.result.peek .standings,.result.peek .record,.result.peek::before,.result.peek::after{display:none}
.gomoku-review{display:grid;gap:6px;justify-items:center;margin:8px auto 12px;padding:8px;border:1px solid #ffffff44;border-radius:12px;background:#111d19e8;max-width:min(94vw,550px)}.gomoku-review strong{font-size:14px}.gomoku-review-step{display:flex;align-items:center;gap:5px;width:100%}.gomoku-review-step input[type=range]{min-width:90px;flex:1}.gomoku-review-step .btn{padding:7px 10px;min-width:38px}.gomoku-review-count{font-size:12px;white-space:nowrap}.gomoku-review>.btn{padding:7px 14px}.result.peek .gomoku-review{margin:0}.result.peek .gomoku-review strong{display:none}
/* 2차: 오목 결정적 순간 · AI 단계 사다리 · 첫 승 종이 조각 */
.gomoku-moments{display:grid;gap:4px;width:100%;justify-items:stretch}.gomoku-moments .btn{padding:6px 10px;font-size:13px;text-align:left;white-space:normal;line-height:1.35}.gomoku-moments small{font-size:11.5px;text-align:center;opacity:.85}.result.peek .gomoku-moments{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;max-height:none}.result.peek .gomoku-moments>strong{display:none}.result.peek .gomoku-moments .btn{white-space:nowrap;flex:none;padding:5px 9px;font-size:12px}.result.peek .gomoku-moments>small:last-child{display:none}
.result .ladder{font-size:14px;font-weight:700;color:#bff0cf;margin:-6px 0 14px}.result .ladder.first{color:#ffd76a;animation:ladderPop .55s cubic-bezier(.2,1.6,.4,1) both}.result.peek .ladder{display:none}
.gomoku-warn{top:auto!important;bottom:52px;left:50%;transform:translateX(-50%);background:#5a1d16f0;color:#fff;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;box-shadow:0 0 0 2px #ff8a7a66;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;animation:warnIn .3s ease-out both}.gomoku-warn[hidden]{display:none}
@keyframes warnIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes ladderPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}.confetti i{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;animation:confettiFall 1.9s cubic-bezier(.3,.6,.6,1) forwards}
@keyframes confettiFall{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(var(--dx),105vh,0) rotate(var(--r));opacity:.15}}
.chess-review-line{display:flex;flex-wrap:wrap;gap:3px;max-height:100px;overflow:auto;width:100%;padding:3px}.chess-review-line .btn{padding:3px 5px;min-width:0;font-size:12px}.chess-review-line .btn.active{outline:2px solid #e9d276}.result.peek .chess-review-line{max-height:42px}
/* 2026-10-11: 도움말 단추가 왼쪽 아래 상태 알림('내 차례')과 겹쳤다 — 상태 알림 한 줄 위로 */
.chess-help-toggle{position:absolute;left:12px;bottom:52px;padding:6px 9px;font-size:12px}.chess-help-text{position:absolute;left:8px;right:8px;bottom:92px;margin:auto;max-width:420px;padding:7px 10px;border-radius:8px;background:#15251fe8;color:#fff;font-size:12px;text-align:center;pointer-events:none!important}
.chess-help-toggle[hidden],.chess-help-text[hidden]{display:none}
.checkers-review-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px}.checkers-review-row>span{flex:1;min-width:145px;font-size:12px}.checkers-review-row .btn{padding:6px 8px;font-size:12px}
.checkers-path-controls{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;max-width:min(94vw,640px);padding:6px 9px;border-radius:12px;background:#111d19ed;color:#fff;font-size:12px;box-shadow:0 5px 18px #0007}.checkers-path-controls[hidden],.checkers-path-controls .btn[hidden]{display:none}.checkers-path-controls>span{flex-basis:100%;text-align:center}.checkers-path-controls .btn{min-height:34px;padding:5px 9px}
.checkers-review-counts{flex-basis:100%;font-size:11px;color:#d7e4d5;text-align:center}
.go-review-window{display:flex;gap:6px}.go-review-window .btn,.go-review-events .btn{padding:5px 8px;font-size:11px}.go-review-recent{font-size:11px;text-align:center;color:#d7e4d5}.go-review-events{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-height:90px;overflow:auto}
/* 시작 화면(단계) — 판 위에 카드 하나: 진행 표시 · 질문 한 줄 · 큰 카드 · 주 버튼 하나 + ← (src/client/entry.mjs) */
.entry{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:14px;background:#0b120f73;overflow:auto;overscroll-behavior:contain;container-type:size}
.stage.entry-open .stage-canvas{filter:blur(2px) brightness(.8)}.stage.entry-open :is(.players,.status,.stage-tools,.hud){visibility:hidden}
.entry-card{width:min(440px,100%);max-height:100%;overflow:auto;display:grid;gap:10px;align-content:start;padding:16px;border-radius:18px;background:var(--card);color:var(--ink);box-shadow:0 18px 50px #0008}
.entry-card h2{font-size:21px;line-height:1.25;letter-spacing:-.4px;margin:0}.entry-card .notice{font-size:13px}
.entry-steps{display:flex;gap:6px;margin:0;padding:0;list-style:none;min-width:0}
.entry-steps li{display:flex;align-items:center;gap:6px;min-width:0;padding:2px 10px 2px 3px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:var(--muted)}.entry-steps li.on{flex:none}.entry-steps span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.entry-steps b{flex:none}
.entry-steps b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ece8db;font-size:11px}
.entry-steps li.on{border-color:var(--accent);color:var(--ink);font-weight:600}.entry-steps li.on b{background:var(--accent);color:var(--accent-ink)}.entry-steps li.done b{background:#d5e7d9;color:var(--accent)}
.entry-cards{display:grid;gap:8px}
.entry-who{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:7px 12px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.entry-icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#edf3ec;color:var(--accent);font-size:19px}
.entry-swatch{width:30px;height:30px;margin:0 3px;border-radius:50%;box-shadow:inset 0 0 0 1px #0003,0 2px 6px #0002}
.entry-text{flex:1;min-width:0;display:grid;line-height:1.3}.entry-text strong,.entry-resume strong{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry-text small,.entry-tile small,.entry-resume small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry-chev{flex:none;color:var(--muted);font-size:22px;line-height:1}
.entry-lock{flex:none;padding:3px 9px;border:1px solid #dcc9a0;border-radius:999px;background:#fbf4e4;color:#7a5a1e;font-size:12px;white-space:nowrap}
.entry-resume{display:grid;gap:1px;width:100%;min-height:54px;padding:8px 14px;border:0;border-radius:14px;background:var(--accent);color:var(--accent-ink);font:inherit;text-align:left;cursor:pointer;box-shadow:0 6px 16px #2f6b4f40}
.entry-resume strong{font-size:15.5px}.entry-resume small{color:#d8e8dc}
.entry-join{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:6px 12px;border:1px dashed #c9c3b1;border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.entry-field{display:grid;gap:6px}.entry-field>span{font-size:12.5px;color:var(--muted)}
.entry-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px}
.entry-tile{display:grid;align-content:center;gap:1px;min-width:0;min-height:56px;padding:7px 11px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.entry-tile strong{font-size:15.5px;line-height:1.3}.entry-tile .entry-won{color:var(--accent)}.entry-tile small.entry-tag{color:var(--warm);font-weight:700}
.entry-chips{display:flex;flex-wrap:wrap;gap:6px}
.entry-chip{min-height:40px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}
.entry-who:hover,.entry-tile:hover,.entry-chip:hover,.entry-join:hover{border-color:#a9bfae}
.entry [aria-pressed="true"]{border-color:var(--accent);background:#eef6ef;box-shadow:inset 0 0 0 1px var(--accent)}.entry-chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.entry :is(button,input):focus-visible{outline:3px solid var(--warm);outline-offset:2px}
.entry-note{margin:0;font-size:12.5px;color:var(--muted)}
.entry-actions{display:flex;gap:8px;margin-top:2px}.entry-actions .btn{min-height:50px;font-size:16px}.entry-actions .entry-go{flex:1}.entry-back{flex:none;width:58px;font-size:20px}
.entry-code{width:100%;font:inherit;font-size:22px;letter-spacing:6px;text-transform:uppercase;text-align:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.entry-join-form{display:grid;gap:10px}
.entry p{margin:0}.entry .room-code{margin:0}.entry .actions .btn{min-height:46px}.entry .seat-list{margin:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage:focus{outline:none}.stage:focus-visible{outline:3px solid var(--warm);outline-offset:3px}
.kb-cursor{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid #ffd54a;box-shadow:0 0 0 3px #0008,0 0 16px #ffd54a99;pointer-events:none;z-index:3;transition:left .12s,top .12s}.kb-cursor[hidden]{display:none}
.kb-tip{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:#0e1714e0;color:#fff;font-size:12px;padding:4px 10px;border-radius:999px;pointer-events:none;z-index:3;white-space:nowrap}.kb-tip[hidden]{display:none}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:grid;gap:14px;max-height:min(74vh,760px);overflow:auto}
.panel h2{font-size:16px;margin:0 0 8px}.mode{border-bottom:1px solid var(--line);padding-bottom:14px}.mode:last-of-type{border-bottom:0}
.field{border:0;padding:0;margin:0 0 10px}.field legend{font-size:12px;color:var(--muted);margin-bottom:4px}
.choice{display:flex;flex-wrap:wrap;gap:6px}.choice label{cursor:pointer}.choice input{position:absolute;opacity:0;pointer-events:none}.choice span{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:999px;font-size:13px;background:#fff}.choice input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.choice input:focus-visible+span{outline:2px solid var(--warm)}
.btn{font:inherit;font-size:14px;font-weight:600;border-radius:12px;padding:9px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;min-height:40px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.danger{color:var(--danger);border-color:#e3b9b1}.btn.ghost{border-color:transparent;background:#f0eee5;font-weight:500;font-size:13px;min-height:32px;padding:5px 10px}
.btn:hover{filter:brightness(1.05)}.btn:focus-visible{outline:2px solid var(--warm);outline-offset:2px}
.actions{display:flex;flex-wrap:wrap;gap:8px}.emotes{display:flex;flex-wrap:wrap;gap:6px}
.join{display:flex;gap:8px;margin-top:10px}.join input{flex:1;min-width:0;font:inherit;text-transform:uppercase;letter-spacing:3px;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
details.create{margin-top:10px}details.create summary{cursor:pointer;font-weight:600;font-size:14px;margin-bottom:8px}
.check{display:flex;align-items:center;gap:6px;font-size:14px;margin:6px 0 10px}
.room-code{font-size:38px;font-weight:700;letter-spacing:8px;text-align:center;margin:4px 0;color:var(--accent);font-variant-numeric:tabular-nums}
.seat-list{margin:0 0 6px;padding-left:18px;font-size:14px}
.muted{color:var(--muted)}.small{font-size:12px}.notice{background:#fbeee0;border-radius:10px;padding:8px 12px;margin:0;font-size:14px}.searching{animation:blink 1.4s infinite}@keyframes blink{50%{opacity:.5}}
.links{font-size:13px;margin:0}
table.ranking{width:100%;border-collapse:collapse;font-size:13px}table.ranking th,table.ranking td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left}table.ranking tr.me{background:#eaf3e4;font-weight:600}table.ranking td:nth-child(3){font-variant-numeric:tabular-nums}
/* 게임별 HUD 공용 조각 */
/* width:max-content — left:50% 인 절대 위치는 남은 폭(무대의 절반)에서 줄바꿈해 버린다 */
.hud-bar{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);width:max-content;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:94%}
.hud-bar .btn{box-shadow:0 6px 18px #0005}.hud-tray{position:absolute;left:8px;right:8px;bottom:54px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
/* 만칼라 — 길쭉한 판이라 가로 화면에서는 무대를 낮게 쓴다(세로 휴대폰은 판을 세워 원래 높이), 세 판 합산 표시 */
.stage.stage-wide{height:min(52vh,500px);min-height:340px}
.mc-round{position:absolute;right:12px;top:12px;background:#0e1714d0;color:#ffe9a8;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;pointer-events:none;font-variant-numeric:tabular-nums}.mc-round[hidden]{display:none}
.mc-controls{position:absolute;left:12px;top:12px;z-index:2;display:flex;gap:6px;flex-wrap:wrap;max-width:70%}.mc-controls .btn{font-size:12px;min-height:34px}.mc-queue-notice,.mc-preview-notice{position:absolute;left:50%;transform:translateX(-50%);z-index:2;max-width:94%;border-radius:12px;background:#0e1714e8;color:#fff;font-size:13px;box-shadow:0 6px 18px #0006}.mc-queue-notice{bottom:8px;display:flex;align-items:center;gap:8px;padding:5px 6px 5px 12px}.mc-queue-notice .btn{min-height:34px;white-space:nowrap}.mc-preview-notice{bottom:60px;width:max-content;padding:9px 12px;text-align:center}.mc-queue-notice[hidden],.mc-preview-notice[hidden]{display:none}
.mc-controls [hidden],.mc-queue-notice [hidden]{display:none}.mc-preview-notice{max-height:220px;overflow:auto}.mc-preview-notice details{margin-top:4px;text-align:left}.mc-preview-notice summary{cursor:pointer}.mc-preview-notice table{width:100%;border-collapse:collapse;font-size:11px}.mc-preview-notice th,.mc-preview-notice td{padding:2px 5px;border-bottom:1px solid #ffffff3d;text-align:right}.mc-preview-notice td:first-child,.mc-preview-notice th:first-child{text-align:left}.mc-preview-notice small{display:block;margin-top:4px}
.sl-overview{position:absolute;top:62px;right:10px;z-index:2;width:min(260px,48%);max-height:calc(100% - 115px);overflow:auto;padding:8px 10px;border-radius:12px;background:#0e1714e8;color:#fff;font-size:12px;box-shadow:0 6px 18px #0006}.sl-overview>strong{display:block;font-size:14px}.sl-seats{display:flex;gap:4px;flex-wrap:wrap;margin:5px 0}.sl-seats span{border:1px solid var(--pawn-color);border-radius:6px;padding:2px 5px;background:#fff1}.sl-seats span.active{background:var(--pawn-color);color:#101a15;font-weight:700}.sl-history summary{cursor:pointer}.sl-history ol{margin:4px 0;padding-left:18px}.sl-history li{line-height:1.4}.sl-overview .btn{min-height:28px;padding:2px 7px;font-size:11px;margin-top:5px}.sl-overview .btn[hidden]{display:none}
.ludo-preview-notice{align-self:center;background:#0e1714e8;color:#fff;padding:7px 12px;border-radius:12px;font-size:13px;max-width:min(85vw,430px);max-height:160px;overflow:auto;line-height:1.45;text-align:center}
.ludo-history{position:absolute;top:62px;right:10px;z-index:2;width:min(245px,47%);max-height:calc(100% - 115px);overflow:auto;padding:7px 9px;border-radius:12px;background:#0e1714e8;color:#fff;font-size:12px;box-shadow:0 6px 18px #0006}.ludo-history.captured{outline:3px solid #ff9a4d}.ludo-history>strong{display:block;font-size:12px}.ludo-history summary{cursor:pointer;margin-top:4px}.ludo-history ol{margin:4px 0 0;padding-left:18px}.ludo-history li{margin:3px 0}.ludo-history li button{background:#ffffff12;color:#fff;border:0;border-left:4px solid transparent;border-radius:4px;padding:4px 6px;text-align:left;font:inherit;width:100%;cursor:pointer}
.sb-shot-panel{position:absolute;left:10px;top:62px;z-index:2;width:min(245px,48%);max-height:calc(100% - 120px);overflow:auto;padding:7px 9px;border-radius:12px;background:#0e1714e8;color:#fff;font-size:12px;box-shadow:0 6px 18px #0006}.sb-shot-panel[hidden]{display:none}.sb-shot-panel>strong{display:block}.sb-shot-panel summary{cursor:pointer;margin-top:5px}.sb-shot-panel ol{margin:4px 0;padding-left:18px}.sb-shot-panel li button{background:#ffffff12;border:0;border-radius:4px;color:#fff;padding:3px 5px;text-align:left;font:inherit;cursor:pointer}.sb-fleet-list{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}.sb-fleet-list span{border:1px solid #ffffff77;border-radius:5px;padding:2px 4px}
.sb-preset-card{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;width:145px;padding:4px;border-radius:8px;background:#0e1714d9;color:#fff;font-size:11px}.sb-preset-card strong,.sb-preset-card small{width:100%;text-align:center}.sb-preset-card .btn{font-size:11px;padding:4px 6px}.sb-fleet-mini{width:80px;height:80px;image-rendering:pixelated}.sb-preset-compare{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:min(94vw,360px);max-height:84%;overflow:auto;padding:12px;border-radius:14px;background:#102820f5;color:#fff;box-shadow:0 12px 35px #0009;text-align:center}.sb-preset-compare[hidden]{display:none}.sb-preset-pictures{display:flex;justify-content:center;gap:16px;margin:8px 0}.sb-preset-pictures>div{display:grid;gap:4px}.sb-preset-pictures .sb-fleet-mini{width:120px;height:120px}.sb-preset-actions{display:flex;justify-content:center;gap:8px}.sb-precise-bar{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;justify-content:center;gap:7px;max-width:94vw;padding:5px 8px;border-radius:12px;background:#102820e8;color:#fff;font-size:12px}.sb-precise-bar[hidden],.sb-precise-bar [hidden]{display:none}.sb-precise-bar .btn{min-height:35px;white-space:nowrap}
@media(max-width:600px){.ludo-history{width:min(172px,45%);padding:6px;font-size:11px}}
@media(max-width:600px){.sl-overview{width:min(172px,45%);padding:6px;font-size:11px}.sl-overview>strong{font-size:12px}}
.dice-face{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:9px;background:#fffdf7;color:#222;font-size:24px;font-weight:700;box-shadow:0 4px 12px #0006}.dice-face.used{opacity:.35}
/* 문서 */
.document{max-width:860px;margin:36px auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,4vw,40px)}
.document h2{font-size:22px;letter-spacing:-.4px;margin:28px 0 10px}.document h2:first-child{margin-top:0}.document h3{font-size:17px;margin:20px 0 6px}
.document p,.document li{color:#34423b}.document details{border-top:1px solid var(--line);padding:10px 0}.document summary{cursor:pointer;font-weight:600}
.document table{border-collapse:collapse;width:100%;font-size:14px;margin:10px 0}.document th,.document td{border:1px solid var(--line);padding:6px 8px;text-align:left}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}.toc a{font-size:13px;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:4px 12px;background:#fff}
.related{max-width:1280px;margin:36px auto 0}.related h2{font-size:20px}
.utility-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.utility-card a{display:grid;gap:4px;height:100%;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.utility-card a:hover{transform:translateY(-2px);box-shadow:0 10px 26px #2f6b4f22}.utility-card h2,.utility-card h3{margin:0;font-size:17px}.utility-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.utility-card small{color:var(--warm);font-weight:600}
.utility-icon{font-size:30px;line-height:1}
.hero{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:6px 0 18px}.hero-icon{font-size:56px}
.site-footer{max-width:1280px;margin:40px auto 0;padding:24px 16px 40px;color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;border-top:1px solid var(--line)}.site-footer nav{display:flex;gap:14px;flex-wrap:wrap}.site-footer a{color:var(--muted)}
.noscript{color:#fff;padding:20px}
@media (max-width:960px){.play{grid-template-columns:1fr}.panel{max-height:none}.stage{height:min(68vh,620px);min-height:360px;border-radius:18px}
  .stage.stage-wide{height:min(54vh,520px);min-height:320px}}
@media (max-width:520px){.status{font-size:13px;padding:5px 11px;max-width:calc(100% - 205px)}.stage-tools button{padding:7px 8px}main{padding:10px}.header-inner{gap:10px;padding:8px 12px}.brand{font-size:17px}.stage,.stage.stage-wide{height:72vh;min-height:360px;margin:0 -4px}.player{font-size:12px;padding:5px 10px}.room-code{font-size:30px;letter-spacing:5px}.hero-icon{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* P05 (2026-10-08): 공통 효과 설정에서 '움직임 줄이기'를 고르면 기기 설정과 같게 */
:root[data-gamenow-reduce-motion="1"] *{animation:none!important;transition:none!important}
/* P05: 결과 카드(이유·다음 연습·성장, GameNowFeedback.result) — 결과 창 글자색을 따른다. '판 보기'로 접으면 숨긴다 */
.result .fb-slot{width:min(94vw,460px);margin:0 auto 12px}.result .fb-slot .gamenow-fb-card{margin:0}.result.peek .fb-slot{display:none}
/* P05: 판이 낮은 화면(휴대폰 세로 432×672 → 판 높이 약 484px)에서는 결과 창 간격을 줄인다 */
@media (max-width:520px),(max-height:620px){.result{padding:10px 12px 0}.result h2{font-size:26px;margin-bottom:2px}.result p{margin-bottom:8px}.result .standings{margin-bottom:8px}.result .standings li{padding:4px 10px}.result .record{margin:-2px 0 8px}
  .result .fb-slot{margin-bottom:8px}.result .fb-slot .gamenow-fb-card{gap:4px;padding:8px 10px;font-size:13px;line-height:1.4}.result .gomoku-review{margin:4px auto 8px;padding:6px}.result .chess-review-line{box-sizing:border-box}
  .result>.actions{margin:0 -12px;padding:8px 12px 10px}}
:fullscreen .stage{height:100vh;max-height:none;border-radius:0}:fullscreen.play{display:block;background:#000}:fullscreen .panel{position:absolute;right:12px;top:60px;width:300px;max-height:70vh;opacity:.95}

/* GameNow mobile gameplay touch rules (shared/game-exit/gamenow-exit.css). */
/* Keep rapid game controls from triggering mobile double-tap zoom or text selection.
   Pinch zoom and text editing remain available. */
@media (any-pointer: coarse) {
  html, body { touch-action: manipulation; }
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea, [contenteditable]:not([contenteditable="false"]) {
    -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
  }
}

/* 손가락으로 누르는 머리말·도구 단추는 44 CSS px 이상(2026-10-07 P02 모바일 회귀 점검: 머리말 링크 27~36px, 화면 도구 27~35px). */
@media (any-pointer:coarse){.brand,.header-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}.header-nav a{padding:0 4px}.language-select select{min-height:44px;height:44px}.stage-tools button{min-width:44px;min-height:44px}.breadcrumb a{display:inline-block;padding:13px 0;margin:-13px 0}}

/* Hub discovery stays small: no 3D scene or AI worker is loaded here. */
.board-discovery{margin:0 0 22px;padding:22px 26px;border:1px solid var(--line);border-radius:16px;background:#fffdf8}
.board-discovery h2{margin:0 0 8px;font-size:22px}.board-discovery p{margin:0 0 16px;color:var(--muted);line-height:1.55}
.board-filters{display:flex;flex-wrap:wrap;gap:8px}.board-filters button{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);padding:10px 15px;font:inherit;cursor:pointer}
.board-filters button[aria-pressed=true]{background:#2f6b4f;border-color:#2f6b4f;color:white}.board-filters button span{font-size:11px;opacity:.75}
.board-filters button:focus-visible{outline:3px solid #c58239;outline-offset:3px}.board-discovery .board-count{margin:14px 0 0;font-size:12px}.board-card[hidden]{display:none}
.header-nav a{flex:0 0 auto}
@media(max-width:600px){.header-inner{flex-wrap:wrap}.header-inner>.brand{flex:none}.language-select{margin-left:auto}.header-nav{order:3;flex:1 0 100%;min-width:0}}
@media(max-width:600px){.board-discovery{padding:18px}.board-discovery h2{font-size:20px}.board-filters button{padding:10px 12px;font-size:13px}}
/* 휴대폰 게임 페이지 — 판(시작 카드)이 첫 화면에 들어오게 위쪽을 줄인다. 경로는 머리글 메뉴·구조화 데이터에 있다.
   시작 카드는 오른쪽 공통 ≡·공유 단추 자리(약 46px)를 비운다. */
@media (max-width:520px){
  body[data-page=play]:not([data-game=board]) .breadcrumb{display:none}
  body[data-page=play] .lead{font-size:14px;line-height:1.45;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .entry{align-items:flex-start;padding:10px 46px 10px 8px}.entry-card{padding:12px;gap:8px}.entry-card h2{font-size:19px}
  .entry-who{min-height:50px;padding:6px 10px;gap:10px}.entry-icon{width:32px;height:32px;font-size:17px}.entry-tile{min-height:52px;padding:6px 9px}.entry-tiles{grid-template-columns:repeat(auto-fit,minmax(72px,1fr))}
}
@media (any-pointer:coarse){.entry-chip{min-height:44px}}
/* 낮은 무대(만칼라 .stage-wide·휴대폰) — 카드 간격을 줄여 스크롤 없이 */
@container (max-height:500px){.entry-card{gap:7px;padding:12px}.entry-card h2{font-size:19px}.entry-who,.entry-resume{min-height:48px;padding-top:5px;padding-bottom:5px}.entry-tile{min-height:50px}.entry-actions .btn{min-height:46px}.entry-join{min-height:44px}}
/* 허브 — 게임 한 장 = 한 줄(아이콘 · 이름 · 한 줄 설명 · 인원). 포털과 같이 쓰는 카드 마크업은 그대로, 허브에서만 줄 모양으로. */
body[data-game=board][data-page=play] .hero{margin:4px 0 12px}
body[data-game=board][data-page=play] .board-discovery{margin:0 0 12px;padding:0;border:0;background:none}
body[data-game=board][data-page=play] .board-discovery h2,body[data-game=board][data-page=play] .board-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body[data-game=board][data-page=play] main>.board-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:8px}
body[data-game=board][data-page=play] main>.board-grid .board-card a{display:grid;grid-template-columns:34px auto minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:54px;padding:9px 14px}
body[data-game=board][data-page=play] main>.board-grid .utility-icon{font-size:24px;text-align:center}
body[data-game=board][data-page=play] main>.board-grid h2{font-size:16px;white-space:nowrap}
body[data-game=board][data-page=play] main>.board-grid p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-game=board][data-page=play] main>.board-grid small{white-space:nowrap}
@media(max-width:600px){
  body[data-game=board][data-page=play] .hero-icon{display:none}
  body[data-game=board][data-page=play] .board-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -10px;padding:0 10px}
  body[data-game=board][data-page=play] .board-filters button{flex:none}
  body[data-game=board][data-page=play] main>.board-grid .board-card a{min-height:50px;padding:8px 12px;column-gap:9px}
}

.go-journey { margin-top: 16px; padding: 12px; border: 1px solid var(--line, #aac4b8); border-radius: 12px; }
.go-journey summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.go-journey ol { margin: 8px 0; padding-left: 24px; }
.go-journey li { padding: 5px 0; }
.go-journey .done { color: var(--accent, #247755); font-weight: 700; }

#undo-tool{display:none}
/* 2026-10-13 모바일 세로 — 휴대폰 세로에서 무대 = 위 플레이어 띠 + 1:1 판 자리(캔버스) + 아래 행동 띠(게임 단추 줄 · 상태/도구 줄).
   판(캔버스)은 띠 사이에만 그려지고 HUD·단추는 판을 덮지 않는다. 판 자리 한 변 = min(화면 폭, 가시 높이 − 머리글 − 두 띠).
   stage.mjs 가 같은 미디어 조건에서 판 자리를 '세로 배치'로 보고 거의 위에서 맞춘다. 가로·PC 는 그대로. */
@media (orientation:portrait) and (max-width:600px){
  .stage,.stage.stage-wide{--bt:46px;--bb:108px;--side:min(calc(100vw - 12px),calc(100vh - 122px - var(--bt) - var(--bb)));height:calc(var(--bt) + var(--bb) + max(200px,var(--side)));min-height:0;margin:0 -4px;border-radius:16px}
  @supports (height:100dvh){.stage,.stage.stage-wide{--side:min(calc(100vw - 12px),calc(100dvh - 122px - var(--bt) - var(--bb)))}}
  .stage-canvas{top:var(--bt);bottom:auto;height:calc(100% - var(--bt) - var(--bb))!important}
  .stage:not(.ready)::after{top:calc(var(--bt) + 50% - (var(--bt) + var(--bb)) / 2)}
  .players{top:6px;left:6px;right:6px;flex-wrap:nowrap;gap:4px;overflow:hidden}
  .player{flex:0 1 auto;min-width:0;gap:6px;padding:0 10px;min-height:34px;font-size:12.5px}.player.active{flex-shrink:0}
  .player .name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.player .chip{flex:none}
  .status{left:8px;bottom:10px;max-width:calc(100% - 196px);font-size:13px;padding:5px 11px}
  .stage-tools{right:6px;bottom:6px}#undo-tool:not([hidden]){display:inline-block;font-size:20px;line-height:1}.stage:has(#undo-tool:not([hidden])) .status{max-width:calc(100% - 248px)}
  .hud-bar{bottom:58px}.hud-tray{bottom:56px}
  .toast{top:calc(var(--bt) + 8px)}
  .result.peek{inset:auto 6px 56px 6px}
  body.gamenow-mobile-mode #gamenow-mobile-menu-launcher{top:max(6px,env(safe-area-inset-top));bottom:auto;transform:none}
  body.gamenow-mobile-mode .header-inner{padding-right:54px}body.gamenow-mobile-mode .entry{padding-right:8px}
  /* 게임별 띠 높이 — 위 띠 둘째 줄(점수·핍·도착 수·최근 이동)이 있는 게임, 아래 띠에 손패·배치 단추가 있는 게임 */
  body[data-game=go] .stage,body[data-game=backgammon] .stage,body[data-game=chinesecheckers] .stage{--bt:76px}
  body[data-game=snakesladders] .stage{--bt:92px}body[data-game=ludo] .stage{--bt:78px;--bb:150px}
  body[data-game=seabattle] .stage{--bt:92px;--bb:150px}body[data-game=seabattle] .stage.sb-placing{--bt:46px;--bb:196px}
  body[data-game=dominoes] .stage{--bb:196px}
  /* 백가몬 핍 — 위 띠 둘째 줄에 한 줄로 */
  .bg-pips{top:44px!important;left:6px;right:6px;flex-direction:row!important;flex-wrap:nowrap;overflow:hidden}.bg-pips span{flex:none;white-space:nowrap}.bg-pips .bg-task{flex:0 1 auto;min-width:0;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:3px 9px;border-radius:999px}
  /* 루도 최근 이동·뱀과 사다리 현황 — 위 띠 둘째 줄(접힌 한 줄). 펼치면 판 위로 내려온다 */
  .ludo-history{left:6px;right:6px;width:auto;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;padding:1px 4px 1px 10px;min-height:30px}.ludo-history>strong{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ludo-history details{flex:none;max-width:100%}.ludo-history details[open]{flex:1 0 100%}.ludo-history summary{display:flex;align-items:center;min-height:28px;margin:0;padding:0 8px}
  .sl-overview{left:6px;right:6px;width:auto;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;padding:2px 4px 2px 8px;min-height:44px}.sl-overview>strong{display:none}
  .sl-seats{flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow:hidden;margin:0}.sl-seats span{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sl-history{flex:none}.sl-history[open]{flex:1 0 100%;order:5}.sl-history summary{display:flex;align-items:center;min-height:40px}.sl-overview .btn{min-height:40px;margin:0;padding:2px 8px}
  body[data-game=snakesladders] .hud-bar>.bg-note{font-size:12px;padding:3px 8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 판 위 단추는 손가락 크기(44px) — 결과 창·행동 띠·시작 카드 */
  .stage .btn{min-height:44px}
  /* 도미노 — 손패는 아래 띠, 정렬·신중 조작 단추는 손패 위 한 줄(옆으로 밀기) */
  .dm-hand{max-height:none!important;overflow:visible!important}.dm-tile{width:44px!important;height:84px!important}.dm-hand.many .dm-tile{width:34px!important;height:68px!important}
  .dm-act{left:6px!important;right:6px!important;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;max-height:none!important;scrollbar-width:none}.dm-act>*{flex:none}.dm-act .btn{min-height:44px!important}.dm-act.dm-has-action .dm-pref{display:none}.dm-act .dm-note{flex:0 1 auto;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 만칼라 조작(예약·미리보기·속도·관찰) — 판 위가 아니라 아래 행동 띠 한 줄(옆으로 밀기). 위 창고 숫자를 덮지 않는다 */
  .mc-controls{top:auto!important;bottom:56px;left:6px;right:6px;max-width:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.mc-controls>*{flex:none}.mc-queue-notice{bottom:106px}.mc-preview-notice{left:6px;bottom:auto;top:calc(var(--bt) + 6px);transform:none;width:calc(50% - 66px);max-width:none;max-height:calc(100% - var(--bt) - var(--bb) - 12px);padding:7px 8px;font-size:12px}.mc-controls .btn,.mc-controls select{min-height:44px}
  /* 해전 배치 — 배 고르기 줄은 좁은 화면에서도 한 줄(옆으로 밀기) */
  body[data-game=seabattle] .hud-tray>div:first-child{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;scrollbar-width:none;max-width:100%}body[data-game=seabattle] .hud-tray>div:first-child>*{flex:none}body[data-game=seabattle] .hud-tray .btn{min-height:44px!important}
  /* 해전 최근 발사 — 위 띠 둘째 줄 한 줄(제목 대신 펼침 단추 + 적 함대 목록), 오른쪽은 내 함대/적 해역 전환 */
  .sb-shot-panel{left:6px;right:122px;width:auto;display:flex;align-items:center;gap:6px;padding:0 6px;min-height:44px;overflow:visible}.sb-shot-panel>strong{display:none}.sb-shot-panel details{flex:none}.sb-shot-panel summary{margin:0;display:flex;align-items:center;min-height:40px;white-space:nowrap}
  .sb-shot-panel details[open]{position:absolute;left:0;top:100%;width:min(300px,calc(100vw - 24px));max-height:240px;overflow:auto;background:#0e1714f0;border-radius:10px;padding:4px 8px}.sb-fleet-list{flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0}.sb-fleet-list span{flex:none;white-space:nowrap}
}
/* 장기 튜토리얼 — src/client/janggi-tutorial.mjs (.jt-) */
.jt{display:grid;gap:8px;min-width:0}
.jt-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.jt-head h2{margin:0;font-size:16px}.jt-count{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.jt-groups{display:flex;gap:4px;margin:0;padding:0;list-style:none}.jt-groups li{flex:1;height:4px;border-radius:2px;background:var(--line)}.jt-groups li.past{background:#9fc3ad}.jt-groups li.on{background:var(--accent)}
.jt h3{margin:4px 0 0;font-size:15px}.jt-text{margin:0;font-size:14px}.jt-task{margin:0;font-size:14px;font-weight:600;color:var(--accent)}
.jt-board-wrap{display:flex;justify-content:center}
.jt-board{width:100%;max-width:340px;height:auto;display:block;border-radius:12px;background:#e9c98f;box-shadow:inset 0 0 0 2px #b88a4a;touch-action:manipulation}
.jt-lines line{stroke:#6b4a22;stroke-width:1.2}
.jt-pt{cursor:pointer;outline:none}.jt-hit{fill:transparent}
.jt-pt:focus-visible .jt-hit{fill:#2f6b4f33;stroke:var(--warm);stroke-width:2}
.jt-piece{fill:#fbf3e0;stroke-width:2}.jt-piece.side-c{stroke:#2f6fb5}.jt-piece.side-h{stroke:#c8372d}
.jt-glyph{text-anchor:middle;dominant-baseline:central;font-family:'Noto Serif KR','Noto Sans KR',serif;font-weight:700;pointer-events:none}.jt-glyph.side-c{fill:#2f6fb5}.jt-glyph.side-h{fill:#c8372d}
.jt-dot{fill:var(--accent);opacity:.75}.jt-ring{fill:none;stroke:var(--danger);stroke-width:2.5;stroke-dasharray:4 3}.jt-selring{fill:none;stroke:var(--warm);stroke-width:3}
.jt-live{min-height:1.6em;margin:0;font-size:14px}.jt-live.good{color:var(--accent);font-weight:600}.jt-live.bad{color:var(--danger)}
.jt-done{margin:0;padding:8px 10px;border-radius:10px;background:#eef6ef;font-size:14px}
.jt-formations{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.jt-formations small{flex-basis:100%;color:var(--muted);font-size:12.5px}
.jt-chip{min-height:40px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}.jt-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.jt-nav{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.jt-btn{min-height:40px;padding:6px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.jt-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.jt-btn.link{border:0;background:none;color:var(--muted);text-decoration:underline;margin-left:auto}
.jt-btn:disabled{opacity:.45;cursor:default}.jt-btn:focus-visible,.jt-chip:focus-visible{outline:2px solid var(--warm);outline-offset:2px}