/*
 * holdemgo — 대회 일정 화면 스타일
 *
 * 색은 전부 변수로 뽑아 두었다. <b>테마는 둘</b>이다 — 베이지(기본)와 다크.
 * <html data-theme="dark"> 가 붙으면 값을 갈아끼운다. 이렇게 해두면 색을
 * 바꿀 때 이 위쪽만 고치면 된다.
 *
 * 밝은 테마(data-theme="light")는 (96) 에서 <b>지웠다</b>(사용자 지시).
 * 되살릴 일이 있으면 지운 자리가 아니라 베이지 블록을 본떠 새로 만든다 —
 * 바탕만 바꾸면 안 되고 테두리·흐린 글자·배지까지 같이 내려야 한다.
 *
 * ⚠️ 아래 :root 블록에는 <b>다크 값</b>이 들어 있다. 기본이 아니라
 *    바탕값일 뿐이고, 실제로 처음 보이는 색은 그 아래 베이지 블록이
 *    덮어쓴다(:root:not([data-theme])). 색을 고칠 때 여기만 보고
 *    "왜 안 바뀌지" 하지 말 것.
 *
 * ⚠️ 밝은 테마를 하나 더 만들 때 <b>바탕만 바꾸면 안 된다.</b>
 *    테두리·흐린 글자·배지까지 같은 폭으로 함께 내려야 한다.
 *    바탕만 진해지면 나머지가 붕 떠서 색이 겉돈다.
 */

/*
 * hidden 속성은 반드시 먹게 한다.
 *
 * 브라우저 기본 규칙([hidden]{display:none})은 우선순위가 가장 낮아서,
 * 우리가 .entry-form label { display: flex } 같은 걸 하나만 써 놔도 진다.
 * 실제로 그랬다 — 토너먼트에서 블라인드 칸에 hidden 을 붙였는데 화면에는
 * 그대로 남아 있었다. el.hidden 은 true 인데 눈에는 보이는 상태라,
 * 자바스크립트로 확인하면 멀쩡해 보여서 더 늦게 찾는다.
 */
[hidden] { display: none !important; }

:root {
    /*
     * 브라우저가 직접 그리는 부품들 — 시각 입력칸의 시계 아이콘, 숫자칸의
     * 위아래 화살표, select 를 눌렀을 때 내려오는 목록, 스크롤바, 자동완성
     * 노란 배경 — 은 우리 CSS 로 색을 못 바꾼다. 이 한 줄이 없으면 브라우저는
     * 밝은 화면인 줄 알고 검은 아이콘을 그린다. 검은 칸 위에 검은 아이콘이라
     * 안 보인다. 실제로 시각 입력칸의 시계가 보이지 않았다.
     */
    color-scheme: dark;

    --bg: #0a0b0d;
    --surface: #131519;
    --surface-2: #1b1e24;
    --surface-3: #0f1114;
    --border: #282d36;
    --border-strong: #3b4250;
    --text: #f6f8fb;
    --text-sub: #ced5e0;
    --label: #99a2b0;
    --muted: #78818f;

    /* 카드 문양의 빨강을 강조색으로 쓴다. 포커라는 걸 색만으로 알게 한다. */
    --accent: #e04a5a;
    --accent-soft: rgba(224, 74, 90, 0.14);
    --ok: #3ee08d;
    --live: #ffb02e;
    --warn: #ffb02e;
    /*
     * 자리 이름(BTN·SB·hero) 전용 색.
     * 액션은 빨강(상대)·초록(나)으로 갈라 두었으므로, 자리는 그 둘과
     * 안 겹치는 색이어야 '누가' 와 '무엇을' 이 눈에서 갈린다.
     */
    --seat: #7fb3ff;
    /*
     * 팟 색. 거리마다 붙는 것은 흐린 금빛, 최종 팟은 --warn 그대로.
     * 값을 못 박아 둔다 — color-mix 로 섞었더니 테두리·바탕에는 먹는데
     * 글자색에만 안 먹는 일이 있었다. 추측하지 말고 정해 둔다.
     */
    --pot: #c9973f;

    /*
     * 포커 일지 한 줄의 색.
     * 한 줄에 숫자가 넷씩 들어가서 색이 없으면 다 같아 보인다.
     *   장소 노랑 / 바이인 빨강(나간 돈) / 아웃 초록(들어온 돈)
     * 빨강·초록의 뜻은 수익 표시와 같게 맞췄다. 규칙이 하나여야 외운다.
     * 종류는 서로 안 헷갈릴 만큼만 떨어뜨린다.
     */
    --venue: #f2c14e;
    --kind-tour: #a78bfa;
    --kind-tour-bg: rgba(167, 139, 250, 0.13);
    --kind-time: #4ecdc4;
    --kind-time-bg: rgba(78, 205, 196, 0.13);

    --on-solid: #ffffff;
    --tint: rgba(255, 255, 255, 0.04);
    --shadow: rgba(0, 0, 0, 0.5);

    --radius: 4px;

    /* 좌 300 + 간격 20 + 본문 1000 + 간격 20 + 우 300.
       좌우 레일은 애드센스 300×600 규격에 맞춘 폭이다. */
    --content-width: 1000px;
    --rail-width: 300px;
    --gutter: 20px;
    --page-pad: 16px;
    --shell-width: calc(
        var(--content-width) + var(--rail-width) * 2 +
        var(--gutter) * 2 + var(--page-pad) * 2
    );
}


/*
 * 베이지.
 *
 * 흰 화면이 눈에 시린 사람을 위한 테마다. 종이에 가까운 바탕을 쓴다.
 *
 * ⚠️ <b>바탕만 내리지 않았다.</b> 테두리·흐린 글자·배지를 같은 폭으로
 *    함께 내렸다. 카드는 바탕보다 밝게 두어 <b>바탕 위에 떠오르는 관계</b>를
 *    지켰다 — 카드가 바탕과 같으면 어디까지가 한 덩어리인지 안 보인다.
 *
 * ⚠️ 대비는 <b>바탕(#ece2cc) 쪽이 더 빡빡하다.</b> 카드(#f9f3e4)보다
 *    어둡기 때문이다. 그래서 글자색은 바탕 기준으로 잡았다.
 *    두 곳 다 AA(4.5:1) 를 넘는지는 브라우저에서 재서 확인했다.
 */
/*
 * ⚠️ 두 줄짜리 선택자다.
 *    :not([data-theme])  아무것도 안 고른 <b>첫 방문</b> — 이게 기본값이다
 *    [data-theme=beige]  베이지를 골라 둔 사람
 *
 * 다크([data-theme="dark"])와 <b>겹치지 않는다.</b> 그쪽은 속성이 있으므로
 * :not 에 안 걸린다 — 그래서 두 블록의 순서를 따질 필요가 없다.
 * 순서에 기대는 규칙은 나중에 파일을 옮기다 조용히 깨진다.
 */
:root:not([data-theme]),
:root[data-theme="beige"] {
    color-scheme: light;

    --bg: #ece2cc;
    --surface: #f9f3e4;
    --surface-2: #e3d8bf;
    --surface-3: #f2ebda;
    --border: #d4c7a9;
    --border-strong: #b6a17c;
    --text: #1d1a12;
    --text-sub: #383226;
    --label: #524b3a;
    --muted: #645c47;

    --accent: #b02f3e;
    --accent-soft: rgba(176, 47, 62, 0.12);
    --ok: #0c6f3e;
    --live: #8a5c04;
    --warn: #8a5c04;
    --seat: #2a4f9e;
    --pot: #74500f;

    --venue: #78550f;
    --kind-tour: #5530ab;
    --kind-tour-bg: rgba(85, 48, 171, 0.11);
    --kind-time: #0e5d58;
    --kind-time-bg: rgba(14, 93, 88, 0.11);

    --tint: rgba(0, 0, 0, 0.035);
    --shadow: rgba(0, 0, 0, 0.14);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ── 머리말 ───────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    max-width: var(--shell-width);
    margin: 0 auto;
    padding: 0 var(--page-pad);
    height: 56px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.logo {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}
.logo span { color: var(--accent); }

.nav {
    display: flex;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav-link {
    padding: 8px 12px;
    color: var(--label);
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--radius);
}
.nav-link:hover { background: var(--tint); color: var(--text); }
.nav-link.active { color: var(--text); background: var(--accent-soft); }

/* 준비 중인 메뉴는 점 하나로만 표시한다. 글자로 "준비중"을 붙이면 메뉴가 지저분해진다. */
.nav-link.soon::after {
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    margin-left: 5px;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--muted);
}

/*
 * 테마 고르개.
 *
 * 둘일 때는 '다크/라이트' 를 번갈아 누르는 단추 하나로 됐는데, 셋이 되면
 * 다음에 뭐가 나올지 모른 채 눌러야 한다. 셋을 다 늘어놓고 고르게 한다.
 *
 * ⚠️ 동그라미는 <b>그 테마의 실제 바탕색</b>이다. 값이 달라지면 여기도
 *    같이 고쳐야 한다 — 동그라미가 실제와 다르면 고르개가 거짓말을 한다.
 */
.theme-pick {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
}
.theme-dot {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
}
.theme-dot[data-theme-set="dark"]  { background: #0a0b0d; }
.theme-dot[data-theme-set="beige"] { background: #ece2cc; }

/* 지금 쓰는 것에 테를 두른다. 색만으로는 어느 것이 켜졌는지 안 보인다 */
.theme-dot.on {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
}
.theme-dot:hover { border-color: var(--text-sub); }

@media (max-width: 640px) {
    .theme-pick { gap: 4px; padding: 3px 4px; }
    .theme-dot { width: 18px; height: 18px; }
}

/* ── 뼈대 ─────────────────────────────────────────── */

.page-shell {
    max-width: var(--shell-width);
    margin: 0 auto;
    padding: 20px var(--page-pad) 60px;
    display: flex;
    gap: var(--gutter);
    align-items: flex-start;
}

.content {
    flex: 1;
    min-width: 0;      /* 이게 없으면 안쪽 표가 넘칠 때 열이 밀려난다 */
    max-width: var(--content-width);
}

.rail { width: var(--rail-width); flex-shrink: 0; }
.rail-sticky { position: sticky; top: 76px; }

/* ── 광고 자리 ────────────────────────────────────── */

.ad-slot {
    background: var(--surface-3);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.ad-rail { min-height: 600px; }
.ad-banner { min-height: 250px; }
.ad-bottom { margin: 20px 0 0; }

.ad-placeholder {
    color: var(--muted);
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
}

/* 실제 광고가 채워지면 자리 표시 문구와 점선 테두리는 비켜준다 */
.ad-slot:has(ins[data-ad-status="filled"]) {
    border-style: none;
    background: transparent;
    min-height: 0;
}
.ad-slot:has(ins[data-ad-status="filled"]) .ad-placeholder { display: none; }

/* ── 첫인사 ───────────────────────────────────────── */

.hero { margin-bottom: 18px; }
.hero h1 {
    margin: 0 0 6px;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.6px;
}
.hero p { margin: 0; color: var(--label); }
.hero strong { color: var(--text); }

/* ── 알림 띠 ──────────────────────────────────────── */

.notice {
    padding: 11px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    margin-bottom: 16px;
    font-size: 15px;
    color: var(--text-sub);
}
.notice-warn {
    border-color: color-mix(in srgb, var(--warn) 45%, transparent);
    background: color-mix(in srgb, var(--warn) 10%, var(--surface));
}
.notice strong { color: var(--text); margin-right: 6px; }

/* ── 요약 숫자 ────────────────────────────────────── */

.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}
.stat-label {
    display: block;
    color: var(--label);
    font-size: 14px;
    margin-bottom: 4px;
}
.stat-value {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.stat-value.ok { color: var(--ok); }
.stat-value.live { color: var(--live); }
/* 가장 가까운 대회 이름은 길어서 숫자보다 작게 쓴다 */
#stat-next { font-size: 16px; font-weight: 600; line-height: 1.4; display: block; }

/* ── 판 ──────────────────────────────────────────── */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.panel-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-group { display: flex; gap: 4px; flex-wrap: wrap; }

.chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--label);
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-solid);
}

.toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--label);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.toggle input { accent-color: var(--accent); cursor: pointer; }

/* ── 대회 목록 ────────────────────────────────────── */

.month-head {
    margin: 18px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    font-weight: 700;
    color: var(--label);
    letter-spacing: 0.4px;
}
.month-head:first-child { margin-top: 0; }

.card {
    display: flex;
    gap: 14px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    margin-bottom: 8px;
    align-items: flex-start;
}
.card:hover { border-color: var(--border-strong); }

/* 왼쪽 날짜 칸. 폭을 고정해야 아래로 줄이 맞는다. */
.card-date {
    width: 74px;
    flex-shrink: 0;
    text-align: center;
    padding-top: 2px;
}
.card-date .d-day {
    display: block;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.4px;
}
.card-date .d-day.live { color: var(--live); }
.card-date .d-day.done { color: var(--muted); }
.card-date .date-text {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-top: 2px;
}

.card-body { flex: 1; min-width: 0; }

.card-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.card-meta {
    color: var(--label);
    font-size: 14.5px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.card-meta span { white-space: nowrap; }
.card-meta .sep { color: var(--border-strong); }

.card-note {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--muted);
}
/* 안내 글이 길면 문단으로 나뉘어 들어온다 */
.card-note p { margin: 0 0 5px; }
.card-note p:last-child { margin-bottom: 0; }

.card-link {
    flex-shrink: 0;
    align-self: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    padding: 6px 10px;
    border-radius: var(--radius);
}
.card-link:hover { background: var(--accent-soft); }

/* 딱지 */
.tag {
    font-size: 12.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.2px;
}
.tag-region { background: var(--surface-2); color: var(--label); border: 1px solid var(--border); }
.tag-verified { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.tag-unverified { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.tag-live { background: var(--live); color: #1a1200; }

.loading, .empty {
    color: var(--muted);
    text-align: center;
    padding: 30px 0;
}

/* ── 준비 중 화면 ─────────────────────────────────── */

.placeholder-body { padding: 40px 0; text-align: center; }
.placeholder-badge {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
}
.placeholder-note {
    margin: 0 auto;
    max-width: 460px;
    color: var(--label);
    line-height: 1.7;
}

/* ── 꼬리말 고지 ──────────────────────────────────── */

.disclaimer {
    margin: 24px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

/* ── 좁은 화면 ────────────────────────────────────── */

/* 레일이 들어갈 자리가 없어지면 광고 레일부터 숨긴다.
   본문이 먼저다. */
@media (max-width: 1360px) {
    .rail-right { display: none; }
}
@media (max-width: 1040px) {
    .rail-left { display: none; }
}

@media (max-width: 720px) {
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .header-inner { gap: 12px; }
    .logo { font-size: 18px; }
    .panel { padding: 12px; }
    .card { flex-wrap: wrap; gap: 10px; }
    .card-date { width: 60px; }
    .card-link { align-self: flex-start; }
    .hero h1 { font-size: 22px; }
}

/* ══════════════════════════════════════════════════
   글 문서 (입문 가이드 등)
   ══════════════════════════════════════════════════ */

/* 위치 표시 */
.crumb {
    font-size: 14.5px;
    color: var(--muted);
    margin-bottom: 12px;
}
.crumb a { color: var(--label); }
.crumb a:hover { color: var(--accent); text-decoration: underline; }
.crumb span { margin: 0 5px; }

/*
 * ⚠️ 카드를 <b>글 폭에 맞춘다.</b>
 *
 * 전에는 카드가 1,200px 인데 글줄은 568px 이었다. 오른쪽 570px 가 통째로
 * 비어서, 넓은 화면에서는 '덜 만든 자리'처럼 보였다. 표와 제목만 끝까지
 * 늘어나 있어서 더 어긋나 보였다.
 *
 * 글 폭을 조금 넓히고(한글 한 줄 39자 안팎) 카드를 그만큼으로 줄인 뒤
 * 가운데로 모은다. 남는 여백이 양쪽으로 갈리면 '여백'으로 읽힌다.
 */
.doc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 28px 30px;
    max-width: 820px;
    margin-inline: auto;
}

/* 글은 화면 폭이 아무리 넓어도 한 줄이 너무 길면 읽기 어렵다.
   눈이 다음 줄 첫머리를 못 찾기 때문이다. */
.doc > p,
.doc > ol,
.doc > ul { max-width: 76ch; }

.doc h1 {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.7px;
}

.doc h2 {
    margin: 36px 0 14px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.doc h3 { margin: 0; font-size: 17px; font-weight: 700; }

/*
 * 문단을 문장 단위로 잘게 나눴으므로 사이를 조인다.
 * 나눈 만큼 벌려 두면 한 이야기가 여러 토막처럼 보인다 —
 * <b>가르되 멀어지지는 않게</b>.
 */
.doc p { margin: 0 0 10px; color: var(--text-sub); line-height: 1.72; }
.doc strong { color: var(--text); font-weight: 700; }
.doc em { font-style: normal; color: var(--accent); font-weight: 600; }

.lead {
    font-size: 16.5px !important;
    color: var(--text) !important;
    line-height: 1.8 !important;
}

.doc a { color: var(--accent); font-weight: 600; }
.doc a:hover { text-decoration: underline; }

.doc-updated {
    margin: 30px 0 0 !important;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--muted) !important;
}

/* 축 문서의 차례 */
.doc-index { list-style: none; padding: 0; margin: 0; }
.doc-index li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    margin-bottom: 8px;
}
.doc-index li > a,
.doc-index li > .soon-item { font-size: 17px; font-weight: 700; }
.doc-index li > .soon-item { color: var(--muted); }
.doc-index li > span:last-child { font-size: 14.5px; color: var(--label); }

.next-list { padding-left: 18px; }
.next-list li { margin-bottom: 6px; color: var(--text-sub); }

/* ── 카드 그림 ────────────────────────────────────── */

/*
 * 카드는 이미지가 아니라 글자로 그린다.
 * 이미지를 쓰면 저작권을 따져야 하고, 화면 크기마다 흐려진다.
 * 무늬 기호(♠♥♦♣)는 유니코드라 어디서나 나온다.
 */
.cards {
    display: flex;
    gap: 6px;
    margin: 0 0 14px;
    flex-wrap: wrap;
}

.pc {
    width: 46px;
    height: 62px;
    background: #ffffff;
    color: #14171c;
    border: 1px solid #c8ced8;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    box-shadow: 0 1px 3px var(--shadow);
    flex-shrink: 0;
}
.pc b { font-size: 18px; font-weight: 800; line-height: 1; }
.pc i { font-size: 17px; font-style: normal; line-height: 1; }
.pc.red { color: #d0293c; }

/* 족보를 이루지 않는 나머지 카드는 흐리게 — 어느 게 핵심인지 바로 보이게 */
.pc.muted { opacity: 0.45; }

.cards.small .pc { width: 38px; height: 52px; }
.cards.small .pc b { font-size: 16px; }
.cards.small .pc i { font-size: 14px; }

/* ── 족보 한 칸 ──────────────────────────────────── */

.hand {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    margin-bottom: 10px;
}

.hand-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.hand-rank {
    width: 24px; height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-solid);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hand-head h3 em {
    margin-left: 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--muted) !important;
}

.hand-prob {
    margin-left: auto;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--label);
    font-variant-numeric: tabular-nums;
}

.hand p { margin: 0; font-size: 15.5px; }

/* ── 표 ─────────────────────────────────────────── */

/* 좁은 화면에서 표가 페이지를 밀어내지 않도록 표만 따로 굴린다 */
.table-wrap { overflow-x: auto; margin-bottom: 8px; }

.rank-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
    min-width: 460px;
}
.rank-table th {
    text-align: left;
    padding: 9px 10px;
    background: var(--surface-2);
    color: var(--label);
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.rank-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-sub);
}
.rank-table tr:hover td { background: var(--tint); }
.rank-table td b { color: var(--text); }
.rank-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-table .rk {
    color: var(--muted);
    font-weight: 700;
    width: 40px;
}
.rank-table .up { color: var(--ok); font-weight: 700; }
.rank-table .down { color: var(--accent); font-weight: 700; }
.rank-table.compact { min-width: 340px; }

.table-note {
    font-size: 14px !important;
    color: var(--muted) !important;
    margin-bottom: 20px !important;
    line-height: 1.6 !important;
}

/* ── 예시 상자 ────────────────────────────────────── */

.example {
    padding: 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface-3);
    margin-bottom: 16px;
}
.example-title {
    margin: 0 0 12px !important;
    font-weight: 700;
    color: var(--text) !important;
}

.vs { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.vs-side { display: flex; flex-direction: column; gap: 5px; }
.vs-mid {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    padding-bottom: 22px;
}
.vs-label { font-size: 13.5px; color: var(--label); font-weight: 600; }

.board { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.board .cards { margin-bottom: 0; }
.vs .cards { margin-bottom: 0; }

.example-result {
    margin: 14px 0 0 !important;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 15.5px !important;
}

/* ── 주의할 점 목록 ──────────────────────────────── */

.tips { padding-left: 20px; }
.tips li {
    margin-bottom: 12px;
    color: var(--text-sub);
    line-height: 1.75;
}
.tips strong { color: var(--text); }

/* ── 좁은 화면 ────────────────────────────────────── */

@media (max-width: 720px) {
    .doc { padding: 20px 16px 24px; }
    .doc h1 { font-size: 23px; }
    .doc h2 { font-size: 18px; margin-top: 28px; }
    .pc { width: 40px; height: 55px; }
    .pc b { font-size: 17px; }
    .hand-prob { margin-left: 0; width: 100%; }
}

/* ── 그림 (테이블 자리 배치 등) ────────────────────── */

/*
 * 그림은 이미지 파일이 아니라 SVG로 그린다.
 * 파일이 아니라 코드라서 색을 테마 변수로 쓸 수 있고,
 * 화면을 아무리 키워도 흐려지지 않는다.
 */
.figure {
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
}
.figure svg { width: 100%; height: auto; display: block; max-width: 520px; margin: 0 auto; }

.fig-mid {
    fill: var(--muted);
    font-size: 14px;
    text-anchor: middle;
    font-weight: 600;
}
.fig-seat {
    fill: var(--text);
    font-size: 15px;
    font-weight: 800;
    text-anchor: middle;
}
.fig-sub {
    fill: var(--label);
    font-size: 11.5px;
    font-weight: 600;
    text-anchor: middle;
}
/* 강조색을 꽉 채운 자리 위의 글자는 밝은 색으로 뒤집는다 */
.fig-seat.on, .fig-sub.on { fill: var(--on-solid); }

.figure-cap {
    margin: 14px 0 0 !important;
    font-size: 14.5px !important;
    color: var(--label) !important;
    text-align: center;
    line-height: 1.7 !important;
}
.figure-cap strong { color: var(--text); }

/* 표 안에서 한글 아래 붙는 영어 */
.rank-table .en {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

/* ── 흐름도 (한 판이 어떻게 도는가) ────────────────── */

/*
 * 단계를 가로로 늘어놓되, 좁은 화면에서는 알아서 줄바꿈되게 둔다.
 * 화살표를 그리지 않은 이유는, 줄이 바뀌면 화살표가 엉뚱한 곳을
 * 가리켜 오히려 헷갈리기 때문이다. 번호 대신 순서만 지킨다.
 */
/*
 * 여섯 단계라 3×2로 고정한다.
 * auto-fit으로 두면 화면 폭에 따라 5+1처럼 갈라져서
 * 마지막 하나만 외톨이로 떨어지는 줄이 생긴다.
 */
.flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 0 16px;
}

.flow-step {
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface-3);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.flow-step b { font-size: 15.5px; font-weight: 700; color: var(--text); }
.flow-step span { font-size: 14px; color: var(--label); line-height: 1.5; }

/* ── 준비 중 딱지 ─────────────────────────────────── */

.soon-tag {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    vertical-align: middle;
}

/* ── 자주 묻는 질문 ──────────────────────────────── */

/*
 * 질문을 h3로 두는 이유는 검색엔진이 질문–답 구조를 알아보기 때문이다.
 * 그냥 굵은 글씨로 하면 그 신호가 사라진다.
 */
.faq h3 {
    margin: 20px 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    padding-left: 20px;
    position: relative;
}
.faq h3:first-child { margin-top: 0; }
.faq h3::before {
    content: 'Q';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 800;
}
.faq p { max-width: 68ch; padding-left: 20px; }

/* 좁은 화면에서는 흐름도를 두 칸으로 (3×2 → 2×3) */
@media (max-width: 620px) {
    .flow { grid-template-columns: repeat(2, 1fr); }
    .faq h3 { font-size: 16.5px; }
}

/* ── 용어 사전 ────────────────────────────────────── */

.term-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
}

#term-search {
    flex: 1;
    min-width: 0;
    padding: 10px 13px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
}
#term-search::placeholder { color: var(--muted); }
#term-search:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
}

.term-count {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--label);
    font-variant-numeric: tabular-nums;
}

.terms { margin-bottom: 4px; }

.term {
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    margin-bottom: 8px;
}

/*
 * 용어를 h3로 두는 이유는 검색엔진이 "이 문서 안에 이 항목이 있다"를
 * 알아보게 하기 위해서다. 굵은 글씨로만 두면 그 신호가 사라진다.
 */
.term h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}
.term h3 em {
    margin-left: 7px;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    color: var(--muted);
}
.term p {
    margin: 0 !important;
    font-size: 15.5px !important;
    max-width: 66ch;
}

.empty-terms {
    padding: 26px 0;
    text-align: center;
    color: var(--muted) !important;
}

@media (max-width: 620px) {
    .term-search { flex-wrap: wrap; }
    .term h3 em { display: block; margin: 2px 0 0; }
}

/* 표에서 특히 외워둘 만한 줄을 살짝 띄운다 (플러시·오픈엔드 드로우) */
.rank-table tr.hi td {
    background: var(--accent-soft);
}
.rank-table tr.hi td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* 아웃츠 문서에서 .term 을 설명 상자로 재사용한다. 사전이 아니므로
   질문 앞의 Q 표시는 붙이지 않는다 */
.doc .terms .term h3 { font-size: 16.5px; }

/*
 * 흐름도의 칸 수는 항목 수에 맞춘다.
 * 기본은 3칸(6단계용)이고, 두 칸짜리는 .flow-2 를 붙인다.
 * 안 그러면 항목이 둘인데 격자는 셋이라 오른쪽에 빈칸이 남는다.
 */
.flow.flow-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) {
    .flow.flow-2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════
   데일리 토너먼트
   ══════════════════════════════════════════════════ */

/* 광고를 뺀 화면은 좌우 레일이 없으므로 본문을 넓게 쓴다 */
.shell-wide { max-width: calc(var(--content-width) + 200px + var(--page-pad) * 2); }
.shell-wide .content { max-width: none; }

/* ── 요일 고르기 ──────────────────────────────────── */

.day-picker {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 18px;
}

.daybtn {
    padding: 9px 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--label);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.2;
}
.daybtn:hover { border-color: var(--border-strong); color: var(--text); }
.daybtn b { font-size: 15px; font-weight: 700; }
.daybtn span { font-size: 12.5px; color: var(--muted); }
.daybtn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-solid);
}
.daybtn.active span { color: rgba(255, 255, 255, 0.75); }

/* ── 토너먼트 한 줄 ───────────────────────────────── */

.drow {
    display: flex;
    gap: 14px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    margin-bottom: 8px;
    align-items: flex-start;
}
.drow:hover { border-color: var(--border-strong); }

/* 이미 시작한 판은 흐리게. 지우지 않는 이유는 늦게라도 갈 수 있어서다
   (레지 마감 시각이 함께 보이므로 판단은 보는 사람이 한다) */
.drow.past { opacity: 0.5; }

/* 시작 시각 칸. 폭을 고정해야 아래로 줄이 맞는다 */
.drow-time {
    width: 78px;
    flex-shrink: 0;
    text-align: center;
    padding-top: 1px;
}
.drow-time .start {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.drow-time .latereg {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.drow-body { flex: 1; min-width: 0; }

.drow-title {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* 토너먼트 이름은 업소명과 구분되게 한 단계 눌러 쓴다 */
.drow-tname {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
}
.drow-tname::before { content: '· '; color: var(--border-strong); }

.drow-specs,
.drow-place {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 14.5px;
}
.drow-specs { color: var(--text-sub); margin-bottom: 3px; }
.drow-place { color: var(--muted); font-size: 14px; }
.drow-specs .sep,
.drow-place .sep { color: var(--border-strong); }

/* ── 업주용 안내 상자 ─────────────────────────────── */

.cta {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.cta h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.cta p { margin: 0; font-size: 15px; color: var(--label); }
.cta strong { color: var(--text); }

.cta-btn {
    flex-shrink: 0;
    padding: 10px 18px;
    background: var(--accent);
    color: var(--on-solid);
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 700;
}
.cta-btn:hover { filter: brightness(1.1); }

.fineprint {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}
.fineprint strong { color: var(--text-sub); }

/* ── 좁은 화면 ────────────────────────────────────── */

@media (max-width: 620px) {
    /* 요일 7개를 한 줄에 넣으면 글자가 뭉개진다. 두 줄로 접는다 */
    .day-picker { grid-template-columns: repeat(4, 1fr); }
    .drow { gap: 10px; padding: 11px; }
    .drow-time { width: 62px; }
    .drow-time .start { font-size: 17px; }
    .drow-title { font-size: 16px; }
    .cta { flex-direction: column; align-items: flex-start; }
    .cta-btn { width: 100%; text-align: center; }
}

/* ── 제출 양식 안내 ───────────────────────────────── */

/*
 * 실제 입력칸이 아니라 "무엇을 적어 보내면 되는지"를 보여주는 표다.
 * 입력칸처럼 보이면 눌러보고 안 눌린다고 당황하므로, 왼쪽 항목명과
 * 오른쪽 설명을 나란히 두는 목록 형태로 만든다.
 */
.form-head {
    margin: 22px 0 8px !important;
    font-size: 16px !important;
    font-weight: 700;
    color: var(--text);
}
.form-sub { font-size: 14px; font-weight: 600; color: var(--muted); }

.formspec {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 8px;
}

.frow {
    display: flex;
    gap: 12px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-3);
    font-size: 15px;
}
.frow:last-child { border-bottom: none; }
.frow:nth-child(odd) { background: var(--surface); }

.fk {
    width: 150px;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--text);
}
.fv { color: var(--muted); min-width: 0; }

/* 동의 항목 */
.agree { list-style: none; padding: 0; margin: 0 0 8px; }
.agree li {
    position: relative;
    padding: 10px 13px 10px 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    margin-bottom: 6px;
    font-size: 15.5px;
    color: var(--text-sub);
    line-height: 1.6;
}
/* 네모 표시를 글자로 그린다. 진짜 체크박스로 두면 눌러보게 되는데
   여기는 안내 문서라 눌러도 아무 일이 없어 혼란을 준다. */
.agree li::before {
    content: '☐';
    position: absolute;
    left: 13px;
    top: 9px;
    font-size: 17px;
    color: var(--accent);
}
.agree strong { color: var(--text); }

.cta-btn.disabled {
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
    cursor: default;
}
.cta-btn.disabled:hover { filter: none; }

@media (max-width: 620px) {
    .frow { flex-direction: column; gap: 2px; }
    .fk { width: auto; }
}

/* ── 지역 목록 (등록 안내) ────────────────────────── */

.regionlist {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 8px;
}
.rgroup {
    display: flex;
    gap: 12px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-3);
    align-items: baseline;
}
.rgroup:last-child { border-bottom: none; }
.rgroup-name {
    width: 72px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--label);
}
.rgroup-items { display: flex; flex-wrap: wrap; gap: 5px; }
.rchip {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-sub);
}

@media (max-width: 620px) {
    .rgroup { flex-direction: column; gap: 6px; }
    .rgroup-name { width: auto; }
}

/* ══════════════════════════════════════════════════
   포커 일지
   ══════════════════════════════════════════════════ */

/*
 * 달 이름이 넘기개 <b>사이에</b> 낀다 — ‹ 2026년 8월 ›.
 * 왼쪽을 누르면 왼쪽으로, 오른쪽을 누르면 오른쪽으로 간다.
 * 방향이 그림으로 설명되므로 글자를 읽지 않아도 된다.
 *
 * 제목은 늘어나는 칸이라 가운데에 선다. '이번 달' 은 오른쪽 끝.
 */
.month-nav { display: flex; align-items: center; gap: 8px; }
/*
 * 제목을 늘리지 않는다. 늘리면 넘기개가 화면 양 끝으로 벌어져,
 * 한 번 넘길 때마다 손가락이 반대편까지 가야 한다.
 * 셋이 한 덩어리로 붙어 있고 '이번 달' 만 오른쪽 끝으로 민다.
 */
.month-nav .panel-title {
    flex: none;
    min-width: 0;
    white-space: nowrap;
}
.month-nav .mbtn.today, .month-nav .mbtn.on { margin-left: auto; }

.mbtn {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--label);
    font-size: 18px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}
.mbtn:hover { border-color: var(--border-strong); color: var(--text); }
.mbtn.today { width: auto; padding: 0 11px; font-size: 14px; font-weight: 600; }

.mini-select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 4px 7px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

/* ── 달력 ─────────────────────────────────────────── */

.cal-head, .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.cal-head {
    margin-bottom: 5px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--label);
}
.cal-head .sun { color: var(--accent); }
.cal-head .sat { color: var(--chip-text, #6ba8ff); }

.cell {
    aspect-ratio: 1 / 0.82;
    min-height: 52px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    font-family: inherit;
    padding: 2px;
}
.cell.empty { background: transparent; border-color: transparent; cursor: default; }
.cell:not(.empty):hover { border-color: var(--border-strong); }

.cell .dnum { font-size: 15px; font-weight: 700; color: var(--text-sub); }
.cell.sun .dnum { color: var(--accent); }

/* 기록이 있는 날은 금액을 작게 얹는다. 색으로 손익이 바로 읽힌다 */
.cell .dsum {
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    /* 줄바꿈을 막는다. 꺾이면 그 칸만 키가 커져서 한 줄이 어긋난다 */
    white-space: nowrap;
}
/*
 * 소수까지 붙는 긴 값(+217.73만)만 작게 쓴다.
 *
 * 잘라 내는 것보다 낫다 — <b>잘린 숫자는 틀린 숫자보다 나쁘다.</b>
 * 소수를 버리는 방법도 있지만 그러면 100원 자리가 사라진다.
 * 작게 쓰면 아무것도 안 잃는다.
 */
.cell .dsum.long { font-size: 11px; letter-spacing: -0.2px; }
.cell.win { background: color-mix(in srgb, var(--ok) 13%, var(--surface-3)); }
.cell.win .dsum { color: var(--ok); }
.cell.lose { background: color-mix(in srgb, var(--accent) 13%, var(--surface-3)); }
.cell.lose .dsum { color: var(--accent); }
.cell.even .dsum { color: var(--muted); }

/* 오늘은 테두리로, 고른 날은 색을 채워서 구분한다 */
.cell.today { border-color: var(--border-strong); box-shadow: inset 0 0 0 1px var(--border-strong); }
.cell.picked {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* ── 입력칸 ───────────────────────────────────────── */

.entry { margin-top: 14px; }

/*
 * 뱅크롤 칸.
 *
 * 적는 칸 둘과 나온 값 둘을 한 줄에 둔다. 적는 칸을 위, 결과를 아래로 나누면
 * 숫자를 고치면서 결과를 같이 볼 수가 없다 — 이 화면은 그러라고 있는 것이다.
 */
/*
 * 좁은 화면을 먼저 맞춘다.
 *
 * 격자(grid)로 칸 수를 정해 두면, 넓은 화면에서 남는 자리를 칸이 통째로
 * 나눠 가져 한 칸이 280px 을 넘는다. 거기 들어갈 값은 아홉 자리뿐이라
 * 숫자 옆이 전부 빈 자리가 된다.
 * 접히는 방식(flex-wrap)으로 두면 좁은 화면에서는 알아서 줄이 나뉘고,
 * 넓은 화면에서는 아래 max-width 가 폭을 묶는다.
 */
.br-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-end;
}
.br-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 140px;
    min-width: 0;
}
.br-form span { font-size: 14px; font-weight: 600; color: var(--label); }
.br-form input {
    /* 기록 입력칸과 같은 높이로 맞춘다 */
    height: 40px;
    padding: 8px 10px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 15.5px;
    font-family: inherit;
    width: 100%;
}
.br-form input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
}

/*
 * 나온 값. 적는 칸과 높이를 맞춰야 한 줄로 읽힌다.
 * 테두리는 주지 않는다 — 적는 칸처럼 보이면 눌러서 고치려 든다.
 */
.br-out {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 2px 7px;
}
.br-out .stat-value { font-size: 19px; }

/* 기록과 어긋난 값을 알려주는 줄. 경고가 아니라 알림이라 색을 죽인다 */
/*
 * 기록과 뱅크롤의 차이. 값은 노랑이다 —
 * 딴 것도 잃은 것도 아니고 '안 적힌 것' 이라, 초록·빨강 어느 쪽도 아니다.
 */
.stat-value.warnv { color: var(--warn); }

/* 나온 값도 같이 접힌다. 적는 칸보다 조금 좁아도 된다 */
.br-out { flex: 1 1 120px; min-width: 0; }

@media (max-width: 640px) {
    .br-out .stat-value { font-size: 17px; }
}

/* 넓은 화면에서 칸이 늘어나 빈 자리를 만들지 않게 폭을 묶는다 */
@media (min-width: 641px) {
    .br-form label { max-width: 168px; }
    .br-form .br-out { max-width: 150px; }
}

/*
 * 여기도 좁은 화면을 먼저 맞춘다. 뱅크롤 칸과 같은 이유다.
 *
 * 칸마다 들어갈 것의 크기가 다르다 — 장소는 글이고, 시각은 '오후 07:00',
 * 바이인은 일곱 자리다. 다 같은 폭으로 늘려 놓으면 큰 칸은 빈 자리만
 * 남고, 어느 칸에 무엇을 넣는 자리인지 폭이 말해 주지 못한다.
 *
 * 좁은 화면에서는 flex-basis 만 보고 알아서 접히고, 넓은 화면에서는
 * 아래 media 가 칸마다 다른 폭으로 묶는다.
 */
.entry-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 12px;
}
.entry-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 140px;
    min-width: 0;
}
.entry-form label.wide { flex: 1 1 100%; }

/*
 * 좁은 화면에서는 짝을 맞춘다.
 *
 * 폭을 좁게 박아 두면 한 줄에 둘이 들어가다 남아서, 칸 하나만 혼자 한 줄을
 * 쓰는 모양이 된다. 좁은 화면에서 남는 자리를 비워 두는 건 넓은 화면에서와
 * 달리 손해다. 여기서는 칸이 늘어나 화면을 채우게 둔다.
 */
.entry-form .fld-money { flex: 1 1 140px; }
.entry-form input.num-cell { width: 100%; }

@media (min-width: 641px) {
    /*
     * 넓은 화면에서는 칸 여섯이 모두 같은 폭이다.
     *
     * 전에는 칸마다 들어갈 값 크기에 맞춰 폭을 달리 줬는데(바이인 112,
     * 블라인드 201), 한 줄에 나란히 서면 키가 들쭉날쭉해 보였다.
     * 폭으로 '여기 얼마짜리가 들어간다'를 알려주는 것보다, 한 줄이
     * 가지런한 편이 눈에 편하다.
     *
     * 장소만 늘어난다. 나머지가 자리를 잡고 남은 만큼을 가져간다 —
     * 유일하게 글이 들어가는 칸이라 길이를 미리 정할 수 없기 때문이다.
     *   1166(폼) - 150×6 - 12×6(사이) = 194
     */
    /*
     * 장소는 남는 자리를 가져가되 한도를 둔다.
     * 한도가 없으면 줄에 남은 자리를 혼자 다 먹어서(350px 넘게) 이번에는
     * 장소가 혼자 커 보인다. 고치려던 것과 같은 문제가 자리만 옮겨 앉는다.
     */
    /*
     * 장소의 기준 폭(250)이 줄바꿈 위치를 정한다.
     *
     * 190 으로 두면 첫 줄에 일곱 칸이 아슬아슬하게 들어가고 아웃만 혼자
     * 다음 줄로 밀렸다. 바이인과 아웃은 같이 보는 값이라 갈라지면 안 된다.
     * 250 이면 첫 줄이 블라인드 BB 에서 끊기고, 둘째 줄이 바이인·아웃·메모가
     * 된다 — 성격이 같은 것끼리 한 줄에 모인다.
     *
     * 남는 자리는 장소가 가져가되 300 까지만. 한도가 없으면 장소 혼자 커진다.
     */
    .entry-form .fld-place { flex: 1 1 250px; max-width: 300px; }
    .entry-form .fld-kind,
    .entry-form .fld-time,
    .entry-form .fld-blind,
    .entry-form .fld-money { flex: 0 1 150px; max-width: 150px; }

    /*
     * 메모도 폭을 묶는다.
     *
     * 혼자 줄 전체(1166px)를 쓰고 있어서 위 칸들과 확연히 달라 보였다.
     * 다만 글이 들어가는 칸이라 150px 로 줄이면 못 쓴다 — 세 칸 정도로 둔다.
     */
    .entry-form label.wide { flex: 1 1 300px; max-width: 470px; }
}
.entry-form span { font-size: 14px; font-weight: 600; color: var(--label); }

.entry-form input,
.entry-form select {
    /*
     * 높이를 못 박는다.
     *
     * 안 정해 주면 브라우저가 칸 종류마다 다르게 키운다 — 글자칸 36,
     * 고르는 칸 38, 시각칸 42. 시각칸은 안에 시계 아이콘이 들어가서다.
     * 폭을 아무리 맞춰 놔도 높이가 6px 어긋나면 한 줄이 들쭉날쭉해 보인다.
     *
     * 40px 로 둔다. 제일 작은 칸(36)보다 크고 제일 큰 칸(42)보다 작아서
     * 어느 쪽도 글자가 잘리지 않고, 손가락으로 누르기에도 36 보다 낫다.
     */
    height: 40px;
    padding: 8px 10px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 15.5px;
    font-family: inherit;
    width: 100%;
}

/*
 * 돈 칸(바이인·아웃)도 들어갈 값 크기만큼만 준다.
 *
 * 넓은 화면에서 한 칸이 380px 을 넘게 잡는데, 제일 큰 값을 넣어도
 * '123,456,789' 가 71px 이다. 나머지는 전부 빈 자리였다.
 * 블라인드(92px)보다는 넓게 둔다 — 실제로 자릿수가 더 크고, 둘이 같은 폭이면
 * 어느 쪽이 큰 값을 받는 칸인지 눈으로 구별이 안 된다.
 *
 * max-width 로 한 번 더 막는다. 아주 좁은 화면에서 112px 이 칸보다 넓어지면
 * 칸 밖으로 삐져나가기 때문이다.
 */
/*
 * 블라인드 칸만 좁게 둔다.
 *
 * 다른 칸처럼 칸을 꽉 채우면, 넓은 화면에서 한 칸이 180px 넘게 잡힌다.
 * 그런데 여기 들어갈 값은 1000, 2000 처럼 네댓 자리뿐이라 숫자와 화살표
 * 사이에 빈 자리만 크게 남는다. 칸이 크면 큰 값을 적으라는 뜻으로 읽히는데
 * 실제로는 그렇지 않으니, 들어갈 값 크기만큼만 준다.
 *
 * flex-basis 로 주고 shrink 는 살려 둔다 — 좁은 화면에서는 더 줄어야 한다.
 */

.entry-form input:focus,
.entry-form select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
}

/*
 * 시각 입력칸 오른쪽의 시계 아이콘.
 *
 * color-scheme 만으로도 밝아지지만, 그래도 흐려서 눈에 잘 안 띈다.
 * 누를 수 있는 것인 줄 알아야 하므로 밝기를 올리고 손 모양 커서를 준다.
 * 밝은 화면에서는 원래 색이 맞으므로 건드리지 않는다.
 */
/*
 * 시각 입력칸의 시계 아이콘 — 우리가 직접 그린다.
 *
 * 두 번 헛짚었다.
 *   1차: invert(1) 로 밝게 만들려 했다
 *   2차: opacity 를 올렸다
 * 둘 다 소용없었던 이유 — color-scheme: dark 가 이미 아이콘을 흰색으로
 * 바꿔 놓은 상태였다. 거기에 invert 를 걸었으니 도로 검게 만든 것이다.
 * 검은 칸에 검은 아이콘이라 계속 안 보였다.
 *
 * 브라우저가 주는 아이콘은 버전마다 모양도 색도 다르다. 남의 그림 색을
 * 뒤집어 쓰는 대신 appearance: none 으로 지우고 우리 SVG 를 깐다.
 * 이러면 어느 브라우저에서든 같은 시계가 같은 색으로 나온다.
 */
.entry-form input[type="time"]::-webkit-calendar-picker-indicator,
.entry-form input[type="date"]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    opacity: 0.85;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f8fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
}
.entry-form input[type="time"]::-webkit-calendar-picker-indicator:hover,
.entry-form input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
/* 밝은 화면에서는 흰 시계가 안 보인다. 어두운 색으로 다시 그린다 */
:root[data-theme="beige"] .entry-form input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="beige"] .entry-form input[type="date"]::-webkit-calendar-picker-indicator,
:root:not([data-theme]) .entry-form input[type="time"]::-webkit-calendar-picker-indicator,
:root:not([data-theme]) .entry-form input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262b34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/*
 * 숫자칸의 위아래 화살표를 뺀다.
 *
 * 전에는 반대로 '항상 보이게' 두었다. 크롬이 마우스를 올렸을 때만 보여줘서
 * 있는 줄도 모르고 지나치기 때문이었다.
 *
 * 지금은 뺀다. 남은 숫자칸은 블라인드 둘뿐인데, 한 칸을 반씩 나눠 쓰느라
 * 65px 정도다. 여기서 화살표가 24px 을 가져가면 '10000' 이 잘린다.
 * 값이 잘리는 것과 화살표가 없는 것 중에는 후자가 낫다 — 키보드 위아래
 * 화살표는 그대로 듣는다.
 */
.entry-form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.entry-form input[type="number"]::-webkit-inner-spin-button,
.entry-form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* 저장 전에 결과를 미리 보여준다. 숫자를 넣자마자 바뀐다 */
.entry-calc {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 13px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    color: var(--label);
    margin-bottom: 12px;
}
.entry-calc b { color: var(--text); font-variant-numeric: tabular-nums; }
.entry-calc b.up { color: var(--ok); }
.entry-calc b.down { color: var(--accent); }
.entry-calc .sep { color: var(--border-strong); }

.entry-actions { display: flex; gap: 8px; align-items: center; }
/* 삭제는 저장에서 멀리 떼어 놓는다. 나란히 두면 잘못 누른다 */
.entry-actions .del-btn { margin-left: auto; }

/* ── 기록 목록 ────────────────────────────────────── */

.day-sessions { margin-top: 4px; }

/*
 * 일지 한 줄.
 *
 * <b>접힌다.</b> 펴면 시각·바이인·아웃·비고에 핸드까지 붙어 네 줄을 먹는다.
 * 한 달에 스무 판이면 목록만 스크롤 여러 화면이라 훑을 수가 없다.
 * 접으면 '언제 어디서 얼마' 한 줄만 남는다 — 목록을 훑는 까닭이 그것이다.
 *
 * <details> 를 쓴다. 손으로 만들면 키보드와 화면 낭독기에서 안 되는
 * 물건이 된다 — 지역 DAILY 줄에서 쓴 것과 같은 방식이다.
 */
.srow {
    display: block;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    margin-bottom: 6px;
}
.srow-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    cursor: pointer;
    list-style: none;
}
/* 브라우저가 붙이는 세모를 지운다. 우리 화살표를 오른쪽에 둔다 */
.srow-head::-webkit-details-marker { display: none; }
.srow-head::marker { content: ''; }

.srow-head .srow-main { flex: 1; min-width: 0; margin-bottom: 0; }
.srow-head .drow-arrow { flex: none; }
.srow[open] { border-color: var(--border-strong); }

.srow-more { padding: 0 13px 11px; }

.srow-main {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 2px;
}
.sdate { font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.splace { font-size: 16px; font-weight: 700; color: var(--venue); }
.skind {
    font-size: 12.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--label);
}
/* 토너먼트와 타임어택을 색만으로 구분한다 */
.skind.k-tour {
    color: var(--kind-tour);
    background: var(--kind-tour-bg);
    border-color: var(--kind-tour);
}
.skind.k-time {
    color: var(--kind-time);
    background: var(--kind-time-bg);
    border-color: var(--kind-time);
}

.srow-sub { font-size: 14px; color: var(--muted); }
/* 나간 돈은 빨강, 들어온 돈은 초록. 아래 .sprofit 과 뜻이 같다 */
.srow-sub .s-in { color: var(--accent); font-variant-numeric: tabular-nums; }
.srow-sub .s-out { color: var(--ok); font-variant-numeric: tabular-nums; }
/* 블라인드는 판돈 크기다. 금액이 아니므로 빨강·초록을 쓰지 않는다 */
.srow-sub .s-blind { color: var(--text-sub); font-variant-numeric: tabular-nums; }
/* 비고는 사실이 아니라 그날의 말이라, 숫자보다 흐리게 두고 기울인다 */
.srow-sub .smemo { color: var(--text-sub); font-style: italic; }

.sprofit {
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.4px;
}
.sprofit.up { color: var(--ok); }
.sprofit.down { color: var(--accent); }

.sedit {
    flex-shrink: 0;
    height: 26px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--label);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}
.sedit:hover { border-color: var(--border-strong); color: var(--text); }

/*
 * 삭제는 고치기 화면 안에만 있다. 목록에서 바로 지우면 손이 스치기만 해도
 * 기록이 날아간다. 되돌릴 방법이 없는 단추라 눈에는 띄되 손이 먼저 가지는
 * 않게, 테두리만 빨갛게 두고 채우지 않는다.
 */
.del-btn {
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    padding: 9px 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.del-btn:hover { background: var(--accent); color: var(--on-solid); }

/*
 * 숫자 뒤에 붙는 단위(point).
 *
 * 숫자보다 작게, 그리고 조금 올려서 숫자 윗선에 맞춘다. 그냥 두면 소문자
 * 몸통이 숫자 아래쪽에 걸려 처져 보인다. em 으로 잡아 두면 큰 글씨(통계)와
 * 작은 글씨(입력칸 아래 계산띠) 양쪽에서 같은 비율로 따라간다.
 * 색은 물려받는다 — 빨강·초록이 숫자와 갈라지면 안 된다.
 */
.unit {
    font-size: 0.56em;
    font-weight: 700;
    letter-spacing: 0.02em;
    /*
     * 0.536em 은 눈대중이 아니라 잰 값이다.
     * 숫자의 실제 윗선은 글자 크기의 0.70배, point 는 0.714배에 있다.
     * 단위를 0.56배로 줄였으므로 (0.70 - 0.714x0.56) / 0.56 = 0.536.
     * 둘의 윗선이 딱 맞는다. 크기가 바뀌어도 비율이라 따라온다.
     */
    vertical-align: 0.536em;
    opacity: 0.75;
}

.stat-value.up { color: var(--ok); }
.stat-value.down { color: var(--accent); }

/* ── 좁은 화면 ────────────────────────────────────── */

@media (max-width: 620px) {
    /* .entry-form 은 이제 접히는 방식이라 여기서 칸 수를 정하지 않는다 */
    .cell { min-height: 44px; }
    /* ⚠️ 달력 칸은 일곱 개로 나눈 <b>고정 폭</b>이다. 글자를 키운 (115) 에서도 여기는
       한 단계만 키웠다 — 두 단계면 '+49.7만' 이 칸 밖으로 나간다(재 봤다) */
    .cell .dnum { font-size: 13px; }
    .cell .dsum { font-size: 10.5px; }
    /* 폰에서는 칸이 44px 라 더 줄여야 들어간다. 재 보고 정한 값이다 */
    .cell .dsum.long { font-size: 8px; }
    .month-nav { width: 100%; }
    /*
     * ⚠️ 여기서 제목을 늘리고 있었다(flex: 1). 그러면 넘기개가 화면 양
     *    끝으로 벌어져, 한 번 넘길 때마다 손가락이 반대편까지 간다.
     *    폰에서만 그랬으므로 데스크톱에서 아무리 봐도 안 보이던 것이다.
     *    셋은 붙어 있어야 하고, '이번 달' 만 오른쪽 끝으로 민다.
     */
    .month-nav .panel-title { flex: none; }
    .srow { flex-wrap: wrap; gap: 8px; }
    .sprofit { font-size: 16px; }
}

/*
 * 달력 칸이 좁은 화면에서 안 줄어들던 문제.
 *
 * aspect-ratio 와 min-height 를 같이 걸면, 높이가 min-height 로 고정되면서
 * 비율 때문에 너비까지 같이 붙박이가 된다(44px 높이 → 54px 너비).
 * 그러면 7칸이 화면 폭을 넘겨 가로 스크롤이 생긴다.
 * 좁은 화면에서는 비율을 풀고 높이만 정해 준다.
 */
.cell { min-width: 0; }

@media (max-width: 620px) {
    .cell {
        aspect-ratio: auto;
        height: 46px;
        min-height: 0;
    }
    .cal-head, .cal-grid { gap: 3px; }
}

/* ── 홈화면 추가 안내 띠 ──────────────────────────── */

/*
 * 화면 아래에 붙는다. 위에 붙이면 읽던 내용을 가리고,
 * 모바일에서는 엄지가 닿는 아래쪽이 누르기도 편하다.
 */
.pwa-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: 0 6px 24px var(--shadow);
    max-width: 520px;
    margin: 0 auto;
}

.pwa-icon img {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    display: block;
}

.pwa-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-text b { font-size: 15.5px; font-weight: 700; color: var(--text); }
.pwa-text span { font-size: 14px; color: var(--label); line-height: 1.5; }
.pwa-text span b { font-size: 14px; color: var(--text); }

.pwa-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.pwa-actions .cta-btn { padding: 8px 13px; font-size: 14.5px; }

@media (max-width: 520px) {
    .pwa-banner { flex-wrap: wrap; }
    .pwa-actions { width: 100%; }
    .pwa-actions .cta-btn { flex: 1; text-align: center; }
}

/* ── 수식 ─────────────────────────────────────────── */

/*
 * 분수를 이미지 없이 글자로 그린다.
 * 위쪽(분자)과 아래쪽(분모)을 세로로 쌓고 가운데 선을 긋는다.
 */
.formula {
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text) !important;
    flex-wrap: wrap;
}

.frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    vertical-align: middle;
}
.frac b {
    padding: 0 10px 4px;
    font-weight: 800;
    color: var(--accent);
}
.frac i {
    padding: 4px 10px 0;
    border-top: 2px solid var(--border-strong);
    font-style: normal;
    font-weight: 600;
    font-size: 15.5px;
    color: var(--text-sub);
}

/* 두 칸에 걸쳐 "같습니다"를 적을 때 */
.rank-table .same { color: var(--muted); }
.rank-table td.up { color: var(--ok); font-weight: 700; }
.rank-table td.down { color: var(--accent); font-weight: 700; }

@media (max-width: 620px) {
    .formula { font-size: 15.5px; }
    .frac i { font-size: 14px; }
}

/* ── 설치 안내 띠의 '안 보기' 상자 ────────────────── */

/*
 * 띠 오른쪽 아래에 작게 붙인다.
 * 안내를 거부하는 단추는 눈에 덜 띄어야 하지만, 누를 곳은 분명해야 한다.
 * 그래서 크기는 작게 하되 테두리로 경계를 준다.
 */
.pwa-banner { position: fixed; padding-bottom: 26px; }

.pwa-snooze {
    position: absolute;
    right: 10px;
    bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}
.pwa-snooze:hover {
    border-color: var(--border-strong);
    color: var(--text-sub);
}
.pwa-snooze i { font-style: normal; font-size: 12px; }

@media (max-width: 520px) {
    .pwa-snooze { position: static; margin-left: auto; }
    .pwa-banner { padding-bottom: 12px; }
}

/* ══════════════════════════════════════════════════
   승률 계산기
   ══════════════════════════════════════════════════ */

.calc-panel { margin-bottom: 14px; }

.slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.slot-group { display: flex; flex-direction: column; gap: 6px; }
.slot-group.wide { grid-column: 1 / -1; }

.slot-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--label);
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.slot-label em {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.slot-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* 빈 칸과 채운 칸을 같은 크기로 둬야 넣고 뺄 때 줄이 안 흔들린다 */
.slot {
    width: 42px;
    height: 56px;
    background: var(--surface-3);
    border: 1px dashed var(--border-strong);
    border-radius: 5px;
    color: var(--muted);
    font-family: inherit;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0;
}
.slot.filled {
    background: #ffffff;
    border: 1px solid #c8ced8;
    border-style: solid;
    color: #14171c;
    box-shadow: 0 1px 3px var(--shadow);
}
.slot.filled.red { color: #d0293c; }
.slot.filled b { font-size: 17px; font-weight: 800; line-height: 1; }
.slot.filled i { font-size: 16px; font-style: normal; line-height: 1; }
.slot.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.calc-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cta-btn:disabled { background: var(--surface-2); color: var(--muted); cursor: default; }
.calc-hint { font-size: 14.5px; color: var(--label); }

/* ── 카드판 ───────────────────────────────────────── */

.deck { display: flex; flex-direction: column; gap: 5px; }
.deck-row { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; }

.dcard {
    aspect-ratio: 1 / 1.32;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #c8ced8;
    border-radius: 4px;
    color: #14171c;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.dcard.red { color: #d0293c; }
.dcard b { font-size: 15px; font-weight: 800; }
.dcard i { font-size: 13px; font-style: normal; }
.dcard:hover:not(:disabled) { outline: 2px solid var(--accent); }
.dcard.used { opacity: 0.22; cursor: default; }

/* ── 결과 ─────────────────────────────────────────── */

.result {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.result-bars { display: flex; flex-direction: column; gap: 8px; }

.rbar { display: flex; align-items: center; gap: 10px; }
.rname { width: 22px; font-size: 14.5px; font-weight: 700; color: var(--label); }

.rtrack {
    flex: 1;
    height: 22px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
}
.rfill { height: 100%; width: 0; transition: width 0.35s ease; }
.rfill.win { background: var(--ok); }
.rfill.tie { background: var(--muted); }
.rfill.lose { background: var(--accent); }

.rval {
    width: 58px;
    text-align: right;
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.result-note {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
}
.result-link {
    margin-top: 10px;
    padding: 10px 13px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: 15px;
    color: var(--text-sub);
}
.result-link b { color: var(--text); }
.result-link a { color: var(--accent); font-weight: 600; }
.result-link a:hover { text-decoration: underline; }

/* ── 좁은 화면 ────────────────────────────────────── */

@media (max-width: 620px) {
    .slots { grid-template-columns: 1fr; }
    .slot { width: 38px; height: 50px; }
    .slot.filled b { font-size: 16px; }
    .deck-row { gap: 3px; }
    .dcard b { font-size: 12.5px; }
    .dcard i { font-size: 11px; }
    .rval { width: 50px; font-size: 15px; }
}

/* ── 대회 시리즈 딱지(썸네일) ─────────────────────── */

/*
 * 대회 로고를 쓰지 않는 대신 시리즈 색과 약칭으로 직접 만든다.
 * 색은 app.js 의 SERIES_STYLE 에서 --tint 로 넘어온다.
 * 이미지 파일이 아니라 글자라 화면을 키워도 흐려지지 않는다.
 */
.card-thumb {
    position: relative;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 6px;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--tint) 92%, #000),
        color-mix(in srgb, var(--tint) 62%, #000));
    border: 1px solid color-mix(in srgb, var(--tint) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 뒤에 깔리는 무늬. 흐리게 둬서 글자를 방해하지 않는다 */
.thumb-suit {
    position: absolute;
    right: -6px;
    bottom: -10px;
    font-size: 38px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.13);
    pointer-events: none;
}

.thumb-label {
    position: relative;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-align: center;
    padding: 0 3px;
    word-break: break-all;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ── 시리즈 필터 줄 ───────────────────────────────── */

/*
 * 시리즈가 열 개를 넘어가면서 머리말 안에 다 못 들어간다.
 * 한 줄을 따로 내어 주고, 위에 옅은 구분선을 둔다.
 */
.series-row {
    margin: 0 0 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* 전체 기간을 보고 있을 때 '전체' 단추에 눌린 표시 */
.mbtn.on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-solid);
}

@media (max-width: 620px) {
    .card-thumb { width: 44px; height: 44px; }
    .thumb-label { font-size: 11.5px; }
    .thumb-suit { font-size: 31px; }
}

/*
 * 좁은 화면에서 설치 안내 띠가 화면을 넘어가던 문제.
 *
 * '6시간 동안 안 보기'는 글자가 길어서, 아이콘·설명과 같은 줄에 두면
 * 셋을 합친 너비가 화면보다 넓어진다. 좁은 화면에서는 아예 제 줄을
 * 하나 차지하게 내려 준다.
 */
@media (max-width: 520px) {
    .pwa-banner { left: 8px; right: 8px; }
    .pwa-snooze {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-top: 2px;
        padding: 6px 8px;
    }
}

/*
 * 좁은 화면에서 대회 장소 이름이 화면을 밀어내던 문제.
 *
 * .card-meta span 에 줄바꿈 금지가 걸려 있었다. "바이인 30만원" 같은
 * 짧은 값이 어중간하게 잘리지 않게 하려던 것인데, 장소 이름은
 * "인스파이어 엔터테인먼트 리조트 (YY Poker Club)"처럼 길어서
 * 줄을 못 바꾸면 그대로 화면 밖으로 나간다.
 *
 * 넓은 화면에서는 그대로 두고, 좁은 화면에서만 줄바꿈을 허용한다.
 * 값이 조금 잘려 보이는 것이 가로 스크롤이 생기는 것보다 낫다.
 */
@media (max-width: 720px) {
    .card-meta span { white-space: normal; }
    .card-meta { row-gap: 2px; }
}

/* ══════════════════════════════════════════════════
   시리즈 엠블럼 — 다시 그림
   ══════════════════════════════════════════════════ */

/*
 * 앞의 것은 글자만 작게 박아 둬서 시리즈끼리 구별이 안 됐다.
 * 어두운 화면에서는 특히 초록끼리·파랑끼리 뭉개졌다.
 * 그래서 세 겹으로 나눈다.
 *   1) 색       — 멀리서 훑을 때
 *   2) 큰 두 글자 — 실제로 읽을 때
 *   3) 무늬 하나 — 색이 비슷할 때 갈라 주는 표시
 *
 * 대회 로고를 쓰지 않는 대신이므로, 남의 로고와 헷갈리지 않도록
 * 일부러 '카드 뒷면' 같은 우리만의 생김새로 만든다.
 */
.card-thumb {
    position: relative;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 9px;
    background:
        linear-gradient(155deg,
            color-mix(in srgb, var(--tint) 100%, transparent) 0%,
            color-mix(in srgb, var(--tint) 68%, #000) 100%);
    /* 안쪽 테두리 한 겹 — 카드처럼 보이게 하는 요소 */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        inset 0 0 0 4px color-mix(in srgb, var(--tint) 70%, #000),
        inset 0 0 0 5px rgba(255, 255, 255, 0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    overflow: hidden;
}

.thumb-mark {
    position: relative;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.thumb-label {
    position: relative;
    color: rgba(255, 255, 255, 0.85);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 1;
    text-transform: uppercase;
}

/* 무늬는 오른쪽 위 모서리에 작게. 색이 비슷한 시리즈를 갈라 준다 */
.thumb-suit {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

/* 밝은 테마에서는 흰 글자가 그대로라 대비를 조금 더 준다 */
:root[data-theme="beige"] .card-thumb,
:root:not([data-theme]) .card-thumb {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        inset 0 0 0 4px color-mix(in srgb, var(--tint) 78%, #000),
        inset 0 0 0 5px rgba(255, 255, 255, 0.18);
}

@media (max-width: 620px) {
    .card-thumb { width: 48px; height: 48px; border-radius: 8px; }
    .thumb-mark { font-size: 17px; }
    .thumb-label { font-size: 6.5px; letter-spacing: 0.4px; }
    .thumb-suit { font-size: 11px; top: 3px; right: 4px; }
}

/* ══════════════════════════════════════════════════
   꼬리말
   ══════════════════════════════════════════════════ */

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    margin-top: 20px;
}

.footer-inner {
    max-width: var(--shell-width);
    margin: 0 auto;
    padding: 22px var(--page-pad) 28px;
}

.footer-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.footer-links a {
    font-size: 15px;
    font-weight: 600;
    color: var(--label);
}
.footer-links a:hover { color: var(--text); text-decoration: underline; }

/* 법적 문서 줄. 있어야 하지만 읽을거리보다 앞에 나설 이유는 없다 */
.footer-legal { margin-top: -4px; }
.footer-legal a { font-size: 14px; font-weight: 500; color: var(--muted); }
/* 개인정보처리방침은 공개 의무가 있어 조금 더 또렷하게 둔다 */
.footer-links a b { color: var(--text-sub); font-weight: 700; }

.footer-note {
    margin: 0 0 10px;
    max-width: 72ch;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}
.footer-copy { margin: 0; font-size: 13.5px; color: var(--muted); }

/* ══════════════════════════════════════════════════
   약관·방침 문서
   ══════════════════════════════════════════════════ */

/* 조문은 본문보다 조금 좁게 잡아 읽기 편하게 한다 */
.legal h2 {
    font-size: 17px !important;
    margin-top: 28px !important;
}
.legal h3 {
    margin: 16px 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-sub);
}

/* 번호가 붙는 조항 */
.clause {
    max-width: 68ch;
    padding-left: 20px;
    margin: 0 0 12px;
}
.clause li {
    margin-bottom: 7px;
    color: var(--text-sub);
    line-height: 1.75;
}
.clause li::marker { color: var(--muted); font-weight: 600; }
.clause strong { color: var(--text); }

/* 금지행위처럼 특히 눈에 들어와야 하는 목록 */
.clause.important li::marker { color: var(--accent); font-weight: 800; }

/* 알림 상자 안에 들어간 조항은 여백을 줄인다 */
.notice .clause { margin-bottom: 0; }
.notice .clause li:last-child { margin-bottom: 0; }

.note-line {
    font-size: 14.5px !important;
    color: var(--muted) !important;
    margin-bottom: 14px !important;
}

.legal-foot {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.legal-foot p { margin-bottom: 10px; }

@media (max-width: 620px) {
    .footer-links { gap: 12px; }
    .legal h2 { font-size: 17px !important; }
    .clause { padding-left: 18px; }
}

/* ══════════════════════════════════════════════════
   뉴스
   ══════════════════════════════════════════════════ */

.news-list { display: flex; flex-direction: column; gap: 10px; }

.news-item {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-3);
    overflow: hidden;
}
.news-item:hover { border-color: var(--border-strong); }

/* 칸 전체가 눌리게 한다. 제목만 눌리면 손가락으로 맞추기 어렵다 */
.news-link { display: flex; gap: 0; }

/* ── 기사 그림 ────────────────────────────────────── */

.news-thumb {
    flex-shrink: 0;
    width: 168px;
    align-self: stretch;
    background: var(--surface-2);
    overflow: hidden;
}
.thumb-svg { display: block; width: 100%; height: 100%; min-height: 116px; }

/* SVG 안 글자는 화면 글꼴을 따라가지 않으므로 여기서 지정한다 */
.thumb-mark-t {
    fill: #ffffff;
    font-family: 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.thumb-label-t {
    fill: rgba(255, 255, 255, 0.82);
    font-family: 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
/* 바탕에 크게 깔리는 무늬. 글자를 방해하지 않을 만큼만 보이게 둔다 */
.thumb-bigsuit {
    fill: rgba(255, 255, 255, 0.10);
    font-size: 120px;
}

/* ── 기사 칸 본문 ─────────────────────────────────── */

.news-body {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}

.news-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.news-head time {
    font-size: 13.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.news-title {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.3px;
    color: var(--text);
}
.news-item:hover .news-title { color: var(--accent); }

.news-summary {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--label);
    max-width: 70ch;
}

/* 눌러야 한다는 걸 알려주는 표시. 평소엔 옅게 두고 올렸을 때 드러낸다 */
.news-more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
}
.news-item:hover .news-more { color: var(--accent); }

/* ── 맨 위 기사는 크게 ────────────────────────────── */

.news-item.featured .news-link { flex-direction: column; }
.news-item.featured .news-thumb { width: 100%; }
.news-item.featured .thumb-svg { min-height: 190px; max-height: 240px; }
.news-item.featured .news-body { padding: 18px 20px 20px; }
.news-item.featured .news-title { font-size: 22px; letter-spacing: -0.6px; }
.news-item.featured .news-summary { font-size: 15.5px; }

/* ── 기사 본문 화면 ───────────────────────────────── */

.article-hero {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 14px;
}
.article-hero .thumb-svg { min-height: 150px; max-height: 210px; }

.article-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.article-head time {
    font-size: 14px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.article h2 { font-size: 18px !important; }
.article h3 {
    margin: 20px 0 7px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

/* 근거를 밝히는 칸. 우리 기사의 성격을 드러내는 부분이라 눈에 띄게 둔다 */
.article-sources {
    margin-top: 30px;
    padding: 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface-3);
}
.article-sources h2 {
    margin: 0 0 8px !important;
    padding-top: 0 !important;
    border-top: none !important;
    font-size: 15px !important;
    font-weight: 700;
    color: var(--label);
}
.article-sources ul { margin: 0 0 10px; padding-left: 18px; }
.article-sources li {
    font-size: 15px;
    color: var(--text-sub);
    margin-bottom: 3px;
}
.article-sources p {
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--muted) !important;
}

/* ── 좁은 화면 ────────────────────────────────────── */

@media (max-width: 620px) {
    /* 그림을 옆에 두면 둘 다 좁아진다. 위아래로 쌓는다 */
    .news-link { flex-direction: column; }
    .news-thumb { width: 100%; }
    .thumb-svg { min-height: 132px; max-height: 160px; }
    .news-body { padding: 12px 14px 14px; }
    .news-title { font-size: 17px; }
    .news-item.featured .news-title { font-size: 19px; }
    .news-item.featured .thumb-svg { min-height: 150px; }
    .article-hero .thumb-svg { min-height: 120px; }
}

/*
 * 기사 그림이 잘리던 문제를 고친다.
 *
 * 그림 비율과 칸 비율이 다르면 잘리거나 늘어난다. 실제로 목록에서
 * 'WPT'가 'VPT'로, 'TRITON'이 'RITON'으로 왼쪽이 잘려 나갔다.
 * 그림(SVG)과 칸에 같은 비율을 지정해 둘이 정확히 맞물리게 한다.
 *   목록  240 × 200 → 1.2
 *   큰 기사·본문  480 × 160 → 3
 */
.news-thumb {
    aspect-ratio: 1.2;
    align-self: center;
    margin: 12px 0 12px 12px;
    border-radius: 5px;
}
.news-item.featured .news-thumb,
.article-hero {
    aspect-ratio: 3;
    align-self: stretch;
    margin: 0;
    border-radius: 0;
}
.article-hero { border-radius: 6px; }

/* 높이는 비율이 정하므로 억지로 잡지 않는다 */
.thumb-svg,
.news-item.featured .thumb-svg,
.article-hero .thumb-svg {
    min-height: 0;
    max-height: none;
    height: 100%;
}

@media (max-width: 620px) {
    /* 좁은 화면에서는 그림이 위로 쌓이므로 목록도 가로로 길게 */
    .news-thumb {
        aspect-ratio: 2.2;
        margin: 0;
        border-radius: 0;
    }
    .news-item.featured .news-thumb,
    .article-hero { aspect-ratio: 2.2; }
}

/*
 * 기사 그림의 글자를 한가운데로.
 *
 * 이 그림은 칸 모양이 제각각인 곳에 들어간다(목록은 좁게, 큰 기사는 길게,
 * 모바일은 또 다르게). 남는 쪽을 잘라 채우는 방식이라 가장자리는 잘려 나간다.
 * 한가운데는 어떤 모양으로 잘려도 남으므로, 글자를 거기 둔다.
 */
.thumb-mark-t,
.thumb-label-t { text-anchor: middle; }

/*
 * 이제 글자가 잘릴 걱정이 없으므로 칸 비율은 보기 좋은 값으로 고른다.
 * 앞서 그림 비율과 억지로 맞추려던 규칙은 여기서 덮어쓴다.
 */
.news-thumb { aspect-ratio: 1.25; }
.news-item.featured .news-thumb { aspect-ratio: 2.9; }
.article-hero { aspect-ratio: 3.2; }

@media (max-width: 620px) {
    /* 좁은 화면에서는 그림이 위로 쌓이므로 셋 다 가로로 길게 */
    .news-thumb,
    .news-item.featured .news-thumb,
    .article-hero { aspect-ratio: 2.1; }
}

/* 가이드 화면의 글 부분은 목록과 붙어 있으므로 여백을 줄인다 */
.guide-intro { margin-bottom: 14px; }
.guide-intro:last-child { margin-top: 14px; margin-bottom: 0; }

/* ── 메뉴 강조 ────────────────────────────────────── */

/*
 * 메뉴 이름의 일부만 색을 달리한다.
 * 밝은 화면에서는 연두가 흰 바탕에 묻히므로 한 단계 진한 값을 쓴다.
 */
:root { --lime: #a3e635; }
:root:not([data-theme]),
:root[data-theme="beige"] { --lime: #456f0c; }

.nav-red { color: var(--accent); font-weight: 800; }
.nav-lime { color: var(--lime); font-weight: 800; letter-spacing: 0.3px; }

/* 눌린 메뉴나 마우스를 올렸을 때도 이 색은 그대로 둔다 */
.nav-link:hover .nav-red,
.nav-link.active .nav-red { color: var(--accent); }
.nav-link:hover .nav-lime,
.nav-link.active .nav-lime { color: var(--lime); }

/* ── 머리말 가운데 정렬 ───────────────────────────── */

/*
 * 로고와 오른쪽 단추에 같은 몫을 주면 메뉴가 화면 한가운데로 온다.
 * 로고 길이가 바뀌어도 가운데가 흔들리지 않는다.
 */
.header-inner > .logo { flex: 1 1 0; }
.nav { flex: 0 1 auto; justify-content: center; }
.header-actions { flex: 1 1 0; justify-content: flex-end; display: flex; }

@media (max-width: 820px) {
    /*
     * 좁은 화면에서는 가운데 정렬을 풀고 왼쪽부터 채운다.
     * 메뉴가 화면보다 길어지면 가운데 정렬은 왼쪽 항목을 잘라먹는다.
     */
    .header-inner > .logo,
    .header-actions { flex: 0 0 auto; }
    .nav { flex: 1 1 auto; justify-content: flex-start; }
}

/* ── 머리말과 본문의 좌우 끝을 맞춘다 ─────────────── */

/*
 * 광고를 끄면 본문이 좁아지는데 머리말은 넓은 폭 그대로였다.
 * 그래서 로고가 본문보다 한참 왼쪽에 떨어져 보였다.
 * 머리말도 본문과 같은 폭을 쓰게 해서 좌우 끝을 맞춘다.
 */
.header-inner.shell-wide {
    max-width: calc(var(--content-width) + 200px + var(--page-pad) * 2);
}

/* 대회 일정 — 진한 노랑 */
:root { --gold: #eab308; }
:root:not([data-theme]),
:root[data-theme="beige"] { --gold: #8a5c04; }

.nav-gold { color: var(--gold); font-weight: 800; }
.nav-link:hover .nav-gold,
.nav-link.active .nav-gold { color: var(--gold); }

/*
 * 메뉴 앞 별표.
 * 눈길을 끄는 표시라 글자보다 조금 작게, 살짝 올려 붙인다.
 * 같은 크기로 두면 낱말처럼 읽혀서 메뉴 이름이 길어 보인다.
 */
.nav-star {
    color: var(--accent);
    font-size: 13px;
    vertical-align: 1px;
    margin-right: 1px;
}
.nav-link:hover .nav-star,
.nav-link.active .nav-star { color: var(--accent); }

/* ── 대회 상세 ────────────────────────────────────── */

.tour-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.tour-head .card-thumb { width: 72px; height: 72px; }
.tour-head h1 { margin: 0 0 4px; }

.tour-tags {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* 남은 날짜는 이 화면에서 가장 먼저 눈에 들어와야 하는 값이다 */
.tour-dday {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.tour-dday.live { color: var(--live); }
.tour-dday.done { color: var(--muted); }

.tour-when {
    margin: 0 !important;
    font-size: 15.5px;
    color: var(--label) !important;
    font-variant-numeric: tabular-nums;
}

/* 목록에서 대회 이름을 눌러 상세로 갈 수 있게 */
.card-title a { color: inherit; }
.card-title a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 620px) {
    .tour-head { gap: 12px; }
    .tour-head .card-thumb { width: 56px; height: 56px; }
}

/*
 * '전체' 단추가 두 줄로 깨지던 문제.
 *
 * .mbtn 은 30x30 정사각형(화살표용)이 기본이라, 글자가 들어가면 넘친다.
 * 폭이 늘어나는 규칙을 .mbtn.today 에만 걸어 뒀는데 이 단추의 클래스는
 * .on 이라 안 맞았다. 글자가 들어가는 단추는 아이디로 확실히 잡는다.
 */
#cal-all {
    width: auto;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── 확인 등급 딱지 ───────────────────────────────── */

/*
 * 셋을 색으로 갈라 둔다. 전에는 '공식 확인'과 '보도 확인'을 똑같이
 * '확인됨'으로 보여줬는데, 그러다 실제로 틀린 일정이 묻힌 적이 있다.
 *   초록 — 주최사 공식 페이지를 직접 열어 대조함
 *   노랑 — 복수 매체가 일치. 공식 페이지는 직접 안 봄
 *   주황 — 아직 확인 못 함
 */
.tag-official  { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.tag-reported  { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }

/* ── 카드의 단추 두 개 ────────────────────────────── */

.card-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    align-self: center;
}

/*
 * 공식 페이지 링크를 목록에도 둔다.
 * 우리가 적은 날짜가 틀릴 수 있으니, 방문자가 한 번에 원본을 열어
 * 직접 확인할 수 있어야 한다.
 */
.card-official {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 5px 9px;
    border-radius: var(--radius);
    text-align: center;
    white-space: nowrap;
}
.card-official:hover { border-color: var(--border-strong); color: var(--text-sub); }

@media (max-width: 720px) {
    .card-actions { flex-direction: row; align-self: flex-start; }
}

/*
 * 글 안에 들어간 단추의 글자색.
 *
 * .doc a 가 링크를 강조색(빨강)으로 칠하는데, 그 규칙이 .cta-btn 보다
 * 구체적이라 단추 글자까지 빨갛게 만들었다. 배경도 빨강이라 글자가
 * 통째로 안 보였다. 태그와 클래스를 함께 걸어 단추 쪽이 이기게 한다.
 */
.doc a.cta-btn,
.doc a.card-link,
.doc a.card-official {
    color: var(--on-solid);
}
.doc a.cta-btn:hover { color: var(--on-solid); text-decoration: none; }

.doc a.card-link,
.doc a.card-official { color: var(--accent); }
.doc a.card-official { color: var(--muted); }


/* =====================================================================
 * 폰 전용 (620px 이하)
 * ---------------------------------------------------------------------
 * 실제 폰(375px)에서 재 보니 대회 카드의 글자 칸이 30px 이었다.
 * 그래서 "Premium HPT 5th" 가 한 줄에 한 단어씩 떨어지고, 카드 하나가
 * 868px 까지 늘어났다. 취향 문제가 아니라 고장이었다.
 *
 * 까닭 - 카드는 [그림][날짜][글][단추] 넷을 한 줄에 놓는다. 글 칸에
 * min-width: 0 이 걸려 있어서, 자리가 모자라면 아랫줄로 내려가는 대신
 * 0 까지 짜부라진다. PC 에서는 자리가 넉넉해 드러나지 않았다.
 *
 * 고침 - 폰에서는 글 칸을 제 줄로 내린다.
 *   [그림] [날짜]            [자세히][공식]
 *   Premium HPT 5th
 *   국내 · 공식 확인 · LIVE
 * ===================================================================== */
@media (max-width: 620px) {

    /* 글 칸을 통째로 아랫줄로. order 를 3 으로 두면 단추가 윗줄에 남는다 */
    .card-body {
        flex: 1 1 100%;
        order: 3;
    }
    .card-actions { margin-left: auto; }
    .card { gap: 8px 10px; padding: 11px; }
    .card-date { text-align: left; }

    /* 화면 좌우 여백. 16px 은 1080px 화면에서 정한 값이라 375px 에서는
     * 양옆으로 32px, 곧 화면의 9%가 글자 없는 자리로 나간다.
     * 아래 60px 은 폰에서 그냥 빈 화면 한 뼘이다. */
    .page-shell { padding: 12px 12px 28px; }
    .panel { padding: 11px; }

    /* 숫자 넉 장. 안쪽 여백을 줄이면 두 줄이 175px → 128px 이 된다 */
    .stat { padding: 9px 10px; }
    .stat-label { font-size: 13px; margin-bottom: 2px; }
    .stat-value { font-size: 18px; }
    .stat-row { gap: 8px; margin-bottom: 14px; }
}

/* ═══ 전략 (프리플랍 차트 · 퀴즈 · ICM) ═══════════ */

.nav-cyan { color: #22d3ee; }

/*
 * 허브의 카드 셋.
 * .flow 를 쓰지 않는다 — 그건 가이드의 '한 판 여섯 단계'라 뜻이 다르다.
 */
.st-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.st-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.st-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.st-mark {
    font-size: 13px; font-weight: 800; letter-spacing: .12em;
    color: var(--accent);
}
.st-card h3 { font-size: 17px; margin: 0; }
.st-card p { font-size: 15px; color: var(--text-sub); margin: 0; line-height: 1.6; }
.st-more { font-size: 14.5px; color: var(--label); margin-top: auto; padding-top: 6px; }

/* ── 13×13 판 ─────────────────────────────────── */

/*
 * 칸이 169개라 좁은 화면에서는 글자가 뭉갠다.
 * 판 전체를 가로로 밀 수 있게 감싸고, 칸 크기는 화면 폭을 따라간다.
 */
.rg-wrap { overflow-x: auto; padding-bottom: 4px; }
.rg-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 460px;
}
.rg-row { display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; }

.rg-cell {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 3px;
    background: var(--surface-3);
    color: var(--muted);
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/*
 * 여는 패는 초록, 접는 패는 어둡게.
 * 색을 두 가지로만 쓴다 — 세 가지 넘게 쓰면 무엇이 무엇인지 표를 봐야 하고,
 * 그러면 한눈에 읽으라고 만든 판의 뜻이 사라진다.
 */
.rg-cell.on {
    background: color-mix(in srgb, var(--ok) 26%, var(--surface-3));
    color: var(--text);
    border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
/* 포켓페어는 대각선이라 눈으로 찾기 쉽게 테두리를 준다 */
.rg-cell.rg-pair { border-color: var(--border); }
.rg-cell.rg-pair.on { border-color: var(--ok); }

.rg-note {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-sub);
}
.rg-pct {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--ok);
    font-size: 14px;
    font-weight: 700;
}

/*
 * 디펜스 딱지.
 *
 * 빅블라인드만 성격이 다른 값이라 숫자 옆에 이름을 붙인다.
 * 안 붙이면 50% 라는 넓이만 보고 '여기선 반이나 열어도 되는구나'로 읽는다.
 */
.rg-kind {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--live, #d4a017) 22%, var(--surface-3));
    color: var(--live, #d4a017);
    font-size: 13px;
    font-weight: 700;
    vertical-align: 1px;
}

/* 디펜스 레인지는 색을 달리한다. 같은 초록이면 오픈 레인지와 헷갈린다 */
.rg-grid.rg-defend .rg-cell.on {
    background: color-mix(in srgb, var(--live, #d4a017) 26%, var(--surface-3));
    border-color: color-mix(in srgb, var(--live, #d4a017) 45%, transparent);
}
.rg-grid.rg-defend .rg-cell.rg-pair.on { border-color: var(--live, #d4a017); }

/* 6맥스에서 숨긴 자리 단추 */
#rg-tabs .chip[hidden] { display: none; }

.rg-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--muted);
}
.rg-legend i.rg-key {
    display: inline-block;
    width: 11px; height: 11px;
    border-radius: 3px;
    background: var(--surface-3);
    vertical-align: -1px;
    margin-right: 3px;
}
.rg-legend i.rg-key.on { background: color-mix(in srgb, var(--ok) 55%, var(--surface-3)); }
.rg-legend-sep { color: var(--border); }

/* ── 퀴즈 ─────────────────────────────────────── */

.qz-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 12px 18px;
}
.qz-seat { font-size: 17px; color: var(--text-sub); }
.qz-seat b { color: var(--text); font-size: 20px; margin-right: 6px; }

.qz-cards { display: flex; gap: 10px; }
.qz-card {
    width: 62px; height: 88px;
    border-radius: 8px;
    background: #f6f8fb;
    color: #14181f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.qz-card b { font-size: 28px; line-height: 1; }
.qz-card i { font-size: 20px; font-style: normal; line-height: 1; }
.qz-card.red { color: #c02537; }

.qz-ask { margin: 0; font-size: 15.5px; color: var(--muted); }

.qz-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.qz-btn {
    min-width: 132px;
    padding: 12px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    background: var(--surface-3);
    color: var(--text);
}
.qz-btn:disabled { opacity: .45; cursor: default; }
.qz-open:not(:disabled):hover { border-color: var(--ok); color: var(--ok); }
.qz-fold:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }

.qz-verdict {
    padding: 13px 15px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-3);
    font-size: 15.5px;
    line-height: 1.75;
    margin-bottom: 12px;
}
.qz-verdict.ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.qz-verdict.no { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.qz-verdict.ok strong { color: var(--ok); }
.qz-verdict.no strong { color: var(--accent); }
.qz-why { color: var(--muted); font-size: 14.5px; }
.qz-link { color: var(--label); font-size: 14.5px; }

.qz-next { text-align: center; margin-bottom: 10px; }
.qz-reset { margin-top: 10px; text-align: right; }

/* ── ICM ──────────────────────────────────────── */

.icm-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 16px;
}
.icm-h { font-size: 15px; color: var(--label); margin: 0 0 8px; }
.icm-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.icm-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 96px; max-width: 130px; }
.icm-field span { font-size: 13.5px; font-weight: 600; color: var(--label); }
.icm-field input {
    height: 40px;
    padding: 8px 10px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 15.5px;
    font-family: inherit;
    width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.icm-field input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.icm-hint { font-size: 14px; color: var(--muted); margin: 8px 0 0; }

.icm-result { overflow-x: auto; }
.icm-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 420px; }
.icm-table th, .icm-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.icm-table th { color: var(--label); font-size: 13.5px; font-weight: 600; text-align: left; }
.icm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.icm-table .strong { font-weight: 700; color: var(--text); }
.icm-table .up { color: var(--ok); }
.icm-table .down { color: var(--accent); }
.icm-sum { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.icm-empty { font-size: 15px; color: var(--muted); margin: 0; }

@media (max-width: 640px) {
    .st-cards { grid-template-columns: 1fr; }
    .icm-cols { grid-template-columns: 1fr; gap: 14px; }
    .qz-card { width: 54px; height: 76px; }
    .qz-card b { font-size: 24px; }
    .qz-btn { min-width: 0; flex: 1 1 0; }
    .rg-cell { font-size: 11.5px; }
}

/* ═══ 핸드 복기 (일지 안) ═══════════════════════ */

.hand-box {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.hand-h { font-size: 15.5px; margin: 0 0 10px; }
.hand-h span { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 6px; }

/* 카드 표기 칸은 글자가 짧아 좁아도 된다. 보드는 다섯 장이라 넓게 */
@media (min-width: 641px) {
    .hand-form .fld-cards { flex: 0 1 150px; max-width: 150px; }
    .hand-form .fld-board { flex: 1 1 220px; max-width: 260px; }
}
.hand-form input[type="text"] { font-variant-numeric: tabular-nums; }

/*
 * 미리보기.
 * 잠긴 상태(결과 안 고름)와 준비된 상태를 색으로 나눈다 — 왜 단추가 안 눌리는지
 * 글로만 적어 두면 안 읽는다.
 */
.hand-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-size: 14.5px;
    color: var(--muted);
    margin-bottom: 10px;
}
.hand-preview.locked { border-color: color-mix(in srgb, var(--live, #d4a017) 45%, transparent); }
.hand-preview.locked .hpv-msg { color: var(--live, #d4a017); }
.hand-preview.ready { border-style: solid; border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.hand-preview.ready .hpv-msg { color: var(--ok); }
.hpv-cards { display: inline-flex; gap: 4px; align-items: center; }

.hand-add { margin-bottom: 10px; }
.hand-list { display: flex; flex-direction: column; gap: 6px; }

/* ── 핸드 한 줄 ───────────────────────────────── */

.hrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 7px;
    padding: 8px 10px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14.5px;
}
.hpos {
    min-width: 40px;
    font-weight: 700;
    color: var(--text);
    font-size: 14px;
}

/* 카드는 작게, 그러나 무늬 색은 살린다 */
.hcard {
    display: inline-flex;
    align-items: center;
    padding: 2px 5px;
    border-radius: 4px;
    background: #f6f8fb;
    color: #14181f;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
}
.hcard.red { color: #c02537; }
.hsep { color: var(--muted); font-size: 13px; margin: 0 2px; }

.hres { font-weight: 700; }
.hres.w { color: var(--ok); }
.hres.l { color: var(--accent); }
.hres.f { color: var(--muted); }

.heq {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* 차트 대조 딱지 — 이 기능의 값이 여기 있다 */
.hchart {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
}
.hchart.ok { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.hchart.no { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }

.hpnl { font-variant-numeric: tabular-nums; font-weight: 600; }
.hpnl.up { color: var(--ok); }
.hpnl.down { color: var(--accent); }
.hmemo { color: var(--muted); flex: 1 1 100%; }

.hdel {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 15px;
    padding: 2px 4px;
    font-family: inherit;
}
.hdel:hover { color: var(--accent); }

@media (max-width: 640px) {
    .hmemo { order: 9; }
    .hdel { order: 10; }
}

/* 목록에서 세션 밑에 딸려 나오는 핸드들 */
.srow-hands {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 8px;
}
.srow-hands .hrow { background: var(--surface); font-size: 14px; }

/* ── 승률 딱지: 추정인지 확정인지 ─────────────── */

/*
 * 같은 39% 라도 뜻이 다르다.
 *   평균  상대 패를 모르는 것으로 두고 낸 값
 *   vs    적어 둔 상대 패와 견준 값
 *   확정  상대 패도 보드도 다 알아 계산이 아니라 판정
 * 숫자만 두면 셋을 같은 뜻으로 읽는다.
 */
.heq { display: inline-flex; align-items: baseline; gap: 4px; }
.heq i {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .02em;
}
.heq.known { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }
.heq.known i { color: var(--ok); }

/* ── 포지션별 이탈률 ──────────────────────────── */

.pos-badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    background: var(--surface-3);
    color: var(--muted);
}
.pos-badge.low { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, var(--surface-3)); }
.pos-badge.mid { color: var(--live, #d4a017); background: color-mix(in srgb, var(--live, #d4a017) 16%, var(--surface-3)); }
.pos-badge.high { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-3)); }

.pos-lead {
    margin: 0 0 12px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-sub);
}
.pos-lead a { color: var(--label); font-size: 14.5px; }

.pos-wrap { overflow-x: auto; }
.pos-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 380px; }
.pos-table th, .pos-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.pos-table th { color: var(--label); font-size: 13.5px; font-weight: 600; text-align: left; }
.pos-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pos-table .up { color: var(--ok); }
.pos-table .down { color: var(--accent); }

/* ═══ 카드 고르개 ═══════════════════════════════ */

/*
 * label 이 아니라 div 라서 .entry-form label 규칙이 안 걸린다.
 * 같은 줄에 서야 하므로 폭 잡는 규칙만 따로 준다.
 */
.fld-pick {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 160px;
}
.fld-pick-wide { flex: 1 1 300px; }
.pick-label { font-size: 14px; font-weight: 600; color: var(--label); }
.pick-label em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 4px; }

.csel { min-width: 0; }
.csel-slots { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }

/* 고른 카드 한 장 */
.cslot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 58px;
    padding: 0 8px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text);
    font-size: 23px;
    font-weight: 800;
    font-family: inherit;
    letter-spacing: -.02em;
}
.cslot.filled { background: #f6f8fb; color: #14181f; border-color: transparent; }
.cslot.filled.red { color: #c02537; }

/* 빈 칸은 눌러서 고르는 것임을 화살표로 알린다 */
.cslot.empty {
    cursor: pointer;
    color: var(--muted);
    font-size: 14.5px;
    font-weight: 500;
    font-weight: 500;
    border-style: dashed;
    gap: 3px;
}
.cslot.empty b { font-size: 12px; }
.cslot.empty:hover, .cslot.empty.open { border-color: var(--accent); color: var(--accent); }

/* 카드 밑에 붙는 자리 이름(플랍·턴·리버) */
.cslot em {
    position: absolute;
    left: 0; right: 0; bottom: -15px;
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-align: center;
}
.csel-slots:has(em) { margin-bottom: 16px; }

/* 지우기 ✕ 는 카드 오른쪽 위 */
.cx {
    position: absolute;
    top: -6px; right: -6px;
    width: 17px; height: 17px;
    border-radius: 50%;
    border: 0;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

/* ── 고르는 판 ────────────────────────────────── */

.csel-pick {
    margin-top: 8px;
    padding: 9px 10px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.csel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 8px;
}
.csel-head b { color: var(--text); font-size: 16px; }
.csel-close { margin-left: auto; }
.csel-close, .csel-back {
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 13.5px;
    cursor: pointer;
    padding: 2px 4px;
    font-family: inherit;
}
.csel-close:hover, .csel-back:hover { color: var(--text); }

/*
 * 숫자·무늬 판은 격자로 깐다.
 *
 * ⚠️ 전에는 flex 였다. 폰에서는 자리가 좁아 저절로 여러 줄로 접히면서
 *    단추가 큼직했는데, PC 에서는 열세 개가 한 줄에 다 들어가서
 *    가늘고 긴 띠가 됐다. 같은 화면인데 손가락으로 누를 때와 마우스로
 *    누를 때 생김새가 달랐다.
 *
 *    격자로 두면 어느 폭에서든 같은 모양이 된다. 판 자체에 최대 폭을 줘서
 *    넓은 화면에서 단추가 우스꽝스럽게 늘어나는 것도 막는다.
 */
.csel-pick { max-width: 400px; }

.csel-row {
    display: grid;
    gap: 6px;
}
.csel-row.ranks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.csel-row.suits { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ckey {
    min-width: 0;
    height: 42px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.ckey:hover:not(:disabled) { border-color: var(--accent); }
.ckey:disabled { opacity: .28; cursor: default; }
.ckey.suit { height: 48px; font-size: 22px; }
.ckey.suit.red { color: #ef4b5f; }

@media (max-width: 640px) {
    .fld-pick, .fld-pick-wide { flex: 1 1 100%; }
    .csel-pick { max-width: none; }
    .ckey { height: 40px; font-size: 16px; }
}

/* ── 아웃츠와 충고 ────────────────────────────── */

.houts {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    background: color-mix(in srgb, var(--live, #d4a017) 18%, transparent);
    color: var(--live, #d4a017);
}
/*
 * 앞서 있을 때는 색을 달리한다.
 * 같은 색이면 '아웃 2'와 '상대 아웃 2'가 같은 뜻으로 읽힌다 —
 * 하나는 내가 쫓는 숫자고 하나는 내가 지켜야 할 숫자라 정반대다.
 */
.houts.ahead {
    background: color-mix(in srgb, var(--ok) 16%, transparent);
    color: var(--ok);
}

/*
 * 충고는 줄 아래 한 칸 내려서 붙인다.
 * 카드·승률과 같은 줄에 두면 정작 봐야 할 카드가 안 보인다.
 */
.hadvice {
    flex: 1 1 100%;
    margin-top: 6px;
    padding-top: 7px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hadv {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
    padding-left: 12px;
    position: relative;
}
.hadv::before {
    content: '';
    position: absolute;
    left: 0; top: 7px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
}
/* 결과와 승률이 어긋난 판 — 복기의 알맹이라 눈에 띄게 */
.hadv.note { color: var(--text-sub); }
.hadv.warn { color: var(--live, #d4a017); }

/* 핸드 금액이 세션 손익과 무관하다는 안내 */
.hand-hint {
    flex: 1 1 100%;
    margin: -2px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}
.hand-hint strong { color: var(--text-sub); font-weight: 600; }
.fld-money span em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 4px; }

/* ── 딜 계산 · 올인 필요 승률 ─────────────────── */

.deal-lead, .risk-say {
    margin: 0 0 14px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--text-sub);
}
.icm-table .gap { color: var(--live, #d4a017); }

/* 세 방식이 어떻게 다른지 짧게 적어 둔다. 표만 두면 왜 다른지 모른다 */
.deal-how { margin-top: 12px; }
.deal-how p {
    margin: 0 0 6px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
}
.deal-how b { color: var(--text-sub); }
.deal-how em { font-style: normal; color: var(--text-sub); }

.risk-pick { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.risk-pick label { flex: 0 1 150px; }

/*
 * 두 숫자를 나란히 놓는 게 이 화면의 전부다.
 * 50% 와 ICM 값이 붙어 있어야 '얼마나 더 필요한가'가 눈에 들어온다.
 */
.risk-two {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.risk-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
}
.risk-box.hot { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.risk-box span { font-size: 13.5px; color: var(--label); }
.risk-box strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.risk-box .up { color: var(--ok); }
.risk-box .down { color: var(--accent); }

.risk-detail {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .risk-two { grid-template-columns: 1fr; }
    .risk-pick label { flex: 1 1 100%; }
}

/* ── ICM 표 다듬기 ────────────────────────────── */

.nav-violet { color: #a78bfa; }

/*
 * 표를 화면 끝까지 늘리지 않는다.
 *
 * 넓은 화면에서 칸이 1200px 넘게 벌어지면 숫자 사이가 너무 멀어, 세 방식을
 * 견주려고 눈이 화면을 가로질러야 한다. 표는 숫자를 견주라고 있는 것이라
 * 붙어 있어야 한다.
 */
.icm-table { max-width: 760px; }
.icm-table .seat { color: var(--label); font-size: 14px; white-space: nowrap; }

/* 칩 비율 막대 — 숫자보다 먼저 눈에 들어온다 */
.icm-table .share { white-space: nowrap; }
.icm-table .bar {
    display: inline-block;
    width: 54px;
    height: 6px;
    margin-right: 7px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
    vertical-align: 1px;
}
.icm-table .bar i {
    display: block;
    height: 100%;
    background: var(--label);
    border-radius: 999px;
}

/* 그 사람에게 제일 유리한 나누기 방식 */
.icm-table td.best {
    color: var(--ok);
    font-weight: 700;
    background: color-mix(in srgb, var(--ok) 8%, transparent);
}
.icm-table td.best i {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ok) 20%, transparent);
    vertical-align: 1px;
}

@media (max-width: 640px) {
    .icm-table .bar { width: 32px; margin-right: 5px; }
    .icm-table td.best i { display: none; }
}

/* ── 푸시폴드 차트 ────────────────────────────── */

.icm-unit { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 4px; }

.pf-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/*
 * 폴드했을 때와 아무도 안 받았을 때의 기대 상금.
 * 판이 왜 그렇게 그려졌는지 확인할 근거라 화면에 남겨 둔다.
 */
.pf-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: center;
    margin-left: auto;
    font-size: 14px;
    color: var(--muted);
}
.pf-info b { color: var(--text-sub); font-variant-numeric: tabular-nums; }

.pf-dim { color: var(--muted); font-size: 14.5px; }

/* 계산 구조를 글로 풀면 길어진다. 그림처럼 보여주는 편이 짧다 */
.pf-math {
    margin: 0 0 14px;
    padding: 13px 15px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-sub);
    overflow-x: auto;
    white-space: pre;
    font-family: inherit;
}

.pf-limits { margin: 0 0 14px; padding-left: 18px; }
.pf-limits li {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--text-sub);
    margin-bottom: 6px;
}

@media (max-width: 640px) {
    .pf-info { margin-left: 0; flex: 1 1 100%; }
    .pf-row label { flex: 1 1 140px; }
}

/* ICM 화면에서 푸시폴드로 넘어가는 넓은 카드 */
.st-card.st-wide { max-width: none; }
#pf-link-panel { padding: 0; border: 0; background: none; }

/* ── 푸시폴드: 칸 하나 자세히 ──────────────────── */

/* 지금 보고 있는 칸. 켜짐(초록)과 겹쳐도 구별되게 테두리로 표시한다 */
#pf-grid .rg-cell { cursor: pointer; }
#pf-grid .rg-cell.picked {
    outline: 2px solid var(--text);
    outline-offset: -1px;
    color: var(--text);
}

.pf-detail {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
}
.pf-detail.plus { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.pf-detail.minus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

.pf-d-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 12px;
}
.pf-d-hand { font-size: 21px; font-weight: 800; }
.pf-d-seat {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-sub);
    font-size: 14px;
    font-weight: 700;
}
.pf-d-verdict {
    margin-left: auto;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 800;
}
.pf-detail.plus .pf-d-verdict {
    background: color-mix(in srgb, var(--ok) 18%, transparent);
    color: var(--ok);
}
.pf-detail.minus .pf-d-verdict {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}

/*
 * 폴드 · 올인 · 차이를 나란히.
 * 차이가 이 화면의 답이라 셋을 붙여 놔야 한 번에 읽힌다.
 */
.pf-d-nums {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.pf-d-nums div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface);
}
.pf-d-nums span { font-size: 13.5px; color: var(--label); }
.pf-d-nums strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.pf-d-nums .up { color: var(--ok); }
.pf-d-nums .down { color: var(--accent); }

.pf-d-line {
    margin: 0 0 12px;
    font-size: 14.5px;
    color: var(--muted);
}
.pf-d-line b { color: var(--text-sub); }

.pf-d-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pf-d-table th, .pf-d-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border);
}
.pf-d-table th { color: var(--label); font-size: 13px; font-weight: 600; text-align: left; }
.pf-d-table .num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .pf-d-nums { grid-template-columns: 1fr; }
    .pf-d-verdict { margin-left: 0; }
}

/* ── 오늘 브리핑 · 찜 ──────────────────────────── */

/*
 * 홈에서 가장 먼저 읽히는 칸이다. 그래서 카드보다 조금 진하게 두고,
 * 안쪽 글자는 오히려 작게 잡았다 — 여기서 하는 일은 읽는 게 아니라
 * 훑는 것이다.
 */
.brief {
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.brief-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.brief-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-sub); }
.brief-title b { color: var(--text); }

.brief-streak {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ok) 16%, transparent);
    color: var(--ok);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.brief-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
}

.brief-h {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--label);
    letter-spacing: .01em;
}
.brief-n {
    margin-left: 6px;
    color: var(--muted);
    font-weight: 600;
}

.brief-list { margin: 0; padding: 0; list-style: none; }
.brief-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 7px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    line-height: 1.35;
}
.brief-list li:last-child { border-bottom: 0; }
.brief-list b { font-weight: 700; }
.brief-list a { color: var(--text); text-decoration: none; font-weight: 700; }
.brief-list a:hover { text-decoration: underline; }

/* 시간 · 지역 · 딸린 설명 */
.brief-list .bt {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--accent);
}
.brief-list .bt.past { color: var(--muted); }
.brief-list .bl {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 700;
}
.brief-list .bs { color: var(--muted); font-size: 14px; }
.brief-list .bempty { color: var(--muted); }

/* D-day 뱃지 — 목록 카드의 것과 같은 말투로 */
.brief-list .bdd {
    min-width: 38px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.brief-list .bdd.live {
    background: color-mix(in srgb, var(--ok) 18%, transparent);
    color: var(--ok);
}
.brief-list .bstar { color: var(--warn); font-size: 14px; }
.brief-list .bearly {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
}

.brief-more, .brief-hint {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
}
.brief-more:hover { text-decoration: underline; }
.brief-hint b { color: var(--text-sub); }

@media (max-width: 640px) {
    .brief { padding: 14px; }
    .brief-cols { grid-template-columns: 1fr; gap: 16px; }
}

/* ── 찜 단추 ──────────────────────────────────── */

.star-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.star-btn:hover { color: var(--text-sub); border-color: var(--text-sub); }
.star-btn.on {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 55%, transparent);
    background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.star-btn .star-mark { font-size: 15px; line-height: 1; }

.star-btn.star-big {
    margin-top: 10px;
    padding: 7px 14px;
    font-size: 15px;
}

/* ── 빠른 기록 ────────────────────────────────── */

/*
 * 홀덤펍에서 나오는 길에 쓰는 칸이다. 폰 한 손으로 세 번 눌러 끝나야 해서,
 * 칩을 크게 두고 줄 사이를 넉넉히 잡았다. 아래 달력의 입력 칸과 달리
 * 여기서는 잘못 눌리는 것이 안 쓰는 것보다 낫다.
 */
.quick-date { margin-left: auto; font-size: 14px; color: var(--muted); font-weight: 700; }

.quick-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.quick-row:last-of-type { border-bottom: 0; }

.quick-label {
    flex: 0 0 44px;
    padding-top: 7px;
    font-size: 14px;
    font-weight: 700;
    color: var(--label);
}
.quick-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.quick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-chips .chip { padding: 6px 11px; font-size: 14.5px; }

.quick-body input {
    flex: 1 1 150px;
    min-width: 110px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-size: 15px;
}
.quick-body input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#q-amount { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }

.quick-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.quick-foot .cta-btn { margin-left: auto; }

.quick-note {
    margin: 10px 0 0;
    padding: 8px 11px;
    border-radius: var(--radius);
    font-size: 14.5px;
}
.quick-note.good { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.quick-note.bad { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

.s-quick { color: var(--muted); }

@media (max-width: 640px) {
    /*
     * ⚠️ 이름표를 <b>위로 올리지 않는다.</b>
     *
     *   전에는 폰에서 줄마다 이름표를 한 줄 위에 얹었다. 세 줄이 여섯 줄이
     *   되면서 패널이 510px 이 됐고, 장소 칸은 169px 만 쓰고 오른쪽
     *   158px 을 비워 뒀다. 이름표는 두 글자다 — 옆에 붙여 두고
     *   남는 폭을 칸에 다 준다.
     */
    .quick-row {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 7px 0;
    }
    .quick-label { flex: 0 0 26px; padding-top: 0; font-size: 13.5px; }
    .quick-body { gap: 4px; }
    /*
     * 남는 폭을 다 먹게 한다.
     * ⚠️ basis 를 auto 로 두면 <b>칸의 타고난 폭</b>(글자 20자쯤)이 기준이 되어,
     *    옆의 칩과 더해 통을 넘기면 제 줄로 내려간 다음 혼자 꽉 찬다.
     *    0 으로 두면 '남은 만큼'이 되어 절대 안 내려간다.
     */
    .quick-body input { flex: 1 1 0; min-width: 0; width: auto; }
    /*
     * 시간 칩 일곱 개가 한 줄에 들어가야 한다.
     * 8시간 하나만 둘째 줄로 떨어지면 그 줄이 통째로 버려진다.
     */
    .quick-chips { gap: 3px; }
    .quick-chips .chip { padding: 5px 4px; font-size: 13.5px; }

    .quick-foot { gap: 8px; margin-top: 10px; }
    /* 단추를 제 줄로 내리지 않는다. 종류 칩 옆에 남는 자리가 넉넉하다 */
    .quick-foot .cta-btn { margin-left: auto; width: auto; padding: 9px 18px; }
}

/* ── 오늘의 핸드 ──────────────────────────────── */

.hod-loading, .hod-error { color: var(--muted); font-size: 15px; margin: 4px 0 0; }
.hod-error { color: var(--accent); }

.hod-spot { margin: 0 0 12px; color: var(--text-sub); font-size: 15px; font-weight: 600; }

.hod-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 14px;
}
.hod-cardline { display: inline-flex; align-items: center; gap: 5px; }
.hod-clabel { color: var(--label); font-size: 13.5px; font-weight: 700; margin-right: 3px; }
/* 목록에서 쓰는 .hcard 를 그대로 쓰되 여기서만 키운다 */
.hod-card { padding: 4px 8px; font-size: 17px; border-radius: 5px; }

/*
 * 액션 줄거리. 번호를 매기는 이유는 순서가 곧 정보이기 때문이다 —
 * 플랍에서 친 사람이 턴에서 체크한 것이 이 문제의 핵심인 경우가 많다.
 */
.hod-story {
    margin: 0 0 16px;
    padding: 12px 14px 12px 32px;
    border-left: 3px solid var(--border);
    background: var(--surface-3);
    border-radius: var(--radius);
    font-size: 15.5px;
    line-height: 1.6;
}
.hod-story li { margin: 2px 0; }

.hod-ask { margin: 0 0 10px; font-size: 17px; font-weight: 800; }

.hod-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.hod-pick {
    flex: 1 1 120px;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.hod-pick:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.hod-pick:disabled { cursor: default; opacity: .55; }
.hod-pick.picked {
    opacity: 1;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

.hod-result { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.hod-h { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--label); }
.hod-result .hod-h + * { margin-top: 0; }
.hod-result .hod-h:not(:first-child) { margin-top: 20px; }

.hod-bar {
    display: grid;
    grid-template-columns: minmax(84px, 1fr) 2.2fr auto;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 15px;
}
.hod-bl { font-weight: 700; color: var(--text-sub); }
.hod-bl em { display: block; font-size: 12.5px; font-style: normal; color: var(--accent); font-weight: 700; }
.hod-bar.mine .hod-bl { color: var(--accent); }
.hod-btrack {
    height: 9px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}
.hod-btrack i { display: block; height: 100%; background: var(--text-sub); border-radius: 999px; }
.hod-bar.mine .hod-btrack i { background: var(--accent); }
.hod-bn { font-variant-numeric: tabular-nums; font-weight: 800; min-width: 34px; text-align: right; }

.hod-total { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.hod-note { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--text-sub); }
.hod-note b { color: var(--text); }
.hod-tool { margin: 14px 0 0; }

@media (max-width: 640px) {
    .hod-bar { grid-template-columns: minmax(72px, 1fr) 1.6fr auto; gap: 8px; }
    .hod-pick { flex: 1 1 100%; }
}

/* 홈 브리핑에 거는 오늘의 핸드 */
.brief-hand { margin-bottom: 12px; }
.brief-hand-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
}
.brief-hand-link:hover { border-color: var(--accent); }
.bh-mark {
    flex: 0 0 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-weight: 800;
    font-size: 15px;
}
.brief-hand-link.done .bh-mark {
    background: color-mix(in srgb, var(--ok) 16%, transparent);
    color: var(--ok);
}
.bh-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bh-body b { font-size: 15px; color: var(--text); }
.bh-sub { font-size: 13.5px; color: var(--muted); }

/*
 * 전체 백업 단추.
 *
 * CSV 와 나란히 서지만 하는 일이 다르다. 생김새가 같으면 아무 거나 누르고
 * "받았으니 됐다" 고 넘어간다 — 그런데 CSV 에는 핸드 복기가 안 들어 있다.
 * 테두리를 진하게 해서 다른 물건임을 보이게 한다.
 */
.chip.bk { border-color: var(--border-strong); color: var(--text-sub); font-weight: 700; }
.chip.bk:hover { border-color: var(--accent); color: var(--accent); }

#storage-notice small {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
}

/* ── 족보 확률표 ──────────────────────────────── */

/*
 * 숫자를 찾아 들어온 사람이 보는 표다. 줄이 열 개뿐이라 화려할 필요는 없고,
 * 눈이 가로로 미끄러지지 않게 하는 것이 전부다.
 */
.odds-table { min-width: 520px; }
.odds-table .en { color: var(--muted); font-size: 14px; white-space: nowrap; }
.odds-table .dim { color: var(--muted); }
.odds-table .on { color: var(--text); font-weight: 700; }

/* 비중 막대 — 표 안에서 어느 족보가 흔한지 한눈에 */
.odds-table .bar {
    width: 34%;
    min-width: 90px;
    padding-right: 4px;
}
.odds-table .bar i {
    display: block;
    height: 8px;
    min-width: 1px;
    border-radius: 999px;
    background: var(--text-sub);
}

@media (max-width: 640px) {
    /* 영어 이름은 폰에서 뺀다. 자리를 제일 많이 먹는데 정보량은 제일 적다 */
    .odds-table .en, .odds-table th:nth-child(2):not(.num) { display: none; }
    .odds-table { min-width: 420px; }
    .odds-table .bar { min-width: 60px; }
}

/* 가이드 — 따뜻한 호박색. 다른 다섯 메뉴와 겹치지 않는 색으로 골랐다 */
:root { --amber: #fbbf24; }
:root:not([data-theme]),
:root[data-theme="beige"] { --amber: #8f4a05; }

.nav-amber { color: var(--amber); font-weight: 800; }
.nav-link:hover .nav-amber,
.nav-link.active .nav-amber { color: var(--amber); }

/* ── 폰에서는 내비를 제 줄에 내린다 ─────────────── */

/*
 * 폰에서는 메뉴를 <b>두 줄로 나눈다.</b>
 *
 * 한 줄에 다 넣으면 여섯 개가 안 들어가 절반이 잘렸고, 통째로 아랫줄에
 * 내리면 <b>로고 오른쪽이 통째로 비었다</b>. 둘 다 아까운 자리다.
 *
 * 그래서 자주 가는 둘(대회 일정 · MY TRACKER)만 로고 옆에 남기고 나머지를
 * 아랫줄로 내린다. 위·아래 다 <b>안 잘린다</b> — 밀 필요가 없다.
 *
 * ⚠️ 목록을 서버에서 둘로 쪼개지 않는다. 그러면 넓은 화면의 메뉴 차례까지
 *    바뀐다. 차례는 그대로 두고 <b>order 로 자리만</b> 옮긴다.
 *    .nav 에 display:contents 를 주면 메뉴 하나하나가 머리말의 칸이 되어,
 *    로고·다크 단추와 같은 줄에서 자리를 다툴 수 있다.
 */
@media (max-width: 720px) {
    .header-inner {
        height: auto;
        gap: 6px 8px;
        flex-wrap: wrap;
        padding-top: 8px;
        padding-bottom: 7px;
        align-items: center;
    }
    .header-inner > .logo { flex: 0 0 auto; order: 1; }
    .header-actions { flex: 0 0 auto; order: 3; margin-left: auto; }

    /* 메뉴 통을 없애고 항목을 머리말에 바로 앉힌다 */
    .nav {
        display: contents;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .nav-link { order: 5; padding: 5px 7px; font-size: 14.5px; letter-spacing: 0; }
    .nav-link .nav-lime { letter-spacing: 0; }

    /*
     * 로고·로그인·테마 뒤에서 줄을 끊는다. 메뉴는 통째로 아랫줄에서
     * <b>한 줄</b>로 선다.
     *
     * 예전에는 자주 가는 둘(대회 일정·MY TRACKER)만 로고 옆에 남겼는데,
     * 그러면 윗줄이 로고 + 메뉴 둘 + 로그인 + 테마로 다섯 덩어리가 되어
     * 폰에서 빽빽했다. MY TRACKER 를 오른쪽 아래 동그란 단추로 뺀 뒤로는
     * 나머지가 한 줄에 다 들어간다.
     */
    .header-inner::after {
        content: '';
        flex: 1 0 100%;
        order: 4;
        height: 0;
    }

    .logo { font-size: 17px; }
}

@media (max-width: 400px) {
    .logo { font-size: 17px; }
    .header-inner { gap: 5px 6px; padding-left: 12px; padding-right: 12px; }
    .nav-link { padding: 5px 5px; font-size: 14px; }
}

/* ── 해외 원정 비용 계산기 ────────────────────── */

.ab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 24px;
}
.ab-col { min-width: 0; }

.ab-fld {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 15px;
}
.ab-fld > span {
    flex: 0 0 42%;
    color: var(--label);
    font-weight: 600;
}
.ab-fld > span em {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}
.ab-fld input, .ab-fld select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-size: 15px;
}
.ab-fld input { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.ab-fld input:focus, .ab-fld select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* 안 쓰는 칸은 흐리게. 어느 쪽이 먹히는지 안 보이면 고쳐도 안 바뀌는 줄 안다 */
.ab-fld.off { opacity: .45; }
.ab-fld input:disabled { cursor: not-allowed; }

.ab-hint { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/*
 * 큰 숫자 셋. 가운데(본전 상금)가 이 화면의 답이라 눈에 띄게 둔다.
 */
.ab-out {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.ab-big {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface-3);
}
.ab-big span { font-size: 13.5px; color: var(--label); }
.ab-big span em { font-style: normal; color: var(--muted); }
.ab-big strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.ab-big.key {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.ab-big.key strong { color: var(--accent); }

/*
 * 비용 표는 세 칸뿐이라 폰에서도 그대로 들어간다.
 * odds-table 의 최소 폭(520px)을 물려받으면 쓸데없이 가로로 밀린다.
 */
.ab-table { min-width: 300px; }
.ab-table .dim { color: var(--muted); }
.ab-table tr.ab-total td { border-top: 1px solid var(--border-strong); }
.ab-table tr.ab-total td b { font-size: 16px; }

@media (max-width: 860px) {
    .ab-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .ab-grid { grid-template-columns: 1fr; gap: 14px; }
    .ab-out { grid-template-columns: 1fr; gap: 8px; }
    .ab-big { flex-direction: row; align-items: baseline; justify-content: space-between; }
    .ab-fld > span { flex: 0 0 46%; }
}

/*
 * 왜 실시간으로 안 나오는가 — 핸드 복기 칸 맨 위.
 *
 * 적어 두지 않으면 '못 만든 것'으로 읽힌다. 그러면 다른 데서 실시간으로 되는
 * 도구를 찾아 쓰게 되고, 우리가 막은 의미가 없어진다.
 * 경고가 아니라 입장 표명이라 빨강이 아니라 차분한 테두리로 둔다.
 */
.hand-why {
    margin: 0 0 14px;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface-3);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
}
.hand-why strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 15px; }
.hand-why b { color: var(--text-sub); }
.ab-hint.bad { color: var(--accent); }
.ab-hint b { color: var(--text-sub); }

/* ── 나라별 원천징수 표 ────────────────────────── */

/*
 * 세 번째 칸이 근거라 길다. 폭을 넉넉히 주고 왼쪽 두 칸은 붙여 둔다.
 * 숫자 칸에 색을 주는 것은 예뻐서가 아니라, '떼는 곳/안 떼는 곳/모르는 곳'이
 * 한눈에 갈려야 하기 때문이다.
 */
.wht-table { min-width: 560px; }
.wht-table td:nth-child(3) { font-size: 14px; line-height: 1.6; color: var(--muted); }
.wht-table td:nth-child(3) b { color: var(--text-sub); }
.wht-table .num { font-weight: 800; white-space: nowrap; }
.wht-table .num em { display: block; font-style: normal; font-size: 12.5px; font-weight: 600; }
.wht-table .hot { color: var(--accent); }
.wht-table .ok { color: var(--ok); }
.wht-table .warn { color: var(--warn); }
.wht-table .dim { color: var(--muted); font-weight: 600; }

@media (max-width: 640px) {
    .wht-table { min-width: 480px; }
}

/* ── 한국 선수 성적 ────────────────────────────── */

.res-sub {
    margin-left: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
}

.res-table { min-width: 520px; }
.res-table .dim { color: var(--muted); }
.res-table td em {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 2px;
}
.res-table .res-ev { letter-spacing: -0.1px; }
.res-table td a { color: var(--text); text-decoration: none; }
.res-table td a:hover { text-decoration: underline; }
.res-table .empty { color: var(--muted); text-align: center; padding: 18px 8px; }

/* 제보 양식 — 무엇을 갖춰 보내야 하는지 */
.fs-row {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}
.fs-row:last-child { border-bottom: 0; }
.fs-row > span { flex: 0 0 34%; color: var(--label); font-weight: 700; }
.fs-row > b { color: var(--text-sub); font-weight: 500; }

@media (max-width: 640px) {
    .res-table { min-width: 440px; }
    .fs-row { flex-direction: column; gap: 2px; }
    .fs-row > span { flex: none; }
}

/*
 * 내국인 참가 가능 여부.
 *
 * ⚠️ '있으면 좋은 정보'가 아니라 없으면 안 되는 정보다. 국내 카지노 대회는
 *    한국 사람이 아예 못 나가는데, 그 말을 안 하면 비행기표를 끊게 만든다.
 *    그래서 빨강으로 둔다 — 눈에 안 띄면 없는 것과 같다.
 */
.tag-noentry {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
    font-weight: 800;
}
.tag-entryok {
    background: color-mix(in srgb, var(--ok) 16%, transparent);
    color: var(--ok);
}

/* ── 자리 고르기: 홀덤 테이블 ──────────────────── */

/*
 * 목록에서 'UTG' 를 고르는 것과 테이블에서 그 자리를 누르는 것은 다르다.
 * 글자만 봐서는 어디인지 모르는 사람이 많다. 딜러 버튼을 그려 두고
 * 그 옆부터 SB·BB·UTG 로 세워 두면, 고르는 동안 순서까지 같이 익힌다.
 */
/*
 * ⚠️ .entry-form 은 grid 가 아니라 flex 다. grid-column: 1/-1 을 걸었더니
 *    아무 일도 안 일어나서 테이블이 133px 로 쪼그라들었다.
 *    같은 폼 안의 label.wide 가 쓰는 방식(flex-basis 100%)을 그대로 쓴다.
 */
.fld-table { flex: 1 1 100%; min-width: 0; }
.fld-table .pick-label { display: block; margin-bottom: 8px; }
.fld-table .pick-label em {
    font-style: normal;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin-left: 4px;
}

.pk-table {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 5 / 3;
    margin: 4px 0 2px;
}

/* 테이블 천. 자리 단추가 위에 뜨므로 자체는 조용해야 한다 */
.pk-felt {
    position: absolute;
    inset: 14% 12%;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ok) 12%, var(--surface-3));
    border: 2px solid color-mix(in srgb, var(--ok) 28%, transparent);
    display: grid;
    place-items: center;
}
.pk-felt-label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: color-mix(in srgb, var(--ok) 60%, var(--muted));
}

.pk-seat {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 46px;
    padding: 5px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-sub);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    white-space: nowrap;
}
.pk-seat:hover { border-color: var(--accent); color: var(--accent); }
.pk-seat.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* 9맥스에만 있는 자리 — 6맥스에는 없다는 것을 흐림으로 알린다 */
.pk-seat.nine { opacity: .72; }
.pk-seat.nine.on { opacity: 1; }

/* BB 는 여는 자리가 아니라 막는 자리다. 차트도 디펜스 레인지를 쓴다 */
.pk-seat.def { border-style: dashed; }

/* 딜러 버튼 */
.pk-dealer {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f8fafc;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid #cbd5e1;
    pointer-events: none;
}

@media (max-width: 640px) {
    .pk-table { max-width: 100%; aspect-ratio: 4 / 3; }
    .pk-seat { min-width: 40px; padding: 4px 6px; font-size: 12.5px; }
}

.hand-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.hand-add-hint { font-size: 13.5px; color: var(--muted); }
.hand-add-hint b { color: var(--text-sub); }

/* ── 테이블에서 카드까지: 자리·보드·독 ─────────── */

.pk-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.pk-head .pick-label { margin: 0; }
.pk-head .chip { margin-left: auto; }

/* 자리 단추가 카드까지 안고 있어서 전보다 크다 */
.pk-table { aspect-ratio: 5 / 3.2; }

.pk-seat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 48px;
    padding: 4px 7px;
}
.pk-seat .pk-name { font-size: 13.5px; font-weight: 700; line-height: 1.1; }

/* '나' 와 '상대' 는 색으로 갈라 둔다. 글자만으로는 훑을 때 안 보인다 */
.pk-seat.me {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.pk-seat.vs {
    background: color-mix(in srgb, var(--text-sub) 18%, var(--surface));
    border-color: var(--text-sub);
    color: var(--text);
}
.pk-seat.picking { outline: 2px dashed var(--accent); outline-offset: 2px; }

.pk-badge {
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 0 4px;
    border-radius: 999px;
    line-height: 1.5;
}
.pk-badge.me { background: rgba(255, 255, 255, .25); color: #fff; }
.pk-badge.vs { background: var(--text-sub); color: var(--surface); }

.pk-cards { display: flex; gap: 3px; }
/*
 * 카드는 <b>읽으라고</b> 있는 것이다. 10.5px 로는 ♥ 와 ♦ 가 안 갈리고
 * 10 과 J 가 안 갈렸다. 승률 계산은 맞는데 그림이 안 읽히면
 * 뭘 보고 복기하라는 것인지 알 수 없다.
 */
.pk-cards .hcard {
    padding: 2px 5px;
    font-size: 15.5px;
    font-weight: 800;
    border-radius: 4px;
    letter-spacing: -.01em;
}
.pk-cards .hcard.blank {
    background: transparent;
    border: 1px dashed currentColor;
    opacity: .5;
    min-width: 19px;
    text-align: center;
}

/* ── 보드는 테이블 한가운데 ────────────────────── */

.pk-board {
    display: flex;
    gap: 4px;
    padding: 7px 9px;
    border: 1px dashed color-mix(in srgb, var(--ok) 40%, transparent);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    font: inherit;
}
.pk-board:hover { border-color: var(--accent); }
.pk-board.picking { border-style: solid; border-color: var(--accent); }

/*
 * 다섯 칸을 늘 띄운다. 여기서는 '아직 안 깔린 카드'가 보이는 것이 맞다 —
 * 플랍에서 멈춘 판인지 리버까지 간 판인지가 칸 모양으로 바로 보인다.
 */
.pk-bcard {
    position: relative;
    width: 36px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    border: 1px dashed color-mix(in srgb, var(--ok) 45%, transparent);
}
.pk-bcard.filled { border-style: none; }
.pk-bcard .hcard {
    width: 100%;
    height: 100%;
    justify-content: center;
    padding: 0;
    font-size: 17px;
    font-weight: 800;
    border-radius: 4px;
}
.pk-bcard em {
    position: absolute;
    bottom: -14px;
    font-style: normal;
    font-size: 11px;
    color: color-mix(in srgb, var(--ok) 55%, var(--muted));
    white-space: nowrap;
}

/* ── 고르개 독 ─────────────────────────────────── */

.pk-dock {
    margin-top: 20px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-3);
}
.pk-dock-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14.5px;
}
.pk-dock-head .chip { margin-left: auto; }

/* ── 액션 기록 ─────────────────────────────────── */

.fld-acts { flex: 1 1 100%; min-width: 0; }

.act-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 6px 0 10px;
}
.act-group { display: flex; flex-wrap: wrap; gap: 4px; }
.act-group .chip { padding: 5px 9px; font-size: 14px; }
.act-group .chip:disabled { opacity: .35; cursor: not-allowed; }

#act-amt {
    width: 110px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-size: 14.5px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
#act-amt:disabled { opacity: .4; }
.act-put { font-weight: 800; }
.act-put:disabled { opacity: .4; cursor: not-allowed; }

.act-log { display: flex; flex-direction: column; gap: 5px; }
.act-empty { font-size: 14px; color: var(--muted); }
.act-street {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 7px;
    font-size: 14px;
}
.act-street > b {
    min-width: 48px;
    color: var(--label);
    font-size: 13px;
    font-weight: 700;
}
.act-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 8px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-sub);
}
/*
 * 액션 색.
 *   내 것    초록
 *   상대 것  빨강
 * 자리 이름은 둘 다 자리 색으로 둔다 — 자리는 '누구'지 '무엇'이 아니다.
 */
.act-item.me {
    background: color-mix(in srgb, var(--ok) 13%, transparent);
    color: var(--ok);
}
.act-item.vs {
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    color: var(--accent);
}
.act-item .act-seat {
    font-style: normal;
    font-weight: 800;
    color: var(--seat);
    letter-spacing: .01em;
}
.act-item .act-do-t { font-weight: 700; }
.act-item em { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 700; }
.act-x {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .55;
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
}
.act-x:hover { opacity: 1; }

/* 목록에서 보여주는 액션 줄 */
.hacts {
    flex: 1 1 100%;
    margin-top: 3px;
    font-size: 13.5px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
}
.hacts b { color: var(--text-sub); font-weight: 700; }

@media (max-width: 640px) {
    /* 자리에 사람 그림이 붙어 세로로 커졌다. 테이블을 그만큼 늘려 준다 */
    .pk-table { aspect-ratio: 4 / 3.9; }
    .pk-seat { min-width: 42px; padding: 3px 5px; }
    .pk-seat .pk-name { font-size: 12.5px; }
    .pk-cards .hcard { padding: 1px 3px; font-size: 13.5px; }
    .pk-bcard { width: 29px; height: 39px; }
    .pk-bcard .hcard { font-size: 15px; }
    #act-amt { width: 88px; }
}

/* 단위 고르개는 금액 칸에 붙여 둔다 — 둘이 한 덩어리로 읽혀야 한다 */
.act-unit { gap: 3px; }
.act-unit .chip { padding: 5px 8px; font-size: 13px; }
.act-unit .chip:disabled { opacity: .35; cursor: not-allowed; }

/* 링 수 고르개는 '내 자리 바꾸기' 왼쪽에 붙는다 */
#h-ring { margin-left: auto; }
#h-ring + .chip { margin-left: 0; }
#h-ring .chip { padding: 5px 9px; font-size: 13.5px; }

/* 자동으로 고른 결과 — 사람이 고친 게 아니라는 표시 */
.h-auto {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ok);
    margin-left: 4px;
}

/* 블라인드 칸은 액션 기록 제목 줄에 붙는다 */
.act-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 4px;
}
.act-head .pick-label { margin: 0; margin-right: auto; }
.act-blind { display: flex; align-items: center; gap: 5px; font-size: 13.5px; }
.act-blind > span { color: var(--label); font-weight: 700; white-space: nowrap; }
.act-blind input {
    width: 72px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
    .act-head .pick-label { flex: 1 1 100%; margin-right: 0; }
    .act-blind input { width: 60px; }
}

/*
 * 액션 기록 옆에 붙는 팟, 자리 칩에 붙는 스택.
 *
 * 팟은 거리마다 하나씩 줄 끝에 붙는다 — 복기에서 제일 먼저 보는 숫자가
 * '그때 팟이 얼마였나'다. 벳 크기는 팟 대비로만 뜻이 있다.
 */
/*
 * 팟도 <b>팟 색</b>(금빛)으로 둔다. 다만 거리마다 붙는 것은 지나가는
 * 숫자라 테두리만 두르고, 최종 팟은 속을 채운다 —
 * <b>같은 것의 중간값과 마지막값</b>이라 색이 갈리면 오히려 딴 것처럼 보인다.
 * 넷이 나란히 붙는데 다 진하면 정작 액션이 안 읽힌다.
 */
/*
 * ⚠️ 선택자를 <b>.entry-form 으로 감싼다.</b>
 *
 * `.entry-form span { color: var(--label) }` 이 이미 있다. 클래스 하나짜리
 * `.act-pot` 는 그것보다 가벼워서 <b>글자색만 안 먹었다</b> —
 * 테두리·바탕은 그 규칙이 안 건드리니 멀쩡히 바뀌어서, 색이 반만 바뀐
 * 이상한 상태로 보였다. 최종 팟은 `.act-pot.last` 라 클래스가 둘이어서
 * 이겼고, 그래서 <b>최종 팟만 바뀐 것처럼</b> 보였다.
 *
 * 이 문서 맨 위에 적어 둔 함정이다. 규칙 하나 써 놓고 이긴 줄 알면 진다.
 */
.entry-form .act-pot {
    margin-left: 6px;
    padding: 2px 7px;
    border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--warn) 7%, transparent);
    color: var(--pot);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pk-stack {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--label);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.pk-seat.me .pk-stack, .pk-seat.vs .pk-stack { color: inherit; opacity: .85; }

/*
 * ⚠️ .entry-form input.num-cell { width:100% } 이 이 칸들까지 잡아
 *    블라인드·스택 칸이 화면 절반씩 차지하고 있었다. 여기서 되돌린다.
 *    (클래스 두 개짜리 선택자를 이겨야 해서 .act-blind 를 겹쳐 쓴다)
 */
.entry-form .act-blind input.num-cell { width: 82px; }
@media (max-width: 640px) {
    .entry-form .act-blind input.num-cell { width: 64px; }
}

/*
 * 고르개 독 — 여백을 줄인다.
 *
 * 카드 다섯 장만 들어 있는데 통이 화면 끝까지 늘어나 있었다.
 * 빈 칸이 넓으면 '여기 뭔가 더 들어가야 하나' 싶어진다.
 * 내용만큼만 차지하게 두고, 좁은 화면에서만 꽉 채운다.
 */
.pk-dock {
    width: fit-content;
    max-width: 100%;
    margin-top: 12px;
    padding: 8px 10px;
}
.pk-dock-head { margin-bottom: 6px; }
.pk-dock .csel-slots { gap: 8px; }
@media (max-width: 640px) {
    .pk-dock { width: auto; }
}

/*
 * <b>최종 팟</b>은 한 판에 하나뿐이고, 복기에서 제일 먼저 찾는 숫자다.
 *
 * 색은 금빛(--warn)으로 둔다. 빨강은 상대 액션, 초록은 hero 액션,
 * 파랑은 자리 이름이 이미 쓰고 있어서 <b>남은 색이 그것뿐</b>이고,
 * 마침 '가져가는 돈'과 어울린다.
 */
.entry-form .act-pot.last {
    border-style: solid;
    border-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 18%, transparent);
    color: var(--warn);
    font-weight: 800;
    font-size: 13.5px;
    padding: 2px 9px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 12%, transparent);
}

/*
 * 폰에서 액션 머리가 다섯 칸(SB·BB·앤티·내 스택·상대 스택)이 되면서
 * 222px 을 먹었다. 테이블만큼 높은 입력 줄은 아무도 안 읽는다.
 * 칸을 좁히고 이름을 줄여 두 줄에 앉힌다.
 */
@media (max-width: 640px) {
    .act-head { gap: 4px 6px; }
    .act-blind { gap: 3px; font-size: 13px; }
    .entry-form .act-blind input.num-cell { width: 56px; padding: 4px 6px; }
}

/*
 * ⚠️ .act-blind 는 <label> 이라 .entry-form label 규칙이 먼저 걸린다 —
 *    display:flex 는 같지만 flex-direction:column 과 flex:1 1 140px 때문에
 *    이름이 칸 위로 올라가고 칸마다 화면 절반씩 늘어났다.
 *    (문서 맨 위에도 적어 둔 함정이다: 규칙 하나 써 놓고 이긴 줄 알면 진다)
 *    가로로 눕히고 내용만큼만 차지하게 되돌린다.
 */
.act-head .act-blind {
    flex-direction: row;
    flex: 0 0 auto;
    gap: 5px;
}

/* ── 여럿이 낀 판 ──────────────────────────────── */

/* 접은 사람은 흐리게. 아직 판에 있는 사람과 눈으로 갈려야 한다 */
.pk-seat.out { opacity: .45; }
.pk-seat.out .pk-cards { filter: grayscale(1); }

/* '누가' 칩이 자리 수만큼 늘어난다. 나는 눈에 걸리게 */
#act-who .chip.me { font-weight: 800; }

/* 되돌릴 수 있는 길은 있되, 먼저 눈에 띄면 안 된다 */
.chip.danger { color: var(--bad, #e05260); border-color: currentColor; }
.chip.danger:hover { background: color-mix(in srgb, var(--bad, #e05260) 12%, transparent); }

/* 저장된 목록 한 줄에서도 같은 색으로 읽힌다 */
.hacts .hact.me { color: var(--ok); }
.hacts .hact.vs { color: var(--accent); }
.hacts .act-seat {
    font-style: normal;
    font-weight: 800;
    color: var(--seat);
    margin-right: 3px;
}

/* 누가를 고르는 칩도 같은 말을 쓴다 — hero 는 초록, 상대는 빨강 */
#act-who .chip.me.active {
    background: color-mix(in srgb, var(--ok) 18%, transparent);
    border-color: var(--ok);
    color: var(--ok);
}

/*
 * 넓은 화면에서 테이블 오른쪽이 통째로 비어 있었다.
 *
 * 테이블은 max-width 460px 로 묶여 있고 통은 화면 폭만큼 넓으니,
 * 1,400px 짜리 화면에서는 <b>절반 넘게 아무것도 없는 칸</b>이 됐다.
 *
 * 테이블을 조금 키우고, 카드 고르개를 <b>옆에</b> 놓는다 —
 * 아래로 붙이면 빈 칸은 그대로 남고 페이지만 길어진다.
 * 고르개를 닫아 두면 테이블만 남으므로 가운데로 모은다. 그러면 남는
 * 여백이 양쪽으로 갈려서 '덜 만든 자리'가 아니라 '여백'으로 읽힌다.
 */
@media (min-width: 900px) {
    .fld-table {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        gap: 10px 18px;
    }
    .fld-table > .pk-head { flex: 1 1 100%; }
    .fld-table > .pk-table {
        flex: 1 1 460px;
        max-width: 640px;
        margin: 0;
    }
    .fld-table > .pk-dock {
        flex: 1 1 320px;
        max-width: 520px;
        margin-top: 0;
        /* 내용만큼만. 늘리면 카드 몇 장 밑으로 빈 상자가 길게 남는다 */
        align-self: flex-start;
    }
    /* 숨은 칸들은 줄 세우기에 끼면 안 된다 */
    .fld-table > input[type="hidden"] { display: none; }
}

/* '이 수익은 어디서 온 값인가' 를 계산 줄에 밝힌다 */
.calc-src {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    margin-left: 3px;
}

/* ── 테이블 위의 사람과 칩 ─────────────────────── */

/*
 * 앉아 있는 사람.
 * 자리 이름만 있으면 '자리표'지 '테이블'로 안 읽힌다.
 * 나는 고른 그림, 상대는 실루엣 — 누군지 모르니 얼굴을 지어내지 않는다.
 */
/*
 * ⚠️ 동그란 테를 두르지 않는다.
 *    테를 두르면 자리 칩 위에 <b>덩어리 하나가 더</b> 올라간 꼴이 되어,
 *    테이블에 얹혀 있는 것처럼 보이고 자리도 그만큼 커진다.
 *    그림만 카드 옆에 둔다.
 */
.pk-hand {
    display: flex;
    align-items: center;
    gap: 3px;
}
.pk-face {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    font-size: 16px;
    line-height: 1;
    flex: none;
    overflow: hidden;
}
.pk-face.vs { color: color-mix(in srgb, currentColor 60%, transparent); }
.pk-face img, img.pk-face { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }

/*
 * ⚠️ 딜러 버튼(D)과 다른 것이다.
 *    D 는 '누가 마지막에 치나'를 나타내는 표시, 이쪽은 카드를 돌리는 사람.
 */
.pk-croupier {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 30px;
    color: color-mix(in srgb, var(--ok) 65%, var(--muted));
    pointer-events: none;
}
.pk-croupier em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    margin-top: 1px;
}

/*
 * 앞에 내놓은 칩.
 * 실제 테이블에서 베팅한 칩은 자기 앞에 나와 있고, 거리가 끝나야
 * 딜러가 가운데로 긁어간다. 그림이 그 순서를 따라야 판이 읽힌다.
 */
.pk-bet, .pk-pot {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px 2px 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-sub);
    pointer-events: none;
}
.pk-pot {
    border-color: var(--warn);
    color: var(--warn);
    font-size: 13.5px;
    padding: 3px 9px 3px 5px;
}
.pk-chip {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px dotted color-mix(in srgb, #fff 75%, transparent);
    flex: none;
}
.pk-chip.big {
    width: 14px;
    height: 14px;
    background: var(--warn);
    border-color: color-mix(in srgb, #fff 80%, transparent);
}

/* 커뮤니티 카드는 이 화면에서 제일 많이 보는 것이다. 넉넉하게 */
.pk-board { gap: 6px; padding: 9px 12px; }
.entry-form .pk-bcard { width: 46px; height: 62px; }
.entry-form .pk-bcard .hcard { font-size: 21px; }
.entry-form .pk-bcard em { bottom: -15px; font-size: 11.5px; }

@media (max-width: 640px) {
    .pk-face { width: 14px; height: 14px; font-size: 13.5px; }
    .pk-croupier { width: 24px; }
    .pk-croupier em { font-size: 8px; }
    .pk-bet, .pk-pot { font-size: 11.5px; padding: 1px 5px 1px 3px; }
    .pk-chip { width: 9px; height: 9px; border-width: 1.5px; }
    .pk-board { gap: 3px; padding: 6px 7px; }
    .entry-form .pk-bcard { width: 33px; height: 44px; }
    .entry-form .pk-bcard .hcard { font-size: 16px; }
}

/* 내 캐릭터 고르개 */
.pk-faces {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 2px;
    padding: 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-3);
}
.pk-face-pick {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}
.pk-face-pick:hover { border-color: var(--accent); }
.pk-face-pick.on { border-color: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent); }
#h-avatar span { font-size: 16px; margin-right: 2px; }

/* 안내 상자 안의 문단. 마지막 줄 밑에 빈 자리를 남기지 않는다 */
.notice p { margin: 0 0 8px; }
.notice p:last-child { margin-bottom: 0; }

/*
 * 폰에서 일지 머리말의 단추 줄을 조인다.
 *
 * 달력이 맨 위로 올라온 뒤로, 그 위에 단추가 네 줄(달 옮기기 · 종류 ·
 * CSV 둘 · 백업 둘) 쌓여 159px 을 먹고 있었다. '전체 백업' 하나가
 * 넷째 줄에 혼자 떨어져서 그 줄이 통째로 버려졌다.
 *
 * CSV·백업은 <b>가끔 쓰는 단추</b>다. 크기를 줄여 한 줄에 넣는다 —
 * 자주 보는 달력을 밀어내면서까지 클 이유가 없다.
 */
@media (max-width: 640px) {
    .panel-head { gap: 8px 10px; margin-bottom: 10px; }
    .month-nav { gap: 6px; }
    .mbtn { width: 27px; height: 27px; font-size: 17px; }
    .mbtn.today { padding: 0 9px; font-size: 13.5px; }

    .panel-head .filter-group .chip { padding: 5px 9px; font-size: 14px; }

    /* CSV·백업 넷을 한 줄에 */
    .panel-head .filters { gap: 4px; }
    .panel-head .filters .chip { padding: 5px 7px; font-size: 13px; }
}

/*
 * 핸드를 적어 둔 날에 붙는 별.
 *
 * 달력은 손익 숫자만 보여준다. 그런데 나중에 다시 볼 값어치가 있는 날은
 * <b>딴 날이 아니라 판을 적어 둔 날</b>이다. 복기하려고 달력을 여는
 * 사람에게는 그 표시가 먼저 보여야 한다.
 *
 * 칸 <b>모서리에</b> 얹는다. 줄로 넣으면 칸이 한 줄만큼 커져서
 * 달력 전체가 길어진다 — 표시 하나 붙이자고 화면을 밀 이유가 없다.
 */
.cell { position: relative; }
.dstar {
    position: absolute;
    top: 2px;
    left: 3px;
    font-style: normal;
    font-size: 11.5px;
    line-height: 1;
    color: var(--warn);
    pointer-events: none;
}
.dstar.rec { color: var(--accent); }
/* 오늘·고른 날은 테가 진해서 별이 묻힌다. 살짝 띄운다 */
.cell.today .dstar, .cell.picked .dstar { text-shadow: 0 0 3px var(--surface); }

@media (max-width: 640px) {
    .dstar { font-size: 8.5px; top: 1px; left: 2px; }
}

/*
 * 달력 밑 한 줄 — 별 뜻과 이 달 셈.
 * 왼쪽에 뜻, 오른쪽에 숫자. 달력 밑 오른쪽이 비어 있던 자리다.
 */
.cal-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--muted);
}
.cal-legend i { font-style: normal; color: var(--warn); margin-right: 3px; }
.cal-legend i.rec { color: var(--accent); }
.cal-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.cal-count b { color: var(--text-sub); font-weight: 700; }
.cal-count b.rec { color: var(--accent); }

/*
 * ⚠️ 좁아도 <b>아랫줄로 내리지 않는다.</b>
 *    전에는 375px 에서 셈을 통째로 아랫줄에 내렸다. 자리가 모자라서가
 *    아니라 그렇게 하라고 적어 둔 탓이었다 — 세 토막을 다 더해도
 *    260px 남짓이라 327px 안에 들어간다. 한 줄이면 한 줄이 줄어든다.
 */
@media (max-width: 400px) {
    .cal-legend { gap: 2px 7px; font-size: 12.5px; margin-top: 6px; }
    .cal-legend i { margin-right: 2px; }
}

/*
 * 폰에서 세로 여백을 걷어낸다.
 *
 * 폰은 세로가 전부다. 여백 한 줄이 곧 스크롤 한 번이고, 스크롤 한 번이
 * '안 보는 것'과 같다. PC 에서 쓰던 값(패널 사이 18px, 통계 밑 20px,
 * 카드 안 16px)을 그대로 들고 오면 화면 절반이 빈칸이 된다.
 *
 * ⚠️ 줄이되 <b>붙이지는 않는다.</b> 칸과 칸이 맞닿으면 어디까지가 한 덩어리인지
 *    안 보인다. 8~12px 는 남긴다 — 그게 '덩어리가 갈렸다'는 최소 신호다.
 */
@media (max-width: 640px) {
    .page-shell { padding-top: 12px; padding-bottom: 36px; }

    .hero { margin-bottom: 12px; }
    /* ⚠️ 아래에 이미 11px 규칙이 있다. 여기서 12px 을 주면 되레 늘어난다 */
    .hero h1 { font-size: 23px; margin-bottom: 4px; }
    .hero p { font-size: 15px; line-height: 1.5; }

    .panel { padding: 11px; }
    /*
     * ⚠️ 패널 사이에 margin 을 <b>새로 넣지 않는다.</b>
     *    원래 0 이었는데 10px 을 얹었더니 칸 사이 여백 합이
     *    48 → 78px 로 <b>늘었다</b>. 줄이러 와서 늘린 셈이었다.
     *    테두리가 있어서 붙어 있어도 칸은 갈려 보인다.
     */

    .stat-row { gap: 8px; margin-bottom: 10px; }
    .stat { padding: 9px 10px; }

    /* 달력 칸 사이. 3px 이면 이미 좁으니 여기는 안 건드린다 */
    .cal-legend { margin-top: 6px; }
}

/*
 * 폰에서 <b>세로 여백을 한 번에</b> 줄인다.
 *
 * 재 보니 화면마다 같은 것들이 반복해서 자리를 먹고 있었다 —
 * h2 위 28px 이 60군데, 잔글씨 위 18px 이 6군데, 표 밑 20px 이 8군데.
 * 하나하나는 작지만 한 화면에서 다 더하면 스크롤 여러 번이다.
 *
 * ⚠️ 줄이되 <b>차이는 남긴다.</b> 문단 사이 10px 이면 h2 위는 20px —
 *    두 배는 되어야 '여기서 이야기가 바뀐다'가 읽힌다.
 *    같아지면 제목이 그냥 굵은 문장이 된다.
 */
@media (max-width: 640px) {
    /*
     * ⚠️ 줄 간격도 여백이다.
     *
     *   재 보니 문서 높이의 <b>88%가 글 자체</b>고 칸 사이 틈은 12% 였다.
     *   틈을 더 줄여 봐야 얼마 안 남는다. 줄과 줄 사이가 진짜 덩어리다.
     *   1.72 → 1.62 로 한 단계만 좁힌다. 한글은 1.6 아래로 가면
     *   받침이 윗줄에 붙어 보여서 읽는 속도가 되레 떨어진다.
     */
    .doc p { line-height: 1.62; }
    .doc li { line-height: 1.62; }

    .doc h2 { margin-top: 20px; margin-bottom: 8px; }
    .doc h3 { margin-top: 14px; }
    .doc-updated { margin-top: 18px; }

    .month-head { margin-top: 12px; }
    .fineprint { margin-top: 10px; }
    /* ⚠️ margin-top 은 건드리지 않는다. 원래 0 이라 더하면 늘어난다 */
    .table-note { margin-bottom: 12px; }

    .figure, .day-picker, .st-cards, .brief { margin-bottom: 12px; }
    .legal-foot { margin-top: 18px; }
    .cta { margin-top: 14px; }
}

/*
 * 폰 발치 — 본문 끝과 푸터 사이가 <b>56px</b> 비어 있었다.
 *
 * 화면 아래 안쪽 여백 36px 에 푸터 위 여백 20px 이 더해진 값이다.
 * 푸터는 <b>테두리와 바탕색</b>으로 이미 갈려 있으므로, 그 위에 빈 띠를
 * 한 뼘 더 둘 이유가 없다. 본문 밑 여백은 푸터가 대신한다.
 *
 * ⚠️ 재고 넣는다. 앞서 세 번, 줄인다고 생각하면서 늘렸다.
 */
@media (max-width: 640px) {
    .page-shell { padding-bottom: 16px; }
    .site-footer { margin-top: 12px; }
    .footer-inner { padding: 14px var(--page-pad) 18px; }
    .footer-links { gap: 12px; margin-bottom: 8px; }
    .footer-note { margin-bottom: 6px; line-height: 1.55; }
}

/*
 * ICM 계산기 — 폰에서 칸이 <b>한 줄에 다 들어가게</b>.
 *
 * 칸 하나의 바닥폭이 96px 이라 327px 에는 셋만 들어갔다. 네 명으로 놓으면
 * <b>4번 하나가 제 줄로 떨어져</b> 130px 로 늘어난 채 한 줄을 통째로 먹었다.
 * 칩·상금 두 벌이니 그렇게 <b>두 줄이 버려졌다.</b>
 *
 * 바닥폭을 72px 로 낮춰 넷을 한 줄에 앉힌다. 여덟 명이면 두 줄이다.
 * (아홉 명은 세 줄 — 375px 에 아홉 칸을 두 줄로 넣으면 숫자가 안 읽힌다)
 */
@media (max-width: 640px) {
    .icm-cols { gap: 12px; margin-bottom: 10px; }
    .icm-h { font-size: 14px; margin-bottom: 5px; }
    .icm-hint { margin-top: 5px; font-size: 13.5px; line-height: 1.5; }

    .icm-fields { gap: 6px; }
    .icm-field {
        flex: 1 1 72px;
        min-width: 0;
        max-width: none;
        gap: 3px;
    }
    .icm-field span { font-size: 13px; }
    .icm-field input { height: 34px; padding: 6px 7px; font-size: 14.5px; }

    /* 표도 조인다. 가로로 미는 표라 세로만 줄이면 된다 */
    .icm-table th, .icm-table td { padding: 6px 8px; }
    .risk-box { padding: 9px 11px; gap: 3px; }
    .risk-box strong { font-size: 19px; }
}

/*
 * ICM — 폰에서 <b>옆으로 밀지 않게</b>, 그리고 세 숫자를 나란히.
 *
 * ⚠️ 표에 min-width: 420px 이 걸려 있었다. 화면은 327px 이라 표가 통째로
 *    옆으로 밀렸다 — <b>'자리' 칸이 잘려서 어느 줄이 누구인지 안 보였다.</b>
 *    페이지 폭만 재는 검사로는 안 걸린다. 표는 제 상자 안에서 미는 것이라
 *    document 의 scrollWidth 는 멀쩡하다.
 *
 * 칸 안 여백과 글자를 줄여 327px 에 넣는다. 미는 것보다 작은 글씨가 낫다 —
 * 밀어서 안 보이는 값은 없는 값이다.
 */
@media (max-width: 640px) {
    .icm-table { min-width: 0; font-size: 14px; }
    .icm-table th, .icm-table td { padding: 6px 4px; }
    .icm-table th:first-child, .icm-table td:first-child { padding-left: 0; }
    .icm-table th:last-child, .icm-table td:last-child { padding-right: 0; }
    .icm-table .bar { width: 22px; margin-right: 4px; }
    .icm-table .seat { font-size: 13px; }

    /*
     * 세 숫자는 <b>나란히</b> 있어야 한다. 세로로 쌓으면 50% 와 58.8% 사이가
     * 한 화면 떨어져서, 이 화면이 보여주려는 '얼마나 더 필요한가'가 안 보인다.
     */
    .risk-two { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
    .risk-box { padding: 8px 8px; }
    .risk-box span { font-size: 12.5px; line-height: 1.25; }
    .risk-box strong { font-size: 17px; }

    .risk-pick { gap: 8px; margin-bottom: 10px; }
    .risk-pick label { flex: 0 1 auto; }
}

/*
 * 폰에서 표가 <b>옆으로 안 밀리게</b>.
 *
 * 표마다 min-width 를 460~560px 로 박아 두었다. 화면은 327px 이라 거의
 * 모든 표가 옆으로 밀렸고, <b>첫 칸(무엇에 대한 줄인가)이 잘려</b> 나갔다.
 * 페이지 폭만 재는 검사로는 안 걸린다 — 표는 제 상자 안에서 밀리기 때문이다.
 *
 * 재 보니 <b>열넷 중 열이 글자만 줄이면 들어간다.</b> 미는 것보다 작은
 * 글씨가 낫다 — 밀어서 안 보이는 값은 없는 값이다.
 */
@media (max-width: 640px) {
    .rank-table,
    .rank-table.compact,
    .rank-table.odds-table,
    .rank-table.ab-table,
    .rank-table.wht-table,
    .rank-table.res-table,
    .pos-table,
    .rg-grid {
        min-width: 0;
        font-size: 13px;
    }
    .rank-table th, .rank-table td,
    .pos-table th, .pos-table td { padding: 5px 4px; }
    .rank-table th:first-child, .rank-table td:first-child { padding-left: 2px; }
    .rank-table th:last-child, .rank-table td:last-child { padding-right: 2px; }

    /* 코드 덩어리는 미는 대신 접는다 */
    .pf-math { white-space: pre-wrap; word-break: break-word; font-size: 13px; }

    /*
     * 그래도 안 들어가는 표(칸 대여섯 개짜리)는 밀 수밖에 없다.
     * 대신 <b>밀 수 있다는 표시</b>를 남긴다 — 내비에 쓴 것과 같은 방법이다.
     * 표시가 없으면 잘린 칸은 없는 칸이 된다.
     */
    .table-wrap {
        -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
        mask-image: linear-gradient(to right, #000 92%, transparent 100%);
    }
    .table-wrap.fits {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/*
 * ⚠️ 폭을 줄인다고 <b>다 좋아지는 게 아니다.</b>
 *
 * 족보 확률표(칸 여섯 개)는 최소 폭을 걷어냈더니 첫 칸이
 * "스트레이트 / 플러시 / 이상" 처럼 다섯 줄로 접혔다. 옆으로 미는 것을
 * 없애려다 <b>줄 높이를 다섯 배로</b> 만든 셈이다.
 *
 * 이 표는 어차피 안 들어간다. 첫 칸만 안 접히게 두고 미는 쪽을 택한다 —
 * 오른쪽 흐림이 밀 수 있다는 것을 알려 준다.
 */
@media (max-width: 640px) {
    .odds-table th:first-child,
    .odds-table td:first-child { white-space: nowrap; }
}

/* ── 데일리 목록: 접어 두고 눌러서 편다 ─────────── */

/*
 * 한 곳이 대여섯 줄을 먹었다. 업소가 스무 곳만 되어도 폰에서는 목록
 * 끝까지 가는 데 스크롤을 한참 해야 한다 — '오늘 뭐가 열리나'를 훑는다는
 * 이 화면의 쓸모가 거기서 없어진다.
 *
 * 첫 줄만 두고 나머지는 접는다. <details> 라 키보드로도 열린다.
 */
.drow {
    display: block;
    padding: 0;
}
.drow-head {
    display: flex;
    align-items: center;
    /* 예약 안내가 제목을 밀지 않고 제 줄로 내려가게 한다 */
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}
/* 브라우저가 붙이는 세모를 지운다. 우리 화살표를 오른쪽에 둔다 */
.drow-head::-webkit-details-marker { display: none; }
.drow-head::marker { content: ''; }

.drow-head .drow-time { padding-top: 0; width: 62px; }
.drow-head .drow-title { margin: 0; flex: 1; min-width: 0; }

/*
 * 오른쪽 화살표. 열리면 뒤집힌다 —
 * 눌러서 열리는 것이라는 표시가 있어야 아무도 안 누르지 않는다.
 */
.drow-arrow {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s;
}
.drow[open] .drow-arrow { transform: rotate(-135deg) translate(-2px, -2px); }
.drow[open] { border-color: var(--border-strong); }

.drow-more {
    padding: 0 12px 11px 86px;
    border-top: 1px solid var(--border);
    padding-top: 9px;
    margin-top: 2px;
}

@media (max-width: 640px) {
    .drow { margin-bottom: 6px; }
    .drow-head { gap: 9px; padding: 9px 10px; }
    /* '레지 ~20:30' 이 두 줄로 꺾이면 접은 줄이 도로 세 줄이 된다 */
    .drow-head .drow-time { width: 60px; }
    .drow-time .latereg { white-space: nowrap; letter-spacing: -0.3px; }
    .drow-head .drow-time .start { font-size: 17px; }
    .drow-title { font-size: 15.5px; gap: 5px; }
    .drow-tname { font-size: 14px; }
    /* 편 내용은 시각 칸 밑까지 쓴다 — 폰에서 왼쪽을 비워 둘 여유가 없다 */
    .drow-more { padding: 8px 10px 10px; }
}

/* ── 시리즈 드롭다운 ───────────────────────────── */

/*
 * 시리즈가 열넷이라 폰에서 다섯 줄을 먹었고, 마지막 줄은 오른쪽이
 * 통째로 비었다. 접어 두면 한 줄이다.
 * 데일리 목록과 같은 <details> 를 쓴다 — 키보드로도 열린다.
 */
.series-drop {
    border-top: 1px solid var(--border);
    margin-top: 10px;
}
.series-sum {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 2px 8px;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
}
.series-sum::-webkit-details-marker { display: none; }
.series-sum::marker { content: ''; }

.series-cap { color: var(--muted); }
/* 고른 것이 있으면 접힌 줄에 이름이 남는다 */
.series-now { color: var(--text); font-weight: 700; }
.series-drop.picked .series-now { color: var(--accent); }
.series-sum .drow-arrow { margin-left: auto; }
.series-drop[open] .drow-arrow { transform: rotate(-135deg) translate(-2px, -2px); }

/* 펴진 칩줄은 위 구분선이 필요 없다 — 요약 줄이 이미 가르고 있다 */
.series-drop .series-row {
    margin: 0 0 10px;
    padding-top: 2px;
    border-top: 0;
}

/*
 * 걸러내는 중에는 오늘 브리핑이 비킨다.
 * 'APT' 를 누른 사람 앞을 500px 짜리 브리핑이 막고 있으면
 * 고른 결과를 보려고 또 밀어야 한다. 자세한 까닭은 app.js 브리핑비키기().
 */
.brief.away { display: none; }


/* ── 합계 범위 · 세금 · 장소별 · 월별 추이 ─────── */

/*
 * 합계 범위 칩. 종류 칩과 같은 모양이라 따로 꾸미지 않고 자리만 잡는다.
 * 합계 딱지 바로 위에 붙여 둔다 — 떨어뜨려 놓으면 무엇의 범위인지 모른다.
 */
.scope-filter {
    margin: 0 0 8px;
    gap: 6px;
}

/*
 * 기록에서 세금으로 가는 줄.
 * 안내(.notice) 모양을 그대로 쓰되, 링크 두 개를 한 줄에 둔다.
 */
.tax-link { display: block; }
.tax-link strong { display: block; margin-bottom: 4px; }
.tax-link .up { color: var(--ok); }
.tax-link .down { color: var(--accent); }
.tax-go {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 7px;
}
.tax-go a { font-weight: 700; }
.tax-link small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    line-height: 1.55;
}

/* 두 번 이하로 간 곳을 몰아 둔 줄 — 앞의 줄들과 무게가 달라야 한다 */
.place-rest td { color: var(--muted); }

/*
 * 월별 추이.
 *
 * 열두 칸을 flex 로 고르게 나눈다. 가운데 0 선을 두고 위로 플러스,
 * 아래로 마이너스가 자란다 — 부호를 색으로만 나누면 색을 못 가리는
 * 사람에게는 아무 뜻이 없다. 방향이 먼저고 색은 거들 뿐이다.
 */
.trend {
    display: flex;
    align-items: stretch;
    gap: 3px;
    margin: 2px 0 8px;
}
.tb {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
}
.tb-up, .tb-dn {
    display: flex;
    height: 34px;
}
.tb-up { align-items: flex-end; }
.tb-dn { align-items: flex-start; }
.tb-up i, .tb-dn i {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ok);
}
.tb-dn i {
    border-radius: 0 0 2px 2px;
    background: var(--accent);
}
.tb-zero {
    display: block;
    height: 1px;
    background: var(--border-strong, var(--border));
}
.tb-m {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
/* 보고 있는 달은 숫자로 표시한다 — 막대만으로는 어디를 보고 있는지 모른다 */
.tb.now .tb-m {
    color: var(--text);
    font-weight: 800;
}
.tb.none .tb-m { opacity: 0.45; }
.tb:hover .tb-m { color: var(--text); }

@media (max-width: 640px) {
    .trend { gap: 2px; }
    .tb-up, .tb-dn { height: 28px; }
    .tb-m { font-size: 12px; }
    .tax-go { gap: 4px 12px; }
}

/* 금액을 안 적은 기록의 손익 자리 — 0 이 아니라 '잴 것이 없음' */
.sprofit.none { color: var(--muted); font-weight: 600; }

/* ── 달력 별 여러 개 · 그날 기록 머리말 ─────────── */

/*
 * 별을 친 횟수만큼 찍는다. 한 줄로 눕히고 칸 왼쪽 위에 앉힌다.
 * 낱개 .dstar 는 원래 자기가 절대 위치를 잡고 있었으므로,
 * 감싸는 칸이 생긴 지금은 그 자리를 이 칸이 대신 잡는다.
 */
.dstars {
    position: absolute;
    top: 2px;
    left: 3px;
    display: flex;
    align-items: center;
    gap: 1px;
    pointer-events: none;
}
.dstars .dstar { position: static; top: auto; left: auto; }
/* 다섯 번 넘게 친 날 — 별은 넷까지, 나머지는 숫자로 */
.dmore {
    font-size: 8px;
    font-weight: 800;
    color: var(--warn);
    line-height: 1;
}

/*
 * 그날 적어 둔 것 — 기록하기 칸 맨 위.
 * 아래 빈 폼과 확실히 갈라 놓아야 "적었는데 왜 비어 있지" 가 안 생긴다.
 */
.day-head {
    margin: 0 0 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.day-head b { color: var(--accent); }
.day-hint { font-size: 13.5px; color: var(--muted); font-weight: 500; }

/* 폼과 붙어 버리지 않게 아래로 한 칸 띄운다 */
#day-sessions:not(:empty) { margin-bottom: 12px; }

@media (max-width: 640px) {
    .dstars { top: 1px; left: 2px; gap: 0; }
    .day-head { font-size: 15px; margin-bottom: 7px; }
    .day-hint { font-size: 13px; }
    #day-sessions:not(:empty) { margin-bottom: 10px; }
}

/* ── 세션 줄 안의 핸드 기록을 접는다 ────────────── */

/*
 * 한 판이 200px 을 먹는다. 두 판이면 세션 한 줄이 화면 하나가 되어
 * 폰에서 이 달 기록을 훑을 수가 없다.
 * 목록은 '언제 어디서 얼마' 를 훑는 곳이고, 복기는 골라 들어가는 일이다.
 */
.srow-hands { display: block; }
.hands-sum {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin-top: 7px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    color: var(--muted);
}
.hands-sum::-webkit-details-marker { display: none; }
.hands-sum::marker { content: ''; }
.hands-sum b { color: var(--accent); }
.hands-sum .drow-arrow { margin-left: auto; width: 7px; height: 7px; }
.srow-hands[open] .drow-arrow { transform: rotate(-135deg) translate(-2px, -2px); }
.srow-hands[open] .hands-sum { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.hands-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 6px;
}
.hands-body .hrow { background: var(--surface); font-size: 14px; }

/*
 * 차례 고르개. 칩과 같은 얼굴로 두되 select 라 화살표 자리를 비워 준다.
 * 넷을 칩으로 두면 폰에서 한 줄을 통째로 먹는다 — 여기는 제목 오른쪽
 * 빈 자리라 그럴 여유가 없다.
 */
.sort-pick {
    padding: 5px 24px 5px 10px;
    font-size: 14px;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: right 11px center, right 7px center;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}

/* 목록을 잘랐을 때의 '더 보기'. 자른 것을 조용히 숨기지 않는다 */
.list-more {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 9px 10px;
    text-align: center;
    font-weight: 700;
}

/*
 * 기록과 차이는 한 줄로 눕힌다.
 * 딱지를 위에 얹으면 두 줄이 되는데, 이 값은 늘 보는 숫자가 아니라
 * 가끔 확인하는 값이라 그만큼의 자리를 쓸 이유가 없다.
 */
.br-gap-row {
    flex: 1 1 100%;
    display: flex;
    /* ⚠️ .br-out 이 이미 column 이다. 안 되돌리면 딱지가 값 위에 얹힌다 */
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding-top: 2px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
}
.br-gap-row .stat-value { font-size: 16px; }
.br-gap-row .stat-label { flex: none; }
.br-gap-row .unit { font-size: 12px; }

/* ── 한눈에 — 합계와 뱅크롤을 한 상자로 ─────────── */

/*
 * 전에는 딱지 넉 장(상자)과 뱅크롤(상자)이 따로였다. 둘 다 '지금 어떤가'
 * 를 말하는 숫자인데 상자가 둘이라, 폰에서 제목 둘과 테두리 두 겹에
 * 370px 을 썼다. 하나로 붙이고 칸을 줄인다.
 */
.glance .panel-head { margin-bottom: 8px; }
.glance .scope-filter { margin: 0; gap: 5px; }

/*
 * 한 줄에 넷씩.
 *
 * 두 칸씩 세 줄이던 것을 넷씩 두 줄로 바꾼다. 칸마다 딱지와 값이 위아래로
 * 앉으니 두 칸짜리는 사실상 열 줄이었고, 폰 첫 화면을 이 상자가 다 먹었다.
 */
.glance-grid {
    display: grid;
    /*
     * ⚠️ 넷씩은 안 된다. 폰에서 한 칸 안쪽이 64px 인데 여덟 자리 숫자
     *    (+12,363,000)는 72px 이 필요해서 '+7,59…' 로 잘렸다.
     *    숫자를 못 읽는 요약은 요약이 아니다. 셋씩으로 되돌린다.
     */
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}
.gcell {
    min-width: 0;
    padding: 5px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
}
/*
 * 기록과 차이는 제 줄을 통째로 쓰되 딱지와 값을 한 줄에 눕힌다.
 * 늘 보는 숫자가 아니라 가끔 확인하는 값이라, 위 여섯 칸과 같은 자리를
 * 줄 이유가 없다.
 */
.gcell-wide {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 4px 8px;
}
.gcell-wide .stat-label { margin: 0; flex: none; }
.gcell .stat-label {
    display: block;
    font-size: 11.5px;
    line-height: 1.25;
    color: var(--label);
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gcell .stat-value {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*
 * 단위는 칸에서 뺀다. 여덟 칸에 여덟 번 적으면 자릿수를 읽을 자리가 없다.
 * 제목 옆에 한 번만 적어 둔다.
 */
.gcell .unit { display: none; }
.glance-unit {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0;
}

/* 뱅크롤 적는 칸은 격자 밑에 한 줄로 */
.glance .br-form {
    margin-top: 6px;
    gap: 5px 6px;
    align-items: flex-end;
    flex-wrap: nowrap;
}
/* 딱지를 칸 왼쪽에 눕혀 한 줄로 만든다. 위아래로 두면 줄이 하나 더 는다 */
.glance .br-form label {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
.glance .br-form span { font-size: 12px; flex: none; white-space: nowrap; }
.glance .br-form input { height: 32px; font-size: 14.5px; padding: 5px 7px; }
/*
 * 채우기 단추는 '기록과 차이' 줄 오른쪽에 앉는다.
 * 그 단추가 하는 일이 바로 이 차이를 메우는 일이라, 같은 줄에 있으면
 * 무엇을 채우는 단추인지 따로 안 물어도 된다.
 */
.glance .br-fill {
    flex: none;
    margin-left: auto;
    padding: 3px 8px;
    font-size: 13px;
    line-height: 1.5;
}


/* ── 세금 줄도 접는다 ──────────────────────────── */

.tax-link[open] .drow-arrow { transform: rotate(-135deg) translate(-2px, -2px); }
.tax-sum-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
}
.tax-sum-row::-webkit-details-marker { display: none; }
.tax-sum-row::marker { content: ''; }
.tax-sum-row .drow-arrow { margin-left: auto; flex: none; }
.tax-body {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .gcell { padding: 6px 8px; }
    .gcell .stat-value { font-size: 17px; }
    .glance .br-form input { height: 32px; }
}

/*
 * 달력 칸은 넘치는 것을 자른다.
 *
 * 별 넷에 '+1' 까지 붙으면 44px 칸을 6px 쯤 넘어선다. 마지막 칸에서 그러면
 * 격자 전체가 3px 옆으로 밀려서, 폰에서 가로 스크롤이 생긴다.
 * 실제로 그렇게 나왔다 — 별 여러 개를 붙이면서 딸려 온 일이다.
 */
.cal-grid .cell { overflow: hidden; }
.dstars { max-width: calc(100% - 5px); }

/*
 * 뱅크롤 적는 칸의 금액에도 색을 준다.
 *
 * 위 여섯 칸은 전부 색이 있는데 이 둘만 흰 숫자라, 같은 화면에서
 * 이것만 '적는 칸' 이 아니라 '안 센 숫자' 처럼 보였다.
 *   시작   노랑   기준점이다. 늘거나 준 값이 아니다
 *   현재   초록/빨강   시작보다 위면 초록, 아래면 빨강
 */
#br-start { color: var(--warn); font-weight: 700; }
#br-now { font-weight: 700; }
#br-now.up { color: var(--ok); }
#br-now.down { color: var(--accent); }

/*
 * 달 넘기개 옆 '잘 되는 자리'.
 * 누르는 것이 아니라 읽는 것이라 테두리를 주지 않는다 —
 * 옆에 단추가 셋이라 넷째 단추처럼 보이면 눌러 보게 된다.
 */
.best-pos {
    margin-left: 10px;
    font-size: 13.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.best-pos i { font-style: normal; }
.best-pos b { color: var(--ok); font-weight: 800; }

@media (max-width: 640px) {
    .best-pos { margin-left: 8px; font-size: 13px; }
    .best-pos i { display: none; }   /* 폰에서는 자리 이름과 숫자만 */
}

/* 표본이 적거나 판이 없을 때 — 초록으로 칠하면 성적처럼 읽힌다 */
.best-pos.few b, .best-pos.none { color: var(--muted); }
.best-pos.few b { font-weight: 700; }

/* ── 두 차트를 잇는 줄 ─────────────────────────── */

/*
 * 13×13 판이 둘인데 무엇을 봐야 할지 알 길이 없었다.
 * 이름을 나란히 보여 주고 한 번에 오갈 수 있게 한다.
 * 가르는 기준(스택 깊이)을 밑줄에 적는다 — 그게 없으면 그냥 단추 둘이다.
 */
.chart-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
}
.chart-tab {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--label);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.chart-tab:hover { border-color: var(--border-strong); color: var(--text); }
/* 지금 보고 있는 쪽. 눌러도 제자리라 눌리는 것처럼 보이면 안 된다 */
.chart-tab.on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-solid);
    cursor: default;
}
.chart-tab-note {
    flex: 1 1 100%;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}
.chart-tab-note b { color: var(--label); }

@media (max-width: 640px) {
    .chart-tabs { gap: 5px; margin-bottom: 10px; }
    .chart-tab { padding: 5px 10px; font-size: 14.5px; }
    .chart-tab-note { font-size: 13.5px; }
}

/* ── 13×13 판을 폰에서 크게 ─────────────────────── */

/*
 * 칸이 23px 이라 글자가 9.5px 이었다. 열세 칸이 327px 안에 들어가느라
 * 그렇게 된 것인데, 판을 읽으라고 만들어 놓고 안 읽히면 뜻이 없다.
 *
 * 상자 안쪽 여백만큼 판을 <b>바깥으로 물린다.</b> 화면 끝까지 쓰면
 * 폭이 24px 늘고, 칸 사이 틈을 1px 로 줄이면 12px 이 더 나온다.
 * 열세 칸에 나누면 칸마다 3px 가까이 커진다 — 글자를 11px 로 올릴 수 있다.
 */
@media (max-width: 640px) {
    /* 상자 여백(11px)과 화면 여백(12px)을 둘 다 물린다. 끝에 2px 만 남긴다 */
    .rg-wrap, .pf-wrap { margin-inline: -19px; }
    /*
     * ⚠️ 여기서 상자에 overflow-x: clip 을 걸었더니 물려 낸 판이 도로
     *    잘렸다 — 양쪽 끝 칸(AA·A2s)이 반씩 사라졌다. 상자는 스크롤
     *    상자가 아니라서, 넘쳐도 화면은 안 밀린다. 자르면 안 된다.
     */
    .rg-grid { gap: 1px; }
    .rg-row { gap: 1px; }
    .rg-cell { font-size: 13px; border-radius: 2px; }
}

/* ── 푸시폴드: 내 스택 빠른 고르개 · 여백 줄이기 ── */

.pf-quick {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.pf-quick-lb { font-size: 14px; font-weight: 700; color: var(--label); flex: none; }
.pf-quick-unit { font-size: 13px; color: var(--muted); flex: none; }
.pf-quick .filter-group { gap: 4px; margin: 0; flex: 1 1 auto; }
.pf-quick .chip { padding: 4px 9px; font-size: 14px; }

@media (max-width: 640px) {
    /*
     * 적는 칸이 화면 하나를 먹고 있었다. 딱지와 안내를 줄이고
     * 칸 사이를 붙인다 — 값을 넣으러 온 화면이지 읽으러 온 화면이 아니다.
     */
    .icm-cols { gap: 10px; }
    .icm-h { font-size: 14.5px; margin-bottom: 5px; }
    .icm-fields { gap: 5px; }
    .icm-field span { font-size: 12px; }
    .icm-field input { height: 34px; font-size: 15px; padding: 5px 7px; }
    .icm-hint { font-size: 13px; line-height: 1.5; margin-top: 5px; }
    .pf-row { gap: 8px; margin-top: 10px; }
    .pf-quick { gap: 6px; margin-top: 8px; }
    .pf-quick .chip { padding: 4px 8px; font-size: 13.5px; }
}

/* ── 설명글을 제목별로 접기 ─────────────────────── */

/*
 * 세 꼭지가 다 펴져 있으면 판 밑으로 스무 줄이 이어진다.
 * 제목만 세 줄로 세워 두면, 차트를 보러 온 사람은 지나가고
 * 읽으러 온 사람은 자기 관심만 편다.
 */
.doc-folds { padding-top: 4px; }
.dfold { border-top: 1px solid var(--border); }
.dfold:first-of-type { border-top: 0; }
.dfold-sum {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 2px;
    cursor: pointer;
    list-style: none;
}
.dfold-sum::-webkit-details-marker { display: none; }
.dfold-sum::marker { content: ''; }
.dfold-sum h2 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 17px;
}
.dfold-sum .drow-arrow { flex: none; }
.dfold[open] .drow-arrow { transform: rotate(-135deg) translate(-2px, -2px); }
.dfold-body { padding: 0 0 10px; }
.dfold-body p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .dfold-sum { padding: 9px 2px; }
    .dfold-sum h2 { font-size: 17px; }
}

/* 근거 표 — 기준과 이 표의 차이를 색으로 가른다 */
.ev-table .ev-ok { color: var(--ok); }
.ev-table .ev-gap { color: var(--warn); }
.dfold-body h3 {
    margin: 14px 0 6px;
    font-size: 16px;
}
.dfold-body h3:first-child { margin-top: 0; }
.dfold-body ul { margin: 0 0 10px; padding-left: 18px; }
.dfold-body li { margin-bottom: 5px; line-height: 1.6; }
.dfold-body code {
    font-size: 14px;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--surface-2);
}

.ev-sub { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.ev-src { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.ev-src a { color: var(--label); }

/* ── 누른 칸 읽기 · 근거로 가는 줄 ─────────────── */

/*
 * 뒤집개(title)는 폰에 없다. "칸을 누르면 숫자가 나온다" 고 적어 놓고
 * 폰에서 안 되면 그건 거짓말이다. 눌러서 읽는 자리를 따로 둔다.
 */
/*
 * ⚠️ 판 밑에 그냥 두었더니 <b>화면 밖</b>이었다.
 *
 * 169칸짜리 판은 폰 한 화면보다 길다. 칸을 누르는 동안 읽기 줄은 늘
 * 아래쪽 화면 밖에 있어서, 눌러도 아무 일이 안 일어난 것처럼 보였다.
 * "아무것도 없잖아" 라는 말을 들은 자리가 여기다.
 *
 * 판을 보고 있는 동안 화면 아래에 붙어 따라온다(sticky). 판이 지나가면
 * 제자리로 돌아간다 — 늘 떠 있으면 그것대로 자리를 먹는다.
 */
.rg-pick {
    position: sticky;
    bottom: 8px;
    z-index: 2;
    margin: 8px 0 0;
    padding: 8px 10px;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--muted);
    min-height: 20px;
}
/* 뭔가 골라 읽고 있는 중이면 테를 살린다 */
.rg-pick.on { border-color: var(--accent); }
.rg-pick b { color: var(--text); }
.rp-on { color: var(--ok); font-weight: 700; }
.rp-off { color: var(--muted); font-weight: 700; }

/* 누른 칸에 테를 준다 — 어느 칸을 읽고 있는지 보여야 한다 */
#rg-grid .rg-cell { cursor: pointer; }
#rg-grid .rg-cell.picked {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    color: var(--text);
}

/*
 * 근거를 차트 옆에 건다. 글 맨 아래 접어 두면, 표를 보고 의심이 드는
 * 그 자리에서는 아무것도 안 보인다.
 */
.rg-why {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}
.rg-why b { color: var(--label); }
.rg-why a { color: var(--accent); font-weight: 700; white-space: nowrap; }

/* ── 계정 화면 ────────────────────────────────── */

.ac-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.ac-why-cell {
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.ac-why-t { display: block; font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.ac-why-cell p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.ac-why-cell b { color: var(--label); }

/* 무엇을 안 받는지가 이 화면의 요점이다. 눈에 띄게 둔다 */
.ac-none {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--ok);
    background: color-mix(in srgb, var(--ok) 8%, transparent);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted);
}
.ac-none b { color: var(--text); }

.ac-form { display: flex; flex-direction: column; gap: 10px; }
.ac-form label { display: flex; flex-direction: column; gap: 4px; }
.ac-form span { font-size: 14px; font-weight: 700; color: var(--label); }
.ac-form span em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 13px; }
.ac-form input {
    height: 42px;
    padding: 8px 11px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
}
.ac-form input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

.cta-btn.wide { width: 100%; margin-top: 12px; }
.ac-lead { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.ac-lead b { color: var(--label); }
.ac-hello { margin: 0 0 12px; font-size: 16px; }
.ac-hello b { font-size: 18px; color: var(--ok); }

.ac-msg { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; }
.ac-msg.bad { color: var(--accent); }
.ac-msg.good { color: var(--ok); }

/*
 * 복구 코드.
 * 이 화면에서 할 일은 코드를 적는 것 하나뿐이라, 숫자를 크게 두고
 * 다른 것을 안 둔다.
 */
.ac-code { border-color: var(--warn); }
.ac-code-num {
    margin: 0 0 12px;
    padding: 16px 10px;
    text-align: center;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--warn);
    background: var(--surface);
    border: 1px dashed var(--warn);
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
    user-select: all;
}
.ac-code-say { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.ac-code-say b { color: var(--text); }
.ac-code-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-code-btns .cta-btn { margin-left: auto; }

#ac-leave { margin-top: 14px; }

@media (max-width: 640px) {
    .ac-why-grid { grid-template-columns: 1fr; }
    .ac-code-num { font-size: 20px; letter-spacing: 1px; padding: 14px 8px; }
    .ac-code-btns .cta-btn { margin-left: 0; width: 100%; }
}

.ac-found {
    margin: 0 0 10px;
    padding: 9px 11px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ok) 12%, var(--surface));
    font-size: 15px;
    line-height: 1.6;
}
.ac-found b { color: var(--ok); font-size: 17px; }
.notice-go {
    display: inline-block;
    margin-top: 6px;
    font-weight: 700;
    color: var(--accent);
}

/* ── 계정에 저장(동기화) ──────────────────────── */

.sync-lead { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.sync-lead b { color: var(--label); }

.sync-switch {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 15.5px;
    font-weight: 700;
}
.sync-switch input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

.sync-state {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
}
.sync-state.bad { color: var(--accent); }
#sync-now { margin-top: 8px; }
#sync-panel .fineprint { margin-top: 10px; }

/*
 * 마지막 백업이 언제였나.
 * 위험할 때만 눈에 띄게 한다 — 늘 빨가면 아무도 안 본다.
 */
.backup-when {
    margin: 8px 0 6px;
    padding: 7px 10px;
    border-radius: 7px;
    background: var(--surface);
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}
.backup-when b { color: var(--label); }
.backup-when.warn {
    background: color-mix(in srgb, var(--warn) 12%, var(--surface));
    color: var(--label);
}
.backup-when.warn b { color: var(--warn); }

/* ── 머리말 계정 단추 ─────────────────────────── */

.acct-link {
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--label);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.acct-link:hover { border-color: var(--border-strong); color: var(--text); }
/* 로그인했을 때. 닉네임이라 초록으로 — 지금 누구인지 한눈에 */
.acct-link.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

/* ── 데일리 예약 단추 ─────────────────────────── */

/*
 * 접힌 줄(제목 줄)의 오른쪽, 화살표 바로 앞에 둔다.
 *
 * ⚠️ 이 단추는 <summary> 안에 있다. 줄바꿈은 .drow-head 의 flex-wrap 이
 *    맡는다 — 눌렀을 때 나오는 안내가 제목을 밀지 않고 제 줄로 내려간다.
 */
.book-btn {
    padding: 7px 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: transparent;
    color: var(--accent);
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    flex: none;
}
.book-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/*
 * 누르기 전에는 비어 있다(자리도 안 먹는다). 누르면 <b>제 줄로 내려와서</b>
 * 지금 예약이 왜 안 되는지 말한다. 제목 옆에 끼워 넣으면 좁은 화면에서
 * 제목이 짜부라진다.
 */
.book-say {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
    display: none;
}
.book-say.on {
    display: block;
    flex-basis: 100%;
    margin: 4px 0 0 74px;
    color: var(--label);
}

/*
 * 폰에서는 <b>줄이 안 길어지는 선</b>까지 줄인다.
 *
 * 처음에 12.5px 로 뒀더니 제목이 밀려 두 줄로 꺾이고, 접힌 목록이
 * 65px → 90px 로 늘었다. 스무 곳만 되어도 스크롤이 500px 늘어난다 —
 * 훑어보는 화면인데 훑을 수가 없어진다. 실제로 재 보고 정한 값이다.
 */
@media (max-width: 640px) {
    .acct-link { padding: 5px 9px; font-size: 13.5px; }
    .drow-head { gap: 6px; padding-right: 8px; }
    .book-btn { padding: 4px 7px; font-size: 13px; }
    .book-say.on { font-size: 13px; margin-left: 68px; }
}

/* ── 예약 신청 종이 ───────────────────────────── */

/*
 * 화면 가운데 띄우는 확인 종이.
 *
 * 왜 확인을 한 번 받나 — 목록에서 잘못 누르는 일이 흔한데, 예약은
 * 매장이 자리를 비워 두는 일이라 잘못 잡히면 그쪽 손해다.
 *
 * ⚠️ 뒷 배경을 눌러도, Esc 를 눌러도 닫힌다. 열어 놓고 못 빠져나오는
 *    창이 제일 나쁘다.
 */
.sheet-wrap {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.sheet-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}
/* 종이가 떠 있는 동안 뒤가 같이 스크롤되면 어디를 보는지 알 수 없다 */
body.sheet-open { overflow: hidden; }

.sheet {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    padding: 16px 18px 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.sheet-head h3 { margin: 0; font-size: 17px; }
.sheet-x {
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 23px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    font-family: inherit;
}
.sheet-x:hover { color: var(--text); }

/* 무엇을 어느 날 잡는지. 이 표가 이 종이의 요점이다 */
.sheet-what {
    margin: 0 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.sheet-what > div {
    display: flex;
    gap: 10px;
    padding: 8px 11px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}
.sheet-what > div:last-child { border-bottom: 0; }
.sheet-what dt { flex: none; width: 48px; color: var(--muted); font-size: 14px; }
.sheet-what dd { margin: 0; color: var(--text); font-weight: 600; }

.sheet-note {
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-sub);
}
.sheet-warn {
    margin: 0 0 12px;
    padding: 10px 12px;
    /* 안내 띠(.notice-warn)와 같은 색을 쓴다. 경고가 화면마다 다른 색이면 안 된다 */
    border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--warn) 10%, var(--surface));
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-sub);
}
.sheet-msg {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--label);
}
.sheet-msg.bad { color: var(--accent); }

.sheet-btns { display: flex; flex-direction: column; gap: 8px; }
.sheet-btns .cta-btn.wide { margin-top: 0; border: 0; cursor: pointer; font-family: inherit; }
.sheet-btns .cta-btn.wide:disabled { opacity: .55; cursor: default; }

/* 곁들이 단추. 신청과 취소가 같은 무게로 보이면 안 된다 */
.ghost-btn {
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--label);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.ghost-btn:hover { border-color: var(--border-strong); color: var(--text); }
.ghost-btn.small { padding: 5px 10px; font-size: 14px; }
.ghost-btn:disabled { opacity: .5; cursor: default; }

/* ── 내 예약 ─────────────────────────────────── */

.mybook-who { font-size: 14px; color: var(--muted); }
.mybook-list { list-style: none; margin: 0; padding: 0; }
.mybook {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.mybook:last-child { border-bottom: 0; }
.mybook-when { flex: none; width: 104px; font-size: 14.5px; line-height: 1.5; }
.mybook-when b { display: block; }
.mybook-when span { color: var(--muted); font-size: 14px; }
.mybook-what { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; }
.mybook-t { color: var(--accent); font-weight: 600; }
.mybook-t::before { content: '· '; color: var(--border-strong); }

/* 잡아 둔 판의 단추. 다시 누르면 위 '내 예약' 으로 데려간다 */
.book-btn.done {
    border-color: var(--ok);
    color: var(--ok);
}
.book-btn.done:hover { background: color-mix(in srgb, var(--ok) 12%, transparent); }

@media (max-width: 640px) {
    .sheet { padding: 14px 14px 16px; border-radius: 12px; }
    .sheet-what > div { padding: 7px 10px; font-size: 14.5px; }
    .mybook { gap: 9px; }
    .mybook-when { width: 92px; font-size: 14px; }
    .mybook-what { font-size: 14.5px; }
}

/*
 * 눌린 칸의 풀이.
 *
 * 숫자 줄 밑에 말로 한 번 더 적는다. 점선으로 갈라 두는 것은
 * <b>위는 계산, 아래는 그 계산을 읽은 것</b>이라는 표시다.
 */
.rp-say {
    display: block;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    color: var(--text-sub);
    font-size: 14px;
    line-height: 1.65;
}
.rp-say b { color: var(--text); }

@media (max-width: 640px) {
    .rp-say { font-size: 13.5px; line-height: 1.6; }
}

/* ── 아웃츠·팟 오즈 계산기 ─────────────────────── */

/*
 * 문서 한복판에 끼는 상자다.
 *
 * 글을 읽다 만나는 자리라 <b>글보다 커지면 안 된다.</b> 테두리와 살짝 다른
 * 바탕으로 '여기는 눌러 보는 곳' 이라는 것만 표시하고, 나머지는 조용하게 둔다.
 */
.ocalc {
    margin: 18px 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 12px;
    background: var(--surface-2, var(--surface));
}
.ocalc-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}
.ocalc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.ocalc-label {
    flex: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
}
.ocalc-hint { font-size: 13.5px; color: var(--muted); }

.ocalc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ocalc-chips .chip { padding: 5px 11px; font-size: 14px; }

.ocalc-num {
    width: 62px;
    padding: 6px 8px;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}
.ocalc-num.wide { width: 84px; }
.ocalc-num:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* 답. 위는 계산, 아래는 그 계산을 읽은 것 — 프리플랍 차트와 같은 규칙이다 */
.ocalc-out {
    margin: 12px 0 0;
    padding: 11px 12px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-sub);
}
.ocalc-out b { color: var(--text); }
.po-ok { color: var(--ok) !important; }
.po-edge { color: var(--warn) !important; }
.po-no { color: var(--accent) !important; }

.ocalc-foot {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
}

@media (max-width: 640px) {
    .ocalc { padding: 12px 12px 14px; margin: 16px 0; }
    .ocalc-row { gap: 6px; margin-bottom: 9px; }
    .ocalc-chips .chip { padding: 5px 9px; font-size: 13.5px; }
    .ocalc-num { width: 56px; font-size: 15.5px; }
    .ocalc-num.wide { width: 72px; }
    .ocalc-out { font-size: 14.5px; line-height: 1.7; padding: 10px 11px; }
}

/* ── 일지 목록 손잡이 ─────────────────────────── */

/*
 * 제목·차례·접기를 한 덩어리로 왼쪽에 모은다.
 *
 * 차례 고르개가 오른쪽 끝에 혼자 떨어져 있었다. 목록을 다루는 손잡이 둘이
 * 화면 양 끝으로 갈리면, 하나를 만지고 다른 하나를 찾으러 눈이 건너간다.
 */
.list-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.list-tools .panel-title { margin-right: 2px; }
.list-tools .chip { flex: none; }

@media (max-width: 640px) {
    .list-tools { gap: 6px; }
    .srow-head { gap: 9px; padding: 10px 11px; }
    .srow-more { padding: 0 11px 10px; }
}

/* ── 아래 붙박이 메뉴 (바텀 내비게이션 바) ────────── */

/*
 * 화면 아래에 붙박이로 서는 띠. 가운데 솟은 동그란 단추는
 * <b>센터 도크드 FAB</b> 라고 부르는 모양이다.
 *
 * 폰은 위쪽이 손가락에서 제일 먼 자리다. 자주 누르는 것을 아래에 둔다.
 *
 * ⚠️ 같은 마크업을 두 가지로 쓴다.
 *      좁은 화면  띠 + 가운데 단추 (앱 탭 바)
 *      넓은 화면  띠는 안 그리고 <b>가운데 단추만</b> 오른쪽 아래에
 *    넓은 화면에서 아래를 가로로 다 쓰는 띠는 낯설고, 거기서는 위 메뉴가
 *    이미 다 보인다. 마크업을 둘로 만들면 언젠가 한쪽만 고치게 된다.
 */
:root { --tabbar-h: 54px; }

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: flex;
    align-items: stretch;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px var(--shadow);
}

.tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
}
.tab:hover { color: var(--text-sub); }
/*
 * 지금 보고 있는 칸.
 *
 * ⚠️ 색만으로 갈라 두면 안 된다. 남자 스무 명에 한 명꼴로 빨강·초록을
 *    잘 못 가른다. 칸 위에 작은 막대를 하나 더 그어 <b>색 말고도</b>
 *    어디에 있는지 알 수 있게 한다.
 */
.tab.on { color: var(--accent); }
.tab.on::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
}

/*
 * 가운데 단추. 띠보다 위로 솟는다 — 솟지 않으면 그냥 다섯 칸 중
 * 하나가 되어, 여기가 본론이라는 뜻이 사라진다.
 */
.tab-fab {
    flex: 0 0 66px;
    align-self: center;
    width: 58px;
    height: 58px;
    margin: 0 4px;
    transform: translateY(-14px);

    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;

    background: var(--accent);
    color: var(--on-solid);
    border: 3px solid var(--surface);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.tab-fab:hover { filter: brightness(1.08); }
.tab-fab:active { transform: translateY(-12px); }
.tab-fab.on { outline: 2px solid var(--accent); outline-offset: 2px; }

.fab-mark { font-style: normal; font-size: 18px; line-height: 1; }
.fab-label { font-size: 7.5px; font-weight: 800; letter-spacing: 0.06em; line-height: 1; }

/* ── 더보기 시트 ─────────────────────────────── */

/*
 * 마지막 칸을 누르면 <b>아래에서 올라오는 판</b>.
 *
 * 칸이 넷뿐이라 무엇을 넣어도 하나는 빠진다. 빠지는 것을 그때그때
 * 고르는 대신 <b>넘치는 것을 담을 자리</b>를 하나 둔다. 화면이 더 늘어도
 * 목록에 한 줄 더하면 되고 탭 바는 안 건드린다.
 *
 * ⚠️ <details> 다 — <b>자바스크립트 없이 열린다.</b> 스크립트가 막힌
 *    브라우저에서 메뉴 절반이 사라지면 안 된다. 바깥을 눌러 닫는 것과
 *    Esc 만 app.js 가 거든다.
 */
.tab-more {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}
.tab-more > summary {
    flex: 1;
    list-style: none;
    cursor: pointer;
}
.tab-more > summary::-webkit-details-marker { display: none; }
.tab-more > summary::marker { content: ''; }

/* 뒤를 덮는다. 눌러서 닫는 자리이기도 하다(app.js) */
.more-dim {
    position: fixed;
    inset: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, .45);
    z-index: -1;
}

.more-sheet {
    position: absolute;
    left: auto;
    /*
     * ⚠️ 음수로 두면 판이 화면 밖으로 나간다(오른쪽 6px 이 잘렸다).
     *    .tab-more 는 마지막 칸이라 오른쪽 끝이 곧 화면 끝이다.
     */
    right: 6px;
    bottom: calc(100% + 10px);
    width: 82vw;
    max-width: 340px;
    max-height: 68vh;
    overflow-y: auto;

    padding: 6px 14px 14px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 -6px 30px var(--shadow);
    text-align: left;
}

/* 손잡이 표시. 위로 올라온 판이라는 것을 한눈에 알린다 */
.more-grip {
    width: 34px;
    height: 4px;
    margin: 2px auto 10px;
    border-radius: 2px;
    background: var(--border-strong);
}

.more-group + .more-group { margin-top: 12px; }
.more-group h3 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--muted);
}
.more-items { display: flex; flex-direction: column; gap: 2px; }

.more-item {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    line-height: 1.35;
}
.more-item:hover { background: var(--tint); }
.more-item b { display: block; font-size: 15.5px; font-weight: 700; color: var(--text); }
.more-item span { font-size: 13.5px; color: var(--muted); }
/* 지금 보고 있는 곳 */
.more-item.on { background: var(--accent-soft); }
.more-item.on b { color: var(--accent); }

/*
 * 띠가 가리지 않게 아래를 비운다.
 *
 * ⚠️ 안 비우면 바닥글 마지막 줄이 띠 밑에 깔린다. 스크롤을 끝까지 내려도
 *    안 보이므로 <b>없는 글</b>이 된다. 실제로 '© 2026 holdemgo' 가 그랬다.
 */
body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

/* 설치 안내 띠도 붙박이 메뉴 위로 올린다 */
.pwa-banner { bottom: calc(12px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

/*
 * 넓은 화면 — 띠를 걷고 가운데 단추만 오른쪽 아래에 남긴다.
 *
 * 여기서는 위 메뉴가 이미 다 보이므로 띠가 같은 말을 두 번 하는 셈이 된다.
 * MY TRACKER 만 위 메뉴에 없으므로 그 하나를 단추로 남긴다.
 */
@media (min-width: 821px) {
    .tabbar {
        left: auto;
        right: 14px;
        bottom: 14px;
        height: auto;
        padding-bottom: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }
    .tabbar .tab,
    .tabbar .tab-more { display: none; }
    .tab-fab {
        /* flex-basis 66px 를 그대로 두면 단추 오른쪽에 8px 이 남아 뜬다 */
        flex: 0 0 auto;
        margin: 0;
        transform: none;
        border-color: color-mix(in srgb, var(--on-solid) 22%, transparent);
    }
    .tab-fab:active { transform: translateY(1px); }

    /*
     * 띠가 없어도 단추는 남으므로 아래를 비워 둔다.
     * 안 비우면 바닥글 마지막 줄('© 2026 holdemgo')이 단추에 깔린다.
     */
    body { padding-bottom: calc(58px + 20px); }
    .pwa-banner { bottom: 12px; }
}

/*
 * 좁은 화면에서는 위 메뉴를 걷는다. 아래 띠가 그 일을 맡는다.
 *
 * ⚠️ .nav 통째로 감춘다. 링크만 감추면 721~820px 에서 빈 통(flex: 1)이
 *    남아 로고와 로그인 사이가 벌어진다.
 * ⚠️ 이 블록은 파일 <b>맨 끝</b>에 있어야 한다. 위쪽 720px 블록이
 *    .nav 에 display: contents 를 주는데, 나중에 나온 규칙이 이긴다.
 */
@media (max-width: 820px) {
    .header-inner .nav { display: none; }
    .header-inner::after { display: none; }
}

@media (max-width: 400px) {
    .tab { font-size: 12.5px; }
    .more-sheet { width: 88vw; right: 4px; }
    .tab-fab { flex-basis: 60px; width: 54px; height: 54px; }
    .fab-mark { font-size: 17px; }
    .fab-label { font-size: 7px; }
}

/* ── 매장 예약 현황 ──────────────────────────── */

.vn-when { margin: 0; font-size: 14px; color: var(--muted); }

.vn-list { list-style: none; margin: 0; padding: 0; }

/*
 * 한 줄에 넷. 카운터에서 <b>고개를 숙이지 않고</b> 읽어야 하므로
 * 목록 화면치고 글자를 크게 둔다.
 */
.vn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.vn-row:last-child { border-bottom: 0; }

.vn-time {
    flex: none;
    width: 52px;
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.vn-who { flex: 1; min-width: 0; font-size: 17px; }
.vn-who b { font-weight: 800; }
.vn-what { display: block; font-size: 14px; color: var(--muted); }

/* 예약번호. 현장에서 "1847번요" 한마디로 끝나라고 두는 값이다 */
.vn-code {
    flex: none;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--label);
}

/* 취소는 지우지 않고 흐리게 남긴다 — '왔다가 취소한 것'도 매장에는 정보다 */
.vn-row.off { opacity: .55; }
.vn-row.off .vn-who b { text-decoration: line-through; }
.vn-off {
    flex: none;
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
}

.vn-empty { padding: 14px 0; font-size: 15px; color: var(--muted); }

.vn-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.vn-share .cta-btn { border: 0; cursor: pointer; font-family: inherit; }
.vn-said { font-size: 14px; color: var(--ok); }
.vn-said.bad { color: var(--accent); }

.vn-peek { margin-top: 10px; }
.vn-peek > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--label);
}
.vn-text {
    margin: 8px 0 0;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-sub);
    white-space: pre-wrap;
    word-break: break-all;
}

@media (max-width: 640px) {
    .vn-row { gap: 9px; padding: 9px 0; }
    .vn-time { width: 46px; font-size: 15px; }
    .vn-who { font-size: 16px; }
    .vn-code { padding: 2px 7px; font-size: 13.5px; }
}

/* 손님 쪽 예약번호. 매장 화면의 .vn-code 와 같은 값이다 */
.mybook-code {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--label);
}

/* 단톡방 봇에 넣을 주소. 길어서 잘리면 못 쓰므로 줄바꿈을 허용한다 */
.vn-key {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}
.vn-key code {
    flex: 1 1 240px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-sub);
    word-break: break-all;
}

/* ── 손님이 보는 예약 현황 ────────────────────── */

/*
 * 매장 화면과 같은 줄 모양을 쓰되 번호 칸을 좁힌다.
 * 여기 앞자리는 시각이 아니라 '1. 2. 3.' 이라 52px 이 필요 없다.
 */
#st-list .vn-time { width: 26px; }
#st-list .vn-who { font-size: 17px; }

/* a 는 인라인이라 width: 100% 가 안 먹는다. 블록으로 바꿔야 한 줄을 다 쓴다 */
a.cta-btn.wide { display: block; text-align: center; }

/* ── 도착 찍기 ───────────────────────────────── */

/*
 * 카운터에서 손님이 오면 누른다.
 *
 * ⚠️ 손가락으로 누르는 단추다. 목록 줄에 끼는 것이라 작게 두되,
 *    38px 밑으로는 안 내린다 — 그 밑은 옆줄이 같이 눌린다.
 */
.vn-came {
    flex: none;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--label);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.vn-came:hover { border-color: var(--ok); color: var(--ok); }
.vn-came:disabled { opacity: .5; cursor: default; }

/* 찍힌 것. 색만으로 갈라 두지 않으려고 글자도 '도착' 으로 바꾼다 */
.vn-came.on {
    border-color: var(--ok);
    background: color-mix(in srgb, var(--ok) 15%, transparent);
    color: var(--ok);
}
/* 온 사람 줄은 바탕을 살짝 물들인다. 훑을 때 몇이 왔는지가 먼저 보여야 한다 */
.vn-row.came { background: color-mix(in srgb, var(--ok) 7%, transparent); }

/* 손님 화면의 도착 딱지 */
.st-came {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ok) 16%, transparent);
    color: var(--ok);
    font-size: 13.5px;
    font-weight: 800;
}

/* ── 헤즈업 연습 ─────────────────────────────── */

/*
 * 테이블은 일지의 자리 고르개(.pk-table)와 <b>같은 그림</b>이다.
 * 타원 천, 위가 상대, 아래가 나, 가운데가 팟과 보드, 딜러 버튼은 버튼 자리 옆.
 * 다른 화면에서 이미 익힌 그림을 그대로 쓴다 — 새 그림을 만들면 한 번 더 배워야 한다.
 *
 * 다만 저쪽은 <b>누르는</b> 것이고 여기는 <b>보는</b> 것이라 클래스를 갈랐다.
 * 같은 클래스를 쓰면 저쪽의 hover·picking 규칙이 여기까지 따라온다.
 */
.hut {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 5 / 3.7;
    margin: 6px auto 4px;
}

.hut-felt {
    position: absolute;
    inset: 19% 7%;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ok) 12%, var(--surface-3));
    border: 2px solid color-mix(in srgb, var(--ok) 28%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.hut-pot { font-size: 14px; color: var(--muted); }
.hut-pot span { margin-right: 6px; }
.hut-pot b { font-size: 17px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

/* 보드 다섯 칸. 안 깔린 칸은 점선으로 자리를 잡아 둔다 — 카드가 나올 자리가 미리 보여야 한다 */
.hut-board {
    display: flex;
    gap: 5px;
    padding: 6px 8px;
    border: 1px dashed color-mix(in srgb, var(--ok) 40%, transparent);
    border-radius: var(--radius);
}
.hut-slot {
    position: relative;
    width: 40px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px dashed color-mix(in srgb, var(--ok) 35%, transparent);
    border-radius: 5px;
}
.hut-slot.filled { border: 0; }
.hut-slot em {
    position: absolute;
    left: 0; right: 0; bottom: -15px;
    text-align: center;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
    color: color-mix(in srgb, var(--ok) 60%, var(--muted));
}

/* 자리 — 위가 상대, 아래가 나 */
.hut-seat {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 96px;
    padding: 5px 10px 6px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text-sub);
    white-space: nowrap;
}
.hut-seat.top { top: 9%; }
.hut-seat.bottom { top: 91%; }
.hut-seat.me {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.hut-seat.turn { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.hut-seat.out { opacity: .5; }
.hut-seat.out .pc { filter: grayscale(1); }

.hut-name { font-size: 13.5px; font-weight: 800; line-height: 1.1; }
.hut-name i { font-style: normal; font-weight: 700; font-size: 12px; opacity: .8; margin-left: 3px; }
.hut-stack { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .9; }

.hut-cards { display: flex; gap: 4px; }
.hut .pc { width: 40px; height: 54px; }
.hut .pc b { font-size: 17px; }
.hut .pc i { font-size: 15px; }

/* 상대 패의 뒷면 */
.pc.back {
    background: repeating-linear-gradient(45deg,
        var(--surface-2), var(--surface-2) 4px, var(--border) 4px, var(--border) 8px);
    border-color: var(--border-strong);
}

/* 이번 거리에 낸 돈. 자리와 천 사이에 칩처럼 */
.hut-bet {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent);
    background: color-mix(in srgb, var(--warn) 9%, var(--surface));
    color: var(--pot);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hut-bet.top { top: 27%; }
.hut-bet.bottom { top: 73%; }

/* 딜러 버튼. 버튼 자리 옆에 붙는다 */
.hut-dealer {
    position: absolute;
    left: 74%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f8fafc;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px var(--shadow);
}
.hut-dealer.top { top: 17%; }
.hut-dealer.bottom { top: 83%; }

/*
 * 카드가 나온다.
 *
 * 홀카드는 딜러(가운데) 쪽에서 날아오고, 보드와 까는 패는 뒤집힌다.
 * <b>새로 나온 카드만</b> 움직인다 — 매번 다 움직이면 무엇이 새 카드인지 모른다.
 * 움직임을 줄인 설정에서는 안 움직인다.
 */
@keyframes hut-deal {
    from { opacity: 0; transform: translateY(var(--from, -48px)) scale(.55); }
    to   { opacity: 1; transform: none; }
}
@keyframes hut-flip {
    from { opacity: .2; transform: rotateY(90deg); }
    to   { opacity: 1; transform: none; }
}
.hut .pc.deal { animation: hut-deal .34s ease-out both; }
.hut-seat.top .pc.deal { --from: 48px; }
.hut-seat.bottom .pc.deal { --from: -48px; }
.hut .pc.flip { animation: hut-flip .3s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .hut .pc.deal, .hut .pc.flip { animation: none; }
}

/* 블라인드 시계 */
.hu-clock {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: -4px 0 6px;
    font-size: 14px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.hu-clock:empty { display: none; }
.hu-clock-next b { color: var(--accent); }

/*
 * 상대가 왜 그렇게 쳤나. <b>이 한 줄이 이 화면의 요점이다.</b>
 * 이기고 지는 것은 운이 절반이고, 배울 것은 여기에 있다.
 */
.hu-said {
    margin: 8px 0 12px;
    min-height: 20px;
    padding: 10px 12px;
    border-left: 3px solid var(--accent);
    background: var(--surface-3);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-sub);
}
.hu-said:empty { display: none; }

.hu-acts { display: flex; flex-wrap: wrap; gap: 8px; min-height: 36px; }
.hu-acts .cta-btn, .hu-acts .ghost-btn { border: 0; cursor: pointer; font-family: inherit; }
.hu-acts .ghost-btn { border: 1px solid var(--border); }
.hu-wait { font-size: 14.5px; color: var(--muted); align-self: center; }

.hu-bet { margin-top: 12px; }
.hu-bet input[type="range"] { width: 100%; accent-color: var(--accent); }
.hu-bet-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.hu-bet-go { display: flex; gap: 8px; }
.hu-bet-go .cta-btn { border: 0; cursor: pointer; font-family: inherit; }

.hu-end {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.hu-endsay { margin: 0 0 10px; font-size: 16px; line-height: 1.7; }
.hu-endnext { font-size: 14px; color: var(--muted); margin-left: 6px; }
.hu-endbtns { display: flex; gap: 8px; }
.hu-endbtns .cta-btn { border: 0; cursor: pointer; font-family: inherit; }
.hu-over .hu-endsay { font-size: 17px; }
.hu-win { color: var(--ok); }
.hu-lose { color: var(--accent); }
.hu-oversub { font-size: 14.5px; color: var(--text-sub); }

.hu-leave { margin-top: 14px; text-align: right; }
.hu-leave .ghost-btn {
    font-size: 14px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    cursor: pointer;
    font-family: inherit;
}

/* ── 전적 ────────────────────────────────────── */

/*
 * ⚠️ 수익을 안 적는다. 돈도 재화도 안 건 판의 '수익' 은 뜻이 없고,
 *    적어 두면 이 화면이 돈을 다루는 자리처럼 읽힌다.
 * 게임 단위다 — 한쪽 스택이 0 이 된 것만 센다.
 */
.hu-rec {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.hu-rec-total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.hu-rec-head { font-size: 14px; font-weight: 800; color: var(--muted); }
.hu-rec-big { font-size: 27px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.hu-rec-sub { font-size: 14.5px; color: var(--text-sub); }
.hu-rec-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 15px;
    border-top: 1px dashed var(--border);
}
.hu-rec-row b { flex: none; width: 46px; font-weight: 800; }
.hu-rec-row span { color: var(--text-sub); }
.hu-rate { margin-left: auto; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.hu-none { color: var(--muted); font-size: 14px; }

/* 고수 칸의 '준비 중' */
#hu-level .chip[disabled] { opacity: .55; cursor: not-allowed; }
#hu-level .chip small { font-size: 12px; font-weight: 600; margin-left: 2px; }

@media (max-width: 640px) {
    .hut { aspect-ratio: 4 / 4.1; max-width: 100%; margin-top: 16px; }   /* 위 자리가 시계 줄을 안 덮게 */
    .hut-felt { inset: 20% 4%; }
    .hut .pc, .hut-slot { width: 34px; height: 46px; }
    .hut .pc b { font-size: 15px; }
    .hut .pc i { font-size: 13px; }
    .hut-seat { min-width: 86px; padding: 4px 8px 5px; }
    .hut-board { gap: 3px; padding: 5px 6px; }
    .hut-seat.top { top: 8%; }
    .hut-seat.bottom { top: 92%; }
    .hut-dealer.top { top: 16%; }
    .hut-dealer.bottom { top: 84%; }
}

/* 자리 밑의 족보 글. '원페어 Q' 처럼 지금 든 것을 말로 */
.hut-hand {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    white-space: nowrap;
}
.hut-hand:empty { display: none; }

/* ── 상금 지급 기록 (/payout) ───────────────────── */

/*
 * ⚠️ 색을 <b>고발하는 색으로 쓰지 않는다.</b>
 *
 * 미지급 이야기를 빨강(--accent)으로 칠하면 화면이 곧 판정이 된다. 우리는
 * 판정하지 않으므로 '이야기 나옴' 은 주의색(--warn)까지만 간다. 빨강은
 * 이 화면에서 아예 안 쓴다.
 */
.tag-payout-note,
.tag-payout-ok,
.tag-payout-say {
    text-decoration: none;
    white-space: nowrap;
}
.tag-payout-note {
    background: color-mix(in srgb, var(--warn) 16%, transparent);
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.tag-payout-ok {
    background: color-mix(in srgb, var(--ok) 16%, transparent);
    color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
}
.tag-payout-say {
    background: color-mix(in srgb, var(--seat) 16%, transparent);
    color: var(--seat);
    border: 1px solid color-mix(in srgb, var(--seat) 35%, transparent);
}
a.tag-payout-note:hover, a.tag-payout-ok:hover, a.tag-payout-say:hover {
    filter: brightness(1.12);
    text-decoration: underline;
}

/* 맨 위 숫자 넉 장 */
.pay-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.pay-stat {
    flex: 1 1 110px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
}
.pay-stat b {
    display: block;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.pay-stat span { font-size: 14px; color: var(--muted); }
.pay-stat.note b { color: var(--warn); }
.pay-stat.say b { color: var(--seat); }
.pay-stat.ok b { color: var(--ok); }
.pay-stat.old b { color: var(--muted); }

/* 주최사 한 칸 */
.pay-card .panel-head { align-items: center; gap: 10px; }
.pay-lead { margin: 0 0 14px; font-size: 16px; line-height: 1.75; }

.pay-block { margin-top: 14px; }
.pay-block h3 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--muted);
}
.pay-block h3 em {
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
    margin-left: 6px;
}

/*
 * 제기된 이야기는 <b>테두리로</b> 확인된 것과 가른다.
 * 두 덩이가 같은 모양이면 읽는 사람이 주장을 사실로 읽는다.
 */
.pay-block.claim { border-left: 3px solid var(--warn); padding-left: 12px; }
.pay-block.claim h3 { color: var(--warn); }
.pay-block.reply { border-left: 3px solid var(--border-strong); padding-left: 12px; }

.pay-item { margin-bottom: 10px; }
.pay-item p { margin: 0 0 5px; font-size: 15.5px; line-height: 1.8; color: var(--text-sub); }

.pay-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.pay-src a { color: var(--accent); font-weight: 700; }
.pay-src em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 갈래 — 보도와 커뮤니티 글은 무게가 다르다. 눈으로 갈려야 한다 */
.pay-kind {
    font-size: 12px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 3px;
}
.pay-kind-press { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.pay-kind-comm { background: var(--surface-2); color: var(--label); border: 1px solid var(--border); }
.pay-kind-self { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }

.pay-none { margin: 0; font-size: 15px; line-height: 1.8; color: var(--text-sub); }
.pay-none a { color: var(--accent); font-weight: 700; }

.pay-oldhead { background: var(--surface-3); }
.pay-oldhead p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--text-sub); }

/* 물어볼 것 */
.pay-flags { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.pay-flag { display: flex; gap: 12px; }
.pay-flag-n {
    flex: none;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 800;
    color: var(--text-sub);
}
.pay-flag h3 { margin: 2px 0 4px; font-size: 16px; font-weight: 800; }
.pay-flag-q { margin: 0 0 5px; font-size: 15.5px; font-weight: 700; color: var(--text); }
.pay-flag-why { margin: 0; font-size: 15px; line-height: 1.8; color: var(--text-sub); }

@media (max-width: 640px) {
    .pay-stat { flex: 1 1 calc(50% - 10px); padding: 10px 12px; }
    .pay-stat b { font-size: 21px; }
    .pay-block.claim, .pay-block.reply { padding-left: 10px; }
}

/*
 * ⚠️ 대회 카드 안에서 딱지 색이 먹혔다.
 *
 *   `.card-title a { color: inherit }` 가 있어서(위쪽) 딱지가 <b>까만 글자</b>로
 *   떴다. 클래스 하나짜리 선택자(0,1,0)로는 그걸 못 이긴다 — 저쪽은 0,1,1 이다.
 *   요소를 붙여 무게를 맞추고, 파일 맨 끝이라 <b>뒤에 오는 이것이 이긴다.</b>
 *
 *   hover 도 같이 잡아야 한다. 안 잡으면 손을 올릴 때만 빨강으로 바뀐다.
 */
a.tag-payout-note, a.tag-payout-note:hover { color: var(--warn); }
a.tag-payout-ok, a.tag-payout-ok:hover { color: var(--ok); }
a.tag-payout-say, a.tag-payout-say:hover { color: var(--seat); }

/*
 * 머리말 밑에 붙는 안내 한 줄.
 *
 * ⚠️ 넓은 화면(821px 위)에서는 아래 붙박이 띠를 안 그린다. 그래서 더보기
 *    시트 안에만 있는 화면은 <b>데스크톱에서 닿을 길이 없다.</b> 실제로
 *    "어딜 눌러야 하냐" 를 들었다. 새 화면을 더보기에만 넣을 때는
 *    넓은 화면의 길(꼬리말·본문 링크)을 <b>같이</b> 만들어야 한다.
 */
.hero-aside {
    margin: 10px 0 0;
    padding: 9px 12px;
    border-left: 3px solid var(--accent);
    background: var(--surface-3);
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-sub);
}
.hero-aside a {
    color: var(--accent);
    font-weight: 800;
    margin-right: 6px;
    white-space: nowrap;
}


/* ── (84) 시리즈 늘 펴기 · 고객센터 · 관리자 · 신청 폼 ─── */

/* 시리즈 칩줄은 늘 펴 둔다 — 요약 줄은 더는 누르는 것이 아니다 */
.series-drop.open .series-sum { cursor: default; padding-bottom: 4px; }
.series-drop.open .series-row { margin-bottom: 4px; }

/* 고르개 줄의 빈 자리에 놓는 상금 지급 기록 문 */
.payout-bar {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 12px;
    border-left: 3px solid var(--accent);
    background: var(--surface-3);
    border-radius: 0 var(--radius) var(--radius) 0;
    text-decoration: none;
    line-height: 1.4;
    min-width: 0;
}
.payout-bar b { color: var(--accent); font-size: 15px; font-weight: 800; white-space: nowrap; }
.payout-bar span { color: var(--text-sub); font-size: 13.5px; }
.payout-bar:hover b { text-decoration: underline; }

/* 위 메뉴 '헤즈업' 색 */
.nav-teal { color: #14b8a6; font-weight: 800; }

/* 칩 모양 링크 */
a.chip { text-decoration: none; display: inline-flex; align-items: center; }

/* 지역 칩 — 이제 단추다. 눌리면 색이 든다 */
button.rchip { font: inherit; cursor: pointer; color: var(--text-sub); }
button.rchip:hover { border-color: var(--accent); color: var(--accent); }
.rchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── 계정 화면 내 기록 ── */
.ac-rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.ac-rec-h { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.ac-rec-h small { font-weight: 600; color: var(--muted); margin-left: 6px; }
.ac-rec-big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ac-rec-big b { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ac-rec-big span { font-size: 14.5px; color: var(--text-sub); }
.ac-rec-list { list-style: none; margin: 0; padding: 0; }
.ac-rec-list li {
    display: flex; align-items: baseline; gap: 10px;
    padding: 6px 0; border-top: 1px dashed var(--border);
    font-size: 15px;
}
.ac-rec-list li span { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; }
.ac-rec-list li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-rec-list li em { font-style: normal; color: var(--muted); font-size: 14px; }

/* ── 고객센터 · 관리자 공용 ── */
.ac-form textarea, .ac-form select {
    padding: 9px 11px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    line-height: 1.6;
}
.ac-form textarea:focus, .ac-form select:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.ac-form select { height: 42px; }

.sp-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 8px;
}
.sp-item.fresh { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.sp-sum {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; cursor: pointer; list-style: none; font-size: 15.5px;
}
.sp-sum::-webkit-details-marker { display: none; }
.sp-sum::marker { content: ''; }
.sp-sum b { flex: 1; min-width: 0; }
.sp-sum em { font-style: normal; color: var(--muted); font-size: 14px; }
.sp-state {
    flex: none; font-size: 12.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
    background: var(--surface-2); color: var(--label); border: 1px solid var(--border);
}
.sp-item.fresh .sp-state { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: transparent; }
.sp-item.answered .sp-state { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); border-color: transparent; }
.sp-body { padding: 0 12px 12px; }
.sp-body p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--text-sub); }
.sp-reply { margin: 0 12px 12px; padding: 10px 12px; border-left: 3px solid var(--ok); background: var(--surface-3); }
.sp-reply h4 { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--ok); }
.sp-reply h4 em { font-style: normal; font-weight: 600; color: var(--muted); margin-left: 6px; }
.sp-reply p { margin: 0; font-size: 15.5px; line-height: 1.8; }
.sp-reply textarea { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 8px 10px; font: inherit; font-size: 15.5px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.sp-reply .cta-btn { border: 0; cursor: pointer; font: inherit; font-size: 15px; }
.sp-wait { margin: 0 12px 12px; font-size: 14px; color: var(--muted); }

/* ── 관리자 ── */
.ad-table td { vertical-align: top; font-size: 14.5px; }
.ad-table td small { display: block; color: var(--muted); font-size: 13px; }
.ad-blocked td { opacity: .6; }
.ad-venues { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ad-venues .rchip.on { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.ad-venue-off { border: 0; background: transparent; color: inherit; cursor: pointer; font-weight: 800; padding: 0 2px; }
.ad-venue-pick, .ad-status { font: inherit; font-size: 14px; padding: 4px 6px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.ad-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.ad-row .ad-memo { flex: 1; min-width: 160px; }
.ad-row .cta-btn { border: 0; cursor: pointer; font: inherit; font-size: 15px; }
.ad-app-body .formspec { margin: 8px 0; }
.chip.danger { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
#ad-find { max-width: 220px; }

/* ── 등록 신청 폼 ── */
.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ap-grid label { display: flex; flex-direction: column; gap: 4px; }
.ap-region { min-height: 42px; display: flex; align-items: center; padding: 0 11px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface-3); }
.ap-region b { color: var(--accent); }
.ap-tour { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; background: var(--surface); }
.ap-tour-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 15px; }
.ap-tour-head .chip { cursor: pointer; }
.ap-agree { display: flex; flex-direction: column; gap: 8px; }
.ap-agree label { display: flex; gap: 8px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; }
.ap-agree input { margin-top: 4px; accent-color: var(--accent); }
#ap-tour-add { cursor: pointer; margin-bottom: 4px; }
#ap-send { border: 0; cursor: pointer; font: inherit; }

/* ── 퀴즈 판 결과 ── */
.qz-round { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-3); text-align: center; }
.qz-round-big { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.qz-round-big b { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qz-round-big span { color: var(--text-sub); font-size: 15px; }
.qz-round-say { margin: 8px 0 12px; font-size: 14.5px; color: var(--muted); }
.qz-round .cta-btn { border: 0; cursor: pointer; font: inherit; }

/* ── 폰 ── */
@media (max-width: 640px) {
    .payout-bar { flex: 1 1 100%; order: 3; }
    .ac-rec-grid { grid-template-columns: 1fr; }
    .ap-grid { grid-template-columns: 1fr; }
    .sp-sum b { flex: 1 1 100%; }
    #ad-find { max-width: 100%; }
    .ad-table th:nth-child(3), .ad-table td:nth-child(3),
    .ad-table th:nth-child(4), .ad-table td:nth-child(4) { display: none; }
}


/* ── (85) 여백 줄이기 · 접이식 주최사 · 신청 폼 · ICM 칸 ─── */

/*
 * 여백을 전체적으로 줄인다(사용자 지시 — "여백은 전부 지워").
 * 파일 맨 끝이라 앞의 규칙을 이긴다. 폰 규칙도 여기 함께 둔다.
 */
.page-shell { padding-top: 12px; padding-bottom: 36px; }
.hero { margin-bottom: 10px; }
.hero h1 { margin-bottom: 3px; font-size: 25px; }
.notice { padding: 9px 12px; margin-bottom: 10px; line-height: 1.6; }
.panel { padding: 13px 14px; }
.panel-head { margin-bottom: 10px; gap: 10px; }
.doc { padding: 16px 18px 18px; }
.doc h1 { margin-bottom: 8px; }
.doc h2 { margin: 20px 0 8px; padding-top: 10px; font-size: 18px; }
.doc h3 { margin: 12px 0 4px; }
.doc p { margin: 0 0 7px; line-height: 1.65; }
.doc .lead { line-height: 1.7 !important; margin-bottom: 8px !important; }
.doc.tight .flow { margin: 8px 0 4px; }
.fineprint { margin-top: 8px; line-height: 1.6; }
.st-cards { gap: 10px; margin-bottom: 12px; }
.term { padding: 9px 12px; margin-bottom: 6px; }
.term h3 { margin: 0 0 3px; }
.term p { margin: 0; }
.tips li { margin-bottom: 5px; line-height: 1.6; }
.table-note { margin-top: 6px; }
.faq h3 { margin-top: 12px; }
.doc-updated { margin-top: 12px; }
.stat-row { margin-bottom: 10px; }
.brief { margin-top: 10px; padding: 12px 14px; }
.pay-stats + .fineprint { margin-top: 8px; }
@media (max-width: 720px) {
    .doc { padding: 12px 12px 14px; }
    .doc h2 { margin-top: 16px; font-size: 17px; }
}
@media (max-width: 640px) {
    .page-shell { padding-top: 8px; }
    .hero { margin-bottom: 8px; }
    .panel { padding: 11px 12px; }
    .notice { padding: 8px 10px; }
}

/* 상금 지급 기록 — 접이식 주최사 칸 */
details.pay-card { padding: 0; margin-bottom: 8px; }
details.pay-card > *:not(summary) { margin-left: 14px; margin-right: 14px; }
details.pay-card > .fineprint { margin-bottom: 12px; }
.pay-sum {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 11px 14px; cursor: pointer; list-style: none;
}
.pay-sum::-webkit-details-marker { display: none; }
.pay-sum::marker { content: ''; }
.pay-sum > b { font-size: 17px; font-weight: 800; }
.pay-sum-lead { flex: 1 1 100%; font-size: 14.5px; color: var(--text-sub); line-height: 1.5; }
.pay-sum .drow-arrow { margin-left: auto; }
details.pay-card[open] .drow-arrow { transform: rotate(-135deg) translate(-2px, -2px); }
details.pay-card[open] .pay-sum { border-bottom: 1px solid var(--border); margin-bottom: 10px; }
@media (min-width: 641px) {
    .pay-sum-lead { flex: 1 1 auto; }
}

/* 머리말의 고객센터 */
.support-link { margin-right: 6px; }
@media (max-width: 640px) { .support-link { display: none; } }   /* 폰은 더보기 안에 있다 */

/* 신청 폼 — 주소 검색 · 썸네일 */
.ap-addr { display: flex; gap: 6px; }
.ap-addr input { flex: 1; min-width: 0; }
.ap-addr .chip { flex: none; cursor: pointer; white-space: nowrap; }
.ap-thumb { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ap-thumb img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.ap-thumb .chip { cursor: pointer; }
.ad-thumb { width: 160px; height: 120px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); margin: 6px 0; }
.ac-form input[type="file"] { height: auto; padding: 8px; }

/* ICM 칩 칸 — 다섯째·아홉째가 오른쪽으로 빠지지 않게. 줄이 넘어가면 왼쪽부터 */
.icm-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 130px)); justify-content: start; gap: 8px; }
.icm-field { max-width: none; }
@media (max-width: 640px) {
    .icm-fields { grid-template-columns: repeat(4, 1fr); gap: 6px; }
}


/* ── (86) 데일리 썸네일 ─── */
.drow-thumb {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: grid;
    place-items: center;
}
.drow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drow-thumb.none { font-size: 18px; font-weight: 800; color: var(--label); }
.drow.past .drow-thumb { opacity: .55; }
#payout-about .notice { margin: 10px 0 0; }
@media (max-width: 640px) {
    .drow-thumb { width: 38px; height: 38px; border-radius: 7px; }
    .drow-thumb.none { font-size: 17px; }
}


/* ── (87) 폰 아래 띠 여섯 칸 · 머리말 고객센터 · 매장 썸네일 ─── */
/* 여섯 칸이라 글자를 조금 줄인다. 가운데 단추는 그대로 */
@media (max-width: 820px) {
    .tab { font-size: 12.5px; letter-spacing: -0.2px; padding: 0 1px; }
    .tab-fab { flex-basis: 60px; margin: 0 2px; }
}
@media (max-width: 400px) {
    .tab { font-size: 12px; letter-spacing: -0.3px; }
    .tab-fab { flex-basis: 56px; width: 52px; height: 52px; }
}

/* 머리말 고객센터 — 폰에서도 보인다(더보기가 없어져 다른 길이 없다) */
@media (max-width: 640px) {
    .support-link { display: inline-flex; padding: 5px 8px; font-size: 13px; margin-right: 4px; }
}
@media (max-width: 400px) {
    .support-link { padding: 4px 6px; font-size: 12.5px; margin-right: 3px; }
}

/* 매장 화면 썸네일 */
.vn-thumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.vn-thumb-box { width: 56px; height: 56px; }
.vn-thumb-pick { cursor: pointer; }
.vn-thumb-say { font-size: 14px; color: var(--muted); }
.vn-thumb-say.bad { color: var(--accent); }

/* 상금 기록 문의하기 */
#payout-contact p { margin: 0 0 8px; }
#payout-about .fineprint { margin-top: 10px; }


/* ── (88) 폰 대회 카드 접기 · 요일 한 줄 · 아래 띠 다섯 칸 ─── */
.card-arrow { display: none; }

@media (max-width: 640px) {
    /*
     * 접힌 카드 — [그림][날짜][이름…][화살표] 한 줄.
     * 앞의 620px 규칙(글 칸을 아랫줄로)을 여기서 되돌린다. 파일 맨 끝이라 이긴다.
     */
    .card { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 9px 11px; cursor: pointer; }
    .card-thumb { width: 42px; height: 42px; }
    .card-date { width: 52px; text-align: left; padding-top: 0; }
    .card-date .d-day { font-size: 15.5px; }
    .card-date .date-text { font-size: 12.5px; margin-top: 1px; }
    .card-body { flex: 1 1 0; order: 0; min-width: 0; }
    .card-title { font-size: 16px; margin: 0; gap: 4px; line-height: 1.35; }
    .card-title a { color: inherit; }
    .card-title .tag, .card-meta, .card-note, .card-actions { display: none; }
    .card-title .tag-live { display: inline-block; }
    .card-arrow { display: block; flex: none; order: 3; }

    /* 편 카드 — 딱지·장소·안내가 글 칸 안에, 단추는 아랫줄 */
    .card.open { flex-wrap: wrap; align-items: flex-start; }
    .card.open .card-title { margin-bottom: 4px; }
    .card.open .card-title .tag { display: inline-block; }
    .card.open .card-meta { display: flex; }
    .card.open .card-note { display: block; }
    .card.open .card-actions { display: flex; order: 4; flex: 1 1 100%; justify-content: flex-end; margin: 2px 0 0; }
    .card.open .card-arrow { transform: rotate(-135deg) translate(-2px, -2px); margin-top: 6px; }
    .tournament-list .month-head { margin: 10px 0 6px; }
}

/* 데일리 요일 — 폰에서도 일곱 칸 한 줄 */
@media (max-width: 640px) {
    .day-picker { grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 10px; }
    .daybtn { padding: 6px 0; gap: 0; }
    .daybtn b { font-size: 14px; }
    .daybtn span { font-size: 11.5px; }
}

/* 아래 띠 다섯 칸 — 여섯 칸 때 줄였던 글자를 되돌린다 */
@media (max-width: 820px) {
    .tab { font-size: 13px; letter-spacing: 0; padding: 0 2px; }
    .tab-fab { flex-basis: 66px; margin: 0 4px; }
}

/* 포커 일지 제목 옆 헤즈업 연습 */
.hero-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-row h1 { margin: 0; }
.hero-link { font-weight: 700; }


/* ── (89) 설명 접기 · 전략 카드 제목만 ─── */
.panel-sub { font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 6px; }

/* 패널 안의 작은 접힌 칸(ICM 딜·필요 승률) */
.panel .dfold.mini { border-top: 1px dashed var(--border); margin-top: 10px; }
.dfold.mini .dfold-sum { padding: 8px 2px; }
.dfold.mini .dfold-sum h3 { margin: 0; flex: 1; font-size: 15.5px; font-weight: 700; color: var(--text-sub); }
.dfold.mini .dfold-body p { margin: 0 0 6px; font-size: 15px; line-height: 1.65; }

/* 푸시폴드 계산 그림 — 폰에서 줄이 꺾이지 않게 옆으로 민다 */
.pf-math { overflow-x: auto; white-space: pre; }
@media (max-width: 640px) { .pf-math { font-size: 12.5px; padding: 10px 11px; } }

/* 전략 카드 — 제목 한 줄 */
.st-cards.compact .st-card { padding: 13px 14px; gap: 0; justify-content: center; }
.st-cards.compact .st-card h3 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
    .st-cards.compact { gap: 8px; }
    .st-cards.compact .st-card { padding: 12px 13px; }
}

/*
 * 접힌 칸 제목에 줄이 두 번 긋고 위가 벌어지던 것.
 * (85) 덩이의 `.doc h2 { margin; padding-top; border-top }` 가 `.dfold-sum h2` 와 무게가 같고
 * 더 뒤에 있어서 이겼다. 요소를 하나 더 붙여 무게로 이긴다.
 */
.doc .dfold-sum h2 { margin: 0; padding: 0; border: 0; font-size: 17px; }
.doc.doc-folds { padding-top: 6px; padding-bottom: 10px; }
.doc-folds > .doc-updated { margin-top: 8px; }
@media (max-width: 640px) { .doc .dfold-sum h2 { font-size: 17px; } }

/* ── (90) 전략 카드 — 폰에서도 세 칸 가로 ─── */
/*
 * 사용자 지시: 오늘의 핸드 · 오픈 차트 · 레인지 퀴즈를 한 줄에 세 칸.
 * 폰에서 한 칸이 110px 남짓이라 긴 제목은 두 줄로 꺾고 가운데에 둔다.
 * 앞의 640px 규칙(한 칸씩 세로)과 한 줄 말줄임을 여기서 되돌린다.
 */
.st-cards.compact { grid-template-columns: repeat(3, 1fr); }
.st-cards.compact .st-card {
    min-height: 64px;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.st-cards.compact .st-card h3 { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; word-break: keep-all; }
@media (max-width: 640px) {
    .st-cards.compact { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .st-cards.compact .st-card { padding: 10px 6px; min-height: 60px; }
    .st-cards.compact .st-card h3 { font-size: 15.5px; }
}


/* ── (91) 접힌 칸 아래 틈 · 꼬리말 한 줄 ─── */
/*
 * 접힌 칸 아래 30px 틈 — 원래 `.doc-updated { margin: 30px 0 0 !important }` 라
 * (85)·(89) 에서 줄인 값이 !important 에 졌다. 같은 !important 로 되돌린다.
 */
.doc-folds > .doc-updated { margin-top: 4px !important; padding-top: 8px; }

/* 꼬리말 링크 — 한 줄(사용자 지시). 약관 둘은 조금 작고 흐리게 */
.footer-links { gap: 12px; align-items: baseline; }
.footer-links .foot-legal { font-size: 14px; font-weight: 500; color: var(--muted); }
@media (max-width: 640px) {
    .footer-links { gap: 9px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .footer-links::-webkit-scrollbar { display: none; }
    .footer-links a { font-size: 14px; white-space: nowrap; }
    .footer-links .foot-legal { font-size: 13.5px; }
}


/* ── (92) 머리말 로그인·고객센터 자리 바꿈 ─── */
/* 고객센터가 로그인 뒤로 가서 간격을 오른쪽에서 왼쪽으로 옮긴다 */
.support-link { margin-right: 6px; margin-left: 6px; }
@media (max-width: 640px) { .support-link { margin-left: 4px; margin-right: 4px; } }
@media (max-width: 400px) { .support-link { margin-left: 3px; margin-right: 3px; } }


/* ── (93) 헤즈업 연습 단추 진하게 · 데일리 하단 두 줄 ─── */
/* 포커 일지 제목 옆 헤즈업 연습 — 흐린 칩이라 안 보였다. 채운 단추로 */
.hero-row .hero-link {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-solid);
    font-weight: 800;
    padding: 6px 12px;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 35%, transparent);
}
.hero-row .hero-link:hover { filter: brightness(1.08); color: var(--on-solid); }
@media (max-width: 640px) { .hero-row .hero-link { padding: 5px 10px; font-size: 14.5px; } }

.daily-fine { margin-top: 8px; line-height: 1.65; }

/* ── (94) 넓은 화면 — TRACKER 는 위 메뉴(지역 DAILY 와 ICM 사이), 오른쪽 아래 단추는 감춘다 ─── */
@media (min-width: 821px) {
    .tabbar { display: none; }
    /* 단추 자리로 비워 두던 바닥 여백도 거둔다 */
    body { padding-bottom: 0; }
}

/* ── (95) 시리즈 딱지 — 이름 글자를 제대로, 색과 생김새는 시리즈마다 ─── */
/*
 * 남의 로고를 안 쓰는 대신, 시리즈 이름 글자를 크게 적고 색·테두리 모양으로 가른다.
 * 글자 수마다 크기가 다르다 — 폰 42px 칸에 들어가야 하므로 일곱 자가 한계다.
 */
.thumb-mark { color: var(--ink, #fff); font-size: var(--mark-size, 18px); letter-spacing: 0.2px; }
.thumb-mark.m3 { --mark-size: 19px; }
.thumb-mark.m4 { --mark-size: 16px; }
.thumb-mark.m5 { --mark-size: 13.5px; }
.thumb-mark.m6 { --mark-size: 11.5px; letter-spacing: 0.4px; }
.thumb-mark.m7 { --mark-size: 10px; letter-spacing: 0.3px; }
.thumb-label { color: color-mix(in srgb, var(--ink, #fff) 78%, transparent); }
.thumb-suit { color: color-mix(in srgb, var(--ink, #fff) 45%, transparent); }

/*
 * 밝은 바탕 딱지(AJPC 처럼 흰 바탕이 진짜 브랜드 색인 경우).
 * 기본 그라데이션은 아래쪽을 68% 까지 어둡게 하는데, 흰 바탕에서는 그 자리에서
 * 글자 대비가 2.60:1 까지 떨어졌다. 밝은 딱지는 92% 까지만 내린다(4.80:1).
 */
.card-thumb[data-light="1"] {
    background: linear-gradient(155deg, var(--tint) 0%, color-mix(in srgb, var(--tint) 92%, #000) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.14),
        inset 0 0 0 4px color-mix(in srgb, var(--tint) 88%, #000),
        inset 0 0 0 5px rgba(0, 0, 0, 0.10);
}

/* 테두리·밑줄은 edge 색을 쓴다. 안 적은 시리즈는 글자색을 그대로 쓴다 */
/* 생김새 — 색이 비슷한 시리즈끼리 한 번 더 갈린다 */
.card-thumb[data-shape="ring"]::before {
    content: ''; position: absolute; inset: 7px; border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--edge, var(--ink, #fff)) 38%, transparent);
    pointer-events: none;
}
.card-thumb[data-shape="bar"]::before {
    content: ''; position: absolute; left: 22%; right: 22%; bottom: 6px; height: 2px;
    background: color-mix(in srgb, var(--edge, var(--ink, #fff)) 70%, transparent);
    pointer-events: none;
}
.card-thumb[data-shape="crest"]::before {
    content: ''; position: absolute; inset: 7px 9px;
    border-top: 1.5px solid color-mix(in srgb, var(--edge, var(--ink, #fff)) 55%, transparent);
    border-bottom: 1.5px solid color-mix(in srgb, var(--edge, var(--ink, #fff)) 55%, transparent);
    pointer-events: none;
}
.card-thumb[data-shape="diag"]::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(118deg, transparent 46%,
        color-mix(in srgb, var(--edge, var(--ink, #fff)) 22%, transparent) 46%,
        color-mix(in srgb, var(--edge, var(--ink, #fff)) 22%, transparent) 56%, transparent 56%);
    pointer-events: none;
}

@media (max-width: 640px) {
    /*
     * 폰 칸은 42px 다. 이름 글자 하나만 남기고 밑의 작은 글자는 접는다 —
     'WORLD SERIES' 가 40px 이라 칸에 닿았다. 둘 다 넣으면 둘 다 안 읽힌다.
     */
    .thumb-label { display: none; }
    /* 42px 칸 안에서 글자 폭이 32px 을 넘지 않게 — 넘으면 테두리에 닿아 답답하다 */
    .thumb-mark.m3 { --mark-size: 13px; }
    .thumb-mark.m4 { --mark-size: 10.5px; letter-spacing: 0; }
    .thumb-mark.m5 { --mark-size: 9.5px; letter-spacing: 0; }
    .thumb-mark.m6 { --mark-size: 8px; letter-spacing: 0; }
    .thumb-mark.m7 { --mark-size: 7px; letter-spacing: 0; }
    .card-thumb[data-shape="ring"]::before { inset: 5px; }
    .card-thumb[data-shape="crest"]::before { inset: 5px 6px; }
    .card-thumb[data-shape="bar"]::before { bottom: 4px; }
}

/* ── (98) 용어 사전으로 가는 한 줄 ─── */
/*
 * 목록 끝에 붙는 작은 줄. 목록을 가리면 안 되므로 흐리게 두고,
 * 링크만 눈에 들어오게 한다. (85) 여백 규칙에 맞춰 위아래를 좁게 잡았다.
 */
.term-hint {
    margin: 10px 0 0;
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.6;
}
.term-hint a {
    color: var(--text-sub);
    text-decoration: none;
    border-bottom: 1px dotted var(--border-strong);
}
.term-hint a:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 640px) {
    .term-hint { font-size: 13.5px; margin-top: 8px; }
}


/* ── (101) 용어 사전 — 접히는 카드 ─── */
/*
 * 94개가 전부 펴진 채로 있으면 폰에서 한없이 밀어야 한다(사용자 지시 — 카드 형식으로).
 * 접힌 카드는 <b>제목 한 줄</b>이고 누르면 뜻이 열린다. 자바스크립트 없이 열린다.
 *
 * ⚠️ `div.term` 은 아웃츠 문서에서 설명 상자로 쓰고 있다. 그래서 여기 규칙은
 *    전부 <b>details.term</b> 에만 건다 — 그쪽 화면은 손대지 않는다.
 */
details.term { padding: 0; margin-bottom: 6px; overflow: hidden; }
details.term > .term-sum {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}
details.term > .term-sum::-webkit-details-marker { display: none; }
details.term > .term-sum:hover { background: var(--tint); }
details.term > .term-sum h3 { margin: 0; flex: 1 1 auto; min-width: 0; }
details.term > .term-sum .drow-arrow { flex: none; }
details.term[open] > .term-sum { border-bottom: 1px solid var(--border); }
details.term[open] > .term-sum .drow-arrow { transform: rotate(-135deg) translate(-2px, -2px); }
.term-body { padding: 10px 12px 12px; }
.term-body p + p { margin-top: 6px !important; }

/* 넓은 화면은 두 칸. 제목이 짧아 한 칸으로 두면 오른쪽이 많이 빈다 */
@media (min-width: 821px) {
    .terms { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
    .terms .term { margin-bottom: 0; }
    details.term[open] { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    details.term > .term-sum { padding: 9px 11px; }
    details.term > .term-sum h3 { font-size: 16px; }
    /* 영문 이름은 접힌 줄에서 아랫줄로 내려가 줄 수를 늘린다. 편 뒤에만 보인다 */
    details.term:not([open]) > .term-sum h3 em { display: none; }
    .term-body { padding: 9px 11px 11px; }
}

/* ── (102) 데일리 줄을 더 납작하게 ─── */
/*
 * 접힌 줄이 92px 로 대회 카드(62px)보다 높았다. 제목 줄이 두 줄이었기 때문이다 —
 * [지역] 업소 이름 / · 대회 이름 [예시].
 *
 * 접었을 때는 <b>업소 이름까지</b>만 보이면 훑을 수 있다. 대회 이름과 '예시' 딱지는
 * 펴면 바로 나온다. 지역 딱지는 남긴다 — '전체' 로 볼 때 어디 업소인지 가리는 정보다.
 *
 * ⚠️ 폰에서만 그런다. 넓은 화면은 한 줄에 다 들어가 줄일 까닭이 없다.
 * 되돌리려면 이 덩이만 지우면 된다.
 */
@media (max-width: 640px) {
    details.drow:not([open]) .drow-tname,
    details.drow:not([open]) .drow-title .tag-unverified { display: none; }
    /*
     * 제목은 flex 다. 그냥 nowrap 만 주면 딱지와 이름이 여전히 두 줄로 선다 —
     * 줄을 가르는 것은 글자가 아니라 <b>flex-wrap</b> 이다.
     */
    details.drow:not([open]) .drow-title {
        flex-wrap: nowrap;
        margin: 0;
        min-width: 0;
    }
    details.drow:not([open]) .drow-title .tag-region { flex: none; }
    /* 업소 이름이 길면 줄을 늘리지 말고 끝을 …로 줄인다 */
    details.drow:not([open]) .drow-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* ── (103) 시리즈 딱지에 실제 로고 ─── */
/*
 * 로고는 <b>원본 그대로</b> 넣는다 — 비율을 지키고(contain) 자르지 않는다.
 * 칸을 꽉 채우지 않고 여백을 둔다. 로고마다 여백이 제각각이라, 우리가 일정한
 * 여백을 줘야 목록이 들쭉날쭉해 보이지 않는다.
 */
.card-thumb.has-logo {
    padding: 6px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-strong) 60%, transparent);
    background: var(--tint);
}
.thumb-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 640px) {
    .card-thumb.has-logo { padding: 4px; }
}

/* 대회 상세 화면의 큰 딱지 */
.tour-head .card-thumb.has-logo { padding: 9px; }


/* ── (107) 써틴 연습 ─── */
/*
 * 줄 셋 — 위에서부터 앞(3) · 가운데(5) · 뒤(5). 아래로 갈수록 세다.
 * 지금 채우는 줄은 테두리로 표시한다. 폰에서 끌어다 놓기는 잘 안 되므로
 * <b>카드를 누르면 고른 줄에 들어가는</b> 방식이다.
 */
.tt-what { margin: 0 0 10px; }
.tt-rows { display: flex; flex-direction: column; gap: 8px; }
.tt-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    padding: 8px 10px;
    cursor: pointer;
}
.tt-row.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tt-row-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; font-size: 15px; }
.tt-row-head b { font-weight: 800; }
.tt-cap { color: var(--muted); font-size: 13.5px; }
.tt-rank { margin-left: auto; font-style: normal; font-size: 14px; color: var(--accent); font-weight: 700; }
.tt-slots { display: flex; gap: 5px; flex-wrap: wrap; }
.tt-slots .pc { width: 38px; height: 52px; }
.tt-slots .pc b { font-size: 16px; }
.tt-slots .pc i { font-size: 14px; }
/* 빈 자리 — 카드가 놓일 곳을 미리 보여 준다 */
.pc.empty {
    background: transparent;
    border-style: dashed;
    border-color: var(--border-strong);
    box-shadow: none;
}

.tt-warn {
    margin: 8px 0 0;
    padding: 7px 10px;
    border-left: 3px solid var(--warn);
    background: var(--surface-2);
    font-size: 14.5px;
    color: var(--text-sub);
}

.tt-hand-head { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 6px; font-size: 14.5px; color: var(--text-sub); }
.tt-hint { color: var(--muted); font-size: 13.5px; }
.tt-hand { display: flex; flex-wrap: wrap; gap: 5px; }
.tt-hand .pc { cursor: pointer; }
.tt-hand .pc:hover { transform: translateY(-2px); }

.tt-acts { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.tt-acts .btn-main { margin-left: auto; width: auto; padding: 9px 18px; }

/* 결과 — 내 배치와 상대 배치를 나란히 */
.tt-two { display: grid; gap: 12px; }
.tt-side h3 { margin: 0 0 6px; font-size: 15px; color: var(--text-sub); }
.tt-side h3:empty { display: none; }
.tt-line { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tt-line:last-child { border-bottom: 0; }
.tt-line-name { width: 40px; font-size: 14px; color: var(--muted); flex: none; white-space: nowrap; }
.tt-line .cards.small { display: flex; gap: 3px; }
.tt-line .pc { width: 30px; height: 41px; }
.tt-line .pc b { font-size: 14px; }
.tt-line .pc i { font-size: 12px; }
.tt-line-rank { font-size: 14px; color: var(--text-sub); }
.tt-roy { color: var(--gold); font-weight: 800; }
.tt-win { color: var(--ok); font-size: 13.5px; font-weight: 700; margin-left: auto; }
.tt-lose { color: var(--accent); font-size: 13.5px; font-weight: 700; margin-left: auto; }
.tt-tie { color: var(--muted); font-size: 13.5px; margin-left: auto; }
.tt-plus { color: var(--ok); }
.tt-minus { color: var(--accent); }
.tt-why { font-size: 14px; color: var(--text-sub); }

.tt-bestfold { margin-top: 12px; }
.tt-rec { display: flex; flex-wrap: wrap; gap: 14px; font-size: 15px; color: var(--text-sub); }
.tt-rec b { color: var(--text); font-size: 17px; }
.tt-table td, .tt-table th { font-size: 14px; }

@media (min-width: 821px) {
    .tt-two { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .tt-slots .pc, .tt-hand .pc { width: 34px; height: 47px; }
    .tt-slots .pc b, .tt-hand .pc b { font-size: 15px; }
    .tt-slots .pc i, .tt-hand .pc i { font-size: 13px; }
    .tt-line .pc { width: 26px; height: 36px; }
    .tt-line .pc b { font-size: 13px; }
    .tt-line .pc i { font-size: 11px; }
    .tt-line-name { width: 36px; font-size: 13px; }
}


/* ── (108) 써틴(빅2) ─── */
/*
 * 상대 셋 · 바닥 · 내 패. 폰이 기준이라 위에서 아래로 쌓는다.
 * ⚠️ 상대 카드는 안 보여 준다. 남은 <b>장수</b>와 방금 한 일만 적는다.
 */
.b2-seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.b2-seat {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    padding: 7px 8px;
    font-size: 14px;
    min-width: 0;
}
.b2-seat.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.b2-seat.win { border-color: var(--ok); }
.b2-seat b { display: block; font-size: 14px; }
.b2-count { color: var(--accent); font-weight: 800; font-size: 15px; }
.b2-seat em {
    display: block; font-style: normal; font-size: 13px; color: var(--muted);
    margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.b2-table {
    margin: 10px 0;
    padding: 12px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    min-height: 92px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.b2-floor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.b2-floor .cards.small { display: flex; gap: 4px; }
.b2-shape { font-size: 14px; color: var(--text-sub); }
.b2-empty { font-size: 14.5px; color: var(--muted); }
.b2-say { margin: 0; font-size: 14.5px; color: var(--text-sub); text-align: center; }

.b2-mine-head { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 6px; font-size: 14.5px; color: var(--text-sub); }
.b2-pick { color: var(--accent); font-weight: 700; font-size: 14px; }
.b2-mine { display: flex; flex-wrap: wrap; gap: 5px; }
.b2-mine .pc { cursor: pointer; transition: transform 0.08s; }
/* 고른 카드는 올라온다 — 눌렀다는 것이 손끝에서 바로 보여야 한다 */
.b2-mine .pc.up { transform: translateY(-8px); box-shadow: 0 3px 8px var(--shadow); border-color: var(--accent); }

.b2-rest { display: flex; flex-direction: column; gap: 8px; }
.b2-restline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.b2-restline b { width: 62px; flex: none; }
.b2-restline.win b { color: var(--ok); }
.b2-restline .cards.small { display: flex; gap: 3px; }
.b2-restline .pc { width: 26px; height: 36px; }
.b2-restline .pc b { font-size: 13px; width: auto; }
.b2-restline .pc i { font-size: 11px; }
.b2-restline em { font-style: normal; color: var(--muted); }

@media (max-width: 640px) {
    .b2-mine .pc { width: 34px; height: 47px; }
    .b2-mine .pc b { font-size: 15px; }
    .b2-mine .pc i { font-size: 13px; }
    .b2-seat { padding: 6px; font-size: 13.5px; }
    .b2-floor .pc { width: 32px; height: 44px; }
    .b2-floor .pc b { font-size: 14px; }
    .b2-floor .pc i { font-size: 12px; }
}


/* ── (109) 써틴 — 진짜 카드판처럼 ─── */
/*
 * 사용자가 보여 준 앱 화면을 본떴다 — 초록 테이블, 무늬가 박힌 카드, 부채꼴 손패.
 *
 * ⚠️ 카드는 `.cf` 다. 다른 화면이 쓰는 작은 카드(`.pc`)는 그대로 둔다.
 * ⚠️ 테이블은 <b>테마를 안 탄다</b> — 카드판의 초록은 다크·베이지 어느 쪽에서도 초록이다.
 *    대신 글자색을 흰색으로 못 박아 대비를 지킨다.
 */

/* ── 카드 한 장 ── */
.cf {
    position: relative;
    width: var(--cf-w, 44px);
    height: calc(var(--cf-w, 44px) * 1.42);
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #b9c0cc;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    flex: none;
    overflow: hidden;
    display: block;
}
.cf.red { color: #d3143a; }

.cf-corner {
    position: absolute;
    font-style: normal;
    font-weight: 800;
    font-size: calc(var(--cf-w, 44px) * 0.26);
    line-height: 0.95;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cf-corner b { font-size: calc(var(--cf-w, 44px) * 0.24); font-weight: 400; }
.cf-corner.tl { top: 2px; left: 2px; }
.cf-corner.br { bottom: 2px; right: 2px; transform: rotate(180deg); }

/* 가운데 — 무늬를 끗수만큼 */
.cf-mid {
    position: absolute;
    inset: 4px calc(var(--cf-w, 44px) * 0.26);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(7, 1fr);
    align-items: center;
    justify-items: center;
}
.cf-pip {
    font-style: normal;
    font-size: calc(var(--cf-w, 44px) * 0.27);
    line-height: 1;
}
.cf-pip[data-flip="1"] { transform: rotate(180deg); }
.cf-ace {
    grid-area: 1 / 1 / 8 / 4;
    font-style: normal;
    font-size: calc(var(--cf-w, 44px) * 0.72);
    line-height: 1;
}
/* 그림패 — 그림이 없으므로 큰 글자와 무늬로 대신한다 */
.cf-court {
    grid-area: 2 / 1 / 7 / 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-style: normal;
    border: 1px solid currentColor;
    border-radius: 3px;
    width: 100%;
    height: 100%;
    opacity: 0.92;
}
.cf-court b { font-size: calc(var(--cf-w, 44px) * 0.4); font-weight: 800; line-height: 1; }
.cf-court span { font-size: calc(var(--cf-w, 44px) * 0.3); line-height: 1; }

/* ── 테이블 ── */
.b2-table {
    position: relative;
    margin: 10px 0;
    padding: 16px 10px 12px;
    border-radius: 12px;
    border: 1px solid #14532d;
    background:
        radial-gradient(120% 90% at 50% 0%, #1c7a4a 0%, #14603a 55%, #0d4629 100%);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.35);
    min-height: 120px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.b2-played { display: flex; gap: 4px; --cf-w: 48px; }
.b2-shape, .b2-say, .b2-empty { color: rgba(255, 255, 255, 0.85); }
.b2-shape { font-size: 14px; }
.b2-say { margin: 0; font-size: 14.5px; }
.b2-empty { font-size: 14.5px; }

/* 내 차례 딱지 — 앱의 'Your Turn' 자리 */
.b2-turn {
    position: absolute;
    top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--accent);
    color: var(--on-solid);
    font-size: 13.5px; font-weight: 800;
    padding: 3px 12px; border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    display: none;
}
#b2-play.my-turn .b2-turn { display: block; }

/* ── 상대 셋 ── */
.b2-seats { display: flex; flex-direction: column; gap: 5px; }
.b2-seat {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    min-height: 40px;
}
.b2-seat.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.b2-seat.win { border-color: var(--ok); }
.b2-who { display: flex; align-items: baseline; gap: 6px; width: 92px; flex: none; }
.b2-who b { font-size: 14.5px; font-weight: 700; }
.b2-count {
    font-size: 13px; font-weight: 800; color: var(--on-solid);
    background: var(--accent); border-radius: 999px; padding: 1px 7px;
}
.b2-mini { display: flex; gap: 2px; --cf-w: 26px; flex-wrap: wrap; }
.b2-seat em { font-style: normal; font-size: 14px; color: var(--muted); }
.b2-seat .b2-pass { color: var(--text-sub); font-weight: 700; }

/* ── 내 손패 — 부채꼴로 겹쳐 놓는다 ── */
.b2-mine {
    display: flex;
    padding: 8px 0 14px;
    --cf-w: 52px;
    /* ⚠️ (108) 의 `.b2-mine` 이 gap: 5px 을 남겨 뒀다. 부채 계산이 그만큼 어긋난다 */
    gap: 0;
    justify-content: center;
    flex-wrap: nowrap;
    /*
     * 13장이 <b>칸 안에</b> 들어가야 한다. 겹침으로 줄이되, 그래도 넘치면
     * 카드를 줄이는 게 아니라 칸을 넘어가게 두면 안 된다 — 폰에서 양쪽이 잘렸다.
     */
    max-width: 100%;
    /* 겹침은 big2-ui.js 의 부채맞추기() 가 칸 너비에 맞춰 정한다 */
}
.b2-mine .cf {
    cursor: pointer;
    transition: transform 0.1s, margin 0.1s;
}
.b2-mine .cf:last-child { margin-right: 0; }
.b2-mine .cf.up { transform: translateY(-14px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); z-index: 2; }
.b2-mine .cf.muted { opacity: 0.55; }
.b2-mine .cf:hover { transform: translateY(-6px); z-index: 3; }

.b2-restline .b2-mini { --cf-w: 24px; }

@media (max-width: 640px) {
    .b2-mine { --cf-w: 44px; }
    .b2-played { --cf-w: 42px; }
    .b2-who { width: 82px; }
    .b2-mini { --cf-w: 23px; }
}
@media (max-width: 380px) {
    .b2-mine { --cf-w: 40px; }
    .b2-played { --cf-w: 38px; }
}


/* ── (110) 차이니즈 포커도 같은 카드로 ─── */
/* 줄 칸 — 놓인 카드와 빈 자리를 같은 크기로 */
.tt-slots { --cf-w: 44px; gap: 5px; }
.tt-slots .cf { cursor: pointer; }
/* 빈 자리 — 카드가 놓일 곳을 점선으로 보여 준다 */
.cf.empty {
    background: transparent;
    border: 1px dashed var(--border-strong);
    box-shadow: none;
}

/* 손패 — 써틴과 같은 부채. 겹침은 cardface.js 가 칸 너비에서 잰다 */
.tt-hand {
    display: flex;
    gap: 0;
    padding: 6px 0 12px;
    --cf-w: 50px;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 100%;
}
.tt-hand .cf { cursor: pointer; transition: transform 0.1s; }
.tt-hand .cf:hover { transform: translateY(-6px); z-index: 2; }

/* 결과 줄 */
.tt-mini { display: flex; gap: 3px; --cf-w: 28px; }
.tt-line .tt-mini { flex: none; }

@media (max-width: 640px) {
    .tt-slots { --cf-w: 38px; gap: 4px; }
    .tt-hand { --cf-w: 44px; }
    .tt-mini { --cf-w: 24px; }
}
@media (max-width: 380px) {
    .tt-slots { --cf-w: 34px; }
    .tt-hand { --cf-w: 40px; }
}

/* ── (111) 테이블을 진짜 카드판처럼 — 헤즈업 · 기억나는 핸드 ─── */
/*
 * 사용자가 보여 준 그림 둘을 본떴다.
 *   · 헤즈업(/strategy/heads) — 붉은 천에 나무 레일, 위에 딜러, 내 패는 <b>진짜 카드</b>
 *   · 기억나는 핸드(/journal) — 같은 나무 레일에 푸른 천
 *
 * 카드는 써틴과 같은 그리개(`cardface.js`)의 `.cf` 다. 크기는 `--cf-w` 하나로 정한다.
 *
 * ⚠️ 천 색은 <b>테마를 안 탄다</b> — 카드판의 붉은색·푸른색은 다크에서도 그 색이다.
 *    대신 천 위 글자를 흰색으로 못 박아 대비를 지킨다.
 * ⚠️ 레일(테두리)은 `border-color` 로는 못 그린다. 안쪽은 padding-box,
 *    테두리는 border-box 로 바탕 둘을 겹쳐 깐다.
 */

/* ── 헤즈업 판 ── */
.hut {
    max-width: 540px;
    aspect-ratio: 5 / 4.4;
    margin: 6px auto 8px;
    --cf-w: 44px;
}
/*
 * 자리는 천 <b>밖</b>이다. 안으로 들어오면 보드와 앞에 낸 칩을 덮는다 —
 * 처음에 그렇게 짜서 턴·리버 칸이 내 자리 뒤에 숨었다.
 */

/* 천 — 붉은 천에 나무 레일 */
.hut-felt {
    inset: 28% 4% 25%;
    border: 10px solid transparent;
    background:
        radial-gradient(120% 120% at 50% 20%, #8e3040 0%, #6b1f2c 55%, #501522 100%) padding-box,
        linear-gradient(165deg, #a97b4a, #6b4522 55%, #8a5c30) border-box;
    box-shadow: inset 0 0 26px rgba(0, 0, 0, .45), 0 8px 20px var(--shadow);
    gap: 10px;
}

.hut-pot { color: rgba(255, 255, 255, .72); }
.hut-pot b { color: #fff; }

.hut-board {
    gap: 5px;
    padding: 7px 9px;
    border-color: rgba(255, 255, 255, .28);
}
.hut-slot {
    width: var(--cf-w);
    height: calc(var(--cf-w) * 1.42);
    border-color: rgba(255, 255, 255, .3);
}
.hut-slot em { color: rgba(255, 255, 255, .62); }

/* 카드를 돌리는 사람. 천 위 한가운데 — 일지 테이블과 같은 자리다 */
.hut-croupier {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 34px;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--text-sub) 70%, transparent);
    pointer-events: none;
}
.hut-croupier em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    margin-top: 1px;
}

/* 자리 — 천 가장자리에 걸치게 */
.hut-seat {
    box-shadow: 0 2px 8px var(--shadow);
    z-index: 2;
}
.hut-seat.top { top: 21%; }
.hut-seat.bottom { top: 86%; }
.hut-seat.out .cf { filter: grayscale(1) brightness(.85); }
.hut-cards { gap: 5px; }

/*
 * 앞에 내놓은 칩은 <b>자리 옆</b>이다. 가운데에 두면 보드의 플랍·턴·리버 딱지를 덮는다.
 * 실제 테이블에서도 칩은 자기 앞 왼쪽에 나온다.
 */
.hut-bet.top { top: 36%; left: 24%; }
.hut-bet.bottom { top: 68%; left: 24%; }
.hut-dealer { left: 78%; }
.hut-dealer.top { top: 30%; }
.hut-dealer.bottom { top: 73%; }

/* 카드 뒷면 — 끗도 무늬도 없으므로 그리개가 아니라 여기서 만든다 */
.cf.back {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 3px, transparent 3px 7px),
        linear-gradient(160deg, #8e3040, #4d1622);
    border-color: rgba(255, 255, 255, .35);
}

/* 나오는 움직임은 그대로. 카드 이름만 `.pc` 에서 `.cf` 로 옮겼다 */
.hut .cf.deal { animation: hut-deal .34s ease-out both; }
.hut-seat.top .cf.deal { --from: 48px; }
.hut-seat.bottom .cf.deal { --from: -48px; }
.hut .cf.flip { animation: hut-flip .3s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .hut .cf.deal, .hut .cf.flip { animation: none; }
}

/*
 * 폰. 판을 한 뼘 더 길게 잡아 <b>딜러의 몸이 다 보이게</b> 했다(113, 사용자 지시 —
 * "모바일에서도 이 느낌이 좋겠는데 몸이 보이게"). 늘어난 만큼 상대 자리를 내리고
 * 천과 내 자리도 함께 내렸다 — 하나만 움직이면 팟이나 보드가 자리 뒤로 숨는다.
 */
@media (max-width: 640px) {
    .hut { aspect-ratio: 4 / 5; --cf-w: 36px; margin-top: 14px; }
    .hut-felt { inset: 30% 3% 22%; border-width: 8px; }
    .hut-seat { min-width: 84px; padding: 4px 8px 5px; }
    .hut-seat.top { top: 28%; }
    .hut-seat.bottom { top: 84%; }
    .hut-board { gap: 4px; padding: 5px 6px; }
    .hut-bet.top { top: 45%; left: 22%; }
    .hut-bet.bottom { top: 69%; left: 22%; }
    .hut-dealer.top { top: 34%; }
    .hut-dealer.bottom { top: 74%; }
}

/* ── 기억나는 핸드의 자리 고르개 ── */
.pk-felt {
    inset: 14% 11%;
    border: 9px solid transparent;
    background:
        radial-gradient(120% 120% at 50% 20%, #2b5da8 0%, #1d407b 55%, #14305e 100%) padding-box,
        linear-gradient(165deg, #a97b4a, #6b4522 55%, #8a5c30) border-box;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, .42), 0 6px 16px var(--shadow);
}
.pk-felt-label { color: rgba(255, 255, 255, .6); }

/* 천 위의 보드 칸 — 흰 점선이라야 푸른 천에서 보인다 */
.pk-board { border-color: rgba(255, 255, 255, .3); }
.pk-board:hover, .pk-board.picking { border-color: #fff; }
.pk-bcard { border-color: rgba(255, 255, 255, .28); }
.pk-bcard em { color: rgba(255, 255, 255, .66); }

/* 자리·딜러·칩은 천 위에 떠 있다. 그림자를 줘야 천에서 떨어져 보인다 */
.pk-seat, .pk-dealer, .pk-bet, .pk-pot { box-shadow: 0 2px 7px var(--shadow); }
.pk-seat.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent), 0 2px 7px var(--shadow); }
.pk-croupier { color: color-mix(in srgb, var(--text-sub) 75%, transparent); }

/* ── (113) 딜러는 그림으로 ─── */
/*
 * 사용자가 준 화면에서 딜러를 오려 냈다(`public/img/dealer-*.png`).
 * 헤즈업은 붉은 천 쪽 딜러, 일지 테이블은 푸른 천 쪽 딜러 — 준 그림 그대로다.
 *
 * ⚠️ <b>아랫도리는 천 뒤로 넣는다.</b> 그래야 잘린 네모가 안 보이고 '테이블 뒤에 선 사람'이 된다.
 *    쌓는 순서를 못 박아 둔다 — 딜러 0 · 천 1 · 자리와 칩 2 위.
 * ⚠️ 그림이 안 뜨면 그 자리는 그냥 빈다. 딜러는 꾸밈이라 없어도 판은 읽힌다.
 */
.hut-croupier, .pk-croupier { z-index: 0; }
.hut-felt, .pk-felt { z-index: 1; }
.hut-seat, .hut-bet, .hut-dealer,
.pk-seat, .pk-dealer, .pk-bet, .pk-pot { z-index: 2; }

/*
 * 딜러는 위 한가운데 선다. 넓은 화면에서는 <b>온몸</b>이 보이고(상대 자리를 그만큼 내렸다),
 * 폰에서는 자리 상자가 아랫도리를 가린다 — 폰은 세로가 모자라고, 가릴 것을 고르면
 * <b>보드가 먼저</b>다. 머리와 어깨는 상자 위로 나온다.
 */
.hut-croupier {
    width: 104px;
    color: inherit;
}
/*
 * ⚠️ 넓은 화면 것만 바꾸므로 `min-width` 로 묶는다. 그냥 두면 이 덩이가 파일 뒤라
 *    (111) 의 폰 규칙까지 이겨 버린다 — 미디어 쿼리는 특이성을 안 올린다.
 */
@media (min-width: 641px) {
    .hut-seat.top { top: 30%; }
    .hut-felt { inset: 32% 4% 25%; }
    .hut-bet.top { top: 45%; left: 22%; }
    .hut-dealer.top { top: 34%; }
}
.pk-croupier { width: 64px; }
.hut-croupier img, .pk-croupier img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 640px) {
    .hut-croupier { width: 76px; }
    .pk-croupier { width: 52px; }
}

/* ── (114) 일지 제목 옆 단추 셋을 한 줄에 ─── */
/*
 * 사용자 지시 — "한 줄에 어떻게든 구겨 넣어봐". 폰에서 '차이니즈 포커 →' 가 둘째 줄로 넘어갔다.
 * 줄인 것은 셋 — 사이 여백, 글자 크기와 안쪽 여백, 그리고 딱지 글자('포커'를 감춘다).
 * ⚠️ `flex-wrap` 은 그대로 둔다. 더 좁은 화면에서는 넘치는 것보다 넘어가는 편이 낫다.
 */
@media (max-width: 640px) {
    .hero-row { gap: 5px; }
    .hero-row h1 { font-size: 24px; }
    .hero-row .hero-link { padding: 4px 8px; font-size: 13.5px; white-space: nowrap; }
    .hero-long { display: none; }
}
@media (max-width: 340px) {
    .hero-row { gap: 4px; }
    .hero-row h1 { font-size: 22px; }
    .hero-row .hero-link { padding: 4px 6px; font-size: 13px; }
}

/* ── (115) 글자를 키웠다 ─── */
/*
 * 사용자 지시 — "사이트 전체 규격이나 뼈대 칸을 건들지 않는 조건에서 글자 폰트만 최대한 키워봐".
 * 스타일시트의 `font-size` 를 통째로 올렸다(본문 +2px, 제목 +1px, 8.5px 이하와 30px 위는 그대로).
 * 바탕 글자는 14 → 16px.
 *
 * ⚠️ <b>칸이 글자를 따라 안 커지는 곳</b>만 손으로 되돌렸다 — 달력 칸(일곱으로 나눈 고정 폭),
 *    레인지 차트 169칸(8px 이하라 애초에 안 건드렸다).
 */
@media (max-width: 340px) {
    /* 320px 에서는 칸이 40px 뿐이다. '+49.7만' 이 들어가려면 여기까지 줄여야 한다 */
    .cell .dnum { font-size: 12px; }
    .cell .dsum { font-size: 9.5px; }
}

/*
 * 위 메뉴는 여섯 칸이 <b>한 줄에 들어가야 한다</b>. 바탕 글자를 16px 로 키웠더니
 * 821px 에서 57px 이 넘쳤다 — 여기만 옛 크기로 되돌린다. 넉넉한 화면에서는 다시 키운다.
 */
.nav-link { font-size: 14px; }
@media (min-width: 1060px) { .nav-link { font-size: 15.5px; } }
/*
 * 위 메뉴가 좁아지는 까닭은 <b>옆자리</b>다 — 로고와 계정·고객센터 딱지가 커지면
 * 가운데 여섯 칸이 그만큼 밀린다. 1060px 아래에서는 옆자리를 옛 크기로 둔다.
 */
@media (max-width: 1059px) {
    .logo { font-size: 20px; }
    .acct-link { font-size: 13.5px; }
}

/*
 * 폰의 입력칸은 <b>16px 아래로 안 내린다.</b>
 * 아이폰 사파리는 글자가 16px 보다 작은 칸을 누르면 화면을 <b>확대</b>해 버린다 —
 * 그러면 사용자가 손으로 다시 줄여야 한다. 글자를 키우는 김에 이 문턱을 넘긴다.
 */
@media (max-width: 640px) {
    input, select, textarea { font-size: 16px; }
}

/* ── (116) 단톡방 봇 붙이는 차례 ─── */
/* 매장 화면에만 있는 목록이다. 손가락으로 짚어 가며 읽는 차례라 줄 사이를 벌린다 */
.vn-steps {
    margin: 10px 0 6px;
    padding-left: 20px;
    color: var(--text-sub);
    line-height: 1.7;
}
.vn-steps li { margin-bottom: 7px; }
.vn-steps li:last-child { margin-bottom: 0; }

/* ── (118) 관리자 — 표를 카드로 ─── */
/*
 * 사용자 지시 — "가로 스크롤도 없애고 깔끔하고 보기좋게".
 * 칸 여섯 개짜리 표는 360px 에 안 들어간다. 사람마다 한 칸으로 세운다.
 *
 * ⚠️ 카드 안의 어떤 덩이도 <b>제 칸보다 넓어지면 안 된다</b>.
 *    아이디·닉네임은 `min-width: 0` 과 `overflow-wrap` 이 있어야 줄이 바뀐다.
 */
.ad-find {
    width: 100%;
    margin: 0 0 10px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-size: 16px;      /* 폰에서 눌렀을 때 화면이 확대되지 않는 문턱 */
}

.ad-list { display: flex; flex-direction: column; gap: 10px; }

.ad-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    padding: 11px 12px;
    min-width: 0;
}
.ad-card.blocked { opacity: .72; border-style: dashed; }

.ad-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ad-id {
    font-size: 16px;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.ad-nick { font-size: 14.5px; color: var(--text-sub); overflow-wrap: anywhere; }
.ad-nick::before { content: '· '; color: var(--muted); }

.ad-when { margin-top: 3px; font-size: 13.5px; color: var(--muted); }

.ad-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 9px; }
.ad-label { font-size: 13.5px; font-weight: 700; color: var(--label); flex: none; }
.ad-venues { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.ad-none { font-size: 13.5px; color: var(--muted); }

.ad-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.ad-acts .chip { font-size: 14px; }

/* 여기서 못 하는 것 — 왜 화면에 없는지까지 적는다 */
.ad-cant { margin: 0; padding-left: 18px; color: var(--text-sub); line-height: 1.6; }
.ad-cant li { margin-bottom: 9px; }
.ad-cant li:last-child { margin-bottom: 0; }
.ad-cant code {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13.5px;
    overflow-wrap: anywhere;
}
.ad-cant span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }

/* 신청 승인·거절 — 관리자가 이 카드를 여는 까닭이라 맨 앞에 크게 둔다 */
.ad-decide { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.ad-decide .cta-btn { border: 0; cursor: pointer; font: inherit; font-size: 15px; }
.ad-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ok) 14%, transparent);
    color: var(--ok);
    font-size: 13.5px;
    font-weight: 700;
}
.ad-decide-say { margin: 7px 0 0; }
.ad-row .ad-memo {
    flex: 1;
    min-width: 150px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-size: 15px;
}

/* ── (118) 일지 테이블 — 자리에 사람, 뒤에 방 ─── */
/*
 * 사용자가 준 카드룸 그림에서 아홉을 오려 자리마다 앉혔다.
 *
 * ⚠️ <b>기능을 가리면 안 된다</b>(사용자 지시). 그래서
 *    ① 사람은 자리 딱지 <b>안</b>에 들어간다 — 딱지가 곧 누르는 자리다
 *    ② 방 배경은 어둡게 깔고 천을 그 위에 올린다 — 글씨 대비를 안 깎는다
 */
.pk-table {
    background-image: linear-gradient(rgba(18, 12, 10, .55), rgba(18, 12, 10, .72)),
                      url('../img/room.jpg');   /* ⚠️ 상대 경로 — 서버는 /holdemgo 밑에 있다 */
    background-size: cover;
    background-position: center 38%;
    border-radius: 18px;
    padding: 2px;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .5);
}

/* 자리 딱지 안의 사람. 이름 왼쪽에 작게 */
.pk-seat-face {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 1px solid color-mix(in srgb, #fff 45%, transparent);
    background: var(--surface-2);
}
.pk-seat-face.dim { opacity: .55; filter: saturate(.7); }
.pk-seat.on .pk-seat-face, .pk-seat.me .pk-seat-face { border-color: rgba(255, 255, 255, .8); }

/* 이름과 사람을 한 줄로. 카드는 그 아래 */
.pk-seat .pk-hand { gap: 5px; }
.pk-cards-wrap { display: block; margin-top: 3px; }

/* 방을 깐 만큼 자리 딱지는 더 또렷해야 한다 */
.pk-seat { box-shadow: 0 2px 9px rgba(0, 0, 0, .45); }

@media (max-width: 640px) {
    .pk-seat-face { width: 21px; height: 21px; }
}

/* ── (119) 내 캐릭터 — 카드룸 사람도 고른다 ─── */
.pk-faces { flex-direction: column; align-items: stretch; gap: 8px; }
.pk-faces-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pk-faces-label {
    flex: 0 0 100%;
    font-size: 13px;
    font-weight: 700;
    color: var(--label);
}
.pk-face-pick.pk-person { overflow: hidden; background: #2a2020; width: 40px; height: 40px; }
.pk-face-pick.pk-person img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.pk-face-pick.pk-person.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 55%, transparent); }

/*
 * 테이블과 단추에 들어가는 내 캐릭터 그림.
 *
 * ⚠️ <b>크기를 못 박는다.</b> 옛 규칙 `img.pk-face { width: 100% }` 이 따라와서
 *    내 자리 그림이 딱지를 꽉 채우고 보드를 덮었다(눌러 보다 잡았다).
 *    다른 자리 얼굴(.pk-seat-face)과 같은 크기라야 테이블이 한 장면이 된다.
 */
img.pk-face-img {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .8);
}
@media (max-width: 640px) {
    img.pk-face-img { width: 21px; height: 21px; }
}
#h-avatar-now { display: inline-flex; vertical-align: middle; }
#h-avatar-now .pk-face { width: 20px; height: 20px; font-size: 16px; }

/* ── (120) 헤즈업 — 들어오면 테이블이 먼저 ─── */
/* 고르개는 판 바로 아래. 판과 한 덩이로 보이게 선을 긋는다 */
.hu-setup {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.hu-setup .hu-go { margin-top: 12px; font-size: 17px; }

/* 대기 중 — 팟 자리에 '시작을 누르세요' */
.hut-pot.hut-waiting span { display: none; }
.hut-pot.hut-waiting b { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .78); }
.hut-wait-hide { display: none; }

/* 내 자리의 빈 카드 칸 — 아직 안 돌렸다 */
.cf.cf-wait {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, .55);
    box-shadow: none;
}

/* ── (121) 일지 '기억나는 핸드' — RTA 안내를 아코디언으로 ───────────
 * 제목 한 줄만 늘 보이고 까닭은 눌러야 펼쳐진다. 접힌 것이 기본이다(89 와 같은 원칙).
 */
.hand-why-fold {
    margin: 0 0 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface-3);
}
.hand-why-sum {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    cursor: pointer;
    list-style: none;
}
.hand-why-sum::-webkit-details-marker { display: none; }
.hand-why-sum::marker { content: ''; }
.hand-why-sum strong { flex: 1; color: var(--text); font-size: 15px; line-height: 1.5; }
.hand-why-fold[open] .drow-arrow { transform: rotate(-135deg) translate(-2px, -2px); }
.hand-why-fold[open] .hand-why-sum { border-bottom: 1px solid var(--border); }
.hand-why-body {
    padding: 9px 13px 11px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
}
.hand-why-body p { margin: 0; }
.hand-why-body p + p { margin-top: 6px; }
.hand-why-body b { color: var(--text-sub); }

/* ⚠️ 그림을 바꿀 때는 <b>파일 이름도 바꾼다</b>(127). /img 는 7일 캐시라 같은 이름이면 다녀간 사람은 옛 그림을 본다 */
/* ── (123) 제목 띠 배경 그림 ──────────────────────────────────
 * 사용자가 그린 그림을 화면 맨 위 제목 띠에만 깐다(페이지 전체가 아니다 —
 * 표·달력 위에 그림이 있으면 글자가 흐려지고 아이폰 스크롤이 버벅인다).
 *
 * 그림은 테마와 상관없이 어둡다. 그래서 띠 안의 글자는 늘 흰색이고, 왼쪽에
 * 어두운 막을 한 겹 더 깔아 제목 자리의 대비를 지킨다.
 * 폰은 750px(17KB), 넓은 화면은 1200px(35KB) 파일을 받는다.
 *
 * 다른 화면에 넣을 때 — 그림을 public/img/bg/<이름>.webp · <이름>-m.webp 로 두고
 * `.hero-bg-<이름>` 한 줄씩만 더한다. 주소는 상대 경로(../img/…) — /holdemgo 밑이다.
 */
.hero.hero-bg {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 124px;
    margin: 0 0 10px;
    padding: 14px 16px;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: #0d0b0c;
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
}
.hero.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 6, 7, .78) 0%, rgba(8, 6, 7, .35) 55%, rgba(8, 6, 7, .1) 100%),
                linear-gradient(0deg, rgba(8, 6, 7, .55) 0%, rgba(8, 6, 7, 0) 60%);
    pointer-events: none;
}
.hero.hero-bg > * { position: relative; }
.hero.hero-bg h1,
.hero.hero-bg p,
.hero.hero-bg strong { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.hero.hero-bg p { color: rgba(255, 255, 255, .86); }

/* 폰 — 그림을 조금 키워 카드 무더기를 오른쪽으로 민다. 제목이 빈 어둠 위에 앉는다 */
.hero-bg-calendar { background-image: url('../img/bg/cards-m.webp'); background-size: 140% auto; background-position: 0% 42%; }
@media (min-width: 641px) {
    .hero.hero-bg { min-height: 170px; padding: 20px 24px; }
    /* 넓은 화면 — 띠가 납작해 cover 로 깔면 카드 한가운데만 남는다. 그림 가장자리가 검어서 오른쪽에 통째로 앉혀도 이음매가 안 보인다 */
    .hero-bg-calendar { background-image: url('../img/bg/cards.webp'); background-size: auto 150%; background-position: 88% 45%; }
}

/* ── (124) 써틴 — 상대 셋 자리에 얼굴 ─────────────────────────
 * '컴퓨터 1' 이 92px 칸에서 두 줄로 꺾였다. 칸 폭을 풀고 한 줄로 둔다.
 */
.b2-who { width: auto; align-items: center; white-space: nowrap; }
.b2-face {
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    object-fit: cover;
}
.b2-seat.on .b2-face { border-color: var(--accent); }
.b2-seat.win .b2-face { border-color: var(--ok); }
.tt-what-foot { margin: 12px 0 0; }

/* ── (124) 헤즈업 — 경기장 배경 ─────────────────────────────────
 * 머리말(전략 › 헤즈업 연습)부터 테이블 판 끝까지 그림 한 장 위에 앉는다.
 * 그림 아래쪽은 바탕색(#0f0c0d)으로 녹아 있어서 판 아래 칸(고르개)은 단색 위에 온다.
 * 폰은 본문 여백만큼 밖으로 넓혀 화면 끝까지 깐다.
 */
.hu-arena {
    color-scheme: dark;
    --bg: #0a0b0d; --surface: #131519; --surface-2: #1b1e24; --surface-3: #0f1114;
    --border: #282d36; --border-strong: #3b4250;
    --text: #f6f8fb; --text-sub: #ced5e0; --label: #99a2b0; --muted: #8a93a1;
    --accent: #e04a5a; --accent-soft: rgba(224, 74, 90, 0.14);
    --ok: #3ee08d; --warn: #ffb02e; --seat: #7fb3ff; --pot: #c9973f;
    --on-solid: #ffffff; --tint: rgba(255, 255, 255, 0.04);

    position: relative;
    margin: -8px calc(-1 * var(--page-pad)) 12px;
    padding: 10px var(--page-pad) 4px;
    color: var(--text);
    background: #0f0c0d url('../img/bg/arena-m.webp') center top / 100% auto no-repeat;
}
.hu-arena .crumb, .hu-arena .crumb a { color: rgba(255, 255, 255, .62); }
.hu-arena .hero h1 { color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
/* 판은 속이 비친다 — 테두리만 남긴다(시안) */
.hu-arena #hu-table {
    background: rgba(12, 10, 11, .28);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: none;
}
@media (min-width: 641px) {
    .hu-arena {
        margin: 0 0 14px;
        padding: 14px 18px 6px;
        border-radius: var(--radius);
        background-image: url('../img/bg/arena.webp');
        /* 그림 아래쪽이 바탕색으로 녹아 있으므로 cover 로 늘리지 않는다 — 위에 붙이고 폭만 맞춘다 */
    }
}

/* (124) 띠 안의 한 줄 머리말(일지 — 제목 + 문 셋). 띠가 좌우 여백을 먹어 '차이니즈' 가
 * 둘째 줄로 떨어졌다. 폰에서는 이 띠만 여백·제목·단추를 조금씩 줄여 (114) 의 한 줄을 지킨다 */
@media (max-width: 640px) {
    .hero.hero-bg:has(.hero-row) { padding: 12px 8px; }
    .hero-bg .hero-row { gap: 4px; }
    .hero-bg .hero-row h1 { font-size: 22px; }
}
@media (max-width: 370px) {
    .hero.hero-bg:has(.hero-row) { padding: 10px 6px; }
    .hero-bg .hero-row { gap: 3px; }
    .hero-bg .hero-row h1 { font-size: 20px; }
}

/* ── (125) 일지 테이블 — 경기용 테이블처럼 ───────────────────────
 * 사용자 시안: 방 배경 없이, 둥근 사각(경기장 트랙 모양) 테이블.
 *   바깥 — 짙은 남색 패드 + 금테      (box-shadow 두 겹. 둥근 모양을 그대로 따라간다)
 *   그 안 — 나무 레일                 (border-box 바탕)
 *   천    — 짙은 파랑, 안쪽에 금빛 가는 선(베팅 라인)
 *   자리  — 금테 두른 크림색 동그라미. 사람 얼굴 위, 자리 이름 아래
 *   딜러  — 레일 위 칩 통 뒤에 선다
 * ⚠️ 나(hero)·상대 자리는 카드가 붙으므로 동그라미로 안 줄인다 — 둥근 알약 그대로, 금테만 두른다.
 */
.pk-table {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}
.pk-felt {
    inset: 17% 9% 15%;
    border-radius: 999px;
    border: 7px solid transparent;
    background:
        radial-gradient(90% 110% at 50% 35%, #2a5fb0 0%, #1b4287 55%, #122f63 100%) padding-box,
        linear-gradient(180deg, #b07c45 0%, #7a4b22 50%, #9a6532 100%) border-box;
    box-shadow:
        inset 0 0 26px rgba(0, 0, 0, .45),
        0 0 0 9px #1a2442,
        0 0 0 11px #c9a35a,
        0 10px 22px rgba(0, 0, 0, .45);
}
/* 베팅 라인 — 천 안쪽의 가는 금선 */
.pk-felt::before {
    content: '';
    position: absolute;
    inset: 11% 7%;
    border: 1.5px solid rgba(214, 180, 106, .45);
    border-radius: 999px;
    pointer-events: none;
}
.pk-board { border-color: rgba(214, 180, 106, .55); }
.pk-bcard { border-color: rgba(214, 180, 106, .45); }

/* 칩 통 — 레일 위 한가운데. 색 칩이 줄지어 꽂힌 나무 받침 */
.pk-tray {
    position: absolute;
    top: 17%;
    transform: translate(-50%, -45%);
    width: 13%;
    height: 6%;
    min-height: 12px;
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg,
            #9e2f33 0 12%, #241a14 12% 14%,
            #d9d1bf 14% 26%, #241a14 26% 28%,
            #2b4f8f 28% 40%, #241a14 40% 42%,
            #2f6e47 42% 54%, #241a14 54% 56%,
            #b8912f 56% 68%, #241a14 68% 70%) padding-box,
        linear-gradient(#8a5a2c, #5e3a18) border-box;
    border: 3px solid transparent;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
    z-index: 1;
    pointer-events: none;
}

/* 빈 자리 — 금테 두른 크림색 동그라미 */
.pk-seat:not(.me):not(.vs) {
    width: 52px;
    height: 52px;
    min-width: 0;
    padding: 0;
    justify-content: center;
    border: 2px solid #c9a35a;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #fffaf0 0%, #efe4cc 70%, #d9c9a6 100%);
    color: #2b2a28;
    box-shadow: 0 0 0 2px #1a2442, 0 3px 8px rgba(0, 0, 0, .45);
}
.pk-seat:not(.me):not(.vs) .pk-hand { flex-direction: column; gap: 1px; }
.pk-seat:not(.me):not(.vs) .pk-name { font-size: 11.5px; font-weight: 800; letter-spacing: -.01em; }
.pk-seat:not(.me):not(.vs) .pk-seat-face { width: 22px; height: 22px; border-color: #c9a35a; }
.pk-seat:not(.me):not(.vs) .pk-seat-face.dim { opacity: .85; filter: none; }
.pk-seat:not(.me):not(.vs):hover { border-color: var(--accent); color: var(--accent); }
.pk-seat.nine:not(.me):not(.vs) { opacity: .8; }
/* 나·상대 — 알약 그대로, 테만 금빛으로 맞춘다 */
.pk-seat.me, .pk-seat.vs { border: 2px solid #c9a35a; }

/* 딜러를 조금 키워 어깨가 칩 통 위로 나오게 */
.pk-croupier { width: 80px; }

@media (max-width: 640px) {
    .pk-croupier { width: 60px; }
    .pk-felt { inset: 18% 10% 16%; border-width: 5px; box-shadow: inset 0 0 18px rgba(0, 0, 0, .45), 0 0 0 7px #1a2442, 0 0 0 9px #c9a35a, 0 8px 16px rgba(0, 0, 0, .45); }
    .pk-seat:not(.me):not(.vs) { width: 44px; height: 44px; }
    .pk-seat:not(.me):not(.vs) .pk-seat-face { width: 18px; height: 18px; }
    .pk-seat:not(.me):not(.vs) .pk-name { font-size: 10.5px; }
    .pk-tray { top: 18%; width: 20%; }
}

/* ── (128) 제목 띠 — 모든 화면 같은 규격, 그림은 크게 ─────────────
 * 사용자 지시 — "규격 전부 맞춰주고 그림만 확대해서 좀 크게".
 *   · 높이를 못 박는다(폰 140 · 넓은 화면 190). 글이 한 줄이든 세 줄이든 띠 크기는 같다
 *   · 윗길(전략 › 써틴)은 띠 <b>안</b> 왼쪽 위로 넣었다 — 띠 위에 따로 있으면 화면마다 띠 시작 높이가 달랐다.
 *     ICM 은 윗길이 제 이름뿐이라 지웠다
 *   · 그림을 키워 카드 무더기를 오른쪽에 크게 둔다. 제목은 왼쪽 아래 어두운 쪽에 앉는다
 */
.hero.hero-bg {
    height: 140px;
    min-height: 0;
    margin: 0 0 10px;
}
.hero.hero-bg .crumb {
    position: absolute;
    top: 10px;
    left: 16px;
    margin: 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .7);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.hero.hero-bg .crumb a { color: rgba(255, 255, 255, .85); }
.hero.hero-bg p { font-size: 14.5px; line-height: 1.45; margin-top: 2px; }
.hero-bg-calendar { background-size: 230% auto; background-position: 72% 40%; }
@media (min-width: 641px) {
    .hero.hero-bg { height: 190px; }
    .hero.hero-bg .crumb { left: 24px; top: 14px; }
    .hero-bg-calendar { background-size: auto 230%; background-position: 92% 42%; }
}
/* 띠에서 내린 소개 한 줄 — 띠 바로 밑, 보통 글자로 */
.hero-sub { margin: -2px 0 10px; color: var(--label); font-size: 15px; line-height: 1.6; }
.hero-sub strong { color: var(--text); }

/* ── (129) 전략 — 게임 바로가기 줄 ── */
.st-games-h { margin: 4px 0 8px; font-size: 16px; font-weight: 800; color: var(--label); }
.st-games .st-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.st-games .st-card h3 { color: var(--text); }

/* ── (129) 폰 — 제목 띠를 화면 끝까지 꽉 ──
 * 사용자 지시 — "여기 꽉 채워봐". 폰에서는 좌우 여백과 둥근 모서리를 없애고 머리말 밑에 딱 붙인다.
 * 값은 브라우저에서 잰 본문 여백만큼 밖으로 민다.
 */
@media (max-width: 640px) {
    .hero.hero-bg {
        /* 폰의 .page-shell 여백이 위 8px · 옆 12px 이다(--page-pad 16px 이 아니다 — 재서 확인) */
        margin: -8px -12px 10px;
        border-radius: 0;
        padding-left: 14px;
        padding-right: 14px;
    }
    .hero.hero-bg .crumb { left: 14px; }
}

/* ── (130) 꼬리말 정리 ─────────────────────────────────────────
 * 링크 두 줄(가운데, 가운뎃점) · 면책은 작고 흐리게 · 모두 가운데 맞춤.
 */
.footer-inner { text-align: center; }
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin: 0 0 6px;
    overflow: visible;
}
.footer-links a { font-size: 14.5px; font-weight: 700; color: var(--text-sub); white-space: nowrap; }
.footer-links a + a::before {
    content: '·';
    margin: 0 9px;
    color: var(--muted);
    font-weight: 400;
}
.footer-legal-row { margin-bottom: 12px; }
.footer-legal-row a { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.footer-legal-row a b { color: var(--text-sub); }
.footer-note {
    max-width: 560px;
    margin: 0 auto 6px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    word-break: keep-all;
}
.footer-copy { margin-top: 8px; font-size: 12.5px; }
@media (max-width: 640px) {
    .footer-links { flex-wrap: wrap; overflow: visible; gap: 0; }
    .footer-links a { font-size: 14px; }
    .footer-legal-row a { font-size: 13px; }
}

/* (131) '게임 바로가기' 를 눈에 띄게 — 강조색 글자, 왼쪽 빨간 막대, 스페이드 딱지 */
.st-games-h {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0 8px;
    padding-left: 9px;
    border-left: 4px solid var(--accent);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--accent);
}
.st-games-ico {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-solid);
    font-size: 13px;
    line-height: 1;
}

/* ── (134) 폰 머리말 — 로고 옆 '선수 성적' ──
 * 머리말은 flex 순서로 선다(로고 1 · 계정 칸 3, 계정 칸이 margin-left:auto). 이 칩은 2 번.
 * 자리가 빠듯하다 — 닉네임이 길면 줄이 꺾인다. 폭에 따라 글자를 줄인다:
 *   424px 넘음 '🏆 선수 성적' · 371~424 '🏆 성적' · 370 이하 '🏆'
 */
/* (136) 넓은 화면에도 — 로고와 위 메뉴(대회 일정) 사이. (137) 이름은 '선수 랭킹' */
.header-inner .hdr-results {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0 4px 0 12px;
    padding: 5px 12px;
    border: 1px solid color-mix(in srgb, var(--live) 55%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--live) 12%, var(--surface-2));
    color: var(--text);
    font-size: 14.5px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    flex: 0 0 auto;
}
.header-inner .hdr-results:hover { border-color: var(--live); }
@media (max-width: 820px) {
    .header-inner .hdr-results {
        order: 2;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        margin: 0 0 0 2px;
        padding: 4px 9px;
        border: 1px solid color-mix(in srgb, var(--live) 55%, var(--border));
        border-radius: 999px;
        background: color-mix(in srgb, var(--live) 12%, var(--surface-2));
        color: var(--text);
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
        text-decoration: none;
        flex: 0 0 auto;
    }
    .hdr-results i { font-style: normal; font-size: 13px; }
}
@media (max-width: 424px) { .hdr-results .hr-a { display: none; } }
/* 자리를 대느라 닉네임 칩은 폰에서 72px 까지만 — 넘치면 말줄임. 누르면 계정 화면에 온전히 보인다 */
@media (max-width: 430px) {
    .header-inner { column-gap: 4px; }
    .header-inner #acct-link { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
    .header-inner .hdr-results { padding: 4px 8px; }
}
@media (max-width: 370px) {
    .header-inner .hdr-results { padding: 4px 7px; }
    .hdr-results .hr-b { display: none; }
}
/* (136) 1024~1099px — 위 메뉴 여섯 칸이 빠듯한 폭. 칩이 메뉴를 밀어 옆으로 넘치게 했다 → 트로피만.
 * 821~1023px 은 칩이 없어도 메뉴가 넘치는 폭이라 아예 감춘다(대회 일정 화면 브리핑에 길이 있다) */
@media (min-width: 821px) and (max-width: 1023px) { .header-inner .hdr-results { display: none; } }
@media (min-width: 1024px) and (max-width: 1099px) {
    .header-inner .hdr-results { margin-left: 8px; padding: 5px 8px; }
    .hdr-results .hr-a, .hdr-results .hr-b { display: none; }
}


/* ── (137) 관리자 — 선수 랭킹 기록 ── */
.ad-rank-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin-bottom: 12px;
}
.ad-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ad-f.wide, .ad-rank-form .cta-btn { grid-column: 1 / -1; }
.ad-f span { font-size: 13.5px; font-weight: 700; color: var(--label); }
.ad-f input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-size: 16px;
}
.ad-rank { display: flex; align-items: center; gap: 10px; }
.ad-rank-main { flex: 1; min-width: 0; }
.ad-rank-main em { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.ad-rank-pos { font-size: 13.5px; color: var(--label); font-weight: 700; }
.ad-rank-pt { font-weight: 800; white-space: nowrap; }
@media (min-width: 641px) {
    .ad-rank-form { grid-template-columns: repeat(4, 1fr); }
    .ad-f.wide { grid-column: span 2; }
}


/* ── (138) 선수 랭킹 — 월별 · 누적 ── */
.res-mode { display: flex; gap: 6px; margin-bottom: 10px; }
.res-month { margin-bottom: 8px; }
.res-month-label {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}
.res-month-label::after { content: ' ▾'; font-size: 12px; color: var(--muted); }
.res-month-label[aria-expanded="true"]::after { content: ' ▴'; }
.res-picker {
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
}
.res-picker-year { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.res-picker-year b { font-size: 17px; min-width: 70px; text-align: center; }
.res-picker-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.res-pm {
    position: relative;
    padding: 10px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-sub);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.res-pm.has::after {
    content: '';
    position: absolute;
    top: 5px; right: 6px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--live);
}
.res-pm.on { background: var(--accent); border-color: var(--accent); color: var(--on-solid); }

/* (139) 한 판 한 번에 — 붙여 넣는 칸 */
.ad-f textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    line-height: 1.6;
    resize: vertical;
}
.ad-f span code { font-size: 13px; }
.ad-rank-preview { margin: -2px 0 0; min-height: 1.2em; }

/* ── (141) 써틴 — 상대 셋을 한 줄 박스로, 판·카드를 크게 ─────────────
 * 상대 셋이 세 줄을 차지해 판이 화면 아래로 밀렸다. 한 줄 세 칸으로 세우고
 * 칸마다 얼굴 · 이름 · 남은 장수 · 방금 낸 것을 위에서 아래로.
 */
.b2-seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.b2-seat {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 4px;
    min-height: 118px;
    text-align: center;
}
.b2-seat .b2-who { flex-direction: column; align-items: center; gap: 3px; width: auto; }
.b2-seat .b2-who b { font-size: 14.5px; }
.b2-seat .b2-face { width: 40px; height: 40px; }
.b2-seat .b2-mini { justify-content: center; --cf-w: 22px; }
.b2-seat em { font-size: 13.5px; }

.b2-table { min-height: 170px; padding: 20px 10px 14px; gap: 10px; }
.b2-played { --cf-w: 60px; gap: 5px; }
.b2-say { font-size: 15.5px; }
.b2-mine { --cf-w: 60px; padding: 12px 0 16px; }
.b2-mine .cf.up { transform: translateY(-16px); }
@media (max-width: 640px) {
    .b2-played { --cf-w: 56px; }
    .b2-mine { --cf-w: 56px; }
    .b2-seat .b2-mini { --cf-w: 20px; }
}
@media (max-width: 380px) {
    .b2-played { --cf-w: 50px; }
    .b2-mine { --cf-w: 52px; }
}

/* ── (142) 이름을 holdemgo 로 되돌리며 로고가 17px 길어졌다 — 머리말 한 줄을 다시 맞춘다 ──
 *   폰(430 이하) 로고 18.5px · 칩 '🏆 선수 랭킹' 은 461 이상, '🏆 랭킹' 은 391~460, '🏆' 은 390 이하
 *   넓은 화면은 트로피만 쓰는 폭을 1139 까지 넓힌다
 */
@media (max-width: 430px) { .header-inner .logo { font-size: 18.5px; letter-spacing: -0.7px; } }
@media (max-width: 460px) { .hdr-results .hr-a { display: none; } }
@media (max-width: 390px) { .hdr-results .hr-b { display: none; } .header-inner .hdr-results { padding: 4px 7px; } }
@media (min-width: 1100px) and (max-width: 1139px) {
    .header-inner .hdr-results { margin-left: 8px; padding: 5px 8px; }
    .hdr-results .hr-a, .hdr-results .hr-b { display: none; }
}
@media (max-width: 560px) {
    .header-inner #acct-link { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 359px) {
    .header-inner .logo { font-size: 17px; }
    .header-inner { column-gap: 3px; }
    .header-inner #acct-link { max-width: 60px; }
}
@media (min-width: 1140px) and (max-width: 1179px) {
    .header-inner .hdr-results { margin-left: 8px; padding: 5px 8px; }
    .hdr-results .hr-a, .hdr-results .hr-b { display: none; }
}

/* ── (143) 칩은 늘 '🏆 랭킹' 이상 — 트로피만으로는 눈에 안 들어온다(사용자 지시) ──
 * 앞 덩이들이 좁은 폭에서 '랭킹' 글자를 감추던 것을 되살리고, 모자란 자리는 머리말 여백·칩 안쪽에서 깎는다.
 */
.hdr-results .hr-b { display: inline !important; }
@media (min-width: 821px) and (max-width: 1023px) { .header-inner .hdr-results { display: inline-flex; margin-left: 6px; padding: 4px 8px; font-size: 13.5px; } }
@media (max-width: 400px) {
    .header-inner { padding-left: 9px; padding-right: 9px; column-gap: 3px; }
    .header-inner .hdr-results { padding: 4px 7px; gap: 2px; }
    .header-inner .acct-link { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 370px) {
    .header-inner .logo { font-size: 17px; letter-spacing: -0.8px; }
    .header-inner .hdr-results { font-size: 12.5px; padding: 4px 6px; }
    .header-inner .acct-link { font-size: 13px; padding-left: 7px; padding-right: 7px; }
    .header-inner #acct-link { max-width: 58px; }
}
/* 821~1023px — 위 메뉴 여섯 칸 + 로고 + 랭킹 칩 + 계정 칸이 한 줄에 들어가게 메뉴를 좁힌다(143) */
@media (min-width: 821px) and (max-width: 1023px) {
    .header-inner .hdr-results .hr-a { display: none; }
    .header-inner .nav { gap: 1px; }
    .header-inner .nav a { padding-left: 6px; padding-right: 6px; font-size: 13px; }
    .header-inner .logo { font-size: 19px; }
    .header-inner #acct-link { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
    .header-inner .acct-link { padding-left: 8px; padding-right: 8px; font-size: 13.5px; }
}
@media (max-width: 359px) { .header-inner #acct-link { max-width: 50px; } .header-inner { column-gap: 2px; } }
@media (min-width: 821px) and (max-width: 900px) {
    .header-inner { padding-left: 10px; padding-right: 10px; }
    .header-inner .nav a { padding-left: 5px; padding-right: 5px; font-size: 12.5px; }
    .header-inner .theme-pick { transform: scale(.92); }
}
@media (min-width: 1024px) and (max-width: 1179px) {
    .header-inner #acct-link { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 821px) and (max-width: 900px) {
    .header-inner .logo { font-size: 18px; }
    .header-inner #acct-link { max-width: 58px; }
    .header-inner .nav { gap: 0; }
}
@media (min-width: 1024px) and (max-width: 1179px) { .header-inner #acct-link { max-width: 84px; } }
/* (146) 721~820px 은 머리말 칸들의 order 가 0 이라 order:2 인 칩이 맨 뒤로 갔다 — 로고 바로 뒤로 되돌린다 */
@media (min-width: 721px) and (max-width: 820px) {
    .header-inner .hdr-results { order: 0; margin-right: auto; }
}

/* ── (149) 제목 띠 — 대표 제목을 띠 맨 위로 ──
 * 사용자 지시 — "대표제목의 위치 … 최상단으로". 띠 아래쪽에 앉아 있던 제목을 위로 올린다.
 * 윗길(전략 › 써틴)이 있는 화면은 그 바로 밑. 막(어둡게 깐 층)도 위쪽을 짙게 바꿔 글자가 읽히게 한다.
 */
.hero.hero-bg { justify-content: flex-start; padding-top: 14px; }
.hero.hero-bg:has(.crumb) { padding-top: 34px; }
.hero.hero-bg::before {
    background: linear-gradient(90deg, rgba(8, 6, 7, .78) 0%, rgba(8, 6, 7, .35) 55%, rgba(8, 6, 7, .1) 100%),
                linear-gradient(180deg, rgba(8, 6, 7, .6) 0%, rgba(8, 6, 7, 0) 55%);
}
@media (min-width: 641px) {
    .hero.hero-bg { padding-top: 22px; }
    .hero.hero-bg:has(.crumb) { padding-top: 44px; }
}

/* ── (150) 제목 띠 — 글자를 걷고 흐린 뒷배경만. 나중에 광고 자리 ──
 * 사용자 지시 — 대표 제목·윗길을 전부 지우고, 이 자리는 나중에 광고를 넣는다. 지금은 흐린 그림만.
 * ⚠️ 제목(h1)은 <b>눈에만 안 보이게</b> 둔다. 지우면 검색엔진과 화면 읽기 프로그램이 이 화면이 무엇인지 모른다.
 *    윗길은 통째로 감춘다(위 메뉴·아래 띠로 간다).
 * ⚠️ 일지 머리말의 헤즈업·써틴·차이니즈 단추는 기능이라 그대로 둔다.
 */
.hero.hero-bg h1 {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.hero.hero-bg .crumb { display: none; }
.hero.hero-bg, .hero.hero-bg:has(.crumb) { padding-top: 14px; }
.hero.hero-bg::before {
    background: rgba(8, 6, 7, .62);
}
@media (min-width: 641px) {
    .hero.hero-bg, .hero.hero-bg:has(.crumb) { padding-top: 22px; }
}

/* ── (151) 검은 판 뒤로 카드 그림이 비치게 ─────────────────────────
 * 사용자 — "박스에 표시된 여백에 위에 그림이 보였으면 … 블랙 뒤에 배경 있으면 좋다".
 *   · 화면 전체 뒤에 카드 그림을 흐리게 깐다. `body::before` 를 position:fixed 로 —
 *     background-attachment:fixed 는 아이폰에서 안 먹고 스크롤이 버벅인다
 *   · 판(.panel)을 조금 투명하게 해 빈 여백으로 그림이 비친다
 *   · 글이 있는 작은 칸(대회 카드·표·입력칸)은 불투명 그대로 — 글자 대비를 안 깎는다
 * 베이지 테마는 그림이 어두워 더 옅게 깐다.
 */
body { position: relative; }
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url('../img/bg/cards.webp') center 30% / cover no-repeat;
    opacity: .32;
    pointer-events: none;
}
:root:not([data-theme]) body::before,
:root[data-theme="beige"] body::before { opacity: .12; }
/* 그림이 body 바탕 뒤로 숨지 않게 — 바탕색은 html 이 맡는다 */
html { background: var(--bg); }
body { background: transparent; }

.panel, .brief {
    background: color-mix(in srgb, var(--surface) 74%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
:root:not([data-theme]) .panel, :root[data-theme="beige"] .panel,
:root:not([data-theme]) .brief, :root[data-theme="beige"] .brief {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}
/* 비친 그림 위에서도 흐린 글자가 읽히게 — 다크 판 안의 --muted 를 한 단 밝힌다(그림 가장 밝은 점 위 5.1:1, 그림 없는 곳 6.2:1) */
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .brief { --muted: #8e97a5; }

/* (152) 헤즈업 경기장 — 폰의 옆 여백은 12px(--page-pad 16px 이 아니다). 16 으로 밀어 4px 가로 넘침이 있었다 */
@media (max-width: 640px) {
    .hu-arena { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}

/* ── (154) 넓은 PC 화면의 양옆 빈 여백에 카드 그림 ──
 * 사용자 — "이 부분도 pc버젼에선 보여주고 싶은데"(본문 1200px 바깥의 양옆 빈 칸).
 * (151) 의 화면 뒤 그림은 cover 라 카드 무리가 가운데(판 뒤)에 숨고, 양옆에는 그림 가장자리의 검은 막만 남는다.
 * 그래서 양옆 칸마다 같은 그림을 칸 폭에 맞춰 줄여 하나씩 더 깐다 — 카드 무리의 가운데가 칸 한가운데에 온다.
 *   --hg-g : 한쪽 빈 칸 폭 = (화면 폭 − 본문 1200) ÷ 2
 *   그림 폭 2.2g → 카드 무리(그림 폭의 약 43%)가 칸 폭쯤, 그림 가운데를 칸 가운데에 맞추려고 −0.6g 밀어 둔다
 *   그림의 네모난 검은 가장자리는 둥근 가림막(mask)으로 흐려 없앤다 — 베이지 위에 회색 네모가 뜨지 않게
 * 빈 칸이 좁으면(1480px 아래) 안 깐다. 폰에는 없다.
 */
@media (min-width: 1480px) {
    body::after {
        --hg-g: calc((100vw - 1200px) / 2);
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            url('../img/bg/cards.webp') left calc(var(--hg-g) * -0.6) center / calc(var(--hg-g) * 2.2) auto no-repeat,
            url('../img/bg/cards.webp') right calc(var(--hg-g) * -0.6) center / calc(var(--hg-g) * 2.2) auto no-repeat;
        -webkit-mask-image:
            radial-gradient(ellipse calc(var(--hg-g) * .62) calc(var(--hg-g) * .62) at calc(var(--hg-g) / 2) 50%, #000 55%, transparent 100%),
            radial-gradient(ellipse calc(var(--hg-g) * .62) calc(var(--hg-g) * .62) at calc(100% - var(--hg-g) / 2) 50%, #000 55%, transparent 100%);
        mask-image:
            radial-gradient(ellipse calc(var(--hg-g) * .62) calc(var(--hg-g) * .62) at calc(var(--hg-g) / 2) 50%, #000 55%, transparent 100%),
            radial-gradient(ellipse calc(var(--hg-g) * .62) calc(var(--hg-g) * .62) at calc(100% - var(--hg-g) / 2) 50%, #000 55%, transparent 100%);
        opacity: .7;
    }
    :root:not([data-theme]) body::after,
    :root[data-theme="beige"] body::after { opacity: .55; }
}

/* ── (155) 베이지에서도 뒤 그림이 보이게 ──
 * 사용자 — "같은 화면인데 베이지모드는 뒷배경이 안 보이잖아". 12% 그림을 88% 판이 또 덮어 1% 남짓만 남았다.
 * 그림 .35 · 판 72% 로 올린다. 흐린 글자(--muted)는 그림 가장 어두운 점 위의 판에서 4.6:1(AA 4.5 이상).
 * 판 밖에 바로 앉는 설명 줄(.hero-sub)은 흐린 색이면 어두운 곳에서 모자라 본문 색으로 올린다.
 */
:root:not([data-theme]) body::before,
:root[data-theme="beige"] body::before { opacity: .35; }
:root:not([data-theme]) .panel, :root[data-theme="beige"] .panel,
:root:not([data-theme]) .brief, :root[data-theme="beige"] .brief {
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}
:root:not([data-theme]) .hero-sub, :root[data-theme="beige"] .hero-sub { color: var(--text); }

/* ── (162) 13×13 판이 좁은 폰(360px)에서 옆으로 넘치던 것 ──
 * 칸은 26px 인데 13px 굵은 글자 'KQo'·'Q2s' 가 칸보다 넓어 줄마다 칸을 밀어냈다 — 판이 380px 로 커져
 * 가로 스크롤이 생기고 AA·A2s 가 잘렸다. 글자를 화면 폭에 맞춰 줄이고(360px 에서 약 10.4px, 430px 에서 12.5px),
 * 칸이 글자 때문에 넓어지지 않게 minmax(0, 1fr) + min-width 0 으로 묶는다.
 */
@media (max-width: 640px) {
    .rg-row { grid-template-columns: repeat(13, minmax(0, 1fr)); }
    .rg-cell {
        min-width: 0;
        overflow: hidden;
        font-size: clamp(9.5px, 2.9vw, 13px);
        letter-spacing: -0.02em;
    }
}

/* ── (162) 360px 에서 옆으로 스크롤되던 표·그림 ──
 * 족보 확률: '…판에 한 번' 을 '…판' 으로, 영어 칸은 감추고, 족보 이름은 줄바꿈을 허용한다.
 * 아웃츠·팟 오즈·해외 세금 표: 3~13px 넘치던 것 — 칸 여백·글자를 한 단 줄인다.
 * 푸시폴드 계산 나무: 줄을 바꾸면 모양이 깨지므로 글자만 화면 폭에 맞춰 줄인다.
 */
@media (max-width: 640px) {
    .odds-table .once { display: none; }
    .odds-table .en, .odds-table th:nth-child(2):not(.num) { display: none; }
    .odds-table td:first-child, .odds-table th:first-child { white-space: normal; word-break: keep-all; }
    .odds-table th { white-space: normal; word-break: keep-all; }
    .table-wrap .rank-table { font-size: 12.5px; }
    .table-wrap .rank-table th, .table-wrap .rank-table td { padding-left: 3px; padding-right: 3px; }
    .table-wrap .rank-table th { white-space: normal; word-break: keep-all; }
    .pf-math { font-size: clamp(9px, 2.8vw, 12.5px); }
}
/* (162) 인원별 표(여섯 칸)는 360px 에서도 38px 넘쳤다 — 좁은 폰에서만 글자·여백을 한 단 더 줄인다 */
@media (max-width: 400px) {
    .table-wrap .rank-table.odds-table { font-size: 11px; }
    .table-wrap .rank-table.odds-table th, .table-wrap .rank-table.odds-table td { padding-left: 2px; padding-right: 2px; }
}
.only-narrow { display: none; }
@media (max-width: 640px) { .odds-table .only-narrow { display: inline; } }

/* ── (163) 써틴 손패 — 폰에서 카드를 고를 때 '툭툭 튕기던' 것 ──
 * ① 겹침 폭(margin)은 transition 에서 뺀다 — 새로 그린 카드가 겹치기 전 자리에서 미끄러져 와 부채가 출렁였다
 * ② :hover 는 마우스가 있는 기기에서만 — 폰에서는 누른 자리에 hover 가 남아 한 번 더 들썩였다
 * ③ 두 번 눌러 확대·파란 눌림 표시를 끈다
 */
.b2-mine .cf {
    transition: transform 0.14s ease-out, box-shadow 0.14s ease-out;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
}
.b2-mine .cf:hover { transform: none; z-index: auto; }
.b2-mine .cf.up:hover { transform: translateY(-16px); z-index: 2; }
@media (hover: hover) and (pointer: fine) {
    .b2-mine .cf:not(.up):hover { transform: translateY(-6px); z-index: 3; }
}

/* (164) 차례를 기다릴 때 손패가 비쳐 보이던 것 — 카드마다 opacity .55 를 걸어 겹친 부분으로 뒤 카드 무늬가 보였다.
 * 반투명 대신 <b>불투명하게 어둡게</b> 한다. will-change 는 카드마다 층을 만들어 뺀다. */
.b2-mine .cf.muted { opacity: 1; filter: grayscale(0.5) brightness(0.72); }
.b2-mine .cf { will-change: auto; }

/* ── (165) 써틴 — 고른 카드가 오른쪽 카드를 가리던 것, 판 도중에 끝내는 단추 ──
 * 고른 카드를 맨 앞(z-index)으로 올려 오른쪽 카드의 숫자 모서리를 덮었다. 제자리 겹침 순서는 그대로 두고 위로만 올린다 —
 * 겹친 부채에서 보이는 것은 원래 왼쪽 모서리뿐이라, 위로 올라온 윗부분만으로 고른 것이 보인다.
 */
.b2-mine .cf.up, .b2-mine .cf.up:hover { z-index: auto; }
.b2-quit { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.b2-quit .chip { font-size: 13.5px; padding: 5px 12px; opacity: 0.85; }
#ac-venue-link { display: block; margin: 4px 0 12px; text-align: center; }

/* ── (169) 헤즈업 — 판과 단추를 폰 한 화면에 ─── */
/*
 * 사용자 — "2번 옵션 한 화면에 보이게". 길 안내·큰 제목을 빼고(heads.html),
 * 폴드·콜·레이즈를 <b>한 줄에</b> 나란히 둔다. 전에는 줄이 셋으로 꺾여 136px 를 먹었다.
 */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hu-acts { flex-wrap: nowrap; }
.hu-acts > button { flex: 1 1 0; min-width: 0; margin: 0; padding: 11px 6px; white-space: nowrap; }
/*
 * 360×660 에서 재니 단추가 아래 띠 밑으로 50px 들어갔다. 폰에서만 판을 조금 낮추고(4:5 → 4:4.6)
 * 위 여백·풀이 줄 여백을 줄였다. 상대 자리와 천을 함께 올려 팟·보드가 자리 뒤로 안 숨게 했다.
 */
@media (max-width: 640px) {
    #hu-table { padding-top: 8px; }
    #hu-table .panel-head { margin-bottom: 2px; }
    .hu-clock { margin-bottom: 0; }
    .hut { aspect-ratio: 4 / 4.6; margin: 4px auto 10px; }
    .hut-seat.top { top: 25%; }
    .hut-felt { inset: 27% 3% 21%; }
    .hut-seat.bottom { top: 86.5%; }   /* 보드 밑 글자(플랍·턴·리버)가 내 자리에 안 가리게(360px 에서 잼) */
    .hu-said { margin: 6px 0 8px; padding: 7px 10px; font-size: 14px; line-height: 1.5; }
}
/*
 * (170) 판 끝 단추 — 사용자 "판 끝나고 상대 핸드보기가 없어". 360px 에서 단추 셋이 글자째 꺾여
 * 120px 높이가 되고 아래 띠 뒤로 숨었다. 한 줄로 두고 끝 글줄도 줄인다.
 */
.hu-end { margin-top: 8px; padding-top: 8px; }
.hu-endsay { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.hu-endbtns > button:not([hidden]) { flex: 1 1 0; min-width: 0; margin: 0; padding: 10px 4px; white-space: nowrap; font-size: 14.5px; }
.hu-end { margin-top: 4px; padding-top: 6px; scroll-margin-bottom: 72px; }   /* 아래 띠(54px) 위로 끌어올린다 — heads.js 가 판 끝에 scrollIntoView */
.hu-endsay { margin-bottom: 6px; }

/* ── (171) PC 양옆 여백 — 왼쪽·오른쪽 다른 그림 ──
 * 사용자 — "여기 각각 따로 이미지 만들어서 적용시켜봐". (154) 는 같은 카드 사진을 양쪽에 깔았다.
 * 왼쪽은 칩 더미와 A♠K♥, 오른쪽은 로열 플러시 부채와 딜러 버튼(`img/bg/side-*-v1.svg`, 직접 그린 벡터).
 * 바탕이 투명한 그림이라 (154) 의 둥근 가림막은 걷는다. 그림은 칸 폭의 86%, 세로가 모자라면 세로에 맞춘다(4:7).
 */
@media (min-width: 1480px) {
    body::after {
        --hg-w: min(calc(var(--hg-g) * .86), calc((100vh - 110px) * 4 / 7));
        background:
            url('../img/bg/side-left-v1.svg') left calc((var(--hg-g) - var(--hg-w)) / 2) top calc(50% + 30px) / var(--hg-w) auto no-repeat,
            url('../img/bg/side-right-v1.svg') right calc((var(--hg-g) - var(--hg-w)) / 2) top calc(50% + 30px) / var(--hg-w) auto no-repeat;
        -webkit-mask-image: none;
        mask-image: none;
        opacity: .85;
    }
    :root:not([data-theme]) body::after,
    :root[data-theme="beige"] body::after { opacity: .75; }
}

/* ── (172) 한글 줄바꿈 — 낱말 가운데서 끊지 않는다 ──
 * 사용자 — "기록을 지우지는 않습니다 — 지운 기록은 다시 떠돌기 때문입 / 니다." 처럼 낱말이 두 줄로 쪼개졌다.
 * 브라우저는 한글을 <b>글자마다</b> 끊을 수 있다고 본다. keep-all 이면 띄어쓰기에서만 끊는다(PC·폰 모두).
 * 띄어쓰기 없이 긴 것(주소·코드·아이디)은 넘칠 때만 아무 데서나 끊는다(break-word) — 폰 가로 넘침을 막는다.
 * text-wrap: pretty 는 마지막 줄에 한 낱말만 남는 것을 줄인다(지원하는 브라우저만. 없으면 그냥 넘어간다).
 */
body { word-break: keep-all; overflow-wrap: break-word; }
p, li, dd, dt, td, th, figcaption, blockquote, .fineprint, .sheet-note, .hero-sub { text-wrap: pretty; }
/* 주소·열쇠·코드는 낱말을 지키되, 칸을 넘칠 때만 아무 데서나 끊는다 */
code, pre, kbd { word-break: normal; overflow-wrap: anywhere; }

/* ── (173) 사용자가 준 그림으로 바꿈 — 위 띠 · PC 양옆 ──
 * 위 띠(.hero-bg-calendar, 22화면): J♠·A♠·K♠ 부채(`top-jak-v1.webp`). 카드가 띠 전체에 퍼져 있어 가운데에 맞춰 덮는다.
 * PC 양옆: 왼쪽 에이스 넷(`side-aces-v1.webp`), 오른쪽 킹 넷(`side-kings-v1.webp`). (171) 의 SVG 는 파일만 남는다.
 * 준 것은 화면 캡처라 아래에 사이트 화면 한 줄이 붙어 있었다 — 그림 부분만 잘라 썼다.
 * 가로로 긴 그림이라 칸 폭에 맞추면 납작한 띠가 된다 — 크게 키워 <b>가운데 카드(A♠·K♠)가 칸 한가운데</b>에 오게 하고,
 * 네모 가장자리는 둥근 가림막으로 흐린다((154) 와 같은 방법). 에이스 그림 폭 3.6칸·킹 2.4칸.
 */
.hero-bg-calendar { background-image: url('../img/bg/top-jak-v1.webp'); background-size: cover; background-position: center 45%; }
@media (min-width: 641px) {
    .hero-bg-calendar { background-image: url('../img/bg/top-jak-v1.webp'); background-size: cover; background-position: center 40%; }
}
@media (min-width: 1480px) {
    body::after {
        background:
            url('../img/bg/side-aces-v1.webp') left calc(var(--hg-g) * -1.3) center / calc(var(--hg-g) * 3.6) auto no-repeat,
            url('../img/bg/side-kings-v1.webp') right calc(var(--hg-g) * -0.7) center / calc(var(--hg-g) * 2.4) auto no-repeat;
        -webkit-mask-image:
            radial-gradient(ellipse calc(var(--hg-g) * .56) calc(var(--hg-g) * .41) at calc(var(--hg-g) / 2) 50%, #000 55%, transparent 100%),
            radial-gradient(ellipse calc(var(--hg-g) * .56) calc(var(--hg-g) * .46) at calc(100% - var(--hg-g) / 2) 50%, #000 55%, transparent 100%);
        mask-image:
            radial-gradient(ellipse calc(var(--hg-g) * .56) calc(var(--hg-g) * .41) at calc(var(--hg-g) / 2) 50%, #000 55%, transparent 100%),
            radial-gradient(ellipse calc(var(--hg-g) * .56) calc(var(--hg-g) * .46) at calc(100% - var(--hg-g) / 2) 50%, #000 55%, transparent 100%);
        opacity: .85;
    }
    :root:not([data-theme]) body::after,
    :root[data-theme="beige"] body::after { opacity: .7; }
}

/* ── (174) 대회 카드 빈 자리 없애기 ──
 * 사용자 — "필요없는 여백들 전부 지워 … 글의 줄수를 최대한 줄이고 찜·자세히·공식도 알맞게".
 * PC: 단추 셋이 <b>세로로</b> 쌓여 카드 키를 정했다(글은 석 줄인데 단추가 넉 줄 높이) → 오른쪽 위에 <b>가로 한 줄</b>.
 * 폰: 글이 그림·날짜 옆 좁은 칸(약 200px)에 갇혀 줄이 늘었다 → 접힌 카드·편 카드 모두 격자(아래 덩이).
 * 360px 에서 접힌 카드 94→64px(이름 두 줄이면 116→85px).
 */
.tournament-list .card-actions { flex-direction: row; align-self: flex-start; gap: 6px; }
.tournament-list .card-actions > * { align-self: auto; padding: 4px 10px; font-size: 13.5px; line-height: 1.5; }
.tournament-list .card { padding: 11px 13px; gap: 12px; margin-bottom: 6px; }
.tournament-list .card-note { margin-top: 3px; line-height: 1.55; }
.tournament-list .card-title { margin-bottom: 2px; }

@media (max-width: 640px) {
    /*
     * 폰은 접힌 카드도 격자 — 이름이 날짜 옆 좁은 칸에 갇혀 '제8회 THE / HOLDEM / MASTERS' 석 줄이 되던 것.
     *   접힘: [그림][이름 — 폭 전체     ][⌄]
     *         [그림][진행 중 · 8.21~10.05][⌄]
     *   폄:   [그림][이름·딱지           ][⌃]
     *         [그림][진행 중  ][찜 자세히 공식]
     *         [장소 · 상금 — 카드 폭 전체    ]
     *         [안내 — 카드 폭 전체           ]
     * LIVE 딱지는 폰에서 뺀다 — 바로 밑 '진행 중' 과 같은 말이고, 편 카드에서 제 줄 하나를 더 먹었다.
     */
    .tournament-list .card,
    .tournament-list .card.open {
        display: grid;
        grid-template-columns: 42px auto minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb title title arrow"
            "thumb date  date  arrow";
        gap: 2px 10px;
        align-items: center;
        padding: 9px 11px;
    }
    .tournament-list .card .card-body { display: contents; }
    .tournament-list .card .card-thumb { grid-area: thumb; align-self: center; }
    .tournament-list .card .card-title { grid-area: title; margin: 0; line-height: 1.3; }
    .tournament-list .card .card-arrow { grid-area: arrow; }
    .tournament-list .card .card-date { grid-area: date; display: flex; align-items: baseline; gap: 6px; width: auto; min-width: 0; }
    .tournament-list .card .card-date .d-day { font-size: 14px; }
    .tournament-list .card .card-date .date-text { margin: 0; white-space: nowrap; font-size: 12.5px; }
    .tournament-list .card .card-title .tag-live { display: none; }

    .tournament-list .card.open {
        grid-template-areas:
            "thumb title title arrow"
            "thumb date  act   act"
            "meta  meta  meta  meta"
            "note  note  note  note";
        gap: 5px 10px;
    }
    .tournament-list .card.open .card-thumb { align-self: start; }
    .tournament-list .card.open .card-arrow { align-self: start; margin-top: 6px; }
    .tournament-list .card.open .card-date { flex-direction: column; gap: 0; }
    .tournament-list .card.open .card-actions { grid-area: act; order: 0; flex: none; margin: 0; justify-content: flex-end; gap: 5px; }
    .tournament-list .card.open .card-actions > * { padding: 3px 8px; font-size: 13px; }
    .tournament-list .card.open .card-meta { grid-area: meta; font-size: 14px; column-gap: 6px; row-gap: 0; }
    .tournament-list .card.open .card-note { grid-area: note; margin: 0; font-size: 13.5px; line-height: 1.5; }
}
/*
 * 태블릿(641~1000px) — 단추 줄(약 200px)과 날짜 칸이 한 줄을 나눠 먹어 글 칸이 260~315px 로 좁아졌다(카드 150~216px).
 * 폰의 편 카드와 같은 격자로 — 이름이 폭 전체, 날짜 옆에 단추, 장소·안내는 카드 폭 전체.
 */
@media (min-width: 641px) and (max-width: 1000px) {
    .tournament-list .card {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas:
            "thumb title title"
            "thumb date  act"
            "meta  meta  meta"
            "note  note  note";
        gap: 4px 12px;
        align-items: center;
    }
    .tournament-list .card .card-body { display: contents; }
    .tournament-list .card .card-thumb { grid-area: thumb; }
    .tournament-list .card .card-title { grid-area: title; margin: 0; }
    .tournament-list .card .card-date { grid-area: date; display: flex; align-items: baseline; gap: 8px; width: auto; text-align: left; padding: 0; }
    .tournament-list .card .card-date .date-text { margin: 0; white-space: nowrap; }
    .tournament-list .card .card-actions { grid-area: act; justify-self: end; align-self: center; margin: 0; }
    .tournament-list .card .card-meta { grid-area: meta; }
    .tournament-list .card .card-note { grid-area: note; margin: 0; }
}

/* ── (175) 위 띠 오른쪽 카드 8 → Q, PC 양옆은 에이스 넷·킹 넷이 <b>다 보이게</b> ──
 * 사용자 — "8이 아니라 q로", "a포카드, k포카드 전부 보이게".
 * 위 띠: 원래 그림의 '8' 을 지우고(주변 색으로 메움) 같은 금색 세리프 'Q' 를 올렸다 → `top-jakq-v2.webp`.
 * 양옆: 카드 넉 장과 칩까지 들어가게 잘라 가장자리를 그림 자체에서 투명하게 흐렸다(`side-*-v2.webp`, 알파 있는 webp).
 *   그래서 CSS 가림막이 필요 없다. 그림 폭 = 칸 폭의 94%, 칸 한가운데. 가로로 긴 그림이라 키는 칸 폭의 약 30~40%.
 */
.hero-bg-calendar { background-image: url('../img/bg/top-jakq-v2.webp'); }
@media (min-width: 641px) {
    .hero-bg-calendar { background-image: url('../img/bg/top-jakq-v2.webp'); }
}
@media (min-width: 1480px) {
    body::after {
        --hg-w: calc(var(--hg-g) * .94);
        background:
            url('../img/bg/side-aces-v2.webp') left calc(var(--hg-g) * .03) top calc(50% + 30px) / var(--hg-w) auto no-repeat,
            url('../img/bg/side-kings-v2.webp') right calc(var(--hg-g) * .03) top calc(50% + 30px) / var(--hg-w) auto no-repeat;
        -webkit-mask-image: none;
        mask-image: none;
        opacity: .9;
    }
    :root:not([data-theme]) body::after,
    :root[data-theme="beige"] body::after { opacity: .8; }
}

/* ── (176) PC 양옆 그림을 크게 — 위 띠처럼 ──
 * 사용자 — "크게 보이게해봐 상단같은 느낌으로". (175) 는 넉 장을 칸 폭에 다 넣느라 키가 100~150px 였다.
 * 그림 키를 칸 폭의 62%(1920 화면에서 약 220px)로 올리고, 카드 무리 가운데를 칸 가운데에 맞춘다.
 * 위 띠처럼 바깥 카드는 조금 잘린다 — 바깥쪽은 화면 끝에서, 안쪽은 본문 앞에서 흐려진다(가로 가림막).
 *   에이스: 그림 폭 2.03칸, 카드 무리 가운데가 그림의 49% · 킹: 1.46칸, 49%
 */
@media (min-width: 1480px) {
    body::after {
        background:
            url('../img/bg/side-aces-v2.webp') left calc(var(--hg-g) * -0.495) top calc(50% + 30px) / auto calc(var(--hg-g) * .62) no-repeat,
            url('../img/bg/side-kings-v2.webp') right calc(var(--hg-g) * -0.245) top calc(50% + 30px) / auto calc(var(--hg-g) * .62) no-repeat;
        -webkit-mask-image:
            linear-gradient(to right, #000 0, #000 calc(var(--hg-g) * .88), transparent calc(var(--hg-g) * 1.02)),
            linear-gradient(to left, #000 0, #000 calc(var(--hg-g) * .88), transparent calc(var(--hg-g) * 1.02));
        mask-image:
            linear-gradient(to right, #000 0, #000 calc(var(--hg-g) * .88), transparent calc(var(--hg-g) * 1.02)),
            linear-gradient(to left, #000 0, #000 calc(var(--hg-g) * .88), transparent calc(var(--hg-g) * 1.02));
    }
}

/* ── (177) PC 양옆 — 포켓 A · 포켓 K 두 장씩, 잘리지 않게 ──
 * 사용자 — "다 짤리면서 나오네 그냥 pocket a, k 로 보이게 … 둘 다 잘 보이게".
 * 넉 장 그림에서 두 장(A♠A♣ · K♠K♣)과 칩만 잘라 거의 네모난 그림으로 만들었다(`pocket-*-v3.webp`, 가장자리 알파로 흐림).
 * 칸 폭의 90%, 칸 한가운데 — 칸 안에 통째로 들어가므로 가림막이 필요 없다.
 */
@media (min-width: 1480px) {
    body::after {
        background:
            url('../img/bg/pocket-aces-v3.webp') left calc(var(--hg-g) * .05) top calc(50% + 30px) / calc(var(--hg-g) * .9) auto no-repeat,
            url('../img/bg/pocket-kings-v3.webp') right calc(var(--hg-g) * .05) top calc(50% + 30px) / calc(var(--hg-g) * .9) auto no-repeat;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ── (178) PC 양옆 — 딱 두 장: A♥A♦ · K♥K♦ ──
 * 사용자 — "딱 a 두 장 k 두 장 이렇게만, 하트 다이아 두 장으로". 넉 장 그림의 왼쪽 두 장(하트·다이아)만 잘랐다 — 칩·스페이드·클럽 없음.
 * 원본에서 다이아 오른쪽 끝은 스페이드 밑에 깔려 있어 그 앞에서 자르고 알파로 흐렸다(`pocket-ahad-v4` 213×232 · `pocket-khkd-v4` 257×398).
 * 두 그림 모두 키 = 칸 폭의 90%, 칸 가운데(에이스 폭 0.826칸 · 킹 0.581칸).
 */
@media (min-width: 1480px) {
    body::after {
        background:
            url('../img/bg/pocket-ahad-v4.webp') left calc(var(--hg-g) * .087) top calc(50% + 30px) / auto calc(var(--hg-g) * .9) no-repeat,
            url('../img/bg/pocket-khkd-v4.webp') right calc(var(--hg-g) * .21) top calc(50% + 30px) / auto calc(var(--hg-g) * .9) no-repeat;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ── (179) 사용자가 새로 준 그림 셋 — 위 띠 10·J·A·K·Q, 왼쪽 A♥A♦, 오른쪽 K♣K♠ ──
 * 위 띠는 화면 캡처라 아래 사이트 한 줄을 잘라 냈다(`top-cards-v3.webp`).
 * 양옆은 세로 그림(572×1024)이라 칸에 그대로 맞는다 — 칸 폭 90%, 세로가 모자라면 화면 높이에 맞춤, 칸 가운데.
 * 가장자리는 그림 알파로 흐렸다(`pocket-aa-v5` · `pocket-kk-v5`).
 */
.hero-bg-calendar { background-image: url('../img/bg/top-cards-v3.webp'); }
@media (min-width: 641px) {
    .hero-bg-calendar { background-image: url('../img/bg/top-cards-v3.webp'); }
}
@media (min-width: 1480px) {
    body::after {
        --hg-w: min(calc(var(--hg-g) * .9), calc((100vh - 130px) * 572 / 1024));
        background:
            url('../img/bg/pocket-aa-v5.webp') left calc((var(--hg-g) - var(--hg-w)) / 2) top calc(50% + 30px) / var(--hg-w) auto no-repeat,
            url('../img/bg/pocket-kk-v5.webp') right calc((var(--hg-g) - var(--hg-w)) / 2) top calc(50% + 30px) / var(--hg-w) auto no-repeat;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ── (180) 써틴 폰 — 상대 칸·바닥을 낮추고 내 패를 키워, 처음부터·포기까지 한 화면에 ──
 * 사용자 — "플레이어 3명 세로칸 좀 줄이고 바닥도 좀 줄이고 내 패를 좀 더 크게 … 처음부터 포기 칸을 한 눈에".
 * 360×700 에서 판이 578px(상대 칸 140 · 바닥 170)이라 처음부터·포기가 아래 띠 밑(732px)에 있었다.
 *   상대 칸: [얼굴][이름] / [장수][방금 낸 것] 두 줄(140 → 약 60px). 장수를 이름 옆에 두면 이름이 '탐…' 으로 잘렸다
 *   바닥: 170 → 112px
 *   내 패: 52 → 64px(360) · 56 → 68px(그 위). 겹침은 big2-ui.js 부채맞추기() 가 칸 폭에 맞춰 다시 잰다
 */
@media (max-width: 640px) {
    .b2-seat {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        grid-template-areas:
            "face  name"
            "count play";
        align-items: center;
        gap: 3px 4px;
        padding: 5px 5px;
        min-height: 0;
        text-align: left;
    }
    .b2-seat .b2-who { display: contents; }
    .b2-seat .b2-face { grid-area: face; width: 26px; height: 26px; border-width: 1.5px; }
    .b2-seat .b2-who b { grid-area: name; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .b2-seat .b2-count { grid-area: count; justify-self: center; font-size: 12px; padding: 0 6px; }
    .b2-seat > em, .b2-seat > .b2-mini { grid-area: play; justify-self: start; margin: 0; min-height: 0; }
    .b2-seat .b2-mini { --cf-w: 18px; gap: 0; flex-wrap: nowrap; }
    .b2-seat .b2-mini > * + * { margin-left: -8px; }   /* 다섯 장(18 + 4×10 = 58px)도 칸 안에 */
    .b2-seat > em { font-size: 12.5px; line-height: 1.3; }

    .b2-table { min-height: 112px; padding: 14px 8px 8px; gap: 6px; }
    .b2-say { font-size: 14px; line-height: 1.45; }
    .b2-played { --cf-w: 46px; }

    .b2-mine-head { margin: 6px 0 2px; }
    .b2-mine { --cf-w: 68px; padding: 14px 0 8px; }
    #b2-play .tt-acts { margin-top: 2px; }
    .b2-quit { margin-top: 6px; }
}
@media (max-width: 380px) {
    .b2-mine { --cf-w: 64px; }
    .b2-played { --cf-w: 42px; }
}

/* ── (181) 차이니즈 포커 폰 — 써틴(180)처럼 판·버튼을 한 화면에 ──
 * 360×700 에서 판이 593px(줄 셋 342px)이라 확인·처음부터·포기가 아래 띠 밑(855px)에 있었다.
 *   · 판이 도는 동안 위 설명 한 단락(약 60px)을 감춘다 — 고르는 화면에는 그대로 있다
 *   · 줄 이름(앞·가운데·뒤)을 <b>왼쪽 칸</b>으로 — 줄마다 머리 한 줄이 사라진다. 족보는 이름 밑에 작게
 *   · 줄 카드 34 → 42px, 내 패 40 → 50px(360). 줄 셋 342 → 약 230px
 *   · '카드를 누르면 고른 줄에 들어갑니다' 는 폰에서 뺀다(두 줄로 꺾였다) — 줄이 빨갛게 켜진 것으로 보인다
 */
@media (max-width: 640px) {
    body:has(#tt-play:not([hidden])) .tt-what { display: none; }
    .tt-rows { gap: 4px; }
    .tt-row {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        align-items: center;
        gap: 6px;
        padding: 5px 8px;
    }
    .tt-row-head { flex-direction: column; align-items: flex-start; gap: 0; margin: 0; font-size: 14px; line-height: 1.25; }
    .tt-row-head .tt-cap { font-size: 12px; }
    .tt-row-head .tt-rank { font-size: 11.5px; line-height: 1.2; white-space: normal; word-break: keep-all; }
    .tt-slots { --cf-w: 42px; gap: 4px; flex-wrap: nowrap; }
    .tt-hand-head { margin: 5px 0 0; }
    .tt-hint { display: none; }
    .tt-hand { --cf-w: 50px; }
    #tt-play .tt-acts { margin-top: 2px; }
    #tt-play .b2-quit { margin-top: 6px; }
}
@media (max-width: 380px) {
    .tt-slots { --cf-w: 42px; }
    .tt-hand { --cf-w: 50px; }
}

/* ── (182) 헤즈업 폰 — 경기장 그림이 보이게 ──
 * 사용자 — "pc에선 어느 정도 보이는데 모바일은 전혀 구분이 안 가네".
 * 폰은 그림을 <b>폭 100%</b>로 깔아 360px 폭에 373px 키 — 판 위쪽 한 뼘에만 작게 깔리고, 나머지는 바탕색이었다.
 * 폰에서는 띠 <b>높이에 맞춰</b> 크게 깐다(가운데 기준, 양옆은 잘림) — 관중·간판이 판 둘레 빈 곳에 보인다.
 * 그림 아래쪽은 원래 바탕색으로 녹아 있어 고르개 칸은 그대로 어둡다.
 */
@media (max-width: 640px) {
    .hu-arena {
        background-image: url('../img/bg/arena.webp');
        background-size: auto max(100%, 700px);
        background-position: center top;
    }
    .hu-arena #hu-table { background: rgba(12, 10, 11, .12); }
}

/* ── (183) 매장 화면 — 대회 결과 올리기 ── */
.vr-form { display: flex; flex-direction: column; gap: 8px; }
.vr-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 6px; }
.vr-top label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--label); min-width: 0; }
.vr-top label small { font-size: 11.5px; color: var(--muted); }
.vr-top select, .vr-top input, .vr-other, .vr-row input {
    width: 100%; min-width: 0; font: inherit; font-size: 16px;
    padding: 7px 8px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface-2); color: var(--text);
}
.vr-head, .vr-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 118px); gap: 6px; align-items: center; }
.vr-head { font-size: 12.5px; color: var(--muted); padding: 0 2px; }
.vr-head span:last-child { text-align: right; }
.vr-rows { display: flex; flex-direction: column; gap: 4px; }
.vr-rank { text-align: center; font-weight: 800; color: var(--gold, var(--accent)); font-size: 15px; }
.vr-row input { padding: 6px 8px; }
.vr-row .vr-prize { text-align: right; font-variant-numeric: tabular-nums; }
.vr-acts { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
.vr-acts .cta-btn { flex: 1; }
.vr-say { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--ok); }
.vr-say.bad { color: var(--accent); }
.vr-say:empty { display: none; }
.vr-preview { border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 12px; }
.vr-preview-title { margin: 0 0 6px; font-weight: 700; }
.vr-preview-list { margin: 0 0 10px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.vr-preview-list span { color: var(--label); margin-left: 4px; font-variant-numeric: tabular-nums; }
#vr-done-box { margin-top: 10px; }
.vr-done-item { border-top: 1px solid var(--border); padding: 8px 0; }
.vr-done-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.vr-done-head span { color: var(--muted); font-size: 13px; }
.vr-done-head .vr-del { margin-left: auto; }
.vr-done-list { margin: 4px 0 0; font-size: 13.5px; color: var(--text-sub); line-height: 1.55; }
@media (max-width: 400px) {
    .vr-top { grid-template-columns: 1fr 1fr; }
    .vr-top label:first-child { grid-column: 1 / -1; }
    .vr-head, .vr-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 104px); }
}

/* ── (184) 매장 — 홀덤고 예약 켜고 끄기 스위치 ── */
.vn-booking { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; }
.vn-booking-label { font-weight: 700; font-size: 15px; }
.vn-switch {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px 4px 4px;
    background: var(--surface-2); color: var(--muted); font: inherit; font-size: 14px;
}
.vn-switch i {
    position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong);
    transition: background .15s;
}
.vn-switch i::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; transition: transform .15s;
}
.vn-switch.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.vn-switch.on i { background: var(--ok); }
.vn-switch.on i::after { transform: translateX(16px); }
.vn-switch b { font-weight: 700; min-width: 3.2em; text-align: left; }
.vn-switch:disabled { opacity: .6; }

/* ── (185) OFC — 상대 판(앞면으로 보인다) · 이번에 놓은 카드 · 판타지랜드 ── */
.of-opp { border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; margin-bottom: 6px; background: var(--surface-2); }
.of-opp-head { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; margin-bottom: 3px; }
.of-opp-head span { color: var(--gold, var(--accent)); font-size: 12.5px; }
.of-opp-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 2px 0; }
.of-opp-row > span { font-size: 12.5px; color: var(--muted); }
.of-opp-row em { font-style: normal; font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; }
.of-opp-cards { display: flex; gap: 3px; --cf-w: 26px; }
.of-opp .cf.of-new { box-shadow: 0 0 0 2px var(--gold, #d8a943); }
.cf.empty.of-back {
    background: repeating-linear-gradient(45deg, #7d1b2a 0 4px, #5a1320 4px 8px);
    border-color: rgba(255, 255, 255, .25);
}
.of-status { margin: 4px 0 6px; font-size: 14px; font-weight: 700; color: var(--text-sub); }
.of-status:empty { display: none; }
.tt-slots .cf.of-fresh { box-shadow: 0 0 0 2px var(--accent); cursor: pointer; }
.tt-slots .cf.of-locked { cursor: default; }
.of-fl { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }
.of-fl-next { color: var(--gold, var(--accent)); }
@media (max-width: 640px) {
    .of-opp { padding: 5px 7px; }
    .of-opp-row { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 1px 0; }
    .of-opp-cards { --cf-w: 24px; gap: 2px; }
    .of-status { margin: 2px 0 4px; font-size: 13.5px; }
    .tt-hint { display: none; }
}
/* 빈 카드 자리에 전역 `.empty`(목록이 비었을 때 글)의 위아래 30px 여백이 붙어 칸이 두 배로 컸다 — 카드 자리는 여백 0 */
.cf.empty { padding: 0; }
/* (185) OFC 폰 — 판을 머리말 바로 밑으로 올렸을 때(scrollIntoView) 머리말에 안 가리게, 손패·상대 판을 한 단 줄인다 */
#tt-play { scroll-margin-top: 54px; }
@media (max-width: 640px) {
    #tt-play:has(#of-opp) .tt-hand { padding: 4px 0 2px; }
    .of-opp-cards { --cf-w: 22px; }
    .of-opp-head { margin-bottom: 1px; }
}
.of-opp-head b { white-space: nowrap; }

/* ── (186) 파인애플 OFC — 상대 둘을 나란히 · 버릴 카드 · 버린 카드 ── */
.of-opps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.of-opps .of-opp { margin: 0; padding: 5px 6px; min-width: 0; }
.of-opps .of-opp-head { display: flex; align-items: center; gap: 5px; font-size: 13px; margin-bottom: 2px; min-width: 0; }
.of-opps .of-opp-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-face { width: 22px; height: 22px; border-width: 1.5px; flex: none; }
.of-fl-tag { font-size: 11.5px; color: var(--gold, var(--accent)); font-weight: 700; white-space: nowrap; }
.of-opps .of-opp-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 1px 0; min-width: 0; }
.of-opps .of-opp-row em { font-style: normal; font-size: 11px; color: var(--accent); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.of-opps .of-opp-cards { --cf-w: 22px; gap: 2px; flex: none; }
.tt-hand .cf.of-discard { opacity: .45; filter: grayscale(.6); }
.of-burned { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-vs { font-size: 14px; font-weight: 800; margin-left: 4px; }
.of-vs-why { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.tt-side h3 .of-face { vertical-align: -5px; margin-right: 3px; }
@media (max-width: 400px) {
    .of-opps .of-opp-cards { --cf-w: 20px; gap: 1px; }
    .of-opps .of-opp-row em { display: none; }   /* 족보 이름은 결과 화면에서 본다 — 160px 칸에 카드 다섯과 같이 못 들어간다 */
}

/* ── (188) 훌라 — 등록된 카드(누구 것인지 얼굴로) · 더미와 버린 카드 · 땡큐 ── */
.hl-table { min-height: 0; gap: 8px; }
.hl-melds { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; width: 100%; }
.hl-meld {
    display: inline-flex; align-items: center; gap: 3px; padding: 3px 4px;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; background: rgba(0, 0, 0, .18);
    font: inherit; cursor: default;
}
.hl-meld.can { border-color: var(--gold, #d8a943); box-shadow: 0 0 0 2px var(--gold, #d8a943); cursor: pointer; }
.hl-meld-cards { display: flex; gap: 1px; --cf-w: 24px; }
.b2-face.hl-owner { width: 18px; height: 18px; border-width: 1px; }
.hl-piles { display: flex; gap: 16px; align-items: flex-end; justify-content: center; }
.hl-pile { display: flex; flex-direction: column; align-items: center; gap: 2px; --cf-w: 38px; }
.hl-pile em { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .8); }
.cf.empty.hl-back { background: repeating-linear-gradient(45deg, #7d1b2a 0 4px, #5a1320 4px 8px); border: 1px solid rgba(255, 255, 255, .3); }
.hl-thanks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; width: 100%;
    padding: 6px; border-radius: 8px; background: rgba(0, 0, 0, .35); color: #fff; font-size: 14px; }
.hl-thanks .btn-main { width: auto; padding: 6px 16px; }
.hl-did { font-style: normal; font-size: 12.5px; color: var(--muted); }
.hl-did.reg::before { content: '등록 · '; color: var(--ok); }
.hl-acts .chip:disabled, .hl-acts .btn-main:disabled { opacity: .45; }
.b2-restline .b2-face { width: 22px; height: 22px; }
@media (max-width: 640px) {
    .hl-meld-cards { --cf-w: 20px; }
    .hl-pile { --cf-w: 34px; }
    .hl-table { padding: 10px 6px 8px; }
}
#hl-play { scroll-margin-top: 54px; }   /* 판을 머리말 밑으로 올릴 때 머리말에 안 가리게(OFC 185 와 같다) */
/* (188) 게임 바로가기가 넷(헤즈업 · 써틴 · OFC · 훌라) — 한 줄 넷으로. 셋 칸이면 훌라만 둘째 줄에 혼자 떨어졌다 */
.st-cards.st-games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-games .st-card h3 { word-break: keep-all; }

/* ── (189) 바닥을 크게 — 상대가 등록·놓은 카드를 읽을 수 있게 ──
 * 사용자 — "바닥이 너무 작아 훌라나 ofc 는 바닥이 커야 상대방 등록카드를 보지".
 * 훌라: 등록 카드 20 → 32px(폰), 주인 얼굴 22px. 대신 손패를 64 → 54px, 더미·버린 카드를 34 → 30px 로 한 단 줄여 한 화면을 지킨다.
 * OFC: 상대 판 카드 22 → 28px(폰 360 은 27px). 족보 이름은 줄 끝 대신 카드 밑 한 줄로 — 카드 다섯이 칸 폭을 다 쓴다.
 */
.hl-meld-cards { --cf-w: 36px; }
.b2-face.hl-owner { width: 22px; height: 22px; }
.hl-meld { padding: 3px 5px; gap: 4px; }
@media (max-width: 640px) {
    .hl-meld-cards { --cf-w: 32px; gap: 1px; }
    .hl-melds { gap: 4px; }
    .hl-pile { --cf-w: 30px; }
    .hl-piles { gap: 12px; }
    #hl-mine { --cf-w: 54px; padding: 12px 0 6px; }
    .hl-table { gap: 6px; }
}
@media (max-width: 380px) {
    .hl-meld-cards { --cf-w: 30px; }
    #hl-mine { --cf-w: 52px; }
}

.of-opps .of-opp-cards { --cf-w: 28px; }
.of-opps .of-opp-row { flex-wrap: wrap; }
@media (max-width: 400px) {
    .of-opps .of-opp-cards { --cf-w: 27px; gap: 1px; }
    .of-opps .of-opp { padding: 4px; }
}
@media (max-width: 640px) {
    /* 내 판·손패를 한 단 줄여 늘어난 상대 판 높이를 메운다 */
    .tt-slots { --cf-w: 40px; }
    .tt-row { padding-top: 4px; padding-bottom: 4px; }
    #tt-play:has(#of-opps) .tt-hand { --cf-w: 46px; padding: 2px 0 0; }
}
/*
 * (189) 훌라 등록 — 한 묶음 안의 카드를 겹친다(왼쪽 위 숫자·무늬만 보이면 읽힌다). 4장 묶음이 138 → 약 100px 이 되어
 * 폰 한 줄에 셋씩 들어간다(7묶음 25장이 다섯 줄 268px → 세 줄). 더미·버린 카드·알림 글은 한 줄로.
 */
.hl-meld-cards { gap: 0; }
.hl-meld-cards .cf + .cf { margin-left: calc(var(--cf-w) * -0.46); }
.hl-meld-cards .cf { box-shadow: -1px 0 2px rgba(0, 0, 0, .35); }
.hl-piles { display: flex; align-items: center; gap: 10px; justify-content: flex-start; width: 100%; }
.hl-piles .b2-say { flex: 1 1 0; min-width: 0; text-align: left; margin: 0; }
.hl-pile em { font-size: 11.5px; }
@media (max-width: 640px) {
    .b2-face.hl-owner { width: 18px; height: 18px; }
    .hl-meld { padding: 2px 4px; gap: 3px; }
    .hl-pile { --cf-w: 28px; }
}

/*
 * (190) 훌라 폰 — 판이 화면 아래까지 차게, 남는 높이는 바닥(초록 판)이 가져간다.
 * 사용자 — "이만큼 안 나와도 되니까 줄인 만큼 바닥을 키워봐"(판 밑으로 설명 접기 두 줄이 보이던 빈 자리).
 * 판 높이 = 화면 − 머리말 자리(54) − 아래 띠(54) − 여유 6. 바닥이 flex 로 남는 것을 다 받고, 등록 카드는 32 → 38px.
 */
@media (max-width: 640px) {
    #hl-play:not([hidden]) { display: flex; flex-direction: column; min-height: calc(100svh - 114px); }
    #hl-play .hl-table { flex: 1 1 auto; justify-content: center; }
    #hl-play .hl-melds { flex: 1 1 auto; align-content: center; align-items: center; }
    .hl-meld-cards { --cf-w: 38px; }
    .b2-face.hl-owner { width: 20px; height: 20px; }
    .hl-pile { --cf-w: 32px; }
}
@media (max-width: 380px) {
    .hl-meld-cards { --cf-w: 36px; }
}
@media (max-width: 640px) {
    .hl-melds.many .hl-meld-cards { --cf-w: 31px; }
}
@media (max-width: 640px) {
    #hl-play:has(.hl-melds.many) #hl-mine { --cf-w: 48px; padding: 8px 0 4px; }
}

/* ── (191) 훌라·OFC — 바닥 카드 크기를 화면 남는 높이에 맞춘다(hula-ui.js · thirteen-ui.js 의 바닥맞추기) ── */
@media (max-width: 640px) {
    #hl-melds .hl-meld-cards { --cf-w: var(--meld-w, 36px); }
    /* OFC 도 판이 화면 아래까지 — 훌라(190)와 같게 */
    #tt-play:has(#of-opps):not([hidden]) { display: flex; flex-direction: column; min-height: calc(100svh - 114px); }
    #tt-play:has(#of-opps) #of-opps { flex: 1 1 auto; align-items: center; }
    #of-opps .of-opp-cards { --cf-w: var(--opp-w, 27px); }
    #of-opps .of-opp-row em { display: none; }
    #of-opps.lap .of-opp-cards { gap: 0; }
    #of-opps.lap .of-opp-cards .cf + .cf { margin-left: calc(var(--cf-w) * -0.3); }
    #of-opps.lap .of-opp-cards .cf { box-shadow: -1px 0 2px rgba(0, 0, 0, .35); }
    #of-opps .of-opp-row { justify-content: center; }
}

/* ── (192) 훌라 — 버린 카드를 크게(사용자 "버린카드를 크게 보여줘야돼"), 내 등록에는 '나' 딱지 ── */
#hl-discard { --cf-w: 50px; }
.hl-pile:first-child { --cf-w: 30px; }
.hl-me { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; }
@media (max-width: 640px) {
    #hl-discard { --cf-w: 46px; }
}

/* (193) 계정 — 로그인 밑 '회원가입' 큰 단추 */
.ac-join-ask { margin: 14px 0 6px; text-align: center; font-size: 14.5px; color: var(--text-sub); }
.ac-join-go { display: block; width: 100%; font-weight: 700; padding: 11px; border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: var(--radius); font-size: 16px; cursor: pointer; font-family: inherit; }
#ac-guest { scroll-margin-top: 60px; }

/* (196) 대회 도구 줄이 넷(ICM 계산기 · 오픈 차트 · 푸시폴드 · 승률 계산기) — 폰에서 한 줄에. 칸을 고르게 나누고 여백·글자를 한 단 줄인다 */
@media (max-width: 640px) {
    .chart-tabs { flex-wrap: nowrap; gap: 4px; }
    .chart-tabs .chart-tab { flex: 1 1 auto; text-align: center; white-space: nowrap; padding: 5px 6px; font-size: 14px; }
}
@media (max-width: 380px) {
    .chart-tabs .chart-tab { padding: 5px 4px; font-size: 13.5px; letter-spacing: -0.02em; }
}

/* ── (198) 승률 계산기 — 상대 여럿(멀티웨이) · 칸과 카드판 글자를 크게 ── */
.vill-groups { display: contents; }
.vill-add { grid-column: 1 / -1; justify-self: start; }
.vill-del {
    margin-left: auto; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
    border-radius: 999px; width: 26px; height: 26px; font-size: 13px; line-height: 1; cursor: pointer; font-family: inherit;
}
.vill-group .slot-label { width: 100%; }
.rbar { flex-wrap: wrap; row-gap: 2px; }
.rname { width: 48px; white-space: nowrap; }
.rbar.me .rname { color: var(--text); }
.rsub { flex: 1 1 100%; padding-left: 58px; font-size: 12.5px; color: var(--muted); }
.slot { width: 48px; height: 66px; }
.slot.filled b { font-size: 21px; }
.slot.filled i { font-size: 19px; }
.dcard { aspect-ratio: 1 / 1.45; gap: 1px; }
.dcard b { font-size: 18px; letter-spacing: -0.04em; }
.dcard i { font-size: 17px; }
@media (max-width: 620px) {
    .slots { gap: 10px; margin-bottom: 10px; }
    .slot { width: 50px; height: 68px; }
    .slot.filled b { font-size: 21px; }
    .slot.filled i { font-size: 19px; }
    .slot-row { gap: 6px; }
    .deck-row { gap: 2px; }
    .deck { gap: 3px; }
    .dcard { aspect-ratio: 1 / 1.6; border-radius: 3px; }
    .dcard b { font-size: 15.5px; letter-spacing: -0.06em; }
    .dcard i { font-size: 15px; }
    .rval { width: 54px; }
}
@media (max-width: 620px) {
    /* 사람마다 두 칸이라 폰에서도 두 사람씩 한 줄 — 상대가 늘어도 세로가 덜 길어진다 */
    .calc-panel .slots { grid-template-columns: 1fr 1fr; column-gap: 12px; }
    .calc-panel .slot-label { font-size: 13.5px; }
    .calc-panel .slot-label em { font-size: 11.5px; }
}
.result-link:empty { display: none; }   /* (198) 여럿이 낀 판은 팟 오즈 줄을 안 적는다 — 빈 상자가 남지 않게 */

/* (199) 고객센터 로그인 안내 — 굵은 한 줄 + 흐린 두 줄 */
.sp-lead { margin: 0 0 6px; font-size: 16.5px; }
.sp-sub { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--text-sub); white-space: nowrap; }
@media (max-width: 380px) { .sp-sub { font-size: 14px; letter-spacing: -0.02em; } }

/* (200) 관리자 숫자 칸 = 그 덩이로 가는 링크 */
a.pay-stat { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s; }
a.pay-stat:hover, a.pay-stat:focus-visible { border-color: var(--accent); }
.ad-sec { scroll-margin-top: 70px; }
#ad-m-n .ad-all { margin-left: 6px; padding: 2px 10px; font-size: 13px; }

/* (201) 관리자 — 선수 랭킹 직접 넣기는 접어 둔다 */
.ad-rank-fold { margin: 4px 0 12px; }
.ad-rank-fold > summary { list-style: none; display: inline-flex; cursor: pointer; }
.ad-rank-fold > summary::-webkit-details-marker { display: none; }
.ad-rank-fold[open] > summary { margin-bottom: 10px; }

/* (202) 관리자 — 선수 랭킹을 판별로 접고, 줄마다 고치기 */
.ad-pan { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-3); }
.ad-pan > summary { list-style: none; cursor: pointer; padding: 10px 12px; }
.ad-pan > summary::-webkit-details-marker { display: none; }
.ad-pan > summary b { display: block; }
.ad-pan > summary em { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.ad-pan[open] > summary { border-bottom: 1px solid var(--border); }
.ad-pan .ad-rank { padding: 8px 12px; border-bottom: 1px solid var(--border); gap: 8px; }
.ad-pan .ad-rank-pos { width: 2.6em; flex: none; }
.ad-rank-nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-pan .ad-rank .chip { padding: 4px 10px; font-size: 13.5px; }
.ad-pan-foot { padding: 8px 12px; text-align: right; }
.ad-rank.editing { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.ad-rank.editing label { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: var(--label); }
.ad-rank.editing input { font-size: 16px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; }
.ad-edit-acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.ad-edit-acts .cta-btn { flex: 1; }
.ad-rank-acts { display: flex; gap: 6px; flex: none; }
/* 폰 — 순위·닉네임·상금 한 줄, 단추는 아랫줄(닉네임이 '딥.' 으로 잘렸다) */
@media (max-width: 560px) {
    .ad-pan .ad-rank:not(.editing) { display: grid; grid-template-columns: 2.6em 1fr auto; row-gap: 6px; }
    .ad-pan .ad-rank-acts { grid-column: 1 / -1; }
    .ad-pan .ad-rank-acts .chip { flex: 1; }
}

/* (203) 선수 랭킹 — 기록이 전부 예시일 때 띠 */
.res-ex-note { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--warn); border-radius: var(--radius); background: var(--surface-3); font-size: 15px; }

/* (204) 선수 랭킹 — 닉네임 검색 · 정렬 */
.res-tools { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.res-find { flex: 1; min-width: 0; font-size: 16px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.res-sort { display: flex; gap: 6px; flex: none; }
@media (max-width: 480px) {
    .res-tools { flex-wrap: wrap; }
    .res-find { flex-basis: 100%; }
    .res-sort { flex: 1; }
    .res-sort .chip { flex: 1; justify-content: center; }
}

/* (205) 선수 랭킹 — 머리칸 정렬 단추 */
.res-th { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; color: inherit; font: inherit; white-space: nowrap; }
.res-th:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.res-arr { font-style: normal; font-size: 0.72em; opacity: 0.35; }
.res-th.on { color: var(--text); font-weight: 800; }
.res-th.on .res-arr { opacity: 1; color: var(--accent); }
.res-tools .res-find { flex-basis: 100%; }