/* 5강 전용: 그림 속 숫자 크기와 몇 가지 추가 표시 */

.viz text.v-num,
.viz text.n { font-size: 11px; }
.viz text.v-num.big { font-size: 15px; }
.viz text.v-num.huge { font-size: 22px; }
.viz text.v-num.k { fill: var(--key); }
.viz text.sm { font-size: 11.5px; }
.viz text.fx { transition: opacity 0.3s ease, fill 0.3s ease; }

.v-dot.bad { fill: var(--value); }
.v-dot.k { fill: var(--key); }

.v-vector.bad line,
.v-vector.bad path { stroke: var(--value); }
.v-vector.k line,
.v-vector.k path { stroke: var(--key); }

.v-chip.bad rect { fill: none; stroke: var(--value); stroke-width: 1.5; }
.v-chip.bad text { fill: var(--value); }
.v-chip.k rect { fill: none; stroke: var(--key); stroke-width: 1.5; }
.v-chip.k text { fill: var(--key); }

/* V.path 는 pathLength 가 1이라 점선 간격도 전체 길이에 대한 비율로 적는다 */
.v-line.cut { stroke: var(--value); stroke-dasharray: 0.035 0.06; }
.v-line.fx { transition: opacity 0.3s ease, stroke-width 0.4s ease; }

.v-cell { transition: fill 0.3s ease, stroke 0.25s ease; }
.v-slot { transition: fill 0.25s ease; }
.v-slot.done { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.v-bar { transition: opacity 0.3s ease; }
.v-bar.off { opacity: 0.15; }
.v-frame.k { stroke: var(--key); }
.v-box.k rect { stroke: var(--key); }
.viz text.k { font-weight: 700; }
.v-frame.fx { transition: stroke 0.3s ease, opacity 0.3s ease; }
.v-ghost { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 3; }

.fx.off { opacity: 0.15; }
.fx.dim2 { opacity: 0.55; }

/* 줄이 바뀌면 안 되는 묶음 */
.nb { white-space: nowrap; }

/* 움직임을 줄인 환경: 스크립트가 바꾼 색과 밝기가 곧바로 마지막 모습이 되게 한다 */
@media (prefers-reduced-motion: reduce) {
  .viz *,
  .lines li { transition: none !important; }
}