/* 로그 화면 전용 시각 언어 — "계기판/노선도"
   ---------------------------------------------------------------------------
   관리자 페이지는 기록을 다루는 곳이고 로그 화면은 신호를 읽는 곳이다. 같은 앱이지만
   하는 일이 다르니 언어도 다르다. 여기 있는 것은 전부 `.rig` 안에서만 적용되고,
   관리자 페이지 쪽 스타일은 한 줄도 건드리지 않는다.

   원칙
     • 색은 장식이 아니라 신호다 — 브랜드색 없음. 색이 보이면 뜻이 있다(정상·주의·오류)
     • 시간이 축이다 — 시각은 정렬 가능한 열이 아니라 골격
     • 없는 것을 그린다 — 빠진 것은 지우지 않고 자리를 비워 표시
     • 숫자가 먼저, 이름은 나중
     • 빽빽한 것이 친절한 것 — 여백은 행 사이가 아니라 구획 사이에 */

.rig {
  --p: #14171c;
  --p2: #1a1e24;
  --rule: #272c34;
  --rule-hi: #39404b;
  --t: #e6e9ed;
  --t2: #98a0ac;
  --t3: #5d6672;
  --ok: #4fb286;
  --warn: #d9a441;
  --bad: #d96a5b;

  background: var(--p);
  color: var(--t);
  border: 1px solid var(--rule);
  margin-bottom: 16px;
  font-weight: 300;
  line-height: 1.5;
}

/* 계기판은 각이 서 있다. 카드도 그림자도 없다. */
.rig, .rig * { border-radius: 0; box-shadow: none; }

/* ── 구획 이름표 — 새긴 것처럼 작고 넓게 ───────────────────────────────── */
.rig .sec {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px 8px;
  border-bottom: 1px solid var(--rule);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--t3);
}
.rig .sec > span { letter-spacing: 0; text-transform: none; font-size: 11px; }

/* ── 상태 램프 — 이 화면에서 색을 가진 유일한 것 ───────────────────────── */
.rig .lamp {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none;
}
.rig .lamp.ok   { background: var(--ok);   box-shadow: 0 0 6px rgba(79,178,134,.55); }
.rig .lamp.warn { background: var(--warn); box-shadow: 0 0 6px rgba(217,164,65,.55); }
.rig .lamp.bad  { background: var(--bad);  box-shadow: 0 0 6px rgba(217,106,91,.55); }
.rig .lamp.off  { background: var(--rule-hi); }

/* ── 판정 줄 — 눈금보다 먼저 읽히는 한 문장 ───────────────────────────── */
.rig .verdict {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--rule); font-size: 13px;
}
.rig .verdict .right {
  margin-left: auto; font-family: ui-monospace, monospace; font-size: 11px; color: var(--t3);
}

/* ── 눈금 — 숫자가 크고 이름표가 작다 ─────────────────────────────────── */
.rig .mods {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-bottom: 1px solid var(--rule);
}
.rig .mod { padding: 14px 18px; border-right: 1px solid var(--rule); }
.rig .mod:last-child { border-right: none; }
.rig .mod .lab {
  font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--t3); margin-bottom: 6px;
}
.rig .mod .read {
  font-family: ui-monospace, monospace; font-size: 26px; font-weight: 500;
  font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em;
}
.rig .mod .read small { font-size: 13px; color: var(--t3); font-weight: 400; }
.rig .mod .foot { font-size: 11px; color: var(--t3); margin-top: 5px; }
.rig .read.ok { color: var(--ok); } .rig .read.warn { color: var(--warn); }
.rig .read.bad { color: var(--bad); }

/* ── 데이터 행 — 모노, 빽빽하게 ───────────────────────────────────────── */
.rig .rows { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.rig .row {
  display: grid; align-items: center; gap: 14px;
  padding: 7px 18px; border-bottom: 1px solid var(--rule);
}
.rig .row:last-child { border-bottom: none; }
.rig .row.head {
  background: var(--p2); color: var(--t3);
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
}
.rig .row .t { color: var(--t2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rig .row .n { color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rig .row .s { color: var(--t2); white-space: nowrap; }
.rig .row .c { color: var(--t3); white-space: nowrap; }
.rig .row .go { color: var(--t3); text-align: right; white-space: nowrap; }
.rig .row .go button { font-size: 11px; }

/* 날짜 구분 — 어제 것과 방금 것이 한 덩어리로 보이면 시각만으로는 못 가른다 */
.rig .daymark {
  padding: 9px 18px 5px; background: var(--p2); border-bottom: 1px solid var(--rule);
  font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .18em; color: var(--t3);
}

/* ── 설명 상자 — 색이 아니라 왼쪽 선으로 구분 ─────────────────────────── */
.rig .explain {
  margin: 0 18px 14px; padding: 11px 14px; background: var(--p2);
  border-left: 2px solid var(--warn); font-size: 12px; color: var(--t2); line-height: 1.65;
}
.rig .explain:first-child { margin-top: 14px; }
.rig .explain b { color: var(--t); font-weight: 500; }
.rig .explain.good { border-left-color: var(--ok); }
.rig .explain.bad  { border-left-color: var(--bad); }

/* ── 검사 막대 ────────────────────────────────────────────────────────── */
.rig .checks { padding: 10px 18px 14px; }
.rig .chk {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--rule);
  font-family: ui-monospace, monospace; font-size: 12px;
}
.rig .chk:last-child { border-bottom: none; }
.rig .chk .nm { color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rig .chk .ct { color: var(--t3); font-variant-numeric: tabular-nums; }
.rig .chk.hit .nm { color: var(--t); }
.rig .chk.hit .ct { color: var(--warn); }

/* ── 척추 (추적) — 없는 것은 자리를 비워 점선으로 ─────────────────────── */
.rig .spine { padding: 8px 18px 16px; }
.rig .node { display: grid; grid-template-columns: 84px 18px 1fr; gap: 0 10px; align-items: start; }
.rig .node .when {
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--t2);
  font-variant-numeric: tabular-nums; padding-top: 9px; text-align: right; white-space: nowrap;
}
.rig .node .rail { position: relative; display: flex; justify-content: center; }
.rig .node .rail::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule-hi);
}
.rig .node:first-child .rail::before { top: 12px; }
.rig .node:last-child .rail::before { bottom: auto; height: 12px; }
.rig .node .pip {
  position: relative; margin-top: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--t2); flex: none;
}
.rig .node.gap .pip {
  background: var(--p); border: 1px dashed var(--bad); width: 10px; height: 10px; margin-top: 8px;
}
.rig .node.gap .rail::before {
  background: repeating-linear-gradient(180deg, var(--bad) 0 3px, transparent 3px 7px);
}
.rig .node .what { padding: 6px 0 13px; }
.rig .node .what b {
  display: block; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 500;
  color: var(--t); letter-spacing: -.01em;
}
.rig .node .what i {
  font-style: normal; font-family: ui-monospace, monospace; font-size: 11px; color: var(--t3);
}
.rig .node.gap .what b { color: var(--bad); }
.rig .node.gap .what i { color: var(--warn); }

/* ── 어휘 격자 (수집 현황) ────────────────────────────────────────────── */
.rig .vocab {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-bottom: 1px solid var(--rule);
}
.rig .vcol { border-right: 1px solid var(--rule); padding: 4px 0 10px; }
.rig .vcol:last-child { border-right: none; }
.rig .vhead {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 18px 6px;
  font-family: ui-monospace, monospace;
}
.rig .vhead b { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rig .vhead span {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--t3);
}

/* ── 토글 — 색이 아니라 반전으로 켜짐을 말한다 ────────────────────────── */
.rig .toggle { display: flex; gap: 2px; align-items: center; }
.rig .toggle button {
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .06em;
  padding: 4px 10px; color: var(--t3); background: transparent;
  border: 1px solid var(--rule-hi); cursor: pointer;
}
.rig .toggle button.on {
  background: var(--t); color: var(--p); border-color: var(--t); font-weight: 500;
}

/* ── 본 것 · 고른 것 ──────────────────────────────────────────────────── */
.rig .decision { border-bottom: 1px solid var(--rule); }
.rig .decision:last-child { border-bottom: none; }
.rig .decision-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px 10px; background: var(--p2); border-bottom: 1px solid var(--rule);
}
.rig .decision-head .who {
  font-family: ui-monospace, monospace; font-size: 13px; font-weight: 500; color: var(--t);
}
.rig .decision-head .meta {
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--t3);
}
.rig .decision-head .out { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* 고른 줄은 색으로 칠하지 않고 왼쪽에 표시를 세운다 — 색은 상태를 위해 아껴 둔다 */
.rig .row.chosen { background: var(--p2); box-shadow: inset 2px 0 0 var(--ok); }
.rig .row.chosen .n { color: var(--t); font-weight: 500; }

/* ── 알림 조각 ────────────────────────────────────────────────────────── */
.rig .note {
  font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .08em;
  padding: 2px 7px; border: 1px solid var(--rule-hi); color: var(--t3); white-space: nowrap;
}
.rig .note.ok   { border-color: var(--ok);   color: var(--ok); }
.rig .note.warn { border-color: var(--warn); color: var(--warn); }
.rig .note.bad  { border-color: var(--bad);  color: var(--bad); }

.rig .muted, .rig .section-desc { color: var(--t3); }
.rig .error { color: var(--bad); padding: 14px 18px; }
.rig .pad { padding: 14px 18px; }
.rig .tabular { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 표가 넘칠 때 페이지가 아니라 표만 움직인다 */
.rig .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 로그 탭에 들어와 있다는 표시. 탭 줄은 공용 크롬이므로 최소한으로만 건드린다. */
.content.log-mode { background: #0e1013; }

/* ── 물려받은 표·폼도 같은 언어로 ─────────────────────────────────────────
   저장 실패와 점검 이력은 표와 입력 폼을 쓴다. 마크업을 다시 쓰는 대신 여기서
   갈아입힌다 -- 처리 기록 동작을 건드리지 않는 쪽이 안전하다. */
.rig table {
  width: 100%; border-collapse: collapse;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}
.rig thead th {
  background: var(--p2); color: var(--t3);
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  text-align: left; padding: 8px 18px; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.rig tbody td {
  padding: 8px 18px; border-bottom: 1px solid var(--rule);
  color: var(--t2); vertical-align: top;
}
.rig tbody tr:last-child td { border-bottom: none; }
.rig tbody td:first-child { color: var(--t); }

/* 배지는 색 대신 테두리로. 색은 램프를 위해 아껴 둔다. */
.rig .badge {
  display: inline-block; background: transparent !important;
  border: 1px solid var(--rule-hi); color: var(--t3) !important;
  font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .08em;
  padding: 2px 7px; font-weight: 400;
}
.rig .badge-success { border-color: var(--ok); color: var(--ok) !important; }
.rig .badge-warn    { border-color: var(--warn); color: var(--warn) !important; }
.rig .badge-muted   { border-color: var(--rule-hi); color: var(--t3) !important; }

.rig input {
  background: var(--p); border: 1px solid var(--rule-hi); color: var(--t);
  font-family: ui-monospace, monospace; font-size: 12px; padding: 5px 8px;
}
.rig input::placeholder { color: var(--t3); }
.rig input:focus { outline: none; border-color: var(--t2); }

.rig .btn {
  background: transparent; border: 1px solid var(--rule-hi); color: var(--t2);
  font-family: ui-monospace, monospace; font-size: 11px; padding: 4px 10px;
}
.rig .btn:hover { border-color: var(--t2); color: var(--t); }
.rig .btn-ghost { border-color: transparent; color: var(--t3); }
.rig .btn-ghost:hover { border-color: var(--rule-hi); color: var(--t); }

.rig p.muted, .rig p.error { padding: 14px 18px; margin: 0; }
.rig .assign-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ── 두 가지 교정 ─────────────────────────────────────────────────────────
   1) 계기판은 판이다. 관리자 페이지의 가운데 정렬 여백 안에 떠 있으면 카드로 보인다.
      로그 탭에서는 내용 영역을 가장자리까지 채운다.
   2) 모노는 측정된 것에만. 한글에 모노를 걸면 폰트가 없어 대체되면서 자간이 벌어지고,
      "본 것 · 고른 것" 같은 제목이 자음 하나씩 떨어져 보인다. */

.content.log-mode {
  max-width: none;
  padding: 0;
}
.content.log-mode .rig {
  border-left: none; border-right: none; margin-bottom: 0;
  border-top: none;
}

/* 라틴·숫자만 모노로 간다. 한글은 본문 글꼴 그대로. */
.rig .sec, .rig .mod .lab, .rig .vhead span, .rig thead th, .rig .row.head,
.rig .daymark, .rig .note, .rig .badge {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  letter-spacing: .08em;
}
.rig .sec { letter-spacing: .12em; }
.rig .row .n, .rig .chk .nm, .rig .node .what b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* 이벤트명·ID·금액·시각은 측정된 것이라 모노를 유지한다. */
.rig .t, .rig .tabular, .rig .mod .read, .rig .vhead b, .rig .chk .ct, .rig .node .when {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.rig .decision-head .who, .rig .decision-head .meta {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  letter-spacing: 0;
}
.rig .s, .rig .c, .rig .explain, .rig .verdict, .rig .mod .foot, .rig .node .what i {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
}

/* 내용이 짧아도 판은 화면을 채운다. 중간에 끊기면 판이 아니라 카드로 보인다. */
.content.log-mode { min-height: calc(100vh - 190px); background: #0e1013; }
.content.log-mode .rig { min-height: calc(100vh - 190px); }