/* 관리자 화면. 한 페이지 스크롤이라 탭도 라우터도 없다.
   `.app { height: 100dvh }`(core/base.css)를 건드리지 않는다 — 스크롤 주체는
   `.screen` 이어야 하고, min-height 로 바꾸면 헤더가 밀려 나간다. */
:root {
  /* Task 7 Step 1 에서 dataviz 팔레트 검증기로 확정한 값이다 — forecast 는
     채도 하한, hub 는 정상시각 구분 하한 때문에 바뀌었다. 되돌리지 마라. */
  --dom-employment: #23508f;
  --dom-press:      #b8472f;
  --dom-forecast:   #0f9a6e;
  --dom-reports:    #7a5ba6;
  --dom-ask:        #9a6b15;
  --dom-hub:        #4d5563;
}

/* ── 탭 ──
   고용동향 앱의 세그먼트와 같은 모양이다(각 앱이 자기 CSS 로 들고 있어 공용이
   아니다). 성격이 다른 두 화면을 가른다 — 한 두루마리로 이어 붙이면 "수집이 잘
   도나" 와 "사람이 오나" 가 눈에 구분되지 않는다.
   `.screen` 밖에 있어 내용이 길어져도 탭은 제자리에 남는다. */
.segments {
  display: flex;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.segment {
  flex: 1;
  padding: 11px 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}
.segment--active { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }

.screen { padding: 12px; }
.sec { font-size: 13px; color: var(--text-secondary); margin: 20px 0 8px; font-weight: 600; }
.empty { color: var(--text-muted); font-size: 13px; padding: 12px 0; }
.note { color: var(--text-muted); font-size: 12px; margin-top: 8px; line-height: 1.5; }

/* ── 기간 ── */
.periods { display: flex; gap: 6px; margin-bottom: 12px; }
.period {
  flex: 1; padding: 8px 0; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text-secondary); font: inherit; font-size: 13px;
  cursor: pointer;
}
.period--on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── 요약 ── */
.summary { display: flex; gap: 8px; }
.summary__cell {
  flex: 1; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px; text-align: center;
}
.summary__label { font-size: 12px; color: var(--text-secondary); }
.summary__value { font-size: 22px; font-weight: 700; margin: 2px 0; }
.summary__new { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }

/* ── 도메인별 ── */
.domains { display: flex; flex-direction: column; gap: 8px; }
.dom { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.dom__head { display: flex; align-items: center; gap: 6px; }
.dom__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dom__name { flex: 1; font-size: 14px; font-weight: 600; }
.dom__visitors { font-size: 16px; font-weight: 700; }
.dom__bar { height: 5px; border-radius: 3px; background: var(--bg); margin: 8px 0 6px; overflow: hidden; }
.dom__bar i { display: block; height: 100%; }
.dom__meta { font-size: 12px; color: var(--text-secondary); }

/* ── 추이 ── */
.trend { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--text-secondary); }
.legend__i { display: inline-flex; align-items: center; gap: 4px; }
.legend__i i { width: 8px; height: 8px; border-radius: 2px; }

/* ── 목록 표 ──
   table-layout: fixed 와 overflow-wrap 이 함께 있어야 긴 경로·호스트가 표를
   400px 밖으로 밀어내지 않는다. 가로 스크롤은 이 화면에 없어야 한다. */
.rows {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
}
.rows td { padding: 8px 10px; border-top: 1px solid var(--border); font-size: 13px; }
.rows tr:first-child td { border-top: 0; }
.rows__tag { width: 76px; font-size: 11px; font-weight: 600; }
.rows__key { overflow-wrap: anywhere; color: var(--text); }
.rows__bar { width: 68px; }
.rows__bar i { display: block; height: 5px; border-radius: 3px; background: var(--accent); min-width: 2px; }
.rows__num { width: 56px; text-align: right; color: var(--text-secondary); }

/* ── 유입 종류 ── */
.kinds { display: flex; gap: 6px; margin-bottom: 8px; }
.kind {
  flex: 1; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 4px; text-align: center;
}
.kind__name { font-size: 12px; color: var(--text-secondary); }
.kind__num { font-size: 17px; font-weight: 700; }
.kind__pct { font-size: 11px; color: var(--text-muted); }

/* ── 분포 셋 ── */
.dist { margin-bottom: 12px; }
.dist__title { font-size: 12px; color: var(--text-secondary); margin: 0 0 6px; font-weight: 600; }

/* ── 잠금 ── */
.unlock {
  display: flex; flex-direction: column; gap: 10px; max-width: 320px;
  margin: 48px auto; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px;
}
.unlock__label { font-size: 13px; color: var(--text-secondary); }
.unlock__input {
  font: inherit; padding: 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg);
}
.unlock__go {
  font: inherit; padding: 10px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; cursor: pointer;
}
.unlock__hint { font-size: 12px; color: var(--text-muted); margin: 0; }

/* ── 도메인 현황 ──
   워커가 죽어도(미배포·연결실패) 이 구역만은 살아 있어야 한다 — 정적
   JSON 만 읽으므로 워커와 무관하다. --warn-fg/--warn-bg 는 core/tokens.css
   의 기존 경고 색이다(ask.css 에서도 같은 값을 쓴다). */
.status { display: flex; flex-direction: column; gap: 8px; }
.status__card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.status__card--warn { border-color: var(--warn-fg); background: var(--warn-bg); }
.status__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.status__name { flex: 1; font-size: 14px; font-weight: 600; }
.status__age { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.status__age--stale { color: var(--warn-fg); font-weight: 600; }
.status__metrics { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.status__warns { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--warn-fg); }
.status__warns li { margin: 2px 0; overflow-wrap: anywhere; }

/* ── 도구 ── */
.tools {
  margin: 24px 0 8px; padding: 12px; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
/* 주인 방문 제외 상태. 스위치가 아니라 **사실을 알리는 문장**이다 — 본인 방문을
   빼는 것은 켜고 끄는 옵션이 아니라 기본 동작이라, 누를 것이 없어야 한다. */
.owner-status {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.tools__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* 이름이 `toggle__` 로 남아 있지만 짝이던 `.toggle`(체크박스 줄)은 없어졌다.
   지금은 '토큰 지우기' 버튼 하나만 쓴다. */
.toggle__btn {
  font: inherit; font-size: 13px; align-self: flex-start; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text-secondary); cursor: pointer;
}

/* ── 헤더 새로고침 ── */
.header__refresh {
  font: inherit; font-size: 18px; line-height: 1;
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text-secondary); cursor: pointer;
}
/* 도는 동안 눌린 것이 보여야 한다. 단추가 그대로면 사람이 두 번 세 번 누르고,
   그때마다 D1 조회가 늘어난다. */
.header__refresh[disabled] { opacity: 0.5; cursor: default; }