

/* ==========================================================
ws-base.css — 전역 토큰 · 테마 · 리셋 · 헤더 · 컨트롤바
의존: 없음 (최초 로드)
========================================================== */

/* ── CSS 변수 (다크모드 기본) ── */
:root {
--bg:#323234; --bg2:#0e0e0e; --bg3:#141414;
--border:#3a2d00; --border2:#5a4500;
--silver:#eeeeee; --silver2:#ffffff; --silver3:#cccccc; --silver4:#999999;
--gold:#ffd700; --gold2:#c8a820; --gold3:#8a7a30;
--text:#ffffff; --accent:#ffffff;
--card:#1a1a28; --accent2:#c8a820; --danger:#dc2626;
--muted:#1a1a28; --thead:#1a1a28; --radius:10px;
--shadow:0 2px 12px rgba(0,0,0,0.4);
}
/* ── 라이트모드 (골드/다크 통일) ── */
html[data-theme="light"] {
--bg:#f0f2f5; --bg2:#ffffff; --bg3:#f5f7fa;
--card:#ffffff; --accent:#b8860b; --accent2:#c8a820; --danger:#dc2626;
--muted:#f5f0e0; --thead:#b8860b; --border:#d4b483; --border2:#c8a820;
--silver:#2a2a2a; --silver2:#111111; --silver3:#444444; --silver4:#666666;
--gold:#b8860b; --gold2:#c8a820; --gold3:#a07820;
--text:#111111; --shadow:0 2px 12px rgba(184,134,11,0.15); --radius:10px;
}
html[data-theme="light"] body { background:var(--bg); color:var(--text); }
html[data-theme="light"] .header-bar { background:#000; border-color:#5a4500; }
html[data-theme="light"] .header-left { color:#ffd700; }
html[data-theme="light"] .header-center h2 { color:#ffd700; }
html[data-theme="light"] .header-right button { background:#2a2000; color:#ffd700; border-color:#5a4500; }
html[data-theme="light"] .header-right button:hover { border-color:#ffd700; }
html[data-theme="light"] #winnerTable thead th { background:#1a1400; color:#ffd700; border-color:#3a2d00; }
html[data-theme="light"] #winnerTable tbody td { background:#ffffff; color:#111111; border-color:#e8d8b0; }
html[data-theme="light"] #winnerTable > tbody > tr:not(.adv-row):hover > td { background:#dbeafe; }
html[data-theme="light"] .date-row td { background:#2b3444 !important; color:#cccccc !important; border-color:#737c8c !important; }
html[data-theme="light"] #winnerTable tbody td:nth-child(2) { color:#b8860b; font-weight:600; }
html[data-theme="light"] #winnerTable tbody td:nth-child(3) { color:#666666; font-size:11px; font-weight:700; }
html[data-theme="light"] #winnerTable tbody td:nth-child(4) { color:#111111; font-weight:900; font-size:13px; }
html[data-theme="light"] .clickable-odds { background:#fdf8ee;color:#b8860b; font-weight:800; border:1.5px solid #d4b483; border-radius:6px; padding:4px 0; text-align:center; transition:all .15s; }
html[data-theme="light"] .clickable-odds:hover { background:#b8860b; color:#fff; border-color:#8a6000; }
html[data-theme="light"] td.clickable-odds.odds-selected { background:#3d3833 !important; color:#ffd700 !important; border:1.5px solid #c9a227 !important; }
html[data-theme="light"] td.clickable-odds.is-disabled { background:#f3f1ec !important; color:#8a8175 !important; border-color:#ddd8ce !important; opacity:1 !important; }
html[data-theme="light"] td.clickable-turn.is-disabled { color:#b5ada0 !important; }
html[data-theme="light"] td.clickable-turn.is-disabled::before { border-color:#ddd8ce !important; }
html[data-theme="light"] .match-active-blink td.clickable-odds { animation:none !important; }
html[data-theme="light"] td.clickable-turn { background:#fdf8ee; color:#b8860b; border:1.5px solid #d4b483; border-radius:6px; transition:all .15s; }
html[data-theme="light"] td.clickable-turn:hover { background:#b8860b; color:#fff; }
html[data-theme="light"] .adv-toggle { background:#fdf8ee; color:#b8860b; border-color:#d4b483; }
html[data-theme="light"] .adv-toggle:hover { background:#b8860b; color:#fff; }
html[data-theme="light"] .sport-btn { background:#fdf8ee; color:#b8860b; border-color:#d4b483; }
html[data-theme="light"] .sport-btn.is-active { background:#1a1400; color:#ffd700; border-color:#5a4500; }
html[data-theme="light"] .ctrl-btn { background:#fdf8ee; color:#b8860b; border-color:#d4b483; }
html[data-theme="light"] .ctrl-btn:hover { background:#b8860b; color:#fff; }
html[data-theme="light"] #turnBtn { background:#fee2e2; color:#dc2626; border-color:#fca5a5; }
html[data-theme="light"] #betModeBar { background:#fdf8ee; border-color:#d4b483; }
html[data-theme="light"] .mode-btn { background:#ffffff; color:#111111; border-color:#d4b483; }
html[data-theme="light"] .mode-btn.active { background:#1a1400; color:#ffd700; }
html[data-theme="light"] #winnerTableWrap { border-color:#c8a820; }
html[data-theme="light"] #comboTable { border-collapse:collapse !important; border-spacing:0 !important; background:#1e1c18; }
html[data-theme="light"] #comboTable th { background:#141210; color:#ffd700; border:1px solid #4a4133; border-radius:0; }
html[data-theme="light"] #comboTable td { background:#1e1c18; color:#efe7d4; border:1px solid #4a4133; border-radius:0; padding:6px 8px; font-weight:700; transition:background .15s; }
html[data-theme="light"] #comboTable td:first-child { color:#c9b458; }
#comboTable td span[style*="#2563eb"]{ color:#60a5fa !important; }
#comboTable td span[style*="#dc2626"]{ color:#f87171 !important; }
#comboTable td span[style*="#16a34a"]{ color:#4ade80 !important; }
#comboTable td span[style*="#b8860b"]{ color:#e8c86a !important; }
html[data-theme="light"] #comboTable td:hover { background:#2a2620; }
html[data-theme="light"] .right-table th { background:#2a2000; color:#ffd700; border-radius:0; }
html[data-theme="light"] .right-table td { background:#fdf8ee; color:#8a6000; border:1.5px solid #d4b483; border-radius:0; padding:6px 8px; font-weight:700; transition:background .15s; }
html[data-theme="light"] .right-table td span { color:inherit; }
html[data-theme="light"] #autoCalcTable th { background:#1a1400; color:#ffd700; }
html[data-theme="light"] #autoCalcTable td { background:#ffffff; color:#111111; border-color:#d4b483; }
html[data-theme="light"] #manualCalcTable th { background:#1a1400; color:#ffd700; }
html[data-theme="light"] #manualCalcTable td { background:#ffffff; color:#111111; border-color:#d4b483; }
html[data-theme="light"] #betListTable th { background:#1a1400; color:#ffd700; }
html[data-theme="light"] #betListTable td { background:#ffffff; color:#111111; border-color:#d4b483; }
html[data-theme="light"] .num-highlight { background:#fdf8ee; border-color:#c8a820; }
html[data-theme="light"] .vs { color:#b8860b !important; font-weight:900; }


/* ── 기본 ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
background:var(--bg); color:var(--text); padding:16px;
transition:background .2s, color .2s;
}
button,input,select,textarea { font-family:inherit; }
.adv-panel input[data-disabled="1"] { background:#f0f0f0 !important; color:#999 !important; }
.adv-panel input[data-disabled="1"]:hover { background:#f0f0f0 !important; color:#999 !important; cursor:not-allowed !important; }
.adv-panel td[data-disabled="1"]:hover { background:#f0f0f0 !important; }
.adv-row td { pointer-events:none; }
.adv-row td input { pointer-events:auto; }
.adv-panel table td { transition:none !important; }
.adv-panel table tr:hover td { background:inherit !important; }
.adv-panel input[data-disabled="1"] { background:#f0f0f0 !important; color:#999 !important; }
.adv-panel input[data-disabled="1"]:hover { background:#f0f0f0 !important; color:#999 !important; cursor:not-allowed !important; }
html[data-theme="dark"] .vs { color:#ffd700 !important; font-weight:700; }
/* ── 헤더 ── */
.header-bar {
display:flex; align-items:center; justify-content:space-between;
margin-bottom:18px; padding:12px 16px;
background:var(--card); border-radius:var(--radius);
box-shadow:var(--shadow); border:1px solid var(--border);
}
.header-left { flex:1; font-size:18px; font-weight:700; color:var(--accent); }
.header-center { flex:1; text-align:center; }
.header-center h2 { font-size:20px; font-weight:800; letter-spacing:-0.5px; color:var(--text); }
.header-right { flex:1; display:flex; gap:4px; justify-content:flex-end; padding-right:50px; flex-wrap:nowrap; }
.header-right button {
padding:5px 8px; border:1px solid var(--border); border-radius:6px;
background:var(--muted); color:var(--text); cursor:pointer; font-size:11px;
transition:all .15s; white-space:nowrap;
}
.header-right button:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ── 다크모드 버튼 ── */
#btnDarkMode {
position:fixed; top:14px; right:16px; z-index:9999;
background:none; border:none; cursor:pointer; font-size:24px;
line-height:1; padding:4px;
}

/* ── 컨트롤 바 ────────────────────────────────────────── */
/* ── 컨트롤 바 ── */
.top-controls {
display:flex; align-items:center; justify-content:space-between;
gap:10px; margin:14px 0 8px; flex-wrap:wrap;
}
.center-controls { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.right-controls { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.sport-btn {
padding:6px 12px; border:1.5px solid var(--border); border-radius:4px;
background:var(--card); cursor:pointer; font-size:13px; color:var(--text);
transition:all .15s;
}
.sport-btn:hover { border-color:var(--accent); color:var(--accent); }
.sport-btn.is-active { background:var(--accent); color:#fff; border-color:var(--accent); }
.ctrl-btn {
padding:6px 11px; border:1px solid var(--border); border-radius:6px;
background:var(--card); color:var(--text); cursor:pointer; font-size:12px;
transition:all .15s;
}
.ctrl-btn:hover { border-color:var(--accent); color:var(--accent); }
.ctrl-btn:disabled { opacity:.45; cursor:not-allowed; }
#turnBtn { font-weight:600; color:var(--danger); }
#doneBtn.is-ready { background:var(--accent2); color:#fff; border-color:var(--accent2); }
#doneBtn.is-blink { animation:donePulse 1s ease-in-out infinite; }
@keyframes donePulse {
0%,100%{ box-shadow:0 0 0 0 rgba(99,179,237,.5); background:#1a4a7a; color:#fff; }
50%{ box-shadow:0 0 0 6px rgba(99,179,237,0); background:#2563eb; color:#fff; }
}
#doneBtn.is-ready {
background:#1a4a7a !important;
color:#fff !important;
border-color:#2563eb !important;
animation:donePulse 1.5s ease-in-out infinite !important;
}
@keyframes advBlink {
0%,100%{ box-shadow:none; }
50%{ box-shadow:none; }
}
.adv-blink {}
@keyframes advBlink {
0%,100%{ border:2px solid #ffd700; }
50%{ border:2px solid transparent; }
}
.adv-input-blink { animation:advBlink 0.8s ease-in-out infinite; }
.turn-blink { animation:advBlink 0.8s ease-in-out infinite; }
#bettingBtn.is-hot { background:var(--accent); color:#fff; border-color:var(--accent); }
#bettingBtn.is-blink { animation:bettingPulse 1.1s ease-in-out infinite; }
@keyframes bettingPulse {
0%{ box-shadow:0 0 0 3px rgba(26,86,219,.25); }
50%{ box-shadow:0 0 10px 6px rgba(26,86,219,.15); }
100%{ box-shadow:0 0 0 3px rgba(26,86,219,.25); }
}
#saveBtn.is-hot { background:var(--accent2); color:#fff; border-color:var(--accent2); }
#saveBtn.is-blink { animation:savePulse 1s ease-in-out infinite; }
@keyframes savePulse {
0%,100%{ box-shadow:0 0 0 0 rgba(22,163,74,.6); }
50%{ box-shadow:0 0 0 6px rgba(22,163,74,0); }
}


/* ── winnerBtnArea + 다크 테마 오버라이드 ──────────────── */

/* ── winnerBtnArea ── */
#winnerBtnArea {
display:none; background:var(--card); border-radius:var(--radius);
box-shadow:var(--shadow); padding:14px 16px; margin-bottom:14px;
border:1px solid var(--border);
}
.winner-area-top {
display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
/* ── 다크모드 winner 전용 ── */
html[data-theme="dark"] #winnerTable thead th { background:#0a0a0f; color:#666; }
html[data-theme="dark"] #winnerTable tbody td { background:#111118; color:#fff; border-color:#1a1a28; }
html[data-theme="dark"] #winnerTable tbody td.clickable-turn { background:#111118 !important; }
html[data-theme="dark"] #winnerTable tbody td:nth-child(3) { color:#aaa; font-size:11px; font-weight:700; }
html[data-theme="dark"] #winnerTable tbody td:nth-child(4) { color:#ffffff; font-weight:500; font-size:13px; }
html[data-theme="dark"] #winnerTable > tbody > tr:not(.adv-row):hover > td { background:#0d1f3c; color:#ffffff; }
html[data-theme="dark"] #winnerTable > tbody > tr:not(.adv-row):hover > td:nth-child(3) { color:#aaa; }
html[data-theme="dark"] #winnerTable > tbody > tr:not(.adv-row):hover > td:nth-child(4) { color:#ffd700; font-weight:900; }
html[data-theme="dark"] .date-row td { background:#2b3444 !important; color:#cccccc !important; border-color:#737c8c !important; letter-spacing:2px !important; }
html[data-theme="dark"] .clickable-odds { background:#1a1a28; color:#ffd700; font-weight:800; border:1px solid #2a2a40; border-radius:6px; padding:4px 0; text-align:center; transition:all .15s; }
html[data-theme="dark"] .clickable-odds:hover { background:#2a2000; border-color:#ffd700; }
html[data-theme="dark"] td.clickable-odds.odds-selected { background:#2a2000 !important; color:#ffd700 !important; border-color:#ffd700 !important; box-shadow:0 0 8px rgba(255,215,0,0.3); }
html[data-theme="dark"] .match-active-blink td.clickable-odds { animation:none !important; }
html[data-theme="dark"] td.clickable-turn { background:#1a0a0a; color:#f87171; border:1px solid #2a1a1a; border-radius:6px; transition:all .15s; }
html[data-theme="dark"] td.clickable-turn:hover { background:#2a0a0a; border-color:#f87171; }
html[data-theme="dark"] .adv-toggle { background:#1a1a28; color:#ffd700; border-color:#2a2a40; }
html[data-theme="dark"] .adv-toggle:hover { border-color:#ffd700; }
html[data-theme="dark"] #winnerTableWrap { border-color:#2a2a40; }
html[data-theme="dark"] #comboTable th { background:#0a0a0f; color:#ffd700; border-color:#2a2a40; }
html[data-theme="dark"] #comboTable td { background:#111118; color:#efe7d4; border-color:#2a2a40; }
html[data-theme="dark"] #comboTable td:first-child { color:#c9b458; }
html[data-theme="dark"] .right-table th { background:#0a1a10; color:#4adf8a; }
html[data-theme="dark"] .right-table td { background:#111118; color:#4adf8a; border-color:#1a4a2a; }
html[data-theme="dark"] .right-table td span { color:inherit; }
html[data-theme="dark"] .sport-btn { background:#111118; color:#666; border-color:#2a2a40; }
html[data-theme="dark"] .sport-btn.is-active { background:linear-gradient(135deg,#7a5a00,#ffd700,#c8a820); color:#000; border-color:#ffd700; }
html[data-theme="dark"] .ctrl-btn { background:#111118; color:#aaa; border-color:#2a2a40; }
html[data-theme="dark"] .ctrl-btn:hover { border-color:#ffd700; color:#ffd700; }
html[data-theme="dark"] #turnBtn { background:#1c0a0a; color:#f87171; border-color:#7f1d1d; }
html[data-theme="dark"] #betModeBar { background:#111118; border-color:#2a2a40; }
html[data-theme="dark"] .mode-btn { background:#111118; color:#aaa; border-color:#2a2a40; }
html[data-theme="dark"] .mode-btn.active { background:#2a2000; color:#ffd700; border-color:#ffd700; }
html[data-theme="dark"] #autoCalcTable th { background:#0a0a0f; color:#666; }
html[data-theme="dark"] #autoCalcTable td { background:#111118; color:#fff; border-color:#1a1a28; }
html[data-theme="dark"] #manualCalcTable th { background:#0a0a0f; color:#666; }
html[data-theme="dark"] #manualCalcTable td { background:#111118; color:#fff; border-color:#1a1a28; }
html[data-theme="dark"] #betListTable th { background:#0a0a0f; color:#666; }
html[data-theme="dark"] #betListTable td { background:#111118; color:#fff; border-color:#1a1a28; }
html[data-theme="dark"] .header-bar { background:#000; border-color:#5a4500; }
html[data-theme="dark"] .header-center h2 { color:#ffd700; }
html[data-theme="dark"] .header-right button { background:#1a1a28; color:#aaa; border-color:#2a2a40; }
html[data-theme="dark"] .header-right button:hover { border-color:#ffd700; color:#ffd700; }
/* ── PC 다크모드 경기명 색 보정 ── */
@media (min-width:769px){
  html[data-theme="dark"] #winnerTable tbody tr[data-match-key] > td:nth-child(6),
  html[data-theme="dark"] #winnerTable tbody tr[data-match-key] > td:nth-child(6) span{
    color:#ffffff !important;
  }
}
