/* 공개 팝업 — 모바일 우선. 관리 화면과 완전히 별개다. */

:root {
    --c-bg: #ffffff;
    --c-fg: #1c1e21;
    --c-muted: #6b7280;
    --c-line: #e3e6ea;
    --c-accent: #7900db;
    --c-win: #dc2626;
    --c-danger: #dc2626;
    --c-ok: #059669;
    --radius: 8px;

    /*
     * 면과 배너 — **다크모드를 위한 의미 토큰.**
     *
     * 예전에는 `var(--c-surface)`(표 머리)·`var(--c-tint-ok)`(성공 배너) 같은 밝은 값이 규칙마다
     * 직접 박혀 있었다. 그래서 다크에서 밝은 배경 위에 밝은 글씨가 얹혀 읽히지
     * 않는 자리가 생겼다. 색을 이름으로 부르면 아래 다크 블록에서 한 번에 뒤집힌다.
     */
    --c-surface: #f8f9fb;      /* 표 머리·배지 등 한 단계 들어간 면 */
    --c-tint-ok: #ecfdf5;      /* 성공 배너 배경 */
    --c-tint-warn: #fff7ed;    /* 경고 배너 배경 */
    --c-tint-error: #fef2f2;   /* 오류 배너 배경 */
    --c-tint-info: #eff6ff;    /* 안내 배너 배경 */
    /*
     * 성공·오류 **글씨**. 배경으로도 쓰이는 `--c-ok`·`--c-danger` 와 일부러
     * 나눠 두었다 — 그쪽은 흰 글씨를 얹는 버튼·배지라 진하게 하면 안 된다.
     *
     * 연한 배너 바탕에서 읽히도록 한 단계 진한 값을 쓴다. 예전에는 버튼과 같은
     * `#059669`·`#dc2626` 이었는데 대비가 3.58·4.41 로 기준(4.5)에 못 미쳤다 —
     * 화면에서 **가장 안 읽히는 글씨가 알림 띠**인 상태였다. 햇빛 아래 노트북·
     * 색약에서 특히 걸린다.
     */
    --c-on-ok: #047857;        /* 배너 5.21 : 1 · 흰 바탕 5.48 : 1 */
    --c-on-error: #b91c1c;     /* 배너 5.91 : 1 · 흰 바탕 6.47 : 1 */
    --c-on-warn: #9a3412;      /* 경고 배너 글씨 */
    --c-on-info: #1d4ed8;      /* 안내 배너 글씨 */
    --c-warn: #d97706;         /* 주의 표시(중복 소속·간격 위반) 테두리·글씨 */

    /*
     * 브라우저에게 두 테마를 다 지원한다고 알린다. 이 한 줄이 없으면
     * `<select>` · `<input type="date">` · 스크롤바가 **밝은 기본 모습으로
     * 남아** 어두운 화면에 흰 덩어리로 뜬다. CSS 로는 못 고치는 부분이다.
     */
    color-scheme: light dark;
}

* { box-sizing: border-box; }

body.popup {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR",
                 "Noto Sans JP", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden; /* 본문은 절대 가로 스크롤하지 않는다 */
}

a { color: var(--c-accent); text-decoration: none; }

/*
 * 넓은 화면에서는 가운데로 모은다.
 *
 * 모바일 기준으로 만든 화면이라 폭이 넓어지면 표와 카드가 흉하게 벌어진다.
 * 참가자는 휴대폰으로도 태블릿으로도 본다.
 *
 * 820px 은 태블릿 세로(768)보다 넉넉해 **태블릿에서는 여백이 생기지 않고**,
 * 가로(1024)부터 양옆이 비면서 읽기 좋은 폭으로 고정된다.
 *
 * 감싸는 div 를 새로 넣지 않는다 — layout/popup.php 의 마크업을 그대로 두고
 * 블록마다 폭만 준다. 머리·탭의 밑줄이 본문 폭에서 끊겨 한 칸으로 읽힌다.
 */
.preview-banner,
.popup-header,
.popup-tabs,
.popup-main,
.popup-footer {
    max-width: 820px;
    margin-inline: auto;
}

.preview-banner {
    /* 세로 여백만 0 — 가로는 위 규칙의 margin-inline:auto 를 그대로 둬야 가운데로 모인다.
       margin:0 로 한 번에 쓰면 그 auto 를 덮어써 넓은 화면에서 상자가 왼쪽에 붙는다. */
    margin-block: 0;
    padding: 8px 14px;
    background: var(--c-tint-warn);
    color: var(--c-on-warn);
    font-size: 13px;
    text-align: center;
}
/* 가대진 배너 — 소유자만 보는 비공개 미리보기(주황)와 헷갈리지 않게 파란 계열로 */
.temp-match-banner { background: var(--c-tint-info); color: var(--c-on-info); }

/* 헤더 */
.popup-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--c-line); }
.popup-title { margin: 0; font-size: 17px; font-weight: 700; }
.popup-meta { margin: 4px 0 0; color: var(--c-muted); font-size: 13px; }
.badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-muted);
    font-size: 12px;
}

/* 탭 — 가로 스크롤 */
.popup-tabs { border-bottom: 1px solid var(--c-line); }
.popup-tabs ul {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0 8px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.popup-tabs ul::-webkit-scrollbar { display: none; }
.popup-tabs a {
    display: block;
    padding: 11px 12px;
    color: var(--c-muted);
    white-space: nowrap;
    font-size: 14px;
}
.popup-tabs .is-active a {
    color: var(--c-accent);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--c-accent);
}

.popup-main { padding: 14px 16px 40px; }

/* 종목 리스트 */
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list li {
    padding: 13px 4px;
    border-bottom: 1px solid var(--c-line);
}
.event-list .count { color: var(--c-muted); font-size: 13px; margin-left: 6px; }

/* 경기 카드 */
.match-card {
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
}
.match-card .win { color: var(--c-win); font-weight: 700; }
.match-card .slot { color: var(--c-muted); font-style: italic; }

/* 넓은 표(경기시간 그리드)는 자체 스크롤 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 7px 9px; border-bottom: 1px solid var(--c-line); text-align: left; }
th { background: var(--c-surface); font-weight: 600; white-space: nowrap; }

.popup-footer {
    border-top: 1px solid var(--c-line);
    padding: 14px 16px 24px;
}
.lang-select {
    padding: 6px 8px; border: 1px solid var(--c-line); border-radius: var(--radius);
    background: var(--c-bg); color: var(--c-fg); font-size: 13px;
}
/*
 * 테마 전환 버튼 — 아이콘 + 고른 모드 이름.
 *
 * 언어 선택(.lang-select) 옆에 서므로 높이·테두리를 맞춘다. 글자 폭이 언어마다
 * 달라(‘어둡게’ vs ‘跟随系统’) 고정 폭을 주지 않는다.
 */
.theme-toggle {
    padding: 5px 10px;
    border: 1px solid var(--c-line); border-radius: var(--radius);
    background: var(--c-bg); color: var(--c-fg);
    font-size: 13px; line-height: 1.4; cursor: pointer;
    white-space: nowrap;
}
.theme-toggle:hover { border-color: var(--c-accent); }

.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;
}

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

/* ------------------------------------------------------------------ */
/* 어두운 팔레트 — 두 가지 방법으로 켜진다                              */
/* ------------------------------------------------------------------ */

/*
 * 1) 시스템이 어두울 때. 단 사용자가 **밝게 고정**했으면 빠진다.
 * 2) 사용자가 **어둡게 고정**했을 때. 시스템 설정과 무관하다.
 *
 * ⚠️ 두 블록의 내용은 **글자 그대로 같아야 한다.** 미디어 쿼리 안과 밖은 한
 *    규칙으로 합칠 수 없어 어쩔 수 없이 두 벌인데, 한쪽만 고치면 "시스템 다크"
 *    와 "수동 다크" 의 색이 갈린다. `DarkModeCssTest` 가 둘이 같은지 지킨다.
 *
 * 개별 규칙은 덮어쓰지 않는다 — 토큰만 뒤집으면 `th`·`.flash-*` 가 따라온다.
 * 예전에는 규칙마다 색을 다시 적었는데, 그러면 화면을 만들 때마다 그 목록에 한
 * 줄씩 더해야 하고 빠뜨리면 그 화면만 밝게 남았다.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-bg: #16181c;
        --c-fg: #e7e9ea;
        --c-muted: #8b949e;
        --c-line: #2a2e35;
        --c-accent: #c084fc;
        /* 위 :root 의 의미 토큰을 어두운 값으로 뒤집는다. */
        --c-surface: #1c1f25;
        --c-tint-ok: #05291f;
        --c-tint-warn: #2b1a06;
        --c-tint-error: #2c1416;
        --c-tint-info: #1e2a4a;
        --c-on-ok: #6ee7b7;
        --c-on-error: #fca5a5;
        --c-on-warn: #fdba74;
        --c-on-info: #93c5fd;
        --c-warn: #fbbf24;
    }
}

:root[data-theme="dark"] {
    /* 폼 컨트롤·스크롤바까지 함께 어두워지도록 팔레트와 한 규칙에 둔다. */
    color-scheme: dark;

    --c-bg: #16181c;
    --c-fg: #e7e9ea;
    --c-muted: #8b949e;
    --c-line: #2a2e35;
    --c-accent: #c084fc;
    /* 위 :root 의 의미 토큰을 어두운 값으로 뒤집는다. */
    --c-surface: #1c1f25;
    --c-tint-ok: #05291f;
    --c-tint-warn: #2b1a06;
    --c-tint-error: #2c1416;
    --c-tint-info: #1e2a4a;
    --c-on-ok: #6ee7b7;
    --c-on-error: #fca5a5;
    --c-on-warn: #fdba74;
    --c-on-info: #93c5fd;
    --c-warn: #fbbf24;
}

/*
 * 밝게 고정 — 팔레트는 `:root` 기본값 그대로라 `color-scheme` 만 못 박으면 된다.
 * 이게 없으면 시스템이 어두울 때 폼 컨트롤만 어둡게 남는다.
 */
:root[data-theme="light"] { color-scheme: light; }

/* ------------------------------------------------------------------ */
/* 운영자 팝업 — 코트 옆에서 한 손으로                    docs/11       */
/* ------------------------------------------------------------------ */

/*
 * 필터 줄. 관리 화면의 .filter-bar 와 달리 **가로 스크롤**이다 —
 * 모바일에서 세로로 쌓으면 목록이 화면 밖으로 밀린다.
 */
.popup-filter {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px;
    scrollbar-width: none;
}
.popup-filter::-webkit-scrollbar { display: none; }
.popup-filter label { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.popup-filter label > span { font-size: 11px; color: var(--c-muted); }
.popup-filter select {
    padding: 7px 10px; border: 1px solid var(--c-line); border-radius: var(--radius);
    background: var(--c-bg); color: var(--c-fg); font-size: 14px;
}
.popup-count { margin: 0 0 8px; font-size: 13px; color: var(--c-muted); }

/*
 * 경기 카드 — 이 화면의 기본 단위. 카드 **전체**가 누르는 영역이다.
 * 코트 옆에서 엄지로 누르므로 최소 높이를 넉넉히 둔다.
 */
.game-list { display: flex; flex-direction: column; gap: 8px; }
.game-card {
    display: block; padding: 10px 12px; border: 1px solid var(--c-line);
    border-left: 3px solid transparent; /* 상태색 자리 — 미리 잡아 둬야 상태가 바뀌어도 카드가 흔들리지 않는다 */
    border-radius: var(--radius); color: inherit; text-decoration: none; background: var(--c-bg);
}
.game-card:active { background: var(--c-surface); }
/* 진행중은 가장 잘 보여야 한다 — 흐리지 않고 테두리·배경으로 도드라지게 */
.game-card.is-live { border-left-color: var(--c-win); background: rgba(220, 38, 38, 0.04); }
.game-card.is-done { border-left-color: var(--c-ok); opacity: 0.62; }

.gc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--c-muted); }
/* 경기번호가 가장 크다 — 코트에서 부르는 이름이 이것이다 */
.gc-num { font-size: 19px; font-weight: 700; color: var(--c-fg); font-variant-numeric: tabular-nums; }
.gc-court b { color: var(--c-fg); }

/*
 * 공개 카드의 두 숫자 — 코트 순번(이 코트에서 몇 번째)과 경기번호(대회 전체
 * 유일값)를 색으로 나눈다. 같은 색이면 "둘 다 같은 숫자" 로 읽혀 헷갈린다.
 */
.gc-court-order { font-size: 16px; font-weight: 700; color: var(--c-fg); font-variant-numeric: tabular-nums; }
.gc-no {
    display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
    background: rgba(121, 0, 219, 0.1); color: var(--c-accent); font-variant-numeric: tabular-nums;
}
.gc-time { margin-left: auto; font-variant-numeric: tabular-nums; }

.gc-state { margin: 2px 0 4px; }

.gc-event { margin: 4px 0 6px; font-size: 13px; }
.gc-event .muted { margin-left: 6px; }

.gc-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.gc-side { font-size: 14px; word-break: keep-all; }
.gc-side:last-child { text-align: right; }
.gc-side.is-win { color: var(--c-win); font-weight: 700; }
.gc-score { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-forfeit { margin: 6px 0 0; font-size: 12px; color: var(--c-muted); }

/* 코트별 화면 — 참가자 화면은 `<details>` 로 접어 종목을 눌러야 팀이 보인다 */
.court-box { margin-bottom: 18px; }
.court-box h2, .court-box summary {
    display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px;
}
.court-box summary { cursor: pointer; list-style: none; }
.court-box summary::-webkit-details-marker { display: none; }
.court-box summary::after { content: '▾'; margin-left: auto; color: var(--c-muted); font-size: 12px; }
.court-box[open] summary::after { content: '▴'; }
.court-progress { font-size: 12px; color: var(--c-muted); font-weight: 400; }
.court-done, .court-empty { margin: 0 0 8px; font-size: 12px; color: var(--c-muted); }

/*
 * 예선/본선 묶음 제목 — 경기 목록(`live/match_event.php`) 전용. 예선 조 상자를
 * 한눈에 "예선" 묶음으로, 본선 상자를 "본선" 묶음으로 색까지 나눠 보여준다.
 * old 처럼 탭으로 전환하지 않고 한 스크롤에 다 보여주는 것은 그대로 둔다.
 */
.event-phase {
    margin: 20px 0 8px; font-size: 13px; font-weight: 700;
    color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.02em;
}
.event-phase:first-of-type { margin-top: 4px; }
.event-phase.is-final { color: var(--c-accent); }

/* 본선 상자만 강조색 테두리·배경 tint — 예선 조 상자(.event-group)는 .court-box 그대로 */
.court-box.event-final {
    border: 1px solid var(--c-accent); border-radius: var(--radius);
    background: rgba(121, 0, 219, 0.03); padding: 10px 12px 2px;
}

/* ── 경기 상세 ── */
.detail-head { margin-bottom: 10px; }
.dh-line { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--c-muted); }
.dh-num { font-size: 22px; font-weight: 700; color: var(--c-fg); font-variant-numeric: tabular-nums; }
.dh-event { margin: 4px 0 0; font-size: 13px; }

/* 큰 점수판. 멀리서도 보여야 한다. */
.detail-teams {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
    padding: 12px; margin-bottom: 12px;
    border: 1px solid var(--c-line); border-radius: var(--radius);
}
.dt-side { display: flex; flex-direction: column; gap: 2px; }
.dt-side:last-child { text-align: right; }
.dt-label { font-size: 11px; color: var(--c-muted); }
.dt-name { font-size: 14px; word-break: keep-all; }
.dt-score { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }

.mode-row { display: flex; gap: 14px; margin-bottom: 10px; }
.mode-row .radio { display: flex; align-items: center; gap: 5px; font-size: 14px; }

.set-table { width: 100%; border-collapse: collapse; }
.set-table th, .set-table td { padding: 5px 4px; text-align: center; border-bottom: 1px solid var(--c-line); }
.set-table th { font-size: 12px; color: var(--c-muted); font-weight: 400; }
.set-table td.num { color: var(--c-muted); font-size: 13px; }
/* 모바일 입력 — 16px 미만이면 iOS 가 화면을 확대한다 */
.set-table input {
    width: 100%; padding: 9px 6px; border: 1px solid var(--c-line); border-radius: var(--radius);
    background: var(--c-bg); color: var(--c-fg); font-size: 16px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.set-table input:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; }

.block-label { display: block; margin: 10px 0; }
.block-label > span { display: block; margin-bottom: 4px; font-size: 12px; color: var(--c-muted); }
.block-label input {
    width: 100%; padding: 9px 11px; border: 1px solid var(--c-line); border-radius: var(--radius);
    background: var(--c-bg); color: var(--c-fg); font-size: 16px;
}

.detail-actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.detail-actions .btn-primary {
    flex: 1; padding: 13px; border: 0; border-radius: var(--radius);
    background: var(--c-accent); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.detail-actions .btn-primary:disabled { opacity: 0.6; }
.detail-actions .btn-cancel {
    padding: 13px 14px; border: 1px solid var(--c-line); border-radius: var(--radius);
    color: var(--c-fg); text-decoration: none; font-size: 14px;
}
.detail-back { margin-top: 18px; font-size: 14px; }

.rank-box { margin-top: 16px; }
.rank-box h2 { margin: 0 0 6px; font-size: 14px; }
.rank-box table { width: 100%; border-collapse: collapse; }
.rank-box td { padding: 6px 4px; border-bottom: 1px solid var(--c-line); font-size: 13px; }
.rank-box td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--c-muted); }

.flash { padding: 9px 12px; border-radius: var(--radius); margin: 0 0 10px; font-size: 14px; }
.flash-ok { background: var(--c-tint-ok); color: var(--c-on-ok); }
.flash-error { background: var(--c-tint-error); color: var(--c-on-error); }
.hint { color: var(--c-muted); font-size: 13px; margin: 6px 0; }
.hint.warn { color: var(--c-on-error); }
.empty { color: var(--c-muted); text-align: center; padding: 40px 0; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
    border: 1px solid var(--c-line); color: var(--c-muted); }
.tag.is-on { background: rgba(5, 150, 105, 0.12); color: var(--c-on-ok); border-color: transparent; }
/* 경기 진행중 — 미시작(회색 기본 .tag)·종료(초록 .is-on) 와 뚜렷이 구분되는 빨강 */
.tag.is-live { background: rgba(220, 38, 38, 0.12); color: var(--c-win); border-color: transparent; }

/* ------------------------------------------------------------------ */
/* 오더지(기록지) — 프린터로 나가는 것이 목적                          */
/* ------------------------------------------------------------------ */

.order-sheet { border: 1px solid var(--c-fg); padding: 12px; }
.os-title { margin: 0 0 10px; font-size: 16px; text-align: center; }
.os-meta, .os-score, .os-sign { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.os-meta th, .os-meta td, .os-score th, .os-score td, .os-sign th, .os-sign td {
    border: 1px solid var(--c-fg); padding: 6px 8px; font-size: 13px;
}
.os-meta th, .os-score th, .os-sign th { background: var(--c-surface); font-weight: 600; white-space: nowrap; }
.os-big { font-size: 20px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
/* 손으로 적는 칸 — 높이가 곧 쓸 자리다 */
.os-score td { height: 34px; text-align: center; }
.os-score .os-team { text-align: left; width: 40%; }
.os-sign td { height: 40px; }
.order-actions { display: flex; gap: 8px; margin-top: 14px; }
.order-actions .btn-primary {
    flex: 1; padding: 13px; border: 0; border-radius: var(--radius);
    background: var(--c-accent); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.order-actions .btn-cancel {
    padding: 13px 14px; border: 1px solid var(--c-line); border-radius: var(--radius);
    color: var(--c-fg); text-decoration: none; font-size: 14px;
}

@media print {
    /* 종이에는 오더지만 나간다 */
    /*
     * ⚠️ **인쇄는 늘 밝게.**
     *
     * 시스템이 다크면 토큰이 어두운 값으로 뒤집혀 있다. 그대로 인쇄하면 흰
     * 종이에 **밝은 글씨**가 찍혀 사라진다(브라우저는 배경색을 기본적으로 안
     * 찍는다). 그래서 종이용으로 토큰을 되돌린다.
     */
    :root {
        --c-bg: #ffffff;
        --c-fg: #1c1e21;
        --c-muted: #4b5563;
        --c-line: #cbd5e1;
        --c-surface: #f1f3f5;
        --c-tint-ok: #ecfdf5;
        --c-tint-warn: #fff7ed;
        --c-tint-error: #fef2f2;
        --c-tint-info: #eff6ff;
        --c-on-ok: #047857;
        --c-on-error: #b91c1c;
        --c-on-warn: #9a3412;
        --c-on-info: #1d4ed8;
        --c-warn: #a86500;
        --c-accent: #7900db;
        color-scheme: light;
    }
    body { background: #fff; color: #1c1e21; }

    .popup-header, .popup-tabs, .popup-footer, .order-actions, .preview-banner { display: none; }
    .popup-main { padding: 0; }
    .order-sheet { border: 0; padding: 0; }
    .os-meta th, .os-score th, .os-sign th { background: transparent; }
}

/* ── 공개 화면(/live) ── */
.live-rows { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 16px; font-size: 14px; }
.live-rows dt { color: var(--c-muted); }
.live-rows dd { margin: 0; }

.live-notice { padding: 12px 14px; margin-bottom: 16px;
    border: 1px solid var(--c-line); border-radius: var(--radius); }
.live-notice h2 { margin: 0 0 6px; font-size: 15px; }
.live-notice p { margin: 0; font-size: 14px; }

.live-list { list-style: none; margin: 0; padding: 0; }
.live-list li { display: flex; gap: 10px; align-items: baseline;
    padding: 9px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.ll-event, .ll-rank { flex: 0 0 auto; font-size: 12px; color: var(--c-muted); min-width: 88px; }
.ll-name { word-break: keep-all; }

.live-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.live-table th, .live-table td { padding: 7px 8px; border-bottom: 1px solid var(--c-line); text-align: left; }
.live-table th { color: var(--c-muted); font-weight: 400; white-space: nowrap; }
.live-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 공개 상세의 팀 이름 — 이긴 쪽을 붉게 (.match-card .win 과 같은 색) */
.dt-side.is-win .dt-name { color: var(--c-win); font-weight: 700; }

/* 포스터 — 요강 탭 맨 위. 참가자가 가장 먼저 찾는 것이다. */
.live-posters { display: grid; gap: 10px; margin-bottom: 16px; }
.live-posters img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--c-line); border-radius: var(--radius);
}

/* 요강 파일 — 올린 사람이 붙인 이름 그대로 */
.live-files { margin-bottom: 16px; }
.live-files h2 { margin: 0 0 6px; font-size: 14px; color: var(--c-muted); font-weight: 400; }
.live-files ul { list-style: none; margin: 0; padding: 0; }
.live-files li { padding: 8px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.live-files a { overflow-wrap: anywhere; }

/*
 * 경기 카드의 세트별 점수.
 *
 * 위 큰 숫자는 딴 세트 수(2:0), 여기는 각 세트의 득점이다. 여러 세트일 때만
 * 붙는다 — 1세트 경기는 위 숫자가 곧 그 점수라 두 번 적을 것이 없다.
 */
.gc-sets {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    margin: 6px 0 0; padding-top: 6px;
    border-top: 1px dashed var(--c-line);
    font-size: 12px; color: var(--c-muted); font-variant-numeric: tabular-nums;
}

/* 날짜 · 장소 제목 — 그 아래로 코트 상자들이 붙는다 */
.day-head {
    margin: 18px 0 8px; font-size: 14px; font-weight: 700;
    color: var(--c-accent);
}
.day-head:first-of-type { margin-top: 4px; }

/*
 * 경기시간 화면의 날짜 · 장소 · 코트 탭. `.popup-filter` 처럼 가로 스크롤이다 —
 * 코트가 여러 개면 한 줄에 다 못 들어간다.
 */
.court-tabs {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px;
    scrollbar-width: none;
}
.court-tabs::-webkit-scrollbar { display: none; }
.court-tabs a {
    flex: 0 0 auto; padding: 7px 14px; border: 1px solid var(--c-line); border-radius: 999px;
    color: var(--c-fg); text-decoration: none; font-size: 13px; white-space: nowrap;
}
.court-tabs a.is-on {
    background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-weight: 600;
}

/* 참가자 이름 검색 — 셀렉트와 달리 버튼을 눌러야 찾는다 */
.popup-filter label.search { flex: 1 1 200px; }
.popup-filter .search-row { display: flex; gap: 6px; }
/* .popup-filter select 와 높이·모양을 맞춘다 — 아무 규칙도 없으면 브라우저
   기본 입력창이 그려져 옆의 셀렉트·버튼과 어긋나 보인다. */
.popup-filter .search-row input {
    flex: 1 1 auto; min-width: 0; padding: 7px 10px;
    border: 1px solid var(--c-line); border-radius: var(--radius);
    background: var(--c-bg); color: var(--c-fg); font-size: 14px;
}
.popup-filter .search-row input:focus {
    outline: 2px solid var(--c-accent); outline-offset: -1px; border-color: var(--c-accent);
}
.popup-filter .search-row button {
    flex: 0 0 auto; padding: 0 16px;
    border: 1px solid var(--c-accent); border-radius: var(--radius);
    background: var(--c-accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.popup-filter .search-row button:hover { filter: brightness(0.9); }
.popup-filter .search-row button:active { filter: brightness(0.8); }
.popup-filter label.wide { flex: 1 1 100%; }

/* 입상자 — 순위 결정 기준 한 줄 */
.tie-break {
    margin: 0 0 10px; text-align: right;
    font-size: 12px; font-weight: 600; color: var(--c-muted);
}

/*
 * 단체순위 — 표가 아니라 카드 목록이다.
 *
 * `<details>` 를 `<tr>` 안에 넣을 수 없어서 표를 버렸다. 덤으로 좁은 화면에서
 * 여섯 열이 눌리던 것도 풀렸다.
 */
.standing-list { list-style: none; margin: 0; padding: 0; }
.standing-list > li { border-bottom: 1px solid var(--c-line); }
.standing-list summary {
    display: flex; align-items: baseline; gap: 10px;
    padding: 11px 2px; cursor: pointer; font-size: 14px;
}
.standing-list summary::-webkit-details-marker { display: none; }
.st-rank { flex: 0 0 28px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.st-name { flex: 1 1 auto; font-weight: 600; overflow-wrap: anywhere; }
.st-total { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 펼쳤을 때 — 점수의 갈래 */
.st-break {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    margin: 0 0 10px; padding: 8px 10px;
    border-radius: var(--radius); background: rgba(120, 0, 219, 0.05);
    font-size: 12px;
}
.st-break div { display: flex; gap: 5px; }
.st-break dt { color: var(--c-muted); }
.st-break dd { margin: 0; font-variant-numeric: tabular-nums; }

/* 입상 명세 — 여기 점수의 합이 위 「입상」 과 같다 */
.st-awards { list-style: none; margin: 0 0 12px; padding: 0; }
.st-awards li {
    display: flex; gap: 8px; align-items: baseline;
    padding: 6px 2px; border-top: 1px dotted var(--c-line); font-size: 13px;
}
.st-awards .ll-rank { min-width: 44px; }
.st-awards .ll-event { min-width: 0; flex: 0 1 auto; }
.st-awards .ll-name { flex: 1 1 auto; }
.st-awards .ll-point { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/*
 * 브래킷은 desktop 비율로 그려진다. 본문이 가로로 밀리면 안 되므로
 * (`body.popup { overflow-x: hidden }`) **자기 상자 안에서만** 스크롤한다.
 */
.bracket-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 공개 대회 모아보기(/live) ── */
.contest-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contest-card {
    border: 1px solid var(--c-line); border-radius: var(--radius);
    transition: border-color 0.15s ease;
}
.contest-card a { display: block; padding: 12px 14px; color: inherit; text-decoration: none; }
.contest-card:active { border-color: var(--c-accent); }
.contest-card h2 { margin: 6px 0 4px; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.contest-card-date { margin: 0; font-size: 13px; color: var(--c-muted); }
.contest-card-loc { margin: 2px 0 0; font-size: 13px; color: var(--c-muted); }

.pager {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--c-line);
    font-size: 14px;
}
.pager-summary { color: var(--c-muted); font-size: 13px; }
.pager-prev, .pager-next {
    padding: 7px 14px; border: 1px solid var(--c-line); border-radius: var(--radius);
    color: var(--c-fg);
}

/*
 * 약관·개인정보처리방침 전문.
 *
 * 이 화면들은 `layout/popup` 을 쓰므로 **admin.css 를 안 읽는다.** 그래서 여기
 * 두어야 한다 — 가입 화면의 동의 체크(`.agree*`)는 admin.css 에 있고, 둘은
 * 서로 다른 레이아웃이다.
 */
.legal { max-width: 680px; margin: 0 auto; }
.legal h1 { font-size: 18px; margin: 0 0 4px; }
.legal-ver { margin: 0 0 14px; font-size: 12px; color: var(--c-muted); }
.legal-draft {
    padding: 10px 12px; margin: 0 0 14px;
    border-radius: var(--radius);
    background: var(--c-warn); color: #fff; font-size: 13px;
}
.legal-body { font-size: 14px; line-height: 1.7; }
.legal-placeholder { color: var(--c-muted); }
.legal-actions { margin-top: 20px; }

/*
 * 닫기 버튼 — 팝업 전반.
 *
 * 지금까지 `.btn-cancel` 은 `.detail-actions`·`.order-actions` 안에서만
 * 정의돼 있었다. 그래서 약관·방침 팝업의 닫기 버튼은 **아무 스타일도 안
 * 먹어** 브라우저 기본 버튼으로 나왔다. 범위를 두지 않고 한 번 정의한다 —
 * 위 두 곳은 선택자가 더 길어 그대로 이긴다.
 */
.btn-cancel {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid var(--c-line); border-radius: var(--radius);
    background: var(--c-bg); color: var(--c-fg);
    font-size: 14px; text-decoration: none; cursor: pointer;
}
.btn-cancel:hover { border-color: var(--c-accent); }

.legal-actions { margin-top: 20px; }

/* 바닥글의 약관·방침 */
.legal-links { display: flex; gap: 12px; }
.legal-links a { font-size: 12px; color: var(--c-muted); }

/* ── 무한 스크롤 ── */
/*
 * 가져오는 동안 보여 주는 줄. 아무 표시가 없으면 멈춘 것으로 보인다.
 */
.list-loading { text-align: center; color: var(--c-muted); font-size: 13px; padding: 12px 0; }
.list-sentinel { height: 1px; }