/* vm-mnode — MultiNode 가 여러 대를 한 대로 접는 과정. 팔레트는 bscore·cfstl과 같은 계열. */
.vm-mnode {
  --mn-surface: #fcfcfb;
  --mn-ink: #0b0b0b;
  --mn-ink2: #52514e;
  --mn-muted: #898781;
  --mn-track: #ecebe4;
  --mn-node: #2a78d6;
  --mn-node-soft: #dbeafe;
  --mn-batch: rgba(42, 120, 214, 0.09);
  --mn-pod: #4a8de0;
  --mn-ok: #15803d;
  --mn-ok-soft: #dcfce7;
  --mn-warn: #d97706;
  --mn-border: rgba(11, 11, 11, 0.10);
  margin: 1.5rem 0;
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  border-radius: 14px;
  padding: 16px 18px 12px;
  color: var(--mn-ink);
}
html.dark .vm-mnode {
  --mn-surface: #1a1a19;
  --mn-ink: #fff;
  --mn-ink2: #c3c2b7;
  --mn-muted: #898781;
  --mn-track: #2c2c2a;
  --mn-node: #4a8de0;
  --mn-node-soft: #22334a;
  --mn-batch: rgba(74, 141, 224, 0.14);
  --mn-pod: #60a5fa;
  --mn-ok: #4ade80;
  --mn-ok-soft: #1e3a2a;
  --mn-warn: #f59e0b;
  --mn-border: rgba(255, 255, 255, 0.10);
}

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

.mn-step { fill: var(--mn-muted); font-size: 15px; font-weight: 600; transition: fill 0.2s; }
.mn-step-on { fill: var(--mn-node); font-size: 18px; font-weight: 800; }
.mn-badge { fill: var(--mn-node); font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; }

/* 노드 카드 */
.mn-card { fill: var(--mn-node-soft); stroke: var(--mn-node); stroke-width: 1.5; }
.mn-card-new { fill: var(--mn-ok-soft); stroke: var(--mn-ok); }
.mn-card-gone { fill: var(--mn-track); stroke: var(--mn-muted); stroke-dasharray: 5 3; }
/* 시뮬레이션이 그려본 노드 — 아직 실재하지 않는다 */
.mn-card-sim { fill: none; stroke: var(--mn-ok); stroke-width: 1.6; stroke-dasharray: 6 4; }
.mn-name { fill: var(--mn-ink); font-size: 12.5px; font-weight: 700; }
/* 가격 옆의 크기 막대 — vCPU 비례 */
.mn-sizetrack { fill: var(--mn-track); }
.mn-size { fill: var(--mn-node); opacity: 0.55; }
.mn-size-new { fill: var(--mn-ok); opacity: 0.6; }
.mn-price { fill: var(--mn-ink); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mn-sub { fill: var(--mn-ink2); font-size: 11px; font-variant-numeric: tabular-nums; }
.mn-ratio { fill: var(--mn-node); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 파드가 담기는 자리 */
.mn-well { fill: var(--mn-surface); opacity: 0.55; stroke: var(--mn-node); stroke-width: 0.8; stroke-opacity: 0.35; }

/* 파드 */
.mn-pod { fill: var(--mn-pod); stroke: var(--mn-surface); stroke-width: 2; }
.mn-pod-new { fill: var(--mn-ok); }
.mn-pod-fly { fill: var(--mn-warn); stroke: var(--mn-surface); stroke-width: 2; }
/* 시뮬레이션이 앉혀본 자리 — 실물이 도착하면 지워진다 */
.mn-pod-ghost { fill: none; stroke: var(--mn-ok); stroke-width: 1.8; stroke-dasharray: 3 2; }

/* 묶음 */
.mn-batch { fill: var(--mn-batch); stroke: var(--mn-node); stroke-width: 1.6; stroke-dasharray: 5 3; }
.mn-batch-ok { stroke: var(--mn-ok); }

/* cost 미터 */
.mn-lane { fill: var(--mn-ink); font-size: 12.5px; font-weight: 800; }
.mn-track { fill: var(--mn-track); }
/* 아래 겹 — 후보를 집는 순간 확정되는 값 (아직 치르지 않았다) */
.mn-unit { fill: var(--mn-warn); opacity: 0.22; }
.mn-unit-node { fill: var(--mn-node); }
/* 위 겹 — 실제로 치른 몫 */
.mn-paid { fill: var(--mn-warn); }
.mn-paid-node { fill: var(--mn-node); }
.mn-val { fill: var(--mn-ink); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mn-sav { fill: var(--mn-ok); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 두 방식 상태 */
.mn-pill { fill: var(--mn-node-soft); stroke: var(--mn-node); stroke-width: 1.4; }
.mn-pill-ok { fill: var(--mn-ok-soft); stroke: var(--mn-ok); }
.mn-pill-off { fill: var(--mn-track); stroke: var(--mn-muted); stroke-dasharray: 4 3; }
.mn-pilltext { fill: var(--mn-ink); font-size: 13px; font-weight: 800; }
.mn-pilltext-off { fill: var(--mn-muted); }
.mn-pillstate { fill: var(--mn-ink2); font-size: 11.5px; font-weight: 600; }
.mn-pillstate-off { fill: var(--mn-muted); }

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

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