/* ══════════════════════════════════════════════
   KBO Weather Monitor — Dark Theme (가독성 강화)
   ══════════════════════════════════════════════ */

:root {
  --bg-base:    #0b0e15;
  --bg-panel:   #111520;
  --bg-card:    #171c2a;
  --bg-card-h:  #1e2435;
  --bg-inset:   #0e1118;
  --bg-chip:    #1e2638;

  --border-subtle:  rgba(255,255,255,0.07);
  --border-default: rgba(255,255,255,0.12);
  --border-strong:  rgba(255,255,255,0.20);

  /* 가독성 강화: 기존 회색 텍스트를 전반적으로 밝게 */
  --text-primary:   #f0f3fa;
  --text-secondary: #a0aabe;
  --text-muted:     #6b7a94;
  --text-accent:    #60a5fa;

  --blue-500:  #3b82f6;
  --blue-400:  #60a5fa;
  --blue-dim:  rgba(59,130,246,0.12);
  --blue-mid:  rgba(59,130,246,0.25);

  --red-500:   #ef4444;
  --red-400:   #f87171;
  --red-dim:   rgba(239,68,68,0.10);
  --red-mid:   rgba(239,68,68,0.22);

  --amber-500: #f59e0b;
  --amber-400: #fbbf24;
  --amber-dim: rgba(245,158,11,0.10);
  --amber-mid: rgba(245,158,11,0.22);

  --green-500: #22c55e;
  --green-400: #4ade80;
  --green-dim: rgba(34,197,94,0.10);

  --dust-500:  #d97706;
  --dust-dim:  rgba(217,119,6,0.12);

  --header-h: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --font-sans: 'Pretendard', -apple-system, 'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-base); color: var(--text-primary); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; }
body { min-height: 100vh; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--text-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── HEADER ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,14,21,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  height: var(--header-h);
}
.header-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 0 28px; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.logo-block { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-emblem { color: var(--blue-400); width: 32px; height: 32px; }
.logo-name { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.logo-sub  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.header-center { flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px; }
.date-nav { display: flex; align-items: center; gap: 8px; }
.nav-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: var(--bg-card);
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.nav-btn:hover { background: var(--bg-card-h); color: var(--text-primary); }
.date-display {
  font-size: 15px; font-weight: 600; color: var(--text-primary);
  padding: 7px 20px; background: var(--bg-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  min-width: 240px; text-align: center; letter-spacing: -0.01em;
}
.today-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  background: var(--blue-500); color: #fff;
  padding: 2px 6px; border-radius: 3px; margin-left: 6px; vertical-align: middle;
}

.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.auto-refresh-info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.last-updated { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); }
.next-refresh { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }
.refresh-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  padding: 7px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: var(--bg-card);
  color: var(--text-secondary); transition: all .15s;
}
.refresh-btn:hover { background: var(--bg-card-h); color: var(--text-primary); border-color: var(--border-strong); }
.refresh-btn svg { transition: transform .5s; }
.refresh-btn.spinning svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TAB BAR ── */
.tab-bar {
  max-width: 1440px; margin: 0 auto; padding: 0 28px;
  display: flex; gap: 0; border-bottom: 1px solid var(--border-subtle);
}
.tab-btn {
  padding: 14px 24px; font-size: 14px; font-weight: 600;
  color: var(--text-muted); background: none; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  display: flex; align-items: center; gap: 7px;
}
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active { color: var(--text-primary); border-bottom-color: var(--blue-400); }
.tab-btn .tab-icon { font-size: 16px; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── ALERT BANNER ── */
.alert-banner { background: var(--red-mid); border-bottom: 1px solid rgba(239,68,68,0.3); }
.alert-inner {
  max-width: 1440px; margin: 0 auto; padding: 12px 28px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.alert-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 20px;
  background: rgba(239,68,68,0.2); color: var(--red-400);
  border: 1px solid rgba(239,68,68,0.3);
}
.alert-chip::before { content: '⚠'; font-size: 12px; }

/* ── MAIN LAYOUT ── */
.main-layout {
  max-width: 1440px; margin: 0 auto; padding: 24px 28px 0;
  display: grid; grid-template-columns: 420px 1fr;
  grid-template-rows: auto auto; gap: 20px;
}

/* ── SUMMARY STRIP ── */
.summary-strip {
  grid-column: 1 / -1;
  display: flex; align-items: center;
  background: var(--bg-panel); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 0 28px; height: 84px; overflow: hidden;
}
.sum-item { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 0 18px; }
.sum-label { font-size: 11px; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.sum-value { font-size: 30px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); line-height: 1; }
.sum-value.rain  { color: var(--blue-400); }
.sum-value.wind  { color: var(--amber-400); }
.sum-value.heat  { color: var(--red-400); }
.sum-value.dust  { color: var(--dust-500); }
.sum-sub { font-size: 11px; color: var(--text-secondary); }
.sum-divider { width: 1px; height: 36px; background: var(--border-subtle); flex-shrink: 0; }

/* ── PANELS ── */
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--text-secondary);
  letter-spacing: 0.03em; text-transform: uppercase;
}
.panel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-400); }

/* ── RADAR PANEL ── */
.radar-panel {
  grid-column: 1; display: flex; flex-direction: column;
  background: var(--bg-panel); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 18px; height: fit-content;
}
.radar-tab-group { display: flex; gap: 3px; }
.radar-tab {
  font-size: 12px; padding: 5px 12px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--text-muted);
  font-weight: 500; transition: all .15s;
}
.radar-tab:hover { color: var(--text-secondary); background: var(--bg-card); }
.radar-tab.active { background: var(--blue-dim); color: var(--blue-400); border-color: rgba(59,130,246,0.25); }

.radar-viewport {
  border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border-subtle); background: var(--bg-inset);
  aspect-ratio: 4/3; position: relative; margin-bottom: 10px;
}

.radar-controls {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 6px; margin-bottom: 4px;
}
.rc-btn {
  font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: var(--bg-card);
  color: var(--text-secondary); white-space: nowrap; transition: all .15s;
}
.rc-btn:hover { background: var(--bg-card-h); color: var(--text-primary); }
.rc-time {
  font-size: 12px; font-family: var(--font-mono); color: var(--text-secondary);
  min-width: 100px; text-align: center;
}
.rc-slider {
  flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
  background: var(--border-default); border-radius: 2px; outline: none;
}
.rc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  background: var(--blue-400); border-radius: 50%; cursor: pointer;
}
.rc-slider::-moz-range-thumb {
  width: 14px; height: 14px; border: none;
  background: var(--blue-400); border-radius: 50%; cursor: pointer;
}

.radar-footer {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--text-muted); padding: 0 2px;
}

.stadium-tooltip {
  background: var(--bg-card) !important; color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important; border-radius: var(--radius-sm) !important;
  font-size: 12px !important; font-family: var(--font-sans) !important;
  padding: 4px 10px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
.stadium-tooltip::before { border-top-color: var(--bg-card) !important; }

/* ── GAMES PANEL ── */
.games-panel { grid-column: 2; display: flex; flex-direction: column; }
.legend-row { display: flex; gap: 14px; }
.legend-item { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; font-weight: 500; }
.legend-item.ok     { color: var(--green-400); }
.legend-item.warn   { color: var(--amber-400); }
.legend-item.danger { color: var(--red-400); }

.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

/* ── Game Card ── */
.game-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 0; overflow: hidden;
  cursor: pointer; transition: background .15s, border-color .15s, transform .12s;
  animation: fadeUp .3s ease both; position: relative;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.game-card:hover { background: var(--bg-card-h); border-color: var(--border-default); transform: translateY(-2px); }
.game-card:active { transform: translateY(0); }

.card-status-bar { height: 3px; width: 100%; }
.card-status-bar.ok     { background: var(--green-500); }
.card-status-bar.warn   { background: var(--amber-500); }
.card-status-bar.danger { background: var(--red-500); }
.card-status-bar.dome   { background: var(--blue-400); }

.card-body { padding: 16px 18px; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.matchup { display: flex; align-items: center; gap: 8px; }
.team { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.team.home { color: var(--blue-400); }
.vs-sep { font-size: 11px; color: var(--text-secondary); font-weight: 400; }
.game-time-badge {
  font-size: 12px; font-weight: 600; font-family: var(--font-mono);
  color: var(--text-primary); background: var(--bg-chip);
  padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); white-space: nowrap;
}

.card-stadium {
  font-size: 13px; color: var(--text-secondary); margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
.dome-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  background: var(--blue-dim); color: var(--blue-400); padding: 2px 6px; border-radius: 3px;
}

.card-crew {
  font-size: 12px; color: var(--text-secondary); margin-bottom: 12px;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.card-crew span { display: inline-flex; align-items: center; gap: 4px; }
.crew-label { font-weight: 600; color: var(--text-accent); }

.card-weather { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.weather-main { display: flex; align-items: center; gap: 12px; }
.weather-icon { font-size: 36px; line-height: 1; }
.weather-temp { font-size: 34px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); line-height: 1; }
.weather-desc { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }

.mini-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 14px; }
.mm { display: flex; flex-direction: column; gap: 2px; }
.mm-lbl { font-size: 10px; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.mm-val { font-size: 15px; font-weight: 600; font-family: var(--font-mono); }
.mm-val.ok      { color: var(--green-400); }
.mm-val.warn    { color: var(--amber-400); }
.mm-val.danger  { color: var(--red-400); }
.mm-val.neutral { color: var(--text-primary); }
.mm-val.muted   { color: var(--text-secondary); }

.card-risks { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 12px; border-top: 1px solid var(--border-subtle); align-items: center; }
.risk-tag { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.risk-tag.ok     { background: var(--green-dim); color: var(--green-400); }
.risk-tag.rain   { background: var(--blue-dim); color: var(--blue-400); }
.risk-tag.rain.danger { background: var(--blue-mid); }
.risk-tag.wind   { background: var(--amber-dim); color: var(--amber-400); }
.risk-tag.wind.danger { background: var(--amber-mid); }
.risk-tag.heat   { background: var(--red-dim); color: var(--red-400); }
.risk-tag.heat.danger { background: var(--red-mid); }
.risk-tag.dust   { background: var(--dust-dim); color: var(--dust-500); }
.risk-tag.dome   { background: var(--blue-dim); color: var(--blue-400); }
.card-hint-arrow { font-size: 12px; color: var(--text-secondary); margin-left: auto; }

.game-forecast-preview {
  margin: 12px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--border-subtle); display: flex; gap: 0; overflow: hidden;
}
.gfp-hour {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: var(--radius-sm); transition: background .12s;
}
.gfp-hour.game-hour { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.15); }
.gfp-hour.rain-risk { background: rgba(239,68,68,0.06); }
.gfp-h  { font-size: 10px; color: var(--text-secondary); font-family: var(--font-mono); }
.gfp-ic { font-size: 16px; line-height: 1; }
.gfp-t  { font-size: 12px; font-weight: 600; font-family: var(--font-mono); color: var(--text-primary); }
.gfp-p  { font-size: 10px; color: var(--blue-400); font-family: var(--font-mono); font-weight: 500; }

.shimmer-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); height: 260px; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0%,100% { opacity: .4; } 50% { opacity: .8; } }

.no-games {
  grid-column: 1/-1; padding: 80px 24px; text-align: center;
  color: var(--text-secondary); font-size: 15px;
}
.no-games-icon { font-size: 48px; margin-bottom: 12px; opacity: .4; }

/* ── DETAIL MODAL — z-index 최상위 ── */
.modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(5,7,12,0.80); backdrop-filter: blur(6px);
  align-items: flex-start; justify-content: center;
  padding: 40px 16px 40px; overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.detail-modal {
  background: var(--bg-panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl); width: 100%; max-width: 880px;
  overflow: hidden; animation: modal-in .22s cubic-bezier(.2,.8,.3,1);
  position: relative; z-index: 10001;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(-16px) scale(.98); } to { opacity: 1; transform: none; } }

.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 28px 20px; border-bottom: 1px solid var(--border-subtle);
}
.modal-header.ok     { border-top: 3px solid var(--green-500); }
.modal-header.warn   { border-top: 3px solid var(--amber-500); }
.modal-header.danger { border-top: 3px solid var(--red-500); }

.modal-matchup { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.modal-meta { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.modal-header-right { display: flex; align-items: center; gap: 12px; }
.modal-risk-badge { font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 20px; }
.modal-risk-badge.ok     { background: var(--green-dim); color: var(--green-400); }
.modal-risk-badge.warn   { background: var(--amber-mid); color: var(--amber-400); }
.modal-risk-badge.danger { background: var(--red-mid);   color: var(--red-400); }
.modal-risk-badge.dome   { background: var(--blue-dim);  color: var(--blue-400); }
.modal-close {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: var(--bg-card);
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.modal-close:hover { background: var(--bg-card-h); color: var(--text-primary); }

.modal-body { padding: 22px 28px; display: flex; flex-direction: column; gap: 22px; }

.window-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px; }
.window-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wc { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px; }
.wc.highlight { border-color: rgba(59,130,246,0.3); background: var(--blue-dim); }
.wc.warning   { border-color: rgba(245,158,11,0.35); background: var(--amber-dim); }
.wc.danger    { border-color: rgba(239,68,68,0.35); background: var(--red-dim); }
.wc-lbl { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; font-weight: 600; }
.wc.highlight .wc-lbl { color: var(--blue-400); }
.wc.warning   .wc-lbl { color: var(--amber-400); }
.wc.danger    .wc-lbl { color: var(--red-400); }
.wc-val { font-size: 24px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); line-height: 1; }
.wc-sub { font-size: 11px; color: var(--text-secondary); margin-top: 5px; }

.notice-section { display: flex; flex-direction: column; gap: 8px; }
.notice-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; }
.notice-item.warn   { background: var(--amber-dim); color: var(--amber-400); border-left: 3px solid var(--amber-500); }
.notice-item.danger { background: var(--red-dim);   color: var(--red-400);   border-left: 3px solid var(--red-500); }
.notice-item.info   { background: var(--blue-dim);  color: var(--blue-400);  border-left: 3px solid var(--blue-500); }

.timeline-section { display: flex; flex-direction: column; gap: 12px; }
.timeline-header { display: flex; align-items: center; justify-content: space-between; }
.timeline-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); letter-spacing: 0.03em; text-transform: uppercase; }
.chart-tab-group { display: flex; gap: 3px; }
.chart-tab {
  font-size: 12px; padding: 6px 14px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--text-muted); font-weight: 500; transition: all .15s;
}
.chart-tab:hover { color: var(--text-secondary); background: var(--bg-card); }
.chart-tab.active { background: var(--blue-dim); color: var(--blue-400); border-color: rgba(59,130,246,0.25); }

.chart-legend-row { display: flex; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.cl-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.cl-line { display: inline-block; width: 18px; height: 2px; border-radius: 1px; }
.cl-bar  { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.cl-dash { display: inline-block; width: 18px; height: 0; border-top: 2px dashed; }

.chart-container { position: relative; width: 100%; height: 220px; }

.hourly-title {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.game-window-note {
  font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--blue-400); background: var(--blue-dim); padding: 3px 10px; border-radius: 4px;
}
.hourly-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.hourly-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hourly-table th {
  text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700;
  color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bg-inset); border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.hourly-table td { padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); white-space: nowrap; }
.hourly-table tr:last-child td { border-bottom: none; }
.hourly-table tr.game-window-row { background: rgba(59,130,246,0.05); }
.hourly-table tr.game-start-row  { background: rgba(59,130,246,0.12); }
.hourly-table tr.game-start-row td { color: var(--text-primary); font-weight: 500; }
.hourly-table td.val-ok     { color: var(--green-400); font-weight: 600; font-family: var(--font-mono); }
.hourly-table td.val-warn   { color: var(--amber-400); font-weight: 600; font-family: var(--font-mono); }
.hourly-table td.val-danger { color: var(--red-400);   font-weight: 600; font-family: var(--font-mono); }
.hourly-table td.val-mono   { font-family: var(--font-mono); color: var(--text-primary); }
.game-start-marker { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: var(--blue-500); color: #fff; margin-left: 5px; }

/* ══════════════════════════════════════════════
   CALENDAR TAB
   ══════════════════════════════════════════════ */
.cal-layout {
  max-width: 1440px; margin: 0 auto; padding: 24px 28px;
}
.cal-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.cal-month-title { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.cal-month-nav { display: flex; gap: 6px; }
.cal-month-btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: var(--bg-card);
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all .15s;
}
.cal-month-btn:hover { background: var(--bg-card-h); color: var(--text-primary); }

.cal-grid-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center; font-size: 12px; font-weight: 700;
  color: var(--text-secondary); letter-spacing: 0.06em;
  margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle);
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

/* 날짜 셀 */
.cal-cell {
  min-height: 140px; border-radius: var(--radius-md);
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  padding: 10px 12px; cursor: pointer;
  transition: all .15s; display: flex; flex-direction: column;
}
.cal-cell:hover { border-color: var(--border-default); background: var(--bg-card-h); }
.cal-cell.empty { background: transparent; border-color: transparent; cursor: default; min-height: auto; }
.cal-cell.today { border-color: var(--blue-400); }
.cal-cell.no-game { opacity: 0.5; }

.cal-cell-date {
  font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.cal-cell-date .day-badge {
  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  background: var(--blue-500); color: #fff;
}
.cal-cell-count {
  font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; font-weight: 500;
}

/* 날씨 미니 요약 */
.cal-weather-mini { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.cal-wx-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-family: var(--font-mono);
}
.cal-wx-icon { font-size: 14px; }
.cal-wx-temp { color: var(--text-primary); font-weight: 600; }
.cal-wx-rain { font-weight: 600; }
.cal-wx-rain.ok { color: var(--green-400); }
.cal-wx-rain.warn { color: var(--amber-400); }
.cal-wx-rain.danger { color: var(--red-400); }

.cal-alert-tag {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 10px; margin-top: 4px;
}
.cal-alert-tag.rain { background: var(--blue-mid); color: var(--blue-400); }
.cal-alert-tag.wind { background: var(--amber-mid); color: var(--amber-400); }
.cal-alert-tag.heat { background: var(--red-mid); color: var(--red-400); }

.cal-loading {
  text-align: center; padding: 60px; color: var(--text-secondary); font-size: 14px;
}

/* ── FOOTER ── */
.site-footer { margin-top: 40px; border-top: 1px solid var(--border-subtle); padding: 18px 0; }
.footer-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-secondary);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .main-layout { grid-template-columns: 1fr; }
  .radar-panel { grid-column: 1; }
  .games-panel { grid-column: 1; }
  .window-cards { grid-template-columns: 1fr 1fr; }
  .header-center { display: none; }
  .cal-grid { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-cell { min-height: 100px; padding: 6px 8px; }
}
@media (max-width: 600px) {
  .header-inner { padding: 0 16px; }
  .main-layout { padding: 12px 16px 0; }
  .summary-strip { height: auto; padding: 14px 18px; flex-wrap: wrap; }
  .sum-divider { display: none; }
  .sum-item { flex: 1 1 40%; padding: 4px 8px; }
  .window-cards { grid-template-columns: 1fr 1fr; }
  .cal-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Leaflet overrides for dark theme */
.leaflet-container { background: var(--bg-inset) !important; }
.leaflet-control-zoom a {
  background: var(--bg-card) !important; color: var(--text-secondary) !important;
  border-color: var(--border-default) !important;
}
.leaflet-control-zoom a:hover { background: var(--bg-card-h) !important; color: var(--text-primary) !important; }