/* ============================================================
   「개선 전」 모드 — [data-mode="before"] 하나로 전환된다.
   별도 페이지가 아니다. 같은 DOM, 같은 숫자, 같은 스크롤/필터/정렬/선택.
   바뀌는 것은 배치 · 위계 · 간격 · 상태 표현뿐이다.

   ⚠️ 여기 재현한 화면은 「정리되지 않은 관제 화면의 전형」이며
   클라이언트의 실제 화면이 아니다 (저장소 비공개 · 열람하지 않음).
   ============================================================ */

:root {
  /* 개선 전에서 쓰는 원색 — 대비는 무너뜨리지 않는다(위계만 무너진다) */
  --bf-normal:  #21D07A;
  --bf-watch:   #F2E43C;
  --bf-caution: #FFA033;
  --bf-fault:   #FF5B52;
  --bf-service: #66AEFF;
  --bf-text:    #B9BEC2;
  --bf-line:    #5F666C;
}

/* 두 모드에서 서로 다른 조각을 DOM 에 함께 담아 두고 표시만 바꾼다 */
.m-before { display: none; }
[data-mode="before"] .m-after  { display: none; }
[data-mode="before"] .m-before { display: revert; }

[data-mode="before"] {
  /* 간격이 전부 같다 — 리듬이 없다 */
  --gap-panel: 8px;
  --gap-section: 8px;
  --panel-pad: 8px;
  --cell-pad: 4px 6px;
  --row-h: 26px;
  --r-ctl: 3px;
  --r-panel: 3px;
  --cell-size: 22px;
  --cell-gap: 2px;
  /* 위계 없는 단일 크기 */
  --fs-2xs: 13px; --fs-xs: 13px; --fs-sm: 13px;
  --fs-tbl: 13px; --fs-md: 13px; --fs-lg: 13px;
  --fs-xl: 15px;  --fs-kpi: 15px;
}

[data-mode="before"] body { color: var(--bf-text); }

/* 지면 사다리를 없앤다 — 전부 같은 회색, 깊이는 탁한 회색 선으로만 */
[data-mode="before"] .panel,
[data-mode="before"] .kpi,
[data-mode="before"] .toolbar,
[data-mode="before"] .topbar { background: var(--bg-app); }
[data-mode="before"] .panel,
[data-mode="before"] .kpi { border-color: var(--bf-line); }
[data-mode="before"] .panel__head,
[data-mode="before"] .toolbar { border-bottom-color: var(--bf-line); }
[data-mode="before"] table.t thead th {
  background: var(--bg-app);
  color: var(--bf-text);
  font-weight: 400; letter-spacing: 0;
  border-bottom: 1px solid var(--bf-line);
}
[data-mode="before"] table.t tbody td {
  color: var(--bf-text);
  border-bottom: 1px solid var(--bf-line);
}
[data-mode="before"] table.t tbody tr:hover td { background: transparent; }
[data-mode="before"] table.t tbody tr[aria-selected="true"] td {
  background: transparent; color: var(--bf-text);
}
[data-mode="before"] table.t tbody tr[aria-selected="true"] td:first-child {
  box-shadow: none;
}
[data-mode="before"] table.t tbody tr[aria-selected="true"] td:first-child::before {
  content: "> "; color: var(--bf-text);
}

/* 좌우 폭 낭비 — max-width 도 여백 리듬도 없다 */
[data-mode="before"] .page {
  max-width: none;
  padding: 8px;
  gap: 8px;
}

/* 제목·라벨의 굵기와 크기 차이가 사라진다 */
[data-mode="before"] .pagehead h1,
[data-mode="before"] .panel__title,
[data-mode="before"] .kpi__n,
[data-mode="before"] .section__label,
[data-mode="before"] .brand__mark {
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--bf-text);
}
[data-mode="before"] .pagehead { align-items: baseline; gap: 8px; }
[data-mode="before"] .pagehead__sub,
[data-mode="before"] .panel__meta,
[data-mode="before"] .kpi__label,
[data-mode="before"] .kpi__foot,
[data-mode="before"] .brand__site,
[data-mode="before"] .clock__t,
[data-mode="before"] .clock__d { color: var(--bf-text); }

/* 숫자를 정렬하지 않는다 — 비례폭 서체, 좌측 정렬 */
[data-mode="before"] .num,
[data-mode="before"] .val,
[data-mode="before"] table.t td.n,
[data-mode="before"] table.t td.mono,
[data-mode="before"] .kpi__n,
[data-mode="before"] .legend__n {
  font-family: var(--ff-sans);
  font-variant-numeric: normal;
  letter-spacing: 0;
  color: var(--bf-text); font-weight: 400;
}
[data-mode="before"] table.t td.n,
[data-mode="before"] table.t th.n { text-align: left; }

/* 상태: 칩이 아니라 원색 텍스트만 */
[data-mode="before"] .chip {
  background: none !important; border: 0 !important;
  height: auto; padding: 0; font-weight: 400; font-size: 13px;
}
[data-mode="before"] .chip__dot,
[data-mode="before"] .val--none::before,
[data-mode="before"] .legend__sw,
[data-mode="before"] .seg__sw,
[data-mode="before"] .state__mark { display: none; }
[data-mode="before"] .chip--normal  { color: var(--bf-normal); }
[data-mode="before"] .chip--watch   { color: var(--bf-watch); }
[data-mode="before"] .chip--caution { color: var(--bf-caution); }
[data-mode="before"] .chip--fault   { color: var(--bf-fault); }
[data-mode="before"] .chip--service { color: var(--bf-service); }
[data-mode="before"] .chip--unknown { color: var(--bf-text); }

/* 값의 부재를 0 으로 접는다 — 공고가 지적한 바로 그 문제 */
[data-mode="before"] .val--none { color: var(--bf-text); font-family: var(--ff-sans); }

/* 분포 바 → 색 구분 없는 한 덩어리 */
[data-mode="before"] .dist__bar { height: 14px; border-color: var(--bf-line); }
[data-mode="before"] .dist__seg { background: #6E7479; border-left-color: var(--bg-app); }
[data-mode="before"] .dist__seg b { display: none; }
[data-mode="before"] .legend { gap: 4px 12px; }
[data-mode="before"] .legend__l, [data-mode="before"] .legend__d { color: var(--bf-text); }

/* 센서 그리드 → 색면이 아니라 원색 숫자 나열 */
[data-mode="before"] .cellgrid {
  grid-template-columns: none;
  display: block; line-height: 1.9;
}
[data-mode="before"] .cell {
  display: inline; width: auto; height: auto;
  background: none !important; box-shadow: none !important;
  border-radius: 0; font-family: var(--ff-sans); font-size: 13px;
  margin-right: 7px; transform: none !important;
}
[data-mode="before"] .cell--normal  { color: var(--bf-normal); }
[data-mode="before"] .cell--watch   { color: var(--bf-watch); }
[data-mode="before"] .cell--caution { color: var(--bf-caution); }
[data-mode="before"] .cell--fault   { color: var(--bf-fault); }
[data-mode="before"] .cell--service { color: var(--bf-service); }
[data-mode="before"] .cell--unknown { color: var(--bf-text); }

/* 개요 맵의 도트 → 회색 사각형 (상태 구분 소실) */
[data-mode="before"] .dot {
  background: #6E7479 !important; box-shadow: none !important;
  width: 8px; height: 8px; border-radius: 0;
}

/* 컨트롤에서 액센트가 사라진다 — 무엇을 누를 수 있는지 알기 어렵다 */
[data-mode="before"] .nav__item[aria-current="page"],
[data-mode="before"] .seg[aria-pressed="true"] {
  background: transparent; color: var(--bf-text);
  box-shadow: none; border-color: var(--bf-line);
  text-decoration: underline;
}
[data-mode="before"] .btn,
[data-mode="before"] .seg,
[data-mode="before"] .field,
[data-mode="before"] select.sel {
  background: var(--bg-app); border-color: var(--bf-line); color: var(--bf-text);
  height: 24px; font-size: 13px;
}
[data-mode="before"] .btn--primary { background: var(--bg-app); color: var(--bf-text); font-weight: 400; }
[data-mode="before"] th[aria-sort] > button { color: var(--bf-text); }
[data-mode="before"] th.sortable .icon { display: none; }

/* 스파크라인 — 형태가 아니라 숫자만. 같은 데이터를 읽기 나쁘게 준다 */
[data-mode="before"] .spark { display: none; }
/* 값의 단위·강조 차이가 사라진다 */
[data-mode="before"] .val__u { font-size: inherit; color: inherit; margin-left: 3px; }
/* KPI 의 진행 바 — 크기 비교 단서를 없앤다 */
[data-mode="before"] .kpi__bar { display: none; }
/* 전 계통 맥락(뒤로 물린 셀)을 안 보여준다 */
[data-mode="before"] .cell.is-off { display: none; }

/* 개선 전 안내 띠 — 정직성 고지. 이 모드에서만 펼친다 */
.beforenote { display: none; }
[data-mode="before"] .beforenote {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 20px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--bf-line);
  font-size: 12px; line-height: 1.55; color: var(--fg-muted);
}
[data-mode="before"] .beforenote .icon { color: var(--fg-faint); margin-top: 2px; }
[data-mode="before"] .beforenote b { color: var(--fg); font-weight: 600; }