/* ─────────────────────────────────────────────
 * 한봇 족보 (2026-10-25) — 디자인 토큰은 .jk-root 범위 변수 (SPEC §8, 사용자 확정 "추천값으로 진행")
 * 쪽빛 판 #17233f · 판 위 칸 #22325a · 괴황지 노랑 #e8c45c · 경면주사 인주 #b9352b · 한지 #f2eadb · 엽전 구리 #b27b3e
 * 시그니처(하나): 점수 계산 때 부적이 왼쪽부터 붉은 도장처럼 찍히며 배수가 불어나는 연출(.jk-stamp · .swell).
 * 나머지는 조용하게. 공용 클래스(.tab-bar/.tab-btn/.data-table/.table-wrap/.empty-state)는 그대로 쓰고 공용 변수만 이 범위에서 바꿔 끼운다.
 * ───────────────────────────────────────────── */
/* 색 변수는 본문(.jk-root)과 그 밖에 붙는 창(.jk-overlay·.hbs-overlay 명예의 전당·채팅)이 함께 쓴다 (사건 수사와 같은 이유 — 창이 범위 밖이면 글자가 안 보임) */
.jk-root, .jk-overlay, .hbs-overlay, .chat-fab, .chat-panel {
    --jk-indigo: #17233f;
    --jk-indigo-2: #22325a;
    --jk-talisman: #e8c45c;
    --jk-cinnabar: #b9352b;
    --jk-hanji: #f2eadb;
    --jk-copper: #b27b3e;
    --jk-ink: #1b1a1f;              /* 먹 — 대나무·난초 무늬 (SPEC §11) */
    /* 파생 — 토큰에서만 섞는다 */
    --jk-indigo-0: color-mix(in srgb, var(--jk-indigo) 82%, #000);
    --jk-indigo-3: color-mix(in srgb, var(--jk-indigo-2) 80%, var(--jk-hanji));
    --jk-line: color-mix(in srgb, var(--jk-hanji) 14%, var(--jk-indigo));
    --jk-line-2: color-mix(in srgb, var(--jk-hanji) 26%, var(--jk-indigo));
    --jk-hanji-2: color-mix(in srgb, var(--jk-hanji) 90%, var(--jk-copper));
    --jk-ink-soft: color-mix(in srgb, var(--jk-ink) 62%, var(--jk-hanji));
    --jk-cinnabar-hi: color-mix(in srgb, var(--jk-cinnabar) 70%, var(--jk-hanji));
    --jk-copper-hi: color-mix(in srgb, var(--jk-copper) 70%, var(--jk-hanji));
    --jk-card-w: clamp(54px, 4.6vw, 140px);
    /* 공용 변수 덮어쓰기 — 이 페이지 안에서만 */
    --brand: var(--jk-talisman);
    --brand-rgb: 232, 196, 92;
    --brand-ink: var(--jk-ink);
    --brand-tint: rgba(232, 196, 92, 0.1);
    --bg-base: var(--jk-indigo);
    --bg-card: var(--jk-indigo-2);
    --bg-elev: color-mix(in srgb, var(--jk-indigo-2) 88%, var(--jk-hanji));
    --bg-input: color-mix(in srgb, var(--jk-indigo) 80%, var(--jk-indigo-2));
    --text-main: var(--jk-hanji);
    --text-sub: color-mix(in srgb, var(--jk-hanji) 84%, var(--jk-indigo));
    --text-dim: color-mix(in srgb, var(--jk-hanji) 62%, var(--jk-indigo));
    --border: var(--jk-line);
    --border-strong: var(--jk-line-2);
    --fg-rgb: 242, 234, 219;
}
.jk-root {
    background: var(--jk-indigo);
    color: var(--text-sub);
    min-height: calc(100vh - var(--topbar-h, 0px));
    font-variant-numeric: tabular-nums;
}
body:has(> .jk-root) { background: var(--jk-indigo-0); }
.jk-root [hidden] { display: none !important; }
.jk-root :focus-visible, .jk-overlay :focus-visible { outline: 2px solid var(--jk-talisman); outline-offset: 2px; }
.jk-root .wrap { max-width: min(96%, 2400px); margin: 0 auto; padding: 14px 16px 90px; }
.jk-root .top-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jk-root .page-title { font-family: "hb-games-display", var(--font-sans); font-size: clamp(1.4rem, 1.1rem + 0.8vw, 2.2rem); font-weight: 400; color: var(--text-main); margin: 0; }
.jk-root .page-sub { font-size: 0.76rem; color: var(--text-dim); }
.jk-closed { display: none; font-size: 0.76rem; color: var(--jk-talisman); border: 1px solid color-mix(in srgb, var(--jk-talisman) 45%, transparent); border-radius: 8px; padding: 4px 12px; }
.jk-closed.show { display: inline-block; }
.jk-admin-link { margin-left: auto; }
.jk-root .back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-dim); text-decoration: none; padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: transparent; font-family: inherit; }
.jk-root .back-btn:hover { color: var(--text-main); border-color: var(--border-strong); }
.jk-root .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 버튼 — <button>은 색·글꼴을 물려받지 않으므로 직접 지정 */
.jk-root .mini-btn, .jk-overlay .mini-btn { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-sub); font-family: inherit; font-size: 0.78rem; padding: 6px 12px; cursor: pointer; line-height: 1.3; }
.jk-root .mini-btn:hover:not(:disabled), .jk-overlay .mini-btn:hover:not(:disabled) { color: var(--text-main); border-color: var(--jk-hanji); }
.jk-root .mini-btn:disabled, .jk-overlay .mini-btn:disabled { opacity: 0.42; cursor: not-allowed; }
.jk-root .mini-btn.on { background: var(--jk-hanji); color: var(--jk-ink); border-color: var(--jk-hanji); font-weight: 700; }
.jk-root .mini-btn.danger, .jk-overlay .mini-btn.danger { border-color: color-mix(in srgb, var(--jk-cinnabar) 70%, transparent); color: var(--jk-cinnabar-hi); }
.jk-root .big-btn, .jk-overlay .big-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--jk-talisman); border: 1px solid var(--jk-talisman); border-radius: 10px; color: var(--jk-ink); font-family: inherit; font-size: 0.92rem; font-weight: 800; padding: 11px 24px; cursor: pointer; }
.jk-root .big-btn:hover:not(:disabled), .jk-overlay .big-btn:hover:not(:disabled) { filter: brightness(1.06); }
.jk-root .big-btn:disabled, .jk-overlay .big-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.jk-root .chip-btn { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 0.76rem; color: var(--text-sub); background: transparent; border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.jk-root .chip-btn:hover { color: var(--text-main); border-color: var(--jk-hanji); }
.jk-root .chip-btn.on { color: var(--jk-ink); border-color: var(--jk-hanji); background: var(--jk-hanji); font-weight: 700; }
.jk-root .filter-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.jk-root .coin { color: var(--jk-copper-hi); font-weight: 800; }

/* 그림 — 파일이 없으면 첫 글자 칩 (jkImgFail) */
.jk-ico { width: 18px; height: 18px; vertical-align: -4px; object-fit: contain; flex-shrink: 0; margin-right: 4px; }
.jk-chip-ch { display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--fg-rgb), 0.12); color: var(--jk-hanji); font-weight: 800; border-radius: 6px; line-height: 1; overflow: hidden; }
.jk-ico.jk-chip-ch { font-size: 10px; }

/* 띠 — 시즌 */

/* ── 첫 화면 ── */
.jk-first { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 40px); align-items: center; margin: 14px 0 0; padding: clamp(16px, 2vw, 32px); background: var(--jk-indigo-2); border: 1px solid var(--border); border-radius: 14px; }
.jf-title { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.9rem); color: var(--text-main); margin: 0 0 10px; }
.jf-rules { margin: 0 0 16px; padding-left: 1.3em; font-size: clamp(0.82rem, 0.78rem + 0.2vw, 1.05rem); line-height: 1.8; color: var(--text-sub); }
.jf-rules b { color: var(--text-main); }
.jf-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jf-sample { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.jfs-cards { display: flex; justify-content: center; }
.jfs-cards .jk-card { --jk-card-w: clamp(52px, 5vw, 120px); margin-left: calc(var(--jk-card-w) * -0.22); transform: rotate(calc((var(--k, 0) - 2) * 4deg)); }
.jfs-cards .jk-card:nth-child(1) { --k: 0; margin-left: 0; } .jfs-cards .jk-card:nth-child(2) { --k: 1; } .jfs-cards .jk-card:nth-child(3) { --k: 2; } .jfs-cards .jk-card:nth-child(4) { --k: 3; } .jfs-cards .jk-card:nth-child(5) { --k: 4; }
.jfs-line { font-size: 0.82rem; color: var(--text-dim); text-align: center; }
.jfs-line b { color: var(--jk-talisman); }

.login-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center; margin: 14px 0 0; }
.login-box h3 { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: 1.25rem; color: var(--text-main); margin: 0 0 8px; }
.login-box p { font-size: 0.82rem; color: var(--text-dim); line-height: 1.75; margin: 0 0 14px; }

.me-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.me-cell { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.mc-label { font-size: 0.7rem; color: var(--text-dim); }
.mc-value { font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.4rem); font-weight: 800; color: var(--text-main); margin-top: 2px; }
.title-chip, .admin-chip { display: inline-block; font-size: 0.66rem; font-weight: 700; border-radius: 6px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; border: 1px solid color-mix(in srgb, var(--jk-talisman) 55%, transparent); color: var(--jk-talisman); }
.admin-chip { border-color: var(--border-strong); color: var(--text-dim); }

.jk-tabs { margin: 16px 0 12px; }
.jk-root .tab-pane { display: none; }
.jk-root .tab-pane.on { display: block; }
.jk-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: clamp(12px, 1.2vw, 22px); margin-bottom: 12px; }
.jp-title { margin: 0 0 4px; font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1.2rem); color: var(--text-main); }
.jp-title small { font-weight: 400; color: var(--text-dim); font-size: 0.78em; }
.jp-sub { margin: 0 0 10px; font-size: 0.78rem; color: var(--text-dim); line-height: 1.65; }
.jp-sub b { color: var(--text-main); }
.sd-lock { display: block; margin-top: 4px; }
.jk-panel.resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-left: 3px solid var(--jk-talisman); }
.rs-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* 덱 고르기 */
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 11vw, 220px), 1fr)); gap: 10px; }
.deck-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: var(--jk-indigo); border: 1px solid var(--border); border-radius: 12px; padding: 10px; cursor: pointer; font-family: inherit; color: var(--text-sub); }
.deck-opt:hover { border-color: var(--border-strong); }
.deck-opt.on { border-color: var(--jk-talisman); box-shadow: 0 0 0 1px var(--jk-talisman) inset; }
.deck-opt.locked { opacity: 0.55; cursor: not-allowed; }
.do-back { position: relative; width: 62%; aspect-ratio: 5 / 7; border-radius: 8px; overflow: hidden; background: var(--jk-indigo-2); }
.do-img, .do-back > .jk-chip-ch { width: 100%; height: 100%; object-fit: cover; display: flex; font-size: 1.6rem; border-radius: 0; }
.do-lock .jk-ico { width: 14px; height: 14px; font-size: 9px; }
.do-lock { position: absolute; inset: auto 0 0 0; background: rgba(0, 0, 0, 0.6); color: var(--jk-hanji); font-size: 0.7rem; padding: 3px 0; display: flex; align-items: center; justify-content: center; }
.do-name { font-weight: 800; color: var(--text-main); font-size: 0.86rem; }
.do-desc { font-size: 0.7rem; color: var(--text-dim); line-height: 1.45; }
.do-win { font-size: 0.66rem; color: var(--jk-talisman); }
.stake-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.stake-opt { position: relative; width: clamp(44px, 3.4vw, 72px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--jk-indigo); color: var(--text-main); font-family: inherit; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; }
.stake-opt .so-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stake-opt .so-img.jk-chip-ch { display: none; }
.stake-opt span { position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.stake-opt.on { border-color: var(--jk-talisman); box-shadow: 0 0 0 2px var(--jk-talisman); }
.stake-opt.locked { opacity: 0.35; cursor: not-allowed; }
.start-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 12px; }
.sa-note { font-size: 0.78rem; color: var(--text-dim); }

/* 오늘의 도전 */
.jk-panel.daily { display: grid; grid-template-columns: clamp(80px, 9vw, 170px) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 28px); align-items: start; }
.dy-deck { aspect-ratio: 5 / 7; border-radius: 10px; overflow: hidden; background: var(--jk-indigo); }
.dy-deck .jd-img, .dy-deck .jk-chip-ch { width: 100%; height: 100%; object-fit: cover; display: flex; font-size: 2rem; border-radius: 0; }
.dy-rules { margin: 0 0 10px; padding-left: 1.2em; font-size: 0.8rem; line-height: 1.75; color: var(--text-sub); }

/* 내 기록 */
.rec-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.rec-row > div, .jr-stats > div { background: var(--jk-indigo); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.rec-row small, .jr-stats small { display: block; font-size: 0.7rem; color: var(--text-dim); }
.rec-row b, .jr-stats b { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.5rem); color: var(--text-main); }
.jk-wins th, .jk-wins td { padding: 6px 8px; font-size: 0.78rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.jk-wins tr.locked th { color: var(--text-dim); }
.jk-wins td.open { color: var(--text-dim); }
.jk-wins td.lock { background: rgba(0, 0, 0, 0.18); }
.wmark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: var(--jk-cinnabar); color: var(--jk-hanji); font-weight: 800; font-size: 0.7rem; transform: rotate(-6deg); overflow: hidden; }
.wmark .jk-ico { width: 100%; height: 100%; margin: 0; }
.wmark .jk-chip-ch { background: transparent; font-size: 0.7rem; }
.tt-list, .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 14vw, 280px), 1fr)); gap: 8px; }
.tt, .ach { display: flex; flex-direction: column; gap: 3px; background: var(--jk-indigo); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 0.74rem; color: var(--text-dim); line-height: 1.5; }
.tt b, .ach b { color: var(--text-main); font-size: 0.82rem; }
.tt.no, .ach:not(.done) { opacity: 0.6; }
.tt.cur { border-color: var(--jk-talisman); }
.tt-cur { color: var(--jk-talisman); font-weight: 700; }
.tt .mini-btn { align-self: flex-start; margin-top: 4px; }
.ach.done { border-left: 3px solid var(--jk-cinnabar); }
.ach small { color: var(--text-dim); }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(112px, 8.5vw, 190px), 1fr)); gap: 8px; margin-bottom: 10px; }
.cx { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; background: var(--jk-indigo); border: 1px solid var(--border); border-radius: 10px; padding: 8px; font-size: 0.7rem; color: var(--text-dim); }
.cx b { color: var(--text-main); font-size: 0.78rem; }
.cx-paper { width: 56%; aspect-ratio: 2 / 3; border-radius: 3px; background: var(--jk-talisman); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cx-img, .cx-paper .jk-chip-ch { width: 100%; height: 100%; object-fit: cover; display: flex; background: transparent; color: var(--jk-cinnabar); font-size: 1.3rem; border-radius: 0; }
.cx.unseen .cx-paper { background: var(--jk-indigo-2); border: 1px dashed var(--border-strong); }
.cx-q { color: var(--text-dim); font-size: 1.4rem; font-weight: 800; }
.cx.locked { opacity: 0.55; }
.cx-desc { line-height: 1.45; }
.cx-won { color: var(--jk-hanji); background: var(--jk-cinnabar); border-radius: 4px; padding: 1px 6px; font-weight: 700; }
.cx-used { color: var(--jk-talisman); }
.jsh-sec { font-size: 0.74rem; font-weight: 700; color: var(--text-dim); margin: 10px 0 6px; letter-spacing: 0.02em; }
.jsh-sec small { font-weight: 400; }

/* 순위 */
.jk-rank td { padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.jk-rank th { padding: 7px 10px; font-size: 0.72rem; color: var(--text-dim); border-bottom: 1px solid var(--border-strong); text-align: left; }
.jk-rank th.num, .jk-rank td.num { text-align: right; }
.jk-rank tr.mine td { background: var(--brand-tint); color: var(--text-main); }

/* 안내 */
.guide-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.guide-card h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--text-main); }
.guide-card ul { margin: 0; padding-left: 1.2em; font-size: 0.8rem; line-height: 1.8; color: var(--text-sub); }
.guide-card b { color: var(--text-main); }
.jk-levels th, .jk-levels td, .jk-deckcount th, .jk-deckcount td { padding: 5px 8px; font-size: 0.78rem; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left; }
.jk-levels .num, .jk-deckcount .num { text-align: right; }
.jk-levels tr.hid td { color: var(--text-dim); }

/* ───────── 판 화면 ───────── */
.run-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 10px; }
.rh-title { margin: 0; font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.6rem); color: var(--text-main); }
.rh-sub { font-size: 0.78rem; color: var(--text-dim); }
.rh-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.jk-table {
    display: grid;
    grid-template-columns: clamp(200px, 17vw, 420px) minmax(0, 1fr) clamp(130px, 11vw, 280px);
    grid-template-areas: "board charms side" "board felt side" "board hand side";
    grid-template-rows: auto minmax(clamp(120px, 16vh, 400px), auto) auto;
    gap: clamp(8px, 0.8vw, 16px);
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--jk-indigo) 86%, var(--jk-hanji)) 0%, var(--jk-indigo) 70%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: clamp(8px, 0.9vw, 18px);
}
.jk-table.busy .act-btn, .jk-table.busy .jk-hand .jk-card { cursor: progress; }

/* 부적 띠 — 노란 부적이 줄지어 붙은 띠 */
.jk-charms { grid-area: charms; min-width: 0; }
.jc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: 0.74rem; color: var(--text-dim); }
.jc-title { font-weight: 800; color: var(--text-main); }
.jc-hint { margin-left: auto; font-size: 0.68rem; }
.jc-strip { display: flex; gap: clamp(6px, 0.6vw, 12px); padding: 8px 10px; background: color-mix(in srgb, var(--jk-indigo-0) 70%, var(--jk-indigo)); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; scrollbar-width: thin; min-height: calc(var(--jk-card-w) * 1.3); }
.jk-charm { position: relative; flex: 0 0 calc(var(--jk-card-w) * 0.95); display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: grab; border-radius: 4px; user-select: none; }
.jk-charm.empty { border: 1px dashed var(--border-strong); border-radius: 4px; aspect-ratio: 2 / 3; height: auto; cursor: default; opacity: 0.6; }
.jch-paper { position: relative; width: 100%; aspect-ratio: 2 / 3; background: var(--jk-talisman); border-radius: 3px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; }
.jch-img, .jch-paper .jk-chip-ch { width: 100%; height: 100%; object-fit: cover; display: flex; background: transparent; color: var(--jk-cinnabar); font-size: calc(var(--jk-card-w) * 0.42); font-weight: 800; border-radius: 0; }
.jch-name { font-size: clamp(0.62rem, 0.58rem + 0.15vw, 0.86rem); color: var(--text-sub); text-align: center; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jch-ed { position: absolute; top: 3px; left: 3px; font-size: 0.6rem; font-weight: 800; padding: 0 4px; border-radius: 3px; background: var(--jk-ink); color: var(--jk-hanji); }
.jk-charm.r-uncommon .jch-paper { box-shadow: 0 0 0 2px var(--jk-indigo-3), 0 2px 6px rgba(0, 0, 0, 0.35); }
.jk-charm.r-rare .jch-paper { box-shadow: 0 0 0 2px var(--jk-cinnabar), 0 2px 6px rgba(0, 0, 0, 0.35); }
.jk-charm.r-legend .jch-paper { box-shadow: 0 0 0 2px var(--jk-copper), 0 0 0 4px var(--jk-talisman), 0 2px 8px rgba(0, 0, 0, 0.4); }
.jk-charm.ed-foil .jch-paper { background: color-mix(in srgb, var(--jk-talisman) 70%, var(--jk-hanji)); }
.jk-charm.ed-holo .jch-paper { background: linear-gradient(135deg, var(--jk-talisman), var(--jk-hanji) 50%, var(--jk-talisman)); }
.jk-charm.ed-poly .jch-paper { background: linear-gradient(135deg, var(--jk-talisman), var(--jk-cinnabar-hi), var(--jk-indigo-3), var(--jk-talisman)); }
.jk-charm.sealed .jch-paper { filter: grayscale(0.85) brightness(0.6); }
.jk-charm.dragging { opacity: 0.4; }
.jk-charm.drop-l::before, .jk-charm.drop-r::after { content: ""; position: absolute; top: 0; bottom: 18px; width: 3px; background: var(--jk-hanji); border-radius: 2px; }
.jk-charm.drop-l::before { left: -6px; } .jk-charm.drop-r::after { right: -6px; }

/* ★ 시그니처: 붉은 인장 — 부적이 발동할 때 찍힘 */
.jk-stamp {
    position: absolute; left: 50%; bottom: 22%; z-index: 3;
    transform: translate(-50%, 0) rotate(-8deg);
    min-width: 62%; padding: 3px 5px;
    background: var(--jk-cinnabar); color: var(--jk-hanji);
    border: 2px solid color-mix(in srgb, var(--jk-cinnabar) 70%, var(--jk-ink));
    border-radius: 4px;
    font-family: "hb-games-display", var(--font-sans); font-size: clamp(0.7rem, 0.6rem + 0.35vw, 1.2rem); line-height: 1.1; text-align: center; white-space: nowrap;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
    animation: jk-stamp 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) both, jk-stamp-out 0.5s ease-in 1.6s forwards;
    pointer-events: none;
}
@keyframes jk-stamp { 0% { opacity: 0; transform: translate(-50%, -30%) rotate(-8deg) scale(1.9); } 60% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, 0) rotate(-8deg) scale(1); } }
@keyframes jk-stamp-out { to { opacity: 0.0; } }
.jk-charm.fire .jch-paper { animation: jk-press 0.34s ease-out; }
@keyframes jk-press { 0% { transform: translateY(0); } 35% { transform: translateY(3px) scale(0.97); } 100% { transform: none; } }

/* 점수판 */
.jk-board { grid-area: board; display: flex; flex-direction: column; gap: 8px; background: var(--jk-indigo-2); border: 1px solid var(--border); border-radius: 12px; padding: clamp(10px, 0.9vw, 18px); min-width: 0; }
.jb-blind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jbb-ante { font-family: "hb-games-display", var(--font-sans); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.6rem); color: var(--text-main); }
.jbb-kind { font-size: 0.74rem; font-weight: 700; border-radius: 6px; padding: 2px 8px; background: var(--jk-indigo); border: 1px solid var(--border-strong); }
.jbb-kind.k-boss { background: var(--jk-cinnabar); border-color: var(--jk-cinnabar); color: var(--jk-hanji); }
.jbb-end { font-size: 0.7rem; color: var(--jk-talisman); }
.jb-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.jb-label { font-size: 0.72rem; color: var(--text-dim); display: inline-flex; align-items: center; }
.jb-num { font-family: "hb-games-display", var(--font-sans); font-size: clamp(1.1rem, 0.95rem + 0.7vw, 2.1rem); color: var(--text-main); }
.jb-target .jb-num { color: var(--jk-talisman); }
.jb-small { font-size: 0.78rem; }
.jb-hand { background: var(--jk-indigo); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; }
.jh-name { font-size: clamp(0.82rem, 0.76rem + 0.25vw, 1.15rem); font-weight: 800; color: var(--text-main); min-height: 1.4em; }
/* 기본점 = 엽전 더미(구리) × 배수 = 붉은 인장(주사) — 막대 칸 대신 (SPEC §11) */
.jh-calc { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 0.6vw, 14px); margin: 8px 0 4px; }
.jh-coins { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.jh-stack { display: flex; flex-direction: column-reverse; align-items: center; flex-shrink: 0; }
.jh-stack i { display: block; width: clamp(22px, 1.7vw, 44px); aspect-ratio: 3.2 / 1; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, var(--jk-indigo-0) 0 13%, transparent 14%), linear-gradient(var(--jk-copper-hi), var(--jk-copper)); border: 1px solid color-mix(in srgb, var(--jk-copper) 60%, var(--jk-ink)); margin-top: -11%; }
.jh-stack i:last-child { margin-top: 0; }
.jh-val, .jh-seal { display: flex; flex-direction: column; align-items: center; line-height: 1.05; min-width: 0; }
.jh-val small, .jh-seal small { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; }
.jh-chips, .jh-mult { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(1.15rem, 0.95rem + 0.9vw, 2.4rem); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.jh-val { align-items: flex-end; color: var(--jk-copper-hi); }
.jh-val small { color: var(--text-dim); }
.jh-seal { flex: 1; align-items: center; justify-content: center; max-width: 52%; padding: 6px 10px 4px; background: var(--jk-cinnabar); color: var(--jk-hanji); border: 2px solid color-mix(in srgb, var(--jk-cinnabar) 70%, var(--jk-ink)); outline: 1px solid color-mix(in srgb, var(--jk-hanji) 30%, transparent); outline-offset: -5px; border-radius: 4px; transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.jh-seal small { opacity: 0.85; }
.jh-x { color: var(--text-dim); font-size: 1.1rem; font-weight: 800; }
.jh-total { min-height: 1.4em; font-size: 0.82rem; color: var(--text-dim); }
.jh-total b { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.9rem); color: var(--jk-talisman); }
.jh-total small { font-size: 0.7rem; }
.jt-pm { color: var(--jk-talisman); font-weight: 800; margin-right: 2px; }
.jk-board.previewing .jh-coins, .jk-board.previewing .jh-seal { opacity: 0.86; }
.jh-seal.swell { animation: jk-seal 0.32s ease-out; }
@keyframes jk-seal { 0% { transform: rotate(-3deg) scale(1); } 40% { transform: rotate(-5deg) scale(1.14); } 100% { transform: rotate(-3deg) scale(1); } }
@keyframes jk-swell { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.jh-total.land { animation: jk-land 0.42s ease-out; }
@keyframes jk-land { 0% { transform: scale(0.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.jb-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.jb-cnt { background: var(--jk-indigo); border: 1px solid var(--border); border-radius: 8px; padding: 6px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.jb-cnt b { font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.5rem); color: var(--text-main); }
.jb-money b { color: var(--jk-copper-hi); }
.jb-money b.bump, .jb-cnt b.bump { animation: jk-swell 0.32s ease-out; }
.jb-boss { border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.jbo { display: flex; gap: 8px; align-items: center; font-size: 0.74rem; color: var(--text-sub); }
.jbo b { display: block; color: var(--jk-cinnabar-hi); font-size: 0.8rem; }
.jbo-img, .jbo .jk-chip-ch { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--jk-cinnabar); color: var(--jk-hanji); font-size: 16px; }

/* 가운데 판 */
.jk-felt { grid-area: felt; min-width: 0; display: flex; }
.jk-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
.jk-played { display: flex; justify-content: center; align-items: center; gap: clamp(6px, 0.7vw, 14px); min-height: calc(var(--jk-card-w) * 1.45); flex-wrap: wrap; }
.jk-felt-note { text-align: center; font-size: 0.78rem; color: var(--text-dim); margin: 8px 0 0; }
.ji-title { margin: 0; text-align: center; font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(1.2rem, 1rem + 0.8vw, 2.2rem); color: var(--text-main); }
.ji-sub { text-align: center; margin: 4px 0 12px; font-size: 0.78rem; color: var(--text-dim); line-height: 1.6; }
.ji-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 18px); }
.ji-blind { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--jk-indigo-2); border: 1px solid var(--border); border-radius: 12px; padding: clamp(10px, 1vw, 20px); }
.ji-blind.now { border-color: var(--jk-talisman); box-shadow: 0 0 0 1px var(--jk-talisman) inset; }
.ji-blind.done { opacity: 0.5; }
.ji-blind:not(.now):not(.done) { opacity: 0.75; }
.jib-kind { font-weight: 800; color: var(--text-main); font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1.2rem); }
.ji-blind.k-boss .jib-kind { color: var(--jk-cinnabar-hi); }
.jib-boss { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.72rem; color: var(--text-sub); }
.jib-boss b { color: var(--text-main); }
.jib-img, .jib-boss .jk-chip-ch { width: clamp(52px, 4.4vw, 110px); height: clamp(52px, 4.4vw, 110px); border-radius: 50%; object-fit: cover; background: var(--jk-cinnabar); color: var(--jk-hanji); display: flex; font-size: 1.4rem; }
.jib-target small { display: block; font-size: 0.68rem; color: var(--text-dim); }
.jib-target b { font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.9rem); color: var(--jk-talisman); }
.jib-reward { font-size: 0.7rem; color: var(--jk-copper-hi); }
.jib-state { font-size: 0.74rem; color: var(--text-dim); }

/* 장터 · 꾸러미 · 결과 */
.jk-shop, .jk-pack, .jk-result { background: color-mix(in srgb, var(--jk-indigo-2) 92%, var(--jk-copper)); border: 1px solid color-mix(in srgb, var(--jk-copper) 40%, var(--border)); border-radius: 12px; padding: clamp(10px, 1vw, 20px); }
.jsh-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.jsh-head h3 { margin: 0; font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.8rem); color: var(--text-main); }
.jsh-money { font-size: 0.8rem; color: var(--text-sub); margin-left: auto; }
.jsh-clear { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--jk-indigo); border-left: 3px solid var(--jk-talisman); font-size: 0.82rem; color: var(--text-sub); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.jsh-clear b { color: var(--text-main); }
.jsh-clear small { color: var(--text-dim); width: 100%; }
.jsh-items, .jsh-packs, .jpk-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 11vw, 250px), 1fr)); gap: 10px; }
.jsh-item, .jsh-pack, .jpk-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: var(--jk-indigo); border: 1px solid var(--border); border-radius: 10px; padding: 10px; font-family: inherit; color: var(--text-sub); font-size: 0.74rem; }
.jsh-item.sold, .jsh-pack.sold { justify-content: center; opacity: 0.45; min-height: 120px; border-style: dashed; }
.jpk-opt { cursor: pointer; }
.jpk-opt:hover { border-color: var(--border-strong); }
.jpk-opt.on { border-color: var(--jk-talisman); box-shadow: 0 0 0 2px var(--jk-talisman) inset; }
.jpk-opt.card { background: transparent; border-color: transparent; }
.jpk-opt.card.on { border-color: var(--jk-talisman); }
.ji-art { width: clamp(56px, 38%, 140px); aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--jk-indigo-2); }
.k-charm .ji-art { background: var(--jk-talisman); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.k-fortune .ji-art { background: var(--jk-hanji); }
.k-manual .ji-art { background: color-mix(in srgb, var(--jk-copper) 50%, var(--jk-indigo-2)); }
.r-rare .ji-art { box-shadow: 0 0 0 2px var(--jk-cinnabar); }
.ji-img, .ji-art .jk-chip-ch { width: 100%; height: 100%; object-fit: cover; display: flex; background: transparent; color: var(--jk-cinnabar); font-size: 1.6rem; border-radius: 0; }
.k-manual .ji-art .jk-chip-ch { color: var(--jk-hanji); }
.k-fortune .ji-img, .k-manual .ji-img { object-fit: contain; }   /* 쪽지·비급 그림은 정사각 — 2:3 칸에서 좌우가 잘리지 않게 통째로 보이고, 남는 위아래는 칸 배경이 채운다 (부적은 cover 그대로) */
.jp-art { width: clamp(60px, 42%, 150px); aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--jk-copper) 40%, var(--jk-indigo-2)); }
.jp-img, .jp-art .jk-chip-ch { width: 100%; height: 100%; object-fit: contain; display: flex; font-size: 1.6rem; border-radius: 0; background: transparent; }
.ji-name { font-weight: 800; color: var(--text-main); font-size: 0.84rem; }
.ji-tag { font-size: 0.66rem; color: var(--text-dim); }
.ji-desc { line-height: 1.5; flex: 1; }
.ji-why { font-size: 0.66rem; color: var(--jk-cinnabar-hi); }
.buy-btn { width: 100%; margin-top: 4px; font-family: inherit; font-size: 0.8rem; font-weight: 800; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--jk-copper); background: color-mix(in srgb, var(--jk-copper) 22%, var(--jk-indigo)); color: var(--jk-hanji); cursor: pointer; }
.buy-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--jk-copper) 36%, var(--jk-indigo)); }
.buy-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.jsh-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; }
.jk-result { text-align: center; }
.jk-result.won { border-color: var(--jk-talisman); }
.jr-title { margin: 0; font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: clamp(1.3rem, 1rem + 1vw, 2.4rem); color: var(--text-main); }
.jk-result.lost .jr-title { color: var(--text-sub); }
.jr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; text-align: left; }
.jr-new { display: block; font-size: 0.66rem; color: var(--jk-talisman); font-weight: 700; }
.jr-new-list { text-align: left; }
.jr-new-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jr-new-list li { background: var(--jk-indigo); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: 0.8rem; color: var(--text-main); }
.jr-tag { font-size: 0.66rem; color: var(--jk-talisman); margin-right: 6px; }
.jk-result .jsh-acts { justify-content: center; }
/* 진 판 돌아보기 · 곧 열리는 것 (2026-11-01) */
.jr-why { text-align: left; margin: 8px 0; }
.jr-why ul { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; font-size: 0.8rem; line-height: 1.55; color: var(--text-sub); }
.jr-why b { color: var(--text-main); }
/* 해금 진행도 막대 — 덱 고르기·부적 도감·결과 창 */
.jk-prog { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.jk-prog-bar { display: inline-block; width: 64px; height: 5px; border-radius: 999px; background: var(--jk-indigo-0); border: 1px solid var(--jk-line); overflow: hidden; }
.jk-prog-bar i { display: block; height: 100%; background: var(--jk-talisman); }

/* 오른쪽 — 소모품 · 덱 */
.jk-side { grid-area: side; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.js-block { background: var(--jk-indigo-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px; }
.js-title { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 6px; }
.js-cons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.jk-cons { display: flex; flex-direction: column; align-items: center; gap: 3px; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 3px; font-family: inherit; color: var(--text-sub); cursor: pointer; min-width: 0; }
.jk-cons.empty { border: 1px dashed var(--border-strong); aspect-ratio: 2 / 3; cursor: default; opacity: 0.6; }
.jk-cons.on { border-color: var(--jk-talisman); }
.jco-img, .jk-cons .jk-chip-ch, .jdl-art .jco-img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; border-radius: 3px; display: flex; background: var(--jk-hanji); color: var(--jk-ink); font-size: 1.2rem; }
.jk-cons.k-manual .jk-chip-ch { background: color-mix(in srgb, var(--jk-copper) 50%, var(--jk-indigo-2)); color: var(--jk-hanji); }
.jco-name { font-size: 0.64rem; line-height: 1.2; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js-deck { margin-top: auto; display: flex; align-items: center; gap: 8px; background: var(--jk-indigo-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px; font-family: inherit; color: var(--text-sub); cursor: pointer; text-align: left; }
.js-deck:hover { border-color: var(--border-strong); }
.jd-back { width: 46%; aspect-ratio: 5 / 7; border-radius: 6px; overflow: hidden; background: var(--jk-indigo); box-shadow: 2px 2px 0 var(--jk-indigo-0), 4px 4px 0 var(--jk-line); flex-shrink: 0; }
.jd-img, .jd-back .jk-chip-ch, .jc-back .jk-chip-ch { width: 100%; height: 100%; object-fit: cover; display: flex; font-size: 1.2rem; border-radius: 0; }
.jd-left b { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.6rem); color: var(--text-main); }
.jd-left small { font-size: 0.72rem; color: var(--text-dim); }

/* 손패 */
.jk-handzone { grid-area: hand; min-width: 0; }
.jz-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 1.6em; font-size: 0.76rem; color: var(--text-dim); margin-bottom: 4px; }
.jz-note b { color: var(--jk-talisman); }
.jk-hand { display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 0.5vw, 10px); padding: calc(var(--jk-card-w) * 0.28) 4px 6px; min-height: calc(var(--jk-card-w) * 1.7); }
.jz-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; }
.jz-sort { display: flex; gap: 4px; margin-right: auto; }
.jz-acts .jz-sort + .act-btn { margin-left: auto; }
.act-btn { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: clamp(0.88rem, 0.82rem + 0.25vw, 1.2rem); font-weight: 800; padding: 10px clamp(18px, 1.6vw, 34px); border-radius: 10px; cursor: pointer; border: 1px solid; }
.act-btn small { font-size: 0.66rem; font-weight: 400; opacity: 0.75; }
.act-btn.play { background: var(--jk-talisman); border-color: var(--jk-talisman); color: var(--jk-ink); }
.act-btn.discard { background: transparent; border-color: var(--jk-cinnabar-hi); color: var(--jk-cinnabar-hi); }
.act-btn.sm { font-size: 0.78rem; padding: 6px 12px; }
.act-btn:hover:not(:disabled) { filter: brightness(1.06); }
.act-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 트럼프 — 한지 앞면, 사군자 무늬(매·국 주사 · 죽·난 먹) 아이콘, 숫자 카드는 무늬를 숫자만큼 배치 (SPEC §11) */
.jk-card {
    position: relative; flex: 0 0 auto;
    width: var(--jk-card-w); aspect-ratio: 5 / 7;
    background: var(--jk-hanji);
    background-image: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.5), transparent 60%);
    border: 1px solid color-mix(in srgb, var(--jk-ink) 25%, var(--jk-hanji));
    border-radius: calc(var(--jk-card-w) * 0.09);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
    color: var(--jk-ink);
    font-family: var(--font-sans);
    display: block; overflow: visible;
    user-select: none;
}
.jk-card.red { color: var(--jk-cinnabar); }
.jc-corner { position: absolute; top: 4%; left: 5%; display: flex; flex-direction: column; align-items: center; line-height: 0.95; gap: 1px; z-index: 1; }
.jc-corner b { font-size: calc(var(--jk-card-w) * 0.2); font-weight: 900; letter-spacing: -0.09em; }
.jc-corner.br { top: auto; left: auto; bottom: 4%; right: 5%; transform: rotate(180deg); }
/* 무늬 아이콘 (그림 없으면 매/국/죽/난 글자 — 카드 글자색 그대로) */
.jc-si { width: calc(var(--jk-card-w) * 0.17); height: calc(var(--jk-card-w) * 0.17); object-fit: contain; display: block; }
.jc-si.sm { width: calc(var(--jk-card-w) * 0.15); height: calc(var(--jk-card-w) * 0.15); }
.jc-si.jk-chip-ch { background: transparent; color: inherit; border-radius: 0; font-weight: 900; font-size: calc(var(--jk-card-w) * 0.15); display: inline-flex; }
.jc-si.sm.jk-chip-ch { font-size: calc(var(--jk-card-w) * 0.12); }
.jc-pips { position: absolute; inset: 10% 27%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(7, 1fr); place-items: center; }
.jc-pip { display: flex; align-items: center; justify-content: center; }
.jc-pip.flip { transform: rotate(180deg); }
.jc-face { position: absolute; inset: 15% 15%; display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: calc(var(--jk-card-w) * 0.05); overflow: hidden; }
.jc-face-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-face .jk-chip-ch { width: 100%; height: 100%; background: transparent; color: inherit; border-radius: 0; font-family: "hb-games-display", var(--font-sans); font-weight: 400; font-size: calc(var(--jk-card-w) * 0.44); display: flex; }
.jc-enh { position: absolute; left: 50%; bottom: -1px; transform: translate(-50%, 50%); font-size: max(9px, calc(var(--jk-card-w) * 0.15)); font-weight: 800; padding: 0 5px; border-radius: 4px; background: var(--jk-ink); color: var(--jk-hanji); white-space: nowrap; z-index: 1; }
/* 강화는 테두리 + 작은 표식 */
.jk-card.e-bonus { border: 3px solid var(--jk-indigo-3); }
.jk-card.e-mult { border: 3px solid var(--jk-cinnabar); }
.jk-card.e-mult .jc-enh { background: var(--jk-cinnabar); }
.jk-card.e-wild { border: 3px dashed var(--jk-copper); }
.jk-card.e-glass { background: color-mix(in srgb, var(--jk-hanji) 70%, var(--jk-indigo-3)); border: 2px solid var(--jk-hanji); opacity: 0.94; }
.jk-card.e-steel { border: 3px solid color-mix(in srgb, var(--jk-indigo-3) 55%, var(--jk-hanji)); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.45), transparent 40%, rgba(0, 0, 0, 0.08)); }
.jk-card.e-gold { border: 3px solid var(--jk-copper); background-color: color-mix(in srgb, var(--jk-hanji) 82%, var(--jk-talisman)); }
.jk-card.e-gold .jc-enh { background: var(--jk-copper); }
.jk-card.e-lucky { border: 3px double var(--jk-talisman); }
.jk-card.stone { background: color-mix(in srgb, var(--jk-indigo-3) 45%, var(--jk-ink)); background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 50%), radial-gradient(circle at 70% 75%, rgba(0, 0, 0, 0.25), transparent 45%); border-color: var(--jk-ink); color: var(--jk-hanji); }
.jc-stone { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "hb-games-display", var(--font-sans); font-size: calc(var(--jk-card-w) * 0.36); opacity: 0.8; }
.jk-card.down { background: var(--jk-indigo-2); border-color: var(--jk-line-2); }
.jc-back { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: flex; }
/* 손패 안 카드 */
.jk-hand .jk-card { cursor: pointer; transition: transform 0.14s ease-out, box-shadow 0.14s; }
.jk-hand .jk-card:hover { transform: translateY(-6%); }
.jk-hand .jk-card.sel { transform: translateY(-24%); box-shadow: 0 0 0 2px var(--jk-talisman), 0 8px 14px rgba(0, 0, 0, 0.45); }
.jk-hand .jk-card:focus-visible { outline: 3px solid var(--jk-hanji); outline-offset: 3px; }
.jk-hand .jk-card.gone { visibility: hidden; }
.jk-played .jk-card.hit { box-shadow: 0 0 0 2px var(--jk-talisman), 0 6px 14px rgba(0, 0, 0, 0.45); }
.jk-card.bump { animation: jk-bump 0.24s ease-out; }
@keyframes jk-bump { 0% { transform: translateY(0); } 40% { transform: translateY(-10%); } 100% { transform: translateY(0); } }
.jk-card.broken { opacity: 0.25; filter: grayscale(1); }
.jk-card.debuffed { filter: grayscale(0.9) brightness(0.7); }
.jb-boss.bump { animation: jk-swell 0.32s ease-out; }
.jk-pop { position: absolute; left: 50%; top: -6%; transform: translate(-50%, -100%); z-index: 4; font-weight: 900; font-size: max(12px, calc(var(--jk-card-w) * 0.2)); padding: 1px 6px; border-radius: 5px; background: var(--jk-hanji); color: var(--jk-ink); white-space: nowrap; pointer-events: none; animation: jk-pop 0.9s ease-out forwards; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.jk-pop.mult { background: var(--jk-cinnabar); color: var(--jk-hanji); }
@keyframes jk-pop { 0% { opacity: 0; transform: translate(-50%, -60%); } 20% { opacity: 1; transform: translate(-50%, -100%); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%); } }
/* 첫 화면·꾸러미·결과 안 카드는 조금 작게 */
.jpk-opt .jk-card { --jk-card-w: clamp(56px, 5vw, 120px); }

/* 판 단계별 — 손패가 없는 단계는 가운데를 넓게, 점수판의 기본점×배수 칸은 판 진행 중에만 */
.jk-table:not([data-phase="play"]) .jb-hand { display: none; }
.jk-table[data-phase="pre"], .jk-table[data-phase="shop"], .jk-table[data-phase="pack"], .jk-table[data-phase="won"], .jk-table[data-phase="lost"] { grid-template-areas: "board charms side" "board felt side" "board felt side"; }

/* ── 공용 창 ── */
.jk-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(8, 12, 24, 0.72); align-items: center; justify-content: center; padding: 20px; }
.jk-overlay.open { display: flex; }
.jk-dialog { background: var(--jk-indigo-2); color: var(--text-sub); border: 1px solid var(--border-strong); border-radius: 14px; padding: 16px 18px; width: min(620px, 100%); max-height: 86vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.jk-dialog h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; color: var(--text-main); }
.jk-dialog .dd-close { margin-left: auto; font-family: inherit; font-size: 0.74rem; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-sub); cursor: pointer; }
.jdl-item { display: grid; grid-template-columns: clamp(70px, 22%, 120px) minmax(0, 1fr); gap: 14px; align-items: start; }
.jdl-art { display: block; width: 100%; }
.jdl-art.jk-charm { cursor: default; }
.jdl-tag { font-size: 0.72rem; color: var(--text-dim); }
.jdl-desc { margin: 6px 0; font-size: 0.9rem; color: var(--text-main); line-height: 1.6; }
.jdl-sub { margin: 6px 0; font-size: 0.76rem; color: var(--text-dim); line-height: 1.6; }
.jdl-warn { margin: 6px 0; font-size: 0.78rem; color: var(--jk-cinnabar-hi); }
.jdl-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.jtd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(46px, 4vw, 72px), 1fr)); gap: 6px; max-height: 52vh; overflow-y: auto; padding: 14px 2px 4px; }
.jtd-opt { background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: 6px; }
.jtd-opt .jk-card { --jk-card-w: clamp(44px, 3.8vw, 70px); }
.jtd-opt.on .jk-card { transform: translateY(-8px); box-shadow: 0 0 0 2px var(--jk-talisman), 0 6px 12px rgba(0, 0, 0, 0.45); }
.jk-deckcount tr.red th, .jk-deckcount tr.red .suit { color: var(--jk-cinnabar-hi); }
.jk-deckcount td.zero { color: var(--text-dim); opacity: 0.5; }
.jk-deckcount .suit { display: inline-flex; vertical-align: -3px; --jk-card-w: 90px; }


/* ── 채팅 (사건 수사와 같은 모양, 색만 이 게임 토큰) ── */

/* ── 4K — 큰 화면은 글자도 함께 키움 ── */
@media (min-width: 2400px) {
    .jk-root { font-size: 1.25rem; }
    .jk-root .mini-btn, .jk-root .chip-btn, .jk-root .tab-btn { font-size: 0.95rem; }
}

/* ── 태블릿 — 점수판은 위 한 줄, 오른쪽 칸은 아래 ── */
@media (max-width: 1024px) {
    .jk-root .wrap { max-width: 100%; }
    .jk-table {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "board" "charms" "felt" "hand" "side";
        grid-template-rows: auto;
        --jk-card-w: clamp(52px, 9.4vw, 96px);
    }
    .jk-table[data-phase] { grid-template-areas: "board" "charms" "felt" "hand" "side"; }
    .jk-board { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-areas: "blind target score hand" "counts counts run hand" "boss boss boss boss"; align-items: center; gap: 6px 14px; }
    .jb-blind { grid-area: blind; }
    .jb-target { grid-area: target; flex-direction: column; align-items: flex-start; gap: 0; }
    .jb-score { grid-area: score; flex-direction: column; align-items: flex-start; gap: 0; }
    .jb-hand { grid-area: hand; }
    .jb-counts { grid-area: counts; }
    .jb-small { grid-area: run; flex-direction: column; align-items: flex-start; gap: 0; }
    .jb-boss { grid-area: boss; flex-direction: row; flex-wrap: wrap; }
    .jk-side { flex-direction: row; align-items: stretch; }
    .js-block { flex: 1; }
    .js-cons { grid-template-columns: repeat(4, minmax(0, 72px)); }
    .js-deck { margin-top: 0; width: clamp(130px, 28vw, 220px); }
    .jd-back { width: 40%; }
    .jk-first { grid-template-columns: minmax(0, 1fr); }
    .me-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 휴대폰 — 점수판 위 한 줄 요약, 부적 띠 가로 밀기, 손패 겹쳐 보기 ── */
@media (max-width: 600px) {
    .jk-root .wrap { padding: 10px 10px 90px; }
    .jk-table { padding: 6px; gap: 6px; border-radius: 12px; --jk-card-w: 16vw; }
    .jk-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "blind blind blind" "target score run" "hand hand hand" "counts counts counts" "boss boss boss"; padding: 8px; gap: 4px 8px; }
    .jb-num { font-size: 1.05rem; }
    .jh-calc { margin: 2px 0; }
    .jh-chips, .jh-mult { font-size: 1.15rem; }
    .jh-seal { padding: 3px 8px 2px; }
    .jh-stack i { width: 20px; }
    .jb-hand { padding: 6px; }
    .jb-cnt { padding: 3px; flex-direction: row; justify-content: center; gap: 6px; }
    .jb-cnt b { font-size: 0.95rem; }
    .jc-hint { display: none; }
    .jc-strip { min-height: 0; padding: 6px; }
    .jk-charm { flex-basis: 16vw; }
    .jk-hand { justify-content: center; gap: 0; padding-top: calc(var(--jk-card-w) * 0.34); }
    /* 기본 36% 겹침, 손패가 많아(9장+) 넘치면 손패 칸 폭에 맞게 더 겹침 — --n은 renderHand가 넣는 카드 수, %는 손패 칸 폭 */
    .jk-hand .jk-card + .jk-card { margin-left: min(calc(var(--jk-card-w) * -0.36), calc((100% - var(--n, 8) * var(--jk-card-w)) / (var(--n, 8) - 1))); }
    .jk-hand .jk-card.sel { transform: translateY(-28%); }
    .jk-hand .jk-card:hover { transform: none; }
    .jk-hand .jk-card.sel:hover { transform: translateY(-28%); }
    .jz-acts { gap: 6px; }
    .jz-sort { width: 100%; justify-content: center; margin: 0 0 2px; }
    .jz-acts .jz-sort + .act-btn { margin-left: 0; }
    .act-btn { flex: 1; justify-content: center; padding: 11px 10px; }
    .act-btn small { display: none; }
    .ji-row { grid-template-columns: minmax(0, 1fr); }
    .ji-blind { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; }
    .ji-blind .big-btn { width: 100%; }
    .jib-boss { flex-direction: row; text-align: left; width: 100%; }
    .jsh-items, .jsh-packs, .jpk-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .jsh-acts { justify-content: stretch; }
    .jsh-acts > * { flex: 1 1 auto; justify-content: center; }
    .jk-side { flex-direction: column; }
    .js-cons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .js-deck { width: 100%; }
    .jd-back { width: 18%; }
    .jk-panel.daily { grid-template-columns: minmax(0, 1fr); }
    .dy-deck { width: 90px; }
    .me-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .run-head .rh-acts { width: 100%; margin-left: 0; }
    .run-head .rh-acts .mini-btn { flex: 1 1 0; justify-content: center; }
    .jk-overlay, .hbs-overlay { padding: 10px; align-items: flex-end; }
    .jk-dialog, .season-box { padding: 14px; max-height: 88vh; }
    .jdl-item { grid-template-columns: 70px minmax(0, 1fr); }
    .jk-root .mini-btn, .jk-root .chip-btn, .chat-close, .chat-send, .dd-close, .sx-close, .buy-btn { min-height: 38px; }
}

/* ── 모션 줄이기 — 도장·튀어 오름 없이 숫자만 ── */
@media (prefers-reduced-motion: reduce) {
    .jk-stamp, .jk-pop { display: none; }
    .jk-charm.fire .jch-paper, .jh-seal.swell, .jh-total.land, .jk-card.bump, .jb-money b.bump, .jb-cnt b.bump { animation: none; }
    .jk-hand .jk-card { transition: none; }
    .jk-root * { scroll-behavior: auto !important; }
}
body[data-hb-chat] :is(.chat-fab, .chat-panel) { --chat-accent: var(--jk-hanji); --chat-accent-ink: var(--jk-ink); } /* 채팅 단추·창 공용 규칙(style.css)에 넘기는 이 게임 색 */