:root {
  --bg: #f4f7f9; --fg: #14202b; --card: #ffffff; --border: #d5dde3; --muted: #5d6b76; --accent: #0b5e8a;
  --safe: #0f7a46; --caution: #a86f00; --danger: #c0281c; --unknown: #6c757d;
  --demo: #7a3fb5; --observed: #0b5e8a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10161b; --fg: #eaf0f4; --card: #1a232b; --border: #2b3640; --muted: #9db0bd; --accent: #5cb8e6;
    --safe: #4cd48a; --caution: #f0b429; --danger: #ff7b6e; --unknown: #9aa5ae;
    --demo: #c59bf0; --observed: #5cb8e6;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, "Pretendard", "Malgun Gothic", sans-serif; font-size: 18px; line-height: 1.6; }
.banner { position: sticky; top: 0; z-index: 5; background: #7a3fb5; color: #fff; text-align: center; padding: .5rem 1rem; font-weight: 700; }
nav { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; padding: .8rem 1rem; }
nav a { padding: .55rem 1.1rem; border: 2px solid var(--accent); border-radius: 999px; color: var(--accent); text-decoration: none; font-weight: 700; }
nav a[aria-current="page"] { background: var(--accent); color: #fff; }
main { max-width: 900px; margin: 0 auto; padding: 1rem 1rem 4rem; }
h1 { font-size: 1.7rem; margin: .5rem 0; }
h2 { font-size: 1.25rem; margin: .2rem 0; }
.sub, .muted, .meta { color: var(--muted); font-size: .95rem; }
.rules { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 1.2rem; font-size: .9rem; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { display: flex; gap: 1rem; align-items: center; background: var(--card); border: 3px solid var(--border); border-radius: 16px; padding: 1rem 1.2rem; }
.card.lv-safe { border-color: var(--safe); } .card.lv-caution { border-color: var(--caution); }
.card.lv-danger { border-color: var(--danger); } .card.lv-unknown { border-color: var(--unknown); }
.signal { font-size: 3rem; line-height: 1; width: 3.4rem; text-align: center; }
.lv-safe .signal, .lv-safe .state { color: var(--safe); } .lv-caution .signal, .lv-caution .state { color: var(--caution); }
.lv-danger .signal, .lv-danger .state { color: var(--danger); } .lv-unknown .signal, .lv-unknown .state { color: var(--unknown); }
.state { font-size: 1.5rem; font-weight: 800; margin: 0; }
.vals { margin: .1rem 0; font-size: 1.1rem; }
.badge { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #fff; }
.badge.demo { background: #7a3fb5; } .badge.observed { background: #0b5e8a; }
.badge.field { background: #0f7a46; } .badge.unknown { background: #6c757d; }
.badge.official { background: #0b5e8a; } .badge.provisional { background: #a86f00; } .badge.validated { background: #0f7a46; }
.section-title { margin: 1.6rem 0 .6rem; font-size: 1.2rem; }
.empty, .error, .loading { text-align: center; color: var(--muted); padding: 1.5rem 0; }
.log { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .7rem; }
.log .t { color: var(--muted); font-size: .85rem; }
.controls { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; }
select, button { font: inherit; padding: .5rem .8rem; border-radius: 10px; border: 2px solid var(--border); background: var(--card); color: var(--fg); }
svg.chart { width: 100%; height: auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .9rem; margin: .4rem 0 1rem; }
footer { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 2.5rem; }