/* domain_dashboard — 색은 역할 토큰으로만 쓴다 (밝은 · 어두운 화면 각각 고른 값). */
:root {
  color-scheme: light;
  --surface-1: #fcfcfb;          /* 카드 · 차트 바탕 */
  --page: #f9f9f7;               /* 화면 바탕 */
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --grid: #e1e0d9;               /* 격자 (hairline) */
  --axis: #c3c2b7;               /* 기준선 */
  --border: rgba(11, 11, 11, 0.10);
  --series-1: #2a78d6;           /* 막대 · 선 (한 계열) */
  --series-1-wash: rgba(42, 120, 214, 0.10);
  --track: #cde2fb;              /* 진행 막대의 빈 부분 — 같은 파랑의 옅은 단계 */
  --hover-wash: rgba(11, 11, 11, 0.04);
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --link: #1c5cab;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --page: #0d0d0d;
    --text-primary: #f0efec;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --series-1: #3987e5;
    --series-1-wash: rgba(57, 135, 229, 0.12);
    --track: #0d366b;
    --hover-wash: rgba(255, 255, 255, 0.06);
    --link: #86b6ef;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --page: #0d0d0d;
  --text-primary: #f0efec;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --series-1: #3987e5;
  --series-1-wash: rgba(57, 135, 229, 0.12);
  --track: #0d366b;
  --hover-wash: rgba(255, 255, 255, 0.06);
  --link: #86b6ef;
}

body {
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 0.9rem;
}
a { color: var(--link); }

/* ── 상단 ─────────────────────────────────────────────── */
.topbar {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { font-weight: 600; color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.topbar .nav-link { color: var(--text-secondary); padding: 0.9rem 0.75rem; border-bottom: 2px solid transparent; }
.topbar .nav-link:hover { color: var(--text-primary); }
.topbar .nav-link.active { color: var(--text-primary); border-bottom-color: var(--series-1); font-weight: 600; }
.topbar .who { color: var(--text-secondary); font-size: 0.8rem; }

.page { max-width: 1440px; margin: 0 auto; padding: 1.25rem 16px 3rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }
.page-head .meta { color: var(--text-secondary); font-size: 0.85rem; }

.section-title { font-size: 1rem; font-weight: 600; margin: 1.75rem 0 0.25rem; }
.section-note { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 0.75rem; }

.panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  height: 100%;
}
.panel-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.panel-title .sub { color: var(--text-muted); font-weight: 400; font-size: 0.75rem; }

.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.num { font-variant-numeric: tabular-nums; }
.loading { opacity: 0.55; transition: opacity 0.2s; }

/* ── 단계 카드 ───────────────────────────────────────── */
.stage-no { color: var(--text-muted); font-weight: 600; margin-right: 0.15rem; }
.stage-app { color: var(--text-muted); font-size: 0.72rem; font-weight: 400; }
.stage-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; margin-top: 0.25rem; }
.stage-value .of { font-size: 0.85rem; font-weight: 400; color: var(--text-secondary); margin-left: 0.25rem; }
.stage-lines { margin-top: 0.6rem; font-size: 0.8rem; color: var(--text-secondary); }
.stage-lines div { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.1rem 0; }
.stage-lines dt { font-weight: 400; color: var(--text-muted); }
.stage-lines dd { margin: 0; text-align: right; color: var(--text-primary); }

/* 진행 막대 (meter): 채움 = 파랑, 빈 부분 = 같은 파랑의 옅은 단계 */
.meter { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; margin-top: 0.5rem; }
.meter > span { display: block; height: 100%; background: var(--series-1); border-radius: 4px; }
.meter.thin { height: 6px; margin-top: 0.2rem; }

/* 상태: 색만으로 뜻을 전하지 않는다 — 아이콘 + 글 */
.state { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--text-primary); white-space: nowrap;
         border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.55rem 0.1rem 0.4rem; }
.state .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-muted); }
.state.running .dot { background: var(--good); }
.state.stalled .dot { background: var(--serious); }
.state.stalled { border-color: var(--serious); }
.state .icon { font-size: 0.72rem; color: var(--text-secondary); }

.alert-line { border-left: 3px solid var(--serious); background: var(--surface-1); padding: 0.5rem 0.75rem;
              border-radius: 4px; color: var(--text-primary); font-size: 0.85rem; margin-bottom: 1rem; }
.notice-line { border-left: 3px solid var(--axis); background: var(--surface-1); padding: 0.5rem 0.75rem;
               border-radius: 4px; color: var(--text-secondary); font-size: 0.8rem; }

/* ── 표 ─────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.data-table th { color: var(--text-muted); font-weight: 500; text-align: left; padding: 0.35rem 0.5rem;
                 border-bottom: 1px solid var(--axis); white-space: nowrap; position: sticky; top: 0; background: var(--surface-1); }
.data-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--grid); vertical-align: middle; }
.data-table td.n, .data-table th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody tr:hover { background: var(--hover-wash); }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.is-active td:first-child { box-shadow: inset 3px 0 0 var(--series-1); }
.table-scroll { overflow-x: auto; }
.table-scroll.tall { max-height: 70vh; overflow-y: auto; }

/* 표 안의 비율 막대 (한 계열) */
.share { display: flex; align-items: center; gap: 0.5rem; min-width: 120px; }
.share .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--grid); overflow: hidden; }
.share .bar > span { display: block; height: 100%; background: var(--series-1); border-radius: 3px; }
.share .pct { width: 3.6rem; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.cell-meter { min-width: 92px; }
.cell-meter .top { display: flex; justify-content: space-between; gap: 0.4rem; font-variant-numeric: tabular-nums; }

/* ── 차트 ───────────────────────────────────────────── */
.viz { position: relative; width: 100%; }
.viz svg { display: block; width: 100%; overflow: visible; }
.viz .grid line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.viz .baseline { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.viz .tick { fill: var(--text-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.viz .bar { fill: var(--series-1); }
.viz .bar.is-hover { opacity: 0.75; }
.viz .hit { fill: transparent; cursor: default; }
.viz .hit:focus { outline: none; }
.viz .hit:focus-visible { stroke: var(--text-secondary); stroke-width: 1; }
.viz .line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz .area { fill: var(--series-1-wash); stroke: none; }
.viz .end-dot { fill: var(--series-1); stroke: var(--surface-1); stroke-width: 2; }
.viz .crosshair { stroke: var(--axis); stroke-width: 1; }
.viz .limit { stroke: var(--axis); stroke-width: 1; }
.viz .limit-label { fill: var(--text-muted); font-size: 10px; }
.viz-empty { color: var(--text-muted); font-size: 0.8rem; padding: 2rem 0; text-align: center; }
.viz-toggle { font-size: 0.75rem; margin-left: auto; color: var(--text-secondary); background: none; border: none; padding: 0; text-decoration: underline; }

.tooltip-box {
  position: fixed; z-index: 1080; pointer-events: none; display: none;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 0.4rem 0.6rem; font-size: 0.78rem; min-width: 120px;
}
.tooltip-box .tt-value { font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.tooltip-box .tt-label { color: var(--text-secondary); }
.tooltip-box .tt-key { display: inline-block; width: 12px; height: 2px; background: var(--series-1); vertical-align: middle; margin-right: 0.35rem; }

/* ── 깔때기 ─────────────────────────────────────────── */
.funnel td.label { white-space: nowrap; }
.funnel td.note { color: var(--text-muted); }

/* ── 이메일 CSV ─────────────────────────────────────── */
.filter-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.filter-row .form-label { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.2rem; }
.check-list { max-height: 320px; overflow-y: auto; min-width: 280px; padding: 0.25rem 0.5rem; }
.check-list label { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; font-size: 0.8rem; cursor: pointer; }
.check-list label span.n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.big-number { font-size: 2rem; font-weight: 600; line-height: 1.1; }

/* ── 로그인 ─────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; text-align: center; }
.login-card h1 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.25rem; }
.google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%;
              border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 1rem; background: var(--surface-1);
              color: var(--text-primary); text-decoration: none; font-weight: 500; }
.google-btn:hover { background: var(--hover-wash); color: var(--text-primary); }

/* 좁은 화면: 표는 칸 안에서만 가로로 밀리고, 화면 전체가 옆으로 밀리지 않게 */
.panel, .col { min-width: 0; }
@media (max-width: 575.98px) {
  .share { min-width: 64px; }
  .share .pct { width: 2.8rem; }
  .stage-lines dd { overflow-wrap: anywhere; }
  .topbar .nav-link { padding: 0.75rem 0.5rem; }
}

@media (forced-colors: active) {
  .meter > span, .share .bar > span, .viz .bar { forced-color-adjust: none; background: Highlight; fill: Highlight; }
}