/* vm-bscore — Balanced 심사대. 팔레트는 mnode·cfstl과 같은 계열, 다크는 이 레포 규약(html.dark). */
.vm-bscore {
  --bs-surface: #fcfcfb;
  --bs-ink: #0b0b0b;
  --bs-ink2: #52514e;
  --bs-muted: #898781;
  --bs-track: #ecebe4;
  --bs-node: #2a78d6;
  --bs-node-soft: #dbeafe;
  --bs-ok: #15803d;
  --bs-ok-soft: #dcfce7;
  --bs-warn: #d97706;
  --bs-no: #dc2626;
  --bs-no-soft: #fee2e2;
  --bs-border: rgba(11, 11, 11, 0.10);
  margin: 1.5rem 0;
  background: var(--bs-surface);
  border: 1px solid var(--bs-border);
  border-radius: 14px;
  padding: 16px 18px 12px;
  color: var(--bs-ink);
}
html.dark .vm-bscore {
  --bs-surface: #1a1a19;
  --bs-ink: #fff;
  --bs-ink2: #c3c2b7;
  --bs-muted: #898781;
  --bs-track: #2c2c2a;
  --bs-node: #4a8de0;
  --bs-node-soft: #22334a;
  --bs-ok: #4ade80;
  --bs-ok-soft: #1e3a2a;
  --bs-warn: #f59e0b;
  --bs-no: #ef4444;
  --bs-no-soft: #3a2020;
  --bs-border: rgba(255, 255, 255, 0.10);
}

.bs-svg { display: block; width: 100%; height: auto; }

.bs-step { fill: var(--bs-muted); font-size: 15px; font-weight: 600; transition: fill 0.2s; }
.bs-step-on { fill: var(--bs-node); font-size: 18px; font-weight: 800; }
.bs-hint { fill: var(--bs-muted); font-size: 11px; }

/* 심사 대상 커맨드 */
.bs-cmd { fill: var(--bs-node-soft); stroke: var(--bs-node); stroke-width: 1.5; }
/* 카드 폭 185px − 좌우 여백 24px = 161px 안에 가장 긴 라벨이 들어가야 한다 */
.bs-cardname { fill: var(--bs-ink); font-size: 12.5px; font-weight: 700; }
.bs-note { fill: var(--bs-ink2); font-size: 11px; }
.bs-factlabel { fill: var(--bs-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; }
.bs-factval { fill: var(--bs-ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bs-cardscore { fill: var(--bs-ink2); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

.bs-frac { fill: var(--bs-ink2); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* 심사대 */
.bs-track { fill: var(--bs-track); }
.bs-reject-zone { fill: var(--bs-no); opacity: 0.13; }
.bs-thr { stroke: var(--bs-warn); stroke-width: 2; stroke-dasharray: 4 3; }
.bs-zonelabel { font-size: 11.5px; font-weight: 700; }
.bs-tick { fill: var(--bs-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* 심사대로 내려가는 커맨드 */
.bs-tok { fill: var(--bs-node); stroke: var(--bs-surface); stroke-width: 2.5; }
.bs-tok-ok { fill: var(--bs-ok); }
.bs-tok-no { fill: var(--bs-no); }
.bs-toklabel { fill: var(--bs-ink2); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }

.bs-summary { fill: var(--bs-ink); font-size: 14px; font-weight: 800; }

.bs-ok { fill: var(--bs-ok); }
.bs-no { fill: var(--bs-no); }

.bs-caption { font-size: 12.5px; color: var(--bs-ink2); margin: 10px 0 0; line-height: 1.6; }

/* 접힌 도식 텍스트 — alt 를 준 도식만. JS 없이 오는 쪽에는 이 도식이 빈 figure 라서
   캡션과 별도로 한 번 더 낸다. 캡션(.bs-caption)은 단계마다 바뀌므로 건드리지 않는다. */
.vm-bscore .vm-spec-text { margin: 8px 0 0; font-size: 11.5px; color: var(--bs-ink2); }
.vm-bscore .vm-spec-text summary { cursor: pointer; }
.vm-bscore .vm-spec-text p { margin: 4px 0 0; line-height: 1.6; }