/* 테마: 기본은 다크. <html data-theme="light"> 일 때만 낮 모드 값으로 덮어쓴다(쿠키 theme=light). */
:root {
    --bg: #0f1115;
    --surface: #171a21;
    --surface-2: #1f232c;
    --border: #2a2f3a;
    --text: #e6e8ee;
    --muted: #9aa3b2;
    --brand: #4c8dff;
    --brand-bg: #5fb0ff;         /* 채운 파란 바탕(뱃지·회원가입·날짜 탭 선택·폼 주 버튼): 링크색(--brand)보다 밝은 하늘색 */
    --brand-ink: #0b0f16;        /* 그 위 글자는 검정 */
    --best-bg: #15331f;
    --best-ink: #6fdc8c;
    --live: #d93025;
    --warn-bg: #3a2a10;
    --warn-ink: #f0b65a;
    --up: #6fdc8c;
    --down: #ff7b72;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    --sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius: 10px;
    --shadow: none;
    --topbar-h: 54px;
    color-scheme: dark;
}
:root[data-theme="light"] {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #f0f2f5;
    --border: #e3e6eb;
    --text: #171a21;
    --muted: #5b6270;            /* 4차(L4): #6b7280 → 회색 바탕(#f0f2f5)·선택 바탕(#e4eefd) 위 4.5:1 이상(4.31/4.13 → 5.47/5.24) */
    --brand: #1a5fc8;            /* 4차(L4): #1f6feb → 선택 바탕 위 4.5:1 이상(3.96 → 5.11) */
    --best-bg: #e6f6ec;
    --best-ink: #137a3a;
    --warn-bg: #fff4e5;
    --warn-ink: #9a5b00;
    --up: #137a3a;
    --down: #c62828;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.5; }
body[data-lang="en"], body[data-lang="es"] { font-family: 'Inter', var(--sans); }
/* 일본어·중국어(2026-10-10): 글꼴을 따로 받지 않고 시스템 글꼴(한자 모양이 언어에 맞게) */
body[data-lang="ja"] { font-family: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', var(--sans); }
body[data-lang="zh"] { font-family: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', var(--sans); }
body[data-lang="zh-hant"] { font-family: 'Inter', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', var(--sans); } /* 번체(2026-10-12) */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.wrap { max-width: none; margin: 0 auto; padding: 0 16px; }  /* 폭 제한 없음: 넓은 화면에서 배당표가 계속 넓어진다 */
.up { color: var(--up); } .down { color: var(--down); }

/* ---------- 상단 바 ---------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.topbar-inner { display: flex; align-items: center; gap: 14px; height: var(--topbar-h); }
.menu-btn { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; width: 36px; height: 36px; font-size: 16px; color: var(--text); cursor: pointer; }
.brand { display: flex; align-items: center; white-space: nowrap; }
.brand:hover { text-decoration: none; }
/* 브랜드 로고(2026-10-11, 시안 C "묶음"): 원 6개 + "Oddsbunch" 글자(도형). 글자 = 본문색, 원 = 회색, 강조 원 = 다크 노랑 / 낮 하늘색. 원본 image/logo/make_logo.py */
.brand-badge { display: inline-flex; align-items: center; height: 30px; padding: 0 2px; color: var(--text); }
.brand-logo { display: block; height: 22px; width: auto; }
.brand-logo .lg-d { fill: #6b7385; } .brand-logo .lg-a { fill: #FFCC00; }
:root[data-theme="light"] .brand-logo .lg-d { fill: #aab2bf; } :root[data-theme="light"] .brand-logo .lg-a { fill: #2f8fe6; }
.topbar-spacer { flex: 1; }

/* ---------- 탭 컴포넌트 (partials/tabs.ejs) ---------- */
.tg { display: flex; align-items: stretch; }
.tg-item { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; text-decoration: none; transition: color 0.12s, background 0.12s; }
.tg-item:hover { text-decoration: none; color: var(--text); }
.tg-ico { font-size: 13px; line-height: 1; }
.tg-count { font-family: var(--mono); font-size: 11px; }

/* 1) 밑줄 탭: 상단 종목 */

/* 2) 세그먼트: 마켓 / 뷰 전환 / 관리 종목 */
.tg-seg { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; gap: 2px; }
.tg-seg .tg-item { padding: 5px 13px; border-radius: 7px; font-size: 13px; font-weight: 500; line-height: 20px; }
.tg-seg .tg-item:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.tg-seg .tg-item.active { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--border); }

/* 3) 달력 조각: 날짜 선택 */
.tg-days { gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; min-width: 0; max-width: 100%; }
.tg-days::-webkit-scrollbar { display: none; }
.tg-days .tg-item { flex: none; -webkit-user-drag: none; flex-direction: column; gap: 1px; min-width: 62px; padding: 6px 10px 5px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); line-height: 1.2; }
/* 넘친 쪽 끝을 흐리게(app.js dayTabs 가 fade-l·fade-r 를 붙인다) */
.tg-days.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.tg-days.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.tg-days.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.tg-days .tg-sub { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tg-days .tg-label { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--text); }
.tg-days .tg-count { margin-top: 2px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 10.5px; line-height: 16px; }
.tg-days .tg-item.today .tg-sub { color: var(--brand); }
.tg-days .tg-item:hover { border-color: var(--muted); }
.tg-days .tg-item.active { background: var(--brand-bg); border-color: var(--brand-bg); }
.tg-days .tg-item.active .tg-sub, .tg-days .tg-item.active .tg-label { color: var(--brand-ink); }
.tg-days .tg-item.active .tg-count { background: rgba(0, 0, 0, 0.18); color: var(--brand-ink); }
.control-spacer { flex: 1; }
/* 북메이커를 꺼 둔 상태(2026-10-19): 제목 옆 작은 알약 — 노랑 테두리(주의, 오류 아님) */
.bm-off-note { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--warn-ink); border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); font-size: 12px; font-weight: 600; vertical-align: middle; white-space: nowrap; }
/* 배당표 날짜 줄(2026-10-19): 날짜 탭은 넘치면 가로로 넘기고, "전체 7일"(리그 선택 때만)은 줄 오른쪽 끝에 고정 — 폰에서도 줄바꿈 없이 */
.control-row.control-row-days { flex-wrap: nowrap; }
.control-row-days > .tg-days { flex: 1 1 auto; }
.control-row-days > .days-all { flex: none; margin-left: auto; padding-left: 8px; border-left: 1px solid var(--border); }
.control-row-days > .days-all .tg-days { overflow: visible; }
.topbar-tools { display: flex; align-items: center; gap: 8px; }
.pill-btn { padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; background: var(--surface); list-style: none; }
.pill-btn::-webkit-details-marker { display: none; }
.pill-btn:hover { text-decoration: none; border-color: var(--muted); color: var(--text); }
/* 상단바 주 메뉴(브랜드 우측): 데스크톱 전용. 배당표 페이지의 모바일에서는 ☰ 사이드바 안으로 들어간다 */
.topbar-nav { display: flex; align-items: center; gap: 6px; }
/* 페이지 메뉴(2026-10-14 저녁, 사용자 결정): PC(1400~) 브랜드 우측 버튼 6개(경기·분석글·조합 환급률·미들·배당 괴리·환급률 랭킹). 1400 미만은 ☰ 서랍 .side-pages 가 대신한다 */
.topbar-pages { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.topbar-pages .pill-btn { font-weight: 600; }
@media (max-width: 1399px) { .topbar-pages { display: none; } }
.pill-btn.active { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.side-nav-ico { display: inline-grid; place-items: center; width: 18px; font-size: 12px; color: var(--muted); }
/* 로그인 / 회원가입 / 로그아웃: 회원가입은 브랜드색으로 강조. 로그아웃은 POST 폼의 버튼 */
.topbar-auth { display: flex; align-items: center; gap: 8px; }
.auth-signup { color: var(--brand-ink); background: var(--brand-bg); border-color: var(--brand-bg); font-weight: 700; }
.logout-form { display: contents; }
.auth-btn { font: inherit; font-size: 12px; }
/* 사이드바 회원 메뉴: 버튼(로그아웃)도 링크와 같은 모양 */
.side-auth-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; }
.side-auth-btn:hover { background: var(--surface-2); }
.side-list a.side-signup { color: var(--brand); font-weight: 600; }
.auth-signup:hover { color: var(--brand-ink); border-color: var(--brand-bg); filter: brightness(1.06); }
/* ---------- 회원 폼(가입·로그인·마이페이지) ---------- */
.form-card { max-width: 560px; margin: 8px auto 40px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 32px; }
.form-card-sm { max-width: 420px; }
.form-title { margin: 0 0 6px; font-size: 22px; }
.form-lead { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-field > label, .form-field > legend { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; font-size: 12.5px; font-weight: 600; color: var(--muted); }
/* 라벨 우측 표시: 필수 = 빨강, 선택 = 파랑 */
.req-mark { margin-left: auto; font-size: 11px; font-weight: 700; white-space: nowrap; flex: none; color: var(--down); } /* 긴 동의 문장 옆에서 두 줄로 깨지지 않게 */
.form-check .form-check-txt { flex: 1 1 auto; }
.form-field .input { height: 38px; }
.form-field.has-error .input { border-color: var(--down); }
.form-hint { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
[data-opt][hidden], [data-req][hidden] { display: none; }
.form-error { margin: 0; font-size: 12px; color: var(--down); }
.form-error-top { padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--down) 40%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--down) 10%, var(--surface)); }
.form-choice { border: 0; padding: 0; margin: 0; }
.form-choice .choice { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; margin-top: 6px; }
.form-choice .choice input { grid-row: 1 / 3; }
.form-choice .choice:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.choice-title { font-weight: 700; font-size: 13.5px; }
.choice-desc { font-size: 12px; color: var(--muted); }
/* 입력칸 오른쪽의 인증 버튼: 붙이지 않고 간격을 두어 별도 버튼으로 보이게 */
.btn-attach { height: 38px; flex: none; border-radius: 8px; padding: 0 14px; white-space: nowrap; font-weight: 600; }
.btn-attach:disabled { opacity: 0.6; cursor: default; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.input.mono { font-family: var(--mono); font-size: 12.5px; }
.form-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.btn-wide { width: 100%; justify-content: center; height: 40px; font-weight: 700; margin-top: 4px; }
.form-foot { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.form-foot a { color: var(--brand); font-weight: 600; }
@media (max-width: 600px) { .form-card { padding: 20px 16px; } .form-row { grid-template-columns: 1fr; } }
/* 허니팟: 화면 밖으로 보낸다(display:none 은 일부 봇이 건너뛰므로 위치만 옮긴다) */
.hp-field { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
/* ---------- 회원 페이지(마이페이지·상품구매·광고설정) ---------- */
.me-nav { margin: 8px auto 14px; max-width: 980px; }
.me-nav.tg-seg { display: flex; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.me-nav.tg-seg::-webkit-scrollbar { display: none; }
/* QA 2026-10-11 M2: 폰(420 이하)에서 en·es 탭 5개가 넘치지 않게 여백·글자를 줄인다(그래도 넘치면 가로 스크롤) */
@media (max-width: 420px) { .me-nav.tg-seg .tg-item { padding: 5px 8px; font-size: 12.5px; } }
/* QA 2026-10-11 L1: 관리 화면(wide) 필터 줄의 종목 탭은 좁은 폭에서 가로 스크롤 */
body[data-layout="wide"] .control-row > .tg-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
body[data-layout="wide"] .control-row > .tg-seg::-webkit-scrollbar { display: none; }
.me-wrap { max-width: 980px; margin: 0 auto 40px; display: flex; flex-direction: column; gap: 14px; }
/* MY 2열(2026-10-10): 왼쪽 계정 카드, 오른쪽 카드 묶음 */
.me-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.me-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 900px) { .me-cols { grid-template-columns: minmax(0, 1fr); } }
/* MY 알림 구역(2026-10-12 알림 MY 통합): 묶음 제목 + 안내 한 줄, 그 아래 2열 카드 */
.me-group { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; scroll-margin-top: calc(var(--topbar-h) + var(--admin-bar-h) + 14px); }
.me-group-head { padding: 0 2px; }
.me-group-title { margin: 0; font-size: 17px; font-weight: 700; }
.me-group-head .shop-note { margin: 4px 0 0; }
/* 계정 카드 안 기본 설정: 라벨 | 선택 상자 2칸 표, 저장은 오른쪽 */
.me-val { margin: 0; font-size: 14px; } /* 카드 제목이 곧 항목 이름인 값 한 줄(환불 주소 등) */
/* 계정 카드: 정보와 설정 선택 상자를 한 목록으로(2026-10-10) */
.me-kv-form { align-items: center; }
.me-kv-form .select { width: 100%; font-size: inherit; }
.me-kv-form dt label { font: inherit; color: inherit; }
/* 모든 줄 높이를 선택 상자(34px)와 같게, 글자 값은 선택 상자 안 글자 위치(테두리 1 + 안쪽 여백 10)에 맞춘다(2026-10-10) */
.me-kv-form dt, .me-kv-form dd { min-height: 34px; display: flex; align-items: center; gap: 5px; } /* gap: flex 에서 사라지는 띄어쓰기(잔액 3.00 USDT) 대신 */
.me-kv-form dd:not(:has(select)) { padding-left: 11px; }
.me-prefs-form { margin: 0; }
.me-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.me-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }
.me-card-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.me-card .form > .btn { align-self: flex-start; } /* 카드 안 저장 버튼은 내용 폭만 */
.otp-input { width: 160px; letter-spacing: 0.2em; font-size: 15px; }
.me-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 8px; font-size: 13.5px; }
.me-kv dt { color: var(--muted); }
.me-kv dd { margin: 0; }
.me-balance { font-family: var(--mono); font-size: 18px; font-weight: 700; }
.me-unit { font-size: 12px; color: var(--muted); font-weight: 500; }
/* 계정 카드 잔액은 다른 줄 값과 같은 크기·굵기(2026-10-10). 출금 페이지 잔액은 강조 그대로 */
.me-kv-form .me-balance, .me-kv-form .me-unit, .me-kv-form .mono { font-size: inherit; font-weight: inherit; color: inherit; }
.flash { margin: 0; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; }
.flash-ok { background: color-mix(in srgb, var(--best-bg) 70%, var(--surface)); border: 1px solid color-mix(in srgb, var(--best-ink) 40%, var(--border)); color: var(--text); }
.flash-err { background: color-mix(in srgb, var(--down) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--down) 40%, var(--border)); color: var(--text); }
.ledger-table { min-width: 0; }
.ledger-table td.up { color: var(--best-ink); }
.ledger-table td.down { color: var(--down); }
@media (max-width: 900px) { .me-grid { grid-template-columns: minmax(0, 1fr); } .me-card { padding: 14px 14px; } .me-nav { margin: 4px 0 10px; } }
/* 텔레그램 인증 */
.verify-steps { margin: 0 0 16px; padding-left: 20px; font-size: 13.5px; line-height: 1.7; }
.verify-ok { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--best-ink); }
.verify-code-wrap { margin: 14px 0 4px; font-size: 12.5px; color: var(--muted); }
.verify-code { display: inline-block; margin-left: 6px; padding: 2px 8px; border: 1px dashed var(--border); border-radius: 6px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em; color: var(--text); user-select: all; }
/* 미인증 안내 띠(상단바 아래) */
.notice-bar { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border)); font-size: 13px; }
.notice-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 7px; padding-bottom: 7px; }
/* 테마 전환 버튼: 다크일 때 ☀(낮 모드로), 라이트일 때 ☾(다크로) 를 보여준다 */
.theme-toggle { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; line-height: 1.2; }
.theme-toggle .theme-ico { font-size: 13px; line-height: 1; }
.theme-toggle .theme-when-dark { display: inline; } .theme-toggle .theme-when-light { display: none; }
:root[data-theme="light"] .theme-toggle .theme-when-dark { display: none; } :root[data-theme="light"] .theme-toggle .theme-when-light { display: inline; }
.dropdown { position: relative; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 140px; padding: 4px; z-index: 40; }
.dropdown-menu a { display: block; padding: 7px 10px; border-radius: 6px; font-size: 13px; }
.dropdown-menu a:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-menu a.active { color: var(--brand); font-weight: 600; }

/* ---------- 3단 레이아웃 ---------- */
/* 좌 300(사이드바) / 본문 / 우 300(레일). 상단 광고 줄의 좌·우 칸이 300×90 고정 소재와 딱 맞는다 */
/* PC 3열 폭(2026-10-17 밤 사용자 결정): 좌 250 · 우 320(전엔 탑 좌·우 광고 300×90 에 맞춰 300/300). 실측: 사이드바는 240 까지 말줄임 0, 레일은 영문 조합 줄이 320 부터 말줄임 0 — 본문 1400 화면 750 → 780 */
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr) 320px; gap: 18px; align-items: start; padding-top: 14px; }
.layout-member { grid-template-columns: minmax(0, 1fr); } .layout-member > .sidebar { display: none; } /* 2026-10-15 사용자 결정: 회원 페이지는 PC 에서도 좌측 사이드바(필터) 없이 본문만 가운데(1400 미만 ☰ 서랍은 그대로). 전엔 300px + 본문 */ /* 회원 페이지(충환·마이페이지·상품·광고): 좌 사이드바 + 본문, 우측 레일·상단 광고 없음(2026-10-10) */
.layout-wide { grid-template-columns: minmax(0, 1fr); }
.layout-wide > .sidebar { display: none; } /* wide(로그인·가입·관리): PC 에서는 사이드바 없음, 모바일에서는 ☰ 서랍으로 쓴다(아래 900 이하 규칙) */
.content { min-width: 0; }
.sidebar { position: sticky; top: calc(var(--topbar-h) + var(--admin-bar-h) + 14px); display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - var(--topbar-h) - var(--admin-bar-h) - 28px); overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* 우측 레일과 같은 얇은 스크롤바(2026-10-18 — 배너를 가리던 기본 스크롤바) */
.side-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; flex: none; }
/* 배너 아래 간격을 어느 열이든 9px(리더보드 아래 여백과 같게): 사이드바 gap 12 → −3, 배당표 레일 gap 4 → +5, 그 밖 레일 gap 14 → −5 */
.sidebar > .promo-banner { margin-bottom: -3px; }
.rail[data-rail] > .promo-banner { margin-bottom: 5px; }
.rail:not([data-rail]) > .promo-banner { margin-bottom: -5px; }
@media (max-width: 1399px) { .promo-banner { display: none; } }
/* 자체 홍보 배너(2026-10-18, partials/promo-house — Hitting 자리 교체): 이미지가 열 폭 가득(좌 250×90 · 우 320×89), 각진 모서리 */
.promo-banner { display: block; flex: none; line-height: 0; border-radius: 0; overflow: hidden; }
.promo-banner img { display: block; width: 100%; height: auto; }
.promo-banner:hover img { filter: brightness(1.08); }
/* 팔린 탑(좌·우) 광고가 홍보 배너 자리에(2026-10-18 새 규격 PC 한 장): 칸 폭(300px 고정 등) 규칙을 풀고 열 폭 가득 */
.promo-ad .ad { display: block; width: auto; height: auto; margin: 0; padding: 0; border: 0; }
.promo-ad .ad .ad-img-pc { display: block; width: 100%; height: auto; }
.sidebar-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sidebar-close { display: none; background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; }
.side-list { list-style: none; margin: 0; padding: 0 6px 8px; }
.side-list a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 13px; color: var(--text); }
.side-list a:hover { background: var(--surface-2); text-decoration: none; }
.side-list a.active { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-weight: 600; }
.side-logo { width: 16px; height: 16px; object-fit: contain; flex: none; }
.side-logo-empty { display: inline-block; border-radius: 50%; background: var(--surface-2); }
.side-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-count { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.sidebar-backdrop { display: none; }
/* 우측 ⋮ 서랍(계정·설정·사이트): 모든 화면에서 쓴다(2026-10-09). PC·태블릿 상단바에는 계정 페이지 링크만 남고 로그아웃·배당 형식·언어·화면 모드·도움말·관리는 서랍으로 */
.tools-btn { display: inline-grid; place-items: center; }
.tools-drawer { display: flex; flex-direction: column; gap: 10px; position: fixed; inset: 0 0 0 auto; width: 280px; max-width: 85vw; z-index: 50; background: var(--surface); border-left: 1px solid var(--border); padding: 0 10px 12px; overflow-y: auto; transform: translateX(100%); transition: transform 0.2s ease; }
.tools-drawer.open { transform: translateX(0); }
/* 닫힌 서랍은 화면 밖에 있어도 링크가 Tab 순서에 남았다(2026-10-19 평가 05-1) → 닫히는 움직임(0.2초)이 끝난 뒤 visibility:hidden 으로 Tab·화면 낭독에서 뺀다. 열 때는 바로 보임 */
.tools-drawer:not(.open) { visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
@media (max-width: 1399px) { .sidebar:not(.open) { visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; } }
.tools-drawer .side-section { border: 0; background: transparent; }
.tools-drawer .side-section + .side-section { border-top: 1px solid var(--border); border-radius: 0; }
.tools-drawer .sidebar-top { display: flex; justify-content: flex-start; padding: 6px 6px 0; }
.tools-drawer .sidebar-close { display: inline-block; }
.tools-drawer .theme-toggle .theme-when-dark, .tools-drawer .theme-toggle .theme-when-light { display: contents; }
:root[data-theme="light"] .tools-drawer .theme-toggle .theme-when-dark { display: none; }
:root:not([data-theme="light"]) .tools-drawer .theme-toggle .theme-when-light { display: none; }
.tools-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 45; }
.tools-backdrop[hidden] { display: none; }
@media (min-width: 901px) {
    .topbar-tools > .dropdown, .topbar-tools > .theme-toggle, .topbar-tools > .topbar-nav, .topbar-auth .logout-form { display: none; }
    .tools-drawer .drawer-acct { display: none; } /* 계정 페이지 링크는 상단바에 있다 */
}
.rail { position: sticky; top: calc(var(--topbar-h) + var(--admin-bar-h) + 14px); display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - var(--topbar-h) - var(--admin-bar-h) - 28px); overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
/* 레일이 화면보다 길면 고정을 풀어 본문과 같이 흐르게(2026-10-21 사용자 지적 "우측 레일 아래가 잘림" — app.js railFit 이 재서 붙임) */
.rail.rail-flow { position: static; max-height: none; overflow: visible; }
.rail::-webkit-scrollbar { width: 6px; }
/* QA 2026-10-11(데20): 고정 레일(PC 배당표)은 맨 위로 버튼(.back-top)이 레일 끝을 가리지 않게 아래를 비운다.
   2026-10-17 밤: 리더보드가 본문 열로 내려가 레일이 맨 위에서 시작하자 "최대 높이 − 60px" 이 바닥을 화면 끝보다 74px 위에서 끊어 잘려 보였다(사용자 지적)
   → 높이는 사이드바와 같게(화면 끝 14px 위까지) 두고, 60px 은 레일 안쪽 아래 여백으로(끝까지 스크롤하면 마지막 위젯이 버튼 위로 올라온다) */
@media (min-width: 1400px) { .rail[data-rail] { padding-bottom: 60px; } }
.rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.rail > * { flex: none; }

/* ---------- 광고 슬롯 ---------- */
.ad { display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto; border-radius: 0; } /* 모든 광고 칸은 각진 모서리(PC·태블릿·모바일, 2026-10-11) */
.ad a, .ad img, .ad .ad-bg { border-radius: 0; }
.ad-placeholder { background: repeating-linear-gradient(45deg, transparent 0 8px, color-mix(in srgb, var(--border) 50%, transparent) 8px 16px); color: var(--muted); font-size: 11px; font-family: var(--mono); }
/* 최상단 광고(2026-10-17 밤): 리더보드 한 칸이 main.content 의 첫 요소(전엔 탑 좌·중·우 세 칸이 .layout 그리드 첫 행). 칸은 컨테이너 쿼리의 기준(리더보드 소재 전환은 칸 폭으로 판단).
   아래 여백 = 옛 그리드 행 간격과 같게(PC·태블릿 9, 폰 홈 5) */
.ad-cell { min-width: 0; container-type: inline-size; }
.ad-cell:empty { display: none; }
.content > .ad-cell-center { margin-bottom: 9px; }
@media (max-width: 900px) { body[data-layout="home"] .content > .ad-cell-center { margin-bottom: 5px; } }
/* 상단 줄 PC(1400 이상): 높이 90 고정. topLeft·topRight 는 300×90 원본 그대로.
   리더보드: 와이드 소재(.ad-img-wide, 1200×90) 한 장을 칸 폭에 맞춰 축소(1400 화면 732×55 ~ 1920 화면 1200×90)하고 90 높이 칸의 세로 가운데에 둔다.
   소재보다 남는 부분(좁은 화면은 위아래, 1200 초과 칸은 좌우)은 소재를 블러 확대한 .ad-bg 로 채운다(app.js topAdsBg) */
.ad-top { width: 100%; height: auto; min-height: 0; position: relative; overflow: hidden; }
.ad-top > a, .ad-top > img { position: relative; z-index: 1; max-width: 100%; }
.ad-leaderboard > a { width: 100%; }
.ad-leaderboard img.ad-img-wide { display: block; width: 100%; max-width: 970px; height: auto; } /* 970×90 표준(2026-10-15, 전 1200) */
.ad-bg { display: none; position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(24px) saturate(1.4); opacity: 0.5; pointer-events: none; }
@media (min-width: 1400px) {
    .ad-top { height: 90px; }
    .ad-top-left, .ad-top-right { width: 300px; }
    .ad-leaderboard .ad-bg { display: block; }
}
@container (min-width: 971px) { .ad-leaderboard .ad-bg { display: block; } } /* 태블릿 전체 폭이 1200 을 넘을 때도 좌우를 채운다 */
/* 이미지 배너 소재: 리더보드 = 와이드(.ad-img-wide 2400×180) + 모바일(800×180), 좌·우 = PC(.ad-img-pc 600×180, 300×90 원본 표시) + 모바일(400×120), 레일 = 모바일 1장.
   모바일 소재는 1399 이하에서 칸 폭 100%, 높이 자동(aspect-ratio 로 이미지 로드 전에 자리를 잡아 레이아웃이 튀지 않는다).
   리더보드는 화면 900 이하에서 모바일 소재로 전환. 소재가 한 장뿐이면 그 소재를 어느 화면에서든 칸에 맞춰 축소 */
.ad a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ad img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.ad .ad-img-mobile, .ad .ad-img-mid { display: none; }
/* 리더보드 중간 소재(728×90, 선택, 2026-10-10): 화면 901 이상에서 칸이 600~999px 이면 와이드를 줄이는 대신 이것을 원래 크기로(남는 좌우는 블러 배경) */
@container (min-width: 600px) and (max-width: 969px) {
    .ad-leaderboard:has(.ad-img-mid) .ad-img-wide { display: none; }
    .ad-leaderboard:has(.ad-img-mid) .ad-img-mid { display: block; width: 728px; max-width: 100%; height: auto; }
    .ad-leaderboard:has(.ad-img-mid) > a { width: auto; }
    .ad-leaderboard:has(.ad-img-mid) .ad-bg { display: block; }
}
.ad:not(:has(.ad-img-pc)):not(:has(.ad-img-wide)) .ad-img-mobile { display: block; } /* 모바일 소재만 있으면 PC 에서도 그걸 축소해 보여준다 */
/* 탑(좌·우)·일반의 모바일 소재를 칸 폭 가득: 폰(900 이하)만. 태블릿(901~1399)은 PC 와 같은 300×90 — 리더보드(최대 90 높이)보다 커지지 않게(2026-10-10) */
@media (min-width: 901px) and (max-width: 1399px) {
    .ad-top-left, .ad-top-right { width: 300px; height: 90px; }
}
@media (max-width: 900px) {
    .ad:not(.ad-leaderboard):has(.ad-img-mobile) { width: 100%; max-width: 100%; height: auto; min-height: 0; aspect-ratio: 320 / 100; }
    .ad:not(.ad-leaderboard):has(.ad-img-mobile) .ad-img-pc { display: none; }
    .ad:not(.ad-leaderboard):has(.ad-img-mobile) .ad-img-mobile { display: block; width: 100%; height: 100%; }
}
/* 리더보드 모바일 전환(2026-10-10): 다른 슬롯과 같이 화면 900 이하(전엔 칸 폭 600 미만). 728×90 규칙(위 컨테이너 쿼리)보다 뒤에 두어 덮어쓴다 */
@media (max-width: 600px) {
    .ad-leaderboard:has(.ad-img-mobile) { height: auto; min-height: 0; aspect-ratio: 320 / 100; }
    .ad-leaderboard:has(.ad-img-mobile) .ad-img-wide, .ad-leaderboard:has(.ad-img-mobile) .ad-img-mid, .ad-leaderboard:has(.ad-img-mobile) .ad-bg { display: none; }
    .ad-leaderboard:has(.ad-img-mobile) > a { width: 100%; }
    .ad-leaderboard:has(.ad-img-mobile) .ad-img-mobile { display: block; width: 100%; height: 100%; }
}
/* 601~900(폰 가로·작은 태블릿, 2026-10-15): 가운데는 320×100 을 줄 폭으로 늘리면 너무 높아(768×240) 728×90 을 원래 크기로, 남는 좌우는 블러 배경 */
@media (min-width: 601px) and (max-width: 900px) {
    .ad-leaderboard:has(.ad-img-mid) { height: 90px; min-height: 90px; aspect-ratio: auto; }
    .ad-leaderboard:has(.ad-img-mid) .ad-img-wide, .ad-leaderboard:has(.ad-img-mid) .ad-img-mobile { display: none; }
    .ad-leaderboard:has(.ad-img-mid) .ad-img-mid { display: block; width: 728px; max-width: 100%; height: auto; }
    .ad-leaderboard:has(.ad-img-mid) > a { width: auto; }
    .ad-leaderboard:has(.ad-img-mid) .ad-bg { display: block; }
}

/* ---------- 페이지 헤더 / 컨트롤 ---------- */
.page-head { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.page-logo { width: 40px; height: 40px; object-fit: contain; }
.page-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.page-sub { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.page-head-howto { margin-left: auto; flex: none; font-size: 12.5px; white-space: nowrap; } /* 배당표 제목 우측 "? 표 읽는 법"(2026-10-14 저녁) */
.controls { margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
.control-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.select, .input { height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.input-xs { width: 70px; height: 28px; }
.btn { height: 34px; padding: 0 12px; border: 1px solid var(--brand-bg); border-radius: 8px; background: var(--brand-bg); color: var(--brand-ink); font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-on { background: var(--best-ink); border-color: var(--best-ink); color: #111; } /* 다크: 연두 바탕 + 검정 글씨(2026-10-10, 흰 글씨는 눈이 아픔) */
:root[data-theme="light"] .btn-on { color: #fff; } /* 낮 모드: 바탕이 진한 초록이라 흰 글씨 */
.inline { display: inline-flex; gap: 4px; align-items: center; }
.bm-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.hint { color: var(--muted); font-size: 12.5px; margin: 4px 0 12px; }
.best-sample { background: var(--best-bg); color: var(--best-ink); padding: 0 6px; border-radius: 4px; font-weight: 600; }
.empty { text-align: center; padding: 60px 16px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* ---------- 리그 블록 + 표 ---------- */
.league-block { margin-bottom: 20px; }
.league-title { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 8px; }
.league-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }
.league-sub { color: var(--muted); font-weight: 400; font-size: 12px; }
/* 경기 행·상세의 대회·단계명(이스포츠: LCK Playoffs 등). 팀명 아래 한 줄, 넘치면 말줄임 */
.match-stage { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; margin-top: 2px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-head-league .match-stage { display: inline; margin-left: 6px; font-size: 12px; }
/* 리그 줄 우측 갱신 카운트다운 */
.league-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.league-live .live-timer { font-family: var(--mono); font-size: 11.5px; min-width: 32px; text-align: right; color: var(--text); }
/* 빈 칸은 자리를 차지하지 않게: 변동 없음·갱신됨 문구는 시간 칸이 비어 오른쪽 끝에 붙고, 카운트다운은 글자 칸이 비어 점 + 시간만 */
.league-live .live-timer:empty, .league-live .live-label:empty { display: none; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgb(19 122 58 / 0.5); animation: live-dot 2.4s ease-out infinite; }
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgb(19 122 58 / 0.45); } 70% { box-shadow: 0 0 0 6px rgb(19 122 58 / 0); } 100% { box-shadow: 0 0 0 0 rgb(19 122 58 / 0); } }
.league-live.is-checking .live-dot { background: var(--brand); animation: none; }
.league-live.is-updated { color: var(--up); }
.league-live.is-updated .live-dot { background: var(--up); }
.league-live.is-paused .live-dot { background: var(--muted); animation: none; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.table-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); cursor: grab; }
.odds-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 900px; }
.simple-table { min-width: 720px; }
.odds-table th, .odds-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.odds-table thead th { background: var(--surface-2); font-weight: 600; font-size: 12px; color: var(--muted); }
.odds-table thead tr.sub-head th { font-weight: 500; font-size: 11px; padding-top: 3px; padding-bottom: 5px; }
.odds-table tbody tr:last-child td { border-bottom: 0; }
.odds-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.odds-table tbody td.col-time, .odds-table tbody td.col-logos, .odds-table tbody td.col-match, .odds-table thead th.col-time, .odds-table thead th.col-logos, .odds-table thead th.col-match { position: sticky; background: var(--surface); z-index: 1; }
.odds-table .col-time { left: 0; }
.odds-table .col-match { left: 86px; box-shadow: 1px 0 0 var(--border); }
/* 전체 북메이커 뷰: 로고 열(34) 뒤에 팀명 열. PC 는 둘 다 고정 */
.odds-table .col-logos { left: 86px; width: 34px; min-width: 34px; max-width: 34px; padding-left: 8px; padding-right: 0; text-align: left !important; }
.odds-table .col-names { left: 120px; min-width: 186px; }
.col-logos .team { height: 22px; }
.odds-table thead th.col-time, .odds-table thead th.col-logos, .odds-table thead th.col-match { background: var(--surface-2); }
.col-time { text-align: left !important; width: 86px; min-width: 86px; max-width: 86px; }
.col-match { text-align: left !important; min-width: 220px; }
.col-line { width: 70px; }
/* ★ 알림 + ✎n 분석글 수 열(2026-10-14 사용자 결정): 경기 열 바로 오른쪽 34px, 머리글 없음, 위 ★ 아래 ✎n. 전엔 ★ 는 시간 칸·✎n 은 팀명 아래 셋째 줄(그 행만 높아졌다) */
.col-mark { width: 34px; min-width: 34px; max-width: 34px; padding-left: 2px !important; padding-right: 2px !important; text-align: center !important; vertical-align: middle; }
.col-mark-in { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.col-mark .watch-star { margin: 0; }
.col-mark .an-bubble { margin: 0; }
.col-pill { width: 84px; }
.col-books { width: 60px; }
.col-bm .bm-name { display: inline-block; max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.bm-sharp { color: var(--brand); }
.col-best, .best-col { background: color-mix(in srgb, var(--best-bg) 45%, transparent); }
.odds-table thead th.col-best { color: var(--best-ink); }
.time { display: block; font-family: var(--mono); font-weight: 600; font-size: 13px; }
.date { display: block; color: var(--muted); font-size: 11px; }
.match-link { display: flex; flex-direction: column; gap: 2px; }
.match-link:hover { text-decoration: none; }
.match-link:hover .team-name { text-decoration: underline; }
.team { display: inline-flex; align-items: center; gap: 6px; }
.team-logo { width: 20px; height: 20px; object-fit: contain; flex: none; }
.team-initials { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: 700; }
.team-name { font-weight: 500; }
.team.lg { flex-direction: column; gap: 8px; }
.team.lg .team-logo, .team.lg .team-initials { width: 56px; height: 56px; font-size: 16px; }
.team.lg .team-name { font-size: 18px; font-weight: 700; }
/* 배당 셀: 숫자는 기본색. 배경 = 최고 배당, 첨자 = 변동 방향, 펄스 = 방금 바뀜 (세 채널 분리) */
.odd { font-family: var(--mono); font-size: 13px; }
.odd.best { background: var(--best-bg); font-weight: 700; }
.odd.suspended { color: var(--muted); text-decoration: line-through; opacity: 0.6; }
.chg-arrow { display: inline-block; width: 9px; font-size: 8px; margin-left: 1px; vertical-align: 2px; line-height: 1; }
.chg-arrow.up { color: var(--up); }
.chg-arrow.down { color: var(--down); }
/* 방금 바뀐 값: 글자색이 방향색으로 3회 깜빡인 뒤 유지되다가 15초에 기본색으로 돌아온다 (배경은 최고 배당 전용으로 남긴다) */
@keyframes flash-up {
    0% { color: var(--text); } 3.3% { color: var(--up); } 6.6% { color: var(--text); } 10% { color: var(--up); }
    13.3% { color: var(--text); } 16.6% { color: var(--up); } 65% { color: var(--up); } 100% { color: var(--text); }
}
@keyframes flash-down {
    0% { color: var(--text); } 3.3% { color: var(--down); } 6.6% { color: var(--text); } 10% { color: var(--down); }
    13.3% { color: var(--text); } 16.6% { color: var(--down); } 65% { color: var(--down); } 100% { color: var(--text); }
}
.pulse-up .odd-v, .pulse-up .payout-val, .pulse-up.odd-v { animation: flash-up 15s linear 1 forwards; }
.pulse-down .odd-v, .pulse-down .payout-val, .pulse-down.odd-v { animation: flash-down 15s linear 1 forwards; }
@media (prefers-reduced-motion: reduce) {
    .pulse-up .odd-v, .pulse-up .payout-val { animation: none; color: var(--up); }
    .pulse-down .odd-v, .pulse-down .payout-val { animation: none; color: var(--down); }
}
.books { color: var(--muted); }
.line { font-family: var(--mono); font-weight: 600; }
.line-count { color: var(--muted); font-size: 11px; margin-left: 3px; }
.tag { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--muted); font-size: 10.5px; font-weight: 600; vertical-align: middle; }
.tag-live { background: var(--live); color: #fff; }
.tag-warn { background: var(--warn-bg); color: var(--warn-ink); }
/* 프리매치 전용(2026-10-10): 시작한 경기(is-started)는 배당을 더 받지 않으므로 배당·최고 배당 배경·칩을 회색으로. 종료(status-finished)·취소(status-other)면 팀명도 회색 */
.is-started .odd, .is-started .odd-v, .is-started .pill-odd, .is-started .col-best, .is-started .line, .is-started .line-count, .is-started .payout-val, .is-started .payout, .is-started .avg { color: var(--muted) !important; }
.is-started .odd.best, .is-started td.col-best, .is-started .best-col { background: transparent; font-weight: 500; }
.is-started .bm-chip, .is-started .chg-arrow { opacity: 0.45; }
.is-started td.payout.arb, .is-started td.payout { background: transparent !important; }
.is-started .payout-single { opacity: 0.5; }
.is-started .pill { border-color: var(--border); }
.is-started .pill:hover { border-color: var(--muted); }
.status-finished .team-name, .status-other .team-name { color: var(--muted); font-weight: 400; }
.status-other td { opacity: 0.7; }
/* 점수: 팀명 우측 고정폭 숫자. 종료 경기의 이긴 쪽만 본문색·굵게, 나머지는 회색 */
.team-score { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 8px; min-width: 1.4em; text-align: right; }
.team-score.is-win { color: var(--text); font-weight: 800; }
.status-live .team-score { color: var(--text); }
.row-state { display: block; }
td[hidden], th[hidden] { display: none; }

/* 요약 뷰: 최고 배당 알약 */
.pill { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); line-height: 1.2; }
.pill:hover { text-decoration: none; border-color: var(--brand); }
.pill-odd { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--text); }
.pill-foot { display: inline-flex; align-items: center; gap: 4px; min-height: 15px; }
.pill-empty { color: var(--muted); }
.pill-empty .bm-chip { display: none; }
/* 최고 조합 환급률 셀 */
.col-payout { min-width: 120px; }
.payout { font-family: var(--mono); font-size: 13px; }
.payout-val { font-weight: 700; }
.payout-single { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; }
.payout.arb .payout-val { color: var(--best-ink); }
.payout.arb { background: color-mix(in srgb, var(--best-bg) 70%, transparent); }
.payout-stale { font-size: 10px; margin-left: 3px; opacity: 0.7; }
/* 조합 환급률 목록 항목(PC 배당표 레일): 1줄 팀명 | 환급률(우측 고정), 2줄 리그 · 북메이커 수, 3줄 다리별 조합(100% 이상) */
.po-teams { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; }
.po-teams em { font-style: normal; color: var(--muted); font-size: 11px; }
.po-payout { flex: none; font-family: var(--mono); font-weight: 700; font-size: 13px; }
.po-payout.up { color: var(--best-ink); }
.bm-chip { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--bm, #6b7280); color: var(--bm-ink, #fff); font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 15px; white-space: nowrap; }

/* ---------- 우측 레일 위젯 ---------- */
.widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.widget-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; }
.widget-title .league-live { font-weight: 500; }
.widget-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 긴 리그명이면 말줄임 */
/* 레일/홈 위젯 갱신 애니메이션: 목록 페이드, 새 항목 슬라이드 인 + 강조 테두리 */
@keyframes rail-refresh { 0% { opacity: 0.35; } 100% { opacity: 1; } }
.rail-refresh { animation: rail-refresh 0.6s ease-out 1; }
@keyframes rail-new { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes rail-new-ring { 0% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 60%, transparent); } 100% { box-shadow: 0 0 0 2px transparent; } }
li.rail-new, tr.rail-new { animation: rail-new 0.45s ease-out both, rail-new-ring 1.5s ease-out both; border-radius: 8px; }
.pulse-up .po-payout, .po-payout.pulse-up, .payout-val.pulse-up { animation: flash-up 15s linear 1 forwards; }
.pulse-down .po-payout, .po-payout.pulse-down, .payout-val.pulse-down { animation: flash-down 15s linear 1 forwards; }
@media (prefers-reduced-motion: reduce) { .rail-refresh, li.rail-new, tr.rail-new { animation: none; } .po-payout.pulse-up, .payout-val.pulse-up { animation: none; color: var(--up); } .po-payout.pulse-down, .payout-val.pulse-down { animation: none; color: var(--down); } }
.widget-empty { margin: 0; color: var(--muted); font-size: 12px; }
.widget-list { list-style: none; margin: 0; padding: 0; }
.widget-list li { padding: 8px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.widget-list li:first-child { border-top: 0; padding-top: 0; }
.widget-oc { padding: 0 5px; border-radius: 4px; background: var(--surface-2); color: var(--text); font-size: 10.5px; font-weight: 700; }

/* ---------- 상세 ---------- */
.crumbs { margin: 2px 0 10px; color: var(--muted); font-size: 12.5px; }
.crumbs a.active { color: var(--text); font-weight: 600; }
.match-head { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 16px; margin-bottom: 18px; }
.match-head-league { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 12px; justify-content: center; }
.match-head-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.match-head-teams .team.lg:first-child { justify-self: end; }
.match-head-teams .team.lg:last-child { justify-self: start; }
.match-head-center { padding: 0 12px; text-align: center; }
.kickoff { font-family: var(--mono); font-size: 16px; font-weight: 600; }
.score { font-family: var(--mono); font-size: 28px; font-weight: 700; }
.match-head-meta { text-align: center; color: var(--muted); font-size: 11.5px; margin-top: 12px; }
.market-block { margin-bottom: 24px; }
.market-title { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 18px 0 8px; }
.detail-table { min-width: 700px; }
/* 경기 상세 긴 표 머리글 고정(QA 3차, 폰 900 이하): app.js detailHeadFloat 가 thead 칸을 상단바 아래로 translateY — 가로 스크롤 상자 안이라 sticky 대신 */
.detail-table.head-float thead th { position: relative; z-index: 3; }
.detail-table.head-float thead tr:last-child th { box-shadow: 0 2px 0 var(--border); } /* 흐림 그림자는 칸마다 끊겨 보여서 실선만 */
/* 취소선(중단) 배당 범례 한 줄(QA 3차): 그 표에 중단 배당이 있을 때만 표 아래 */
.odds-legend { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.odds-legend-sample { text-decoration: line-through; margin-right: 6px; font-variant-numeric: tabular-nums; }
.line-main td { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.line-minor td { opacity: 0.6; }
.changes-table { min-width: 600px; }
.chart { height: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.chart svg { width: 100%; height: 100%; }

/* ---------- 관리 ---------- */
.admin-nav a { margin-right: 4px; }
.admin-table { min-width: 700px; }
.admin-table td, .admin-table th { text-align: left; } /* 2026-10-16: 머리글도 칸과 같은 왼쪽(전엔 머리글만 가운데) */
/* 관리 표 열 정렬(app.js 가 열 내용을 보고 붙임): 숫자 오른쪽 · 짧은 상태 가운데 */
.admin-table .al-r, .ledger-table .al-r, .dash-table .al-r { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table .al-c, .ledger-table .al-c, .dash-table .al-c { text-align: center; }
.row-on td { background: color-mix(in srgb, var(--best-bg) 35%, transparent); }
.row-err td { background: color-mix(in srgb, var(--warn-bg) 60%, transparent); }
.err { color: var(--down); font-size: 11px; white-space: normal; max-width: 320px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.stat-title { font-weight: 700; margin-bottom: 6px; }
.stat-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.stat-row strong { color: var(--text); font-family: var(--mono); }

/* ---------- 푸터 ---------- */
.footer { margin-top: 40px; padding: 20px 0 32px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.footer p { margin: 4px 0; }
/* 링크 줄(2026-10-11 정리): 버튼 모양 대신 가는 글자 링크 + 가운데점. 넘치면 줄바꿈 */
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin-bottom: 8px !important; }
.footer-link { color: var(--text); font-size: 12px; font-weight: 400; opacity: 0.85; white-space: nowrap; }
.footer-link:hover { opacity: 1; color: var(--brand); }
.footer-sep { margin: 0 7px; color: var(--muted); }
.footer-copy { margin-top: 8px !important; }
.footer { padding-bottom: 72px; } /* QA 2026-10-11(데20): 맨 끝까지 내렸을 때 맨 위로 버튼(.back-top, 아래 18 + 42)이 마지막 줄·광고를 가리지 않게 */

/* ---------- 반응형 ---------- */
@media (max-width: 1399px) {
    /* 2026-10-14 저녁(사용자 결정): 1400 미만은 좌측 사이드바 열이 없다 — 종목·리그는 표 위 필터 줄(.filter-bar), 페이지 메뉴는 ☰ 서랍(.side-pages). 전엔 태블릿 200px 사이드바 열 */
    .layout { grid-template-columns: minmax(0, 1fr); }
    .layout-wide { grid-template-columns: minmax(0, 1fr); } /* 로그인·가입·관리 등 wide 는 한 열 그대로 */
    .menu-btn { display: inline-grid; place-items: center; }
    .sidebar { position: fixed; inset: 0 auto 0 0; width: 300px; max-width: 85vw; max-height: none; border-radius: 0; z-index: 50; transform: translateX(-100%); transition: transform 0.2s ease; background: var(--surface); border-right: 1px solid var(--border); padding: 0 10px 12px; gap: 10px; }
    .sidebar .side-section { border: 0; background: transparent; }
    .sidebar .side-section + .side-section { border-top: 1px solid var(--border); border-radius: 0; }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: inline-block; }
    .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 45; }
    .sidebar-backdrop[hidden] { display: none; }
    .layout-wide > .sidebar, .layout-member > .sidebar { display: flex; }
    .sidebar .side-filter { display: none; } /* 종목·리그 필터는 표 위 줄(.filter-bar)로 */
    /* (2026-10-17 밤) 탑 좌·우 칸 규칙 제거 — 리더보드는 본문 첫 요소라 1열 그리드에서 자연히 전체 폭 */
    .rail { grid-column: 1 / -1; position: static; max-height: none; overflow: visible; }
    /* 배당표(app): TOP 위젯 레일을 사이드바 밑까지 펼치지 않고 본문 열 아래에 위아래로(2026-10-10, 전엔 좌우). 배너는 JS 가 위젯 아래로 넣는다 */
    body[data-layout="app"] .rail[data-rail] { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
    body[data-layout="app"] .rail[data-rail] .widget { flex: none; min-width: 0; }
}
@media (max-width: 900px) {
    .layout { grid-template-columns: minmax(0, 1fr); row-gap: 9px; padding-top: 7px; } /* 상단바 → 리더보드 14 → 7 */
    .brand-badge { height: 36px; } /* ☰ 메뉴 버튼과 같은 높이 */
    /* 서랍(.sidebar fixed·☰ 버튼·배경막)은 2026-10-14 저녁부터 1399 이하 공통 규칙(위) */
    .topbar-inner { gap: 8px; }
    .topbar-tools { gap: 5px; display: none; }
    .theme-toggle .theme-txt { display: none; } /* 모바일: 아이콘만 */
    .topbar-nav { display: none; } /* 주 메뉴는 ☰ 서랍 안으로(모든 레이아웃) */
    /* 상단바 도구(로그인·회원가입·배당 형식·언어·화면 모드)는 우측 ⋮ 서랍으로 */
    .tools-btn { margin-left: auto; }
    /* 리그 제목 줄: 영문 부제를 숨겨 한 줄로. 제목이 길면 말줄임 */
    .league-sub { display: none; }
    .league-title { font-size: 14px; }
    .league-title a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* ---- 모바일 배당표 ---- */
    /* 요약 뷰: 행을 카드로. DOM 은 표 그대로라 실시간 갱신(liveUpdates)이 그대로 동작한다. 열 제목은 셀의 data-label 로 */
    .simple-table { min-width: 0; }
    .simple-table, .simple-table tbody { display: block; }
    .simple-table thead { display: none; }
    .simple-table tr.match-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 8px; align-items: end; padding: 10px 12px; border-bottom: 1px solid var(--border); }
    .simple-table tr.match-row:last-child { border-bottom: 0; }
    .simple-table tr.match-row:hover td { background: transparent; }
    .simple-table tr.match-row td { display: block; width: auto; min-width: 0; max-width: none; padding: 0; border: 0; white-space: normal; text-align: left; position: static !important; box-shadow: none; }
    .simple-table td.col-time, .simple-table td.col-match, .simple-table td.col-line { grid-column: 1 / -1; }
    .simple-table td.col-time { display: flex; align-items: center; gap: 6px; }
    .simple-table td.col-time .time, .simple-table td.col-time .date { display: inline; }
    .simple-table td.col-time .date { order: -1; }
    .simple-table .match-link { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
    .simple-table .match-link .team + .team::before { content: 'vs'; color: var(--muted); font-size: 11px; margin-right: 6px; }
    .simple-table td.col-line { display: flex; align-items: center; gap: 6px; font-size: 12px; }
    .simple-table td.col-line::before { content: attr(data-label); color: var(--muted); font-size: 10.5px; }
    .simple-table td.col-pill { grid-column: span 2; }
    .simple-table[data-outcomes="2"] td.col-pill { grid-column: span 3; }
    .simple-table td.col-pill::before, .simple-table td.payout::before, .simple-table td.books::before { content: attr(data-label); display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .simple-table td.col-pill .pill { display: flex; width: 100%; }
    .simple-table td.payout { grid-column: span 4; }
    .simple-table td.payout.arb { padding: 4px 8px; border-radius: 6px; }
    .simple-table .payout-single { display: inline; margin-left: 6px; }
    .simple-table tr.match-row td.books { grid-column: span 2; text-align: right; } /* 제목(::before)과 숫자 모두 오른쪽 정렬 */
    /* 전체 북메이커 뷰: 시간(50)·로고(28) 열을 고정하고 팀명·북메이커 칸은 손가락으로 민다.
       QA 2026-10-11(데13): 400 폭에서 첫 북메이커(승·무·패)가 처음부터 다 보이게 고정 칸·팀명 칸·배당 칸 여백을 줄이고, 날짜는 잘리지 않게 두 줄 */
    .odds-table:not(.simple-table) .col-time { width: 50px; min-width: 50px; max-width: 50px; padding-left: 6px; padding-right: 2px; }
    .odds-table:not(.simple-table) .col-time .time { font-size: 12px; }
    .odds-table:not(.simple-table) .col-time .date { font-size: 9.5px; line-height: 1.2; white-space: normal; }
    /* 로고 열까지만 고정(50+28), 팀명부터 밀린다. 팀명 칸은 화면 폭에 따라 80~140 */
    .odds-table:not(.simple-table) .col-logos { left: 50px; width: 28px; min-width: 28px; max-width: 28px; padding-left: 4px; box-shadow: 1px 0 0 var(--border); }
    .odds-table:not(.simple-table) .col-names { position: static !important; box-shadow: none; min-width: clamp(80px, calc(100vw - 284px), 140px); max-width: clamp(80px, calc(100vw - 284px), 150px); padding-left: 6px; padding-right: 4px; }
    .odds-table:not(.simple-table) .team-name { max-width: clamp(70px, calc(100vw - 294px), 108px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .odds-table:not(.simple-table) td.odd { padding-left: 3px; padding-right: 3px; }
    .team-score { margin-left: 4px; font-size: 12px; }
    .odds-table:not(.simple-table) th, .odds-table:not(.simple-table) td { padding-left: 6px; padding-right: 6px; }
    /* 오른쪽에 더 있다는 힌트: 처음에만 보이고, 한 번이라도 밀거나(.has-scrolled) 끝에 닿으면(.at-end) 사라진다 — 초록 칸 위에 그늘이 남지 않게 */
    .table-scroll { position: relative; }
    .table-scroll:has(.odds-table:not(.simple-table)):not(.at-end):not(.has-scrolled)::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; background: linear-gradient(to left, var(--surface), transparent); pointer-events: none; }
    .match-head-teams { grid-template-columns: 1fr; }
    .match-head-teams .team.lg:first-child, .match-head-teams .team.lg:last-child { justify-self: center; }
    .team.lg .team-name { font-size: 15px; }
    .ad-top { height: 60px; min-height: 60px; } /* 폰 가로(601~900): 리더보드 와이드 소재를 60 높이로 */
}

/* ---------- 도움말 ---------- */
.howto { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-weight: 500; }
.howto-q { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 10px; font-weight: 700; line-height: 1; }
.guide { max-width: 1120px; margin: 0 auto 40px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 32px; line-height: 1.7; }
.guide h1 { margin: 0 0 10px; font-size: 24px; }
.guide h2 { margin: 26px 0 8px; font-size: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.guide-lead { color: var(--muted); margin: 0 0 6px; }
/* 공지사항(2026-10-14 저녁, 옛 도움말): 목차 칩 · 날짜 공지 목록 · 표 읽는 법 아래 h3 */
.guide h3 { margin: 18px 0 6px; font-size: 14.5px; font-weight: 700; }
.guide-notices { list-style: none; padding: 0; }
.guide-notices li { display: flex; gap: 12px; align-items: baseline; margin: 6px 0; }
/* 공지 한 줄 + 접기(2026-10-15): 날짜 · 말줄임 내용 · ▾ (종류 뱃지는 2026-10-17 공지·업데이트 절 분리로 제거) */
.guide-notices li.gn { align-items: center; gap: 8px; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--border); }
.guide-notices li.gn[hidden] { display: none; }
.gn-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.gn.open { align-items: flex-start; }
.gn.open .gn-text { white-space: normal; }
.gn-toggle { margin-left: 0; height: 24px; min-width: 24px; }
.gn-pager { margin-top: 10px; }
.guide-notices time { flex: none; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
@media (max-width: 600px) { .guide-notices li:not(.gn) { flex-direction: column; gap: 2px; } .gn time { font-size: 11.5px; } }
.guide h2[id] { scroll-margin-top: 70px; }
/* 공지사항 절 접기(2026-10-15): 제목 줄 = 제목 + 우측 ▾, 누르면 펼침. 맨 위 제목 옆 "모두 펼치기" */
.guide [id] { scroll-margin-top: 70px; }
.guide h2.gsec-h { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.guide h2.gsec-h .gsec-btn { margin-left: auto; flex: none; }
.guide h2.gsec-h:not(.is-open) { margin-bottom: 0; }
.gsec-body[hidden] { display: none; }
.guide > h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.guide > h1 .gsec-all { margin-left: auto; font-size: 12px; font-weight: 500; } /* 앵커로 이동할 때 고정 상단바에 가리지 않게 */
/* 화면에서는 숨기고 검색엔진·스크린리더에만 보이는 제목(홈·경기 상세 h1, 2026-10-10) */
.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; }
.guide ul { padding-left: 20px; margin: 0; }
.guide li { margin: 6px 0; }
.guide li strong { font-weight: 700; }
@media (max-width: 720px) { .guide { padding: 18px 16px; } }

/* ---------- 넓은 표 보조: 하단 고정 가로 스크롤바 / 끌어서 이동 ---------- */
.hscroll { position: fixed; bottom: 0; height: 14px; overflow-x: auto; overflow-y: hidden; background: var(--surface); border-top: 1px solid var(--border); z-index: 25; scrollbar-width: thin; }
.hscroll[hidden] { display: none; }
.hscroll-inner { height: 1px; }
.hscroll::-webkit-scrollbar { height: 12px; }
.hscroll::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 6px; border: 3px solid var(--surface); }
.hscroll::-webkit-scrollbar-track { background: var(--surface); }
.table-scroll.dragging { cursor: grabbing; user-select: none; }
.table-scroll a, .table-scroll .pill { cursor: pointer; }

/* ---------- 사이드바 접기 ---------- */
.sidebar-top { display: none; }
.side-fold { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; display: flex; justify-content: space-between; align-items: center; }
.side-fold:hover { color: var(--text); }
.side-chev { transition: transform 0.15s; font-size: 12px; color: var(--muted); }
.side-fold[aria-expanded="false"] .side-chev { transform: rotate(-90deg); }
html.fold-sports .side-section[data-side-section="sports"] .side-list,
html.fold-leagues .side-section[data-side-section="leagues"] .side-list { display: none; }
/* 접힌 카드 머리의 현재 선택 "(전종목)·(축구)·(리그명)"(2026-10-14 저녁): 접혔을 때만 */
.side-fold-cur { display: none; margin-left: 2px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
html.fold-sports .side-section[data-side-section="sports"] .side-fold-cur,
html.fold-leagues .side-section[data-side-section="leagues"] .side-fold-cur { display: inline; }
.side-logo-all { display: inline-grid; place-items: center; font-size: 11px; color: var(--muted); }

@media (max-width: 1399px) { .sidebar-top { display: flex; justify-content: flex-end; padding: 6px 6px 0; } } /* 서랍 닫기 ✕(2026-10-14 저녁부터 1399 이하) */
.side-fold:hover .side-chev { color: var(--text); }

/* ---------- 전문가 칼럼 ---------- */
/* 칼럼 라벨(글 머리) */
.col-teaser-label { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand); }
/* 칼럼: 3단 본문 안에 한 열. 글 위에 ‹ 이전 | 날짜 칩 | 다음 › 내비게이션(지난 칼럼 목록 대체) */
.column-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; max-width: 1120px; margin: 0 auto 40px; }
.column-nav { display: flex; align-items: center; gap: 8px; min-width: 0; }
.column-layout > .home-top2 { margin-top: 0; } /* 그리드 간격이 이미 있다 */
.column-nav-btn { flex: none; }
.column-nav-btn.is-disabled { opacity: 0.4; cursor: default; }
.column-nav-dates { display: flex; justify-content: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.column-nav-date { flex: none; }
.column-nav-date[hidden] { display: none; }
.column-nav-date .tag { margin-left: 2px; }
.column-article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 32px; line-height: 1.75; }
.column-meta { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.column-title { margin: 0 0 12px; font-size: 24px; line-height: 1.3; }
.column-summary { font-size: 15px; color: var(--muted); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.column-body h2 { margin: 24px 0 8px; font-size: 17px; }
.column-body h3 { margin: 18px 0 6px; font-size: 15px; }
.column-body p { margin: 8px 0; }
.column-body ul, .column-body ol { padding-left: 22px; margin: 6px 0; }
.column-body li { margin: 4px 0; }
.column-body blockquote { margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--brand); background: var(--surface-2); border-radius: 0 8px 8px 0; color: var(--muted); }
.column-body hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.column-body a { color: var(--brand); }
.column-notice { margin-top: 22px; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; color: var(--muted); font-size: 12px; }
.admin-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.col-form { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.col-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.col-form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.col-form-row label.bm-pick { flex-direction: row; align-items: center; height: 34px; }
.input-wide { width: 100%; }
.textarea { width: 100%; height: auto; padding: 10px; font-family: var(--mono); font-size: 13px; line-height: 1.5; resize: vertical; }
@media (max-width: 900px) { .column-article { padding: 18px 16px; } .column-nav { gap: 6px; } }

/* ---------- 홈 ---------- */
/* 배당표·경기 상세의 칼럼 한 줄 + 상단 광고 2개 묶음. 둘 다 비면 통째로 숨긴다 */
.col-strip { margin-bottom: 14px; }
.col-strip:has(> .home-top2:empty:only-child) { display: none; }
/* 1400px 미만: 상단 좌/우 광고가 클로드 한 줄 아래 좌우로 내려온다(JS 가 채움). 640 미만은 위아래 */
.home-top2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; justify-items: center; }
.home-top2:empty { display: none; }
.home-top2 .ad { max-width: 100%; }
.home-top2 .ad-top-left { width: 300px; }
/* 본문 폭 위젯: 레일 파셜을 그대로 쓰되 세로로 쌓는다 */
.home-widgets { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
/* 모바일: 광고와 카드 사이 간격을 절반으로(기본 규칙 뒤에 두어야 덮어쓴다). 상단 광고 줄과 본문 사이 그리드 행 간격도 18 → 9 */
@media (max-width: 900px) {
    .home-top2 { gap: 6px; margin-top: 6px; }
    .home-widgets { gap: 7px; margin-top: 7px; }
    .col-strip { margin-bottom: 7px; }
}
.home-widgets .widget-title { font-size: 14px; }
/* PC(901px~): 홈 TOP 위젯 여백·제목(내용은 요약 표, 2026-10-10) */
@media (min-width: 901px) {
    .home-widgets .widget { padding: 14px; }
    .home-widgets .widget-title { margin-bottom: 10px; }
}
/* 1400 미만: 글·도움말 카드 아래에 배너가 오므로 카드의 아래 여백(40px)은 빼고 그리드 간격만 둔다 */
@media (max-width: 1399px) { .guide, .column-layout { margin-bottom: 0; } }
@media (max-width: 900px) { body[data-layout="app"] .rail[data-rail] { grid-column: 1; grid-template-columns: minmax(0, 1fr); gap: 7px; } }
/* 태블릿(901~1399px): 두 TOP 위젯은 위아래(2026-10-10, 표가 반쪽 폭에 들어가지 않는다). 위젯 아래 배너 칸 수는 JS(topAds)가 줄에 들어가는 300 칸 수로 인라인 지정(2026-10-11), 아래 2열은 JS 전 기본값 */
@media (min-width: 901px) and (max-width: 1399px) {
    .home-widgets .widget { min-width: 0; }
}
/* 홈 위젯 상위 4개 + 더 보기(2026-10-11): 접혀 있으면 5행부터 숨기고, 펼쳐도 10행까지만(랭킹 전체는 '전체 보기 →' 페이지) */
.home-fold:not(.is-open) .po-table tbody tr:nth-child(n+4),
.home-fold:not(.is-open) .bmrank-table tbody tr:nth-child(n+4),
.home-fold .po-table tbody tr:nth-child(n+11),
.home-fold .bmrank-table tbody tr:nth-child(n+11) { display: none; }
.fold-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 32px; margin-top: 8px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.fold-more:hover { color: var(--text); border-color: var(--brand); }
.fold-more-chev { font-size: 10px; transition: transform 0.15s; }
.home-fold.is-open .fold-more-chev { transform: rotate(180deg); }

/* ---- 가입·마이페이지: 국가·언어·배당 형식 3열, 관리 광고 설정 (2026-10-09) ---- */
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) { .form-row-3 { grid-template-columns: 1fr; } }
.form-hint-block { margin: -4px 0 4px; }
.admin-h2 { font-size: 15px; margin: 22px 0 8px; }
.admin-table-narrow { min-width: 420px; }
.admin-table .muted { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.input-price { width: 96px; height: 30px; padding: 0 8px; text-align: right; }

/* ---- 충전·출금 (3단계, 2026-10-09) ---- */
.dep-addr-row { display: flex; gap: 8px; align-items: center; }
.dep-addr { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 12.5px; word-break: break-all; }
.wd-to { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; font-size: 14px; }
.wd-to .dep-addr { display: block; font-size: 13px; color: var(--text); }
.dep-addr-inline { font-size: 12px; word-break: break-all; }
.wd-payout { margin: 6px 0 0; font-size: 14px; }
.wd-payout.ok .key-hl { color: var(--up); }
.wd-payout.bad .key-hl { color: var(--down); }
.wd-info .wd-rules { margin: 0; line-height: 1.9; }
.wd-info .wd-rules a { color: var(--brand); }
.wd-card [data-wd-amount] { width: 180px; max-width: 100%; }
.wd-card-title { display: flex; align-items: center; gap: 8px; }
.me-card-title.wd-card-title .tag.chain-tag { font-size: 12.5px; font-weight: 600; padding: 2px 8px; }
.me-card-title.wd-card-title .chain-logo { width: 15px; height: 15px; }
.wd-card .wd-payout .muted { font-size: 12px; font-weight: 400; }
.wd-amount-row { display: flex; gap: 8px; align-items: center; }
.wd-amount-row .btn { height: 34px; }
.wd-card [data-wd-submit] { align-self: flex-start; }
.wd-card [data-wd-submit][hidden] { display: none; }
.otp-gate [data-otp-send]:disabled { opacity: 0.45; cursor: not-allowed; } /* 출금 금액 칸: 숫자 몇 자리만 들어가므로 좁게(2026-10-10) */
.wd-rules { margin: 6px 0 2px; padding-left: 20px; font-size: 12.5px; font-weight: 400; color: var(--muted); line-height: 1.8; } /* 출금 규칙 번호 목록: 작고 흐린 보조 글자 */
/* 출금 카드(2026-10-10): 잔액·받을 금액의 숫자와 USDT 를 같은 크기로(줄 글자 크기 그대로) */
.wd-payout strong { font-size: inherit; }
.wd-card .me-kv { align-items: center; font-size: 14px; }
.wd-card .me-balance, .wd-card .me-unit { font-size: inherit; font-weight: 600; color: inherit; }
.ledger-table td, .ledger-table th { text-align: left; }
.inline-form { display: flex; gap: 6px; align-items: center; }
.input-tx { width: 220px; height: 30px; font-size: 12px; }
.input-note { width: 120px; height: 30px; font-size: 12px; }
.chain-tag { display: inline-flex; align-items: center; gap: 5px; }
.chain-logo { width: 16px; height: 16px; border-radius: 50%; flex: none; }
/* 입금 페이지 체인 카드 제목(2026-10-10): 태그 대신 큰 제목 — 로고 26px, 글자 17px */
.me-card-title .chain-tag { font-size: 17px; font-weight: 700; gap: 9px; padding: 4px 12px 4px 6px; color: var(--text); }
.me-card-title .chain-logo { width: 26px; height: 26px; }

/* ---- 다크 모드 강조색 #FFCC00 (2026-10-09 사용자 지정): 선택된 상단 버튼(브랜드는 2026-10-11 부터 로고 SVG). 낮 모드는 기존 하늘색 유지 ---- */
:root:not([data-theme="light"]) .pill-btn.active { color: #1b1b1b; background: #FFCC00; border-color: #e6b800; }
.watch-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 4px; }
.watch-status { font-size: 12.5px; color: var(--muted); }
.watch-row .watch-status { margin-right: auto; } /* 상태 문구(켜짐일 때 남은 시간)는 왼쪽, 입금 확인 버튼들은 오른쪽 정렬(2026-10-10) */
.watch-row .watch-status:empty { display: none; }
.watch-row:has(.watch-status:empty) { justify-content: flex-end; }
.watch-status.on { color: var(--best-ink); font-weight: 600; }
/* 카드 아래 처리 결과(2026-10-10, 띠 대신) */
.card-msg { align-self: stretch; max-width: none; margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.card-msg.ok { background: color-mix(in srgb, var(--best-bg) 70%, var(--surface)); border: 1px solid color-mix(in srgb, var(--best-ink) 40%, var(--border)); }
.card-msg.err { background: color-mix(in srgb, var(--down) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--down) 40%, var(--border)); }
.card-msg.big { font-size: 15px; font-weight: 700; padding: 12px 14px; border-width: 2px; }
/* 보유 잔액(2026-10-12, 상단바 잔액 대신): 입금·광고주 첫 카드 제목 줄 오른쪽(partials/me-balance) */
.me-bal-chip { margin-left: auto; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.me-bal-chip b { margin-left: 4px; font-size: 15px; font-weight: 700; color: var(--text); }
.me-bal-chip + .auction-live { margin-left: 14px; } /* 광고주: 잔액 칩 오른쪽에 실시간 표시 */
/* 관리 버튼(관리자만): 브랜드 바로 우측 */
/* 관리자 메뉴 줄(2026-10-14 저녁, 사용자 요청): 상단바 바로 아래 한 줄 — 왼쪽 관리 메뉴(홈 · 회원 · 칼럼 · …, 현재 페이지 굵게), 오른쪽 끝 합계 세 숫자(빨강 미소진 / 초록 소진 / 파랑 보유금).
   전엔 상단바 ⚙ 관리 버튼 + .topbar-sums, 메뉴 줄은 관리 페이지 안에서만. 폰에서는 메뉴가 가로 스크롤(스크롤바 숨김) */
.admin-bar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: calc(var(--topbar-h) + 1px); z-index: 29; } /* 2026-10-15 사용자 요청: 스크롤해도 상단바 아래에 붙어 따라온다(상단바 높이 + 아래 테두리 1px) */
/* 관리자 줄 높이만큼 다른 고정 요소(좌측 필터·우측 레일·앵커 이동)를 내린다. html.has-admin-bar = head.ejs(관리자 로그인) */
:root { --admin-bar-h: 0px; }
:root.has-admin-bar { --admin-bar-h: 35px; }
@media (max-width: 900px) { :root.has-admin-bar { --admin-bar-h: 31px; } }
.admin-bar-inner { display: flex; align-items: center; gap: 14px; min-height: 34px; }
.admin-bar .admin-nav { margin: 0; flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.admin-bar .admin-nav::-webkit-scrollbar { display: none; }
.admin-bar-sums { flex: none; margin-left: auto; font-size: 12.5px; color: var(--text); white-space: nowrap; text-decoration: none; }
.admin-bar-sums .muted { font-family: inherit; font-size: 11.5px; }
.admin-bar-sums .sum-chain { color: var(--text); } /* 2026-10-18 네 숫자: 흰색 체인 잔액 · 파랑 이번 달 광고비 · 빨강 1일 쉐어 예상 · 초록 파랑 − 빨강 */
.admin-bar-sums .sum-ad { color: #5fb0ff; } .admin-bar-sums .sum-share { color: #ff6b6b; } .admin-bar-sums .sum-net { color: #6fdc8c; }
:root[data-theme="light"] .admin-bar-sums .sum-ad { color: #2f8fe6; } :root[data-theme="light"] .admin-bar-sums .sum-share { color: #c62828; } :root[data-theme="light"] .admin-bar-sums .sum-net { color: #137a3a; }
.admin-bar-sums .sum-unspent { color: #ff6b6b; } /* 미소진 = 빨강(2026-10-14) */
.admin-bar-sums .sum-spent { color: #6fdc8c; } /* 소진 = 연두(2026-10-10) */
.admin-bar-sums .sum-dep { color: #5fb0ff; } /* 보유금(충전 − 출금) = 하늘(2026-10-14, 전엔 충전 합계) */
:root[data-theme="light"] .admin-bar-sums .sum-unspent { color: #c62828; }
:root[data-theme="light"] .admin-bar-sums .sum-spent { color: #137a3a; } /* 낮 모드: 흰 바탕에서 읽히게 진하게 */
:root[data-theme="light"] .admin-bar-sums .sum-dep { color: #2f8fe6; }
@media (max-width: 900px) { .admin-bar-inner { gap: 10px; min-height: 30px; } .admin-bar-sums { font-size: 11px; } }
/* (옛 .topbar-sums·.side-sums 규칙은 2026-10-14 저녁 .admin-bar-sums 로 통합) */

/* ---------- 상품구매·광고설정 (4단계, 2026-10-09) ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 4px; }
.shop-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.shop-name { margin: 0; font-size: 15px; font-weight: 700; }
.shop-desc { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; flex: 1; }
.shop-dev { color: #FFCC00; font-weight: 700; } /* 아비트리지 알림(API) "개발자 전용"(2026-10-10 사용자 지정 색) */
:root[data-theme="light"] .shop-dev { color: #b38600; } /* 낮 모드: 흰 바탕에서 읽히게 어두운 노랑 */
.shop-price { font-family: var(--mono); font-size: 18px; font-weight: 700; }
.shop-price small { font-size: 11.5px; color: var(--muted); font-weight: 500; font-family: inherit; }
.shop-active { font-size: 12px; color: var(--best-ink); font-weight: 600; }

.ad-thumb { display: block; max-width: 200px; height: auto; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); }
.status-pending { color: var(--warn-ink); background: var(--warn-bg); }
.status-approved { color: #111; background: var(--best-ink); }
:root[data-theme="light"] .status-approved { color: #fff; } /* 낮 모드: 진한 초록 바탕 */
.status-rejected { color: #fff; background: var(--down); }
.auction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.auction-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.auction-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.auction-title { font-weight: 700; font-size: 14px; }
.auction-meta { font-size: 12px; color: var(--muted); line-height: 1.5; }
.auction-meta strong { color: var(--text); }
.standings { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 6px; } /* 순위표와 입찰 줄 사이 간격 */
.standings th, .standings td { padding: 4px 6px; text-align: left; border-top: 1px solid var(--border); }
.standings th { color: var(--muted); font-weight: 600; font-size: 11.5px; border-top: 0; }
.standings tr.mine td { background: color-mix(in srgb, var(--brand) 14%, transparent); font-weight: 600; }
.standings tr.out td { color: var(--muted); }
.standings tr.blank td { height: 25px; }
/* 내 행의 취소 버튼 열(2026-10-10): 내용 폭만, 행 높이를 키우지 않게 작은 버튼 */
.standings .act { width: 1%; white-space: nowrap; text-align: right; padding-top: 2px; padding-bottom: 2px; }
.standings .btn-xs { height: 21px; padding: 0 8px; font-size: 11.5px; line-height: 19px; }
/* 실시간 푸시(SSE)로 바뀐 순위표·머리글 태그: 브랜드색으로 잠깐 물들였다가 돌아온다(2026-10-10) */
@keyframes auction-flash { 0% { background: color-mix(in srgb, var(--brand) 28%, transparent); } 100% { background: transparent; } }
.auction-flash { animation: auction-flash 1.4s ease-out; border-radius: 6px; }
.auction-live { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-left: auto; padding-right: 4px; } /* 제목 줄 우측 끝(옛 접기 버튼 자리) */
.auction-live .live-dot { width: 7px; height: 7px; }
.auction-live.off { color: var(--down); }
/* 카드별 마감 카운트다운(2026-10-10): 제목 옆 작은 글씨, 연장되면 태그 */
.auction-close { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.auction-close .countdown { font-weight: 600; color: var(--text); }
.tag-ext { background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--text); font-size: 10.5px; padding: 1px 6px; }
/* 고객센터(2026-10-10): 대화 말풍선 — 내 글 오른쪽, 운영자 글 왼쪽 */
.sup-msgs { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 16px; }
.sup-msg { max-width: 78%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.sup-msg-user { align-self: flex-end; background: color-mix(in srgb, var(--brand-bg) 14%, var(--surface)); }
.sup-msg-admin { align-self: flex-start; }
.sup-msg-head { font-size: 12px; margin-bottom: 4px; }
.sup-msg-body { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.6; }
.sup-text { width: 100%; min-height: 96px; resize: vertical; font: inherit; padding: 10px 12px; }
.sup-st { font-size: 11.5px; }
.sup-st-open { background: color-mix(in srgb, #FFCC00 22%, transparent); color: var(--text); }
.sup-st-answered { background: color-mix(in srgb, var(--best-ink) 22%, transparent); color: var(--text); }
.sup-st-closed { opacity: 0.7; }
.sup-thread .me-title-row .me-card-title { flex: 1; min-width: 0; }
/* 2단계 확인 부품·MY 카드(2026-10-10) */
.otp-gate { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.otp-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.otp-step[hidden] { display: none; }
.otp-gate .otp-input { width: 150px; letter-spacing: 0.15em; }
.otp-timer { font-size: 13px; font-weight: 600; color: var(--text); min-width: 42px; }
.otp-ok { color: var(--best-ink); font-weight: 600; font-size: 13.5px; }
.otp-msg { margin: 0; font-size: 12.5px; color: var(--muted); }
.otp-msg.bad { color: var(--down); }
/* [변경]/[등록] 버튼은 카드 제목 줄 오른쪽 끝(2026-10-10) */
.me-card[data-otp-card] { position: relative; }
.otp-card-actions { position: absolute; top: 14px; right: 20px; display: flex; margin: 0; }
@media (max-width: 900px) { .otp-card-actions { top: 10px; right: 14px; } }
.otp-card-actions [hidden], .otp-panel[hidden], .otp-form[hidden] { display: none; }
.otp-form { margin-top: 10px; }
.otp-form-actions { display: flex; gap: 8px; }
/* 핵심 강조(2026-10-10, 입금 페이지 등): 다크 #FFCC00, 낮 모드는 흰 배경에서 읽히게 진한 황색 */
.key-hl { color: #FFCC00; font-weight: 700; }
:root[data-theme="light"] .key-hl { color: #b07d00; }
.key-note { color: #FFCC00; }
:root[data-theme="light"] .key-note { color: #875f00; } /* 4차(L4): 흰 바탕 3.63 → 5.73 */
.key-note[hidden] { display: none; }
.dep-net { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); } /* 체인 카드 설명: 작고 흐린 보조 글씨(2026-10-10) */
/* 표 아래 페이지 이동(내 입찰 내역 등) */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.pager .pill-btn { min-width: 32px; justify-content: center; text-align: center; }
.pager .pill-btn.disabled { opacity: 0.35; pointer-events: none; }
.pager-gap { color: var(--muted); padding: 0 2px; }
.pager-total { color: var(--muted); font-size: 12px; margin-left: 8px; }
.tag-ext[hidden] { display: none; } /* .tag 의 display 가 hidden 속성을 이기므로 명시 */
.bid-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; } /* 체크박스 좌측, 금액+등록 우측(2026-10-09) */
.bid-form .input, .bid-form .select { height: 32px; }
.input-amount { width: 80px; } /* 2/3 로 축소(2026-10-09) */
.bid-form .form-check { font-size: 12.5px; }
.countdown { font-family: var(--mono); }
@media (max-width: 900px) { .shop-grid, .auction-grid { grid-template-columns: minmax(0, 1fr); } }

/* 광고 페이지 개편(2026-10-09): 국가 선택 pill, 경매 카드 접기/펼치기, 소재 묶음 */

/* 파일 5개 목록(2026-10-15): ① 한 줄 전체, ②~⑤ 4칸(태블릿·폰 2칸, 좁은 폰 1칸) */
.cr-need { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: 12.5px; font-weight: 600; }
.cr-need .cr-rule { flex-basis: 100%; white-space: normal; font-size: 12px; font-weight: 400; color: var(--muted); } /* 파일 규칙 한 줄(2026-10-15) */
.me-country-dd { display: flex; align-items: center; gap: 8px; } .me-country-dd .select { flex: 1; min-width: 0; } .me-country-flag { display: inline-flex; flex: none; } .me-country-flag .an-flag { width: 24px; height: 18px; } /* MY 국가 칸 국기(2026-10-15) */
.ads-viewonly-note { margin: 0 0 10px; } .ads-viewonly [data-auction-meta] { display: none; } /* 분석가 보기 전용(2026-10-15) */
.share-table-wrap { margin: 8px 0 4px; width: fit-content; max-width: 100%; } .odds-table.share-table { width: auto; min-width: 0; table-layout: auto; } .share-table td, .share-table th { padding: 4px 16px; white-space: nowrap; } .share-table td:first-child, .share-table th:first-child { text-align: left; } .share-table .share-total td { font-weight: 700; border-top: 1px solid var(--border); } .share-table .share-site td { color: var(--muted); } /* 쉐어 비율 표(2026-10-15) */
.cr-files { display: flex; flex-direction: column; gap: 8px; }
.cr-file { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-file-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; } .cr-file .cr-file-left { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin: 0; color: var(--text); font-size: 13px; } .cr-size { font-weight: 600; margin-left: 4px; } .cr-file-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* 파일 한 줄(2026-10-15) */
.cr-use { padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; }
.cr-file .ad-thumb { align-self: flex-start; height: auto; max-width: 100%; } .cr-file[data-field-box="lb_wide"] .ad-thumb { width: 970px; } .cr-file[data-field-box="lb_mobile"] .ad-thumb { width: 320px; } .cr-file[data-field-box="lb_mid"] .ad-thumb { width: 728px; } .cr-file[data-field-box="top_pc"] .ad-thumb { width: 300px; } .cr-file[data-field-box="top_mobile"] .ad-thumb { width: 320px; } /* 실제 표시 크기(파일의 절반) */
.ad-thumb.is-preview { outline: 2px dashed var(--brand-bg); outline-offset: 2px; } /* 묶음 [이미지 올리기](2026-10-15) */
.cr-item label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.cr-item input[type=file] { font-size: 11.5px; color: var(--muted); max-width: 100%; }
.cr-item .ad-thumb { margin: 4px 0 10px; } /* 소재 이미지와 파일 선택 버튼 사이 간격 */
.cr-item + .cr-item { margin-top: 6px; }
.cr-save-row { display: flex; gap: 6px; align-items: stretch; } .cr-save-row .input { flex: 1; min-width: 0; } .cr-save-row .btn { flex: none; height: auto; align-self: stretch; padding-left: 14px; padding-right: 14px; } .cr-save-msg { display: block; margin: 3px 0 0; } .cr-save-msg:empty { display: none; } .cr-save-msg.ok { color: var(--best-ink); font-weight: 600; } /* 칸별 저장(2026-10-15) */

.me-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.me-title-row .me-card-title { margin: 0; }
.me-title-row .select { height: 30px; font-size: 12.5px; }
.me-title-row .form-hint { margin-left: auto; }

.auction-card.locked .auction-title, .auction-card.locked .auction-head > .auction-meta { opacity: 0.75; } /* 흐림은 글자에만(머리글에 주면 말풍선까지 반투명) */

/* 잠긴 경매 카드: 마우스 오버·포커스 시 이유 말풍선 */
/* 잠긴 카드(소재·잔액 없음, 경매 없음): 순위표는 그대로, 조작만 비활성(2026-10-10) */
.bid-form :disabled, .bid-form .form-check:has(:disabled) { opacity: 0.45; cursor: not-allowed; }
/* 비활성 조작 줄에 마우스 오버·포커스·탭(.show-why) → 사유 말풍선. 비활성 요소는 이벤트를 못 받으므로 폼이 받는다 */
.bid-form[data-why] { position: relative; cursor: not-allowed; outline: none; }
.bid-form[data-why]:hover::after, .bid-form[data-why]:focus::after, .bid-form[data-why].show-why::after { content: attr(data-why); position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 500; line-height: 1.5; box-shadow: var(--shadow); white-space: normal; }

/* 파일 입력칸은 숨기고 버튼(label)만 보인다: 브라우저의 "선택된 파일 없음" 문구 제거 */
.cr-item { position: relative; }
.cr-item .file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.cr-item .file-btn { display: inline-flex; width: auto; cursor: pointer; margin: 2px 0; font-weight: 500; color: var(--text); }
.cr-item .file-hidden:focus-visible + .file-btn { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 사이트 알림 띠(경매 결과): 15초 뒤 사라짐 */
.notice-live { background: color-mix(in srgb, var(--best-ink) 14%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--best-ink) 40%, var(--border)); transition: opacity 0.4s, transform 0.4s; }
.notice-live.notice-hide { opacity: 0; transform: translateY(-6px); }
.notice-close { height: 24px; min-width: 24px; padding: 0 8px; font-size: 14px; line-height: 1; }

/* 입찰 폼: 금액+등록 버튼 왼쪽, 체크박스 두 개는 오른쪽. 폭이 좁으면 체크박스 묶음이 통째로 아랫줄로 */
.bid-main { display: flex; gap: 8px; align-items: center; flex: none; margin-left: auto; }
.bid-main .btn { height: 32px; } /* 등록·취소 버튼 높이 = 금액 입력칸 */
.bid-opts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* 좌측 정렬(2026-10-09) */
.auction-card .auction-head { cursor: default; }

.board-table tr.mine td { background: color-mix(in srgb, var(--brand) 14%, transparent); font-weight: 600; }

/* 광고 이용 요약(2026-10-15): 광고주 페이지 맨 위, 기본 접힘 */
.ads-intro .me-title-row { justify-content: flex-start; } .ads-intro .page-head-howto { margin-left: auto; margin-right: 0; } .ads-intro .fold-btn { margin-left: 0; } /* 안내 링크는 접기 버튼 바로 왼쪽 */
.ads-intro-list { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13px; line-height: 1.55; }
/* 카드 접기(광고 페이지): 제목 줄 우측 ▾/▴. .folded 면 본문 숨김 */
.fold-btn { margin-left: auto; height: 28px; min-width: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.me-card.folded [data-fold-body] { display: none; }
.me-card.folded .me-title-row { margin-bottom: 0; }
.me-card[id] { scroll-margin-top: calc(var(--topbar-h) + var(--admin-bar-h) + 14px); } /* #creatives 앵커 이동 때 머리글(국가 선택)이 고정 상단바에 가리지 않게 */


/* 순위 밀림·탈락 알림은 붉은 띠 */
.notice-live.notice-outbid, .notice-live.notice-auction_lost, .notice-live.notice-auto_bid_skipped, .notice-live.notice-auto_bid_out, .notice-live.notice-auction_cancelled, .notice-live.notice-booking_cancelled { background: color-mix(in srgb, var(--down) 16%, var(--surface)); border-bottom-color: color-mix(in srgb, var(--down) 45%, var(--border)); }

/* 경매 격자(2026-10-09): 좌·우 열 묶음. 오른쪽 열 끝의 알림 카드가 남는 높이를 채워 왼쪽 열 바닥에 맞춘다 */
.auction-grid > [data-slot] { grid-column: auto; grid-row: auto; }
/* 경매 카드 안 알림 한 줄(2026-10-15): 높이 고정 — 알림이 오거나 사라져도 아래 버튼이 움직이지 않는다 */
.auction-notice { height: 20px; line-height: 20px; margin: 4px 0 2px; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.4s; }
.auction-notice.good { color: var(--best-ink); } .auction-notice.bad { color: var(--down); } .auction-notice.is-faded { opacity: 0; }
.auction-grid4 { align-items: stretch; } .auction-grid4 > .auction-card { min-width: 0; }
.notice-item.notice-hide { opacity: 0; }
/* 알림은 한 줄씩(상자 없음, 넘치면 말줄임). 밀림·탈락은 붉은 글자, 낙찰·등록은 초록 글자, 안 본 것은 굵게 */
.notice-item { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; font-size: 12.5px; line-height: 1.5; border-top: 1px solid var(--border); min-width: 0; }
.notice-item:first-child { border-top: 0; }
.notice-item > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.notice-item.good { color: var(--best-ink); }
.notice-item.bad { color: var(--down); }
.notice-item.fresh { font-weight: 700; }
.notice-time { flex: none; font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; }
.auction-month { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bm-chip-mid { background: var(--surface-2); color: var(--muted); }

/* 북메이커별 환급률 보조 행(전체 뷰, 2026-10-10): 경기 행 아래 작은 글씨. 최고 환급률은 진하게 */
.odds-table tr.has-payout-row td { border-bottom: 0; padding-bottom: 2px; }
.odds-table tr.payout-row td { padding: 0 8px 6px; font-size: 10.5px; line-height: 1.2; color: var(--muted); font-family: var(--mono); border-bottom: 1px solid var(--border); background: transparent; }
.odds-table tr.payout-row td.bm-payout.top { color: var(--best-ink); font-weight: 700; }
.odds-table tr.payout-row td.payout-lead { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.odds-table tr.match-row:hover + tr.payout-row td { background: var(--surface-2); }
.simple-table tr.payout-row { display: none; }

/* 전체 북메이커 뷰: 북메이커 묶음 사이 세로 경계선(2026-10-10). 묶음의 첫 칸(승)과 최고 배당 묶음·환급률 칸 왼쪽 */
.odds-table th.col-bm, .odds-table th.bm-first, .odds-table td[data-cell$=":home"], .odds-table tr.payout-row td.bm-payout,
.odds-table th.col-best, .odds-table td.best-col[data-bestcol="home"], .odds-table th.col-payout, .odds-table td[data-payout] { border-left: 1px solid color-mix(in srgb, var(--border) 100%, transparent); }
:root[data-theme="light"] .odds-table th.col-bm, :root[data-theme="light"] .odds-table th.bm-first, :root[data-theme="light"] .odds-table td[data-cell$=":home"], :root[data-theme="light"] .odds-table tr.payout-row td.bm-payout { border-left-color: var(--border); }
.odds-table tr.payout-row td.best-bm { padding-top: 0; padding-bottom: 5px; }
.odds-table tr.payout-row td.best-bm .bm-chip { font-size: 9.5px; padding: 0 5px; }
.odds-table tr.payout-row td.best-bm[data-bestbm="home"] { border-left: 1px solid var(--border); }

/* 배당 알림 ☆(2026-10-10) */
.watch-star { display: inline-block; margin-top: 2px; padding: 0 2px; border: 0; background: none; color: var(--muted); opacity: 0.45; font-size: 15px; line-height: 1; cursor: pointer; }
.watch-star:hover { opacity: 0.9; }
.watch-star.on { color: #FFCC00; opacity: 1; }
:root[data-theme="light"] .watch-star.on { color: #e0a800; }
.match-watch { margin-left: auto; }
.match-watch .watch-star { font-size: 20px; }
/* 관심 팀 ♥(2026-10-21 저녁): 경기 상세 팀 이름 아래(.team.lg 는 세로 정렬) */
.team-follow { display: inline-block; padding: 0 4px; border: 0; background: none; color: var(--muted); opacity: 0.45; font-size: 18px; line-height: 1; cursor: pointer; }
.team-follow:hover { opacity: 0.9; }
.team-follow.on { color: #ff6b8a; opacity: 1; }
:root[data-theme="light"] .team-follow.on { color: #e0405f; }
.me-team-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.me-team-list li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border: 1px solid var(--border); border-radius: 999px; }
.me-team-list form { display: inline; margin: 0; }
.me-team-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; }
.me-team-x:hover { color: var(--text); }
.check-grid { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.alert-sub { margin: 18px 0 8px; font-size: 14px; }

.shop-note { margin: 4px 0 8px; font-size: 12px; color: var(--muted); line-height: 1.6; } /* 상품 한계 고지(2026-10-10) */

/* 아비트리지 알림(API) 카드(2026-10-10): 새 키 한 번 표시·키 정보·호출 예시 */
.api-fresh { margin: 0 0 12px; }
.api-key-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.api-key-row code { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); word-break: break-all; font-size: 13px; }
.api-key-meta { margin: 0 0 10px; font-size: 13px; }
#api .otp-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#api .wd-rules code { font-size: 12px; word-break: break-all; }
.api-example { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 12px; white-space: pre-wrap; word-break: break-all; }

/* 관리 회원 관리(2026-10-10): 합계 칸·회수 상자 */
.mem-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 0 6px; }
.mem-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.mem-stat span { font-size: 12px; color: var(--muted); }
.mem-stat strong { font-size: 17px; }
.mem-stat small { font-size: 11.5px; color: var(--muted); }
.mem-table td { white-space: nowrap; }
/* 회원 관리 여백(2026-10-10): 표 위 도구 줄·표 아래 안내·회수 상자 안쪽 */
.mem-page .mem-toolbar { margin: 0 0 10px; gap: 8px; }
.mem-page .mem-toolbar-after { margin: 12px 0 0; }
.mem-page .table-scroll + .hint, .mem-page .mem-stats + .hint { margin-top: 10px; }
.mem-page .admin-h2 .tag { margin-left: 4px; }
.mem-page .mem-stat small { margin-top: 2px; }

/* ---------- 홈 TOP 표(2026-10-10): 배당표 요약 뷰(.simple-table)를 그대로 쓰고 종목 열만 더한다 ---------- */
.home-widgets .table-scroll, .rail .table-scroll { border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.po-table .col-sport { text-align: left !important; width: 112px; min-width: 112px; max-width: 132px; }
.po-table .po-sport { display: block; font-size: 12px; font-weight: 600; }
.po-table .po-league { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.stale-col .col-stale { width: 22px; padding-left: 0 !important; padding-right: 0 !important; }
.stale-col td.col-stale .payout-stale { margin: 0; font-size: 11px; }
@media (min-width: 901px) { .stale-col td.payout .payout-stale { display: none; } } /* PC·태블릿: ⏱ 는 환급률 오른쪽 별도 칸(col-stale)에만 */
@media (max-width: 900px) { .stale-col tr.match-row td.col-stale, .stale-col th.col-stale { display: none; } } /* 폰: 별도 칸 숨기고 숫자 옆 ⏱ */
.po-table td.pill-none .pill { border-color: transparent; background: transparent; }
.po-table .pill-hi .pill-odd, .sp-table td.sp-gap .payout-val { color: var(--best-ink); }
.sp-table td.sp-oc .sp-oc-v { font-weight: 600; }
/* 태블릿: 본문 폭(약 830px)에 맞게 경기 열을 줄인다 */
@media (min-width: 901px) and (max-width: 1399px) {
    .po-table { min-width: 0; }
    .po-table .col-match { min-width: 0; }
    .po-table .col-sport { width: 96px; min-width: 96px; }
    .po-table .col-pill { width: 72px; }
    .po-table .pill { min-width: 56px; }
}
@media (max-width: 900px) {
    /* 홈 TOP: 경기마다 테두리 카드로 떼어 놓는다(홈 PC 카드와 같은 모양) */
    .po-table tbody { display: flex; flex-direction: column; gap: 8px; }
    .po-table tr.match-row, .po-table tr.match-row:last-child { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: 10px 12px; }
    .po-table tr.match-row td:not(.arb), .po-table tr.match-row:hover td:not(.arb) { background: transparent; } /* 아비트리지 환급률 칸의 초록 바탕은 남긴다 */
    /* 홈 TOP 카드: 1줄 = 시간(좌) · 종목(중앙) · 리그(우), 2줄 = 홈 로고·이름(좌) · vs(중앙) · 이름·로고(우) */
    /* 칸을 겹쳐 잡아(1~3 / 3~4 / 4~6) 날짜가 줄바꿈 없이 들어가게 한다. 종목은 카드 정중앙 */
    .po-table tr.match-row td.col-time { grid-row: 1; grid-column: 1 / span 3; white-space: nowrap; justify-self: start; gap: 5px; }
    .po-table tr.match-row td.col-time .time { font-size: 12.5px; }
    .po-table tr.match-row td.col-time .date { font-size: 10px; }
    .po-table tr.match-row td.col-sport { display: contents; }
    .po-table td.col-sport .po-sport { grid-row: 1; grid-column: 3 / span 2; justify-self: center; align-self: center; white-space: nowrap; }
    .po-table td.col-sport .po-league { grid-row: 1; grid-column: 5 / span 2; justify-self: end; align-self: center; max-width: 100%; white-space: nowrap; }
    .po-table tr.match-row td.col-match { grid-row: 2; grid-column: 1 / -1; }
    .po-table .match-link { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
    .po-table .match-link .team + .team::before { content: none; }
    .po-table .match-link::after { content: 'vs'; grid-row: 1; grid-column: 2; color: var(--muted); font-size: 11px; }
    .po-table .match-link .team { grid-row: 1; display: flex; min-width: 0; }
    .po-table .match-link .team:first-child { grid-column: 1; }
    .po-table .match-link .team:last-child { grid-column: 3; flex-direction: row-reverse; } /* row-reverse 라 오른쪽에 붙는다 */
    .po-table .match-link .team-logo { flex: none; }
    .po-table .match-link .team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sp-table tr.match-row td.sp-oc .sp-oc-v { display: flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid var(--border); border-radius: 8px; }
    .po-table tr.oc2 td.pill-none { display: none; }
    .po-table tr.oc2 td.col-pill { grid-column: span 3; }
    .po-table tr.match-row td.payout::before { margin: 0; } /* 제목(환급률·괴리, data-label)을 숫자 왼쪽에 한 줄로. 북메이커 수는 같은 줄 오른쪽 */
    /* 환급률 칸을 한 줄 전체로 펴고, 북메이커 수("북메이커 10" 한 줄)를 그 칸 오른쪽 안에 겹쳐 둔다. 줄 순서 = 1 시간·종목·리그, 2 팀, 3 배당, 4 환급률 */
    .po-table tr.match-row td.payout { grid-row: 4; grid-column: 1 / -1; align-self: stretch; display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 8px; border-radius: 6px; }
    .po-table tr.match-row td.books { grid-row: 4; grid-column: 4 / -1; align-self: center; justify-self: end; display: flex; align-items: baseline; gap: 5px; padding-right: 8px; }
    .po-table tr.match-row td.books::before { margin: 0; }
    /* ⏱(오래됨)는 환급률 칸 안 숫자 오른쪽(payout-cell 의 ⏱). 별도 칸은 숨긴다 */
    .po-table tr.match-row td.col-stale { display: none; }
    .po-table td.payout .payout-stale { margin: 0; }
    /* 결과 제목: 승(홈) 좌 · 무 중앙 · 패(원정) 우. 열 순서 = 종목·시간·경기·승·무·패 */
    .po-table:not(.sp-table) td.col-pill:nth-child(5)::before { text-align: center; }
    .po-table:not(.sp-table) td.col-pill:nth-child(6)::before { text-align: right; }
    /* 배당표 전종목(.po-all, 2026-10-19): ★·✎n 칸이 경기 뒤에 끼어 알약이 한 칸씩 밀림 → 제목 정렬을 다시 맞추고, ★·✎n 은 4줄(환급률 줄) 가운데 */
    .po-all td.col-pill:nth-child(5)::before { text-align: left; }
    .po-all td.col-pill:nth-child(6)::before { text-align: center; }
    .po-all td.col-pill:nth-child(7)::before { text-align: right; }
    .po-all tr.match-row td.col-mark { grid-row: 4; grid-column: 3 / span 2; justify-self: center; align-self: center; width: auto; max-width: none; z-index: 1; }
    .po-all tr.match-row td.col-mark .col-mark-in { flex-direction: row; gap: 6px; }
}

/* 배당표 레일(2026-10-10): PC(1400~)는 좁은 레일용 목록, 1400 미만(본문 아래로 내려옴)은 홈과 같은 요약 표(종목 대신 리그). 레일 파셜이 둘 다 그린다 */
body[data-layout="app"] .rail[data-rail] .table-scroll { display: none; } /* 2026-10-11: 배당표 레일은 PC·태블릿·폰 모두 한 줄 목록(표는 홈 전용) */
/* 배당표 레일(2026-10-11): 랭킹(.rail-rank)·한 줄 목록(.rail-pc)은 태블릿·PC(901 이상), 폰 표의 "100% 이상 없음" 안내(.rail-narrow)는 폰만.
   (같은 날 저녁까지는 1400 기준 — 태블릿도 배당표 아래에 랭킹·조합·괴리 3개씩을 쓰게 사용자 요청으로 901 로 내림) */
body[data-layout="app"] .rail[data-rail] .rail-narrow { display: none; } /* 폰도 한 줄 목록이라 표용 "100% 이상 없음" 안내는 쓰지 않는다(2026-10-11) */
/* 한 줄 목록: 랭킹 = 순위 · 북메이커 칩 · 평균 환급률 / 조합 = 경기(말줄임) · 환급률 · ⏱ / 괴리 = 경기 · 결과 · 괴리 %.
   100% 이상 조합은 줄 전체 초록 바탕(뱃지 없음). 3개 + 더 보기(10개, homeFolds) */
.rail-lines { list-style: none; margin: 0; padding: 0; }
.rail-lines > li.rl-item, .rail-lines > li.rl-item:first-child { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; margin: 0 -6px; padding: 6px; border-radius: 6px; border-top: 1px solid var(--border); }
.rail-lines > li.rl-item:first-child { border-top-color: transparent; }
.rail-lines > li.rl-item.is-arb { background: color-mix(in srgb, var(--best-bg) 55%, transparent); border-top-color: transparent; }
.rail-lines > li.rl-item.is-arb + li.rl-item { border-top-color: transparent; }
.rl-row { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; color: inherit; }
.rl-row:hover { text-decoration: none; }
.rl-row:hover .po-teams { text-decoration: underline; }
.rl-val { flex: none; min-width: 4.4em; text-align: right; font-family: var(--mono); font-weight: 700; font-size: 13px; }
.rl-val.is-top { font-weight: 800; }
.rl-stale { flex: none; width: 14px; text-align: center; font-size: 11px; }
.rail-lines .widget-oc { flex: none; }
.rl-rank { flex: none; width: 14px; color: var(--muted); font-size: 12px; text-align: center; }
.rl-main { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.rail-rank .widget-title { justify-content: space-between; gap: 10px; }
.rail-fold:not(.is-open) .rail-lines > li:nth-child(n+4), .rail-fold .rail-lines > li:nth-child(n+11) { display: none; }
.rail-fold.is-open .fold-more-chev { transform: rotate(180deg); }
@media (min-width: 901px) and (max-width: 1399px) {
    body[data-layout="app"] .rail[data-rail] .widget { padding: 14px; }
    body[data-layout="app"] .rail[data-rail] .widget-title { font-size: 14px; margin-bottom: 10px; }
}

/* 좁은 폰(420px 이하): 요약 카드(배당표·홈 TOP)의 큰 글자를 폭에 비례해 줄인다. 420px 에서 원래 크기, 하한은 원래의 약 85%.
   10.5px 이하 보조 글자(라벨·칩·날짜)는 더 줄이면 읽기 어려워 그대로 둔다 */
@media (max-width: 420px) {
    .simple-table .team-name, .simple-table .pill-odd { font-size: clamp(12px, 3.333vw, 14px); }
    .simple-table td.col-time .time { font-size: clamp(11px, 3.095vw, 13px); }
    .simple-table .payout-val { font-size: clamp(11.5px, 3.095vw, 13px); }
    .simple-table .books { font-size: clamp(11px, 2.976vw, 12.5px); }
    .po-table tr.match-row td.col-time .time { font-size: clamp(11px, 2.976vw, 12.5px); }
    .po-table td.col-sport .po-sport { font-size: clamp(11px, 2.857vw, 12px); }
    .po-table td.col-sport .po-league { font-size: clamp(10px, 2.619vw, 11px); }
}

/* ---------- 모바일 배당표 요약 카드(2026-10-10): 홈 TOP 카드와 같은 배치 ----------
   1줄 시간(·진행 태그) 좌 · ★ 중앙 · 환급률(⏱ 98.4%) 우 / 2줄 홈 로고·이름 · vs · 이름·로고 / (라인) / 배당(승 좌·무 중앙·패 우). 북메이커 수는 모바일에서 뺀다
   ★ 는 col-time 안에 있지만 카드(tr) 기준 절대 위치로 1줄 정중앙에 둔다 */
@media (max-width: 900px) {
    .sum-cards tbody { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
    .sum-cards tr.match-row, .sum-cards tr.match-row:last-child { position: relative; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: 10px 12px; }
    .sum-cards tr.match-row td:not(.arb), .sum-cards tr.match-row:hover td:not(.arb) { background: transparent; }
    .sum-cards tr.match-row td.col-time { grid-row: 1; white-space: nowrap; gap: 5px; z-index: 1; }
    .sum-cards tr.match-row td.col-time .date { order: 0; font-size: 10.5px; }
    .sum-cards tr.match-row td.col-match { grid-row: 2; }
    .sum-cards .match-link { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
    .sum-cards .match-link .team + .team::before { content: none; }
    .sum-cards .match-link::after { content: 'vs'; grid-row: 1; grid-column: 2; color: var(--muted); font-size: 11px; }
    .sum-cards .match-link .team { grid-row: 1; display: flex; min-width: 0; }
    .sum-cards .match-link .team:first-child { grid-column: 1; }
    .sum-cards .match-link .team:last-child { grid-column: 3; flex-direction: row-reverse; }
    .sum-cards .match-link .team-logo { flex: none; }
    .sum-cards .match-link .team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sum-cards td.col-pill[data-pill="draw"]::before { text-align: center; }
    .sum-cards td.col-pill[data-pill="away"]::before { text-align: right; }
    .sum-cards tr.match-row td.payout { grid-row: 1; grid-column: 4 / -1; justify-self: end; align-self: center; display: flex; flex-direction: row-reverse; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 5px; line-height: 18px; }
    .sum-cards tr.match-row td.payout::before { content: none; }
    .sum-cards tr.match-row td.payout .payout-single { display: none; } /* 단일 북메이커 환급률은 PC·태블릿 표에만 */
    .sum-cards tr.match-row td.payout .payout-stale { margin: 0; } /* row-reverse 라 숫자 왼쪽에 붙는다 */
    .sum-cards tr.match-row td.books { display: none; }
    /* 100% 이상: 환급률 칸을 1줄 전체로 펴서 시간까지 초록 띠. 시간 칸은 그 위에 그린다(그리드 항목 z-index) */
    .sum-cards tr.match-row td.payout.arb { grid-column: 1 / -1; justify-self: stretch; margin: -4px -6px; padding: 4px 6px; }
    /* ★·✎n 칸(2026-10-14): 카드(tr) 기준 절대 위치로 1줄 정중앙, 가로로 나란히(전엔 col-time 안 ★ 만 절대 위치) */
    .sum-cards tr.match-row td.col-mark { position: absolute !important; left: 50%; top: 12px; transform: translateX(-50%); width: auto; z-index: 1; }
    .sum-cards tr.match-row td.col-mark .col-mark-in { flex-direction: row; gap: 6px; line-height: 18px; }
    .sum-cards tr.match-row td.col-mark .watch-star { line-height: 18px; }
}
/* 약관·개인정보 링크(가입 동의 문구 · 약관 본문, 2026-10-11): 본문과 구분되게 브랜드색 + 밑줄 */
.form-check-txt a, .legal a { color: var(--brand); text-decoration: underline; }
/* 칼럼 본문 마크다운 표(2026-10-11) */
.md-table { border-collapse: collapse; margin: 10px 0 14px; font-size: 14px; }
.md-table th, .md-table td { border: 1px solid var(--border); padding: 5px 12px; text-align: left; }
.md-table th { background: var(--surface-2); font-weight: 600; }
.md-table td:nth-child(n+2), .md-table th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }

/* 관리 홈(대시보드, 2026-10-11): 상태 뱃지(2026-10-15 밤, 전엔 띠) · 카드 격자 · 처리 필요 뱃지(0 회색 / 있으면 노랑) · 작은 표 */
.dash .muted { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.dash-stamp { margin: 6px 2px 12px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
/* 관리 홈 재배치(2026-10-15): 맨 위 지난 확인 이후 카드 4개(회원·입출금·광고·고객센터), 서버 상태 띠 아래 카드 간격 */
.dash-first { margin-top: 0; }
/* 2026-10-15 밤: 서버 상태 제목 오른쪽 뱃지(띠 대신) · 접속 한 줄 · 만료 일정 노랑 행 */
.dash-head { flex-wrap: wrap; row-gap: 6px; } /* 2026-10-16: 상태 뱃지가 이 줄 오른쪽(옛 .dash-srv-head) */
.dash-grid-all { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } /* 지난 확인 이후 + 서버 상태 카드 한 묶음 */
.dash-badges { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; min-width: 0; }
.dash-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.dash-badge.ok { background: var(--best-bg); color: var(--best-ink); border-color: color-mix(in srgb, var(--best-ink) 35%, var(--border)); }
.dash-badge.bad { background: color-mix(in srgb, var(--down) 14%, var(--surface)); color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, var(--border)); }
.dash-badge.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn-ink) 45%, var(--border)); cursor: pointer; }
a.dash-badge.warn:hover { text-decoration: none; border-color: var(--warn-ink); }
.dash-table tr.warn > * { color: var(--warn-ink); }
.dash-table tr.warn > td { background: var(--warn-bg); }
/* 관리 > 모델 오늘·내일 표 모델 v1 칸(2026-10-21): 데이터 다 채움 = 초록 · 빠짐 = 노랑 */
.admin-table td.mdl-full { background: color-mix(in srgb, var(--best-bg) 55%, transparent); }
.admin-table td.mdl-part { background: var(--warn-bg); }
.dash-table.dash-due tbody th { white-space: normal; }
.dash-table.dash-due .num .muted { white-space: nowrap; }
/* 관리 > 입출금(2026-10-15 재구성) */
/* 관리 > 입출금 기준 지갑 카드(2026-10-19): 돈 구분 한 줄 + 확정 수익 보내기 폼 */
.wl-base { margin-bottom: 10px; }
.wl-base .me-card-title form { margin-left: 8px; }
.wl-split { margin: 8px 0 10px; line-height: 1.6; }
.wl-profit-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.wl-profit-form .form-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.wl-profit-form .form-field { margin: 0; }
.wl-profit-form [data-pf-submit] { align-self: flex-start; }
.wl-profit-form [data-pf-submit][hidden] { display: none; }
.wl-shares { margin-bottom: 10px; }
.wl-shares-form { display: flex; flex-direction: column; gap: 10px; }
.wl-shares-form .form-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wl-shares-form [data-shares-submit][hidden] { display: none; }
.wl-shares-form .admin-table td { padding: 4px 6px; }
.wl-switch { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.wl-switch { flex-wrap: wrap; } .wl-switch .tag, .wl-switch .btn { white-space: nowrap; } /* 자동 지급 스위치 줄(2026-10-15 밤) */
.wl-actions { white-space: nowrap; }
.wl-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } /* 처리 필요 표 모드별 버튼(2026-10-15 밤) */
.wl-acts form { display: flex; gap: 6px; margin: 0; }
.wl-copy { padding: 0 6px; font-size: 11px; line-height: 18px; }
.wl-kind { margin: 0 0 10px; }
.wl-notes { margin-top: 18px; }
.wl-notes-list { margin: 10px 0 0; padding-left: 18px; }
.wl-notes-list li + li { margin-top: 4px; }
.mem-count { margin: 0 0 4px; }
/* 관리 > 광고(2026-10-15 밤): 판매 중단 슬롯의 지난 경매 행은 기본 숨김, 체크하면 보임 */
tr.auc-old { display: none; }
.show-auc-old tr.auc-old { display: table-row; opacity: 0.6; }
.status-sync { margin-top: 14px; } .status-sync summary { cursor: pointer; margin: 0; }
.mem-activity { margin-bottom: 6px; }
#activity { margin-top: 22px; }
.dash-grid + .dash-grid, .dash-errors, .dash-activity, .dash-traffic { margin-top: 14px; }
.dash .me-card-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dash-more { margin-left: auto; font-size: 12px; font-weight: 500; }
.dash-sub { margin: 14px 0 6px; font-size: 13px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th, .dash-table td { padding: 5px 4px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.dash-table tr:first-child > * { border-top: 0; }
.dash-table thead th { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.dash-table tbody th { color: var(--muted); font-weight: 500; white-space: nowrap; }
.dash-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-table .num .muted { white-space: normal; }
.dash-activity .dash-table th, .dash-activity .dash-table td { white-space: nowrap; padding-right: 14px; }
.dash-activity .dash-table .dash-detail { width: 100%; max-width: 0; }
.dash-table tr.bad > * { color: var(--down); }
.dash-table tr.new td:first-child { box-shadow: inset 3px 0 0 var(--brand); padding-left: 8px; }
.dash-table tr.total td { font-weight: 700; }
.dash-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar { height: 3px; margin-top: 3px; background: var(--surface-2); border-radius: 2px; max-width: 120px; }
.dash-bar i { display: block; height: 100%; background: var(--brand); border-radius: 2px; }
.dash-since { margin-left: 4px; }
/* 2026-10-15: 처리 필요 뱃지 줄 대신 카드 안 줄 강조(관리 홈 입출금 "처리 필요"·고객센터 "답변 대기", 0보다 크면) */
.dash-table tr.need-row.on > * { background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; }
.dash-table tr.need-row.on a { color: inherit; }
.dash-errors summary { cursor: pointer; margin: 0; }
.dash-errors[open] summary { margin-bottom: 10px; }
.dash-log { margin: 0; padding: 0; list-style: none; font-size: 12px; }
.dash-log li { padding: 4px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.dash-log li:first-child { border-top: 0; }
@media (max-width: 900px) {
    .dash-grid { grid-template-columns: minmax(0, 1fr); }
    .dash-activity { overflow-x: auto; }
    .dash-activity .dash-table .dash-detail { min-width: 140px; max-width: 220px; }
}
/* 관리 홈 접속 리포트(2026-10-11 2단계): 요약 4칸 · 시간대 24칸 세로 막대 · 순위 목록 */
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dash-kpi strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.dash-kpi > div:last-child { font-variant-numeric: tabular-nums; }
.dash-traffic > .me-card, .dash-traffic > .dash-grid { margin-top: 14px; }
.dash-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; align-items: end; }
.dash-hour { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.dash-hour-col { width: 100%; height: 70px; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 3px; }
.dash-hour-col i { display: block; width: 100%; background: var(--brand); border-radius: 3px; min-height: 0; }
.dash-hour.now .dash-hour-col { box-shadow: inset 0 0 0 1px var(--brand); }
.dash-hour.future { opacity: 0.45; }
.dash-hour-n { font-size: 11px; font-variant-numeric: tabular-nums; }
.dash-hour-h { font-size: 10.5px; }
/* 최근 24일 일별(2026-10-15, 관리 > 접속 · 밤: 30 → 24칸, 광고주 방문자 현황 날짜별도 같은 모양): 시간대별 막대 모양 재사용. 좁으면 12칸·8칸씩 줄바꿈. 토 파랑·일 빨강 날짜 */
.dash-hours.dash-days { grid-template-columns: repeat(24, minmax(0, 1fr)); margin-bottom: 2px; }
.dash-days .dash-hour-n { font-size: 10px; }
.dash-days .dash-hour-h { font-size: 9.5px; white-space: nowrap; }
.dash-days .dash-hour-h.dash-sat { color: #5fb0ff; } .dash-days .dash-hour-h.dash-sun { color: #ff6b6b; }
:root[data-theme="light"] .dash-days .dash-hour-h.dash-sat { color: #1a5fc8; } :root[data-theme="light"] .dash-days .dash-hour-h.dash-sun { color: #c62828; }
@media (max-width: 1200px) { .dash-hours.dash-days { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 8px; } }
@media (max-width: 600px) { .dash-hours.dash-days { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
/* 페이지뷰|방문자 토글(2026-10-15 밤, /js/pv-chart.js): 제목 줄 오른쪽 작은 .tg-seg */
.tg-seg.pv-toggle { margin-left: auto; padding: 2px; border-radius: 8px; flex: none; }
.tg-seg.pv-toggle .tg-item { padding: 2px 9px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 500; line-height: 18px; border-radius: 6px; cursor: pointer; }
.tg-seg.pv-toggle .tg-item.active { background: var(--surface); color: var(--text); font-weight: 700; }
.dash-sub .tg-seg.pv-toggle { align-self: center; }
.dash .me-card-title .tg-seg.pv-toggle { align-self: center; }
.ad-traffic-chart + .ad-traffic-chart { margin-top: 4px; }
.dash-sub:has(.pv-toggle) { flex-wrap: wrap; row-gap: 4px; }
/* 접속 갈래(2026-10-15 밤): 사람 = 기본색·브랜드 막대, 봇 = 빨강, 검색엔진 = 초록(--best-ink). 쌓은 막대 .dash-stack(아래부터 사람·검색엔진·봇) */
:root { --tr-bot: #ff6b6b; --tr-se: var(--best-ink); --tr-staff: #FFCC00; --tr-search: var(--tr-se); --tr-ai: #c6f432; }
:root[data-theme="light"] { --tr-bot: #c62828; --tr-staff: #b07d00; --tr-ai: #6f9400; }
/* 2026-10-26 사용자 결정: 검색·AI(초록 하나) → 검색(초록 --tr-search = 옛 --tr-se) + AI(연두 --tr-ai, 다크 #c6f432 · 낮 #6f9400) */
.tr-search, .tr-parts .tr-search { color: var(--tr-search); } .tr-ai, .tr-parts .tr-ai { color: var(--tr-ai); }
.dash-hour-col.dash-stack i[data-c="search"] { background: var(--tr-search); }
.dash-hour-col.dash-stack i[data-c="ai"] { background: var(--tr-ai); }
.tr-sw-search { background: var(--tr-search); } .tr-sw-ai { background: var(--tr-ai); }
/* 관리(노랑, 2026-10-17 사용자 결정): 운영자·시험 계정 브라우저 방문 — 예전 판단 불가 노랑과 같은 색 */
.tr-staff, .tr-parts .tr-staff { color: var(--tr-staff); }
.dash-hour-col.dash-stack i[data-c="staff"] { background: var(--tr-staff); }
.tr-sw-staff { background: var(--tr-staff); }
/* 판단 불가(노랑) 갈래는 2026-10-17 사용자 결정으로 없앰(봇에 포함) — --tr-unknown·.tr-unknown·.tr-sw-unknown 삭제 */
.tr-bot { color: var(--tr-bot); } .tr-se { color: var(--tr-se); }
/* 사람 = 파랑(2026-10-15 밤 사용자 요청): 막대의 사람 색(--brand)과 같게 */
.tr-human, .tr-parts .tr-human { color: var(--brand); }
/* 관리 > 접속 배치 정리(2026-10-15 밤): 긴 설명 접기 · 봇별 표 10줄 + 더 보기(체크박스, 파셜이 innerHTML 로 바뀌어도 동작) */
.tr-help { margin: 4px 0 10px; } .tr-help > summary { cursor: pointer; font-size: 12px; } .tr-help[open] > summary { margin-bottom: 4px; }
tr.tr-more-row { display: none; } .tr-more-ck:checked ~ .tr-scroll tr.tr-more-row { display: table-row; }
.tr-more-btn { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--brand); cursor: pointer; }
.tr-more-btn .tr-more-off { display: none; } .tr-more-ck:checked ~ .tr-more-btn .tr-more-on { display: none; } .tr-more-ck:checked ~ .tr-more-btn .tr-more-off { display: inline; }
.tr-parts { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tr-parts .tr-bot { color: var(--tr-bot); } .tr-parts .tr-se { color: var(--tr-se); }
.dash-kpi .tr-kpi-views { margin-top: 6px; font-variant-numeric: tabular-nums; } .dash-kpi .tr-kpi-views b { font-size: 16px; }
/* 화면 확인(2026-10-15 밤): 요약 칸의 사람 중 확인·미확인 한 줄 · 기간 카드 UA/국가 두 칸(900 이하 한 칸) */
.tr-js { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tr-js-sum { max-width: 560px; }
.dash-hour-col.dash-stack { flex-direction: column; justify-content: flex-end; align-items: stretch; overflow: hidden; }
.dash-hour-col.dash-stack i { border-radius: 0; flex: none; }
.dash-hour-col.dash-stack i[data-c="human"] { background: var(--brand); }
.dash-hour-col.dash-stack i[data-c="se"] { background: var(--tr-se); }
.dash-hour-col.dash-stack i[data-c="bot"] { background: var(--tr-bot); }
.tr-legend { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.tr-cls { gap: 8px; }
.tr-cls-item { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; user-select: none; }
.tr-cls-item input { margin: 0 1px 0 0; width: 13px; height: 13px; cursor: pointer; }
.tr-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-left: 4px; }
.tr-sw-human { background: var(--brand); } .tr-sw-se { background: var(--tr-se); } .tr-sw-bot { background: var(--tr-bot); }
.tr-head { margin-top: 18px; }
.tr-se-bar i { background: var(--tr-se); }
.tr-scroll { overflow-x: auto; }
.dash-grid.tr-full { grid-template-columns: minmax(0, 1fr); } /* 봇별·IP 표는 한 줄 전체 */
.tr-table td, .tr-table th { white-space: nowrap; }
.tr-table tr.tr-over > td { background: color-mix(in srgb, var(--tr-bot) 18%, transparent); }
/* 봇별 표 차단 후보 뱃지·robots 무시 표시(2026-10-17, 표시만 — title 에 걸린 기준) */
.tr-cand { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 11px; line-height: 18px; color: #fff; background: var(--tr-bot); cursor: help; }
.tr-tag { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: 11px; line-height: 16px; color: var(--tr-bot); border: 1px solid var(--tr-bot); cursor: help; }
.tr-table td.tr-reasons { white-space: normal; min-width: 120px; }
.tr-home .tr-cell b { font-weight: 600; }
.tr-home .tr-parts { font-size: 11px; }
.tr-home-key { margin: 0 0 4px; font-size: 11.5px; } /* 관리 홈 접속 갈래 범례 한 줄(2026-10-15 밤 — 제목 옆에 두면 좁은 카드에서 줄바꿈) */
.dash-rank .dash-rank-i { width: 1%; padding-right: 6px; }
.dash-rank .dash-rank-k { overflow-wrap: anywhere; }
.dash-rank .dash-bar { max-width: none; }
.dash-wide { grid-column: span 2; }
/* 접속 리포트 분류 기간 7일/30일 토글(2026-10-11): /admin/api/traffic 로 분류 카드만 바꿔 끼운다 */
.dash-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.dash-period .tg-item { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; line-height: 20px; cursor: pointer; }
.dash-period .tg-item.active { background: var(--surface); color: var(--text); }
[data-traffic-breakdown] > .dash-grid { margin-top: 14px; }
[data-traffic-breakdown].loading { opacity: 0.5; transition: opacity 0.15s; }
@media (max-width: 900px) {
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-wide { grid-column: auto; }
    .dash-hours { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 8px; }
}

/* 광고 안내(2026-10-11, views/me-ads-info.ejs): 비로그인·일반 회원이 광고주 메뉴를 열면 */
.ads-info-lead { margin: 0 0 12px; line-height: 1.6; }
.ads-info-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ads-info-cta form { margin: 0; }
.ads-info-cta .form-hint { flex-basis: 100%; margin: 2px 0 0; }

/* ---- 관리자 배너(하우스, 2026-10-11, src/web/ads.js houseHtml): 팔리지 않은 칸을 채우는 HTML 박스(이미지 아님).
   점선 테두리 + 회색 문구, 칸 이름(#L·#R·#1~#8)과 리더보드 문의 문구만 강조색(다크 노랑 / 낮 하늘색). 글자는 칸 폭에 맞춰 cqw 로 줄어든다 ---- */
.ad-house { container-type: inline-size; --house-acc: #FFCC00; }
:root[data-theme="light"] .ad-house { --house-acc: #1a5fc8; } /* QA 2026-10-11: #2f8fe6(3.1:1) → 5.5:1 */
.ad-house > a.house { box-sizing: border-box; margin: 0; width: 100%; height: 100%; /* 2026-10-14 밤 사용자 요청: 점선을 칸 끝선에(전엔 안쪽 3px 여백 — 칸 간격보다 6px 넓어 보였다) */ justify-content: flex-start; gap: 6cqw; padding: 0 7cqw; border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); color: var(--muted); text-decoration: none; }
.ad-house > a.house:hover { border-color: var(--house-acc); text-decoration: none; }
.house-tag { flex: none; color: var(--house-acc); font: 800 clamp(11px, 9cqw, 30px)/1 'Inter', var(--sans); }
.house-txt { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; }
@media (min-width: 601px) and (max-width: 900px) { .ad-leaderboard.ad-house { height: 90px !important; aspect-ratio: auto !important; } } /* 601~900 빈 가운데 상자는 728×90 칸과 같은 높이(2026-10-15) */
.house-title, .house-cta, .house-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 분석가 모집 배너 셋째 줄(2026-10-21): 평가 방식 한 줄 — 리더보드에서만, 작은 칸에선 숨김 */
.house-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; }
.house-sub { font-size: clamp(10px, 1.3cqw, 13px); line-height: 1.2; color: var(--muted); }
.ad-house:not(.ad-leaderboard) .house-sub { display: none; }
/* 2026-10-17 밤 사용자 요청 "광고 글자를 전체적으로 더 굵게, 낮 모드에서 잘 안 보임": 제목은 본문 글자색·800, 문의 줄 700·불투명 */
.house-title { font-weight: 800; font-size: clamp(9px, 6cqw, 22px); line-height: 1.2; color: var(--text); }
.house-cta { font-size: clamp(7px, 3.6cqw, 13px); line-height: 1.2; font-weight: 700; opacity: 1; }
/* 리더보드: 한 줄(왼쪽 제목 · 오른쪽 문의), 문의만 강조색 */
.ad-leaderboard.ad-house { width: 100%; height: 90px; }
.ad-leaderboard.ad-house > a.house { padding: 0 4cqw; }
.ad-leaderboard.ad-house .house-txt { flex: 1; flex-direction: column; gap: 0.25em; } /* 2026-10-21: 제목·쉐어 줄은 .house-row 가 가로로, 아래 .house-sub 평가 방식 한 줄 */
.ad-leaderboard.ad-house .house-title { font-size: clamp(14px, 2.2cqw, 26px); }
.ad-leaderboard.ad-house .house-cta { font-size: clamp(12px, 1.6cqw, 18px); font-weight: 700; color: var(--house-acc); opacity: 1; }
/* 폰(900 이하): 이미지 소재와 같은 비율 — 탑(좌·우)·일반 400:120, 리더보드 800:180(두 줄 가운데) */
@media (max-width: 900px) {
    .ad-house:not(.ad-leaderboard) { width: 100%; max-width: 100%; height: auto; min-height: 0; aspect-ratio: 320 / 100; }
    .ad-leaderboard.ad-house { height: auto; min-height: 0; aspect-ratio: 320 / 100; }
    .ad-leaderboard.ad-house > a.house { justify-content: center; }
    .ad-leaderboard.ad-house .house-txt { flex: none; flex-direction: column; align-items: center; gap: 0.4em; }
    .ad-leaderboard.ad-house .house-title { font-size: clamp(14px, 5.5cqw, 26px); }
    .ad-leaderboard.ad-house .house-cta { font-size: clamp(11px, 3.4cqw, 16px); }
    .ad-leaderboard.ad-house .house-row { flex-direction: column; align-items: center; gap: 0.3em; }
    .ad-leaderboard.ad-house .house-sub { font-size: clamp(9px, 2.8cqw, 12px); white-space: normal; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
/* 아주 작은 칸(폰 2열 등, 폭 240 이하): 문의 줄은 숨기고 제목을 두 줄까지 — 긴 언어(es 등)가 말줄임으로 잘리지 않게 */
@container (max-width: 240px) {
    .ad-house:not(.ad-leaderboard) .house-cta { display: none; }
    .ad-house:not(.ad-leaderboard) .house-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: clamp(9px, 7cqw, 14px); }
}

/* 홈·레일 요약 표가 좁을 때(표 칸 860px 미만 — 1400 폭 홈 702px, 태블릿 등, 2026-10-11): ⏱·북메이커 열을 숨기고 환급률(괴리) 아래 둘째 줄(.payout-sub)로.
   자리가 충분하면 원래대로 열을 보여 준다. 폰(900 이하)은 카드라 해당 없음 */
.payout-sub { display: none; }
.table-scroll:has(> .po-table) { container-type: inline-size; }
@media (min-width: 901px) {
    @container (max-width: 859px) {
        .po-table th.col-stale, .po-table td.col-stale, .po-table th.col-books, .po-table td.books { display: none; }
        .po-table .payout-sub { display: block; margin-top: 2px; font-family: var(--sans); font-size: 11px; color: var(--muted); white-space: nowrap; }
        .po-table .payout-sub .sub-stale { margin-right: 4px; }
        .po-table th.col-payout, .po-table td.payout { min-width: 84px; }
        .po-table .col-match { min-width: 0; }
        .po-table .col-sport { width: 96px; min-width: 96px; }
        .po-table .col-pill { width: 72px; }
        .po-table .pill { min-width: 56px; }
        .po-table { min-width: 0; }
    }
}

/* 북메이커 환급률 랭킹(2026-10-11, 시험 페이지 /{언어}/bookmakers — page 레이아웃 본문). 폰(900 이하)은 행마다 카드 */
.bmrank { max-width: 1120px; margin: 0 auto 40px; }
.bmrank-sports .tg-seg { position: relative; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.bmrank-sports .tg-seg::-webkit-scrollbar { display: none; }
.bmrank-box { padding: 14px 16px; }
.bmrank-meta .muted { color: var(--muted); }
.bmrank-meta { margin: 0 0 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 12.5px; }
.bmrank-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bmrank-table th { padding: 8px 10px; text-align: right; color: var(--muted); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
.bmrank-table td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.bmrank-table tbody tr:last-child td { border-bottom: 0; }
.bmrank-table .c-rank { width: 44px; text-align: center; color: var(--muted); }
.bmrank-table .c-bm { text-align: left; width: 100%; white-space: normal; }
.bmrank-table .c-bm .tag { margin-left: 4px; }
.bmrank-chip { font-size: 12px; line-height: 20px; padding: 0 8px; }
.bmrank-table td.c-avg { font-size: 14px; font-weight: 600; }
.bmrank-table td.c-avg.is-top { font-weight: 800; }
.bmrank-table tr.is-low td { color: var(--muted); }
.bmrank-table tr.is-low .bmrank-chip { opacity: 0.6; }
.bmrank-table tr.low-first td { border-top: 2px solid var(--border); }
.bmrank-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
/* 홈 랭킹 위젯(2026-10-11): 제목 줄 우측 '전체 보기 →', 설명 한 줄, 종목 탭(랭킹 페이지로 이동), 표(랭킹 페이지와 같은 파셜), 아래 시장·기간·경기 수 */
.bmrank-home .widget-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bmrank-lead { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.bmrank-home .bmrank-sports { margin-bottom: 6px; }
.bmrank-foot { margin: 8px 0 0; color: var(--muted); font-size: 11.5px; }
@media (max-width: 900px) {
    .bmrank-box { padding: 10px 12px; }
    .bmrank-table thead { display: none; }
    .bmrank-table, .bmrank-table tbody { display: block; }
    /* 카드: 1줄 순위 · 북메이커(태그) · 평균 환급률(우) / 2줄 최고 배당 비율 · 경기 수 */
    .bmrank-table tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "rank bm avg" "rank sub sub"; align-items: center; gap: 2px 8px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
    .bmrank-table tbody tr:last-child { border-bottom: 0; }
    .bmrank-table tr.low-first { border-top: 2px solid var(--border); }
    .bmrank-table td, .bmrank-table tr.low-first td { padding: 0; border: 0; }
    .bmrank-table .c-rank { grid-area: rank; width: auto; }
    .bmrank-table .c-bm { grid-area: bm; width: auto; }
    .bmrank-table .c-avg { grid-area: avg; }
    .bmrank-table .c-best, .bmrank-table .c-n { grid-row: 2; font-size: 11.5px; color: var(--muted); text-align: left; }
    .bmrank-table .c-best { grid-column: 2; }
    .bmrank-table .c-n { grid-column: 3; text-align: right; }
    .bmrank-table .c-best::before, .bmrank-table .c-n::before { content: attr(data-label) " "; font-family: var(--sans); }
}

.bmrank-home[aria-busy="true"] .bmrank-table, .bmrank-home[aria-busy="true"] .bmrank-foot { opacity: 0.5; transition: opacity 0.15s; } /* 홈 랭킹 종목 탭: 표를 받아오는 동안 */
/* 랭킹 종목 탭(홈 위젯·랭킹 페이지): 폰(900 이하)에서는 가로 스크롤 대신 줄바꿈 — 스크롤바가 숨겨져 뒤쪽 종목이 잘려 보이고 누를 수 없었다(2026-10-11) */
@media (max-width: 900px) { .bmrank-sports .tg-seg { display: flex; flex-wrap: wrap; overflow: visible; max-width: 100%; } }
.bmrank-mainnote { font-size: 12.5px; align-self: center; }
/* 랭킹 리그 선택(2026-10-11): 시장 탭 옆 "리그 선택 ▾" — details 펼침. PC 는 버튼 아래 떠 있는 패널, 폰(900 이하)은 줄 전체 폭으로 펼쳐 밀어냄 */
.bmrank-lg { position: relative; display: inline-block; }
.bmrank-lg-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; user-select: none; white-space: nowrap; }
.bmrank-lg-btn::-webkit-details-marker { display: none; }
.bmrank-lg-btn:hover { border-color: var(--brand); }
.bmrank-lg-btn.is-on { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.bmrank-lg-chev { font-size: 11px; color: var(--muted); transition: transform 0.12s; }
.bmrank-lg[open] .bmrank-lg-chev { transform: rotate(180deg); }
.bmrank-lg.is-disabled .bmrank-lg-btn { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
/* 분석글 페이지(2026-10-14): 리그 선택이 종목 줄 오른쪽 끝. 패널은 버튼이 아니라 **종목 줄** 기준 오른쪽 — 줄이 접혀 버튼이 왼쪽 끝으로 내려가도(태블릿 등) 패널이 왼쪽으로 잘리지 않는다(사용자 지적) */
.bmrank-sports { position: relative; }
.bmrank-sports .tg-seg { flex: 0 1 auto; min-width: 0; } /* 같은 줄 오른쪽에 리그 선택이 있어도 종목 탭이 줄어들며 스크롤 */
.bmrank-lg-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(480px, calc(100vw - 32px)); padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); }
@media (max-width: 900px) {
    /* QA 2026-10-11(데14): 열어도 아래 줄(기간·100% 이상만 등)을 밀지 않게 — 목록은 필터 줄 바로 아래에 겹쳐 띄운다(줄 폭 가득) */
    .control-row:has(> .bmrank-lg) { position: relative; }
    .bmrank-lg { position: static; }
    .bmrank-lg-panel { position: absolute; left: 0; right: 0; width: auto; top: calc(100% + 6px); }
}
.widget-title a.widget-link { color: inherit; text-decoration: none; } .widget-title a.widget-link:hover { color: var(--brand); text-decoration: underline; } /* 레일 랭킹 제목 = 랭킹 페이지 링크(2026-10-11) */
/* PC 배당표 레일(2026-10-11): 위젯↔배너 간격을 배너끼리 간격과 맞춘다 — 배너끼리는 0 + 1px 선(관리자 배너는 안쪽 3px 여백이라 보이는 간격 약 7px),
   위젯↔배너는 12·14px 이라 따로 떨어져 보였다. 4px 로 두면 관리자 배너 기준 보이는 간격이 7px 로 같아진다 */
@media (min-width: 1400px) { .rail[data-rail] { gap: 4px; } }
/* PC(1400 이상) 칸 간격 절반(2026-10-11 사용자): 좌·우 레일 ↔ 중앙 18 → 9, 탑 광고 줄 ↔ 본문 18 → 9, 상단바 ↔ 탑 광고 14 → 7(모바일과 같은 값) */
@media (min-width: 1400px) { .layout { column-gap: 9px; row-gap: 9px; padding-top: 7px; } }
/* PC 사이드바·레일의 고정 기준을 레이아웃 위 여백(7px)과 같게(2026-10-17 밤): 기본값 14px 이라 맨 위에서 본문(리더보드 62)보다 6px 낮게(68) 시작했다 — 광고 줄이 따로 있던 전엔 안 드러남. 아래 여백 14 는 그대로 */
@media (min-width: 1400px) {
    .sidebar, .rail { top: calc(var(--topbar-h) + var(--admin-bar-h) + 7px); max-height: calc(100vh - var(--topbar-h) - var(--admin-bar-h) - 21px); }
}
/* (2026-10-17 밤) 탑 좌·우가 없어져 리더보드 칸을 좌우로 5px 넓히던 규칙 제거 */
.league-block:last-child { margin-bottom: 0; } /* 마지막 리그 표 아래 리그 사이 여백(20px)이 남아 태블릿에서 배당표↔첫 배너 줄이 벌어져 보였다(2026-10-11) */
/* 배당표 레일 랭킹(2026-10-11): 태블릿은 홈과 같은 표, PC 레일은 한 줄 목록. 접힘 3줄 · 펼침 10줄 */
.rail-rank .rail-rank-table { display: none; }
@media (min-width: 901px) and (max-width: 1399px) { body[data-layout="app"] .rail-rank .rail-rank-list { display: none; } body[data-layout="app"] .rail-rank .rail-rank-table { display: block; } }
.rail-fold:not(.is-open) .rail-rank-table .bmrank-table tbody tr:nth-child(n+4), .rail-fold .rail-rank-table .bmrank-table tbody tr:nth-child(n+11) { display: none; }
/* 조합 환급률·배당 괴리 페이지(2026-10-11, /{언어}/arbs · /spreads): 랭킹 페이지 틀(.bmrank) + 홈 요약 표(.po-table, 폰은 카드) */
.arb-meta { align-items: center; }
.arb-meta-r { display: inline-flex; align-items: center; gap: 10px; }
.arb-box .pager { margin-top: 12px; }
/* 다리별 배분 비율 · 신선도(배당 알약 아래 한 줄) */
.arb-table td.col-pill { vertical-align: top; }
.leg-meta { display: flex; justify-content: space-between; gap: 4px; margin-top: 3px; padding: 0 2px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.leg-meta .leg-split { color: var(--text); }
/* 100% 이상만(켜고 끄기): 리그 선택 버튼과 같은 모양 + 체크 칸 */
.arb-only { text-decoration: none; }
.arb-only:hover { text-decoration: none; }
.arb-only-box { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid var(--muted); border-radius: 3px; font-size: 11px; line-height: 1; }
.arb-only.is-on .arb-only-box { border-color: var(--brand); background: var(--brand); color: var(--surface); }
@media (max-width: 900px) {
    .arb-meta { flex-direction: column; align-items: flex-start; }
    /* 승패 종목만 고른 경우(무 열 없음): 원정 제목은 오른쪽 */
    .arb-table.no-draw td.col-pill { grid-column: span 3; }
    .arb-table.no-draw td.col-pill:nth-child(5)::before { text-align: right; }
}
@media (min-width: 901px) { @container (max-width: 859px) { .arb-table .leg-meta { flex-direction: column; align-items: center; gap: 0; } } } /* 좁은 표(태블릿): 배분·신선도를 두 줄로 — 한 줄이면 1000 폭에서 표가 12px 넘쳤다 */
@media (min-width: 901px) { @container (max-width: 1199px) { .arb-box .po-table .col-match .team { max-width: 100%; min-width: 0; } .arb-box .po-table td.col-match { width: 100%; max-width: 0; } .arb-box .po-table .col-match .team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } } /* 950 폭: 긴 팀 이름 때문에 표가 35px 넘쳤다 — 이름을 말줄임(2026-10-14 밤: 배당 칸에 배분·시간이 들어가 PC 표도 넘쳐 859 → 1199). QA 2026-10-11(데12): 고정 104px 대신 경기 칸이 남는 폭을 다 쓰고(width 100% + max-width 0) 그 폭에서만 말줄임 */
@media (min-width: 901px) and (max-width: 1099px) { .arb-box { padding: 12px 10px; } } /* 좁은 태블릿: 상자 안쪽 여백을 줄여 표 칸 확보 */
@media (min-width: 901px) { @container (max-width: 679px) { .arb-table .col-pill { width: auto; padding-left: 4px !important; padding-right: 4px !important; } .arb-table .pill { min-width: 50px; } .arb-table .col-sport { width: 84px; min-width: 84px; } } } /* 901~940 폭: 표 칸 최소 폭 줄이기 */

/* ---- 모바일 인터페이스(2026-10-11) ----
   폰(900 이하): 상단바의 관리 버튼은 ⋮ 서랍으로(서랍 맨 위 "사이트" 묶음 첫 줄), 관리 표시(점) 버튼은 폰에서 뺀다 — 관리자 상단바가 360 폭에서 54px 넘쳐 ⋮ 가 화면 밖으로 밀렸다.
   420 이하: 로고 높이 22 → 18. 맨 위로 버튼(.back-top) · 배당표 리그 바로가기(.league-jump) */
@media (max-width: 420px) { .brand-logo { height: 18px; } }
.back-top { position: fixed; right: 14px; bottom: 18px; z-index: 40; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.18s, transform 0.18s; }
.back-top.is-on { opacity: 0.92; transform: none; pointer-events: auto; }
.back-top:hover { opacity: 1; border-color: var(--brand-bg); }
.league-block, .rail[data-rail] .widget { scroll-margin-top: 66px; } /* 바로가기로 이동했을 때 고정 상단바에 가리지 않게 */
/* QA 2026-10-11(데8): 낮 모드에서만 대비를 높인다(본문 4.5:1 이상, 큰 글자 3:1). 다크 모드 값은 그대로.
   흰 바탕·회색 바탕(#f0f2f5·#f4f5f7)·초록 바탕(#e9f5ef·#eef9f2) 모두 기준을 넘는 값 — 전후 수치는 docs/decisions.md */
:root[data-theme="light"] { --muted-strong: #555c69; --best-ink-strong: #0e6630; }
:root[data-theme="light"] .odds-table tr.payout-row td.bm-payout:not(.top) { color: var(--muted-strong); } /* 북메이커별 환급률 보조 행 */
:root[data-theme="light"] .payout-single { color: var(--muted-strong); }
:root[data-theme="light"] .odd.suspended { color: var(--muted-strong); opacity: 1; } /* 중단 배당: 취소선은 그대로, 흐림만 줄임 */
:root[data-theme="light"] .payout-stale { color: #3b4150; opacity: 1; } /* ⏱: 가는 글리프라 진하게 */
:root[data-theme="light"] .payout.arb .payout-val { color: var(--best-ink-strong); } /* 초록 바탕 위 환급률 */
/* 105% 이상 미확인 조합 = 노랑(2026-10-16) — 초록 대신. 실제 사이트로 모든 다리가 확인되면 초록 */
.payout.arb.unv { background: color-mix(in srgb, #e3b341 30%, transparent); }
.payout.arb.unv .payout-val, :root[data-theme="light"] .payout.arb.unv .payout-val { color: #c98a00; }
:root:not([data-theme="light"]) .payout.arb.unv .payout-val { color: #f2c94c; }
.rail-lines > li.rl-item.is-arb.unv { background: color-mix(in srgb, #e3b341 26%, transparent); }
:root[data-theme="light"] .ad-house .house-title, :root[data-theme="light"] .ad-house:not(.ad-leaderboard) .house-cta { color: var(--muted-strong); opacity: 1; }

/* 로고 없는 리그 자리 표시(QA 2026-10-11 2차 데15): 빈 원 대신 리그 이름 첫 글자 */
.side-logo-empty { display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--muted); line-height: 1; }
.league-logo-empty { display: inline-grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; }

/* ---------- 미들(2026-10-12): 공개 페이지(/{언어}/middles) 표 + 홈 위젯(compact) — partials/middle-table ----------
   PC 열 = 시작 · 경기(아래 줄 종목·리그) · 시장 · 다리 A · 다리 B · 구간 · 빗나감 · 적중 · 손익분기 · ⏱ / 홈 위젯 = 시간 · 경기 · 구간 · 다리 A · 다리 B · 빗나감.
   다리 칸 = 북메이커 칩 + 기준선 / 배당 + 마지막 변경 뒤 지난 시간. 100% 이상은 빗나감 칸 초록 바탕(아비트리지와 같은 표시).
   폰(900 이하)은 경기마다 카드: 1줄 시간 · 시장 · 리그 / 2줄 홈 vs 원정 / 3줄 다리 A(좌) · 다리 B(우) / 4줄 구간 · 빗나감(⏱) · 적중 */
.mid-scroll { container-type: inline-size; }
.mid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mid-table th { padding: 7px 8px; text-align: left; color: var(--muted); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2); } /* 다른 위젯 표(.odds-table)와 같은 머리글 바탕 */
.mid-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.mid-table tbody tr:last-child td { border-bottom: 0; }
.mid-table .c-num { text-align: right; }
.mid-table td.c-time .time { display: block; font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.mid-table td.c-time .date { display: block; font-size: 10.5px; color: var(--muted); }
.mid-table td.c-match { width: 100%; max-width: 0; } /* 남는 폭을 다 쓰고 그 폭에서만 말줄임 */
.mid-teams { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-weight: 500; }
.mid-teams:hover { text-decoration: underline; }
.mid-teams em { font-style: normal; color: var(--muted); font-size: 11px; margin: 0 5px; }
.mid-sub { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--muted); }
.mid-table td.c-mk { font-size: 12px; color: var(--muted); }
.mid-leg-top { display: flex; align-items: center; gap: 5px; }
.mid-line { font-size: 12px; }
.mid-leg-bot { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.mid-odd { font-size: 13.5px; font-weight: 700; }
.mid-age { font-size: 10.5px; color: var(--muted); }
.mid-table td.c-win { font-size: 12.5px; font-weight: 600; }
.mid-table td.c-miss .payout-val { font-size: 13.5px; font-weight: 700; }
.mid-table tr.is-arb td.c-miss { background: color-mix(in srgb, var(--best-bg) 70%, transparent); }
.mid-table tr.is-arb td.c-miss .payout-val { color: var(--best-ink); }
.mid-table td.c-be { color: var(--muted); }
.mid-table .c-stale { width: 18px; padding-left: 0; padding-right: 0; text-align: center; font-size: 11px; }
.mid-table .mid-stale-in { display: none; margin-left: 4px; font-size: 11px; }
.mid-table .mid-m-only { display: none; } /* 홈 위젯(compact)의 시장: 폰 카드에서만(적중은 2026-10-14 저녁부터 모든 폭) */
/* 좁은 표(태블릿 본문·1400 홈 등): 시장·손익분기 열을 뺀다(시장은 다리 이름으로 구분된다) */
@media (min-width: 901px) {
    @container (max-width: 780px) {
        .mid-table .c-mk, .mid-table .c-be { display: none; }
        .mid-table th, .mid-table td { padding-left: 6px; padding-right: 6px; }
        /* 경기 칸이 좁아 두 팀이 다 잘리던 것(1400 폭): 홈·원정을 두 줄로 */
        .mid-table .mid-teams em { display: none; }
        .mid-table .mid-home, .mid-table .mid-away { display: block; overflow: hidden; text-overflow: ellipsis; }
    }
}
/* 홈 위젯 "더 보기": 접힘 4행 · 펼침 10행(다른 홈 위젯과 같음) */
.home-fold:not(.is-open) .mid-table tbody tr:nth-child(n+4), .home-fold .mid-table tbody tr:nth-child(n+11) { display: none; }
:root[data-theme="light"] .mid-table tr.is-arb td.c-miss .payout-val { color: var(--best-ink-strong); }
@media (max-width: 900px) {
    .mid-table { display: block; }
    .mid-table thead { display: none; }
    .mid-table tbody { display: flex; flex-direction: column; gap: 8px; }
    /* 6칸 격자(요약 카드와 같은 방식): 칸을 겹쳐 잡아 1줄은 좌·중·우, 3줄 다리는 반반 */
    .mid-table tr.mid-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 8px; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: 10px 12px; }
    .mid-table td { display: block; min-width: 0; padding: 0; border: 0; }
    .mid-table tbody tr:last-child td { border: 0; }
    /* 1줄: 시간(좌) · 시장(중앙) · 리그(우) */
    .mid-table td.c-time { grid-row: 1; grid-column: 1 / span 3; justify-self: start; white-space: nowrap; display: flex; align-items: baseline; gap: 5px; }
    .mid-table td.c-time .time, .mid-table td.c-time .date { display: inline; }
    .mid-table td.c-mk, .mid-table td.c-mk.mid-m-only { grid-row: 1; grid-column: 3 / span 2; justify-self: center; display: block; text-align: center; font-size: 11px; white-space: nowrap; }
    .mid-table td.c-match { display: contents; }
    .mid-table .mid-sub { grid-row: 1; grid-column: 5 / span 2; justify-self: end; text-align: right; max-width: 100%; white-space: nowrap; }
    /* 2줄: 홈(좌) · vs(중앙) · 원정(우) */
    .mid-table .mid-teams { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13.5px; }
    .mid-table .mid-teams em { margin: 0; }
    .mid-table .mid-home, .mid-table .mid-away { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mid-table .mid-away { text-align: right; }
    /* 3줄: 다리 A(좌) · 다리 B(우) */
    .mid-table td.c-leg-a { grid-row: 3; grid-column: 1 / span 3; }
    .mid-table td.c-leg-b { grid-row: 3; grid-column: 4 / span 3; text-align: right; }
    .mid-table td.c-leg-b .mid-leg-top, .mid-table td.c-leg-b .mid-leg-bot { justify-content: flex-end; }
    .mid-table td.c-leg { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
    /* 4줄: 구간(좌) · 빗나감 ⏱(중앙) · 적중(우) — 라벨은 숫자 앞 작은 글자 하나만 */
    .mid-table td.c-win { grid-row: 4; grid-column: 1 / span 2; justify-self: start; font-size: 12px; white-space: nowrap; }
    .mid-table td.c-miss { grid-row: 4; grid-column: 3 / span 2; justify-self: center; white-space: nowrap; text-align: center; padding: 2px 8px; border-radius: 6px; }
    .mid-table td.c-hit, .mid-table td.c-hit.mid-m-only { grid-row: 4; grid-column: 5 / span 2; display: block; justify-self: end; white-space: nowrap; text-align: right; }
    .mid-table td.c-miss::before, .mid-table td.c-hit::before { content: attr(data-label) " "; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--muted); }
    .mid-table td.c-be, .mid-table td.c-stale { display: none; }
    .mid-table .mid-stale-in { display: inline; }
}
/* 도움말 예시 표(2026-10-12, 미들 절) */
.guide-table { margin: 8px 0 6px; border-collapse: collapse; font-size: 13px; line-height: 1.4; }
.guide-table th, .guide-table td { padding: 6px 12px; border: 1px solid var(--border); text-align: right; white-space: nowrap; }
.guide-table th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 12px; }
.guide-table th:first-child, .guide-table td:first-child { text-align: left; }
.guide-table tbody tr:nth-child(2) td { color: var(--best-ink); font-weight: 700; }
@media (max-width: 520px) { .guide-table { font-size: 12px; } .guide-table th, .guide-table td { padding: 5px 6px; white-space: normal; } }

/* ---------- 무료 사이트 알림(2026-10-12): 상단바 종·드롭다운·토스트·/me/alerts 목록·/me/setup ---------- */
.alert-bell { position: relative; display: flex; align-items: center; }
.bell-btn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.bell-btn:hover, .alert-bell.open .bell-btn { background: var(--surface-2); }
.bell-badge { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-family: var(--mono); }
.bell-badge[hidden] { display: none; }
.bell-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 380px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); z-index: 60; overflow: hidden; }
.bell-pop[hidden] { display: none; }
.bell-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.bell-pop-body { max-height: min(60vh, 460px); overflow-y: auto; }
.bell-pop-foot { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--brand); }
.bell-guest { padding: 14px; font-size: 13px; line-height: 1.6; word-break: keep-all; }
.bell-guest p { margin: 0 0 12px; }
.bell-guest-btns { display: flex; gap: 8px; }
.bell-guest-btns .btn { flex: 1; display: inline-flex; justify-content: center; text-align: center; }
.salert-empty { margin: 0; padding: 18px 12px; font-size: 12.5px; color: var(--muted); text-align: center; }
.salert-list { list-style: none; margin: 0; padding: 0; }
.salert-item + .salert-item { border-top: 1px solid var(--border); }
.salert-link { display: flex; gap: 10px; padding: 10px 12px; color: var(--text); }
.salert-link:hover { background: var(--surface-2); text-decoration: none; }
.salert-ico { flex: none; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 13px; }
.salert-odds .salert-ico { color: #FFCC00; }
.salert-arb .salert-ico, .salert-middle .salert-ico { color: var(--best-ink); }
.salert-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.salert-top { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.salert-head { font-weight: 500; }
.salert-item.unread .salert-head { font-weight: 700; }
.salert-item.unread .salert-link { box-shadow: inset 3px 0 0 var(--brand); }
.salert-time { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.salert-valid { font-size: 11px; padding: 0 6px; border-radius: 4px; white-space: nowrap; }
.salert-valid.ok { background: var(--best-bg); color: var(--best-ink); }
.salert-valid.gone { background: var(--surface-2); color: var(--muted); }
.salert-match { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salert-line { font-size: 11.5px; color: var(--text); overflow-wrap: anywhere; }
.bell-pop .salert-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salert-more { color: var(--muted); font-family: inherit; }
.me-card .salert-list { margin: 0 -4px; }
.salert-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.salert-card-head .me-card-title { margin-bottom: 8px; }
.salert-state { margin-left: 6px; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); vertical-align: middle; }
.salert-state.on { border-color: color-mix(in srgb, var(--best-ink) 50%, var(--border)); color: var(--best-ink); background: var(--best-bg); }
.salert-enable { font-weight: 600; }
.salert-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.salert-toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; max-width: 340px; padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); font: inherit; font-size: 13px; text-align: left; cursor: pointer; animation: salert-in 0.25s ease; transition: opacity 0.4s ease; }
.salert-toast.hide { opacity: 0; }
@keyframes salert-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.shop-soon { margin: 2px 0 12px; font-size: 13.5px; line-height: 1.6; }
.setup-steps { margin: 14px 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; }
.setup-steps li { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.setup-steps li.done .setup-step-title { color: var(--best-ink); }
.setup-step-title { font-weight: 700; }
.setup-steps .form { align-self: stretch; max-width: 560px; }
@media (max-width: 900px) {
    .bell-pop { position: fixed; top: calc(var(--topbar-h) + 4px); right: 8px; left: 8px; width: auto; max-width: none; }
    .salert-toasts { right: 8px; left: 8px; bottom: 10px; align-items: stretch; }
    .salert-toast { max-width: none; }
}
/* 전체/직접 선택 목록(2026-10-12, MY 알림 카드 partials/pick-list) */
.pick-mode { display: flex; gap: 16px; flex-wrap: wrap; }
.pick-list { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.pick-list[hidden] { display: none; }
/* ---------- 이메일 추가·회원 유형별 가입 조건(2026-10-12) ---------- */
[data-adv-only][hidden], [data-member-only][hidden] { display: none !important; }
.tag.tag-wait { background: color-mix(in srgb, #FFCC00 22%, var(--surface-2)); color: var(--text); }
.setup-option { align-self: stretch; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; max-width: 560px; }
.setup-option .form { align-self: stretch; }
.setup-option-title { font-weight: 600; font-size: 13px; }
.vmail-resend { margin-top: 10px; }
.verify-card p[role="status"] { margin-bottom: 10px; }
/* ---------- 가입 시 이메일/텔레그램 택1 인증(2026-10-12) ---------- */
.form-verify { border: 0; padding: 0; margin: 0; gap: 8px; }
.seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg-opt { position: relative; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg-opt + .seg-opt span { border-left: 1px solid var(--border); }
.seg-opt input:checked + span { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--text); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: -2px; }
.vpanel { display: flex; flex-direction: column; gap: 6px; }
.vpanel[hidden] { display: none; }
.verify-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.verify-row .input-wide { flex: 1 1 200px; width: auto; }
.verify-done { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 400; color: var(--brand); cursor: pointer; text-decoration: underline; }
.btn.is-off { opacity: 0.45; pointer-events: none; }
.tg-manual { display: block; margin-top: 2px; }
.me-card .verify-pending { margin: 4px 0 0; }
.form-verify [hidden] { display: none !important; }
.form-verify .otp-input::placeholder { letter-spacing: normal; font-family: inherit; font-size: 12.5px; }
.verify-pending a { color: var(--brand); }

/* ---------- 회원 분석글(2026-10-13, docs/analysis.md) ---------- */
.an-head { align-items: flex-start; flex-wrap: wrap; }
.an-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* 탭 줄 안(2026-10-14): margin-left auto 그대로 — 폰에서 줄바꿈돼도 오른쪽 끝에 붙는다(스페이서가 있는 PC 는 줄 간격만큼만 떨어짐) */
.an-list { display: flex; flex-direction: column; gap: 10px; }
.an-list-compact { gap: 8px; }
.an-empty { padding: 18px 0; }
.an-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.an-card.is-hidden { opacity: 0.6; }
.an-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.an-sport { white-space: nowrap; }
.an-match { color: var(--text); font-weight: 600; text-decoration: none; }
.an-match:hover { text-decoration: underline; }
.an-time { white-space: nowrap; }
.an-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.an-title a { color: var(--text); text-decoration: none; }
.an-title a:hover { text-decoration: underline; }
.an-card-bot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.an-tag { font-size: 10.5px; }
.an-tag-hit { background: rgba(46, 204, 113, 0.18); color: #2ecc71; }
.an-tag-miss { background: rgba(231, 76, 60, 0.16); color: #e74c3c; }
.an-tag-void { background: var(--surface-2); color: var(--muted); }
.an-tag-locked { background: rgba(241, 196, 15, 0.16); color: #d4a800; }
.an-pick { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); white-space: nowrap; max-width: 100%; }
.an-pick-mk { color: var(--muted); font-size: 11.5px; }
/* 판정 결과 알약(2026-10-22): 적중 초록 · 실패 빨강 · 무효 회색 + 기호 */
.an-pick-res { font-weight: 800; line-height: 1; }
.an-pick.an-pick-hit { border-color: rgba(46, 204, 113, 0.7); background: rgba(46, 204, 113, 0.14); } .an-pick.an-pick-hit .an-pick-res { color: #2ecc71; }
.an-pick.an-pick-miss { border-color: rgba(231, 76, 60, 0.7); background: rgba(231, 76, 60, 0.12); } .an-pick.an-pick-miss .an-pick-res { color: #e74c3c; }
.an-pick.an-pick-void { border-color: var(--border); background: var(--surface-2); opacity: 0.8; } .an-pick.an-pick-void .an-pick-res { color: var(--muted); }
.an-match .an-sc { font-weight: 800; color: var(--text); } /* 판정된 글의 점수: 홈팀 왼쪽·원정팀 오른쪽(2026-10-22) */
.an-match .an-tm-lose, .an-match .an-tm-lose .an-sc { color: var(--muted); font-weight: 500; } /* 진 팀은 리그명처럼 회색(2026-10-22) */
.an-card-compact.an-st-hit .an-g-title > a, .an-card-compact.an-st-miss .an-g-title > a, .an-card-compact.an-st-void .an-g-title > a { color: var(--muted); } /* 판정된 글 제목도 회색 */
.an-pick-what { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.an-pick-odd { font-weight: 600; }
.an-pick-bm { font-size: 10.5px; }
.an-author { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; min-width: 0; }
.an-author:hover .an-user { text-decoration: underline; }
.an-user { color: var(--text); font-weight: 600; }
.an-stat { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.an-up { color: #2ecc71; }
.an-down { color: #e74c3c; }
.an-lang { font-size: 10.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.an-notice { margin-top: 12px; }
.an-post-top { margin-bottom: 8px; }
.an-post-title { margin: 4px 0 6px; }
.an-post-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-pickbox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.an-pickbox-label { font-size: 12px; font-weight: 700; color: var(--muted); }
/* 분석글 쇼츠(2026-10-26): 세로 9:16, PC 폭 300 · 폰 화면 폭(최대 360). 썸네일 버튼 → 누르면 iframe 으로 바뀜 */
.an-video { margin: 0 0 18px; }
.an-video-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.an-video-btn, .an-video-frame { display: block; width: 300px; max-width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: var(--radius); overflow: hidden; background: #000; }
.an-video-btn { position: relative; padding: 0; cursor: pointer; }
.an-video-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-video-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: rgba(255, 0, 0, 0.88); }
.an-video-play::after { content: ''; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.an-video-btn:hover .an-video-play, .an-video-btn:focus-visible .an-video-play { background: #f00; }
.an-video-admin { display: flex; gap: 8px; margin: 0 0 16px; }
.an-video-admin .input { flex: 1; min-width: 0; }
@media (max-width: 600px) { .an-video-btn, .an-video-frame { width: 100%; max-width: 360px; } }
.an-pickbox-note { font-size: 11.5px; }
/* 닉네임 옆 국기(2026-10-15): 계정 국가, TW·HK·MO 는 코드 글자 */
.an-flag { display: inline-block; width: 16px; height: 12px; margin-left: 4px; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(127,127,127,.25); object-fit: cover; flex: none; }
.an-cc { display: inline-block; margin-left: 4px; padding: 0 3px; font-size: 9.5px; font-weight: 700; line-height: 13px; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); vertical-align: 1px; flex: none; }
.me-flag-form { margin-top: 10px; } .me-flag-form .form-hint { margin: 4px 0 0; }
.an-now { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12.5px; } .an-now b { font-size: 13.5px; } .an-now .chg-arrow { font-size: 10px; } /* 지금 최고 배당(2026-10-15) */
.an-body { min-height: 80px; }
.an-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.an-inline { display: inline; margin: 0; }
.pill-btn.pill-btn-danger { color: var(--down); } /* 분석글 삭제(2026-10-15) */
.btn.btn-danger { background: #d93a3a; border-color: #d93a3a; color: #fff; font-weight: 700; } /* 신중히 누를 관리 버튼(2026-10-15 늦은 밤: 주간 랭킹 지금 갱신·쉐어 정산 실행) */
.btn.btn-danger:hover { background: #b82e2e; border-color: #b82e2e; color: #fff; }
.an-inline .pill-btn { font: inherit; font-size: 12px; }
.an-login { font-size: 12px; }
.an-others { margin-top: 22px; }
.an-others .an-card { margin-top: 8px; }
.an-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.an-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.an-stat-k { font-size: 11.5px; color: var(--muted); }
.an-stat-v { font-size: 20px; font-weight: 700; }
.an-stat-s { font-size: 11.5px; color: var(--muted); }
.an-bysport { margin-bottom: 14px; }
.an-home .widget-title { align-items: center; }
.an-home-write { margin-left: auto; text-decoration: none; }
.an-home-table { min-width: 0; }
.an-home-table .is-top td { font-weight: 700; }
.an-mine-actions { white-space: nowrap; }
.an-card-compact .an-mine-actions { margin-left: auto; flex: none; } /* 내 분석글 카드(2026-10-15): 1줄 오른쪽 끝 */
.an-mine-list { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 600px) { /* 폰: 버튼을 카드 오른쪽 위 모서리로(따로 한 줄을 차지하지 않게) */
    .an-mine-list .an-card-compact { position: relative; }
    .an-mine-list .an-card-line1 { padding-right: 118px; }
    .an-mine-list .an-card-line1:not(:has(.an-mine-actions a)) { padding-right: 64px; }
    .an-mine-list .an-mine-actions { position: absolute; top: 9px; right: 10px; }
    .an-mine-list .an-mine-actions .pill-btn { padding: 2px 9px; font-size: 11.5px; }
} /* 2026-10-15 사용자 요청: 수정·내리기 한 줄(전엔 칸에 flex-wrap 이라 두 줄) */
.an-mine-actions > * { display: inline-block; vertical-align: middle; margin-right: 6px; } .an-mine-actions > *:last-child { margin-right: 0; }
.an-form-match { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.an-oc-group { display: flex; gap: 8px; flex-wrap: wrap; }
.an-oc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); cursor: pointer; font-size: 13px; }
.an-oc:has(input:checked) { border-color: var(--brand-bg); box-shadow: inset 0 0 0 1px var(--brand-bg); }
.an-oc-odd { color: var(--muted); }
.an-best { margin-top: 6px; }
.an-body-input { min-height: 240px; font-family: inherit; }
/* 작성 화면 서식 버튼·미리보기(2026-10-16) */
.an-ed-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.an-ed-tabs button.tg-item { border: 0; background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.an-ed-tabs button.tg-item.active { background: var(--surface); }
.an-ed-preview { border: 1px dashed var(--border); border-radius: 8px; padding: 10px 14px; overflow-wrap: anywhere; }
.an-bubble { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; height: 18px; border-radius: 999px; background: rgba(95, 176, 255, 0.18); color: var(--brand-bg); font-size: 10.5px; font-weight: 700; text-decoration: none; vertical-align: middle; white-space: nowrap; }
.an-bubble:hover { background: var(--brand-bg); color: var(--brand-ink); }
.an-match-block .market-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 경기 상세 분석글 블록 방향 칩(2026-10-21 밤): 제목 옆 시장·방향별 편수, 폰은 줄바꿈 */
.an-dirs { display: inline-flex; flex-wrap: wrap; gap: 5px; font-size: 12px; font-weight: 500; }
.an-dir { padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; line-height: 20px; }
@media (max-width: 600px) { .an-match-block .market-title { gap: 6px; } .an-dirs { flex-basis: 100%; order: 3; } .an-dir { font-size: 11.5px; } }
/* 분석·예측 날짜 줄(2026-10-21 밤): 세그먼트 탭, 넘치면 옆으로 밀기. 0편 날짜는 회색(링크 유지) */
.tg-item.is-empty:not(.active) { opacity: 0.45; }
/* 허브·날짜 페이지 "이 날의 주요 경기"(2026-10-21 밤) */
.an-key-matches { margin-top: 18px; }
.an-key-title { font-size: 15px; margin: 0 0 8px; }
/* 경기 정보 · 순위·폼(2026-10-18, partials/match-info): 두 팀 비교 표 + 순위 전체 접기. 폼 칩 = 승 초록·무 회색·패 빨강 */
.mi-table { width: 100%; min-width: 0; } /* 배당표(.odds-table)의 최소 폭 900 을 풂 — 폰에서 옆으로 넘치지 않게 */
.mi-table td, .mi-table th { white-space: nowrap; }
.mi-table .mi-team { white-space: normal; min-width: 120px; }
.mi-table .mi-team .tag { margin-right: 4px; }
.mi-form { white-space: nowrap; }
.mi-f { display: inline-block; min-width: 18px; padding: 1px 3px; margin-right: 2px; border-radius: 3px; font-size: 11px; font-weight: 700; text-align: center; line-height: 16px; color: #fff; }
.mi-f-W { background: #2e9e57; } .mi-f-D { background: #7a8291; } .mi-f-L { background: #d0544b; }
.mi-full { margin-top: 8px; }
.mi-full > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
.mi-table-full tr.mi-hl > td { background: var(--warn-bg); }
.mi-note { margin: 6px 0 0; }
.mi-sub { font-size: 14px; margin: 14px 0 6px; }
/* 경기 정보 2단계(2026-10-18): 라인업·부상 = 두 팀 나란히(폰은 위아래), 경기 통계 = 홈 | 항목 | 원정 */
.mi-block > .market-title:not(:first-child) { margin-top: 22px; }
.mi-lu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .mi-lu { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.mi-lu-side .mi-sub { margin-top: 4px; }
.mi-xi { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.mi-xi li { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-top: 1px solid var(--border); font-size: 13px; }
.mi-xi li:first-child { border-top: 0; }
.mi-no { min-width: 22px; text-align: right; color: var(--muted); }
.mi-pos { display: inline-block; min-width: 30px; font-size: 10px; font-weight: 700; text-align: center; border-radius: 3px; padding: 1px 3px; background: var(--surface-2); color: var(--muted); }
.mi-pos-none { background: transparent; } /* 포지션 없는 선수 — 줄 맞춤용 빈 칸(2026-10-19) */
.mi-pos-G { color: #e0a800; } .mi-pos-D { color: #4aa3ff; } .mi-pos-M { color: #2e9e57; } .mi-pos-F { color: #d0544b; }
.mi-pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-subs { margin-top: 4px; }
.mi-venue-line { margin-top: 8px; }
.mi-stats { max-width: 560px; }
.mi-stats td:first-child, .mi-stats th:first-child { text-align: right !important; width: 30%; }
.mi-stats td:last-child, .mi-stats th:last-child { text-align: left !important; width: 30%; }
.mi-stats .mi-stat-k { text-align: center !important; color: var(--muted); font-size: 12px; }
.mi-jump { font-weight: 600; }
.mi-table th.mi-team, .mi-table td.mi-team { text-align: left !important; } /* app.js 자동 정렬보다 우선 */
@media (max-width: 600px) { .mi-table { font-size: 12px; } .mi-table .mi-x { display: none; } .mi-f { min-width: 15px; font-size: 10px; } .mi-table .mi-team { min-width: 0; word-break: keep-all; } }
.mi-ol { display: none; } /* 자국 리그 표: 폰에서만 팀명 아래 리그 이름(2026-10-19 평가 04-3 — 칸 두 개의 최소 폭 120 이 폰 폭을 넘겨 폼 칩이 잘렸음) */
@media (max-width: 600px) { .mi-ol { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; } }
.an-match-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.an-admin-actions { white-space: nowrap; } /* 2026-10-15 사용자 요청: 숨김·판정·작성 정지를 한 줄로(전엔 flex-wrap 으로 3줄) */
.an-admin-actions .an-inline { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; vertical-align: middle; }
.an-admin-actions .an-inline:last-child { margin-right: 0; }
.an-admin-table .is-hidden { opacity: 0.6; }
.an-admin-table .an-via-api { color: #000; background: #ffcc00; border-color: #ffcc00; } /* 작성 경로 api(2026-10-21 밤) */
/* 2026-10-15 늦은 밤: 검색 줄 한 줄(.form 의 세로 쌓기 해제) · 제목 열 줄바꿈(표가 화면을 넘어 작업 열이 잘리던 것) */
.admin-filter { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.admin-filter .input { width: 260px; max-width: 100%; }
.admin-filter label { display: inline-flex; align-items: center; gap: 4px; }
.admin-filter .form-hint { flex-basis: 100%; }
/* 관리 > 분석글(2026-10-15 늦은 밤): 글 수는 찾기 오른쪽, 규칙 문구는 같은 줄 우측 끝(좁으면 다음 줄) — "글 목록" 제목 줄 제거 */
.admin-filter .an-admin-count { font-weight: 700; }
.an-head-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 22px 0 8px; }
.an-head-row .admin-h2 { margin: 0; }
.an-head-row .an-inline { display: inline-flex; align-items: center; gap: 6px; }
.admin-filter .form-hint.an-admin-rules { flex-basis: auto; margin-left: auto; text-align: right; }
.an-admin-table td.an-admin-title { white-space: normal; min-width: 180px; max-width: 300px; }
.an-admin-table td.an-admin-wrap { white-space: normal; min-width: 150px; max-width: 230px; }
@media (max-width: 900px) {
    .an-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .an-card { padding: 10px 12px; }
    .an-card-top { font-size: 12px; }
    .an-title { font-size: 14px; }
}

/* 레일 분석글 위젯(2026-10-13, 레일 배너 판매 중단 뒤) */
.rail-analysis { gap: 14px; }
.an-rail-list { display: flex; flex-direction: column; }
.an-rail-item { padding: 6px 0; border-top: 1px solid var(--border); }
.an-rail-item:first-child { border-top: 0; }
.an-rail-link { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-decoration: none; color: var(--text); }
.an-rail-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-rail-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-rail-link:hover .an-rail-title { text-decoration: underline; }
/* 레일 분석글 분석가 줄(2026-10-14 저녁): 제목 위, [#순위] ▮막대 점수 닉네임 · 경기 — 막대는 글줄 가운데, 점수 굵게(양수 초록·음수 빨강·0 회색), 닉네임은 본문색 */
.an-rail-author .an-dots { vertical-align: middle; height: 13px; gap: 1px; }
.an-rail-author .an-score { font-weight: 700; } .an-rail-author .an-score.an-zero { color: var(--muted); }
.an-rail-author .an-user { color: var(--text); font-weight: 700; }
@media (max-width: 1399px) { .rail-analysis { display: none; } }


/* 분석가 랭킹 표(2026-10-13): 환급률 랭킹 표의 폰 카드 변환을 쓰지 않는 단순 표. 폰에서도 한 줄(#·분석가·점수·수익률·표본) */
.an-plain-table { min-width: 0; width: 100%; }
.an-rank-card { padding: 4px 10px; } /* 분석가 랭킹 탭: 표를 글 카드와 같은 카드 안에(2026-10-14 저녁) */
.an-rank-card .table-scroll { border: 0; box-shadow: none; background: transparent; }
.an-plain-table th, .an-plain-table td { padding: 8px 8px; white-space: nowrap; }
.an-plain-table td:nth-child(2) { white-space: normal; min-width: 0; }
.an-plain-table .an-author { gap: 4px; }
@media (max-width: 900px) {
    .an-plain-table th, .an-plain-table td { padding: 7px 5px; font-size: 12px; }
    .an-home-scroll { cursor: default; }
}

/* 홈 본문 분석가·최근 분석글 위젯 접기(1400 미만, 2026-10-13): 4개 보이고 더 보기로 10개 */
.home-fold:not(.is-open) .an-plain-table tbody tr:nth-child(n+4),
.home-fold .an-plain-table tbody tr:nth-child(n+11) { display: none; }
.an-home-recent .an-rail-title { white-space: normal; }

/* PC 홈(2026-10-13): 칼럼 박스가 빠진 뒤 첫 위젯(환급률 랭킹)의 위 여백 14px 가 사이드바·레일과 줄을 어긋나게 해서 0 으로 */
@media (min-width: 1400px) { body[data-layout="home"] .home-widgets.home-rank { margin-top: 0; } }
@media (max-width: 1399px) { body[data-layout="home"] .home-widgets.home-analysts { margin-top: 14px; } }

/* home-top2-tight */ /* 1400 미만 홈(2026-10-13): 리더배너 아래로 내려오는 탑 좌·우 줄의 위 여백 제거 — 사이드바 윗선과 맞춘다 */
@media (max-width: 1399px) { body[data-layout="home"] .home-top2 { margin-top: 0; } }

/* home-top2-mobile-half */ /* 폰 홈(2026-10-13 사용자 요청): 탑 좌·우 줄 위(그리드 row-gap 9→4)·아래(첫 위젯 여백 14→7) 간격 절반 */
@media (max-width: 900px) { body[data-layout="home"] .layout { row-gap: 5px; } body[data-layout="home"] .home-top2 { gap: 5px; } body[data-layout="home"] .home-widgets.home-analysts { margin-top: 7px; } } /* 2026-10-14 밤 사용자 요청: 폰 홈 배너 간격을 소개 카드↔필터 줄(7px)과 같게 — 리더보드↔탑 좌·우 4→7, 탑 좌↔우 6→7 → 같은 밤 2px → 0 → 5px */


/* tablet-row-gap */ /* 테블릿(2026-10-13 사용자 지적): 리더배너와 본문 사이 세로 간격이 18px(그리드 기본 gap)라 PC·폰(9px)보다 두 배 — 9px 로 통일 */
@media (min-width: 901px) and (max-width: 1399px) { .layout { row-gap: 9px; } }
/* tablet-rail-gap */ /* 테블릿(2026-10-14 사용자 지적): 배당표↔첫 레일 위젯은 그리드 row-gap 9px 인데 위젯끼리는 14px 라 달랐다 — 9px 로 통일 */
@media (min-width: 901px) and (max-width: 1399px) { body[data-layout="app"] .rail[data-rail] { gap: 9px; } }

/* col-strip-top2-tight */ /* 1400 미만 배당표·경기 상세·도움말(2026-10-13): 칼럼 박스가 빠져 .col-strip 안에는 탑 좌우 줄만 남았으므로 그 위 여백 12px 제거 — 사이드바 윗선과 맞춤 */
@media (max-width: 1399px) { .col-strip > .home-top2 { margin-top: 0; } }

/* 아이디·닉네임 중복 확인 안내(2026-10-13): 칸 아래 한 줄. 사용 가능 = 최고 배당 색, 사용 중 = 하락 색 */
.form-check-msg { margin: 0; font-size: 12px; color: var(--muted); }
.form-check-msg.is-ok { color: var(--best-ink); }
.form-check-msg.is-bad { color: var(--down); }
/* MY 계정 카드 닉네임 변경(2026-10-13) */
.me-nick { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.me-nick-label { display: block; margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.me-nick-row { display: flex; gap: 6px; align-items: center; }
.me-nick-row .input { flex: 1; min-width: 0; }
.me-nick .form-hint { margin-top: 4px; }

/* 분석글 안 광고 칸 .ad-an(옛 분석(10) 슬롯 클래스, src/web/ads.js SLOT_CLASS): 모바일 소재 400×120 그대로(칸이 좁으면 비율 유지 축소) */
.ad-an { width: 400px; max-width: 100%; height: auto; min-height: 0; aspect-ratio: 400 / 120; }
.ad-an img.ad-img-mobile { width: 100%; height: 100%; }
.ad-an.ad-house { width: 400px; max-width: 100%; height: auto; min-height: 0; aspect-ratio: 400 / 120; }


/* 분석글 카드 3줄(2026-10-13 밤): 시간 · 리그 · 경기 + 오른쪽 태그 / 제목 / 예측 · 닉네임 · 조회·댓글 */
.an-card-top .an-sep { color: var(--muted); opacity: 0.6; }
.an-card-tags { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.an-card-compact .an-card-tags { margin-left: 0; } /* 2줄 카드(2026-10-14 사용자 요청): 마감·판정 태그를 오른쪽 끝이 아니라 경기 이름 바로 옆에 */
/* 줄바꿈 묶음(2026-10-14 14:10 사용자 요청): 묶음(.an-g)은 inline-flex 라 한 덩어리로 다음 줄로 내려가고, 혼자서도 폭을 넘으면 그 안에서 wrap. ① 닉네임·점·점수 ② 시간·리그·경기·태그 ③ 예측 ④ 제목·카운트 */
.an-card-compact .an-g { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.an-card-compact .an-g-title { align-items: baseline; gap: 10px; }
.an-card-compact .an-g-title > a { min-width: 0; }
.an-counts { display: inline-flex; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; }
.an-count { color: var(--muted); text-decoration: none; white-space: nowrap; }
a.an-count:hover { color: var(--text); }
@media (max-width: 600px) { .an-card-top .an-match { flex-basis: 100%; } .an-card-top .an-sep:last-of-type { display: none; } }
/* 댓글·대댓글(2026-10-13 밤) */
.an-comments { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.an-cm { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.an-cm-reply { margin-left: 22px; padding-left: 10px; border-left: 2px solid var(--border); border-bottom: 0; }
.an-cm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.an-cm-time { color: var(--muted); }
.an-cm-body { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.55; }
.an-cm-form { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.an-cm-form textarea { width: 100%; resize: vertical; font: inherit; }
.an-cm-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.an-cm-actions .form-hint { margin-right: auto; }
.an-cm-replyform { margin: 6px 0 0 22px; }

.an-cm-form[hidden] { display: none; } /* 답글 폼은 버튼으로 펼침(display:flex 가 hidden 을 이기지 않게) */

/* 순위 뱃지(2026-10-13 밤): 닉네임 앞 #n. 1~3위 금·은·동, 4~10위 강조색, 11~20위 회색 */
.an-rank { display: inline-block; padding: 0 5px; border-radius: 4px; font-size: 10.5px; font-weight: 700; line-height: 16px; white-space: nowrap; color: #111; background: var(--muted); }
.an-rank-1 { background: #f2c14e; }
.an-rank-2 { background: #c9ced6; }
.an-rank-3 { background: #d49a6a; }
.an-rank-top { background: var(--brand-bg); }
.an-rank-20 { background: color-mix(in srgb, var(--muted) 55%, transparent); color: var(--text); }
.an-rank-lg { font-size: 14px; line-height: 22px; padding: 0 8px; vertical-align: middle; }
.an-plain-table .an-author .an-rank, .an-plain-table .an-author .an-rank-cup { display: none; } /* 랭킹 표에는 순위 열이 이미 있다(닉네임 앞 뱃지만 숨김 — 2026-10-16 밤부터 순위 열 자체가 뱃지 .an-rank-cell) */
.an-rank-cell .an-rank { display: inline-block; }
.an-rank-cup { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; line-height: 16px; white-space: nowrap; vertical-align: middle; } /* 확정 순위 트로피 + 숫자(2026-10-17 밤) */
.an-rank-cup .tr-svg { display: block; flex: none; }
.an-rank-cup b { min-width: 1.2em; text-align: left; font-weight: 800; }
.an-tro-n { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: middle; } /* 관리 > 회원 트로피 횟수(2026-10-17 밤) */
.an-rank-cup-lg { font-size: 18px; line-height: 26px; gap: 4px; }
.an-author .an-rank-cup b, .an-rail-author .an-rank-cup b { min-width: 0; } /* 닉네임 앞(카드·상세·레일 글 줄)은 숫자 뒤 빈칸 없이 */
.rl-rank.an-rank-cell { width: auto; min-width: 26px; } /* 레일 분석가 랭킹: 숫자 14px 칸 → 뱃지 폭 */
/* 분석글 카드 왼쪽 테두리 = 작성자 주간 순위 등급(2026-10-16 밤 사용자 결정): 안쪽 그림자라 폭·여백이 변하지 않음 */
.an-card.an-card-rk-1 { box-shadow: inset 3px 0 0 0 #f2c14e; }
.an-card.an-card-rk-2 { box-shadow: inset 3px 0 0 0 #c9ced6; }
.an-card.an-card-rk-3 { box-shadow: inset 3px 0 0 0 #d49a6a; }
.an-card.an-card-rk-top { box-shadow: inset 3px 0 0 0 var(--brand-bg); }
.an-card.an-card-rk-20 { box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--muted) 55%, transparent); }

/* 홈 PC 배치(2026-10-13 밤, 사용자 결정): 중앙 = 분석가 랭킹 4 + 최근 글 4(두 칸) → 조합 환급률, 우측 레일 = 환급률 랭킹 → 미들 → 배당 괴리(한 줄 목록). 1400 미만은 전과 같음 */
@media (min-width: 1400px) {
    body[data-layout="home"] .home-widgets.home-analysts { display: none; } /* 2026-10-14: PC 는 분석가 랭킹을 우측 레일 맨 위로 */
    body[data-layout="home"] .home-widgets.home-rank { display: none; }
    .rail-home-odds { gap: 14px; max-height: calc(100vh - var(--topbar-h) - var(--admin-bar-h) - 28px - 60px); } /* 위젯 사이 간격 = 다른 레일·홈 본문과 같은 14(2026-10-14 저녁 사용자 지적: 4 + 분석가 카드 아래 10 이라 랭킹↔분석가만 좁았다) */
    .rail-home-odds .rail-rank-list { display: block; } .rail-home-odds .rail-rank-table { display: none; }
    .rail-home-odds .table-scroll, .rail-home-odds .rail-narrow { display: none; } /* 홈 레일도 배당표 레일처럼 한 줄 목록만(표는 본문 전용) */
}
@media (max-width: 1399px) { .rail-home-odds { display: none; } }

/* 홈 최근 분석글 카드(2026-10-14): 본문 맨 위, 4개 + 더 보기(10개) */
.home-recent { margin-top: 14px; }
.an-home-cards { display: flex; flex-direction: column; gap: 8px; }
.home-fold:not(.is-open) .an-home-cards > .an-card:nth-child(n+4), .home-fold .an-home-cards > .an-card:nth-child(n+11) { display: none; }
@media (min-width: 1400px) { body[data-layout="home"] .home-widgets.home-recent { margin-top: 0; } }

/* 홈 최근 글 2줄 카드(2026-10-14): 1줄 닉네임(순위) · 예측 · 시간 · 리그 · 경기 · 조회·댓글 / 2줄 제목 */
.an-card-compact { gap: 4px; padding: 10px 14px; }
.an-card-compact .an-card-line1 { font-size: 12.5px; }
.an-card-compact .an-card-line1 .an-author { font-weight: 700; color: var(--text); }
.an-card-compact .an-stat-compact { font-size: 11.5px; color: var(--muted); font-weight: 700; } /* 닉네임 오른쪽 점수 숫자(2026-10-14): 양수 .an-up 초록 · 음수 .an-down 빨강 · 0 회색, 부호 +/−(2026-10-16 — 전엔 부호 없음) */
.an-card-compact .an-score.an-zero { color: var(--muted); }
.an-card-compact .an-score.an-up { color: #2ecc71; } .an-card-compact .an-score.an-down { color: #e74c3c; } /* .an-stat-compact 의 회색보다 우선 */
/* 표본 점 뱃지(2026-10-14 사용자 요청): 점 10개 한 줄(점 하나 = 표본 2개), 찬 점 수로 색 — 1~3 빨강 · 4~6 주황 · 7~9 노랑 · 10 초록 */
.an-dots { display: inline-grid; grid-auto-rows: 1fr; grid-auto-columns: 6px; gap: 1px; width: 6px; height: 19px; align-self: center; vertical-align: middle; flex: none; } /* 세로 게이지, 아래부터 차오름. 칸 수는 파셜이 정함(2026-10-16 사용자 결정 5칸 — 전엔 10칸·색 4단계), 높이를 칸 수로 나눠 씀 */
.an-dots i { display: block; width: 6px; border-radius: 1px; background: var(--border); }
.an-dots i.on { background: #3f9a5c; } /* 채운 칸 = 초록 한 가지 */
.an-dots.is-full i.on { background: #6fdc8c; } /* 다 차면(랭킹 진입 표본) 조금 더 진한 초록 */
:root[data-theme="light"] .an-dots i { background: #d8dde6; }
:root[data-theme="light"] .an-dots i.on { background: #5cb87a; }
:root[data-theme="light"] .an-dots.is-full i.on { background: #1e8a46; }
.an-card-compact .an-title .an-pick { font-size: 12px; font-weight: 400; line-height: 1.2; align-self: center; } /* 2026-10-14: 예측 알약을 제목 줄 맨 왼쪽으로(1줄에서 이동). h3 굵기·크기를 안 물려받게 */
.an-card-compact .an-title { font-size: 15px; margin: 0; }
@media (max-width: 600px) { .an-card-compact .an-card-line1 .an-match { flex-basis: 100%; } }
.an-title-counts { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.an-title-counts .an-counts { font-weight: 400; }

/* ---------- 홈 개편(2026-10-14 오후, 사용자 결정): 소개 띠 → 다가오는 경기 → 기회 탭 / PC 레일 = 분석가·분석글·환급률 랭킹·북메이커 칩 ---------- */
/* 다가오는 경기: 8줄 보이고 더 보기로 15줄(다른 홈 위젯은 3·10) */
.home-fold-8:not(.is-open) .po-table tbody tr:nth-child(n+4) { display: table-row; }
.home-fold-8:not(.is-open) .po-table tbody tr:nth-child(n+9) { display: none; }
.home-fold-8 .po-table tbody tr:nth-child(n+11) { display: table-row; }
.home-fold-8 .po-table tbody tr:nth-child(n+16) { display: none; }
@media (max-width: 900px) { .home-fold-8:not(.is-open) .po-table tbody tr:nth-child(n+4) { display: grid; } .home-fold-8:not(.is-open) .po-table tbody tr:nth-child(n+9) { display: none; } .home-fold-8 .po-table tbody tr:nth-child(n+11) { display: grid; } .home-fold-8 .po-table tbody tr:nth-child(n+16) { display: none; } }
.home-today .widget-scope { font-weight: 400; color: var(--muted); margin-left: 2px; }
/* 기회 탭: 고른 위젯만 보인다(탭 바는 /api/rail 교체 범위 밖) */
.home-opp { gap: 0; }
.home-opp-tabs { padding: 8px 10px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.home-opp-body { margin-top: 0; gap: 0; }
.home-opp-body > .widget { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
/* 기회 탭(홈 .home-opp · 배당표 레일 .rail-opp, 2026-10-14 저녁 공용): 고른 위젯만. data-fold 는 홈 'payouts' / 레일 'rail-payouts' 라 끝 글자 일치 */
[data-opp="payouts"] [data-opp-body] [data-fold]:not([data-fold$="payouts"]),
[data-opp="middles"] [data-opp-body] [data-fold]:not([data-fold$="middles"]),
[data-opp="spreads"] [data-opp-body] [data-fold]:not([data-fold$="spreads"]) { display: none; }
/* 배당표 PC 레일 기회 탭(2026-10-14 저녁): 탭 카드 + 아래 위젯이 한 덩어리로 붙는다(홈과 같은 모양), 탭 3개가 300px 폭을 나눠 가진다 */
.rail-opp { display: flex; flex-direction: column; }
.rail-opp-tabs { padding: 6px 8px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rail-opp-tabs .tg-seg { display: flex; width: 100%; }
.rail-opp-tabs .tg-item { flex: 1 1 0; justify-content: center; padding: 4px 6px; font-size: 12px; }
.rail-opp-body > .widget { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
/* 1400 미만 배당표: PC 우측 레일에 있던 위젯(분석가 랭킹·기회·환급률 랭킹)을 표 아래에 붙이지 않는다(2026-10-14 저녁 사용자 결정) — 같은 내용은 상단 메뉴 페이지에서 종목 필터로 */
@media (max-width: 1399px) { body[data-layout="app"] .rail[data-rail] { display: none; } }
/* PC: 분석글 카드는 레일 한 줄 목록으로 가므로 본문에서 숨김 */
@media (min-width: 1400px) { body[data-layout="home"] .home-widgets.home-recent { display: none; } }

/* ---------- 메뉴·필터 개편(2026-10-14 저녁, 사용자 결정) ----------
   PC(1400~): 상단바 페이지 버튼(.topbar-pages) + 좌측 사이드바 = 종목·리그 필터(.side-filter). 1400 미만: ☰ 서랍 = 페이지 목록(.side-pages), 표 위 필터 줄(.filter-bar) */
.filter-bar { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.guide h3[id] { scroll-margin-top: 70px; } /* #opp(우측 위젯) 앵커 */
.opp-row .arb-only { flex: none; }
.rail-static [data-rail-countdown] { display: none; } /* 북메이커 랭킹 페이지 레일(2026-10-14 저녁): 주기 갱신이 없어 "–:––" 를 숨긴다 */ /* 기회 탭 + 조절 한 줄(2026-10-14 저녁): 조절이 줄어들지 않게 */
@media (min-width: 1400px) { .sidebar .side-pages { display: none; } .filter-bar { display: none; } }
/* ☰ 서랍 보조 링크(2026-10-16): 북메이커 랭킹·공지사항 — 구분선 아래 작은 글씨 */
.side-pages-sub { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.side-pages-sub a { font-size: 13px; color: var(--muted); }
.side-pages-sub a.active { color: var(--text); } /* 기본 규칙 뒤에 두어야 덮어쓴다 */
.filter-bar .filter-sports { flex: 1 1 auto; min-width: 0; }
.filter-bar .filter-league { flex: none; }
.filter-league .filter-league-label { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-league-panel { padding: 6px; width: min(360px, calc(100vw - 32px)); }
.filter-league-list { max-height: 55vh; overflow-y: auto; padding: 0; }
.filter-league-list a { font-size: 13.5px; }
/* (2026-10-14 밤) 태블릿도 종목이 버튼이 되어 리그·북메이커 버튼이 왼쪽에 모이므로, 오른쪽 기준 패널 규칙(min-width 901)은 지움 — 모든 폭에서 버튼 왼쪽 기준 */
@media (max-width: 900px) { .filter-bar { gap: 7px; margin-bottom: 7px; } .filter-league-list a { min-height: 38px; } }
/* 북메이커 선택(2026-10-14 저녁, 사용자 결정): 좌측 카드(PC)·필터 줄 패널(1400 미만). 켜짐 = 북메이커 색, 꺼짐 = 회색·흐림, 잠김(켜진 2곳) = 누를 수 없음 */
.side-bm .side-bm-body { padding: 2px 12px 10px; } /* 카드 머리(sidebar-head) 아래 칩 본문. 접히면 숨김(아래) */
html.fold-bm .side-section[data-side-section="bm"] .side-bm-body { display: none; }
.bm-pick-all { display: inline-flex; align-items: center; padding: 0 8px; border: 1px dashed var(--border); border-radius: 4px; font-size: 11.5px; font-weight: 600; line-height: 20px; color: var(--brand); white-space: nowrap; text-decoration: none; } /* 끈 게 있을 때 마지막 칩 "전체 켜기" */
.bm-pick-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bm-pick-chip { text-decoration: none; cursor: pointer; }
.bm-pick-chip:hover { text-decoration: none; }
.bm-pick-chip.is-off { filter: grayscale(1); opacity: 0.38; }
.bm-pick-chip.is-off:hover { opacity: 0.7; }
.bm-pick-chip.is-locked { cursor: not-allowed; }
.filter-bm-panel { padding: 10px 12px; width: min(420px, calc(100vw - 32px)); }
/* 1400 미만: 종목은 칩 줄 대신 "종목(전종목) ▾" 펼침(폰 2026-10-14 저녁 사용자 제안 → 같은 밤 태블릿도 사용자 요청). 칩 줄(.filter-sports)은 이제 쓰지 않음 */
.filter-sport { display: none; }
@media (max-width: 1399px) { .filter-bar .filter-sports { display: none; } .filter-sport { display: inline-block; } }
@media (max-width: 900px) { .filter-bar { gap: 6px; } }
body[data-layout="home"] .filter-bar { margin: 7px 0 0; } /* 홈: 소개 카드 아래(2026-10-14 밤, 전엔 위) — 아래쪽은 다음 위젯(.home-widgets)의 위 여백 14/7 이 간격 */
/* 홈 PC 우측 레일(2026-10-14): 분석가 랭킹·환급률 랭킹 5개까지 보이고 더 보기(본문 위젯은 3개) */
/* (홈 레일 5개 보기 규칙은 2026-10-14 저녁 사용자 결정으로 제거 — 3개 + 더 보기, 기본 .rail-fold 규칙) */

/* (2026-10-17 밤) 태블릿 탑 줄 가운데 카드(.top-best, 2026-10-14 밤~)는 탑 좌·우와 함께 제거 — 같은 정보는 레일·홈 위젯에 있음 */

/* arb-pill-legs */ /* 조합·괴리 표 PC·태블릿(2026-10-14 밤, 사용자 결정 — 조합 페이지 → 같은 밤 홈 기회 탭·괴리까지, 표에 .legs-table): 배분 %·시간을 알약 안 오른쪽으로 — 배당 | 배분 % / 북메이커 | 시간 두 줄(배당표 알약과 같은 높이).
   ⏱ 칸은 이 표에서만 뺀다(다리별 시간이 보이므로). 대신 가장 최근 다리보다 2시간 이상 오래된 다리의 시간은 주황(.is-old). 폰은 알약 아래 한 줄(.leg-meta) 그대로 */
.pill-leg { display: none; }
.leg-meta .leg-age.is-old { color: var(--warn-ink); font-weight: 600; }
@media (min-width: 901px) {
    .legs-table .pill.pill-legs { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 7px; row-gap: 2px; }
    .legs-table .pill.pill-legs .pill-odd { justify-self: end; }
    .legs-table .pill.pill-legs .pill-foot { justify-self: end; }
    .legs-table .pill-leg { display: block; justify-self: start; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
    .legs-table .pill-leg-split { color: var(--text); }
    .legs-table .pill-leg-age.is-old { color: var(--warn-ink); font-weight: 600; }
    .legs-table .leg-meta { display: none; }
    .legs-table th.col-stale, .legs-table td.col-stale { display: none; }
    .legs-table td.payout .sub-stale { display: none; } /* 좁은 PC·태블릿 표의 환급률 둘째 줄 "⏱ 북메이커 n" 에서도 ⏱ 제거 */
    .legs-table.po-table { min-width: 0; } .legs-table.po-table .col-match { min-width: 0; }
    .legs-table.sum-cards th.col-pill, .legs-table.sum-cards td.col-pill { padding-left: 3px; padding-right: 3px; } .legs-table.sum-cards th.col-payout { min-width: 92px; } .legs-table.sum-cards .col-books { width: 44px; } /* 경기 칸 폭 확보(1400 에서 팀 이름이 세 글자로 잘렸다) */
    .legs-table.sum-cards { min-width: 0; } .legs-table.sum-cards .col-match { min-width: 0; } .legs-table.sum-cards td.col-match { width: 100%; max-width: 0; } .legs-table.sum-cards .col-match .team { max-width: 100%; min-width: 0; } .legs-table.sum-cards .col-match .team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 배당표 요약 뷰(2026-10-14 밤): 알약이 넓어져 1400 에서 130px 넘쳤다 */
    .legs-table.po-table td.col-match { width: 100%; max-width: 0; } .legs-table.po-table .col-match .team { max-width: 100%; min-width: 0; } .legs-table.po-table .col-match .team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 경기 칸은 남는 폭만, 팀 이름 말줄임(1400 홈 다가오는 경기가 73px 넘쳤다) */ /* 알약이 넓어진 만큼 경기 칸이 줄고 팀 이름은 말줄임(PC 1600 에서 46px 넘쳤다) */
}

/* mid-pill */ /* 미들 다리 칸(2026-10-14 밤, 사용자 결정 — 조합 알약과 같은 결): PC·태블릿은 알약 안 2×2 = 배당 | 기준선 / 북메이커 | 시간, ⏱ 칸 없음.
   폰은 래퍼가 display: contents 라 카드 모양 그대로(⏱ 도 그대로). 오래된 다리(두 다리 변경 차이 2시간 이상일 때 더 오래된 쪽)의 시간은 모든 폭에서 주황 */
.mid-pill { display: contents; }
.mid-table .mid-age.is-old { color: var(--warn-ink); font-weight: 600; }
@media (min-width: 901px) {
    .mid-table .mid-pill { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 7px; row-gap: 2px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); line-height: 1.2; }
    .mid-table .mid-pill .mid-leg-top, .mid-table .mid-pill .mid-leg-bot { display: contents; }
    .mid-table .mid-pill .mid-odd { order: 1; justify-self: end; font-family: var(--mono); font-size: 14px; }
    .mid-table .mid-pill .mid-line { order: 2; justify-self: start; font-size: 11px; color: var(--text); }
    .mid-table .mid-pill .bm-chip { order: 3; justify-self: end; }
    .mid-table .mid-pill .mid-age { order: 4; justify-self: start; }
    .mid-table .c-stale, .mid-table .mid-stale-in { display: none; }
}

/* mid-lg-col */ /* 미들 표 종목·리그 칸(2026-10-14 밤, 사용자 요청 — 조합 표처럼 시간 · 종목·리그 · 경기). PC·태블릿 전용, 폰 카드는 경기 칸 안 .mid-sub(1줄 오른쪽) 그대로 */
.mid-table .c-lg { display: none; }
@media (min-width: 901px) {
    .mid-table .c-lg { display: table-cell; max-width: 120px; }
    .mid-table td.c-lg .mid-sp { display: block; font-size: 12px; font-weight: 600; }
    .mid-table td.c-lg .mid-lg { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
    .mid-table td.c-match .mid-sub { display: none; }
}

/* mid-teams2 */ /* 미들 경기 칸(2026-10-14 밤, 사용자 요청): PC·태블릿은 조합 표처럼 로고 + 이름 두 줄(.match-link), 이름은 칸 폭에서 말줄임. 폰은 .mid-teams 한 줄 */
.mid-table .mid-teams2 { display: none; }
@media (min-width: 901px) {
    .mid-table .mid-teams2 { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; color: inherit; }
    .mid-table .mid-teams2 .team::before { content: none; }
    .mid-table .mid-teams2 .team { max-width: 100%; min-width: 0; }
    .mid-table .mid-teams2 .team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mid-table td.c-match .mid-teams { display: none; }
}

/* ad-traffic */ /* 광고주 방문자 현황 카드(2026-10-14 밤): 요약 4칸 · 시간대별 막대(관리 홈 .dash-hours 재사용) · 페이지 묶음 / 분석 1~10위 두 칸 */
.ad-traffic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.ad-traffic-grid section { min-width: 0; }
/* 기간 선택(2026-10-18, /js/ad-traffic.js): 맨 위 토글 줄 · 날짜 막대 누르기/끌기 · 고른 칸 밖은 흐리게 */
/* 지표 카드 = 토글(2026-10-18 사용자 결정): 누르면 그래프·표가 그 값으로, 고른 카드는 파란 테두리·윗줄 */
.ad-traffic-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 8px; margin: 0 0 12px; } /* 2026-10-26: 세 번째 상자 "AI 검색량" — 한 줄에 셋 */
@media (max-width: 600px) { .ad-traffic-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-traffic-metric { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border: 1px solid var(--border); border-top: 3px solid transparent; border-radius: 8px; background: var(--surface-2); color: var(--muted); cursor: pointer; text-align: left; font: inherit; }
.ad-traffic-metric span { font-size: 12px; }
.ad-traffic-metric b { font-size: 20px; color: var(--text); }
.ad-traffic-metric:hover { border-color: #5fb0ff; }
.ad-traffic-metric.active { border-color: #5fb0ff; border-top-color: #5fb0ff; color: var(--text); }
.ad-traffic-metric-ai b { color: var(--tr-search); } /* AI 검색량 상자(2026-10-26): 숫자·활성 테두리 초록 */
.ad-traffic-metric-ai:hover, .ad-traffic-metric-ai.active { border-color: var(--tr-search); border-top-color: var(--tr-search); }
.ad-traffic-inflow-h { margin-top: 18px; } /* 유입 경로 표(분석 영역 표 아래, 2026-10-18) */
.dash-hours.dash-days.ad-traffic-days { row-gap: 0; }
.dash-hours.ad-traffic-hours { row-gap: 0; } /* 시간대별도 칸 수는 JS(폭이 좁으면 2·3·4·6시간 묶음) */
.ad-traffic-hours .dash-hour-h { font-size: 9.5px; white-space: nowrap; } /* 칸 수는 JS 가 폭에 맞춰(먼 날짜부터 뺌) — 여러 줄로 감싸지 않음 */
.ad-traffic-days .dash-hour.off { cursor: default; }
.ad-traffic-days .dash-hour.off .dash-hour-col { opacity: 0.35; }
.ad-traffic-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 2px 0 10px; }
.ad-traffic-range { font-size: 14px; }
.ad-traffic-bar [hidden] { display: none !important; } /* .btn 의 display 가 hidden 을 덮지 않게 */
.ad-traffic-days { user-select: none; -webkit-user-select: none; touch-action: pan-y; } /* 터치: 가로로 끌면 기간 선택, 세로로 밀면 스크롤 */
.ad-traffic-days .dash-hour { cursor: pointer; }
.ad-traffic-days.has-sel .dash-hour:not(.sel) { opacity: 0.4; }
.ad-traffic-days .dash-hour.sel .dash-hour-h { color: var(--text); font-weight: 700; }
.ad-traffic-note { margin-top: 10px; }
.ad-traffic-lead { margin: 0 0 8px; } .ad-traffic-se .ad-traffic-ai { font-weight: 700; } /* 2026-10-26: 사람과 AI 검색량 안내 · AI 검색량 숫자 초록(.tr-search) */
@media (max-width: 700px) { .ad-traffic-grid { grid-template-columns: minmax(0, 1fr); } }

/* rails-v2 */ /* 정보·경기 상세·분석가 우측 레일(2026-10-14 밤): 다음 경기 줄 · 보는 분석가 강조 */
.rl-next-link { display: flex; align-items: baseline; gap: 8px; min-width: 0; width: 100%; color: inherit; text-decoration: none; } /* 줄 높이는 다른 레일 목록(.rail-lines > li.rl-item, 6px)과 같게 */
.rl-next-link:hover .rl-main { text-decoration: underline; }
.rl-next-time { flex: none; font-size: 11.5px; color: var(--muted); }
.rl-next-link .rl-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.rl-next-link em { font-style: normal; color: var(--muted); font-size: 11px; margin: 0 2px; }
.an-rail-analysts .rl-item.is-me { background: color-mix(in srgb, var(--brand) 14%, transparent); border-radius: 6px; }

/* 관리 화면 아이디 색(2026-10-15, routes/admin.js uTone): 관리자 노랑 · 운영 분석글 계정 회색(더 어둡게 — 사용자 요청). 표·링크·form-hint 색보다 앞서야 해서 !important */
.u-admin { color: #ffcc00 !important; }
:root[data-theme="light"] .u-admin { color: #b38600 !important; }
.u-ops { color: #575e6b !important; }
:root[data-theme="light"] .u-ops { color: #a7adb8 !important; }
/* 탈퇴 회원(2026-10-16): 관리 화면은 "탈퇴 · 아이디"(줄 긋기), 공개 화면 작성자는 "탈퇴한 회원"(회색, 링크·국기·순위 없음) */
.u-gone { color: var(--muted, #8a919e) !important; text-decoration: line-through; }
.u-gone::before { content: '탈퇴 · '; display: inline-block; text-decoration: none; }
.an-author.an-gone, .an-gone .an-user { color: var(--muted, #8a919e); font-style: italic; }
/* 회원 탈퇴 화면(2026-10-16, views/me-close.ejs) */
.me-close-link { margin: 18px 0 4px; text-align: right; font-size: 12px; }
.me-close-link a { color: var(--muted, #8a919e); text-decoration: underline; }
.close-list { margin: 6px 0 12px; padding-left: 18px; line-height: 1.6; }
.close-list li { margin: 2px 0; }
.close-block { border: 1px solid var(--down, #d93a3a); border-radius: 6px; padding: 10px 12px; margin: 0 0 12px; }
.close-block-title { font-weight: 700; color: var(--down, #d93a3a); margin: 0 0 4px; }
.close-form .form-field { margin-bottom: 10px; }
.close-agree { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 12px; }

/* 내 분석 지표(2026-10-15 밤, partials/me-an-stats): MY·내 분석글 공용 카드. 분석가 페이지 an-stats 카드를 그대로 쓰고 간격만 */
.me-an-card .me-title-row .btn:first-of-type { margin-left: auto; }
.me-an-card .an-stats { margin: 0 0 8px; }
.me-an-card .an-stat-v.me-an-off { font-size: 16px; color: var(--muted); }
.me-an-card .an-stat-s { line-height: 1.35; }
.me-an-card .me-an-next, .me-an-card .me-an-share { margin: 4px 0 0; }
/* 관리 > 회원 상세 보강·작업 기록(2026-10-15 밤) */
.mem-page .mem-note textarea { width: 100%; min-height: 72px; resize: vertical; font: inherit; font-size: 13px; }
.mem-page .mem-note .mem-toolbar-after { margin-top: 6px; }
.mem-page .mem-type-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
/* 분석글 API 토큰 카드(2026-10-21 밤, 관리 > 회원 상세) */
.mem-page #api-token { scroll-margin-top: 110px; } /* 발급·회수 뒤 #api-token 으로 올 때 상단바·관리자 줄에 가리지 않게 */
.mem-page .api-token-card { max-width: 860px; margin: 12px 0 0; padding: 14px 16px; }
.mem-page .api-token-card p { margin: 0 0 8px; }
.mem-page .api-token-card .mem-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mem-page .api-token-card .btn { white-space: nowrap; }
.mem-page .api-token-card .api-token-hint { margin: 10px 0 0; }
.mem-page .api-token-raw { word-break: break-all; user-select: all; font-size: 13px; padding: 4px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }
.mem-page .api-token-card .admin-table { margin: 0 0 10px; }
/* 분석글 AI 표시(2026-10-26, docs/plan-agent-api.md): 제목 옆 작은 표식 · 상세 한 줄 설명 · 관리 표 켜짐 */
.an-ai { display: inline-block; margin-left: 6px; padding: 0 4px; font-size: 10px; font-weight: 700; line-height: 15px; letter-spacing: .02em; vertical-align: 2px; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; cursor: help; }
.an-post-title .an-ai { font-size: 12px; line-height: 18px; vertical-align: 4px; }
.an-ai-note { margin: -4px 0 10px; font-size: 12.5px; color: var(--muted); }
.an-admin-table .an-ai-on { color: #000; background: #9fd3ff; border-color: #9fd3ff; }
/* MY 분석글 API 토큰 카드(2026-10-26) */
.me-wrap #api { scroll-margin-top: 80px; }
.me-api-kinds { display: grid; gap: 6px; margin: 0 0 10px; }
.me-api-kinds .form-check { align-items: flex-start; }
.me-api-kinds .form-hint { display: block; margin: 0; }
.me-api-new { margin: 0 0 12px; }
.me-api-raw { display: block; word-break: break-all; user-select: all; font-size: 13px; padding: 6px 8px; margin: 6px 0; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }
.me-api-list td { vertical-align: middle; }
.me-api-list tr.is-off td { color: var(--muted); }
.admin-log-table td.log-detail { white-space: normal; min-width: 220px; }
.admin-log-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }

/* 홈 시안(2026-10-16, /home-preview): 블록 간격 · 1400 미만 북메이커 랭킹·분석가 랭킹 · 서비스 설명 카드 */
.hp-block { margin-top: 14px; }
.hp-narrow { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
@media (min-width: 1400px) {
    .hp-narrow { display: none; }
    body[data-layout="home"] .home-widgets.hp-first { margin-top: 0; }
}
@media (max-width: 900px) { .hp-block { margin-top: 7px; } .hp-narrow { gap: 7px; margin-top: 7px; } }
.home-services { margin-top: 14px; }
.hs-title { font-size: 15px; }
.hs-lead { margin: 4px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.hs-item { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); }
.hs-item:hover { text-decoration: none; border-color: var(--muted); }
.hs-name { font-size: 14px; font-weight: 700; }
.hs-go { color: var(--muted); font-weight: 400; }
.hs-body { color: var(--muted); font-size: 13px; line-height: 1.6; }
.hs-now { margin-top: auto; color: var(--brand); font-size: 12px; font-variant-numeric: tabular-nums; }
.hs-more { margin: 12px 0 0; font-size: 13px; }

/* 분석가 페이지 트로피 카드(2026-10-16 — 표본 카드 자리) · 닉네임 옆 역대 Top10 횟수(하늘색) */
.an-tcups { display: grid; grid-template-columns: repeat(2, max-content); gap: 2px 18px; margin-top: 4px; } /* 2×2 고정(한 줄에 4개가 안 들어가 3+1 로 꺾였다) */
.an-tcup { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; cursor: default; }
.an-t10 { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; color: #5fb0ff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: 1px; cursor: default; }
:root[data-theme="light"] .an-t10 { color: #2a7fd4; }
/* (홈 레일·1400 미만 랭킹 5위 규칙은 2026-10-16 저녁 사용자 결정으로 제거 — 다시 3위 + 더 보기) */
/* 분석가 페이지 지표 두 장(2026-10-16 2차): 최근 4주(판정 글·적중률·수익률 한 카드) · 트로피 */
.an-stats.an-stats-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.an-4w-row { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 6px; }
.an-4w { display: flex; flex-direction: column; gap: 2px; min-width: 64px; }
.an-4w-k { color: var(--muted); font-size: 12px; }
@media (max-width: 600px) { .an-stats.an-stats-2 { grid-template-columns: minmax(0, 1fr); } }
.an-tcup.is-none b { color: var(--muted); font-weight: 400; } /* 2026-10-16: 없는 등급은 그림 그대로 + 0 만 흐리게 */
.an-stats-2 .an-tcups { grid-template-columns: repeat(4, max-content); gap: 2px 20px; margin-top: 10px; } /* 2026-10-16: 카드가 넓어져 한 줄 4개 */
/* 분석가 페이지 최근 4주 카드(2026-10-16 4차): 게이지는 판정 글 숫자 왼쪽, 점수는 수익률 오른쪽. 숫자 글자 조금 작게, 모바일은 더 작게 */
.an-4w-card .an-stat-v { font-size: 17px; }
.an-4w-n { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 600px) { .an-4w-card .an-stat-v { font-size: 14px; } .an-4w-row { gap: 6px 18px; } .an-4w { min-width: 0; } .an-4w-k { font-size: 11px; } }
.an-4w-n .an-dots { height: .74em; width: 7px; grid-auto-columns: 7px; } .an-4w-n .an-dots i { width: 7px; } /* 2026-10-16: 판정 글 숫자 높이(대문자·숫자 높이 ≈ .72em)에 맞춤 — 전엔 19px 로 숫자보다 컸다 */
.an-dots { height: .8em; width: 6px; } /* 2026-10-16 사용자 요청: 닉네임 옆 게이지를 글자 높이에 맞춤(전 19px — 13px 글자보다 컸다). 레일(.an-rail-author 13px)·분석가 카드(.an-4w-n)는 아래·위 규칙이 따로 정함 */
.an-rail-author .an-dots { height: .8em; } .an-4w-n .an-dots { height: .74em; width: 7px; }
/* PC 레일 맨 아래(2026-10-16): 최근 공지 3개 + 고객센터 */
.rail-notices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rail-notices a { display: flex; gap: 8px; min-width: 0; color: var(--text); font-size: 13px; }
.rail-notices a:hover { text-decoration: none; color: var(--brand); }
.rail-notices time { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.rail-notices span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-links-foot { margin: 10px 0 0; font-size: 13px; }
.rail-links-foot a { color: var(--muted); }
.mem-act-grid { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); align-items: start; } /* 관리 > 회원 활동 카드 다섯 장(2026-10-16) */
.mem-act-grid .dash-detail { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .mem-act-grid { grid-template-columns: minmax(0, 1fr); } }
.an-adm-grid { grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); align-items: start; } .an-adm-grid + .an-adm-card, .an-adm-card + .an-adm-card { margin-top: 14px; } /* 그리드 밖 카드(쉐어 정산·분석 제재 중)도 그리드 간격과 같게(2026-10-16 밤 사용자 지적 — 붙어 보임) */
.an-adm-rank-blank td { color: var(--muted); } /* 관리 > 분석가 1~10위 빈 순위 줄(2026-10-16 밤 사용자 요청) */
.an-share-cfg { margin: 0; } .an-share-cfg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; } .an-share-cfg-row label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.an-share-cfg-row .input { width: 4.2em; padding: 2px 6px; } .an-share-cfg-row input[name="from"] { width: 6.5em; } /* 관리 > 분석가 쉐어 비율 설정(2026-10-16 밤) */
/* "광고 수익 쉐어" 세로 카드(2026-10-16 밤 사용자 제안): 넓은 화면에서 주간 순위 · 지금 계산 · 쉐어(좁은 칸) 세 칸, 그 아래는 두 칸 자동 → 쉐어 카드가 둘째 줄 */
.an-share-table .input { width: 4em; padding: 2px 6px; text-align: right; } .an-share-table td { padding-top: 3px; padding-bottom: 3px; } .an-share-sum-row td { border-top: 1px solid var(--border); }
@media (min-width: 1560px) { .an-adm-grid { grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr); } } /* 쉐어 카드가 첫 칸(주간 순위 왼쪽, 2026-10-16 밤 사용자 요청) */ .an-adm-week { display: inline-block; margin-left: auto; font-weight: 400; } .an-adm-week select { font-size: 13px; } /* 관리 > 분석가(2026-10-16) */
/* 관리 > 분석글 표 두 줄 칸(2026-10-16): 아랫줄 = 작게·흐리게, 작업 버튼 가운데 */
.an-admin-table .an-l2 { margin-top: 2px; color: var(--muted); font-size: 12px; }
.an-admin-table th .an-l2 { display: block; margin-top: 0; }
.an-admin-table td.an-admin-actions, .an-admin-table th.an-admin-actions { text-align: center; }
.an-admin-table td.an-admin-actions .an-inline { display: inline-flex; vertical-align: middle; margin: 2px; }
.an-admin-table .an-l2.an-down { color: var(--down); font-weight: 700; } /* 신고 > 0 = 빨강(2026-10-16) */
/* 전체글 숨김(분석 제재, 2026-10-16 사용자 결정): 평소 빨간 글자·바탕 없음, 제재 중이면 빨간 바탕 + 흰 글자 */
.an-sanct-btn { padding: 4px 9px; border: 1px solid #d93a3a; border-radius: 999px; background: transparent; color: #d93a3a; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.an-sanct-btn:hover { background: rgba(217, 58, 58, .12); }
.an-sanct-btn.is-on { background: #d93a3a; color: #fff; }
.an-sanct-btn.is-on:hover { background: #b82e2e; border-color: #b82e2e; }
.an-admin-table select:disabled { opacity: .45; cursor: not-allowed; }
.an-back-foot { margin: 18px 0 4px; text-align: center; } /* 분석글 상세 맨 아래 목록으로(2026-10-16) */
.an-quota { opacity: .75; font-size: .9em; } .an-write-off { opacity: .6; cursor: default; } /* 분석글 쓰기 남은 편수·대기(2026-10-16) */
.an-title-counts .an-g-author { font-size: 14px; font-weight: 600; margin-right: 8px; } /* 2026-10-16: 닉네임 묶음을 제목 줄로 옮긴 뒤에도 원래(1줄) 크기 */
.an-card-compact .an-title-counts { align-items: center; } /* 2026-10-16: 닉네임 묶음(게이지가 앞)이 기준선 정렬로 아래로 처지던 것 — 가운데 정렬 */
.tr-bot-bar i { background: var(--tr-bot, var(--down)); } /* 봇 절 막대 = 빨강(2026-10-16) */

/* 결과 기록(2026-10-17, /results/:sport): 실제 결과 칸 = 굵은 글자 + 테두리(사용자 결정 ⓕ — 초록 바탕은 "최고 배당" 채널이라 쓰지 않음). 나머지 칸은 보통 굵기 */
.results-table .pill .pill-odd { font-weight: 500; }
.results-table .pill.is-result, .an-key-matches .pill.is-result { border: 2px solid var(--text); padding: 3px 5px; }
.results-table .pill.is-result .pill-odd, .an-key-matches .pill.is-result .pill-odd { font-weight: 800; }
.page-sub-date { font-size: 0.62em; font-weight: 500; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.results-near { margin-top: 8px; }
.results-near a { margin: 0 6px; }
.results-legend { margin-top: 10px; }

/* 종목별 랭킹(2026-10-17, partials/rail-sport-top): 종목마다 1위만 보이고 더 보기로 3위까지. 종목 아이콘 칸은 1위 줄에만 */
.an-sport-top.is-open .fold-more-chev { transform: rotate(180deg); }
.an-sport-lines .an-sport-ico { flex: 0 0 18px; width: 18px; text-align: center; text-decoration: none; font-size: 13px; }

/* 분석·예측 안내문의 종목 선택 안내(2026-10-17): PC(1400~)에서만 — 1400 미만은 종목 선택이 표 위에 보임 */
.an-pc-hint { display: none; }
@media (min-width: 1400px) { .an-pc-hint { display: inline; } }

/* 분석가 랭킹 탭 두 카드(2026-10-17 사용자 결정): 주간 확정 순위 + 실시간 순위. PC(1400~) 나란히, 1400 미만은 위아래로 둘 다(같은 날 저녁 사용자 결정 — 전환 탭 [확정 | 실시간] 제거) */
.an-rk-wrap { container-type: inline-size; container-name: anrk; }
.an-rk-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.an-rk-card { padding: 12px 12px 10px; gap: 8px; }
.an-rk-head { display: flex; flex-direction: column; gap: 2px; }
.an-rk-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.an-rk-card:not(.is-open) .an-rank-table tbody tr:nth-child(n+21) { display: none; }
.an-rk-card .fold-more { margin-top: 2px; }
.an-rk-card.is-open .fold-more-chev { transform: rotate(180deg); }
.an-rk-delta { font-size: 12px; font-weight: 700; }
.an-rk-delta.is-new { color: var(--brand); font-size: 11px; letter-spacing: 0.02em; }
.an-rk-delta.is-same { color: var(--muted); font-weight: 500; }
/* 분석가 랭킹 카드(2026-10-18 사용자 결정, 모든 폭): 1줄 = 순위·닉네임·국기·트로피, 2·3줄 = 점수· = 표본·적중률·수익률·쉐어율/변동 칸마다 이름표(data-l) 위·값 아래. 머리글 숨김 */
/* 분석가 랭킹 표(701px~, 2026-10-18 사용자 결정): 칸 = 분석가(순위 뱃지 + 닉네임·국기) · 역대 트로피 · 표본 · 적중률 · 점수 · 표본 · 적중률 · 수익률 · 쉐어율(실시간은 변동). 점수는 사용자 요청으로 다시 넣음 */
.an-rank-table .an-rk-m, .an-rank-table .an-rk-t10in { display: none; }
.an-rank-table td.an-rk-t10 { color: var(--muted); }
.an-rank-table td.an-rk-meta, .an-rank-table thead th:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; } /* 점수~쉐어율/변동 오른쪽 정렬(2026-10-18 사용자 요청, 모든 폭) */
.an-rank-table td.an-rk-name { text-align: left; }
.an-rank-table td.an-rk-name .an-author { justify-content: flex-start; }
.an-rank-table td.an-rank-cell { width: 40px; }
.an-rank-table { table-layout: fixed; } /* 확정·실시간 두 표 칸 폭을 같게(2026-10-18 — 내용 길이로 칸이 달라져 세로줄이 어긋났음) */
.an-rank-table col.c-rk { width: 40px; } .an-rank-table col.c-t10 { width: 40px; } .an-rank-table col.c-sc { width: 62px; } .an-rank-table col.c-n { width: 50px; } .an-rank-table col.c-hit { width: 62px; } .an-rank-table col.c-roi { width: 80px; } .an-rank-table col.c-last { width: 62px; }
.an-rank-table td.an-rk-name { white-space: nowrap; overflow: hidden; }
.an-rk-card .an-rank-table thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 머리글 한 줄(반쪽 폭 규칙의 두 줄 꺾기보다 앞섬) */
.an-rank-table td.an-rk-name .an-author { max-width: 100%; min-width: 0; white-space: nowrap; }
.an-rank-table td.an-rk-name .an-user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 긴 닉네임은 말줄임(줄바꿈 대신) */
@container anrk (min-width: 970px) { /* 두 카드 나란히(반쪽 폭): 숫자 칸을 좁혀 닉네임 칸 확보 */
    .an-rank-table col.c-rk { width: 34px; } .an-rank-table col.c-t10 { width: 28px; } .an-rank-table col.c-sc { width: 50px; } .an-rank-table col.c-n { width: 50px; } .an-rank-table col.c-hit { width: 54px; } .an-rank-table col.c-roi { width: 68px; } .an-rank-table col.c-last { width: 52px; }
}
@media (min-width: 601px) and (max-width: 900px) { /* 900 이하 배당표 카드 변환(.simple-table block·머리글 숨김)을 랭킹 표에서는 되돌림 */
    .an-rank-table { display: table; width: 100%; }
    .an-rank-table thead { display: table-header-group; }
    .an-rank-table tbody { display: table-row-group; }
    .an-plain-table.an-rank-table th, .an-plain-table.an-rank-table td { padding: 8px; font-size: 13px; }
}
@media (max-width: 600px) { /* 카드(2026-10-18, 600px 이하): 머리글 한 줄(점수·표본·적중률·수익률·쉐어율/변동) + 줄마다 1줄 순위·트로피·닉네임, 2줄 값(좌우 폭 전체) */
    .an-rank-table colgroup { display: none; }
    .an-rank-table { table-layout: auto; }
    .an-rank-table, .an-rank-table thead, .an-rank-table tbody { display: block; width: 100%; }
    .an-rank-table thead tr { position: relative; display: flex; padding: 6px 2px 6px 38px; }
    .an-rank-table thead th { display: block; padding: 0 6px 0 0; border: 0; text-align: right; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .an-rank-table thead th:nth-child(2) { display: none; } /* 트로피 머리글 숨김 */
    .an-rank-table thead th:nth-child(1) { position: absolute; left: 2px; top: 6px; width: 32px; padding: 0; font-size: 0; text-align: center; } /* 분석가 머리글 자리에 "순위"(data-rk) */
    .an-rank-table thead th:nth-child(1)::before { content: attr(data-rk); font-size: 11px; }
    .an-rk-card .an-rank-table tbody td { padding: 0; } /* 두 카드 칸 여백 규칙(.an-rk-duo td)보다 앞서게 */
    .an-rk-card .an-rank-table tbody td.an-rk-meta { padding-right: 6px; } /* 머리글(th 오른쪽 6px)과 같은 여백 — 위 padding 0 보다 앞서게 */
    .an-rank-table tbody tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; padding: 9px 2px 9px 38px; border-bottom: 1px solid var(--border); } /* 왼쪽 38px = 순위 칸(1줄 순위·2줄 트로피) */
    .an-rank-table tbody tr:last-child { border-bottom: 0; }
    .an-rank-table tbody td { display: block; border: 0; padding: 0; text-align: left; }
    .an-rank-table td.an-rank-cell { position: absolute; left: 2px; top: 9px; width: 32px; }
    .an-rank-table td.an-rank-cell .an-rk-pc { display: none; }
    .an-rank-table td.an-rank-cell .an-rk-m { display: flex; flex-direction: column; align-items: center; gap: 6px; } /* 1줄 순위 뱃지 · 2줄 트로피(확정 1~3위만, 실시간은 없음) */
    .an-rank-table td.an-rank-cell .an-rank { min-width: 20px; text-align: center; }
    .an-rank-table td.an-rank-cell > .an-rank { display: block; margin: 0 auto; width: max-content; } /* 실시간 칸(뱃지만)도 가운데 */
    .an-rank-table td.an-rk-t10 { display: none; }
    .an-rank-table .an-rk-t10in { display: inline; }
    .an-rank-table td.an-rk-name { flex: 1 1 100%; min-width: 0; font-size: 14px; } /* 1줄 전체(기준 0 이면 줄바꿈 요소와 한 줄에 끼어 폭 0) */
    .an-rank-table td.an-rk-name .an-author { justify-content: flex-start; }
    .an-rank-table tbody tr::after { content: ''; order: 1; flex-basis: 100%; height: 0; } /* 닉네임 줄 뒤에서 줄바꿈 */
    .an-rank-table td.an-rk-sc { display: block; font-weight: 800; }
    .an-rank-table td.an-rk-meta { order: 2; min-width: 0; margin-top: 5px; font-size: 13px; white-space: nowrap; text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; } /* 오른쪽 정렬(2026-10-18 사용자 요청) · 같은 폭 숫자 */
    .an-rank-table td.an-rk-meta:not(.an-up):not(.an-down):not(.is-new) { color: var(--text); }
    /* 머리글 칸과 값 칸 폭을 같게: th 3~7 ↔ td 4~8(점수·표본·적중률·수익률·마지막) */
    .an-rank-table thead th:nth-child(3), .an-rank-table td:nth-child(4) { flex: 0 0 17%; }
    .an-rank-table thead th:nth-child(4), .an-rank-table td:nth-child(5) { flex: 0 0 18%; }
    .an-rank-table thead th:nth-child(5), .an-rank-table td:nth-child(6) { flex: 0 0 19%; }
    .an-rank-table thead th:nth-child(6), .an-rank-table td:nth-child(7) { flex: 0 0 25%; }
    .an-rank-table thead th:nth-child(7), .an-rank-table td:nth-child(8) { flex: 1 1 0; }
}
@container anrk (min-width: 970px) { /* 두 카드 나란히(2026-10-18 사용자 결정): 화면 폭이 아니라 랭킹 본문 폭 970px 이상(카드 480px — 그보다 좁으면 긴 닉네임이 말줄임) — 큰 태블릿(레일 없음)·1600+ 는 나란히, 1400~1599(레일 있어 본문 좁음)는 위아래 */
    .an-rk-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .an-rk-duo .an-rk-card { padding: 12px 8px 10px; }
    .an-rk-duo .an-rk-head { padding: 0 4px; }
    .an-rk-duo .an-plain-table th, .an-rk-duo .an-plain-table td { padding: 7px 4px; }
    .an-rk-duo .an-plain-table th { white-space: normal; line-height: 1.2; font-size: 11.5px; hyphens: auto; overflow-wrap: anywhere; } /* 반쪽 폭 — 긴 머리글(en Sample·Hit rate 등)은 두 줄로 */
}
@media (max-width: 900px) {
    .an-rk-card { padding: 10px 8px 8px; }
    .an-rk-title { font-size: 14px; }
}

/* 랭킹 위젯 제목 옆 기준 표시(2026-10-17): "10.12 확정" · "실시간" — 제목보다 작고 흐리게 */
.widget-title .widget-tag { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }

/* 고객센터 자주 하는 질문(2026-10-17 사용자 결정, 평가 Q11): 세 묶음 + 접기. 비로그인은 FAQ 와 로그인 안내만 */
.faq-lead { margin-bottom: 10px; }
.faq-group + .faq-group { margin-top: 14px; }
.faq-group-title { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary { padding: 9px 0; font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: flex-start; gap: 8px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+'; flex: 0 0 14px; color: var(--muted); font-weight: 700; line-height: 1.4; }
.faq-item[open] summary::before { content: '−'; }
.faq-item summary:hover { color: var(--brand); }
.faq-a { padding: 0 0 11px 22px; font-size: 13px; line-height: 1.6; color: var(--text); }
.faq-login { margin: 0 0 12px; font-size: 13.5px; }
@media (max-width: 900px) { .faq-item summary { font-size: 13px; } .faq-a { font-size: 12.5px; padding-left: 20px; } }
/* 경기 상세 "최근 배당 변동"(2026-10-19 평가 04-3): 폰에서 600px 표가 366px 칸에 잘려 값이 안 보였음 → 행마다 줄바꿈되는 한 덩어리(머리글 숨김) */
@media (max-width: 600px) {
    .changes-table { min-width: 0; width: 100%; font-size: 12px; }
    .changes-table thead { display: none; }
    .changes-table tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
    .changes-table tbody td { display: inline; padding: 0; border: 0; white-space: nowrap; text-align: left !important; }
    .changes-table tbody td:nth-child(1) { color: var(--muted); }
    .changes-table tbody td:nth-child(5) { flex-basis: auto; margin-left: 0; }
    .changes-table tbody td:nth-child(4):empty { display: none; }
}
/* 경기 상세 최고 배당 요약 한 줄(2026-10-19 평가 Q10): 경기 머리 바로 아래, 경기 정보·전체 배당표보다 위 */
.best-sum-block { padding: 10px 14px; }
.best-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; }
.best-sum-title { color: var(--muted); font-size: 13px; font-weight: 600; }
.best-sum-item { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.best-sum-oc { color: var(--muted); font-size: 12px; }
.best-sum-item b { font-size: 16px; }
.best-sum-payout.up b { color: var(--up, #2e9e57); }
.bm-chip-sm { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; }
.best-sum-link { margin-left: auto; font-size: 13px; }
@media (max-width: 600px) { .best-sum { gap: 4px 10px; } .best-sum-title { flex-basis: 100%; } .best-sum-link { margin-left: 0; } }
/* 경기 상세 요약 한 줄·문장 블록(2026-10-22, src/web/match-text.js) — 색은 변수만 써서 다크·낮 모드 공통 */
.mx-lead { margin: 2px 0 16px; font-size: 15px; line-height: 1.65; color: var(--text); }
.mx-lead b { font-weight: 700; }
.mx-text p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.mx-text > .market-title:not(:first-child) { margin-top: 22px; }
.mx-table { margin: 0; min-width: 0; } /* .odds-table 의 min-width 900 을 풀어 폰에서 가로 스크롤 없이 */
.mx-table td, .mx-table th { white-space: nowrap; }
.mx-table .mx-win { font-weight: 700; }
@media (max-width: 600px) { .mx-lead { font-size: 14px; margin-bottom: 12px; } .mx-text p { font-size: 14px; } .mx-table .mx-comp { display: none; } .mx-table td { white-space: normal; } }
/* 관리 > 모델(2026-10-19, 모델 배당 계획 9절 4번 — 관리자·개발자 전용): 요약 카드 격자 · 필터 줄 · 성적표 우리 행 강조 · 공식 행 표식 */
.mdl-sum { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); margin-bottom: 4px; }
.mdl-sum-table td .muted, .mdl-up td .muted { display: block; font-size: 11px; }
.mdl-filter { flex-wrap: wrap; margin: 0 0 10px; }
.mdl-card tr.mdl-ours td { background: var(--surface-2); }
.mdl-card tr.mdl-ref td:first-child { font-weight: 600; }
.mdl tr.mdl-off-row td { background: var(--best-bg); }
.mdl-eval { margin-bottom: 14px; grid-template-columns: minmax(280px, 360px) minmax(0, 640px); }
.mdl-eval .dash-table { width: 100%; }
.mdl-eval .dash-table td.mono { white-space: nowrap; }
@media (max-width: 900px) { .mdl-eval, .mdl-sum { grid-template-columns: minmax(0, 1fr); } }
.mdl-inputs { margin-top: 10px; }
/* 관리 > 모델 북메이커별 격차 표(2026-10-21 밤, #gap): 구간 묶음 머리 줄 · 두 표 사이 간격. 판정 전 행(픽 PICK_MIN_N 미만)은 칸에 muted, 판정 뒤 CLV ±2σ 는 up/down 색 */
.mdl-gap { margin-bottom: 10px; }
.mdl-gap tr.mdl-ref th { text-align: left; background: var(--surface-2); font-weight: 600; }
.mdl-gap td .muted { font-size: 11px; }

/* 레일 분석가 랭킹 [확정 | 실시간] 탭(2026-10-19 밤 사용자 결정, partials/rail-analysis + app.js anRailTabs): 두 목록이 함께 있고 고른 쪽만 보인다 */
.an-rail-tabs { display: flex; width: 100%; margin: 2px 0 6px; }
.an-rail-tabs .tg-item { flex: 1 1 0; justify-content: center; padding: 3px 6px; font-size: 12px; line-height: 18px; }
.an-rail-analysts[data-anrail="final"] [data-anrail-k="live"], .an-rail-analysts[data-anrail="live"] [data-anrail-k="final"] { display: none; }
.an-rail-analysts .widget-title .widget-tag[data-anrail-k] { display: inline; }
.an-rail-analysts[data-anrail="final"] .widget-title .widget-tag[data-anrail-k="live"], .an-rail-analysts[data-anrail="live"] .widget-title .widget-tag[data-anrail-k="final"] { display: none; }
.rl-delta { flex: none; min-width: 2.4em; text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted); }
.rl-delta.is-new { font-size: 10px; letter-spacing: 0.02em; color: var(--brand); }
.rl-delta.is-same { opacity: 0.6; }

/* 라인업 배당(2026-10-21, 관리자·개발자 전용 /lineup-odds — views/lineup-odds.ejs): 901~ 표 · ~900 경기 카드 · 직전(−10분) 열은 PC(1400~)만.
   lo-full/lo-part = 데이터 채움(관리 > 모델 mdl-full/mdl-part 와 같은 색) · is-res = 실제 결과 칸 · lo-e.is-hi = 차이·CLV 2% 이상 */
.lo-sum { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.lo-sum span { white-space: nowrap; }
.lo-sum .up { color: var(--up, #2e9e57); } .lo-sum .down { color: var(--down, #d9534f); }
.lo-table th, .lo-table td { text-align: center; white-space: nowrap; }
.lo-table td.col-match { text-align: left; }
.lo-table td.lo-first, .lo-table th.lo-first { border-left: 1px solid var(--border); }
.lo-table td.lo-m, .lo-table td.lo-c, .lo-table td.lo-tcol { font-family: var(--mono); font-size: 13px; }
.lo-s { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.lo-bn { font-family: var(--sans); max-width: 7em; overflow: hidden; text-overflow: ellipsis; margin: 0 auto; }
.lo-e.is-hi { color: var(--best-ink); font-weight: 700; }
.lo-league { display: block; font-size: 11px; color: var(--muted); }
.lo-now { display: inline-block; font-family: var(--sans); font-size: 10px; color: var(--muted); border: 1px solid var(--border); padding: 0 3px; margin-right: 3px; }
.lineup-odds .lo-full { background: color-mix(in srgb, var(--best-bg) 55%, transparent); }
.lineup-odds .lo-part { background: var(--warn-bg); }
.lineup-odds .is-res { font-weight: 700; box-shadow: inset 0 0 0 1px var(--text); }
@media (max-width: 1399px) { .lo-table .lo-pc { display: none; } }
.lo-cards { display: none; }
@media (max-width: 900px) {
    .lo-wide { display: none; }
    .lo-cards { display: grid; gap: 8px; }
}
.lo-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; background: var(--surface); }
.lo-c1 { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; color: var(--muted); }
.lo-c1 .lo-league { display: inline; }
.lo-c1 .lo-lag { margin-left: auto; font-family: var(--mono); }
.lo-c2 { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0; }
.lo-row { display: grid; grid-template-columns: 5.5em repeat(3, 1fr); gap: 4px; align-items: center; margin-top: 4px; }
.lo-row > span { text-align: center; padding: 3px 0; font-family: var(--mono); font-size: 13px; }
.lo-row > .lo-lab { text-align: left; font-family: var(--sans); font-size: 12px; color: var(--muted); }

/* 텔레그램 채널 노출·공유 버튼(2026-10-21): 텔레그램 파랑 pill(분석글 상세 글 끝 · 목록 · 조합·미들·괴리 제목 아래), 공유 줄(분석글 상세) */
.tg-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 14px 0; }
.tg-cta-list, .tg-cta-arbs { margin: 0 0 10px; }
.tg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; background: #229ed9; color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.tg-btn:hover { background: #1b8cc2; color: #fff; text-decoration: none; }
.tg-btn-sm { padding: 4px 11px; font-size: 12px; gap: 5px; }
.tg-btn-sm .tg-ico { width: 13px; height: 13px; }
.tg-note { font-size: 12.5px; }
.an-share { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.an-share-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.an-share .pill-btn { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.an-share [hidden] { display: none !important; }
.rail-links-tg { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 600px) { .tg-btn { white-space: normal; } }

/* 팀 페이지(2026-10-21): 머리(로고·♥ + 제목·소속 리그 칩), 다가오는 경기(po-table po-all 재사용 — 이 팀 쪽 알약 강조), 최근 결과(두 줄 팀·결과 칩·마감 배당) */
.team-head { padding: 14px 16px; }
.team-head-row { display: flex; align-items: center; gap: 14px; }
.team-head-row > .team.lg { flex: none; gap: 4px; }
.team-head-main { min-width: 0; }
.team-head-title { margin: 0; font-size: 20px; line-height: 1.35; }
.team-head-leagues { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.team-chip { display: inline-flex; align-items: center; gap: 5px; }
.team-chip img { width: 14px; height: 14px; object-fit: contain; }
.team-up td.pill-mine .pill { border-color: var(--brand); }
.team-rec .match-link { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.team-rec .match-link .team + .team::before { content: none; }
.team-rec tr.is-archive .match-link { color: inherit; }
.team-rec .tr-league { color: var(--muted); font-size: 12px; white-space: nowrap; }
.team-rec .tr-closing { white-space: nowrap; }
.team-st-meta { font-size: 11.5px; font-weight: 400; margin-left: 4px; }
.team-name-link { color: inherit; }
@media (max-width: 600px) {
    .team-head-title { font-size: 16px; }
    .team-rec .tr-x { display: none; }
}

/* 리그 페이지(2026-10-21 B): 머리(로고·제목·국가·시즌·배당표/결과 링크), 순위표 전체·이번 주 일정·최근 결과(결과 페이지와 같은 sum-cards 표)·분석글 */
.league-head .page-title { margin: 0; font-size: 20px; line-height: 1.35; }
.league-head-meta { margin: 4px 0 0; font-size: 12.5px; }
.league-noodds { margin: 0 0 12px; }
.league-sec + .league-sec, .league-block-st + .league-sec { margin-top: 14px; }
.league-sec .table-scroll + .mi-sub { margin-top: 16px; }
.league-more { margin: 8px 0 0; font-size: 13px; }
/* 순위표 위젯·경기 정보 제목 옆 "순위 전체 →"·"리그 페이지 →"(작은 링크) */
.mi-more { font-size: 12px; font-weight: 400; margin-left: 6px; white-space: nowrap; }
@media (max-width: 600px) { .league-head .page-title { font-size: 16px; } }

/* ---- 계산기·용어집(2026-10-21 밤, /tools/odds-converter · /tools/payout · /glossary) ---- */
.page-head-calc { margin-left: auto; flex: none; font-size: 12.5px; white-space: nowrap; } /* 조합 페이지 "? 안내" 왼쪽 "계산기" */
.page-head-howto.has-calc { margin-left: 12px; }
.guide-tools { margin: 10px 0 0; } /* 공지사항 표 읽는 법 끝 한 줄 */
.tool-card { margin: 14px 0 6px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.tool-card.is-arb .tool-payout strong { color: var(--best-ink); }
.tool-field { display: inline-flex; flex-direction: column; gap: 4px; margin: 0 12px 8px 0; vertical-align: top; }
.tool-field[hidden] { display: none; }
.tool-field .input { width: 130px; height: 38px; font-size: 15px; }
.tool-field-main .input { width: 220px; font-size: 18px; }
.tool-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tool-fields { margin-top: 12px; }
.tool-fmt, .tool-near, .tool-hint { margin: 0; font-size: 12.5px; min-height: 1.4em; }
.tool-out { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 6px; }
.tool-out > div { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.tool-out dt { font-size: 12px; color: var(--muted); }
.tool-out dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; min-height: 1.4em; }
.tool-ret { margin: 6px 0 0; font-weight: 600; min-height: 1.5em; }
.tool-payout { margin: 10px 0 6px; }
.tool-payout strong { font-size: 22px; margin-left: 6px; }
.tool-diff { margin: 2px 0 0; min-height: 1.5em; }
.tool-diff.is-plus, .tool-plus { color: var(--best-ink); font-weight: 700; }
.tool-table-wrap { max-width: 100%; overflow-x: auto; }
.tool-pay-table tbody tr[hidden] { display: none; }
.guide-table.tool-ex tbody tr:nth-child(2) td, .guide-table.tool-pay-table tbody tr:nth-child(2) td { color: inherit; font-weight: inherit; } /* 공지사항 표의 둘째 줄 강조를 끔 */
.tool-mode button.tg-item { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.tools-nav { margin: 28px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.tools-nav-h { color: var(--muted); margin-right: 4px; }
.tools-note { font-size: 12px; margin: 6px 0 0; }
.gl-toc { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 4px; font-size: 13px; }
.gl-toc a { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.gl-term p { margin: 4px 0; }
.gl-rel { font-size: 13px; }
@media (max-width: 720px) {
    .tool-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tool-field-main { display: flex; } .tool-field-main .input { width: 100%; }
    .tool-field .input { width: 110px; }
    .page-head-calc { font-size: 12px; }
}
/* 분석글 2줄 카드(2026-10-22 사용자 결정, 네 번째 안): 1줄 [순위 점수 닉네임 국기] [시각 · 리그 · 경기 · 언어] [상태 태그 오른쪽 끝], 2줄 [예측 알약] [제목 … 조회·댓글].
   기본(폰·홈·내 분석글)은 흐름 배치: 1줄 경기 묶음 → 분석가(order), 상태 태그는 경기 이름 옆(.an-card-tags-m), 언어는 조회 옆(.an-lang-l2); 2줄 알약 → 제목.
   PC·태블릿(≥901) 목록(.an-list, 내 분석글 제외)은 격자: 1열 고정 폭(분석가 / 알약)·2열(시각·리그·경기 / 제목)이 같은 세로선 */
.an-card-compact .an-card-line1 .an-g-who { order: 2; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.an-card-compact .an-g-who .an-rank-slot { display: inline-flex; align-items: center; flex: none; width: 32px; } /* 2026-10-22 사용자 요청: 40 → 32(컵 14 + 간격 3 + 숫자 두 자리) */ /* 순위 자리 고정 폭(2026-10-22): 컵+숫자(최대 "10") 또는 11~20위 뱃지, 없으면 빈 칸 → 닉네임 시작 위치 통일 */
.an-card-compact .an-g-who .an-stat-compact { margin-left: 2px; }
.an-card-compact .an-title-counts .an-g-pickstate { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.an-card-compact .an-card-line1 .an-card-tags-end { display: none; }
.an-card-compact .an-card-line1 .an-g-pick-m { display: none; }
/* 폰(≤900, 2026-10-22 사용자 결정): 1줄 = 닉네임 → 예측 알약 → (줄바꿈) 시각·리그 → 경기(+상태 태그), 2줄 = 제목. 알약은 1줄 복제본을 쓰고 2줄 알약은 숨김 */
@media (max-width: 900px) {
    .an-card-compact .an-card-line1 .an-g-who { order: 0; }
    .an-card-compact .an-card-line1 .an-g-pick-m { display: inline-flex; order: 1; min-width: 0; max-width: 100%; }
    .an-card-compact .an-card-line1 .an-g-match { order: 2; flex-basis: 100%; }
    .an-card-compact .an-title-counts .an-g-pickstate { display: none; }
}
.an-card-compact .an-card-line1 .an-card-tags-m { display: inline-flex; }
.an-card-compact .an-lang-l1 { display: none; }
@media (min-width: 901px) {
    .an-list:not(.an-mine-list) .an-card-compact .an-card-line1 { display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
    .an-list:not(.an-mine-list) .an-card-compact .an-card-line1 .an-g-who { order: 0; overflow: hidden; flex-wrap: nowrap; }
    .an-list:not(.an-mine-list) .an-card-compact .an-card-line1 .an-card-tags-m { display: none; }
    .an-list:not(.an-mine-list) .an-card-compact .an-card-line1 .an-card-tags-end { display: inline-flex; justify-self: end; flex: none; white-space: nowrap; }
    .an-list:not(.an-mine-list) .an-card-compact .an-card-line1 .an-g-match { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
    .an-list:not(.an-mine-list) .an-card-compact .an-card-line1 .an-g-match .an-time { flex: none; }
    .an-list:not(.an-mine-list) .an-card-compact .an-card-line1 .an-g-match .an-sport { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .an-list:not(.an-mine-list) .an-card-compact .an-card-line1 .an-g-match .an-match { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .an-list:not(.an-mine-list) .an-card-compact .an-lang-l1 { display: inline-flex; flex: none; }
    .an-list:not(.an-mine-list) .an-card-compact .an-lang-l2 { display: none; }
    .an-list:not(.an-mine-list) .an-card-compact .an-title-counts { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 12px; align-items: center; }
    .an-list:not(.an-mine-list) .an-card-compact .an-title-counts .an-g-pickstate { overflow: hidden; flex-wrap: nowrap; padding-left: 38px; } /* 알약 시작 = 닉네임 시작(순위 자리 32 + 간격 6, 2026-10-22 사용자 요청) */
    .an-list:not(.an-mine-list) .an-card-compact .an-title-counts .an-g-pickstate .an-pick { min-width: 0; overflow: hidden; }
    .an-list:not(.an-mine-list) .an-card-compact .an-title-counts .an-g-pickstate .an-pick-what { min-width: 0; }
    .an-list:not(.an-mine-list) .an-card-compact .an-g-title { display: flex; flex-wrap: nowrap; }
    .an-list:not(.an-mine-list) .an-card-compact .an-g-title > a { flex: 1 1 auto; min-width: 0; }
    .an-list:not(.an-mine-list) .an-card-compact .an-g-title .an-counts { margin-left: auto; flex: none; }
}
@media (min-width: 901px) and (max-width: 1399px) {
    .an-list:not(.an-mine-list) .an-card-compact .an-card-line1 { grid-template-columns: 240px minmax(0, 1fr) auto; }
    .an-list:not(.an-mine-list) .an-card-compact .an-title-counts { grid-template-columns: 240px minmax(0, 1fr); }
}

/* 관리 > 가상 경기 목록(2026-10-31 사용자 결정 A안: 날짜마다 표 하나, 한 줄 = 시작 · 리그 · 홈 점수 칸 · 홈 vs 원정(전광판 정렬) · 원정 점수 칸 · 결장 · 라인업 태그 · 버튼, 폰은 카드.
   점수는 칸마다 숫자 하나 — 항목 이름은 머리줄(사용자 요청)) */
.simls .sim-day { font-size: 15px; margin: 20px 0 8px; }
.simls-legend { margin-top: 2px; }
.simls-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.simls-table th { background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; padding: 7px 8px; }
.simls-table td { padding: 8px 8px; border-top: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.simls-table .simls-row:hover td { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.simls-table .st-time { width: 56px; font-weight: 700; }
.simls-table .st-league { width: 170px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.simls-table .st-league .league-logo { vertical-align: middle; margin-right: 6px; }
.simls-league { color: inherit; }
.simls-league:hover { color: var(--brand); text-decoration: none; }
.simls-table .st-n { width: 1%; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--muted); padding-left: 4px; padding-right: 4px; }
.simls-table th { white-space: nowrap; }
.simls-table th.st-n { font-family: inherit; font-size: 11px; min-width: 38px; }
.simls-table td.st-ovr { font-size: 15px; font-weight: 700; color: var(--text); }
.simls-table td.st-n.hi { color: var(--best-ink, #22c55e); }
.simls-table .st-home { text-align: right; max-width: 0; width: 25%; }
.simls-table .st-away { text-align: left; max-width: 0; width: 25%; }
.simls-table .st-vs { width: 1%; text-align: center; color: var(--muted); font-size: 12px; padding-left: 2px; padding-right: 2px; }
.simls-team { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--text); vertical-align: middle; }
.simls-team:hover { text-decoration: none; }
.simls-team:hover .team-name { color: var(--brand); }
.simls-team .team { min-width: 0; }
.simls-team .team-name { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.simls-table .st-inj { width: 1%; text-align: center; color: var(--muted); }
.simls-table th.st-inj { text-align: center; }
.simls-table .st-kind { width: 1%; }
.simls-table .st-kind .tag + .tag { margin-left: 4px; }
.simls-table .st-go { width: 1%; text-align: right; }
.tag.tag-ok { background: color-mix(in srgb, var(--best-ink, #22c55e) 18%, transparent); color: var(--text); }
.tag.tag-muted { background: transparent; border: 1px solid var(--border); }
@media (max-width: 1250px) { .simls-table .st-u { display: none; } } /* 좁으면 종합 점수만 — 팀명이 먼저 */
@media (max-width: 600px) {
    .simls-table, .simls-table tbody { display: block; border: 0; background: none; }
    .simls-table thead { display: none; }
    .simls-table .simls-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "time league kind" "home vs away"; gap: 6px 8px; align-items: center; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
    .simls-table .simls-row td { display: block; padding: 0; border: 0; background: none !important; width: auto; max-width: none; }
    .simls-table .st-time { grid-area: time; }
    .simls-table .st-league { grid-area: league; }
    .simls-table .st-kind { grid-area: kind; text-align: right; }
    .simls-table .st-home { grid-area: home; }
    .simls-table .st-vs { grid-area: vs; }
    .simls-table .st-away { grid-area: away; }
    .simls-table .st-go, .simls-table .st-inj, .simls-table .st-n { display: none !important; }
    .simls-card-link::after { content: ""; position: absolute; inset: 0; } /* 카드 전체가 가상 경기 링크(팀·리그 링크는 PC 전용) */
}

/* 관리 > 가상 경기(2026-10-27, docs/plan-player-sim.md 7절 · 같은 날 게임형 화면: 잔디·토큰·끌어다 놓기·경기 연출) */
.sim-notes p { margin: 0 0 4px; }
.sim-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 10px; }
.sim-side-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* 경기장: 잔디 줄무늬 + 하프라인·센터서클·페널티 박스·골문 */
.sim-field { position: relative; border-radius: 12px; aspect-ratio: 10 / 11; border: 2px solid #2f6b3a; /* 포메이션(줄 수)과 무관하게 같은 크기 — 비율은 최소값이라 줄이 넘치면 경기장이 늘어나 잘리지 않음 */
    display: flex; flex-direction: column; padding: 12px 6px;
    background: repeating-linear-gradient(0deg, #2e7d3a 0 44px, #2a7335 44px 88px); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25); }
.sim-field .fm { position: absolute; border: 2px solid rgba(255, 255, 255, 0.45); pointer-events: none; }
.sim-field .fm-half { left: 0; right: 0; top: 50%; height: 0; border-width: 2px 0 0; }
.sim-field .fm-circle { left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; }
.sim-field .fm-box { left: 26%; right: 26%; height: 54px; }
.sim-field .fm-box-top { top: -2px; border-top: 0; }
.sim-field .fm-box-bot { bottom: -2px; border-bottom: 0; }
.sim-field .fm-goal { left: 42%; right: 42%; height: 14px; }
.sim-field .fm-goal-top { top: -2px; border-top: 0; }
.sim-field .fm-goal-bot { bottom: -2px; border-bottom: 0; }
.sim-rows { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; gap: 4px; } /* 경기장 안에 실제로 배치(전엔 absolute 라 좁은 화면에서 위·아래 줄이 잘렸음) */
.sim-row { display: flex; justify-content: space-around; align-items: center; gap: 2px; }
/* 선수 토큰 */
.sim .tok { flex: 0 1 84px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: grab; user-select: none; touch-action: none;
    padding: 3px 2px; border-radius: 10px; transition: transform 0.12s, background 0.12s; color: #fff; }
.sim .tok:hover { transform: translateY(-2px); }
.sim .tok:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.tok-disc { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #f5f7fb, #c9d1de);
    color: #10151f; font-weight: 800; font-size: 15px; border: 3px solid #9aa3b2; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
.tok-disc.sm { width: 30px; height: 30px; font-size: 12px; border-width: 2px; flex: 0 0 30px; }
.tok-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.35); padding: 0 5px; border-radius: 4px; }
.tok-unit { font-size: 9px; letter-spacing: 0.04em; opacity: 0.85; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.tok-bar { width: 44px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.4); overflow: hidden; }
.tok-bar i { display: block; height: 100%; background: currentColor; }
.sim .tok.f-ok .tok-disc { border-color: #6fdc8c; } .sim .tok.f-ok .tok-bar { color: #6fdc8c; }
.sim .tok.f-mid .tok-disc { border-color: #f0b65a; } .sim .tok.f-mid .tok-bar { color: #f0b65a; }
.sim .tok.f-bad .tok-disc { border-color: #ff7b72; box-shadow: 0 0 0 3px rgba(255, 123, 114, 0.35), 0 2px 6px rgba(0, 0, 0, 0.45); } .sim .tok.f-bad .tok-bar { color: #ff7b72; }
.sim .tok.sel .tok-disc { outline: 3px solid #ffd54a; outline-offset: 2px; }
.sim.is-dragging .tok.drop-ok .tok-disc { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.45); }
.sim .tok.drop-hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.08); }
.sim .tok.dragging, .sim .card.dragging { opacity: 0.35; }
.sim-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -50%) rotate(-3deg) scale(1.05); opacity: 0.95; color: #fff;
    background: rgba(20, 24, 32, 0.85); border-radius: 12px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
.sim.is-dragging, .sim.is-dragging * { cursor: grabbing !important; }
/* 후보 카드 */
.sim-bench { margin-top: 10px; }
.sim-bench-title { font-size: 13px; margin: 0 0 6px; }
.sim-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 360px; overflow-y: auto; padding-right: 2px; }
.sim .card { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: grab; user-select: none; touch-action: none; }
.sim .card:hover { border-color: var(--brand); }
.sim .card.inj { opacity: 0.45; cursor: not-allowed; }
.card-txt { min-width: 0; flex: 1; }
.card-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { font-size: 10px; color: var(--muted); }
.card-ab { font-size: 12px; font-weight: 700; color: var(--muted); }
/* 결과판 */
.sim-prob { display: flex; flex-direction: column; gap: 6px; }
.sim-prob-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 48px 44px; align-items: center; gap: 6px; font-size: 12px; }
.sim-prob-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-prob-bar { position: relative; height: 12px; border-radius: 6px; background: var(--border); overflow: hidden; }
.sim-prob-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width 0.35s ease; }
.sim-prob-bar .sim-prob-base { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: 0.8; }
.k-home { background: #4c8dff; } .k-draw { background: #9aa3b2; } .k-away { background: #ff8a65; }
.sim-prob-val { text-align: right; font-weight: 700; }
.sim-prob-d { text-align: right; } .sim-prob-d.up { color: var(--up); } .sim-prob-d.down { color: var(--down); }
.sim-legend { font-size: 11px; margin: 4px 0 8px; }
.sim-xg { display: flex; justify-content: center; align-items: baseline; gap: 12px; font-size: 22px; font-weight: 800; margin: 4px 0; }
.sim-xg small { font-size: 11px; font-weight: 400; color: var(--muted); }
.sim-top, .sim-dd { font-size: 12px; margin: 2px 0; }
.sim-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.sim-btns .sim-go { font-weight: 700; }
.sim-btns button:disabled { opacity: 0.5; cursor: wait; }
.sim-stage:empty { display: none; }
.sim-stage { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 6px; }
.sim-prep { display: flex; align-items: center; gap: 10px; padding: 18px 4px; }
.sim-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--brand); animation: simspin 0.7s linear infinite; }
@keyframes simspin { to { transform: rotate(360deg); } }
.sim-prep-tx { font-size: 13px; color: var(--muted); }
/* 한 판: 전광판 */
.sim-board { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; gap: 8px; background: #0b0e13; color: #fff;
    border-radius: 10px; padding: 10px 12px; border: 1px solid #2a2f3a; }
.sb-team { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-team:last-child { text-align: right; }
.sb-score { font: 800 30px/1 var(--mono); color: #ffd54a; min-width: 24px; text-align: center; }
.sb-score.bump { animation: simbump 0.6s ease; }
@keyframes simbump { 0% { transform: scale(1); } 30% { transform: scale(1.6); color: #fff; } 100% { transform: scale(1); } }
.sb-sep { font-size: 22px; color: #9aa3b2; }
.sim-clock { text-align: center; font-size: 15px; font-weight: 700; margin: 6px 0 4px; }
.sim-progress { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin-bottom: 6px; }
.sim-progress i { display: block; height: 100%; width: 0; background: var(--brand); }
.sim-feed { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; font-size: 13px; }
.sim-feed li { display: flex; gap: 8px; padding: 3px 2px; border-bottom: 1px dashed var(--border); animation: simin 0.35s ease; }
.sim-feed li b { min-width: 30px; color: var(--muted); }
.sim-feed .ev-goal { font-weight: 700; }
.sim-feed .ev-goal.ev-home { color: #7fb0ff; } .sim-feed .ev-goal.ev-away { color: #ffab91; }
.sim-feed .ev-end { font-weight: 700; }
@keyframes simin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sim-skip { margin-top: 6px; }
.sim-final { font-size: 18px; font-weight: 800; text-align: center; margin: 8px 0 2px; }
.sim-seed { font-size: 11px; text-align: center; }
/* 100판: 10×10 칸 */
.sim-many-n { font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.sim-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: 0 auto 10px; max-width: 280px; }
.sim-dots i { aspect-ratio: 1; border-radius: 3px; background: var(--border); transition: background 0.15s; }
.sim-dots i.k-home { background: #4c8dff; } .sim-dots i.k-draw { background: #9aa3b2; } .sim-dots i.k-away { background: #ff8a65; }
.sim-tally { display: flex; flex-direction: column; gap: 5px; }
.sim-tally-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 32px; align-items: center; gap: 6px; font-size: 12px; }
.sim-tally-row .sim-prob-bar i { transition: width 0.1s linear; }
@media (max-width: 1100px) { .sim-grid { grid-template-columns: minmax(0, 1fr); } .sim-result { order: -1; } }
/* 폰: 경기장을 조금 더 세로로(6줄 포메이션도 같은 크기에 들어가게), 토큰은 작게 */
@media (max-width: 1100px) { .sim-field { max-width: 560px; margin: 0 auto; } } /* 한 줄 배치(태블릿)에서 경기장이 지나치게 길어지지 않게 */
@media (max-width: 600px) { .sim-field { aspect-ratio: 4 / 5; padding: 8px 2px; } }
@media (max-width: 360px) { .sim-field { aspect-ratio: 3 / 4; } }
@media (max-width: 480px) { .sim .tok { flex-basis: 64px; padding: 1px; } .tok-disc { width: 30px; height: 30px; font-size: 12px; border-width: 2px; } .tok-name { font-size: 10px; padding: 0 3px; } .tok-unit { display: none; } .tok-bar { width: 34px; height: 3px; } .sim-rows { gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .sim .tok, .sim-prob-bar i, .sim-feed li, .sb-score.bump { transition: none; animation: none; } }
/* 가상 경기 2차(2026-10-27): 최적 배치·퇴장·도움·100판 상세 */
.sim-side-ctl { display: flex; align-items: center; gap: 6px; }
.sim-best { font-weight: 700; padding: 4px 10px; }
.sim .tok.flash .tok-disc { animation: simflash 0.9s ease; }
@keyframes simflash { 0% { box-shadow: 0 0 0 0 rgba(255, 213, 74, 0.9); transform: scale(1.25); } 100% { box-shadow: 0 0 0 14px rgba(255, 213, 74, 0); transform: scale(1); } }
.sim-search { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(8, 20, 10, 0.55); color: #fff; z-index: 2; }
.sim-search-tx { font: 700 14px/1.3 var(--mono); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.sim-search .sim-spin { border-color: rgba(255, 255, 255, 0.3); border-top-color: #ffd54a; width: 30px; height: 30px; }
.sim-note { font-size: 12px; font-weight: 700; color: var(--warn-ink); background: var(--warn-bg); border-radius: 6px; padding: 6px 8px; margin: 0 0 8px; }
.sb-red { display: inline-block; width: 9px; height: 13px; border-radius: 2px; background: #e53935; margin-left: 6px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.sim-feed .ev-red { color: #ff7b72; font-weight: 700; }
.sim-dots i.red { box-shadow: inset 0 0 0 2px #e53935; }
.sim-many-det { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.sim-sub { font-size: 13px; margin: 6px 0; }
.sim-heat { border-collapse: separate; border-spacing: 2px; margin: 0 auto; font-size: 11px; }
.sim-heat th { color: var(--muted); font-weight: 600; padding: 2px 4px; text-align: center; }
.sim-heat .hm-corner { font-size: 9px; white-space: nowrap; }
.sim-heat td { width: 30px; height: 24px; text-align: center; border-radius: 4px; font-weight: 700; --a: 0; }
.sim-heat td.hm-h { background: rgba(76, 141, 255, calc(0.08 + var(--a) * 0.85)); }
.sim-heat td.hm-d { background: rgba(154, 163, 178, calc(0.08 + var(--a) * 0.85)); }
.sim-heat td.hm-a { background: rgba(255, 138, 101, calc(0.08 + var(--a) * 0.85)); }
.sim-many-sum { font-size: 12px; text-align: center; margin: 6px 0; }
.sim-ranks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sim-rank ol { margin: 0; padding-left: 18px; font-size: 12px; }
.sim-rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.sim-rank li b { white-space: nowrap; }
.sim-rank .rk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-rank .rk-name.ev-home { color: #7fb0ff; } .sim-rank .rk-name.ev-away { color: #ffab91; }
@media (prefers-reduced-motion: reduce) { .sim .tok.flash .tok-disc { animation: none; } }
/* 가상 경기 공개(2026-11-03): 계산 오류 문구·로그인 안내 버튼 줄 */
.sim p.warn { color: var(--warn-ink); font-weight: 600; font-size: 13px; margin: 0 0 8px; }
.sim-login .btn { margin: 2px 4px; }
.match-head-meta .sim-try { font-weight: 700; }
/* 목록 검색(2026-11-04, partials/list-search · app.js listSearch) */
.list-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.list-search-box { position: relative; display: block; flex: 0 1 300px; min-width: 180px; }
.list-search input { width: 100%; box-sizing: border-box; height: 32px; padding: 0 28px 0 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; font-size: 13px; }
.list-search input::-webkit-search-cancel-button { display: none; }
.list-search input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.list-search-ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 13px; pointer-events: none; opacity: 0.7; }
.list-search-clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 7px; }
.list-search-clear:hover { color: inherit; }
.list-search-count, .list-search-none { color: var(--muted); font-size: 12.5px; }
.ls-hidden { display: none !important; }
.ls-other { flex-basis: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 6px 10px; }
.ls-other-title { font-size: 12px; color: var(--muted); margin: 0 0 2px; }
.ls-other-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13px; color: inherit; text-decoration: none; border-top: 1px solid var(--border); }
.ls-other-row:first-of-type { border-top: 0; }
.ls-other-row:hover .ls-other-teams { text-decoration: underline; }
.ls-other-row .mono { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ls-other-lg { color: var(--muted); font-size: 12px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ls-other-teams { font-weight: 600; min-width: 0; }
.an-match-q { margin-bottom: 6px; }
@media (max-width: 600px) { .list-search-box { flex: 1 1 100%; } .ls-other-lg { display: none; } }