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

.viz text.v-num { font-size: 11.5px; }
.viz text.v-num.big { font-size: 15px; }
.viz text.v-num.huge { font-size: 23px; font-weight: 700; }

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

.viz text.fxt { transition: fill 0.3s ease, opacity 0.3s ease; }
.viz text.dim { opacity: 0.35; }
.viz text.hide { opacity: 0; }
.fx.half { opacity: 0.6; }

.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-box.hide { opacity: 0; }
.v-box.small text.b { font-size: 11.5px; }

/* 숏컷 연결과 더하기 표시 */
.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.faint { opacity: 0.25; }
.v-slab.gray { fill: #6f8a7e; }
.v-band { fill: var(--accent); opacity: 0.09; }
.v-bar { transition: opacity 0.3s ease; }
.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.k { fill: var(--key); }
.v-dot.m { fill: var(--muted); }
.v-vector { transition: opacity 0.3s ease; }
.v-vector.bad line, .v-vector.bad path { stroke: var(--value); }
.v-vector.k line, .v-vector.k path { stroke: var(--key); }
.v-vector.hide { opacity: 0; }

.v-rowbg { fill: var(--surface); stroke: var(--line); transition: stroke 0.3s ease; }
.v-rowbg.on { stroke: var(--accent); }
.v-frame { transition: stroke 0.3s ease, opacity 0.3s ease; }
.v-frame.ghost { fill: none; stroke-dasharray: 3 3; }
.v-frame.bad { stroke: var(--value); }
.v-slot { transition: fill 0.3s ease, opacity 0.3s ease; }
.v-slot.bad { fill: color-mix(in srgb, var(--value) 55%, var(--surface-2)); }
.v-slot.soft { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.v-slot.off { opacity: 0.12; }
.v-focus { transition: opacity 0.3s ease; }
.v-focus.hide { opacity: 0; }
.v-line.hide { opacity: 0; }
.v-line.fx { transition: opacity 0.3s ease, stroke 0.3s ease; }

/* 토큰마다 다른 색 (어느 토큰에서 온 정보인지) */
.v-t0 { fill: var(--accent); }
.v-t1 { fill: var(--key); }
.v-t2 { fill: var(--value); }
.v-t3 { fill: #9aa7ff; }

/* 뜻 없는 토큰 */
.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); }

@media (prefers-reduced-motion: reduce) {
  .v-box, .v-box rect, .v-sc, .v-plus, .v-slab, .v-chip rect, .v-chip text, .v-cell,
  .v-bar, .v-slot, .v-frame, .v-rowbg, .v-focus, .v-vector, .viz text.fxt, .v-line.fx { transition: none; }
}