/* 6강 전용 스타일: 그림 속 숫자 크기, 블록 부품의 켜짐과 꺼짐 */

.viz text.v-num { font-size: 11.5px; }

/* 좁은 칸에 넣는 숫자: 폭이 고른 본문 글꼴로 조금 좁게 */
.viz text.v-num.tight {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.v-box { transition: opacity 0.3s ease; }
.v-box rect { transition: stroke 0.3s ease, fill 0.3s ease; }
.v-box.done rect { fill: color-mix(in srgb, var(--accent) 20%, var(--surface)); stroke: var(--accent); }
.v-box.bad rect { stroke: var(--value); }
.v-box.dim, .v-sc.dim, .v-plus.dim { opacity: 0.3; }

/* 숏컷 연결과 더하기 표시 */
.v-sc, .v-plus { transition: opacity 0.3s ease; }
.v-sc .v-line, .v-sc .v-vector line, .v-sc .v-vector path { transition: stroke 0.3s ease; }
.v-sc.on .v-line, .v-sc.on .v-vector line, .v-sc.on .v-vector path { stroke: var(--accent); }
.v-sc.on text { fill: var(--accent); font-weight: 700; }
.v-plus circle { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; transition: stroke 0.3s ease; }
.v-plus.on circle { stroke: var(--accent); }
.v-plus.on text { fill: var(--accent); }

/* 얇은 판, 띠 */
.v-slab { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); transition: opacity 0.25s ease, fill 0.25s ease; }
.v-slab.on { fill: var(--accent); }
.v-slab.off { opacity: 0; }
.v-slab.gray { fill: #6f8a7e; }
.v-band { fill: var(--accent); opacity: 0.09; }
.v-bar.dim { opacity: 0.3; }
.v-bar.ghost { fill: none; stroke: var(--muted); stroke-dasharray: 3 3; }
.v-dot.bad { fill: var(--value); }
.v-dot.m { fill: var(--muted); }
.v-pt { fill: var(--muted); }
.v-vector.bad line, .v-vector.bad path { stroke: var(--value); }
.v-vector.k line, .v-vector.k path { stroke: var(--key); }

/* 설정값 줄 */
.v-rowbg { fill: var(--surface); stroke: var(--line); }

@media (prefers-reduced-motion: reduce) {
  .v-box, .v-box rect, .v-sc, .v-plus, .v-slab, .v-chip rect, .v-chip text, .v-cell { transition: none; }
}