/* 12강 전용: 그림 속 글씨 크기, 지시·입력·응답 색, 숫자 칸, 토큰 칸 */

.viz text.v-num,
.viz text.n { font-size: 12px; }
.viz text.v-num.big { font-size: 15px; }
.viz text.v-num.huge { font-size: 22px; font-weight: 700; }
.viz text.v-num.m { fill: var(--muted); }
.viz text.v-num.k { fill: var(--key); }
.viz text.v-num.t { fill: var(--text); }
.viz text.s,
.viz text.sm { font-size: 12px; }
.viz text.mono { font-family: var(--mono); }
.viz text.k { font-weight: 700; }
.viz text.t { fill: var(--text); 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 text.dim { opacity: 0.35; }

.viz tspan.on { fill: var(--accent); font-weight: 700; }
.viz tspan.k { fill: var(--key); font-weight: 700; }
.viz tspan.t { fill: var(--text); font-weight: 700; }
.viz tspan.m { fill: var(--muted); font-weight: 400; }
.viz tspan.bad { fill: var(--value); font-weight: 700; }
.viz tspan.plain { fill: var(--soft); font-weight: 400; }

/* 색 약속: 지시는 노랑(on), 입력은 청록(k), 응답은 흰색(t), 채운 자리는 회색 */

.v-chip.k rect { fill: none; stroke: var(--key); stroke-width: 1.5; }
.v-chip.k text { fill: var(--key); }
.v-chip.k.lit rect { fill: var(--key); }
.v-chip.k.lit text { fill: var(--on-accent); }
.v-chip.t rect { fill: none; stroke: var(--text); stroke-width: 1.5; }
.v-chip.t text { fill: var(--text); }
.v-chip.t.lit rect { fill: var(--text); }
.v-chip.t.lit text { fill: var(--bg); }
.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.ghost rect { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 3; }
.v-chip.ghost text { fill: var(--muted); }
.v-chip.off { opacity: 0.35; }

/* 숫자가 적힌 칸: 토큰 번호(tok), 채운 자리(pad), 끝 표시(end), 채점하지 않는 칸(ign) */
.v-nc { transition: opacity 0.3s ease; }
.v-nc rect {
  fill: color-mix(in srgb, var(--accent) 36%, var(--surface-2));
  stroke: transparent;
  stroke-width: 1.5;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.v-nc text { fill: var(--text); transition: fill 0.3s ease; }
.v-nc.pad rect { fill: var(--line); }
.v-nc.pad text { fill: var(--soft); }
.v-nc.end rect { fill: color-mix(in srgb, var(--key) 26%, var(--surface-2)); stroke: var(--key); }
.v-nc.end text { fill: var(--key); }
.v-nc.ign rect { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 3; }
.v-nc.ign text { fill: var(--muted); }
.v-nc.empty rect { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 3; }
.v-nc.empty text { fill: var(--muted); }
.v-nc.bad rect { stroke: var(--value); }
.v-nc.hot rect { stroke: var(--accent); }
.v-nc.loss rect { fill: var(--surface-2); }
.v-nc.hide { opacity: 0; }
.v-nc.dim { opacity: 0.3; }

/* 토큰 한 칸, 예제 하나를 나타내는 네모와 띠 */
.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.k { fill: var(--key); }
.v-tok.t { fill: var(--soft); }
.v-tok.gray { fill: #6f8a7e; }
.v-tok.pad { fill: var(--line); }
.v-tok.head { fill: #6f8a7e; }
.v-tok.spam { fill: var(--value); }
.v-tok.end { fill: var(--key); }
.v-tok.ign { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2.5 2.5; }
.v-tok.cut { fill: none; stroke: var(--value); stroke-width: 1.2; stroke-dasharray: 3 2.5; }
.v-tok.new { fill: none; stroke: var(--text); stroke-width: 1.3; stroke-dasharray: 3 2.5; }
.v-tok.hide { opacity: 0; }
.v-tok.dim { opacity: 0.3; }

.v-bar { transition: opacity 0.3s ease, fill 0.4s ease; }
.v-bar.t { fill: var(--soft); }
.v-bar.dim { opacity: 0.3; }

/* 틀에 맞춘 글의 한 부분: 왼쪽 색 띠 + 이름표 줄 + 내용 줄 */
.v-sec { transition: opacity 0.3s ease; }
.v-sec .bar { fill: #6f8a7e; }
.v-sec text.tag { font-family: var(--mono); font-size: 12px; font-weight: 700; fill: var(--soft); }
.v-sec text.body { font-size: 12px; fill: var(--soft); }
.v-sec text.ko { font-size: 12px; font-weight: 700; fill: var(--soft); }
.v-sec.ins .bar { fill: var(--accent); }
.v-sec.ins text.tag, .v-sec.ins text.ko { fill: var(--accent); }
.v-sec.inp .bar { fill: var(--key); }
.v-sec.inp text.tag, .v-sec.inp text.ko { fill: var(--key); }
.v-sec.out .bar { fill: var(--text); }
.v-sec.out text.tag, .v-sec.out text.ko { fill: var(--text); }
.v-sec.out text.body { fill: var(--text); }
.v-sec.gone text { fill: var(--muted); text-decoration: line-through; }
.v-sec.gone .bar { fill: var(--muted); }
.v-sec.hide { opacity: 0; }
.v-sec.dim { opacity: 0.35; }

.v-rowbg { fill: var(--surface); stroke: var(--line); transition: stroke 0.3s ease; }
.v-rowbg.on { stroke: var(--accent); }
.v-rowbg.k { stroke: var(--key); }
.v-rowbg.t { stroke: var(--soft); }
.v-rowbg.dash { stroke: var(--muted); stroke-dasharray: 4 4; fill: none; }
.v-frame.dash { stroke-dasharray: 4 4; }
.v-frame.bad { stroke: var(--value); }
.v-frame.k { stroke: var(--key); }
.v-frame.t { stroke: var(--soft); }
.v-frame.fx { transition: opacity 0.3s ease, stroke 0.3s ease; }

.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-vector.fx { transition: opacity 0.3s ease; }
.v-dot.bad { fill: var(--value); }
.v-dot.m { fill: var(--muted); }
.v-dot.k { fill: var(--key); }
.v-dot.t { fill: var(--text); }
.v-focus.k { stroke: var(--key); }
.v-focus.bad { stroke: var(--value); }
.v-focus.fx { transition: opacity 0.3s ease; }

.fx.off { opacity: 0.15; }
g.fx.dim { opacity: 0.32; }

/* 줄이 바뀌면 안 되는 묶음 */
.nb { white-space: nowrap; }
.card code { font-family: var(--mono); font-size: 0.9em; }

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

.viz text.w { fill: var(--text); }

/* 내용이 들어갈 자리 */
.v-hole { fill: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.v-hole.k { fill: color-mix(in srgb, var(--key) 14%, var(--surface-2)); stroke: var(--key); }
.v-hole.t { fill: color-mix(in srgb, var(--text) 10%, var(--surface-2)); stroke: var(--soft); }
.viz text.b12 { font-size: 12px; font-weight: 700; }

/* 숫자 칸과 범례는 조금 더 크게 */
.viz .v-nc text.v-num { font-size: 13px; }
.viz text.md { font-size: 13px; }