/* Sight-Link 관제 화면 · 디자인 토큰
 *
 * 소개 사이트가 아니라 관제요원이 여덟 시간 쳐다보는 작업면이다. 그래서
 * 라이트 그레이 바탕 · 흰 작업면 · 얇은 선으로 간다. 그래디언트와 그림자는
 * 정보를 담지 않으면서 시선을 끌기 때문에 쓰지 않는다.
 *
 * 색은 상태를 뜻할 때만 쓴다. 장식으로 쓰기 시작하면 실제로 빨간 것이
 * 올라왔을 때 아무도 알아채지 못한다.
 *
 *   파랑  Tracking · 시스템이 지금 보고 있는 것
 *   주황  점검 필요 · 사람이 확인해야 하는 것
 *   빨강  실제 긴급 (현재 데이터에는 없다. critical 이 나오면 그때 쓴다)
 *   초록  시스템 정상
 *   보라  관제요원이 확인한 것 — 모델 판정과 반드시 구분한다
 */

:root {
  color-scheme: light;

  --bg: #eceef1;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --surface-3: #eef0f3;
  --surface-inset: #22262c;   /* 영상 무대 — 영상 주변은 어두워야 화면이 읽힌다 */

  --line: #d7dbe1;
  --line-soft: #e6e9ed;
  --line-strong: #b9bfc8;

  --text: #14171c;
  --text-2: #4a525d;
  --text-3: #7b838f;
  --text-inv: #ffffff;

  --blue: #1c6fe0;
  --blue-soft: #e7f0fd;
  --blue-line: #a9c9f4;

  --orange: #c2670a;
  --orange-soft: #fdf1e2;
  --orange-line: #f0c68b;

  --red: #c62d1f;
  --red-soft: #fdecea;
  --red-line: #f0aca5;

  --green: #12734f;
  --green-soft: #e6f4ee;
  --green-line: #9dd3bd;

  --violet: #6b46c9;
  --violet-soft: #f0ebfb;
  --violet-line: #c9b7ee;

  --grey-soft: #eef0f3;
  --grey-line: #d7dbe1;

  --sans: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  --mono: "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace;

  --r-sm: 2px;
  --r: 4px;
  --r-lg: 6px;

  --topbar-h: 48px;
  --rail-w: 208px;
  --stream-w: 376px;
  --dock-h: 188px;

  --focus: 2px solid #1c6fe0;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }

:focus-visible { outline: var(--focus); outline-offset: 1px; }

a { color: var(--blue); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3c9d1; border: 3px solid var(--surface); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}