/* wiki 모니터링 — 색은 design.css·app.css 의 토큰만 쓴다.
   막대 = --info(진한 파랑), 답 못 받음 = --red, p90 선 = --warning. */

.wm-range { display: flex; gap: 6px; }
.wm-range .btn[aria-pressed="true"] {
  background: var(--red-soft);
  color: var(--red-text);
  border-color: var(--red-soft);
}

.wm-status, .wm-empty { color: var(--muted); font-size: 14px; padding: 18px 0; }
.wm-empty { padding: 8px 0; }
.wm-period { color: var(--muted); font-size: 13px; margin: -8px 0 14px; }

.wm-metrics { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.wm-metrics .metric-label { margin-bottom: 6px; }
.wm-metrics .metric-value { font-size: 26px; font-variant-numeric: tabular-nums; }
.wm-metric-sub { font-size: 12px; color: var(--faint); margin-top: 2px; }

.wm-panel { margin-bottom: 16px; }
.wm-panel h2 { font-size: 16px; letter-spacing: -.3px; }
.wm-sub { color: var(--muted); font-size: 13px; margin: 4px 0 14px; line-height: 1.6; }
.wm-h { font-size: 19px; margin: 26px 0 12px; letter-spacing: -.4px; }
.wm-h small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 6px; }

.wm-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.wm-grid2 > .wm-panel { margin-bottom: 16px; }

/* 일별 차트 */
.wm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-bottom: 8px; align-items: center; }
.wm-legend-gap { margin-top: 18px; }
.wm-legend-max { margin-left: auto; color: var(--faint); }
.wm-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.wm-key-q { background: var(--info); }
.wm-key-u { background: var(--red); }
.wm-key-p50 { background: var(--info); height: 3px; vertical-align: 3px; }
.wm-key-p90 { background: var(--warning); height: 3px; vertical-align: 3px; }

.wm-svg { display: block; width: 100%; height: 160px; background: var(--surface-2); border-radius: 10px; }
.wm-svg-line { height: 110px; }
.wm-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.wm-bar-q { fill: var(--info); }
.wm-bar-u { fill: var(--red); }
.wm-line-p50, .wm-line-p90 { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.wm-line-p50 { stroke: var(--info); }
.wm-line-p90 { stroke: var(--warning); }
.wm-xaxis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); font-size: 11px; color: var(--faint); margin-top: 4px; }
.wm-xaxis span { text-align: center; white-space: nowrap; overflow: visible; font-variant-numeric: tabular-nums; }

/* 시간대 */
.wm-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 150px; align-items: end; }
.wm-hour { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.wm-hour-bar { display: block; background: var(--info); border-radius: 3px 3px 0 0; min-height: 1px; }
.wm-hour-label { font-size: 10px; color: var(--faint); text-align: center; height: 16px; line-height: 16px; }
.wm-hours-note { margin: 10px 0 0; }

/* 표 */
.wm-table-wrap { overflow-x: auto; max-width: 100%; }
.wm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wm-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.wm-table td { padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.wm-table .num, .wm-barlist .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wm-table th:not(:first-child) { text-align: right; }
.wm-table code { font-size: 12px; }
.wm-pair, .wm-ops { table-layout: fixed; }
.wm-pair th:last-child { width: 56px; }
.wm-ops th { white-space: normal; word-break: keep-all; line-height: 1.35; vertical-align: bottom; }
.wm-ops th:first-child { width: 64px; }
.wm-total td { font-weight: 650; border-bottom: 0; }
.wm-ops td.wm-zero { color: var(--faint); }
.wm-ops td.wm-nz { color: var(--red-text); font-weight: 650; }
.wm-ops tr.wm-ops-hit td:first-child { font-weight: 600; }
.wm-ops tr.wm-ops-hit { background: var(--red-soft); }

/* 막대 목록 */
.wm-barlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.wm-barlist li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(40px, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.wm-barlist-name { overflow-wrap: anywhere; line-height: 1.45; }
.wm-barlist-name a { color: var(--info); }
.wm-barlist-name a:hover { text-decoration: underline; }
.wm-barlist-track { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.wm-barlist-track span { display: block; height: 100%; background: var(--info); border-radius: 4px; }

/* 낱말 칩: --t 0~1 로 크기·굵기 */
.wm-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wm-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--info-bg); border: 1px solid var(--info-line); color: var(--info);
  font-size: calc(12px + var(--t) * 8px);
  font-weight: calc(450 + var(--t) * 300);
}
.wm-chip small { font-size: 11px; color: var(--muted); font-weight: 500; }

.wm-foot { font-size: 12px; color: var(--faint); margin-top: 8px; line-height: 1.6; }

@media (max-width: 760px) {
  .wm-grid2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wm-metrics { grid-template-columns: 1fr 1fr; }
  .wm-metrics .metric-value { font-size: 22px; }
  .wm-svg { height: 130px; }
  .wm-ops { font-size: 12px; }
  .wm-ops th { font-size: 11px; padding: 6px 3px; }
  .wm-ops td { padding: 7px 3px; }
  .wm-ops th:first-child { width: 42px; }
  .wm-table th, .wm-table td { padding: 7px 5px; }
}