/* AdGuard Home(Tabler 기반) 웹 UI 의 색·간격·카드 구성을 따른다. */
:root {
  --bg: #f5f7fb;
  --card: #fff;
  --border: rgba(0, 40, 100, .12);
  --text: #495057;
  --text-strong: #212529;
  --muted: #9aa0ac;
  --header: #fff;
  --brand: #66b574;
  --blue: #467fcf;
  --red: #cd201f;
  --green: #5eba00;
  --yellow: #c9a20c;           /* AGH #f1c40f 는 흰 배경 대비가 낮아 한 단계 어둡게 */
  --row-hover: rgba(0, 0, 0, .02);
  --bar-bg: #e9ecef;
  --badge-ok: #5eba00;
  --badge-warn: #f1c40f;
  --badge-fail: #cd201f;
  --grid: rgba(0, 40, 100, .08);
  --tooltip-bg: #212529;
  --tooltip-text: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131313;
    --card: #1c1c1c;
    --border: rgba(255, 255, 255, .08);
    --text: #d6d6d6;
    --text-strong: #f3f3f3;
    --muted: #8a8f99;
    --header: #1c1c1c;
    --yellow: #f1c40f;
    --row-hover: rgba(255, 255, 255, .03);
    --bar-bg: #2c2c2c;
    --grid: rgba(255, 255, 255, .07);
    --tooltip-bg: #f3f3f3;
    --tooltip-text: #1c1c1c;
  }
}
:root[data-theme="dark"] {
  --bg: #131313; --card: #1c1c1c; --border: rgba(255, 255, 255, .08); --text: #d6d6d6; --text-strong: #f3f3f3;
  --muted: #8a8f99; --header: #1c1c1c; --yellow: #f1c40f; --row-hover: rgba(255, 255, 255, .03); --bar-bg: #2c2c2c;
  --grid: rgba(255, 255, 255, .07); --tooltip-bg: #f3f3f3; --tooltip-text: #1c1c1c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 .9375rem/1.5 "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* 헤더 */
.header { background: var(--header); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.header__row { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text-strong); font-size: 1.125rem; white-space: nowrap; }
.brand__icon { width: 26px; height: 26px; fill: var(--brand); }
.brand__check { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.brand__name b { font-weight: 600; color: var(--brand); }
.nav { display: flex; gap: 4px; overflow-x: auto; flex: 1; }
.nav__item { padding: 16px 10px 15px; color: var(--muted); border-bottom: 1px solid transparent; white-space: nowrap; font-size: .9375rem; }
.nav__item:hover { color: var(--text); }
.nav__item.active { color: var(--brand); border-bottom-color: var(--brand); }
.header__status { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--muted); white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
.dot.off { background: var(--red); }

/* 페이지 제목 */
.page-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 24px 0 20px; }
.page-title { margin: 0; font-size: 1.5rem; font-weight: 400; color: var(--text-strong); }
.page-subtitle { color: var(--muted); font-size: .875rem; }

/* 그리드 */
.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-bottom: 24px; }
.col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; } .col-7 { grid-column: span 7; }
.col-5 { grid-column: span 5; } .col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; }
@media (max-width: 991px) { .col-8, .col-7, .col-5, .col-4 { grid-column: span 12; } .col-3 { grid-column: span 6; } }
@media (max-width: 575px) { .col-3 { grid-column: span 12; } .header__status { display: none; } .card-header { flex-direction: column; gap: 2px; } .card-body { padding: 1rem; } .row { gap: 16px; margin-bottom: 16px; } }

/* 카드 */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); min-width: 0; height: 100%; display: flex; flex-direction: column; }
.card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 3.5rem; padding: .875rem 1.5rem; border-bottom: 1px solid var(--border); }
.card-title { margin: 0; font-size: 1.125rem; font-weight: 400; color: var(--text-strong); }
.card-hint { color: var(--muted); font-size: .8125rem; }
.card-body { padding: 1.25rem 1.5rem; flex: 1; }

/* 통계 카드 (AGH 대시보드 상단 4칸) */
.stat { position: relative; overflow: hidden; padding: 1.25rem 1.5rem 0; }
.stat__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.stat__value { font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stat__delta { font-size: .875rem; font-weight: 600; white-space: nowrap; }
.stat__label { color: var(--muted); margin-top: 4px; font-size: .9375rem; }
.stat__chart { height: 64px; margin: 8px -1.5rem 0; }
.text-blue { color: var(--blue); } .text-red { color: var(--red); } .text-green { color: var(--green); } .text-yellow { color: var(--yellow); }
.text-muted { color: var(--muted); }

/* 일반 통계 */
.general { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.general__value { font-size: 1.375rem; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.general__label { font-size: .8125rem; color: var(--muted); }

/* 차트 */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .baseline { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .baseline-label { fill: var(--muted); font-size: 11px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8125rem; margin-bottom: 8px; }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 12px; height: 3px; border-radius: 2px; }

/* 표 */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th { text-align: left; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .75rem 1rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: .7rem 1rem; border-top: 1px solid var(--border); vertical-align: middle; }
.table tr:first-child td { border-top: 0; }
.table tbody tr:hover { background: var(--row-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table th.num { text-align: right; }
.table .first { padding-left: 1.5rem; } .table .last { padding-right: 1.5rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; word-break: break-all; }
#upstreams-table { min-width: 760px; } #upstreams-table .mono { word-break: normal; white-space: nowrap; }
#filters-table { min-width: 480px; } #filters-table td.first { min-width: 200px; }
#rules-table { min-width: 320px; }
.dim td { color: var(--muted); }
.bar { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.bar__track { width: 72px; height: 4px; border-radius: 2px; background: var(--bar-bg); overflow: hidden; }
.bar__fill { height: 100%; background: var(--blue); border-radius: 2px; }

/* 배지 (AGH badge) */
.badge { display: inline-block; padding: .2em .5em; border-radius: 3px; font-size: .75rem; font-weight: 600; line-height: 1.2; color: #fff; white-space: nowrap; }
.badge-ok { background: var(--badge-ok); } .badge-warn { background: var(--badge-warn); color: #212529; } .badge-fail { background: var(--badge-fail); }
.badge-muted { background: var(--bar-bg); color: var(--text); }

/* 점검 기록 */
.checks { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; }
.checks li { display: grid; grid-template-columns: 88px auto 1fr; gap: 12px; align-items: baseline; padding: .75rem 1.5rem; border-top: 1px solid var(--border); font-size: .875rem; }
.checks li:first-child { border-top: 0; }
.checks__date { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 575px) { .checks li { grid-template-columns: 1fr; gap: 4px; } }

/* 서버 설정 */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: .875rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--text-strong); word-break: break-all; }

.footer { border-top: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: .8125rem; padding: 16px 0; margin-top: 8px; }
.footer__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

.tooltip { position: fixed; z-index: 20; pointer-events: none; background: var(--tooltip-bg); color: var(--tooltip-text); border-radius: 3px; padding: 6px 10px; font-size: .8125rem; line-height: 1.4; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); white-space: nowrap; }
.tooltip b { font-weight: 600; }
.tooltip .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.empty { color: var(--muted); padding: 1.25rem 1.5rem; font-size: .875rem; }