/*
* 코트 인사이트 디자인 시스템 (2026-09-10 UI 전면 재구축, 2026-09-10 v2
* 사용자 피드백 반영: 이름 변경/줄맞춤/종목별 색상 포인트/사진·SixTool
* 가시성/전반적 정제도). 밝은 배경 + 절제된 장식 + 명확한 정보 위계, 종목
* (농구=amber, 배구=teal)·리그별 색은 탭/카드 강조선 등 실제 포인트로
* 쓰되 상태 표현에는 안 쓴다. 전부 CSS 변수라 나중에 바꾸기 쉽다.
*/
/* 폰트는 layout.php 에서 로 로드한다(성능상 @import보다 우선순위 높게 병렬 로드). */
:root {
/* 중립 팔레트 - 약간 슬레이트 톤(순회색 아님) */
--paper: #f2f4f7;
--surface: #ffffff;
--surface-2: #eceff3;
--line: #dfe3e9;
--line-strong: #c5cad4;
--ink: #14171f;
--muted: #656b7a;
--faint: #97a0ac;
/* 브랜드 - 신뢰감 있는 딥네이비 */
--brand: #2c4870;
--brand-strong: #17294a;
--brand-tint: #e8eef7;
--brand-ink: var(--brand-strong);
--brand-soft: var(--brand-tint);
--positive: #1a8754;
--negative: #d6394c;
--warning: #b8651b;
--warning-soft: #fbeee0;
/* 종목 포인트 컬러 - 농구=amber(농구공), 배구=teal(코트 라인) */
--sport-basketball: #d9822b;
--sport-volleyball: #1f9488;
/* 리그 배지/포인트 색 - 같은 종목 안에서는 같은 색상군, 명도만 다르게 */
--accent-kbl: #d9822b;
--accent-wkbl: #b8571f;
--accent-kovo_m: #1f9488;
--accent-kovo_w: #167a63;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--shadow-card: 0 1px 2px rgba(20, 22, 30, 0.05), 0 4px 16px rgba(20, 22, 30, 0.05);
--shadow-pop: 0 16px 44px rgba(15, 20, 30, 0.22);
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
--sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px;
--font: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
--header-h: 60px;
--bottomnav-h: 58px;
--maxw: 1180px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--paper: #0f1116; --surface: #171a21; --surface-2: #1d212a;
--line: #2a2f3a; --line-strong: #3a4150;
--ink: #eef0f4; --muted: #9aa1b0; --faint: #6b7280;
--brand: #7fa0d6; --brand-strong: #cddcff; --brand-tint: #1c2b42;
--positive: #4ade80; --negative: #f87171; --warning: #f0a94e; --warning-soft: #2c2013;
--sport-basketball: #e69a4d; --sport-volleyball: #3cbcad;
--accent-kbl: #e69a4d; --accent-wkbl: #d1793c; --accent-kovo_m: #3cbcad; --accent-kovo_w: #2fa07f;
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.3);
}
}
:root[data-theme="dark"] {
--paper: #0f1116; --surface: #171a21; --surface-2: #1d212a;
--line: #2a2f3a; --line-strong: #3a4150;
--ink: #eef0f4; --muted: #9aa1b0; --faint: #6b7280;
--brand: #7fa0d6; --brand-strong: #cddcff; --brand-tint: #1c2b42;
--positive: #4ade80; --negative: #f87171; --warning: #f0a94e; --warning-soft: #2c2013;
--sport-basketball: #e69a4d; --sport-volleyball: #3cbcad;
--accent-kbl: #e69a4d; --accent-wkbl: #d1793c; --accent-kovo_m: #3cbcad; --accent-kovo_w: #2fa07f;
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.3);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font);
background: var(--paper);
color: var(--ink);
font-size: 15px;
line-height: 1.55;
padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
/* 종목/리그 스코프가 있는 페이지에서 아래 두 규칙이 --page-accent를
정해준다 - 탭 활성색/히어로 강조선/기본 버튼 색이 이걸 따라간다
(사용자 피드백 "종목별로 다른 색상 포인트"). 스코프가 없는 화면(홈
전체 등)은 --brand로 자연 폴백. */
}
body[data-sport="basketball"] { --page-accent: var(--sport-basketball); --page-accent-tint: #fbf1e5; }
body[data-sport="volleyball"] { --page-accent: var(--sport-volleyball); --page-accent-tint: #e7f5f3; }
body[data-league="KBL"] { --page-accent: var(--accent-kbl); --page-accent-tint: #fbf1e5; }
body[data-league="WKBL"] { --page-accent: var(--accent-wkbl); --page-accent-tint: #f7ece3; }
body[data-league="KOVO_M"] { --page-accent: var(--accent-kovo_m); --page-accent-tint: #e7f5f3; }
body[data-league="KOVO_W"] { --page-accent: var(--accent-kovo_w); --page-accent-tint: #e6f4ee; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) body[data-sport], :root:not([data-theme="light"]) body[data-league] { --page-accent-tint: rgba(255,255,255,0.06); }
}
:root[data-theme="dark"] body[data-sport], :root[data-theme="dark"] body[data-league] { --page-accent-tint: rgba(255,255,255,0.06); }
a { color: inherit; text-decoration: none; }
a.link { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4 { margin: 0 0 var(--sp-2); font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.18rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 var(--sp-3); }
.muted { color: var(--muted); font-size: 0.88rem; }
.faint { color: var(--faint); font-size: 0.8rem; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
svg text { font-family: var(--font); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 숫자가 줄지어 나오는 모든 곳은 자리수 폭을 고정해 세로 줄이 맞게 한다
(사용자 피드백 "기본적인 줄 맞춤"). */
.stat-table, .standings-table, .compare-table, .hero-stat .value, .leader-value,
.bar-compare-item__value, .ticker-chip__meta, .game-card .score, .game-detail-team .score,
.scatter-tick, .result-meta, .rank-table td {
font-variant-numeric: tabular-nums;
}
/* ── 레이아웃 셸 ─────────────────────────────────────────────────── */
.site-header {
position: sticky; top: 0; z-index: 40;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.site-header__row {
max-width: var(--maxw); margin: 0 auto;
height: var(--header-h);
display: flex; align-items: center; gap: var(--sp-5);
padding: 0 var(--sp-4);
}
.site-logo {
font-weight: 800; font-size: 1.2rem; color: var(--ink);
white-space: nowrap; letter-spacing: -0.01em;
}
.site-logo span { color: var(--brand); margin-left: 2px; }
.main-nav {
display: none;
gap: var(--sp-1);
}
.main-nav a {
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-sm);
font-weight: 700; font-size: 0.92rem;
color: var(--muted);
}
.main-nav a.is-active { color: var(--brand); background: var(--brand-tint); }
.main-nav a:hover { color: var(--ink); }
@media (min-width: 860px) {
.main-nav { display: flex; }
}
.header-search { flex: 1; display: none; max-width: 360px; margin-left: auto; }
.header-search form { display: flex; }
.header-search input {
flex: 1; padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--line); border-right: none;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
background: var(--surface-2); color: var(--ink);
}
.header-search button {
padding: 0 var(--sp-3);
border: 1px solid var(--brand); background: var(--brand); color: #fff;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0; cursor: pointer; font-weight: 700;
}
@media (min-width: 860px) { .header-search { display: block; } }
.header-search-btn {
margin-left: auto;
width: 38px; height: 38px; display: grid; place-items: center;
border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2);
cursor: pointer; font-size: 1rem;
}
@media (min-width: 860px) { .header-search-btn { display: none; } }
.mobile-search-panel {
display: none;
border-top: 1px solid var(--line);
padding: var(--sp-3) var(--sp-4);
background: var(--surface);
}
.mobile-search-panel.is-open { display: block; }
.mobile-search-panel form { display: flex; gap: var(--sp-2); }
.mobile-search-panel input {
flex: 1; padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface-2); color: var(--ink);
}
.mobile-search-panel button {
padding: 0 var(--sp-4); border-radius: var(--radius-sm); border: none;
background: var(--brand); color: #fff; font-weight: 700;
}
@media (min-width: 860px) { .mobile-search-panel { display: none !important; } }
.site-main { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-9); }
.site-footer { border-top: 1px solid var(--line); padding: var(--sp-6) var(--sp-4); }
.site-footer p { max-width: var(--maxw); margin: 0 auto; color: var(--faint); font-size: 0.8rem; }
/* 모바일 하단 고정 내비 */
.bottom-nav {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
display: flex; justify-content: space-around;
background: var(--surface); border-top: 1px solid var(--line);
height: var(--bottomnav-h);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav a {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; font-size: 0.68rem; color: var(--muted); font-weight: 700;
}
.bottom-nav a .icon { font-size: 1.15rem; line-height: 1; }
.bottom-nav a.is-active { color: var(--brand); }
@media (min-width: 860px) { .bottom-nav { display: none; } }
/* ── 탭/필터 공통 ────────────────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.tabs a, .tabs button {
padding: var(--sp-2) var(--sp-4);
border-radius: 999px; border: 1px solid var(--line);
background: var(--surface); font-weight: 700; font-size: 0.86rem;
color: var(--muted); cursor: pointer;
}
.tabs a.is-active, .tabs button.is-active {
background: var(--page-accent, var(--ink)); color: #fff; border-color: var(--page-accent, var(--ink));
}
.tabs--sub a, .tabs--sub button { font-size: 0.8rem; padding: var(--sp-1) var(--sp-3); }
.filter-bar {
display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
padding: var(--sp-4); margin-bottom: var(--sp-4); box-shadow: var(--shadow-card);
}
.filter-bar .field { display: flex; flex-direction: column; gap: 4px; }
.filter-bar label { font-size: 0.72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.filter-bar select, .filter-bar input[type="text"], .filter-bar input[type="date"], .filter-bar input[type="number"], .filter-bar input[type="search"] {
padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface-2); color: var(--ink); min-width: 8rem;
}
.filter-bar input[type="text"] { min-width: 12rem; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);
border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
font-weight: 700; font-size: 0.86rem; cursor: pointer;
}
.btn--primary { background: var(--page-accent, var(--brand)); border-color: var(--page-accent, var(--brand)); color: #fff; }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--sm { padding: var(--sp-1) var(--sp-3); font-size: 0.78rem; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.crumb { margin-bottom: var(--sp-3); }
.crumb a { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.crumb a:hover { color: var(--brand); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
/* 리그 전환(2026-09-11 UI 개편, 지시서 4절) - 순위/비교/분석 page-head 오른쪽에 붙는다. */
.league-switcher { display: flex; align-items: center; gap: var(--sp-2); }
.league-switcher__label { font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.league-switcher select { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 700; }
.section-title { margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
/* ── 카드/패널 ───────────────────────────────────────────────────── */
.panel, .card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: var(--sp-5); box-shadow: var(--shadow-card);
}
.panel-title { font-size: 0.98rem; margin-bottom: var(--sp-3); }
.panel-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: start; }
.league-tag {
display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800;
padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted);
}
.league-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--league-color, var(--brand)); }
/* ── 상태(빈결과/에러/로딩/결측) ─────────────────────────────────── */
.state-box {
text-align: center; padding: var(--sp-9) var(--sp-4); color: var(--muted);
border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-2);
}
.state-box .state-icon { font-size: 1.8rem; margin-bottom: var(--sp-2); }
.data-gap-note { color: var(--faint); cursor: help; border-bottom: 1px dotted var(--faint); }
/* 정보 버튼(2026-09-11 UI 개편, 지시서 7절 "긴 산식 설명은 정보 버튼으로") -
네이티브 title 툴팁만 쓴다(이 사이트의 기존 data-gap-note와 같은 패턴,
모달/JS 없음). */
.info-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-strong);
background: var(--surface-2); color: var(--muted); font-size: 0.68rem; line-height: 1;
cursor: help; padding: 0; vertical-align: middle;
}
.info-btn:hover, .info-btn:focus-visible { color: var(--brand); border-color: var(--brand); }
.sample-warning { color: var(--warning); cursor: help; margin-left: 2px; }
.sample-warning-note { background: var(--warning-soft); color: var(--warning); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: 0.82rem; }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
/* ── 홈: 상단 일정 티커 ──────────────────────────────────────────── */
.ticker-wrap { position: relative; margin-bottom: var(--sp-8); }
.ticker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.ticker-controls { display: flex; gap: var(--sp-2); align-items: center; }
.ticker-nav-btn {
width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
background: var(--surface); cursor: pointer; display: grid; place-items: center; font-size: 0.9rem;
}
.ticker-track {
display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x proximity;
padding-bottom: var(--sp-2); scrollbar-width: thin; cursor: grab;
}
.ticker-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
/* 2026-09-11 UI 개편(지시서 3절) - 카드 내부를 상단(리그·날짜·시간)/
중앙(두 팀 각 한 줄)/하단(경기장·상태) 3단으로 분리. 예전엔 리그명+
대진+상태배지+날짜+경기장이 한 줄 텍스트로 이어져 "예정" 배지가
"예/정"으로 쪼개지는 등 좁은 칸에서 줄바꿈이 임의로 일어났다. 폭도
212px->228px로 살짝 넓혀 여유를 뒀다.
*/
.ticker-chip {
scroll-snap-align: start; flex: 0 0 auto; width: 228px;
border: 1px solid var(--line); border-top: 3px solid var(--league-color, var(--brand));
border-radius: var(--radius-md); padding: var(--sp-3);
background: var(--surface); display: flex; flex-direction: column; gap: 6px;
box-shadow: var(--shadow-card);
}
.ticker-chip__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: 0.7rem; }
.ticker-chip__league { font-weight: 800; color: var(--league-color, var(--brand)); white-space: nowrap; }
.ticker-chip__when { color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.ticker-chip__teams { display: flex; flex-direction: column; gap: 2px; }
.ticker-chip__team { font-weight: 700; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker-chip__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.ticker-chip__venue { font-size: 0.72rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ticker-chip__status { font-weight: 700; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; white-space: nowrap; flex-shrink: 0; }
.ticker-chip__status--scheduled { background: var(--brand-tint); color: var(--brand-strong); }
.ticker-chip__status--finished { background: var(--surface-2); color: var(--muted); }
.ticker-chip__status--canceled { background: var(--warning-soft); color: var(--warning); }
.ticker-more-chip {
scroll-snap-align: start; flex: 0 0 auto; width: 140px;
display: flex; align-items: center; justify-content: center; text-align: center;
border: 1px dashed var(--line-strong); border-radius: var(--radius-md);
color: var(--muted); font-weight: 700; font-size: 0.82rem; cursor: pointer;
}
/* ── 홈: 팀 순위 ─────────────────────────────────────────────────── */
/* 2026-09-11 UI 개편(지시서 2절) - 예전 auto-fit(minmax 240px)은 사이트 폭
1180px 안에서 4개 리그 카드가 손쉽게 4열로 다 들어가버려, 팀명("현대모비스
피버스" 등)과 "경기" 헤더가 좁은 칸에서 줄바꿈되는 문제가 있었다. 일반적인
데스크톱(1280/1440px 뷰포트 기준, 이 사이트는 --maxw:1180px로 내용폭을
고정하므로 실제 뷰포트가 더 넓어도 콘텐츠 폭은 그대로)에서는 2열×2행이
기본이고, 4열은 실제로 그만한 폭 여유가 생기는 매우 넓은 화면(1600px+)
에서만 허용한다. */
.standings-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-bottom: var(--sp-8); align-items: start; }
@media (min-width: 560px) { .standings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1600px) { .standings-grid { grid-template-columns: repeat(4, 1fr); } }
.standings-grid .panel { padding: var(--sp-4); }
.standings-grid .panel-title { margin-bottom: var(--sp-2); }
.standings-table th, .standings-table td { padding: 5px var(--sp-2); text-align: left; font-size: 0.85rem; white-space: nowrap; }
.standings-table th { color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line); }
.standings-table td:first-child, .standings-table th:first-child { width: 1.8em; color: var(--muted); }
.standings-table td:not(:first-child):not(:nth-child(2)), .standings-table th:not(:first-child):not(:nth-child(2)) { text-align: right; }
.standings-table td:nth-child(2) { max-width: 9em; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; }
.standings-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--surface-2); }
.standings-more { display: block; text-align: center; margin-top: var(--sp-3); font-size: 0.8rem; color: var(--brand); font-weight: 700; }
.standings-note { font-size: 0.72rem; color: var(--faint); margin-top: var(--sp-2); }
/* ── 홈: 선수 순위 카드 ──────────────────────────────────────────── */
.leader-card__cats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-3); }
.leader-cat-btn {
padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2);
font-size: 0.72rem; font-weight: 700; color: var(--muted); cursor: pointer;
}
.leader-cat-btn.is-active { background: var(--league-color, var(--brand)); border-color: var(--league-color, var(--brand)); color: #fff; }
.leader-cat-note { font-size: 0.72rem; color: var(--faint); margin-bottom: var(--sp-2); }
.leader-list { list-style: none; margin: 0; padding: 0; }
.leader-list li { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 0; border-bottom: 1px solid var(--surface-2); font-size: 0.88rem; }
.leader-list li:last-child { border-bottom: none; }
.leader-rank { width: 1.5em; color: var(--faint); font-weight: 800; font-size: 0.78rem; text-align: center; font-variant-numeric: tabular-nums; }
.leader-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-team { color: var(--muted); font-size: 0.76rem; flex-shrink: 0; }
.leader-value { font-weight: 800; min-width: 2.6em; text-align: right; }
.leader-panel[hidden] { display: none; }
.leader-empty-prompt { color: var(--faint); font-size: 0.8rem; padding: var(--sp-4) 0; text-align: center; }
/* ── 표 ───────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.table-scroll--tight { border: none; border-radius: 0; }
.stat-table { min-width: 100%; font-size: 0.86rem; white-space: nowrap; }
.stat-table th, .stat-table td { padding: var(--sp-2) var(--sp-3); text-align: right; }
.stat-table th:first-child, .stat-table td:first-child,
.stat-table th:nth-child(2), .stat-table td:nth-child(2) { text-align: left; white-space: normal; }
.stat-table thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight: 800; font-size: 0.76rem; border-bottom: 1px solid var(--line); }
.stat-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--surface-2); }
.stat-table tbody tr:hover { background: var(--surface-2); }
.stat-table a { color: var(--brand); font-weight: 700; }
.col-advanced { color: var(--muted); }
.col-sorted { background: var(--brand-tint); }
.sortable-col a { display: inline-flex; align-items: center; gap: 3px; color: inherit; }
.sort-arrow { font-size: 0.65rem; }
.stat-detail-toggle { margin-top: var(--sp-5); }
.stat-detail-toggle summary { cursor: pointer; font-weight: 700; padding: var(--sp-2) 0; list-style: none; }
.stat-detail-toggle summary::-webkit-details-marker { display: none; }
.stat-detail-toggle summary::before { content: "▸ "; }
.stat-detail-toggle[open] summary::before { content: "▾ "; }
/* ── 히어로(선수/팀 상세 상단) ───────────────────────────────────── */
.entity-hero {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
margin-bottom: var(--sp-6); padding: var(--sp-5) var(--sp-6);
background: linear-gradient(135deg, var(--page-accent-tint, var(--brand-tint)), var(--surface) 70%);
border: 1px solid var(--line); border-left: 5px solid var(--page-accent, var(--brand));
border-radius: var(--radius-lg);
}
.entity-hero-name { margin-bottom: 2px; }
.entity-hero-meta { color: var(--muted); font-size: 0.88rem; }
.entity-hero-stats { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat .value { font-size: 1.35rem; font-weight: 800; }
.hero-stat .label { font-size: 0.74rem; color: var(--muted); }
.player-photo {
width: 92px; height: 92px; border-radius: var(--radius-md); object-fit: cover;
background: var(--surface-2); box-shadow: var(--shadow-card); border: 3px solid var(--surface);
}
.player-top-row { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-6); align-items: stretch; }
.player-profile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 200px; }
.headline-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-tint); color: var(--brand-strong); padding: 4px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; }
/* ── 레이더 차트(SixTool) - 눈에 띄게 카드로 감싼다 ─────────────── */
.radar-chart-wrap {
flex: 1; min-width: 280px; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-card);
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.radar-chart-title { font-size: 0.94rem; margin-bottom: var(--sp-2); }
.radar-chart { width: 100%; max-width: 320px; }
.radar-grid { fill: none; stroke: var(--line); }
.radar-axis { stroke: var(--line-strong); }
.radar-axis--na { stroke: var(--line); stroke-dasharray: 3 3; }
.radar-data { fill: var(--page-accent, var(--brand)); fill-opacity: 0.18; stroke: var(--page-accent, var(--brand)); stroke-width: 2.5; }
.radar-vertex { fill: var(--page-accent, var(--brand)); }
.radar-vertex--na { fill: var(--faint); }
.radar-label { font-size: 10.5px; fill: var(--ink); font-weight: 700; }
.radar-label--na { fill: var(--faint); }
.radar-value { font-size: 9.5px; fill: var(--muted); font-weight: 700; }
.radar-value--na { fill: var(--faint); font-style: italic; }
.radar-chart-multi-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
/* 2026-09-11 UI 개편(지시서 1절) - 비교 화면의 메인 시각화. 카드로 감싸서
눈에 띄게 하고, 데스크톱에서 충분히 크게(최대 460px) 보여준다. */
.compare-radar-hero { display: flex; flex-direction: column; align-items: center; }
.compare-radar-hero .radar-chart--multi { max-width: 460px; }
@media (min-width: 860px) {
.compare-radar-hero { flex-direction: row; align-items: flex-start; justify-content: center; gap: var(--sp-7); }
}
.radar-series { transition: opacity 0.15s ease; }
.radar-series.is-dimmed { opacity: 0.12; }
.radar-series.is-hidden { display: none; }
.radar-vertex-multi { cursor: default; }
.radar-vertex-multi--na { fill-opacity: 0.35; stroke-dasharray: 1.5 1.5; }
.radar-legend { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; min-width: 180px; }
@media (min-width: 860px) { .radar-legend { padding-top: var(--sp-4); } }
.radar-legend-item {
display: flex; align-items: center; gap: 6px; padding: 5px 10px;
border-radius: var(--radius-sm); background: var(--surface-2); transition: opacity 0.15s ease;
}
.radar-legend-item.is-dimmed { opacity: 0.4; }
.radar-legend-item.is-pinned { box-shadow: inset 0 0 0 2px var(--page-accent, var(--brand)); }
.radar-legend-item.is-off { opacity: 0.5; }
.radar-legend-item.is-off .radar-legend-name { text-decoration: line-through; color: var(--faint); }
.radar-legend-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.radar-legend-toggle input { margin: 0 5px 0 0; cursor: pointer; }
.radar-legend-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.radar-legend-name {
flex: 1; text-align: left; background: none; border: none; padding: 4px 2px;
font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.radar-legend-warn { color: var(--warning); font-weight: 700; font-size: 0.74rem; white-space: nowrap; }
.radar-note { font-size: 0.76rem; color: var(--muted); margin-top: var(--sp-2); }
.radar-lowsample-note { font-size: 0.76rem; color: var(--warning); }
.profile-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.profile-card { text-align: center; }
.profile-card h4 { margin-bottom: 2px; }
.profile-card .player-photo { width: 72px; height: 72px; border-radius: 50%; margin-bottom: var(--sp-2); }
/* ── 산점도 ──────────────────────────────────────────────────────── */
.scatter-chart { width: 100%; height: auto; background: var(--surface); border-radius: var(--radius-md); }
.scatter-grid { stroke: var(--surface-2); }
.scatter-mean-line { stroke: var(--faint); stroke-dasharray: 4 4; }
.scatter-tick { font-size: 9px; fill: var(--faint); }
.scatter-axis-label { font-size: 11px; fill: var(--muted); font-weight: 700; }
.scatter-point { fill: var(--faint); fill-opacity: 0.75; cursor: pointer; transition: r 0.1s; }
.scatter-point:hover, .scatter-point:focus { fill: var(--page-accent, var(--brand)); fill-opacity: 1; outline: none; }
.scatter-point--highlight { fill: var(--negative); fill-opacity: 0.9; }
.scatter-point-label { font-size: 10px; fill: var(--negative); font-weight: 700; }
.scatter-detail { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--surface-2); border-radius: var(--radius-sm); font-size: 0.86rem; }
.scatter-detail:empty::before { content: "점을 선택하면 선수와 원자료를 확인할 수 있습니다."; color: var(--faint); }
/* ── 막대(분야별 우위) ───────────────────────────────────────────── */
.bar-compare-row { margin-bottom: var(--sp-5); }
.bar-compare-row__label { font-weight: 700; margin-bottom: var(--sp-2); font-size: 0.86rem; }
.bar-compare-item { display: grid; grid-template-columns: 8rem 1fr 4.5rem; align-items: center; gap: var(--sp-3); margin-bottom: 6px; font-size: 0.82rem; }
.bar-compare-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-compare-item__track { background: var(--surface-2); border-radius: 999px; height: 10px; overflow: hidden; }
.bar-compare-item__fill { height: 100%; border-radius: 999px; }
.bar-compare-item__value { text-align: right; font-weight: 800; }
.bar-compare-item.is-best .bar-compare-item__value { color: var(--positive); }
/* ── 비교 화면 ───────────────────────────────────────────────────── */
.compare-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); align-items: stretch; }
.compare-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--card-color, var(--line)); border-radius: var(--radius-md); padding: var(--sp-4); display: flex; flex-direction: column; }
.compare-card-remove { position: absolute; top: 6px; right: 8px; color: var(--faint); font-size: 1.1rem; }
.compare-card-remove:hover { color: var(--negative); }
.compare-card-head { display: flex; align-items: center; gap: var(--sp-3); }
.compare-card-head .player-photo { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.compare-card-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; align-self: flex-start; margin-top: 4px; }
.compare-card-name { font-weight: 800; }
.compare-card-season-picker { display: flex; gap: 4px; margin: var(--sp-2) 0; }
.compare-card-season-picker select { flex: 1; min-width: 0; }
.compare-card-bio { font-size: 0.78rem; color: var(--muted); margin-top: auto; padding-top: var(--sp-2); }
.compare-card--add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); border-style: dashed; color: var(--muted); min-height: 130px; }
.compare-card-add-icon { font-size: 1.4rem; }
.compare-missing-notice { background: var(--warning-soft); color: var(--warning); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: 0.84rem; }
.compare-table td.best { background: var(--brand-tint); font-weight: 800; }
.compare-empty-state { text-align: center; padding: var(--sp-9); }
/* 2026-09-11 UI 개편 - 비교 화면 보조 섹션 */
.compare-axis-table td strong { font-size: 0.95rem; }
.axis-basis { font-size: 0.72rem; color: var(--muted); font-weight: 400; margin-top: 2px; line-height: 1.5; }
.compare-table-group td { background: var(--surface-2); color: var(--muted); font-weight: 800; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.compare-secondary-title { margin-top: var(--sp-7); font-size: 1rem; color: var(--muted); }
/* :target 모달(선수 추가) - JS 없이 CSS만으로 동작 */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 17, 21, 0.55); z-index: 100; align-items: center; justify-content: center; padding: var(--sp-4); }
.modal-overlay:target { display: flex; }
.modal-box { background: var(--surface); border-radius: var(--radius-lg); padding: var(--sp-5); max-width: 420px; width: 100%; max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-pop); }
.modal-close { position: absolute; top: var(--sp-4); right: var(--sp-4); font-size: 1.3rem; color: var(--muted); }
.modal-box { position: relative; }
.compare-add-results { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.compare-add-results li { border-bottom: 1px solid var(--surface-2); }
.compare-add-results a { display: block; padding: var(--sp-2) 0; }
/* ── 검색 결과 ───────────────────────────────────────────────────── */
.search-section-title { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-6) 0 var(--sp-3); }
.result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.result-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.result-row:hover { border-color: var(--brand); }
.result-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--league-color, var(--surface-2)); display: grid; place-items: center; font-weight: 800; color: var(--league-color, var(--muted)); flex-shrink: 0; overflow: hidden; }
.result-avatar--player { color: #fff; }
.result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.result-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.result-name { font-weight: 800; }
.result-meta { font-size: 0.78rem; color: var(--muted); }
.result-add-btn { flex-shrink: 0; }
/* ── 경기 목록/상세 ──────────────────────────────────────────────── */
.game-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); align-items: start; }
.game-card { border: 1px solid var(--line); border-top: 3px solid var(--league-color, var(--brand)); border-radius: var(--radius-md); padding: var(--sp-3); background: var(--surface); display: block; box-shadow: var(--shadow-card); }
.game-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; margin-bottom: var(--sp-1); }
.game-card-league { font-weight: 700; color: var(--muted); }
.game-card-status { padding: 1px 7px; border-radius: 999px; font-weight: 700; }
.game-card-status--finished { background: var(--surface-2); color: var(--muted); }
.game-card-status--scheduled { background: var(--brand-tint); color: var(--brand-strong); }
.game-card-datetime { font-size: 0.76rem; color: var(--muted); margin-bottom: var(--sp-2); }
.game-card-teams { display: flex; flex-direction: column; gap: 3px; }
.game-card-team { display: flex; justify-content: space-between; font-size: 0.92rem; }
.game-card-team.win { font-weight: 800; }
.game-card-team .score { font-variant-numeric: tabular-nums; }
.game-card-venue { font-size: 0.72rem; color: var(--faint); margin-top: var(--sp-2); }
.game-detail-score { display: flex; align-items: center; justify-content: center; gap: var(--sp-6); padding: var(--sp-7) var(--sp-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--sp-6); box-shadow: var(--shadow-card); }
.game-detail-team { text-align: center; flex: 1; }
.game-detail-team .name { font-weight: 800; font-size: 1.1rem; }
.game-detail-team .score { font-size: 2.3rem; font-weight: 800; }
.game-detail-team.win .score { color: var(--page-accent, var(--brand)); }
.game-detail-vs { color: var(--faint); font-weight: 700; }
.game-detail-meta { text-align: center; color: var(--muted); font-size: 0.84rem; margin-bottom: var(--sp-6); }
.boxscore-team-title { margin-top: var(--sp-6); }
/* ── 경기 메뉴: 달력 ─────────────────────────────────────────────── */
.calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.calendar-nav h2 { margin: 0; }
.calendar-nav-btns { display: flex; gap: var(--sp-2); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.calendar-weekday { background: var(--surface-2); color: var(--muted); font-size: 0.72rem; font-weight: 700; text-align: center; padding: 6px 0; }
.calendar-cell {
background: var(--surface); min-height: 84px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
color: var(--ink); position: relative;
}
.calendar-cell--outside { background: var(--surface-2); color: var(--faint); }
.calendar-cell--today .calendar-cell__date { background: var(--page-accent, var(--brand)); color: #fff; border-radius: 50%; }
.calendar-cell--selected { box-shadow: inset 0 0 0 2px var(--page-accent, var(--brand)); }
.calendar-cell__date { font-size: 0.78rem; font-weight: 700; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.calendar-cell__dots { display: flex; flex-wrap: wrap; gap: 3px; }
.calendar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--league-color, var(--brand)); }
.calendar-cell__more { font-size: 0.62rem; color: var(--faint); }
.calendar-cell a.calendar-cell__link { position: absolute; inset: 0; }
@media (max-width: 640px) {
.calendar-cell { min-height: 56px; padding: 4px; }
.calendar-cell__date { font-size: 0.7rem; width: 18px; height: 18px; }
}
.calendar-daylist-title { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-7) 0 var(--sp-3); }
/* ── 분석 화면(2026-09-11 UI 개편, 지시서 6절) ──────────────────────── */
/* 필터가 한꺼번에 다 펼쳐져서 그래프가 첫 화면 아래로 밀리던 문제 -
기본 필터(시즌/X/Y)만 항상 보이고 나머지는 로 접는다. */
.filter-bar--compact { align-items: center; }
.analysis-extra-toggle { flex-basis: 100%; margin-top: var(--sp-2); }
.analysis-extra-toggle summary { font-size: 0.82rem; color: var(--muted); }
.analysis-extra-fields { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-3); }
.analysis-presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.analysis-presets__label { font-size: 0.78rem; color: var(--muted); font-weight: 700; }
.tag-btn {
padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
font-size: 0.78rem; font-weight: 700; color: var(--muted);
}
.tag-btn.is-active { background: var(--page-accent, var(--brand)); border-color: var(--page-accent, var(--brand)); color: #fff; }
/* ── 유틸 ────────────────────────────────────────────────────────── */
.season-picker { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); font-size: 0.85rem; }
.foot-actions { margin-top: var(--sp-4); }
.pagination { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (max-width: 640px) {
h1 { font-size: 1.3rem; }
.stat-table th, .stat-table td { padding: var(--sp-2); }
.entity-hero { flex-direction: column; align-items: flex-start; }
.player-top-row { flex-direction: column; }
.game-detail-score { gap: var(--sp-3); padding: var(--sp-4); }
.bar-compare-item { grid-template-columns: 5.5rem 1fr 3.6rem; }
}