/* ════════════════════════════════════════════════════════════ 레이스노트 색 역할 (2026-10-10) ──────────────────────────────────────────────────────────── 왜: 화면은 다크 모드로 먼저 만들어졌고 라이트 모드 규칙은 일부만 있었다. 그래서 라이트에서 ① 다크용 형광색 글자 ② 흰색에 가까운 글자 ③ 배경만 어두운 칸이 남아 색이 따로 놀고 글자가 안 보였다. 원칙: 1. 색은 역할로만 쓴다 — 배경 / 카드 / 글자 3단계 / 강조(파랑) / 브랜드(금색) / 상태(좋음 초록 · 주의 주황 · 위험 빨강). 상태색은 실제 의미가 있을 때만. 2. 라이트 규칙은 모두 :root[data-theme="light"] 아래에만 둔다 → 다크(기본값)는 그대로. 3. 화면 코드가 style="" 로 직접 넣는 색은 [style*="..."] 로 라이트에서만 덮는다 (style.css 의 기존 라이트 규칙과 같은 방식). style.css 다음에 불러온다. 다크 모드를 바꾸는 규칙은 맨 아래 두 블록뿐이다. ════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { --l-bg: #eaeef7; --l-surface: #ffffff; --l-surface-2: #f5f8fd; --l-surface-3: #e9eef7; --l-line: #dfe6f2; --l-line-2: #c9d4e6; --l-text: #16203c; /* 제목·숫자 */ --l-text-2: #3a4566; /* 본문 */ --l-text-3: #5f6a8a; /* 보조 설명 */ --l-accent: #0b6bc2; /* 강조·선택·링크 */ --l-accent-soft: #e7f1fb; --l-accent-line: #b9d6f1; --l-gold: #8a5d00; /* 브랜드·PRO·축마 */ --l-gold-soft: #fff6dd; --l-gold-line: #ecd08a; --l-good: #0f7a3d; /* 적중·기준 이상 */ --l-good-soft: #e6f5ec; --l-good-line: #a9dcbc; --l-warn: #a35200; /* 주의·기준 미달 */ --l-warn-soft: #fff1df; --l-warn-line: #f0c99a; --l-bad: #b42318; /* 위험·마감·불일치 */ --l-bad-soft: #fdeceb; --l-bad-line: #f2b8b2; --l-pink: #b3305f; /* 배당 숫자·주의마 */ --l-violet: #6b3fbd; } /* ── 상단: 날씨 · 경주 선택 · 마감 임박 ── */ :root[data-theme="light"] .weather-badge, :root[data-theme="light"] .weather-badge.clear, :root[data-theme="light"] .weather-badge.cloudy { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-text-2); } :root[data-theme="light"] .weather-badge-label, :root[data-theme="light"] .weather-badge.clear .weather-badge-label { color: var(--l-gold); } :root[data-theme="light"] .weather-badge.rain { background: var(--l-accent-soft); border-color: var(--l-accent-line); color: var(--l-text-2); } :root[data-theme="light"] .weather-badge.rain .weather-badge-label { color: var(--l-accent); } :root[data-theme="light"] .race-pill { background: var(--l-surface); border-color: var(--l-line); color: var(--l-text-2); } :root[data-theme="light"] .race-pill.active { background: var(--l-accent); border-color: var(--l-accent); color: #fff; box-shadow: 0 4px 12px rgba(11,107,194,.22); } :root[data-theme="light"] .race-pill-delay { background: var(--l-warn-soft); color: var(--l-warn); } :root[data-theme="light"] .live-dot.loading { color: var(--l-accent); } :root[data-theme="light"] .live-dot.loading::before { background: var(--l-accent); } :root[data-theme="light"] .race-delay-tools button { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] .quick-start-invite-icon { background: var(--l-accent-soft); color: var(--l-accent); } :root[data-theme="light"] .next-race-btn { background: var(--l-accent); color: #fff; } :root[data-theme="light"] .stay-race-btn { background: var(--l-surface); border-color: var(--l-line-2); color: var(--l-text-2); } :root[data-theme="light"] .urgent-banner { background: var(--l-bad-soft); border-color: var(--l-bad-line); color: var(--l-bad); } :root[data-theme="light"] .urgent-banner::before { background: var(--l-bad); color: #fff; } :root[data-theme="light"] .urgent-action-bar.watch { border-color: var(--l-gold-line) !important; } :root[data-theme="light"] .urgent-action-bar.danger { border-color: var(--l-bad-line) !important; } :root[data-theme="light"] .urgent-action-bar .urgent-action-kicker { color: var(--l-accent); } :root[data-theme="light"] .urgent-action-bar.watch .urgent-action-kicker { color: var(--l-gold); } :root[data-theme="light"] .urgent-action-bar.danger .urgent-action-kicker { color: var(--l-bad); } :root[data-theme="light"] .urgent-action-bar .urgent-action-btn.primary { background: var(--l-accent); border-color: var(--l-accent); color: #fff; } :root[data-theme="light"] .urgent-action-bar .urgent-action-btn.gold { background: linear-gradient(135deg,#ffd56a,#ffb84d); border-color: #e9b949; color: #3a2a00; } :root[data-theme="light"] .urgent-action-bar .urgent-action-btn.danger { background: var(--l-bad-soft); border-color: var(--l-bad-line); color: var(--l-bad); } /* 화면 아래 알림 상자: 글자만 진해지고 배경이 다크 그대로라 제목이 안 보이던 문제 */ :root[data-theme="light"] .notice-toast { background: var(--l-surface); border-color: var(--l-line-2); box-shadow: 0 14px 32px rgba(40,60,120,.18); } :root[data-theme="light"] .notice-toast.info { background: var(--l-surface); border-color: var(--l-accent-line); } :root[data-theme="light"] .notice-toast.success { background: var(--l-surface); border-color: var(--l-good-line); } :root[data-theme="light"] .notice-toast .notice-title { color: var(--l-text); } :root[data-theme="light"] .notice-toast .notice-body { color: var(--l-text-2); } :root[data-theme="light"] .notice-toast .notice-close { color: var(--l-text-3); } /* ── 홈 ── */ :root[data-theme="light"] .ops-dashboard-kicker { color: var(--l-accent); } :root[data-theme="light"] .ops-metric-card span, :root[data-theme="light"] .ops-metric-card em { color: var(--l-text-3); } :root[data-theme="light"] .help-tip { color: var(--l-text-3); } :root[data-theme="light"] .ai-pick-text span { color: var(--l-warn); } /* 마번 배지 (말 카드·예상지 표·배당 막대·관심마 메모 공통): 다크의 어두운 칸 대신 같은 색 계열의 밝은 배지. nc-6 이상은 색 정의가 없어 기본 회색 배지 */ :root[data-theme="light"] .ticket-horse-option-no { background: var(--l-surface-3); color: var(--l-text); } :root[data-theme="light"] .nc-1 { background: #e3f4fb !important; color: #0b6e99 !important; border-color: #9fd6ec !important; } :root[data-theme="light"] .nc-2 { background: #e6f5ec !important; color: #0f7a3d !important; border-color: #a9dcbc !important; } :root[data-theme="light"] .nc-3 { background: #fdeee6 !important; color: #b4410e !important; border-color: #f2b896 !important; } :root[data-theme="light"] .nc-4 { background: #fff6dd !important; color: #8a5d00 !important; border-color: #ecd08a !important; } :root[data-theme="light"] .nc-5 { background: #f1eafc !important; color: #6b3fbd !important; border-color: #cdb8f0 !important; } /* ── 화면 코드가 직접 넣는 색 (라이트에서만 덮기) ── */ :root[data-theme="light"] [style*="background: rgba(0,0,0,0.3)"] { background: var(--l-surface-2) !important; } :root[data-theme="light"] [style*="rgba(255,255,255,0.05)"], :root[data-theme="light"] [style*="#ffffff12"] { border-color: var(--l-line) !important; } :root[data-theme="light"] [style*="color:#8888aa"], :root[data-theme="light"] [style*="color: #8888aa"], :root[data-theme="light"] [style*="color:#555577"], :root[data-theme="light"] [style*="color: #555577"], :root[data-theme="light"] [style*="color:#aaaacc"], :root[data-theme="light"] [style*="color: #aaaacc"], :root[data-theme="light"] [style*="color:#8b96bd"], :root[data-theme="light"] [style*="color:#6f7899"] { color: var(--l-text-3) !important; } :root[data-theme="light"] [style*="color: rgb(0, 229, 255)"], :root[data-theme="light"] [style*="color:#00e5ff"], :root[data-theme="light"] [style*="color:#8fdfff"] { color: var(--l-accent) !important; } :root[data-theme="light"] [style*="color:#00ff88"] { color: var(--l-good) !important; } :root[data-theme="light"] [style*="color:#ffd700"], :root[data-theme="light"] [style*="color:#ffd56a"] { color: var(--l-gold) !important; } :root[data-theme="light"] [style*="color:#ff6b35"] { color: #b4410e !important; } :root[data-theme="light"] [style*="color:#ff9ebb"] { color: var(--l-pink) !important; } :root[data-theme="light"] [style*="color:#ffb347"] { color: var(--l-warn) !important; } :root[data-theme="light"] [style*="color: rgb(255, 65, 108)"] { color: #c0244f !important; } :root[data-theme="light"] .pick-tag[style*="#ffd700"] { background: var(--l-gold-soft) !important; border-color: var(--l-gold-line) !important; } /* 배당 막대 8색: 형광 대신 같은 색 계열의 차분한 색 */ :root[data-theme="light"] .bet-bar-fill[style*="#00e5ff"] { background: linear-gradient(90deg,#7dbbe9,var(--l-accent)) !important; } :root[data-theme="light"] .bet-bar-fill[style*="#00ff88"] { background: linear-gradient(90deg,#7ccb9c,var(--l-good)) !important; } :root[data-theme="light"] .bet-bar-fill[style*="#ff6b35"] { background: linear-gradient(90deg,#f1ab88,#b4410e) !important; } :root[data-theme="light"] .bet-bar-fill[style*="#ffd700"] { background: linear-gradient(90deg,#ecd08a,#b8860b) !important; } :root[data-theme="light"] .bet-bar-fill[style*="#cc88ff"] { background: linear-gradient(90deg,#c9b3f0,var(--l-violet)) !important; } :root[data-theme="light"] .bet-bar-fill[style*="#00ffcc"] { background: linear-gradient(90deg,#86d8c6,#0d7f6e) !important; } :root[data-theme="light"] .bet-bar-fill[style*="#ff4488"] { background: linear-gradient(90deg,#efa6c0,var(--l-pink)) !important; } :root[data-theme="light"] .bet-bar-fill[style*="#aaee00"] { background: linear-gradient(90deg,#c5dd84,#5f7f12) !important; } :root[data-theme="light"] [style*="color: #ffd700"] { color: var(--l-gold) !important; } :root[data-theme="light"] [style*="color:#a8f0c8"] { color: var(--l-good) !important; } /* 배당 비율 글자는 막대가 색을 맡으므로 본문색으로 통일 (위 매핑보다 뒤에 둬서 우선) */ :root[data-theme="light"] .bet-pct { color: var(--l-text-2) !important; } /* ── 예상지 ── */ :root[data-theme="light"] .tote-board-source { color: var(--l-text-3); } :root[data-theme="light"] .tote-pool-head span { color: var(--l-accent); } :root[data-theme="light"] .tote-numbers { color: var(--l-text); } :root[data-theme="light"] .tote-odds { color: var(--l-pink); } :root[data-theme="light"] .paper-table { color: var(--l-text); } :root[data-theme="light"] .paper-table th { background: var(--l-surface-3); color: var(--l-text-2); border-bottom-color: var(--l-line); } :root[data-theme="light"] .paper-table td { border-bottom-color: var(--l-line); } :root[data-theme="light"] .paper-odds.win { color: var(--l-pink); } :root[data-theme="light"] .paper-odds { color: var(--l-text-2); } :root[data-theme="light"] .paper-table-btn { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] .paper-table-memo { color: var(--l-text-2); } :root[data-theme="light"] .combo-odds-row span { color: var(--l-text-2); } :root[data-theme="light"] .combo-odds-source { color: var(--l-gold); } :root[data-theme="light"] .combo-odds-empty { color: var(--l-text-3); } :root[data-theme="light"] .sheet-odds-row span, :root[data-theme="light"] .sheet-combo-row.locked span { color: var(--l-text-3); } :root[data-theme="light"] .sheet-combo-row.locked strong { color: var(--l-pink); } :root[data-theme="light"] .sheet-pick-card.axis .sheet-pick-label { color: var(--l-gold); } :root[data-theme="light"] .sheet-pick-card.dark .sheet-pick-label { color: var(--l-warn); } :root[data-theme="light"] .sheet-pick-card.caution .sheet-pick-label { color: var(--l-pink); } :root[data-theme="light"] .report-horse { color: var(--l-text); } :root[data-theme="light"] .report-conf.high { color: var(--l-good); } :root[data-theme="light"] .report-conf.mid { color: var(--l-gold); } :root[data-theme="light"] .report-rank.r1 { color: var(--l-gold); } :root[data-theme="light"] .report-rank.r2 { color: var(--l-accent); } :root[data-theme="light"] .report-rank.r3 { color: var(--l-violet); } :root[data-theme="light"] .report-rank.rn { background: var(--l-surface-3); color: var(--l-text-3); } :root[data-theme="light"] .bet-guide-item.safe .bet-guide-label { color: var(--l-good); } :root[data-theme="light"] .bet-guide-item.medium .bet-guide-label { color: var(--l-gold); } :root[data-theme="light"] .bet-guide-item.hard .bet-guide-label { color: var(--l-pink); } :root[data-theme="light"] .bet-guide-beginner { color: var(--l-text-2); } :root[data-theme="light"] .bet-guide-btn { background: var(--l-accent-soft); border-color: var(--l-accent-line); color: var(--l-accent); } :root[data-theme="light"] .bet-count { color: var(--l-text-3); } :root[data-theme="light"] .ticket-combo-btn { color: var(--l-accent); } :root[data-theme="light"] .ticket-combo-notice, :root[data-theme="light"] .ticket-combo-item p { color: var(--l-text-3); } :root[data-theme="light"] .ticket-combo-item.vip strong { color: var(--l-gold); } :root[data-theme="light"] .ticket-combo-item.locked strong { color: var(--l-pink); } :root[data-theme="light"] .odds-signal-chip.live { background: var(--l-accent-soft); border-color: var(--l-accent-line); color: var(--l-accent); } :root[data-theme="light"] .odds-signal-chip.live strong { color: var(--l-accent); } :root[data-theme="light"] .odds-signal-detail, :root[data-theme="light"] .odds-source-note .muted { color: var(--l-text-3); } :root[data-theme="light"] .odds-signal-chip.demo { background: var(--l-warn-soft); border-color: var(--l-warn-line); color: var(--l-warn); } :root[data-theme="light"] .odds-signal-tag { background: var(--l-surface-3); border-color: var(--l-line-2); color: var(--l-text-2); } :root[data-theme="light"] .odds-signal-tag.favorite { background: #fbe9ef; border-color: #efb6c8; color: var(--l-pink); } :root[data-theme="light"] .odds-signal-tag.pick, :root[data-theme="light"] .odds-signal-tag.vip { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] .odds-signal-tag.why { background: var(--l-accent-soft); border-color: var(--l-accent-line); color: var(--l-accent); } :root[data-theme="light"] .paper-tag.pick { background: var(--l-accent-soft); border-color: var(--l-accent-line); color: var(--l-accent); } :root[data-theme="light"] .paper-tag.vip { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] .bet-bar-track { background: var(--l-surface-3); } /* ── 관심마 ── */ :root[data-theme="light"] .race-start-time { background: var(--l-accent-soft); border-color: var(--l-accent-line); color: var(--l-accent); } :root[data-theme="light"] .race-start-alert.watch .race-start-time { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] .race-start-alert.urgent .race-start-time { background: var(--l-warn-soft); border-color: var(--l-warn-line); color: var(--l-warn); } :root[data-theme="light"] .race-start-alert.danger .race-start-time { background: var(--l-bad-soft); border-color: var(--l-bad-line); color: var(--l-bad); } :root[data-theme="light"] .ticket-memo-prefill { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] .watch-vip-btn { background: linear-gradient(135deg,#ffd56a,#ffb84d); border-color: #e9b949; color: #3a2a00; } :root[data-theme="light"] .live-status-refresh { background: var(--l-accent); color: #fff; } :root[data-theme="light"] .reliability-badge span, :root[data-theme="light"] .reliability-badge em { color: var(--l-text-3); } :root[data-theme="light"] .reliability-badge strong { color: var(--l-text); } :root[data-theme="light"] .reliability-badge.fresh { background: var(--l-good-soft); border-color: var(--l-good-line); } :root[data-theme="light"] .reliability-badge.fresh strong { color: var(--l-good); } :root[data-theme="light"] .reliability-badge.watch { background: var(--l-gold-soft); border-color: var(--l-gold-line); } :root[data-theme="light"] .reliability-badge.watch strong { color: var(--l-gold); } :root[data-theme="light"] .reliability-badge.stale, :root[data-theme="light"] .reliability-badge.danger { background: var(--l-bad-soft); border-color: var(--l-bad-line); } :root[data-theme="light"] .reliability-badge.stale strong, :root[data-theme="light"] .reliability-badge.danger strong { color: var(--l-bad); } :root[data-theme="light"] .reliability-badge.pending { background: var(--l-surface-2); border-color: var(--l-line); } :root[data-theme="light"] .ticket-budget-meter span, :root[data-theme="light"] .ticket-budget-limit, :root[data-theme="light"] .ticket-horse-picker-sub { color: var(--l-text-3); } /* ── 전개 예측: 어두운 갈색 주로 → 밝은 모래색, 어두운 표 → 밝은 표 ── */ :root[data-theme="light"] .pace-title { color: var(--l-text) !important; } :root[data-theme="light"] .pace-sub { color: var(--l-text-3) !important; } :root[data-theme="light"] .pace-meaning-grid span { color: var(--l-text-3); } :root[data-theme="light"] .pace-meaning-grid div { background: var(--l-surface-2); border: 1px solid var(--l-line); } :root[data-theme="light"] .pace-meaning-grid strong { color: var(--l-text); } /* 전개 표 번호 칩: 번호 색이 없을 때 쓰는 진한 회색(#555) 대신 밝은 칩 */ :root[data-theme="light"] .pace-detail-section [style*="background: #555;"] { background: var(--l-surface-3) !important; color: var(--l-text) !important; border: 1px solid var(--l-line-2); } :root[data-theme="light"] .pace-meaning-pill { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] [style*="#1f1611"] { background: linear-gradient(180deg,#f7f0e2 0%,#eee2c9 100%) !important; border-color: #dcc9a4 !important; } :root[data-theme="light"] [style*="#3d2618"] { border-color: #dcc9a4 !important; } :root[data-theme="light"] [style*="#1f1611"] [style*="background: rgba(0,0,0,0.3)"] { background: rgba(140,105,50,.10) !important; } :root[data-theme="light"] [style*="color: #887766"] { color: #74603f !important; } :root[data-theme="light"] .horse-marker { background: #fff !important; border-color: #d3c19c !important; box-shadow: 0 1px 4px rgba(80,60,20,.18) !important; } :root[data-theme="light"] .horse-marker, :root[data-theme="light"] .horse-marker * { color: var(--l-text) !important; } :root[data-theme="light"] .horse-marker[style*="#ffd700"] { border-color: #c99a06 !important; box-shadow: 0 0 0 3px rgba(201,154,6,.18) !important; } :root[data-theme="light"] .horse-marker[style*="#8fdfff"] { border-color: #2a8fc7 !important; box-shadow: 0 0 0 3px rgba(42,143,199,.18) !important; } :root[data-theme="light"] .horse-marker[style*="#ff9ebb"] { border-color: #d94f84 !important; box-shadow: 0 0 0 3px rgba(217,79,132,.18) !important; } :root[data-theme="light"] .pace-detail-section { background: var(--l-surface) !important; border-color: var(--l-line) !important; box-shadow: none !important; color: var(--l-text-2); } :root[data-theme="light"] .pace-detail-section thead { background: var(--l-surface-3) !important; color: var(--l-text-2) !important; } :root[data-theme="light"] .pace-detail-section th, :root[data-theme="light"] .pace-detail-section td { border-color: var(--l-line) !important; } :root[data-theme="light"] .pace-row td { color: var(--l-text); } :root[data-theme="light"] .pace-row[style*="#1a1a36"] { border-bottom-color: var(--l-line) !important; } :root[data-theme="light"] .pace-row[style*="inset 4px 0 0 #ffd700"] { box-shadow: inset 4px 0 0 #d9a514 !important; background: var(--l-gold-soft) !important; } :root[data-theme="light"] [style*="rgba(26,26,54,0.6)"] { background: var(--l-surface-3) !important; color: var(--l-text) !important; } :root[data-theme="light"] .pace-paywall-overlay { background: rgba(255,255,255,.82); } :root[data-theme="light"] .pace-paywall-overlay .msg { color: var(--l-text); } :root[data-theme="light"] .pace-paywall-overlay .sub-msg { color: var(--l-gold); } /* ── 평소엔 숨어 있다가 조건에 따라 뜨는 요소 ── */ /* 경주 없는 날 홈의 주간 일정 카드 */ :root[data-theme="light"] .week-schedule-card { background: var(--l-surface); border-color: var(--l-line); } :root[data-theme="light"] .week-schedule-card.today { background: var(--l-gold-soft); border-color: var(--l-gold-line); box-shadow: none; } :root[data-theme="light"] .week-schedule-card.next { background: var(--l-accent-soft); border-color: var(--l-accent-line); } :root[data-theme="light"] .week-schedule-day, :root[data-theme="light"] .week-schedule-weather { color: var(--l-text-3); } :root[data-theme="light"] .week-schedule-date { color: var(--l-text); } :root[data-theme="light"] .week-schedule-track { color: var(--l-text-2); } :root[data-theme="light"] .week-schedule-state { color: var(--l-text-3); border-color: var(--l-line-2); background: var(--l-surface-2); } :root[data-theme="light"] .week-schedule-card.today .week-schedule-state { color: var(--l-gold); border-color: var(--l-gold-line); background: #fff; } :root[data-theme="light"] .week-schedule-card.next .week-schedule-state { color: var(--l-accent); border-color: var(--l-accent-line); background: #fff; } /* 관심마 최종 점검·1:1 비교 카드 */ :root[data-theme="light"] .watch-priority-card, :root[data-theme="light"] .watch-compare-card { background: var(--l-surface); border-color: var(--l-line); box-shadow: 0 8px 22px rgba(40,60,120,.08); } :root[data-theme="light"] .watch-priority-kicker { color: var(--l-accent); } :root[data-theme="light"] .watch-priority-title, :root[data-theme="light"] .watch-priority-name, :root[data-theme="light"] .watch-compare-title, :root[data-theme="light"] .watch-compare-name, :root[data-theme="light"] .watch-compare-metric-value { color: var(--l-text); } :root[data-theme="light"] .watch-priority-rank, :root[data-theme="light"] .watch-compare-verdict { color: var(--l-text-2); } :root[data-theme="light"] .watch-priority-copy, :root[data-theme="light"] .watch-compare-copy, :root[data-theme="light"] .watch-compare-metric-label, :root[data-theme="light"] .watch-compare-vs { color: var(--l-text-3); } :root[data-theme="light"] .watch-compare-verdict { background: var(--l-surface-2); border-color: var(--l-line); } :root[data-theme="light"] .compare-lock-overlay { background: rgba(255,255,255,.72); } :root[data-theme="light"] .compare-lock-title { color: var(--l-text); } :root[data-theme="light"] .compare-lock-sub { color: var(--l-text-2); } :root[data-theme="light"] .compare-lock-btn { background: linear-gradient(135deg,#ffd56a,#ffb84d); border-color: #e9b949; color: #3a2a00; box-shadow: none; } :root[data-theme="light"] .race-start-kicker { color: var(--l-accent); } :root[data-theme="light"] .race-start-alert.watch .race-start-kicker { color: var(--l-gold); } :root[data-theme="light"] .race-start-alert.urgent .race-start-kicker { color: var(--l-warn); } :root[data-theme="light"] .race-start-alert.danger .race-start-kicker { color: var(--l-bad); } /* 무료와 PRO 비교 표 */ :root[data-theme="light"] .compare-badge.free { background: var(--l-surface-3); border-color: var(--l-line-2); color: var(--l-text-3); } :root[data-theme="light"] .compare-badge.vip { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] .compare-item, :root[data-theme="light"] .compare-item span { color: var(--l-text-2); } :root[data-theme="light"] .compare-foot, :root[data-theme="light"] .compare-trust { background: var(--l-surface-2); border-color: var(--l-line); color: var(--l-text-2); } /* 실시간 응원방 */ :root[data-theme="light"] .chat-fab { background: var(--l-surface); border-color: var(--l-accent-line); box-shadow: 0 8px 20px rgba(40,60,120,.18); } :root[data-theme="light"] .chat-fab-text { color: var(--l-accent); } :root[data-theme="light"] .chat-fab-count { color: var(--l-text-3); } :root[data-theme="light"] .chat-handle { background: var(--l-line-2); } :root[data-theme="light"] .chat-input { background: var(--l-surface-2); border-color: var(--l-line-2); color: var(--l-text); } :root[data-theme="light"] .chat-send { background: var(--l-accent); color: #fff; } /* 그 밖의 버튼·링크 */ :root[data-theme="light"] .race-comments-submit { background: var(--l-accent); color: #fff; } :root[data-theme="light"] .billing-agree a { color: var(--l-gold); } :root[data-theme="light"] .my-logout-btn { color: var(--l-text-2); border-color: var(--l-line-2); } :root[data-theme="light"] .my-delete-btn { color: var(--l-text-3); } :root[data-theme="light"] .biz-footer-copy { color: var(--l-text-3); } :root[data-theme="light"] #quickStartStar { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } /* ── 마이페이지 ── */ :root[data-theme="light"] .my-avatar { background: var(--l-accent-soft) !important; border-color: var(--l-accent-line) !important; } :root[data-theme="light"] .my-email-btn.secondary { color: var(--l-text-2); border-color: var(--l-line-2); } :root[data-theme="light"] .theme-toggle-btn { background: var(--l-surface); border-color: var(--l-line-2); color: var(--l-text-2); } :root[data-theme="light"] .my-ticket-summary-btn, :root[data-theme="light"] .review-pattern-empty button { background: var(--l-accent-soft); border-color: var(--l-accent-line); color: var(--l-accent); } :root[data-theme="light"] .race-review-prefill { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] .beginner-guide-link { background: var(--l-surface-2); border-color: var(--l-line); color: var(--l-accent); } :root[data-theme="light"] .beginner-bet-name { color: var(--l-accent); } :root[data-theme="light"] .review-pattern-row { color: var(--l-text-2) !important; } :root[data-theme="light"] .analysis-ranking-badge { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] .analysis-ranking-breakdown summary strong { color: var(--l-accent); } :root[data-theme="light"] .rank-sample-badge { color: var(--l-text-3); } :root[data-theme="light"] .ai-hit-main span { color: var(--l-text-2); } :root[data-theme="light"] .pricing-card.free { background: var(--l-surface) !important; border-color: var(--l-line) !important; } :root[data-theme="light"] .pricing-card.vip { background: var(--l-gold-soft) !important; border-color: var(--l-gold-line) !important; } :root[data-theme="light"] .pricing-plan, :root[data-theme="light"] .pricing-price { color: var(--l-text); } :root[data-theme="light"] .pricing-card.vip .pricing-price { color: var(--l-gold); } :root[data-theme="light"] .pricing-price small { color: var(--l-text-3); } :root[data-theme="light"] .pricing-cta.free { background: var(--l-surface); border-color: var(--l-line-2); color: var(--l-text-2); } :root[data-theme="light"] .pricing-item span { color: var(--l-text-2); } :root[data-theme="light"] .pricing-item strong { color: var(--l-text); } :root[data-theme="light"] .vip-trust-card { background: var(--l-surface-2) !important; border-color: var(--l-line) !important; } :root[data-theme="light"] .vip-trust-card strong { color: var(--l-text); } :root[data-theme="light"] .vip-trust-card span { color: var(--l-text-3); } :root[data-theme="light"] .vip-perk-icon { background: var(--l-gold-soft); border-color: var(--l-gold-line); } :root[data-theme="light"] .result-filter-btn.active { background: var(--l-accent); border-color: var(--l-accent); color: #fff; box-shadow: none; } /* 복기 결과 카드: 적중 초록 · 3착권 금색 · 불일치 빨강 · 기록 파랑 */ :root[data-theme="light"] .result-card-badge.win { background: var(--l-good-soft); border-color: var(--l-good-line); color: var(--l-good); } :root[data-theme="light"] .result-card-badge.push { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] .result-card-badge.lose { background: var(--l-bad-soft); border-color: var(--l-bad-line); color: var(--l-bad); } :root[data-theme="light"] .result-card-badge.record { background: var(--l-accent-soft); border-color: var(--l-accent-line); color: var(--l-accent); } :root[data-theme="light"] .result-card-rank { background: var(--l-surface-2); border-color: var(--l-line); color: var(--l-text-3); } :root[data-theme="light"] .result-card-rank.r1 { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] .result-card-rank.r2 { background: var(--l-surface-3); border-color: var(--l-line-2); color: #4f5870; } :root[data-theme="light"] .result-card-rank.r3 { background: #fbefe4; border-color: #e8c39e; color: #8f4f16; } :root[data-theme="light"] .result-card-learning { background: var(--l-accent-soft); border-color: var(--l-accent-line); color: var(--l-text-2); } :root[data-theme="light"] .result-card-col strong { color: var(--l-text); } :root[data-theme="light"] .result-card-col .label { color: var(--l-text-3); } :root[data-theme="light"] .hit-badge { background: var(--l-gold-soft); border-color: var(--l-gold-line); color: var(--l-gold); } :root[data-theme="light"] .hit-horses { color: var(--l-text); } /* ════════════════════════════════════════════════════════════ 아래 두 블록만 다크 모드에도 적용된다 ════════════════════════════════════════════════════════════ */ /* 채점판 숫자 색 역할 바로잡기 (다크·라이트 공통) 기존: hot(결과가 있으면 붙는 보통 상태)이 빨강, low(기준 미달)가 더 연한 분홍이라 경고와 보통이 뒤바뀌어 보였다. 이제: hot = 강조색, good = 초록(기준 이상), low = 주황(기준 미달 주의). 빨강은 마감·불일치 같은 위험에만. */ .ai-hit-stat strong.hot { color: #8fdfff; text-shadow: none; } .ai-hit-stat strong.low { color: #ffb347; text-shadow: none; } :root[data-theme="light"] .ai-hit-stat strong.hot { color: var(--l-accent); } :root[data-theme="light"] .ai-hit-stat strong.good { color: var(--l-good); } :root[data-theme="light"] .ai-hit-stat strong.low { color: var(--l-warn); } /* 다크 모드 보조 글자 가독성: 대비가 3:1에 못 미치던 흐린 글자만 한 단계 밝힘 */ :root:not([data-theme="light"]) .horse-meta { color: #7c84ad; } :root:not([data-theme="light"]) .horse-meta strong { color: #c3c8ea; } :root:not([data-theme="light"]) .race-pill { color: #8a92bd; } :root:not([data-theme="light"]) .race-pill.active { color: #00e5ff; } :root:not([data-theme="light"]) .result-card-col .label, :root:not([data-theme="light"]) .result-filter-btn, :root:not([data-theme="light"]) .my-grade .grade-text, :root:not([data-theme="light"]) .combo-odds-empty { color: #7c84ad; } :root:not([data-theme="light"]) .my-card-label, :root:not([data-theme="light"]) .report-updated, :root:not([data-theme="light"]) .section-title { color: #6f78a3; } :root:not([data-theme="light"]) .bet-count, :root:not([data-theme="light"]) .odds-val.pending { color: #666f99; } :root:not([data-theme="light"]) .compare-sub { color: #8088b0; } :root:not([data-theme="light"]) .ai-sub { color: #a98a5f; } :root:not([data-theme="light"]) .footer-note { color: #5f6894; } :root:not([data-theme="light"]) .nav-tab-label, :root:not([data-theme="light"]) .state-msg { color: #7c84ad; } :root:not([data-theme="light"]) .nav-tab.active .nav-tab-label { color: #00e5ff; } :root:not([data-theme="light"]) .paper-odds.pending, :root:not([data-theme="light"]) .report-reason { color: #7c84ad; } :root:not([data-theme="light"]) .hit-accuracy-label, :root:not([data-theme="light"]) .vip-cta-sub { color: #6f78a3; } :root:not([data-theme="light"]) .vip-cta-sub strong { color: #9aa2cc; } :root:not([data-theme="light"]) .vip-btn-note { color: #a08a4a; } :root:not([data-theme="light"]) [style*="color:#333355"], :root:not([data-theme="light"]) [style*="color:#444466"], :root:not([data-theme="light"]) [style*="color:#555577"] { color: #7c84ad !important; }