/* killtoto.com — 기본 스타일 (경량, 빌드 불필요) */
html { color-scheme: light; }
:root {
--bg: #f5f6f8;
--card: #ffffff;
--text: #1a1d21;
--muted: #6b7280;
--border: #e5e7eb;
--accent: #0d7a3f; /* killtoto green */
--accent-dark: #0a5f31;
--up: #e01e1e; /* 상승=빨강 (한국 관례) */
--down: #1657d0; /* 하락=파랑 */
--hot: #f2711c; /* 투표 몰림 강조=주황 (벳인포) */
--radius: 12px;
--shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--bg); color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
"Malgun Gothic", "Noto Sans KR", sans-serif;
line-height: 1.6; font-size: 16px;
}
/* 콘텐츠 폭: 기본(넓게) / 데이터표(더 넓게) / 폼(좁게). 모바일은 100%+패딩 그대로. */
/* 폭 통일 — 전 페이지 동일(page-wide/narrow 등급 폐지). 페이지 이동 시 폭이 안 바뀌게. */
.wrap, .page-wide .wrap, .page-narrow .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 1024px) { .wrap { padding: 0 24px; } } /* 데스크톱 좌우 여백 살짝 */
/* header */
.site-header { background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; }
/* 헤더 로고: 밝은 배경(라이트)=logo-light, 어두운 배경(다크)=logo-dark, 초협소=symbol */
.brand {
display: block; width: 140px; height: 28px; flex: 0 0 auto; text-decoration: none;
background: url('/images/logo-light.svg') left center / contain no-repeat;
}
.header-inner > * { min-width: 0; }
/* ===== 드롭다운 네비 ===== */
.nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 20px; cursor: pointer; padding: 6px 8px; line-height: 1; }
.site-nav { display: flex; align-items: center; gap: 1px; }
.nav-item { position: relative; }
.nav-top {
display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
padding: 7px 10px; border-radius: 8px; font-size: 14px; font-weight: 600;
color: var(--muted); text-decoration: none; background: none; border: none;
cursor: pointer; font-family: inherit;
}
.nav-top:hover, .nav-top.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.nav-top.soon { color: color-mix(in srgb, var(--muted) 55%, transparent); cursor: default; }
.nav-top.soon:hover { background: none; color: color-mix(in srgb, var(--muted) 55%, transparent); }
.nav-top .caret { font-size: 9px; opacity: .55; }
.nav-dropdown {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 190px;
display: flex; flex-direction: column; padding: 6px;
background: var(--card); border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 10px 30px color-mix(in srgb, #000 18%, transparent);
}
.nav-dd-link { padding: 9px 12px; border-radius: 7px; font-size: 14px; color: var(--text); text-decoration: none; white-space: nowrap; }
.nav-dd-link:hover { background: var(--bg); color: var(--accent); }
.nav-dd-link.soon { color: var(--muted); cursor: default; }
.nav-dd-link.soon:hover { background: none; color: var(--muted); }
.nav-dd-link.soon em { font-style: normal; font-size: 10px; color: var(--muted); margin-left: 6px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 999px; }
/* 모바일: 햄버거 → 세로 드로어 */
@media (max-width: 860px) {
.nav-toggle { display: inline-flex; }
.site-nav {
position: absolute; top: 56px; right: 0; left: 0; z-index: 25;
flex-direction: column; align-items: stretch; gap: 1px; display: none;
padding: 8px; background: var(--card); border-bottom: 1px solid var(--border);
box-shadow: 0 12px 24px color-mix(in srgb, #000 12%, transparent);
}
.site-nav.open { display: flex; }
.nav-top { width: 100%; justify-content: space-between; padding: 11px 12px; }
.nav-top .caret { margin-left: auto; }
.nav-dropdown { position: static; box-shadow: none; border: none; min-width: 0; padding: 2px 0 6px 14px; }
.nav-dd-link { padding: 10px 12px; }
}
/* layout */
main.wrap { padding-top: 24px; padding-bottom: 48px; }
h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: -.02em; }
.lead { color: var(--muted); margin: 0 0 24px; font-size: 15px; }
.card {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px;
}
.card h2 { font-size: 17px; margin: 0 0 14px; }
/* forms */
label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
input[type=number], input[type=text], select {
width: 100%; padding: 10px 12px; font-size: 16px; color: var(--text);
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
input:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 0; border-color: var(--accent); }
.field { margin-bottom: 14px; }
.row { display: flex; gap: 10px; align-items: center; }
.row > * { min-width: 0; }
button, .btn {
font: inherit; font-weight: 700; cursor: pointer; border: none; border-radius: 8px;
padding: 10px 16px; background: var(--accent); color: #fff;
}
button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }
/* hover 는 마우스 기기 전용 — 터치는 탭 후 :hover 가 눌러붙어(sticky) 해제해도 초록으로 남는 버그 */
@media (hover: hover) {
button:hover, .btn:hover { background: var(--accent-dark); }
button.ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
}
button.icon { padding: 8px 12px; }
button:disabled { opacity: .45; cursor: not-allowed; }
/* match rows */
.match-list { display: flex; flex-direction: column; gap: 8px; }
.match-row {
display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center;
padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
.match-no { font-weight: 700; color: var(--muted); text-align: center; }
.pick-group { display: flex; gap: 6px; }
.pick-btn {
flex: 1; padding: 9px 0; border: 1px solid var(--border); border-radius: 8px;
background: var(--card); color: var(--muted); font-weight: 700; text-align: center; cursor: pointer;
user-select: none; font-size: 14px;
}
.pick-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cancel-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.cancel-toggle input { width: auto; }
/* results */
.result { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.result .stat { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.result .stat .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.result .stat .v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.result .stat.wide { grid-column: 1 / -1; }
.v .unit { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.profit-up { color: var(--up); }
.profit-down { color: var(--down); }
.muted { color: var(--muted); }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.warn { color: var(--up); font-size: 13px; font-weight: 600; }
/* home cards */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.tool-card {
display: block; text-decoration: none; color: var(--text);
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 20px; transition: transform .08s ease;
}
.tool-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.tool-card .t { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.tool-card .d { font-size: 13px; color: var(--muted); }
.tool-card .tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 2px 8px; border-radius: 999px; margin-bottom: 10px; }
[x-cloak] { display: none !important; }
/* 홈 섹션 */
.home-hero { margin-bottom: 22px; }
.home-hero h1 { margin-bottom: 8px; }
.home-hero .lead { margin-bottom: 0; }
.home-sec { margin: 28px 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-h { font-size: 18px; font-weight: 800; margin: 0; }
.sec-more { font-size: 13px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.sec-more:hover { text-decoration: underline; }
/* 발매 회차 리스트(행) — 홈 마감스트립 + /games 공용. 프로토 승부식은 최상단 고정. */
.dl-list { display: flex; flex-direction: column; gap: 8px; }
.dl-row {
display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text);
background: var(--card); border: 1px solid var(--border); border-radius: 10px;
padding: 11px 14px; transition: border-color .08s ease, transform .08s ease;
}
.dl-row:hover { border-color: var(--accent); transform: translateX(2px); }
.dl-row.pin { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
.dl-icon { flex: none; width: 22px; text-align: center; font-size: 19px; line-height: 1; }
.dl-main { flex: 1 1 auto; min-width: 0; }
.dl-name { display: block; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-round { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.dl-meta { flex: none; display: flex; align-items: center; gap: 10px; }
.dl-status {
font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.dl-status.urgent, .dl-status.closed { background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); }
.dl-status.sched { background: color-mix(in srgb, #1a5fb4 14%, transparent); color: #1a5fb4; } /* 발매예정 */
.dl-row.sched-row { border-left: 3px solid color-mix(in srgb, #1a5fb4 55%, transparent); }
.dl-time { text-align: right; min-width: 76px; }
.dl-time-lb { display: block; font-size: 10px; color: var(--muted); line-height: 1.25; }
.dl-time-t { display: block; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.2px; line-height: 1.25; }
.dl-time.urgent .dl-time-t, .dl-time.closed .dl-time-t { color: var(--up); }
.dl-time.sched .dl-time-t { color: #1a5fb4; } /* 발매예정 발매개시 카운트다운 */
.dl-open { display: block; font-size: 10px; color: var(--muted); line-height: 1.25; }
.dl-sell { flex: none; min-width: 92px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dl-skel, .dl-empty {
color: var(--muted); font-size: 13px; padding: 16px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.dl-empty a { color: var(--accent); }
@media (max-width: 560px) { .dl-sell { display: none; } } /* 좁으면 발매액 숨김 */
@media (max-width: 360px) { .dl-icon, .dl-status { display: none; } } /* 초협소: 아이콘·상태뱃지 숨김(마감색으로 임박표시) */
/* 경기 달력(통합: 결과+일정) */
/* 날짜 네비(기본) + 달력 토글 */
.mc-navbar { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
.mc-daybtn { padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text);
font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.mc-daybtn:hover { border-color: var(--accent); }
.mc-curdate { font-size: 16px; font-weight: 800; min-width: 150px; text-align: center; }
.mc-caltoggle { margin-left: auto; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card);
color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.mc-caltoggle:hover, .mc-caltoggle.on { border-color: var(--accent); color: var(--accent); }
.mc-cal { padding: 12px; max-width: 360px; margin: 0 0 16px; }
.mc-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mc-cal-title { font-weight: 800; font-size: 15px; }
.mc-nav { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text); cursor: pointer; font-size: 15px; }
.mc-nav:hover { border-color: var(--accent); }
.mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.mc-wd { margin-bottom: 3px; }
.mc-wd-c { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0; }
.mc-day { position: relative; aspect-ratio: 1; border: 1px solid transparent; border-radius: 7px; background: none; cursor: default;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: inherit; color: var(--text); }
.mc-day.empty { visibility: hidden; }
.mc-day.has { cursor: pointer; background: color-mix(in srgb, var(--accent) 7%, var(--card)); border-color: var(--border); }
.mc-day.has:hover { border-color: var(--accent); }
.mc-day.sel { background: #1a5fb4; border-color: #1a5fb4; color: #fff; }
.mc-day.today:not(.sel) { border-color: var(--accent); }
.mc-dnum { font-size: 13px; font-weight: 700; }
.mc-dcnt { font-size: 9px; line-height: 1; opacity: .8; }
.mc-day.sel .mc-dcnt { color: #fff; }
.mc-matches { display: flex; flex-direction: column; gap: 8px; }
.mc-match { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.mc-match.st-selling { border-left: 3px solid #2e9e5b; }
.mc-match.st-upcoming { border-left: 3px solid #1a5fb4; }
/* 행 = 그리드 칸 정렬: 시간 | 종목아이콘 | 리그 | 팀(스코어보드) | 버튼.
팀은 왼쪽 고정폭 → 홈 우측정렬·원정 좌측정렬로 vs 가 세로로 정렬. 버튼은 남는 공간서 우측정렬. */
/* 행 = [시간|아이콘|리그|발매중칸|팀(유연·가운데)|버튼(고정폭)]. 버튼 칸 고정 → 팀 칸 폭 일정 → vs 항상 세로정렬. 이긴팀 빨강. */
.mc-mrow { display: grid; grid-template-columns: 40px 22px 52px 54px minmax(0, 1fr) 190px; align-items: center; gap: 8px 12px; }
.mc-mtime { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-micon { font-size: 17px; text-align: center; line-height: 1; }
.mc-mleague { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-mstatus { min-width: 0; } /* 발매중/예정 칸 — 없어도 폭 확보(정렬 일관) */
.mc-mteams { min-width: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; font-weight: 700; }
.mc-tname { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 폭 맞춰 자동 …(모바일 포함) */
.mc-home { text-align: right; }
.mc-away { text-align: left; }
.mc-mid { text-align: center; min-width: 30px; }
.mc-score { font-variant-numeric: tabular-nums; }
.mc-score b { font-size: 16px; }
.mc-score b.win { color: var(--up); } /* 이긴 팀 = 빨강 */
.mc-vs { color: var(--muted); font-weight: 400; font-size: 12px; }
/* 진행중 라이브 배지 — '8회말 3:5' (깜빡이는 점 + 이닝 + 실시간 스코어) */
.mc-live { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #dc2626;
background: #fef2f2; border: 1px solid #fecaca; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.mc-live b { font-variant-numeric: tabular-nums; color: #111827; }
.mc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #dc2626; animation: mcpulse 1.2s ease-in-out infinite; }
/* 종료·잠정(공식정산 전) — 차분한 회색, '잠정' 마커로 공식 아님 명시 */
.mc-live.fin { color: #374151; background: #f3f4f6; border-color: #d1d5db; }
.mc-live .prov { font-style: normal; font-size: 10px; font-weight: 800; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 0 4px; margin-left: 2px; }
@keyframes mcpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.mc-badge { flex: none; }
/* 게임 버튼(경기별 rel-btn 양식 — 프로토 빨강/토토 파랑). P는 항상 맨 오른쪽(sortedGames). */
.mc-gbtns { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-end; }
.mc-gbtn { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--border);
font-size: 11px; font-weight: 800; cursor: pointer; text-decoration: none; font-family: inherit; white-space: nowrap; transition: background .08s, color .08s; }
@media (max-width: 620px) {
.mc-mrow { grid-template-columns: 36px 20px 48px minmax(0, 1fr); }
.mc-mleague { display: none; }
.mc-gbtns { grid-column: 1 / -1; justify-content: flex-start; }
}
.mc-gbtn.fam-proto { color: var(--up); background: color-mix(in srgb, var(--up) 12%, var(--card)); border-color: color-mix(in srgb, var(--up) 35%, var(--border)); }
.mc-gbtn.fam-proto:hover, .mc-gbtn.fam-proto.on { background: var(--up); color: #fff; }
.mc-gbtn.fam-toto { color: var(--down); background: color-mix(in srgb, var(--down) 12%, var(--card)); border-color: color-mix(in srgb, var(--down) 35%, var(--border)); }
.mc-gbtn.fam-record { color: #7c5cbf; background: color-mix(in srgb, #7c5cbf 12%, transparent); }
.mc-gbtn.fam-toto:hover, .mc-gbtn.fam-toto.on { background: var(--down); color: #fff; }
/* 미지원(collected) 유형 — 회색·클릭 불가. 경기는 남되 '그 게임으로 가는 링크'만 차단 */
.mc-gbtn.unsup { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); border-color: var(--border); border-style: dashed; cursor: not-allowed; opacity: .7; }
.mc-gbtn.unsup:hover { background: color-mix(in srgb, var(--muted) 10%, transparent); color: var(--muted); }
.mc-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.mc-badge.sell { background: color-mix(in srgb, #2e9e5b 16%, transparent); color: #2e9e5b; }
.mc-badge.up { background: color-mix(in srgb, #1a5fb4 14%, transparent); color: #1a5fb4; }
.mc-lines { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.mc-game { }
.mc-gname { display: inline-block; font-size: 12px; font-weight: 800; color: var(--accent); text-decoration: none; margin-bottom: 4px; }
.mc-gname:hover { text-decoration: underline; }
.mc-glines { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-line { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); }
.mc-line .mc-lbt { color: var(--muted); }
.mc-line .mc-lr { font-weight: 800; }
.mc-line.void .mc-lr { color: var(--muted); }
/* 발매예정 회차 미리보기(계산기 페이지) */
.next-sched { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 8px; padding: 8px 12px; border-radius: 8px;
background: color-mix(in srgb, #1a5fb4 8%, var(--card)); border: 1px solid color-mix(in srgb, #1a5fb4 30%, var(--border));
color: #1a5fb4; text-decoration: none; font-size: 13px; font-weight: 700; }
.next-sched:hover { background: color-mix(in srgb, #1a5fb4 14%, var(--card)); }
.preview-panel { padding: 16px; }
.pv-note { margin: 0 0 12px; }
.pv-table th, .pv-table td { padding: 8px 10px; }
.pv-teams { font-size: 14px; }
.pv-vs { color: var(--muted); font-weight: 400; margin: 0 4px; font-size: 12px; }
.pv-table .selcol { padding: 4px; min-width: 44px; }
/* 경기명 아래 보조정보(리그·일정) — 좁은 화면에서만 노출 (아래 미디어쿼리) */
.pv-sub { display: none; }
/*
* 발매 전 계산기 표(pv-table) 모바일 최적화.
* 기본 .match-table 은 min-width:720px 이라 좁은 화면에서 승/1/패 버튼이 밀려 안 보인다.
* 계산기의 핵심은 선택 버튼이므로, 좁은 화면에선 번호·리그·일정 열을 숨겨
* '경기 + 승/1/패' 만 남긴다(스크롤 없이 버튼이 바로 보이게). 숨긴 정보는 경기명 아래로 이동.
*/
@media (max-width: 560px) {
/* .match-table.pv-table = 클래스 2개로 명시도를 높인다.
기본 .match-table { min-width:720px } 과 명시도가 같으면 선언순서로 밀리므로. */
.match-table.pv-table { min-width: 0; } /* 720px 고정폭 해제 → 화면 폭에 맞춤 */
.match-table.pv-table .pv-hide-narrow { display: none; }
.match-table.pv-table .pv-teams { white-space: normal; } /* 팀명 줄바꿈 허용 */
.match-table.pv-table .pv-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; white-space: normal; }
.match-table.pv-table .selcol { min-width: 40px; }
.match-table.pv-table th, .match-table.pv-table td { padding: 8px 6px; white-space: normal; }
}
.pv-combo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; padding: 12px 14px;
background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.pv-cstat { display: flex; align-items: baseline; gap: 6px; }
.pv-cstat .k { font-size: 12px; color: var(--muted); }
.pv-cstat .v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.btn-reset { margin-left: auto; padding: 6px 14px; border-radius: 7px; border: 1px solid var(--border);
background: var(--card); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.btn-reset:hover { border-color: var(--accent); }
/* 발매일정 탭 */
.sc-monthnav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 4px 0 16px; }
.sc-month { font-size: 16px; font-weight: 800; min-width: 120px; text-align: center; }
.sc-navbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px;
border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 13px; background: var(--card); }
.sc-navbtn:hover { border-color: var(--accent); }
.sc-navbtn.dim { color: var(--border); pointer-events: none; }
.sc-list { display: flex; flex-direction: column; gap: 10px; }
.sc-row { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.sc-row.st-row-scheduled { border-left: 3px solid #1a5fb4; }
.sc-row.st-row-selling { border-left: 3px solid #2e9e5b; }
.sc-row.st-row-cancel { border-left: 3px solid var(--up); }
.sc-top { display: flex; align-items: center; gap: 10px; }
.sc-icon { flex: none; font-size: 18px; width: 22px; text-align: center; }
.sc-title { flex: 1 1 auto; min-width: 0; }
.sc-name { display: block; font-weight: 800; font-size: 14px; }
.sc-sub { display: block; font-size: 11px; color: var(--muted); }
.sc-badge { flex: none; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.sc-badge.st-scheduled { background: color-mix(in srgb, #1a5fb4 15%, transparent); color: #1a5fb4; }
.sc-badge.st-selling { background: color-mix(in srgb, #2e9e5b 16%, transparent); color: #2e9e5b; }
.sc-badge.st-closed, .sc-badge.st-payout { background: var(--bg); color: var(--muted); }
.sc-badge.st-cancel { background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); }
.sc-dates { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.sc-dt b { color: var(--text); font-weight: 700; margin-right: 3px; }
.sc-preview { margin-top: 8px; }
.sc-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--accent);
background: none; border: none; cursor: pointer; padding: 2px 0; font-family: inherit; }
.sc-matches { margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.sc-match { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 2px 0; }
.sc-mseq { flex: none; width: 20px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.sc-mteam { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.sc-mleague { flex: none; font-size: 11px; color: var(--muted); }
.sc-mdate { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .sc-mleague { display: none; } }
.site-footer { border-top: 1px solid var(--border); padding: 24px 0 48px; }
.site-footer p { font-size: 12px; color: var(--muted); margin: 4px 0; }
/* 데이터 없음 / 준비 중 */
.empty-state { text-align: center; padding: 36px 20px; }
.empty-title { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.data-stamp { font-size: 12px; color: var(--muted); margin: -6px 0 16px; }
/* ===== games: 뷰 전환 탭 ===== */
.view-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 18px; }
.view-tabs .tab {
padding: 10px 18px; font-size: 15px; font-weight: 700; color: var(--muted);
text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.view-tabs .tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.view-tabs .tab:hover { color: var(--accent); }
/* ===== 경기별 뷰 ===== */
.match-list-v { display: flex; flex-direction: column; gap: 10px; }
.mrow {
display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 14px 16px;
}
/* 왼쪽: 시간 중심 */
.mcol-time { text-align: center; min-width: 60px; padding-right: 14px; border-right: 1px solid var(--border); }
.m-day { font-size: 12px; color: var(--muted); font-weight: 600; }
.m-time { font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mcol-time.soon .m-time, .mcol-time.soon .m-day { color: var(--up); } /* 임박 강조 */
/* 가운데: 종목/리그(작게) + 홈vs원정(크게) */
.mcol-mid { min-width: 0; }
.mleague { font-size: 12px; margin-bottom: 3px; }
.mteams { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.mteams .vs { color: var(--muted); font-weight: 600; font-size: 12px; margin: 0 6px; }
/* 오른쪽: 연관게임 버튼 */
.mcol-games { min-width: 0; }
/* 연관게임: 아이콘 버튼 + 호버/포커스 툴팁 */
.rel-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-btn-wrap { position: relative; display: inline-flex; }
.rel-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border);
font-size: 14px; font-weight: 800; letter-spacing: -.03em; text-decoration: none;
transition: transform .08s ease, background .08s ease, color .08s ease;
}
.rel-btn:hover, .rel-btn:focus-visible { transform: translateY(-2px); outline: none; }
.rel-btn.fam-proto {
color: var(--up);
background: color-mix(in srgb, var(--up) 12%, var(--card));
border-color: color-mix(in srgb, var(--up) 35%, var(--border));
}
.rel-btn.fam-proto:hover, .rel-btn.fam-proto:focus-visible { background: var(--up); color: #fff; }
.rel-btn.fam-toto {
color: var(--down);
background: color-mix(in srgb, var(--down) 12%, var(--card));
border-color: color-mix(in srgb, var(--down) 35%, var(--border));
}
.rel-btn.fam-toto:hover, .rel-btn.fam-toto:focus-visible { background: var(--down); color: #fff; }
.rel-tip {
/* 버튼이 행 오른쪽 끝이라 우측 기준으로 왼쪽으로 펼침(화면 밖 안 잘리게) + 줄바꿈 허용 */
position: absolute; bottom: calc(100% + 9px); right: 0; left: auto;
background: var(--text); color: var(--bg); font-size: 12px; font-weight: 600; line-height: 1.45; text-align: left;
padding: 7px 11px; border-radius: 8px; white-space: normal; width: max-content; max-width: min(260px, 78vw);
box-shadow: 0 4px 14px rgba(0,0,0,.18);
opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; z-index: 30;
}
.rel-tip::after {
content: ""; position: absolute; top: 100%; right: 15px;
border: 5px solid transparent; border-top-color: var(--text);
}
.rel-btn-wrap:hover .rel-tip, .rel-btn-wrap:focus-within .rel-tip { opacity: 1; visibility: visible; }
/* ===== games: 필터 칩 ===== */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.chip {
padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
background: var(--card); color: var(--muted); border: 1px solid var(--border); cursor: pointer;
}
.chip.on { color: #fff; background: var(--accent); border-color: var(--accent); }
@media (hover: hover) { .chip:hover { color: #fff; background: var(--accent); border-color: var(--accent); } }
.mini-select, .mini-input {
padding: 7px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px;
background: var(--bg); color: var(--text); width: auto;
}
/* 발매중/발매예정 상태 체크박스 필터 */
.status-filter { display: flex; gap: 10px; margin-bottom: 12px; }
.status-chk {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px;
font-size: 13px; font-weight: 700; color: var(--muted);
}
.status-chk.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.status-chk input { width: auto; margin: 0; accent-color: var(--accent); }
/* 발매예정 뱃지(버튼 대신) */
.upcoming-badge {
display: inline-flex; align-items: center; font-size: 12px; font-weight: 700;
color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent);
padding: 5px 11px; border-radius: 999px;
}
/* ===== games: 카드 그리드 ===== */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.game-card {
display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text);
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 16px; transition: transform .08s ease, border-color .08s ease;
}
.game-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.game-card-top { display: flex; justify-content: space-between; align-items: center; }
.game-name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.game-round { font-size: 13px; color: var(--muted); }
.game-card-bottom { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; gap: 8px; }
.countdown { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
.sell { font-size: 12px; color: var(--muted); }
/* 상태 배지 */
.badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.badge-open { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.badge-closing{ color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.badge-closed { color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, transparent); }
/* ===== 회차 상세 표 ===== */
.back-link { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.back-link:hover { color: var(--accent); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.match-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.match-table th, .match-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.match-table thead th { position: sticky; top: 0; background: var(--bg); font-size: 12px; color: var(--muted); z-index: 1; }
.match-table .ta-left { text-align: left; }
.match-table .num { color: var(--muted); font-weight: 700; }
.match-table .date { color: var(--muted); font-size: 12px; }
.match-table .odd { font-weight: 800; font-variant-numeric: tabular-nums; }
/* 배당 칸 결과 라벨(승/패·언더/오버·홀/짝) + 무 배당 */
.match-table .odd .ol { display: block; font-size: 10px; font-weight: 600; color: var(--muted); margin-bottom: 1px; letter-spacing: .02em; }
.match-table .odd b { font-weight: 800; }
.match-table .odd.mid { line-height: 1.25; }
/* 프로토 투표율(국내배당 승/무/패 배당 아래 %) + 스택바 서브행(승/무/패 아래) */
.w1l-table .odd .vpct { display: block; font-size: 10px; font-weight: 600; color: var(--muted); margin-top: 1px; letter-spacing: .02em; }
.w1l-table .pvbar-cell { padding: 0 8px 6px; }
.w1l-table .pvbar-cell .vbar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--border); }
.w1l-table .pvbar-cell .vbar .seg.win { background: var(--up); }
.w1l-table .pvbar-cell .vbar .seg.draw { background: #8a9099; }
.w1l-table .pvbar-cell .vbar .seg.lose { background: var(--down); }
/* 프로토 바 있는 경기: 구분선을 바 아래로(배당행-바 사이 선 제거) */
.w1l-table tbody.mgrp:has(.pvbar-row) > tr:first-child > td { border-bottom: none; }
.w1l-table tbody.mgrp > tr.pvbar-row > td { border-bottom: 1px solid var(--border); }
/* 핸디/언더오버 기준값 태그 */
.odds-tag { display: inline-block; font-size: 10px; font-weight: 700; color: var(--muted); background: var(--border); border-radius: 4px; padding: 1px 5px; margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 직전 대비 배당 변동 화살표(betman ▲▼): 상승=빨강 / 하락=파랑(한국 관례) */
.match-table .chg { font-size: 9px; margin-left: 2px; line-height: 1; vertical-align: 1px; }
.match-table .chg.up { color: var(--up); }
.match-table .chg.down { color: var(--down); }
/* 배당 변동 이력 버튼(흐름) */
.match-table .flow { padding: 4px; }
.flow-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--accent); cursor: pointer; }
.flow-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.anal-btn { display: inline-flex; align-items: center; justify-content: center; padding: 3px 9px; border: 1px solid var(--accent); border-radius: 6px; background: var(--card); color: var(--accent); font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.anal-btn:hover { background: var(--accent); color: #fff; }
.w1l-table .c-anal { width: 46px; }
/* 배당 변동 이력 팝업 */
.odds-pop-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, #000 45%, transparent); }
.odds-pop { width: min(360px, 94vw); background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 40px color-mix(in srgb, #000 30%, transparent); overflow: hidden; }
.odds-pop-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.odds-pop-head strong { font-size: 14px; font-weight: 700; word-break: keep-all; }
.odds-pop-x { margin-left: auto; flex: none; width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
.odds-pop-x:hover { background: var(--bg); color: var(--text); }
.odds-pop-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.odds-pop-table th, .odds-pop-table td { padding: 9px 10px; text-align: center; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.odds-pop-table thead th { background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 700; }
.odds-pop-table td:first-child, .odds-pop-table th:first-child { color: var(--muted); font-weight: 700; }
.odds-pop-table tr.cur td { font-weight: 800; color: var(--accent); }
.odds-pop-table .handi-cell { color: var(--text); font-weight: 700; }
.odds-pop-table .chg { font-size: 9px; margin-left: 3px; vertical-align: 1px; }
.odds-pop-table .chg.up { color: var(--up); } /* 배당·기준점 상승=빨강 */
.odds-pop-table .chg.down { color: var(--down); } /* 하락=파랑 */
.odds-pop-table .chg.neutral { color: var(--muted); }
.match-table .bettype { font-size: 12px; color: var(--muted); }
.teams { font-size: 13px; }
.teams .vs { color: var(--muted); font-weight: 600; margin: 0 4px; font-size: 11px; }
.league { font-size: 11px; color: var(--muted); margin-top: 2px; }
.match-table .res { font-weight: 700; }
/* 경기 그룹 얼룩말(같은 경기 = 같은 배경), 은은하게 · 다크/라이트 공용 */
.match-table tbody tr.grp-b > td { background: color-mix(in srgb, var(--muted) 7%, transparent); }
.match-table tbody tr.grp-top > td { border-top: 2px solid var(--border); }
.match-table tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 9%, transparent); }
/* ===== 승1패 조합 계산기 ===== */
.calc-pool { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 14px; }
.pool-stat { display: flex; flex-direction: column; }
.pool-stat .k { font-size: 11px; color: var(--muted); font-weight: 600; }
.pool-stat .v { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
/* 벳인포식 대상경기 표 (투표현황 + 배당 + 팀 + 선택 + 결과) */
.w1l-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 800px; margin-bottom: 14px; }
.w1l-table th, .w1l-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.w1l-table thead th { background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.3; }
.w1l-table .ta-left { text-align: left; }
.w1l-table .num { color: var(--muted); font-weight: 700; white-space: nowrap; }
.w1l-table .num .date { font-size: 10px; font-weight: 500; margin-top: 2px; }
/* 투표 게이지: 칸을 꽉 채운 막대 + 그 위에 %·투표수 */
.vcell { min-width: 76px; padding: 3px 4px; }
.vg { position: relative; height: 36px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.vg-fill { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; background: color-mix(in srgb, var(--hot) 26%, transparent); transition: width .2s; }
.vg-pct { position: relative; z-index: 1; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; }
.vg-cnt { position: relative; z-index: 1; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.05; }
.vcell.hot .vg-pct { color: var(--hot); } /* 최다 득표만 % 글자 진한 주황 */
.w1l-table .allot { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 11px; }
.w1l-table .teams { min-width: 130px; }
.w1l-table .teams .league { font-size: 10px; color: var(--muted); margin-bottom: 1px; }
.w1l-table .teams .vs { color: var(--muted); font-size: 10px; margin: 0 3px; }
/* 예상결과선택 — 큰 버튼(betman식): 선택=진파랑+체크, 적중(실제결과)=연파랑 */
.w1l-table .selcol { padding: 4px 3px; }
.w1l-table .c-combo { width: 46px; }
.selbig {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 100%; min-width: 46px; height: 40px; border: 1px solid var(--border); border-radius: 7px;
background: var(--card); color: var(--muted); font-weight: 800; font-size: 14px; line-height: 1; cursor: pointer; font-family: inherit;
transition: background .12s, border-color .12s, color .12s;
}
@media (hover: hover) { .selbig:hover { border-color: var(--muted); } }
/* 실제 결과 = 20% 투명 빨강 오버레이(background-image라 .on의 파랑 background-color 위에 겹쳐짐 → 정답은 보라빛) */
.selbig.hit { background-image: linear-gradient(color-mix(in srgb, var(--up) 20%, transparent), color-mix(in srgb, var(--up) 20%, transparent)); border-color: color-mix(in srgb, var(--up) 50%, var(--border)); }
.selbig.on { background-color: #1a5fb4; border-color: #1a5fb4; color: #fff; } /* 내 선택 = 진파랑 */
/* 실제 결과 셀에 ✓ 체크(우측 상단). 적특이면 3셀 모두 표시 = 전부 적중 */
.selbig.hit::after {
content: "✓"; position: absolute; top: 1px; right: 3px;
font-size: 11px; font-weight: 900; line-height: 1; color: var(--up); pointer-events: none;
}
.selbig.on.hit::after { color: #fff; } /* 내가 맞춘 셀(파랑 배경) 위에선 흰 체크 */
.combo-x { text-align: center; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.w1l-table tfoot .total-combo td { background: var(--bg); font-weight: 800; border-top: 2px solid var(--border); padding: 10px; }
.w1l-table tfoot .total-combo td:first-child { text-align: right; }
.w1l-table tfoot .total-combo .combo-x { color: var(--accent); font-size: 15px; }
.w1l-table .res { font-weight: 700; }
.calc-summary { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 12px; font-size: 14px; }
.calc-summary strong { font-size: 17px; font-weight: 800; }
.combo-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 420px; }
.combo-table th, .combo-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.combo-table thead th { background: var(--bg); color: var(--muted); font-size: 12px; }
.combo-table .ta-left { text-align: left; }
.combo-table .num { color: var(--muted); font-weight: 700; }
.combo-table .odd { font-weight: 800; font-variant-numeric: tabular-nums; }
/* 이미지식 조합 그리드: No | 예상인원 | 예상적중금 | 1..14 색 아이콘 */
.combo-grid { min-width: 620px; }
.combo-grid th, .combo-grid td { padding: 6px 4px; }
.combo-grid .c-no { width: 34px; }
.combo-grid .c-hit { width: 84px; }
.combo-grid .c-pay { width: 116px; }
.combo-grid .c-g { width: 26px; padding-left: 2px; padding-right: 2px; }
.combo-grid .hit { font-variant-numeric: tabular-nums; color: var(--fg); }
.combo-grid .pk { padding: 4px 2px; }
.combo-grid .pk-none { color: var(--border); }
.combo-grid .pk-i {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 5px; font-size: 12px; font-weight: 800; color: #fff; line-height: 1;
}
.combo-grid .pk-i.w { background: var(--down); } /* 승 파랑 */
.combo-grid .pk-i.d { background: var(--accent); } /* 무 초록 */
.combo-grid .pk-i.l { background: var(--hot); } /* 패 주황 */
.combo-grid .pk-i.void { background: var(--muted); } /* 적특(취소) */
/* 결과 배지(마감 회차) — 승/무/패/적특 */
/* 결과 배지 = 선택 버튼(.selbtn)과 동일 크기(40×40) */
.res-i { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 9px; font-size: 16px; font-weight: 800; color: #fff; line-height: 1; }
.res-i.w { background: var(--down); }
.res-i.d { background: var(--accent); }
.res-i.l { background: var(--hot); }
.res-i.void { background: var(--muted); }
/* 당첨자수 필터 */
.combo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.combo-head .calc-subh { margin: 0; }
.hit-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.hit-filter select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--fg); cursor: pointer; }
.combo-empty { padding: 12px 4px; font-size: 13px; }
/* 발매·환급 내역(마감 회차 확정 지급) */
.payout-card h2 { font-size: 16px; margin-bottom: 12px; }
.payout-top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.payout-top .pt-item { flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.payout-top .pt-item .k { font-size: 11px; color: var(--muted); }
.payout-top .pt-item .v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.payout-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.payout-table th, .payout-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.payout-table thead th { background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 700; text-align: right; }
.payout-table thead th:first-child, .payout-table .rk { text-align: center; }
.payout-table .rk { font-weight: 800; }
.payout-table .num { font-variant-numeric: tabular-nums; }
.payout-table tr.sum td { background: color-mix(in srgb, var(--accent) 7%, transparent); font-weight: 800; border-top: 2px solid var(--border); }
/* 승무패 계산기 — 재설계(직관/현대) */
.calc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.calc-top h2 { margin: 0; }
.calc-actions { display: flex; gap: 6px; }
.calc-actions-bar { justify-content: flex-end; margin: 10px 0 8px; }
.ghost.sm { padding: 6px 12px; font-size: 13px; }
.calc-result { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; background: var(--bg); }
.calc-result.done { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.calc-result .cr-line { font-size: 14px; }
.calc-result .cr-line .cr-cnt { font-size: 18px; font-weight: 800; color: var(--accent); }
.calc-result .cr-line .cr-k { font-weight: 700; }
.cr-grid { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: flex-end; }
.cr-item { display: flex; flex-direction: column; gap: 2px; }
.cr-item .cr-k { font-size: 12px; color: var(--muted); font-weight: 600; }
.cr-item .cr-v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cr-item.hero .cr-big { font-size: 28px; font-weight: 900; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.cr-item.hero.win .cr-big { color: var(--up); } /* 당첨 등수 강조(빨강) */
/* 내 등수 테이블(마감 회차) */
.rank-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; min-width: 320px; }
.rank-table th, .rank-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.rank-table thead th { background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 700; }
.rank-table th:first-child, .rank-table .rk { text-align: center; font-weight: 800; }
.rank-table .num { font-variant-numeric: tabular-nums; }
.rank-table tr.hit td { background: color-mix(in srgb, var(--up) 8%, transparent); color: var(--up); }
.rank-table tr.sum td { background: color-mix(in srgb, var(--accent) 8%, transparent); font-weight: 800; border-top: 2px solid var(--border); }
.calc-subh { font-size: 14px; margin: 4px 0 8px; }
.w1l-table .team { min-width: 92px; font-size: 13px; }
.w1l-table .team.ta-right { text-align: right; }
.w1l-table .team .league { font-size: 10px; color: var(--muted); margin-bottom: 1px; }
/* 홈 | vs칸 | 원정: 가운데 전용 칸. 기본 "vs", 마감 회차는 스코어 강조 */
.w1l-table .c-vs { width: 48px; }
.w1l-table .vscell { text-align: center; white-space: nowrap; padding: 0 4px; }
.w1l-table .vscell .vs { display: inline-block; font-size: 11px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.w1l-table .vscell .vs.has-score { color: var(--fg); font-weight: 800; font-size: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
.w1l-table .vscell .vs.has-score .col { color: var(--muted); margin: 0 1px; font-weight: 600; }
.w1l-table .vscell .vs.has-score .win { color: var(--up); } /* 이긴 팀 스코어 빨강 */
.w1l-table .vscell .vs.has-score.prov { border-style: dashed; border-color: var(--hot); } /* 잠정(프로토 대입) */
.w1l-table .vscell .prov-tag { margin-top: 2px; font-size: 9px; font-weight: 700; color: var(--hot); }
.w1l-table .allot .sl { color: var(--muted); margin: 0 2px; }
.w1l-table tr.picked > td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.w1l-table .vcell.on .vg { box-shadow: inset 0 0 0 2px var(--accent); border-color: var(--accent); }
.w1l-table .selcell { white-space: nowrap; }
.w1l-table .odd { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.w1l-table .odd .chg { font-size: 9px; margin-left: 1px; vertical-align: 1px; }
.w1l-table .chg.up { color: var(--up); }
.w1l-table .chg.down { color: var(--down); }
.w1l-table td.date { font-size: 11px; color: var(--muted); white-space: nowrap; }
.w1l-table td.num { font-weight: 800; color: var(--muted); }
.w1l-table thead .subhead th { font-size: 10px; padding: 2px 6px; font-weight: 600; }
.w1l-table .flow { padding: 3px; }
.w1l-table .c-flow { width: 34px; }
.combo-picks { font-weight: 700; letter-spacing: 1px; }
/* ===== 발매중/확정 승1패 표(w1l-table) 모바일 카드 뷰 =====
16열 표는 좁은 화면에서 승/1/패 버튼이 화면 밖으로 밀린다.
데스크톱: 표만 보임(.w1l-cards 숨김) / 좁은 화면: 카드만 보임(표 숨김).
같은 데이터·함수를 쓰므로 선택·계산이 그대로 연동된다. */
.w1l-cards { display: none; } /* 기본(데스크톱)에선 카드 숨김 */
@media (max-width: 720px) {
.card calc-section, .calc-section { } /* noop, 명시용 */
.calc-section .w1l-table { display: none; } /* 좁으면 표 숨김 */
.calc-section .w1l-cards { display: block; } /* 카드 노출 */
.w1lc { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--card, var(--bg)); }
.w1lc.picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.w1lc-top { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.w1lc-no { font-weight: 800; color: var(--fg); }
.w1lc-date { flex: 1; }
.w1lc-top .res-i { margin-left: auto; }
.w1lc-teams { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; margin-bottom: 10px; flex-wrap: wrap; }
.w1lc-teams .vs { font-size: 12px; color: var(--muted); font-weight: 600; }
.w1lc-score { font-weight: 800; font-variant-numeric: tabular-nums; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; }
.w1lc-score.prov { border-style: dashed; border-color: var(--hot); }
.w1lc-score .win { color: var(--up); }
.w1lc-teams .prov-tag { font-size: 9px; font-weight: 700; color: var(--hot); }
/* 승/1/패 선택 버튼 3칸 — 각 버튼에 라벨·배당·투표% 세로로 */
.w1lc-sel { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.w1lc-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 8px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
color: var(--text); /* 전역 button 흰글자 상속 차단(배경만 재정의하면 흰배경+흰글자) */
cursor: pointer; min-height: 56px; transition: background .12s, border-color .12s, color .12s; }
.w1lc-lab { font-size: 14px; font-weight: 800; }
.w1lc-odd { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.w1lc-vp { font-size: 10px; color: var(--muted); }
.w1lc-btn.fav { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } /* 최다 득표 */
.w1lc-btn.on { background-color: #1a5fb4; border-color: #1a5fb4; color: #fff; } /* 내 선택 */
.w1lc-btn.on .w1lc-vp { color: rgba(255,255,255,.7); }
.w1lc-btn.hit { background-image: linear-gradient(color-mix(in srgb, var(--up) 20%, transparent), color-mix(in srgb, var(--up) 20%, transparent)); }
.w1lc-btn.hit::after { content: "✓"; position: absolute; top: 2px; right: 4px; font-size: 11px; font-weight: 900; color: var(--up); }
.w1lc-total { text-align: right; font-size: 13px; color: var(--muted); padding: 8px 4px 2px; }
.w1lc-total b { color: var(--fg); font-variant-numeric: tabular-nums; }
}
/* 투표비중 바: 승=빨강 / 무·1=회색 / 패=파랑 (한국 관례) */
.vote-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--border); min-width: 180px; }
.vote-bar .seg { height: 100%; }
.seg-win { background: var(--up); }
.seg-draw { background: var(--muted); }
.seg-lose { background: var(--down); }
.vote-pct { font-size: 11px; margin-top: 3px; display: flex; gap: 8px; font-variant-numeric: tabular-nums; }
.c-win { color: var(--up); font-weight: 700; }
.c-draw { color: var(--muted); font-weight: 700; }
.c-lose { color: var(--down); font-weight: 700; }
@media (max-width: 520px) {
.tool-grid { grid-template-columns: 1fr; }
.result { grid-template-columns: 1fr; }
.match-row { grid-template-columns: 28px 1fr; }
.match-row .cancel-toggle { grid-column: 2; justify-content: flex-start; }
.site-nav a { padding: 7px 10px; }
.games-grid { grid-template-columns: 1fr 1fr; }
.mrow {
grid-template-columns: auto 1fr; gap: 10px 14px;
grid-template-areas: "time mid" "games games";
}
.mcol-time { grid-area: time; }
.mcol-mid { grid-area: mid; }
.mcol-games { grid-area: games; border-top: 1px solid var(--border); padding-top: 10px; }
.view-tabs .tab { flex: 1; text-align: center; padding: 10px 8px; }
}
@media (max-width: 380px) { .games-grid { grid-template-columns: 1fr; } }
/* 초협소(폴드 접힘 ~280px 포함): 네비 축약 + 헤더 압축 */
@media (max-width: 480px) {
.nav-full { display: none; }
.nav-short { display: inline; }
.site-nav { gap: 2px; }
.site-nav a { padding: 7px 8px; font-size: 13px; }
h1 { font-size: 21px; word-break: keep-all; }
}
/* 초협소(폴드 접힘 등): 풀 로고 대신 심볼만 */
@media (max-width: 319px) {
.brand { width: 28px; background-image: url('/images/symbol.svg'); }
}
/* ===== 경기결과 ===== */
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.result-card { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
.result-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.rc-head { display: flex; align-items: center; gap: 8px; }
.rc-head strong { font-size: 15px; font-weight: 700; }
.rc-head .tag { margin-left: auto; }
.rc-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: 13px; }
/* ── 회차 선택(년/회차 드롭다운) ── */
.result-picker { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; }
.round-picker { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.result-picker .rp-label { font-weight: 800; font-size: 15px; }
.result-picker .rp-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.rp-select { width: auto; min-width: 78px; padding: 7px 10px; font-size: 14px; }
.rp-unit { font-size: 14px; color: var(--muted); margin-right: 6px; }
.round-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.round-head h1 { margin: 0; }
.round-head .result-picker { margin: 0 0 0 auto; }
.round-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); margin: 0 0 16px; align-items: center; }
.round-stats b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.round-stats .deadline { font-weight: 800; color: var(--accent); }
.round-stats .deadline.soon { color: var(--hot); }
.round-stats .deadline.cancel { color: #dc2626; }
.round-period { font-size: 13px; color: var(--muted); margin: 2px 0 10px; }
.round-period b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 전회차 이월금 태그 — 상금이 커지는 정보라 눈에 띄게(호박색 배경) */
.round-stats .carry-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px;
background: color-mix(in srgb, var(--hot) 14%, transparent); color: var(--hot); font-weight: 700; }
.round-stats .carry-tag b { color: var(--hot); }
.round-stats .carry-tag .carry-final { font-weight: 700; opacity: .85; }
/* 결과/발매중 회차 상단 다음 마감 카운트다운 */
.result-deadline { margin: -4px 0 12px; font-weight: 800; font-size: 14px; color: var(--accent); }
.result-deadline.soon { color: var(--hot); }
.filter-bar.sub { margin-bottom: 12px; }
/* ── betman식 결과표 ── */
/* 종목별 탭(표 바로 위) */
.sport-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.sport-tab { padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.sport-tab:hover { color: var(--text); border-color: var(--muted); }
.sport-tab.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.result-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 820px; }
.result-table th, .result-table td { padding: 6px 7px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.result-table thead th { position: sticky; top: 0; background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 700; z-index: 1; }
.result-table .ta-left { text-align: left; }
.result-table .ta-right { text-align: right; }
.result-table tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.result-table tbody.grp-top > tr:first-child > td { border-top: 7px solid var(--bg); } /* 경기 그룹 사이 간격 */
/* 경기당 tbody = [배당행 orow] + [투표비중 바 vbar-row]. 둘 사이 경계선 제거, 분리선은 바 아래에 */
.result-table tbody.mgrp > tr.orow > td { border-bottom: none; }
.result-table tr.vbar-row > td { padding: 0; border-bottom: 1px solid var(--border); }
.result-table tr.vbar-row .vbar-cell { padding: 0 7px 5px; }
.vbar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--border); }
.vbar .seg { height: 100%; }
.vbar .seg.win { background: var(--up); } /* 승 = 빨강(좌) */
.vbar .seg.draw { background: #8a9099; } /* 무/1 = 회색(중) */
.vbar .seg.lose { background: var(--down); } /* 패 = 파랑(우) */
.result-table .num { color: var(--muted); font-weight: 800; }
.result-table .gicon { font-size: 15px; }
.result-table .date { color: var(--muted); font-size: 11px; line-height: 1.25; }
.result-table .date .d { display: block; }
.result-table .date .t { display: block; font-size: 10px; opacity: .85; }
.result-table .team-cell { font-weight: 700; max-width: 128px; overflow: hidden; text-overflow: ellipsis; }
.result-table .odd { font-weight: 800; font-variant-numeric: tabular-nums; }
.result-table .odd.hit { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 4px; }
.result-table .odd .chg { font-size: 9px; margin-left: 2px; vertical-align: 1px; }
.result-table .odd .vpct { display: block; font-size: 10px; font-weight: 600; color: var(--muted); margin-top: 1px; letter-spacing: .02em; }
.round-kpi { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.round-kpi .kpi { flex: 1 1 auto; min-width: 96px; display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.round-kpi .kpi .k { font-size: 11px; font-weight: 700; color: var(--muted); }
.round-kpi .kpi b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.round-kpi .kpi .sub { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round-kpi .kpi.up b { color: var(--hot); }
.upset-tag { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 4px; font-size: 10px; font-weight: 800; color: #fff; background: var(--hot); vertical-align: 1px; white-space: nowrap; }
.upset-tag.t2 { background: #e11d48; }
.upset-tag.t3 { background: #7c1d1d; box-shadow: inset 0 0 0 1px #f59e0b; }
.upset-report { border: 1px solid var(--border); border-left: 3px solid var(--hot); border-radius: 8px; padding: 11px 14px; margin: 0 0 14px; background: var(--card); }
.upset-report .ur-head { font-weight: 800; font-size: 14px; margin: 0 0 6px; }
.upset-report .ur-line { font-size: 13px; line-height: 1.65; margin: 3px 0; color: var(--text); }
.upset-report .ur-line b { font-weight: 800; color: var(--hot); }
.upset-report .ur-line.t2 b { color: #e11d48; }
.upset-report .ur-line.t3 b { color: #b91c1c; }
.upset-report .ur-more { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.chk-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer; }
.chk-inline input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.result-table th.sort-th { padding: 3px 6px; }
.result-table .sort-btn { display: block; width: 100%; background: none; border: none; cursor: pointer; color: var(--muted); font-family: inherit; font-weight: 700; font-size: 12px; padding: 1px 2px; line-height: 1.35; white-space: nowrap; }
.result-table .sort-btn.sub { font-size: 10px; font-weight: 600; }
.result-table .sort-btn:hover { color: var(--text); }
.result-table .sort-btn.on { color: var(--accent); }
.result-table .chg.up { color: var(--up); }
.result-table .chg.down { color: var(--down); }
.result-table .flow-th, .result-table .flow-col { width: 34px; padding: 4px; }
.flow-mini { border: none; background: none; color: var(--accent); cursor: pointer; padding: 0; vertical-align: middle; line-height: 0; }
.flow-mini:hover { color: var(--accent-dark); }
.an-mini { display: inline-block; margin-left: 4px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; font-size: 10.5px; font-weight: 800; color: var(--accent); text-decoration: none; vertical-align: middle; }
.an-mini:hover { background: var(--accent); color: #fff; }
/* 리그·분류 배지 */
.lg-badge { display: inline-block; max-width: 84px; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 800; color: #fff; background: var(--hot); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.cat-badge { display: inline-block; min-width: 42px; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; color: #fff; }
.cat-badge.c-normal { background: #8a9099; }
.cat-badge.c-w1l, .cat-badge.c-wdl { background: #2fa84f; }
.cat-badge.c-handi { background: #3d7fd6; }
.cat-badge.c-uo { background: #2f9bb5; }
.cat-badge.c-sum { background: #31b0c8; }
.cat-badge.c-etc { background: #6b7280; } /* 더블찬스·승부식 기타 등 기타 유형 */
/* 스코어 박스 */
.vs-cell { min-width: 150px; }
.sc-pair { display: inline-flex; align-items: center; gap: 6px; }
.scorebox { display: inline-block; min-width: 46px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--card); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--down); }
.scorebox.wide { min-width: 104px; }
.vs-cell .vs { color: var(--muted); font-size: 11px; font-weight: 600; }
/* 결과 배지: 승쪽=파랑 / 패쪽=주황 / 무=회색 / 적특=흐림 (betman식) */
.res-badge { display: inline-block; min-width: 30px; padding: 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 800; color: #fff; }
.res-badge.r-win { background: var(--down); } /* 승·언더·홀 = 파랑 */
.res-badge.r-lose { background: var(--hot); } /* 패·오버·짝 = 주황 */
.res-badge.r-draw { color: var(--text); background: var(--border); }
.res-badge.void { color: var(--muted); background: var(--bg); border: 1px solid var(--border); }
.res-badge.pending { color: var(--muted); background: var(--bg); border: 1px dashed var(--border); }
.live-tag { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: var(--accent); padding: 2px 9px; border-radius: 999px; vertical-align: middle; }
.sched-tag { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: #6b7280; padding: 2px 9px; border-radius: 999px; vertical-align: middle; }
/* 발매예정 미리보기 패널(/proto) */
.sched-preview { padding: 20px; text-align: center; }
.sched-preview .sp-count { font-size: 18px; font-weight: 800; color: var(--accent); margin-bottom: 14px; }
.sched-preview .sp-times { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 12px; }
.sched-preview .sp-times > div { min-width: 160px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.sched-preview .sp-times .k { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.sched-preview .sp-times b { font-size: 15px; font-variant-numeric: tabular-nums; }
/* ===== 프로토 기록식(G102) 표시 ===== */
.rec-game { padding: 0; margin-bottom: 12px; overflow: hidden; }
.rec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border); }
.rec-head .rec-icon { font-size: 18px; }
.rec-head .rec-bet { font-weight: 800; font-size: 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.rec-head .rec-subj { font-weight: 700; font-size: 14px; }
.rec-head .rec-date { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.rec-head .rec-void { margin-left: auto; font-size: 12px; font-weight: 800; color: #b45309; background: color-mix(in srgb, #f59e0b 18%, transparent); padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.rec-head .rec-pending { margin-left: auto; font-size: 12px; font-weight: 800; color: #6366f1; background: color-mix(in srgb, #6366f1 15%, transparent); padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.rec-head .rec-void + .rec-date, .rec-head .rec-pending + .rec-date { margin-left: 8px; }
.rec-game.is-void { opacity: 0.72; }
.rec-cancel { padding: 14px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.rec-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.rec-banner.scheduled { background: color-mix(in srgb, #6366f1 12%, transparent); border: 1px solid color-mix(in srgb, #6366f1 40%, transparent); }
.rec-banner.selling { background: color-mix(in srgb, #e11d48 10%, transparent); border: 1px solid color-mix(in srgb, #e11d48 35%, transparent); }
.rec-banner .rb-label { font-weight: 800; }
.rec-banner .rb-time { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; }
.rec-banner .rb-note { margin-left: auto; font-size: 12px; color: var(--muted); }
.rec-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 12px 14px; }
.rec-opt { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: 13px; }
.rec-opt .ro-no { min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--muted); background: var(--bg); border-radius: 5px; }
.rec-opt .ro-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-opt .ro-allot { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.rec-opt.win { border-color: var(--up); background: color-mix(in srgb, var(--up) 10%, var(--card)); }
.rec-opt.win .ro-allot { color: var(--up); }
.rec-opt .ro-win { font-size: 10px; font-weight: 800; color: #fff; background: var(--up); padding: 1px 6px; border-radius: 999px; }
@media (max-width: 480px) { .rec-opts { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
/* 기록식 점수형 게임 — 홈승/무/원정승 3열 */
.rec-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px; }
.rsg-col { display: flex; flex-direction: column; gap: 5px; }
.rsg-head { font-size: 12px; font-weight: 800; text-align: center; padding: 5px; border-radius: 6px; color: #fff; }
.rsg-head.home { background: var(--up); }
.rsg-head.draw { background: #8a9099; }
.rsg-head.away { background: var(--down); }
.rsg-col .rec-opt { justify-content: space-between; }
.rsg-empty { text-align: center; color: var(--muted); padding: 8px; }
@media (max-width: 560px) { .rec-score { gap: 5px; } .rsg-head { font-size: 10px; } .rec-score .rec-opt { padding: 5px 7px; font-size: 12px; } }
/* 기록식 게임번호(4자릿수) */
.rec-head .rec-no { font-size: 12px; font-weight: 800; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
/* ── 축구토토 매치 6×6 스코어 격자 ───────────────────────────────── */
.match-featured { padding: 14px 16px; }
.match-featured .mf-teams { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.match-featured .mf-teams .mf-vs { color: var(--muted); font-weight: 600; font-size: 13px; margin: 0 6px; }
.match-featured .mf-meta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 13px; }
.match-featured .mf-meta .mf-score { color: var(--accent); font-weight: 700; }
.mg-legend { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.mg-legend .mg-sw-top { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 2px solid var(--accent); vertical-align: -1px; }
.mg-card { padding: 12px 14px 14px; }
.mg-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.mg-head .mg-title { font-size: 15px; font-weight: 800; color: var(--accent); }
.mg-head .mg-topnote { margin-left: auto; font-size: 12px; color: var(--muted); }
.mg-head .mg-topnote b { color: var(--text); font-variant-numeric: tabular-nums; }
.score-grid { border-collapse: separate; border-spacing: 3px; width: 100%; table-layout: fixed; }
.score-grid th { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; padding: 0; }
.score-grid thead th { padding-bottom: 2px; }
.score-grid tbody th { width: 26px; }
.score-grid .mg-corner { font-size: 9px; line-height: 1.05; color: var(--muted); white-space: nowrap; }
.score-grid .mg-corner .mg-h { color: var(--text); }
.score-grid .mg-corner .mg-slash { opacity: .5; }
.score-grid .mg-plus { font-size: 9px; vertical-align: super; color: var(--muted); }
.score-grid .mg-cell {
position: relative; text-align: center; border-radius: 7px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--hot) calc(var(--mg-shade, 0) * 62%), var(--card));
padding: 6px 2px 5px; min-width: 44px; height: 46px; vertical-align: middle;
transition: transform .08s;
}
.score-grid .mg-cell .mg-pct {
display: block; font-size: 13px; font-weight: 800; line-height: 1;
font-variant-numeric: tabular-nums;
color: color-mix(in srgb, var(--text) calc(50% + var(--mg-shade, 0) * 50%), var(--muted));
}
.score-grid .mg-cell .mg-pct i { font-style: normal; font-size: 9px; font-weight: 600; opacity: .7; margin-left: 1px; }
.score-grid .mg-cell .mg-odd {
display: block; margin-top: 3px; font-size: 10px; line-height: 1;
color: var(--muted); font-variant-numeric: tabular-nums;
}
.score-grid .mg-cell .mg-odd i { font-style: normal; font-size: 8px; opacity: .65; margin-left: 1px; }
.score-grid .mg-cell.mg-top {
border: 2px solid var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.score-grid .mg-cell.mg-top .mg-pct { color: var(--accent-dark); }
/* 좁은 화면 — 격자는 table-scroll 안에서 가로 스크롤. 셀 축소. */
@media (max-width: 560px) {
.score-grid { border-spacing: 2px; }
.score-grid .mg-cell { min-width: 40px; height: 42px; padding: 5px 1px 4px; }
.score-grid .mg-cell .mg-pct { font-size: 12px; }
.score-grid tbody th { width: 20px; font-size: 11px; }
.match-featured .mf-teams { font-size: 16px; }
.mg-card { padding: 10px 10px 12px; }
}
/* ── 매치 결합(전반×최종) 2격자 레이아웃 + 인터랙션 ───────────────── */
.mg-intro { margin: 0 0 12px; }
.mg-grid-wrap { display: flex; gap: 18px; align-items: flex-start; }
.mg-grid-wrap .mg-col { flex: 1 1 0; min-width: 0; }
.mg-grid-wrap .mg-head { min-height: 22px; }
.mg-reset { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.mg-reset:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
/* 전반 셀 클릭 가능 */
.score-grid.mg-selectable .mg-cell.mg-click { cursor: pointer; }
.score-grid.mg-selectable .mg-cell.mg-click:hover { border-color: var(--accent); }
.mg-cell.mg-dim { opacity: .4; }
.mg-cell.mg-sel {
border: 2px solid var(--accent) !important;
background: color-mix(in srgb, var(--accent) 22%, var(--card)) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.mg-cell.mg-sel .mg-pct { color: var(--accent-dark); }
.mg-cell.mg-zero { opacity: .5; }
.mg-cell.mg-zero .mg-pct { color: var(--muted); }
/* 당첨 스코어 칸(마감 회차) — 승무패처럼 ✓ 체크(우측 상단) + 금색 테두리 */
.mg-cell.mg-win {
border: 2px solid #e0a010 !important;
}
.score-grid .mg-cell.mg-win::after {
content: "✓"; position: absolute; top: 0; right: 3px;
font-size: 12px; font-weight: 900; line-height: 1.1; color: #b8860b; pointer-events: none;
}
.mg-cell.mg-win .mg-pct { color: #b57e00; }
.mg-sw-win { color: #b8860b; font-weight: 900; font-size: 13px; margin-left: 8px; }
/* 좁은 화면 — 두 격자 세로 적층 */
@media (max-width: 720px) {
.mg-grid-wrap { flex-direction: column; gap: 22px; }
.mg-grid-wrap .mg-col { width: 100%; }
}
/* ── 매치 적중결과 카드(확정 회차) ───────────────────────────────── */
.mg-settle { padding: 14px 16px 16px; }
.mg-settle-h { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--accent); }
.mg-rslt { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.mg-rslt th, .mg-rslt td { border: 1px solid var(--border); padding: 8px 10px; text-align: center; font-variant-numeric: tabular-nums; }
.mg-rslt thead th { background: var(--bg); font-size: 12px; font-weight: 700; color: var(--muted); }
.mg-rslt td { font-size: 15px; font-weight: 700; }
.mg-rslt .mg-side { display: inline-block; font-size: 10px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; margin-right: 4px; }
.mg-rslt-fin { color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mg-settle-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.mg-settle-grid .mg-sec { flex: 1 1 240px; min-width: 0; }
.mg-sec-h { display: block; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.mg-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 13px; }
.mg-kv span { color: var(--muted); }
.mg-kv b { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .mg-settle-grid { gap: 8px; } .mg-settle-grid .mg-sec { flex-basis: 100%; } }
/* ── 배당 낮은순 조합 순위 스트립(가로 자유 스크롤) ─────────────── */
.mg-rank-card { padding: 12px 0 14px; }
.mg-rank-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 16px; margin-bottom: 10px; }
.mg-rank-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--accent); }
.mg-rank-title .muted { font-size: 12px; font-weight: 500; }
.mg-rank-nav { margin-left: auto; display: flex; gap: 6px; }
.mg-rank-arw, .mg-rank-jump { font-size: 12px; font-weight: 700; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); cursor: pointer; padding: 4px 9px; line-height: 1; }
.mg-rank-arw:hover, .mg-rank-jump:hover { border-color: var(--accent); color: var(--accent); }
.mg-rank-jump { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, var(--border)); }
.mg-rank-strip {
display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
padding: 2px 16px 8px; scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.mg-rank-item {
flex: 0 0 auto; width: 104px; scroll-snap-align: center;
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 9px 6px 10px; border: 1px solid var(--border); border-radius: 10px;
background: var(--card); text-align: center;
}
.mg-rank-no { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.mg-rank-no i { font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted); margin-left: 1px; }
.mg-rank-scores { width: 100%; margin: 2px 0; }
.mg-rank-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 1px 4px; font-variant-numeric: tabular-nums; }
.mg-rank-lab { font-size: 10px; color: var(--muted); }
.mg-rank-row b { font-size: 14px; font-weight: 800; }
.mg-rank-fin b { color: var(--accent-dark); }
.mg-rank-ck { font-style: normal; color: var(--up); font-weight: 900; margin-left: 2px; }
.mg-rank-odds { font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.mg-rank-odds i { font-style: normal; font-size: 9px; font-weight: 600; color: var(--muted); margin-left: 1px; }
.mg-rank-pct { font-size: 12px; font-weight: 700; color: var(--hot); font-variant-numeric: tabular-nums; }
.mg-rank-pct i { font-style: normal; font-size: 9px; opacity: .7; }
.mg-rank-cnt { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 당첨 조합 = 빨강 강조(나머지는 흰/카드 바탕) */
.mg-rank-item.mg-rank-win {
background: color-mix(in srgb, var(--up) 12%, var(--card));
border: 2px solid var(--up);
}
.mg-rank-win .mg-rank-no, .mg-rank-win .mg-rank-fin b, .mg-rank-win .mg-rank-odds { color: var(--up); }
@media (max-width: 560px) {
.mg-rank-item { width: 92px; padding: 8px 4px 9px; }
.mg-rank-row b { font-size: 13px; }
}
/* ── 순위 카드 ↔ 격자 연동(클릭 선택) ───────────────────────────── */
/* 순위에서 고른 최종 칸 = 파랑 선택 링(당첨 금색/최다 초록보다 우선 — 사용자 활성 선택) */
.score-grid .mg-cell.mg-pick {
border: 2px solid #1a5fb4 !important;
box-shadow: 0 0 0 2px color-mix(in srgb, #1a5fb4 32%, transparent);
}
.score-grid .mg-cell.mg-pick .mg-pct { color: #1a5fb4; }
/* 순위 카드 = 클릭 가능 */
.mg-rank-item { cursor: pointer; transition: border-color .1s, transform .06s; }
.mg-rank-item:hover { border-color: var(--accent); }
.mg-rank-item:active { transform: translateY(1px); }
.mg-rank-item.mg-rank-active {
border: 2px solid #1a5fb4;
box-shadow: 0 0 0 2px color-mix(in srgb, #1a5fb4 25%, transparent);
}
.mg-rank-item.mg-rank-active.mg-rank-win { border-color: var(--up); box-shadow: 0 0 0 2px color-mix(in srgb, var(--up) 30%, transparent); }
/* 최종 격자 셀도 클릭 가능(전반 선택 상태 = 조합 완성 → 순위 이동) */
.score-grid .mg-cell.mg-fclick { cursor: pointer; }
.score-grid .mg-cell.mg-fclick:hover { border-color: #1a5fb4; }
/* ═══ 초소형 화면(플립5 등 ≤480px) 여백 다이어트 — 사이트 전체 공통 ═══
wrap 16px + card 20px + 중첩카드 = 좌우 ~100px 소모로 콘텐츠가 작아 보이던 것.
여백을 줄여 콘텐츠 가용폭 +40~50px (373px 화면 기준 +15%). */
@media (max-width: 480px) {
.wrap, .page-wide .wrap, .page-narrow .wrap { padding: 0 8px; }
main.wrap { padding-top: 12px; padding-bottom: 32px; }
.card { padding: 12px 10px; margin-bottom: 12px; border-radius: 10px; }
.card .card { padding: 10px 8px; } /* 중첩 카드 추가 축소 */
h1 { font-size: 21px; margin: 6px 0 10px; }
.back-link { font-size: 13px; }
/* 승1패류 모바일 경기카드 — 내부 여백·버튼 밀도 */
.w1lc { padding: 9px 8px; margin-bottom: 7px; }
.w1lc-sel { gap: 5px; }
.w1lc-btn { padding: 9px 2px; }
.w1lc-lab { font-size: 15px; }
.w1lc-odd { font-size: 12.5px; }
/* 계산기 KPI(예상 적중금 초록박스) — 여백 축소 */
.kpi-band, .calc-kpi, .payout-box { padding: 10px 10px; }
/* 발매일정 리스트 행 */
.dl-row { padding: 10px 10px; }
/* 홈 계산기 카드 */
.home-calcs .card, .calc-card { padding: 14px 12px; }
}
/* 모바일 경기카드 게이지 2줄 — [라벨칩][바+퍼센트]. 프로토 투표율 vs 자체 판매비중을 라벨로 구분 */
.w1lc-vrow { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px; }
.w1lc-vlab { flex: 0 0 44px; text-align: center; font-size: 10.5px; font-weight: 800; border-radius: 5px;
padding: 3px 0; margin-top: 1px; }
.w1lc-vlab.vp { color: #b45309; background: #fef3c7; } /* 프로토(국내배당 짝) = 호박색 */
.w1lc-vlab.vs2 { color: #475569; background: #f1f5f9; } /* 자체 판매비중 = 회색 */
.w1lc-vbody { flex: 1 1 auto; min-width: 0; }
.w1lc-vbar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--border); }
.w1lc-vbar .seg { height: 100%; }
.w1lc-vnum { display: flex; justify-content: space-between; margin-top: 2px;
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.w1lc-vnum .c-win { color: var(--up); } .w1lc-vnum .c-draw { color: var(--muted); } .w1lc-vnum .c-lose { color: var(--down); }
/* 버튼 칸 안 판매비중 미니 게이지 — % 숫자 아래 채움바(승 빨강·중간 회색·패 파랑) */
.w1lc-vg { display: block; width: calc(100% - 10px); height: 4px; border-radius: 2px;
background: rgba(0,0,0,.08); overflow: hidden; margin-top: 3px; }
.w1lc-vg i { display: block; height: 100%; border-radius: 2px; }
.w1lc-vg .f0 { background: var(--up); } .w1lc-vg .f1 { background: #9ca3af; } .w1lc-vg .f2 { background: var(--down); }
.w1lc-btn.on .w1lc-vg { background: rgba(255,255,255,.25); }
.w1lc-btn.on .w1lc-vg i { background: rgba(255,255,255,.9); } /* 선택(파랑 배경)에선 흰 채움 */
/* ─── 프로토 계산기(셀 클릭 조합, /proto 회차 페이지) ─── */
.result-table td.pk { cursor: pointer; }
@media (hover:hover) { .result-table td.pk:hover { background: #eff6ff; } }
.result-table td.pk-on { background: #1a5fb4 !important; }
.result-table td.pk-on b, .result-table td.pk-on .vpct, .result-table td.pk-on .chg { color: #fff !important; }
.pcalc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff;
border-top: 2px solid #1a5fb4; box-shadow: 0 -4px 16px rgba(0,0,0,.12); }
.pcalc-head { display: flex; align-items: center; gap: 14px; padding: 10px 16px; cursor: pointer; font-size: 14px; }
.pcalc-head > b { color: #1a5fb4; }
.pcalc-odds b { font-size: 17px; color: #dc2626; }
.pcalc-toggle { margin-left: auto; color: #64748b; font-size: 12.5px; }
.pcalc-list { max-height: 40vh; overflow-y: auto; border-top: 1px solid #e5e7eb; padding: 6px 16px; }
.pcalc-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #f1f5f9; font-size: 13px; }
.pi-teams { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-bt { color: #64748b; font-size: 12px; white-space: nowrap; }
.pi-out { font-weight: 800; color: #1a5fb4; white-space: nowrap; }
.pi-odd { margin-left: auto; font-variant-numeric: tabular-nums; }
.pcalc .pi-del { background: none; border: 0; color: #94a3b8; cursor: pointer; padding: 2px 6px; font-size: 13px; }
.pcalc-foot { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-top: 1px solid #e5e7eb; flex-wrap: wrap; }
.pcalc-amt { font-size: 13px; color: #475569; display: flex; align-items: center; gap: 6px; }
.pcalc-amt input { width: 90px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 7px; font: inherit; text-align: right; background: #fff; }
.pcalc-pay { font-size: 14px; }
.pcalc-pay b { font-size: 18px; color: #0d7a3f; font-variant-numeric: tabular-nums; }
.pcalc .pcalc-clear { margin-left: auto; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; border-radius: 7px; padding: 7px 14px; font-size: 13px; }
@media (max-width: 560px) {
.pcalc-head { padding: 9px 10px; gap: 10px; }
.pcalc-foot { padding: 8px 10px; gap: 10px; }
.pcalc-pay b { font-size: 16px; }
}
/* 같은 경기 다른 유형 라인 잠금(betman 동일) — 선택 해제 전까지 회색·클릭 불가 */
.result-table tr.pk-lock td { opacity: .38; }
.result-table tbody.mfirst tr.pk-lock td.date, .result-table tbody.mfirst tr.pk-lock td:has(.lg-badge),
.result-table tbody.mfirst tr.pk-lock td.team-cell, .result-table tbody.mfirst tr.pk-lock td.vs-cell { opacity: 1; }
.result-table tr.pk-lock td.pk { cursor: not-allowed; }
@media (hover:hover) { .result-table tr.pk-lock td.pk:hover { background: inherit; } }
.pcalc-max { font-size: 12px; font-weight: 800; color: #dc2626; background: #fef2f2; border-radius: 5px; padding: 2px 8px; }
/* 내역 경기번호 — betman 투표용지 기입용(7193 등) */
.pi-seq { flex: 0 0 auto; min-width: 44px; text-align: center; font-size: 12.5px; font-weight: 800;
color: #1a5fb4; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 5px; padding: 2px 6px;
font-variant-numeric: tabular-nums; }
/* ═══ /proto 표 모바일 카드 전환(≤720px) — 가로 스크롤 제거 ═══
경기 첫 라인(tbody.mfirst)에만 [일시·리그 + 홈 vs 원정] 헤더, 각 라인은
[유형칩·번호 ─ 결과] + [승|무|패 3분할 풀폭 버튼]. G·흐름·정렬헤더는 숨김. */
@media (max-width: 720px) {
.table-scroll:has(> .result-table) { overflow: visible; } /* 카드형이라 가로스크롤 래퍼 해제 */
.result-table, .result-table tbody { display: block; min-width: 0; } /* 데스크톱 min-width:820px 해제 */
.result-table thead { display: none; }
.result-table tbody.mgrp { border-bottom: 1px solid #f1f5f9; }
.result-table tbody.grp-top { border-top: 2px solid #cbd5e1; margin-top: 8px; padding-top: 4px; }
.result-table tr.orow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 5px;
padding: 7px 2px; border: 0; }
.result-table tr.orow td { display: block; border: 0; padding: 0; background: none; width: auto; }
/* 숨김: 종목아이콘·흐름 */
.result-table td.gicon, .result-table td.flow-col { display: none !important; }
/* 경기 헤더(첫 라인만): 일자·리그 작게 / 홈 vs 원정 볼드 — 나머지 라인은 숨김
(셀렉터에 tr.orow 포함 = 위의 'tr.orow td display:block' 을 구체성으로 이겨야 함) */
.result-table tr.orow td.date, .result-table tr.orow td:has(.lg-badge),
.result-table tr.orow td.team-cell, .result-table tr.orow td.vs-cell { display: none; }
/* 메타줄(일시·리그) — 일시는 한 줄(날짜+시간 인라인), 줄 전체 가운데 정렬 */
.result-table tbody.mfirst tr.orow td.date { display: block; order: 0; margin-left: auto;
font-size: 12px; color: #64748b; white-space: nowrap; }
.result-table tbody.mfirst tr.orow td.date .d, .result-table tbody.mfirst tr.orow td.date .t {
display: inline; margin: 0 2px 0 0; }
.result-table tbody.mfirst tr.orow td:has(.lg-badge) { display: block; order: 0; margin-right: auto; }
.result-table tbody.mfirst tr.orow::before { content: ''; order: 1; flex-basis: 100%; height: 0; margin: -4px 0 0; }
/* 줄 순서: 메타(일시·리그) → 팀명 → 번호·유형·결과 칩(타 라인과 동일 형식) → 배당.
세 번째 개행자는 숨김이던 종목아이콘 셀을 높이 0 으로 재활용. */
.result-table tbody.mfirst tr.orow td.gicon { display: block !important; order: 3;
flex-basis: 100%; height: 0; overflow: hidden; padding: 0; font-size: 0; }
.result-table tbody.mfirst tr.orow td.num { order: 4; }
.result-table tbody.mfirst tr.orow td:has(.cat-badge) { order: 4; }
.result-table tbody.mfirst tr.orow td.res { order: 4; margin-left: auto; }
.result-table tbody.mfirst tr.orow::after { order: 5; }
.result-table tbody.mfirst tr.orow td.odd { order: 6; }
/* 팀명 전용 한 줄 — 길면 말줄임(위아래로 감기지 않게) */
.result-table tbody.mfirst tr.orow td.team-cell, .result-table tbody.mfirst tr.orow td.vs-cell {
display: block; order: 2; font-weight: 800; font-size: 14.5px; text-align: left; }
/* 팀명줄 가운데 정렬(홈 왼쪽·원정 오른쪽 auto 마진) */
.result-table tbody.mfirst tr.orow td.team-cell.ta-right { margin-left: auto; }
.result-table tbody.mfirst tr.orow td.team-cell.ta-left { margin-right: auto; }
.result-table tbody.mfirst tr.orow td.team-cell { flex: 0 1 auto; min-width: 0; max-width: 44%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-table tbody.mfirst tr.orow td.vs-cell { flex: 0 0 auto; width: auto; min-width: 0; max-width: 104px;
overflow: hidden; color: #94a3b8; font-weight: 600; font-size: 11px; text-align: center; white-space: nowrap; }
.result-table tbody.mfirst tr.orow td.team-cell { max-width: 34%; } /* 스코어(홈:원정) 폭 확보만큼 팀명 양보 */
/* 스코어박스 모바일 컴팩트 — '7 vs 8' 전체가 들어가게 */
.result-table tbody.mfirst tr.orow td.vs-cell .scorebox { padding: 1px 5px; font-size: 12.5px; min-width: 0; }
.result-table tbody.mfirst tr.orow td.vs-cell .sc-pair { gap: 3px; }
.result-table tbody.mfirst tr.orow td.vs-cell .vs { margin: 0 1px; }
/* 라인: 번호+분류 칩 · 결과 우측 */
.result-table td.num { order: 2; font-size: 11.5px; font-weight: 800; color: #1a5fb4; background: #eff6ff;
border-radius: 5px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.result-table td:has(.cat-badge) { order: 2; font-size: 11px; }
.result-table td.res { order: 2; margin-left: auto; }
/* 줄바꿈 후 승/무/패 3분할 풀폭 버튼 */
.result-table tr.orow::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
.result-table td.odd { order: 4; flex: 1 1 0; min-width: 0; text-align: center;
border: 1px solid #e2e8f0 !important; border-radius: 9px; padding: 8px 2px !important; background: #fff; }
.result-table td.odd b { font-size: 14.5px; }
.result-table td.odd .vpct { display: block; font-size: 10.5px; margin: 1px 0 0; }
.result-table td.pk-on { border-color: #1a5fb4 !important; }
.result-table tr.pk-lock td.odd { background: #f8fafc; }
}
/* 세금 포함 실수령액 패널(배당률·등위 공용) */
.pcalc-tax { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 7px; padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.pcalc-tax.on { background: #b45309; color: #fff; border-color: #b45309; }
.pcalc-tax.tx-sm { padding: 2px 8px; font-size: 11px; margin-left: 6px; vertical-align: middle; }
.pcalc-taxbox { border-top: 1px dashed #e5e7eb; padding: 10px 16px; background: #fffbeb; }
.pcalc-taxbox.tx-inline { border: 1px solid #fde68a; border-radius: 9px; margin-top: 8px; padding: 8px 12px; }
.tx-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; font-size: 13.5px; }
.tx-row b { font-variant-numeric: tabular-nums; }
.tx-unit { justify-content: flex-start; gap: 12px; color: #64748b; font-size: 12.5px; }
.tx-unit label { display: inline-flex; align-items: center; gap: 4px; }
.tx-y b { color: #b45309; } .tx-n b { color: #0d7a3f; }
.tx-minus { color: #dc2626; }
.tx-net b { font-size: 17px; color: #0d7a3f; }
.tx-net-cell { color: #0d7a3f !important; font-weight: 800; }
/* 세금 상세보기 모달(KTTax.showDetail) — betman 계산결과 상세보기 분해 테이블 */
.txd-ov { position: fixed; inset: 0; z-index: 300; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.txd-box { background: #fff; border-radius: 12px; width: 100%; max-width: 480px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.txd-hd { background: #1d4ed8; color: #fff; font-weight: 800; font-size: 15px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.txd-x { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.txd-bd { padding: 14px 16px; overflow-y: auto; }
.txd-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.txd-tbl th, .txd-tbl td { border-bottom: 1px solid #eef1f5; padding: 7px 8px; text-align: left; font-weight: 500; color: var(--text); }
.txd-tbl td { text-align: right; font-variant-numeric: tabular-nums; }
.txd-tbl tr.txd-em th, .txd-tbl tr.txd-em td { background: #fef2f2; font-weight: 700; }
.txd-tbl tr.txd-sub th { padding-left: 16px; color: #64748b; }
.txd-tbl tr.txd-tax th, .txd-tbl tr.txd-tax td { color: #dc2626; font-weight: 800; background: #f8fafc; }
.txd-tbl tr.txd-tot th, .txd-tbl tr.txd-tot td { color: #0d7a3f; font-weight: 800; font-size: 14px; background: #f0fdf4; border-bottom: 0; }
.txd-note { margin: 10px 2px 0; font-size: 11.5px; color: #94a3b8; line-height: 1.6; }
.txd-ft { padding: 10px 16px 14px; text-align: center; }
.txd-ok { background: #1d4ed8; color: #fff; border: 0; border-radius: 8px; padding: 8px 28px; font-weight: 700; font-size: 14px; cursor: pointer; }
.tx-dtl-btn { background: #fff; border: 1px solid #cbd5e1; color: #475569; border-radius: 7px; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.tx-dtl-btn:hover { border-color: #1d4ed8; color: #1d4ed8; }
@media (max-width: 480px) { .txd-bd { padding: 10px 10px; } .txd-tbl { font-size: 12px; } }
.tx-click { cursor: pointer; text-decoration: underline dotted #94a3b8; text-underline-offset: 3px; }
.tx-click:hover { color: #1d4ed8; }
/* 라이브 잠정 선두 칸 — 진행중 경기의 현재 스코어 기준(확정 아님), 60초 폴링 갱신 */
td.pk.pk-lv { outline: 2px dashed #f59e0b; outline-offset: -3px; background: #fffbeb; position: relative; }
td.pk.pk-lv::after { content: 'LIVE'; position: absolute; top: 1px; right: 3px; font-size: 8px; font-weight: 800; color: #d97706; letter-spacing: .5px; }
td.pk.pk-on.pk-lv { background: var(--pk-on-bg, #dcfce7); }
/* 종료·잠정(공식 확정 전) 선두 칸 — LIVE 와 구분되는 슬레이트 점선 */
td.pk.pk-pv { outline: 2px dashed #64748b; outline-offset: -3px; background: #f8fafc; position: relative; }
td.pk.pk-pv::after { content: '잠정'; position: absolute; top: 1px; right: 3px; font-size: 8px; font-weight: 800; color: #475569; }
/* 언더오버·SUM 라인 배당 칸의 방향 라벨(언더/오버·홀/짝) — 승/무/패 헤더와 다른 유형 구분 */
.result-table td.pk .olab { display: block; font-size: 9.5px; font-weight: 800; color: #94a3b8; line-height: 1.1; }
/* 핸디캡·언더오버 기준점 — 모바일 카드에서만(PC는 팀명 옆 괄호 중복 방지) */
.result-table .hval { display: none; }
@media (max-width: 480px) {
.result-table .hval { display: inline-block; font-size: 10.5px; font-weight: 800; color: #0f172a; background: #f1f5f9; border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
}
/* 토토 계산기 버튼 라이브 잠정 판정 — 진행중(호박 LIVE)/종료 잠정(슬레이트). 공식 결과 오면 hit(초록)로 교체 */
.selbig.lv-live, .w1lc-btn.lv-live { outline: 2px dashed #f59e0b; outline-offset: -3px; position: relative; }
.selbig.lv-live:not(.on), .w1lc-btn.lv-live:not(.on) { background: #fffbeb; }
.selbig.lv-live::after, .w1lc-btn.lv-live::after { content: 'LIVE'; position: absolute; top: 1px; right: 3px; font-size: 8px; font-weight: 800; color: #d97706; letter-spacing: .5px; }
.selbig.lv-prov, .w1lc-btn.lv-prov { outline: 2px dashed #64748b; outline-offset: -3px; position: relative; }
.selbig.lv-prov:not(.on), .w1lc-btn.lv-prov:not(.on) { background: #f8fafc; }
.selbig.lv-prov::after, .w1lc-btn.lv-prov::after { content: '잠정'; position: absolute; top: 1px; right: 3px; font-size: 8px; font-weight: 800; color: #475569; }
/* 결과 칸 라이브 잠정 결과 — 진행중(호박)/종료 잠정(슬레이트). 공식·파생 잠정 결과가 오면 res-i 로 교체 */
.res-i.lvres { display: inline-flex; align-items: center; gap: 3px; border: 1.5px dashed; border-radius: 6px; padding: 1px 6px; font-weight: 800; background: #fff; }
.res-i.lvres.lv { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
.res-i.lvres.pv { border-color: #64748b; color: #475569; background: #f8fafc; }
.res-i.lvres i { font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .3px; }
/* "이대로 가면" — calc-pool 6·7·8 슬롯 카드 + 조합 뱃지 스트립(승무패·승1패·승5패) */
.pool-stat.lvs { border: 1.5px dashed #f59e0b; background: #fffbeb; }
.pool-stat.lvs .k { color: #92702a; }
.pool-stat.lvs .v.pay { color: #b45309; }
.pool-stat.lvs .mc-live-dot { display: inline-block; }
.lvs-outs-bar { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; padding: 6px 10px; border: 1px dashed #fcd34d; border-radius: 8px; background: #fffdf5; }
.lvs-outs-lab { font-size: 11px; font-weight: 800; color: #b45309; flex: 0 0 auto; }
.lvs-outs { display: flex; gap: 3px; flex-wrap: wrap; }
.lvs-o { min-width: 22px; text-align: center; font-size: 11px; font-weight: 800; border-radius: 4px; padding: 2px 4px; background: #f1f5f9; color: #94a3b8; }
.lvs-o.w { background: #fee2e2; color: #dc2626; }
.lvs-o.d { background: #e2e8f0; color: #475569; }
.lvs-o.l { background: #dbeafe; color: #2563eb; }
.lvs-o.void { background: #f3e8ff; color: #7c3aed; }
.lvs-o.dashed { outline: 1.5px dashed #f59e0b; outline-offset: -1.5px; }
@media (max-width: 480px) { .lvs-outs-bar { flex-wrap: wrap; } }
/* 예상 적중 표 — 미선택 경기의 확정·라이브 자동 반영 칸(점선). 사용자의 픽과 구분 */
.combo-table .pk-i.lv-auto { outline: 1.5px dashed #f59e0b; outline-offset: 1px; }
.lvs-note { color: #b45309; font-weight: 700; }
/* 경기 분석 버튼(달력 야구 경기) — 선발·맞대결·불펜 프리뷰 링크 */
.mc-gbtn.mc-analyze{background:#25324a;color:#fff;border-color:#25324a;font-weight:700}
.mc-gbtn.mc-analyze:hover{background:#2f4062;border-color:#2f4062}