/* 10강 전용: 그림 속 글씨 크기, 스팸·정상 딱지, 토큰 칸 */

.viz text.v-num,
.viz text.n { font-size: 11.5px; }
.viz text.v-num.big { font-size: 15px; }
.viz text.v-num.huge { font-size: 22px; }
.viz text.v-num.m { fill: var(--muted); }
.viz text.v-num.k { fill: var(--key); }
.viz text.sm { font-size: 11.5px; }
.viz text.lg { font-size: 13px; }
.viz text.v-num.mid { font-size: 13px; }
.viz text.mono { font-family: var(--mono); }
.viz text.k { font-weight: 700; }
.viz text.dark { fill: var(--on-accent); font-weight: 700; }
.viz text.fx { transition: opacity 0.3s ease, fill 0.3s ease; }

.viz tspan.on { fill: var(--accent); font-weight: 700; }
.viz tspan.m { fill: var(--muted); }
.viz tspan.bad { fill: var(--value); }
.viz tspan.hl { fill: var(--accent); }

/* 딱지: 스팸은 붉은색, 정상은 밝은 회색. lit 이면 속을 채운다 */
.v-chip.bad rect { fill: none; stroke: var(--value); stroke-width: 1.5; }
.v-chip.bad text { fill: var(--value); }
.v-chip.bad.lit rect { fill: var(--value); }
.v-chip.bad.lit text { fill: var(--on-accent); }
.v-chip.ham rect { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.v-chip.ham text { fill: var(--soft); }
.v-chip.ham.lit rect { fill: var(--soft); stroke: var(--soft); }
.v-chip.ham.lit text { fill: var(--bg); }
.v-chip.k rect { fill: none; stroke: var(--key); stroke-width: 1.5; }
.v-chip.k text { fill: var(--key); }
.v-chip.ghost rect { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 3; }
.v-chip.ghost text { fill: var(--muted); }

/* 토큰 한 칸, 문자 한 통을 나타내는 네모 */
.v-tok { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); transition: opacity 0.3s ease, fill 0.3s ease; }
.v-tok.on { fill: var(--accent); }
.v-tok.pad { fill: color-mix(in srgb, var(--key) 62%, var(--surface-2)); }
.v-tok.gray { fill: #6f8a7e; }
.v-tok.spam { fill: var(--value); }
.v-tok.k { fill: var(--key); }
.v-tok.t { fill: var(--soft); }
.v-tok.new { fill: var(--surface); stroke: var(--soft); stroke-width: 1.5; }
.v-tok.cut { fill: none; stroke: var(--value); stroke-width: 1.2; stroke-dasharray: 3 2.5; }
.v-tok.hide { opacity: 0; }

.v-bar { transition: opacity 0.3s ease, fill 0.4s ease; }
.v-bar.t { fill: var(--soft); }
.v-bar.dim { opacity: 0.3; }
.v-bar.ghost { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 3; }

.v-rowbg { fill: var(--surface); stroke: var(--line); transition: stroke 0.3s ease; }
.v-rowbg.on { stroke: var(--accent); }
.v-frame.dash { stroke-dasharray: 4 4; }
.v-frame.bad { stroke: var(--value); }

.v-box { transition: opacity 0.3s ease; }
.v-box.dim { opacity: 0.4; }
.v-box.bad rect { stroke: var(--value); }

.v-line.t { stroke: var(--soft); }
.v-line.sep { stroke: var(--bg); stroke-width: 1; }
.v-line.fx { 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-dot.bad { fill: var(--value); }
.v-dot.m { fill: var(--muted); }
.v-dot.k { fill: var(--key); }

.fx.off { opacity: 0.15; }

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

@media (prefers-reduced-motion: reduce) {
  .viz *,
  .lines li { transition: none !important; }
}