:root {
                                                                                                                                                                                                              --bg: #f6f7f9; --panel: #fff; --ink: #1b1f24; --muted: #6b7280; --line: #e3e6ea;
                                                                                                                                                                                                                --ok: #2f9e44; --warn: #f59f00; --danger: #e03131; --none: #adb5bd; --accent: #1971c2;
                                                                                                                                                                                                                }
                                                                                                                                                                                                                @media (prefers-color-scheme: dark) {
                                                                                                                                                                                                                  :root { --bg: #14171a; --panel: #1c2024; --ink: #e8eaed; --muted: #9aa3ad; --line: #2c3238; }
                                                                                                                                                                                                                  }
                                                                                                                                                                                                                  * { box-sizing: border-box; }
                                                                                                                                                                                                                  body { margin: 0; background: var(--bg); color: var(--ink);
                                                                                                                                                                                                                    font: 15px/1.55 "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; }
                                                                                                                                                                                                                    a { color: inherit; text-decoration: none; }
                                                                                                                                                                                                                    button { font: inherit; cursor: pointer; border: 1px solid var(--line);
                                                                                                                                                                                                                      background: var(--panel); color: var(--ink); border-radius: 7px; padding: 7px 14px; }
                                                                                                                                                                                                                      button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
                                                                                                                                                                                                                      select { font: inherit; padding: 6px 8px; border-radius: 7px;
                                                                                                                                                                                                                        border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
                                                                                                                                                                                                                        .muted { color: var(--muted); }

                                                                                                                                                                                                                        .freshness { padding: 9px 18px; font-size: 14px; font-weight: 600; text-align: center; }
                                                                                                                                                                                                                        .freshness.stale { background: #fff4e6; color: #b35309; }
                                                                                                                                                                                                                        .freshness.fresh { background: #ebfbee; color: #2b8a3e; }

                                                                                                                                                                                                                        .layout { display: flex; min-height: 100vh; }
                                                                                                                                                                                                                        .sidebar { width: 210px; flex: none; background: var(--panel);
                                                                                                                                                                                                                          border-right: 1px solid var(--line); padding: 20px 14px; }
                                                                                                                                                                                                                          .brand { display: flex; flex-direction: column; margin-bottom: 20px; }
                                                                                                                                                                                                                          .brand span { font-size: 12px; color: var(--muted); }
                                                                                                                                                                                                                          nav { display: flex; flex-direction: column; gap: 2px; }
                                                                                                                                                                                                                          nav a { padding: 9px 12px; border-radius: 7px; font-size: 14px; }
                                                                                                                                                                                                                          nav a:hover { background: var(--bg); }
                                                                                                                                                                                                                          nav a.active { background: var(--accent); color: #fff; }
                                                                                                                                                                                                                          .origin { margin-top: 22px; font-size: 12px; color: var(--muted); line-height: 1.7; }

                                                                                                                                                                                                                          main { flex: 1; padding: 18px 22px 60px; min-width: 0; }
                                                                                                                                                                                                                          .filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end;
                                                                                                                                                                                                                            background: var(--panel); border: 1px solid var(--line);
                                                                                                                                                                                                                              border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; }
                                                                                                                                                                                                                              .filters label { display: flex; flex-direction: column; gap: 4px;
                                                                                                                                                                                                                                font-size: 12px; color: var(--muted); }

                                                                                                                                                                                                                                .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                                                                                                                                                                                                                                  gap: 12px; margin-bottom: 18px; }
                                                                                                                                                                                                                                  .card { background: var(--panel); border: 1px solid var(--line);
                                                                                                                                                                                                                                    border-radius: 10px; padding: 14px 16px; }
                                                                                                                                                                                                                                    .card .k { font-size: 12px; color: var(--muted); }
                                                                                                                                                                                                                                    .card .v { font-size: 26px; font-weight: 700; margin-top: 4px; }
                                                                                                                                                                                                                                    .card.정상 .v { color: var(--ok); } .card.주의 .v { color: var(--warn); }
                                                                                                                                                                                                                                    .card.위험 .v { color: var(--danger); } .card.none .v { color: var(--none); }

                                                                                                                                                                                                                                    .panel { background: var(--panel); border: 1px solid var(--line);
                                                                                                                                                                                                                                      border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
                                                                                                                                                                                                                                      .panel h2 { margin: 0 0 12px; font-size: 15px; }

                                                                                                                                                                                                                                      table { width: 100%; border-collapse: collapse; font-size: 14px; }
                                                                                                                                                                                                                                      th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
                                                                                                                                                                                                                                      th { font-size: 12px; color: var(--muted); font-weight: 600; }
                                                                                                                                                                                                                                      tbody tr:hover { background: var(--bg); }
                                                                                                                                                                                                                                      .pill { display: inline-block; padding: 2px 9px; border-radius: 999px;
                                                                                                                                                                                                                                        font-size: 12px; font-weight: 600; color: #fff; }
                                                                                                                                                                                                                                        .pill.정상 { background: var(--ok); } .pill.주의 { background: var(--warn); }
                                                                                                                                                                                                                                        .pill.위험 { background: var(--danger); } .pill.데이터.없음, .pill.none { background: var(--none); }

                                                                                                                                                                                                                                        /* Zone 그리드 */
                                                                                                                                                                                                                                        .grid-wrap { overflow-x: auto; }
                                                                                                                                                                                                                                        .zgrid { display: grid; grid-auto-flow: column; gap: 3px; min-width: max-content; }
                                                                                                                                                                                                                                        .zcol { display: grid; grid-template-rows: auto 34px 34px; gap: 3px; text-align: center; }
                                                                                                                                                                                                                                        .zcol .zl { font-size: 11px; color: var(--muted); }
                                                                                                                                                                                                                                        .zcell { border-radius: 5px; min-width: 42px; display: grid; place-items: center;
                                                                                                                                                                                                                                          font-size: 11px; color: #fff; cursor: pointer; }

                                                                                                                                                                                                                                          .chart { width: 100%; height: auto; display: block; }
                                                                                                                                                                                                                                          .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px;
                                                                                                                                                                                                                                            color: var(--muted); margin-top: 8px; }
                                                                                                                                                                                                                                            .legend i { display: inline-block; width: 10px; height: 3px; margin-right: 5px;
                                                                                                                                                                                                                                              vertical-align: middle; }

                                                                                                                                                                                                                                              .reasons li { margin-bottom: 6px; }
                                                                                                                                                                                                                                              .alarm { border-left: 4px solid var(--line); padding: 10px 14px; margin-bottom: 10px;
                                                                                                                                                                                                                                                background: var(--bg); border-radius: 0 8px 8px 0; }
                                                                                                                                                                                                                                                .alarm.위험 { border-left-color: var(--danger); }
                                                                                                                                                                                                                                                .alarm.주의 { border-left-color: var(--warn); }
                                                                                                                                                                                                                                                .alarm .meta { font-size: 12px; color: var(--muted); }

                                                                                                                                                                                                                                                @media (max-width: 760px) {
                                                                                                                                                                                                                                                  .layout { flex-direction: column; }
                                                                                                                                                                                                                                                    .sidebar { width: auto; border-right: none; border-bottom: 1px solid var(--line); }
                                                                                                                                                                                                                                                      nav { flex-direction: row; overflow-x: auto; }
                                                                                                                                                                                                                                                        .origin { display: none; }
                                                                                                                                                                                                                                                          main { padding: 14px; }
                                                                                                                                                                                                                                                          }