/*
 * 공통 컴포넌트 — user / admin / gds007 이 함께 쓴다.
 *
 * 로드 순서상 영역별·페이지별 CSS보다 먼저 온다. 즉 여기 규칙은 "기본값"이고
 * 페이지 CSS가 같은 선택자를 쓰면 페이지 쪽이 이긴다. 이관이 진행될수록 페이지
 * CSS의 중복 규칙을 지워 이 파일로 수렴시킨다.
 */

/* ------------------------------------------------------------
 * 면 — 카드/패널
 *
 * 계측기 패널은 그림자로 띄우지 않는다. 면 분할은 선(graticule)이 맡는다.
 * ------------------------------------------------------------ */
.card,
.hero-card,
.panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
}

.section {
  margin-bottom: var(--sp-8);
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

/* 섹션 제목 옆 카운트 등 — 계측기 라벨 취급. */
.section-title-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}

.subtitle {
  color: var(--ink-dim);
  font-size: var(--fs-13);
}

/* ------------------------------------------------------------
 * 조작 — 버튼
 * ------------------------------------------------------------ */
button,
.btn {
  font-family: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

button:hover,
.btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--ink-faint);
}

button:disabled,
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  font-weight: var(--fw-semibold);
}
.btn-primary:hover {
  background: var(--signal-hover);
  border-color: var(--signal-hover);
}

/* ------------------------------------------------------------
 * 입력
 * ------------------------------------------------------------ */
input,
select,
textarea,
.select {
  font-family: inherit;
  font-size: var(--fs-13);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-ink);
}

/* 날짜·수치 입력은 자릿수가 흔들리지 않게 mono 로. */
input[type='date'],
input[type='number'],
input[type='time'] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
 * 배지 — pill 반경은 여기에만 쓴다(카드에 쓰지 말 것).
 * ------------------------------------------------------------ */
.pill,
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--graticule);
  border-radius: var(--badge-radius);
  background: var(--surface-inset);
  color: var(--ink-dim);
  font-size: var(--fs-12);
  white-space: nowrap;
}

/* 상태 4단계 — 채도는 오직 여기에 쓴다.
 *
 * 기본은 잉크색만 바꾼다. 표식(.status-mark)처럼 면이 없어야 하는 자리에도 같은
 * 클래스를 쓸 수 있어야 하기 때문이다. 면과 테두리는 배지 모양을 갖춘 요소
 * (.pill / .badge)에만 얹는다. */
.state-good   { color: var(--state-good-ink); }
.state-normal { color: var(--state-normal-ink); }
.state-warn   { color: var(--state-warn-ink); }
.state-alert  { color: var(--state-alert-ink); }

.pill.state-good,   .badge.state-good   { background: var(--state-good-soft);   border-color: var(--state-good-ink); }
.pill.state-normal, .badge.state-normal { background: var(--state-normal-soft); border-color: var(--state-normal-ink); }
.pill.state-warn,   .badge.state-warn   { background: var(--state-warn-soft);   border-color: var(--state-warn-ink); }
.pill.state-alert,  .badge.state-alert  { background: var(--state-alert-soft);  border-color: var(--state-alert-ink); }

/* 상태 표식 — 등급을 색만이 아니라 모양으로도 구분한다(원/삼각형/팔각형).
   색각 이상 사용자에게 네 단계가 한 덩어리로 보이지 않게 하기 위함이다. */
.status-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  vertical-align: -0.15em;
  /* 크기 기본값. 예전엔 여기에 없어서 페이지 CSS 의 .status-icon(22px)이 있는
     화면에서만 보였다 — 그 규칙이 없는 화면에서는 0×0 으로 사라졌다. */
  width: 16px;
  height: 16px;
}

/* '상태 없음'. 무신호처럼 아직 판정할 근거가 없는 자리에 쓴다. 상태 4색 중 어느
   것도 쓰지 않는 게 요점이다 — 색을 붙이는 순간 판정이 돼 버린다. */
.status-mark.is-none::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink-faint);
  border-radius: 999px;
}

.status-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 도트·스와치는 채도를 유지한 mark 값을 쓴다(면이라 대비 규칙이 다르다). */
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--r-sm);
  flex: none;
}
.swatch-good   { background: var(--state-good-mark); }
.swatch-normal { background: var(--state-normal-mark); }
.swatch-warn   { background: var(--state-warn-mark); }
.swatch-alert  { background: var(--state-alert-mark); }

/* ------------------------------------------------------------
 * 표 — 계측 데이터의 기본 표현
 * ------------------------------------------------------------ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-12);
}

/* 표 머리글은 sans 로 둔다. 헤더 대부분이 한글이라 mono + 넓은 자간을 걸면
   글자가 흩어져 읽기 어려워진다 — 각인 느낌은 .eyebrow 가 맡는다. */
.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--sp-2) var(--sp-3);
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--table-border);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--graticule-faint);
  vertical-align: middle;
}

.table tbody tr:hover {
  background: var(--surface-hover);
}

/* 수치 열은 우측 정렬 + 자릿폭 고정 — 세로로 자릿수가 맞아야 읽힌다. */
.table td.num,
.table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
 * 시그니처 — 눈금(graticule)
 *
 * 수치 하나만 던지지 않고 "정상 범위 어디쯤인지"를 함께 보여준다.
 * 장식이 아니라 정보다: 정격값이 잘못 들어가 이상탐지가 착시를 일으킨 적이
 * 있었고(2026-07 정격 6대 일괄 정정), 그 판단 근거를 화면에 상주시킨다.
 *
 * 마크업:
 *   <div class="gauge" style="--gauge-pos:62%; --gauge-limit:80%">
 *     <div class="gauge-track"><span class="gauge-fill"></span></div>
 *     <div class="gauge-scale"><span>0</span><span>정격 1,200</span></div>
 *   </div>
 * ------------------------------------------------------------ */
.gauge {
  --gauge-pos: 0%;
  --gauge-limit: 100%;
  --gauge-ink: var(--signal);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.gauge-track {
  position: relative;
  height: 6px;
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  border: 1px solid var(--graticule);
  overflow: hidden;
}

/* 25% 간격 눈금. 배경 그라디언트라 DOM 을 늘리지 않는다. */
.gauge-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--graticule-strong) 0 1px,
    transparent 1px 25%
  );
  opacity: 0.7;
}

.gauge-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--gauge-pos);
  background: var(--gauge-ink);
  transition: width var(--dur-base) var(--ease);
}

/* 임계선 — 정격/한계. 눈금 위에 얹히는 단 하나의 강조. */
.gauge-track::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: var(--gauge-limit);
  width: 2px;
  background: var(--state-alert-mark);
}

.gauge-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.gauge.is-good  { --gauge-ink: var(--state-good-mark); }
.gauge.is-warn  { --gauge-ink: var(--state-warn-mark); }
.gauge.is-alert { --gauge-ink: var(--state-alert-mark); }

/* ------------------------------------------------------------
 * 내비게이션 — user/gds007 이 공유하는 사이드바
 * ------------------------------------------------------------ */
.user-menu-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  color: var(--nav-ink);
  font-size: var(--fs-13);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.user-menu-link:hover {
  background: var(--surface-hover);
  color: var(--nav-ink-active);
}

.user-menu-link.active {
  background: var(--nav-active-bg);
  border-left-color: var(--nav-active-marker);
  color: var(--nav-ink-active);
  font-weight: var(--fw-medium);
}

/* 아이콘은 인라인 SVG 라서 stroke="currentColor" 가 이 요소의 color 를 그대로
   따라간다 — 활성 메뉴에서 --signal, 비활성에서 --ink-dim 으로 자동 전환된다. */
.user-menu-icon,
.admin-menu-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
}

.user-menu-icon svg,
.admin-menu-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.icon-inline {
  width: 100%;
  height: auto;
}

/* 페이지 제목·pill 안의 아이콘. 글자 크기를 따라가되 획은 잉크색보다 한 단계
   물러나게 해서, 제목 글자가 먼저 읽히도록 한다. */
/* 아이콘은 곁에 있는 글자색을 따라간다. 예전에는 여기서 --ink-dim 으로 못박아
   뒀는데, 색이 채워진 버튼(실행 · 사용량 그래프처럼 --signal 배경) 위에서는 회색
   아이콘이 묻혀 보이지 않았다. 라이트 테마에서 대비가 1.7:1 까지 떨어졌다.
   한 단계 물러나야 하는 자리는 아래에서 따로 지정한다. */
.title-icon {
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.18em;
  margin-right: var(--sp-2);
  color: inherit;
}

/* 페이지 제목 옆 아이콘만 잉크보다 흐리게 — 제목 글자가 먼저 읽혀야 한다. */
.topbar h1 .title-icon,
.page-topbar h1 .title-icon {
  color: var(--ink-dim);
}

.title-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pill .title-icon,
a.pill .title-icon {
  margin-right: var(--sp-1);
}

.user-menu-hint {
  padding: var(--sp-3);
  color: var(--ink-faint);
  font-size: var(--fs-12);
  line-height: 1.5;
}

/* ------------------------------------------------------------
 * 판독값(readout) — 대표 수치의 정본 표현
 *
 * 예전에는 같은 뜻의 덩어리가 .stat / .kpi-* / .metric-* / .pa-* 로 다섯 벌 넘게
 * 갈라져 있었고, 저마다 반경·여백·굵기가 달랐다. 여기로 모은다.
 *
 * 구성은 항상 같다: 각인 라벨 → 수치(mono, 자릿폭 고정) → 단위 → 눈금.
 * 눈금(.gauge)을 붙이는 게 이 컴포넌트의 요점이다. 수치 하나만 던지면 운영자가
 * "이게 큰 값인가"를 판단할 근거가 없다. 정격 대비 위치를 값과 함께 들고 다닌다.
 *
 * 마크업:
 *   <div class="readout">
 *     <div class="eyebrow">전력</div>
 *     <div class="readout-value">8,420<span class="readout-unit">W</span></div>
 *     <div class="gauge" style="--gauge-pos:70%; --gauge-limit:88%"> … </div>
 *   </div>
 * ------------------------------------------------------------ */
.readout {
  --readout-size: var(--fs-24);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.readout-value {
  font-family: var(--font-mono);
  font-size: var(--readout-size);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* 단위는 수치가 아니다 — sans 로 되돌리고 한 단계 물러나게 한다.
   그래야 자릿수가 바뀔 때 눈이 숫자 폭만 따라간다. */
.readout-unit {
  margin-left: var(--sp-1);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: var(--ink-dim);
}

.readout-lg { --readout-size: var(--fs-32); }
.readout-sm { --readout-size: var(--fs-16); }

/* 상태가 실린 수치. 색은 여기서만 붙는다. */
.readout-value.state-good   { color: var(--state-good-ink); }
.readout-value.state-normal { color: var(--state-normal-ink); }
.readout-value.state-warn   { color: var(--state-warn-ink); }
.readout-value.state-alert  { color: var(--state-alert-ink); }

/* ------------------------------------------------------------
 * 수치 띠(stat-strip) — 화면 상단의 요약 행
 *
 * 칸 사이를 간격이 아니라 실선으로 나눈다. 계측기 전면판의 분할과 같은 규칙이라
 * 카드 여러 장이 떠 있는 것보다 한 덩어리로 읽힌다.
 * ------------------------------------------------------------ */
.stat-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--graticule);
  border-radius: var(--card-radius);
  background: var(--surface-raised);
  overflow: hidden;
}

.stat-strip > * {
  padding: var(--sp-2) var(--sp-3);
  border-right: 1px solid var(--graticule-faint);
  min-width: 0;
}
.stat-strip > *:last-child { border-right: 0; }

/* ------------------------------------------------------------
 * 계기 그리드(metric-grid) — 카드 안의 보조 수치들
 *
 * stat-strip 과 같은 원리를 카드 내부에 축소해 적용한다. 배경색이 아니라 1px 틈으로
 * 칸을 나눠서, 칸 수가 3개든 6개든 같은 밀도로 읽힌다.
 * ------------------------------------------------------------ */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(var(--metric-cols, 3), minmax(0, 1fr));
  gap: 1px;
  background: var(--graticule-faint);
  border: 1px solid var(--graticule-faint);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.metric-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2);
  background: var(--surface-raised);
  min-width: 0;
}

.metric-cell .eyebrow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-cell-value {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.metric-cell-unit {
  margin-left: 3px;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  color: var(--ink-dim);
}

/* ------------------------------------------------------------
 * 장비 카드(device-card)
 *
 * user 장비 목록과 adminViewer 업체별 장비 페이지가 같은 마크업을 공유한다
 * (buildDeviceCards 를 readOnly 로 재사용). 정의는 한 벌이어야 한다.
 * ------------------------------------------------------------ */
/* 면만 정의한다. 배치(flex/grid/margin)는 페이지가 정한다 — 카드 안의 구성이
   장비 종류(gds007 / gds-eco / gds-hyd)마다 다르기 때문이다. */
.device-card {
  padding: var(--sp-3);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  min-width: 0;
}

.device-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}

.device-card-name {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

/* MAC·설치 위치 같은 식별자는 각인 라벨 취급 — mono 로 두면 목록에서 세로로 맞는다. */
.device-card-meta {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--ink-faint);
}

/* ------------------------------------------------------------
 * 차트 틀(chart-frame)
 *
 * 차트는 라이브러리 없이 인라인 SVG/canvas 로 그린다. 그림은 JS 가 그리지만
 * 제목·범례·축 라벨·각주가 놓이는 자리는 매번 페이지가 새로 만들고 있었다
 * (.chart-card / .area-chart / .heatmap-* / .bar-wrap / .drift-line).
 * 틀만 여기서 고정하고 안쪽은 그대로 둔다.
 * ------------------------------------------------------------ */
.chart-frame {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--card-pad);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  min-width: 0;
}

.chart-frame-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.chart-frame-title {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}

/* 범례 — 스와치는 채도를 유지한 mark 값을 쓴다(.swatch 규칙과 같은 이유). */
.chart-legend {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-11);
  color: var(--ink-dim);
}

.chart-legend > * {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.chart-plot {
  position: relative;
  min-width: 0;
}

.chart-plot svg,
.chart-plot canvas {
  display: block;
  width: 100%;
}

/* 축 라벨·각주는 판독 보조라 항상 한 단계 물러나 있다. */
.chart-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------
 * 조회 줄(toolbar) — 날짜 범위·필터·실행이 놓이는 행
 * ------------------------------------------------------------ */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* 오른쪽으로 밀어내는 자리(새로고침·내보내기 등). */
.toolbar-end { margin-left: auto; }

/* ------------------------------------------------------------
 * 표 — 줄무늬. --table-stripe 는 토큰에 있었는데 아무도 안 쓰고 페이지마다
 * .theme-light … nth-child(even) 를 다시 만들고 있었다.
 * ------------------------------------------------------------ */
.table-zebra tbody tr:nth-child(even) td {
  background: var(--table-stripe);
}
.table-zebra tbody tr:hover td {
  background: var(--surface-hover);
}

/* ------------------------------------------------------------
 * 대화상자(dialog)
 *
 * 앱 전체에 모달이 하나뿐이었고(Slack 전송이력) 그것도 페이지 CSS 안에 손으로
 * 만들어져 있었다. 막 색 rgba(2,8,23,0.62) 도 팔레트에 없는 일회용 값이었다.
 *
 * 그림자를 쓰는 몇 안 되는 자리다 — 여기서는 실제로 배경 위로 떠야 한다.
 * ------------------------------------------------------------ */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--overlay-scrim);
}

.dialog {
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: min(920px, 100%);
  max-height: min(80vh, 720px);
  padding: var(--sp-4);
  background: var(--surface-raised);
  border: 1px solid var(--graticule);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-md);
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--graticule);
}

.dialog-title {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
}

.dialog-body {
  overflow: auto;
  min-height: 0;
}

.dialog-close {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: none;
}

/* ------------------------------------------------------------
 * 요약 수치(stats / stat) — 화면 상단의 집계 행
 *
 * 이 이름은 user 장비목록·adminViewer·전력 이상탐지·장비 상태 네 화면이 함께 쓰는데
 * 정의가 파일마다 따로 있었다(값도 조금씩 달랐다: 반경 14/16px, 값 24/26px,
 * 굵기 700/800). 정본을 여기 둔다.
 *
 * 라벨은 액센트색이 아니라 각인 라벨이다. 예전에는 --signal(시안)로 칠해져 있어서
 * "누를 수 있는 것"처럼 보였고, 색을 상태에만 쓴다는 규칙도 어겼다.
 * ------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4);
}

.stat {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--graticule);
  border-radius: var(--card-radius);
  background: var(--surface-raised);
  min-width: 0;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.stat-value {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.stat-value.state-good   { color: var(--state-good-ink); }
.stat-value.state-normal { color: var(--state-normal-ink); }
.stat-value.state-warn   { color: var(--state-warn-ink); }
.stat-value.state-alert  { color: var(--state-alert-ink); }

.stat-hidden { display: none; }

/* ------------------------------------------------------------
 * LLM 실행 버튼 — 장비 상세와 예측 화면이 함께 쓴다.
 *
 * 두 페이지 CSS 에 같은 정의가 한 벌씩 있었고, 호버 규칙은 한쪽에만 붙어 있었다.
 * 그래서 예측 화면에서는 호버 때 components.css 의 button:hover 가 이겨서
 * 배경만 --surface-hover 로 바뀌고 흰 글자가 그대로 남아 글자가 사라졌다.
 * ------------------------------------------------------------ */
.llm-btn {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--btn-primary-bg);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  cursor: pointer;
}

/* 지우지 말 것 — components.css 의 button:hover(0,1,1)가 .llm-btn(0,1,0)을 이긴다. */
.llm-btn:hover {
  background: var(--signal-hover);
  color: var(--btn-primary-ink);
}