/* 15강 전용 스타일: 그림 속 글씨 크기, 가중치 표(격자), 얼림과 풀림, 그래프 */

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

/* 칩 */
.v-chip.bad rect { fill: none; stroke: var(--value); stroke-width: 1.5; }
.v-chip.bad text { fill: var(--value); }
.v-chip.ham rect { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.v-chip.ham text { fill: var(--soft); }
.v-chip.ghost rect { fill: none; stroke: var(--muted); stroke-dasharray: 3 3; }
.v-chip.ghost text { fill: var(--muted); }

/* 모델의 층: 기본, 훈련하는 곳(hot), 얼린 곳(ice), 떼어 낼 것(old) */
.v-part { transition: opacity 0.3s ease; }
.v-part rect { fill: var(--surface); stroke: var(--line); transition: fill 0.3s ease, stroke 0.3s ease; }
.v-part text { transition: fill 0.3s ease; }
.v-part.hot rect { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke: var(--accent); }
.v-part.ice rect { fill: var(--surface-2); stroke: var(--surface-2); }
.v-part.ice text { fill: var(--muted); }
.v-part.old rect { fill: none; stroke: var(--value); stroke-dasharray: 3 3; }
.v-part.old text { fill: var(--value); }
.v-part.new rect { fill: var(--surface); stroke: var(--text); stroke-width: 1.5; }
.v-part.dim { opacity: 0.3; }
.v-part.hide { opacity: 0; }

.v-slab { fill: #6f8a7e; transition: fill 0.3s ease, opacity 0.3s ease; }
.v-slab.hot { fill: var(--accent); }
.v-slab.ice { fill: var(--line); }

/* 옆에 덧붙인 작은 표 */
.v-tab { fill: var(--accent); transition: opacity 0.3s ease; }
.v-tab.hide { opacity: 0; }
.v-tab.dim { opacity: 0.3; }

/* 자물쇠: 잠김(회색), 열림(노랑) */
.v-lock { transition: opacity 0.3s ease; }
.v-lock rect { fill: var(--muted); transition: fill 0.3s ease; }
.v-lock path { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; transition: stroke 0.3s ease, opacity 0.2s ease; }
.v-lock .sh-open { opacity: 0; }
.v-lock.open rect { fill: var(--accent); }
.v-lock.open path { stroke: var(--accent); }
.v-lock.open .sh-open { opacity: 1; }
.v-lock.open .sh-shut { opacity: 0; }

/* 가중치 표: 네모 격자 */
.v-grid { transition: opacity 0.35s ease; }
.v-grid.hide { opacity: 0; }
.v-grid.dim { opacity: 0.25; }
.v-grid.w rect { fill: #6f8a7e; }
.v-grid.ice rect { fill: var(--line); }
.v-grid rect.lit { fill: var(--accent); }
.v-grid rect.half { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.v-grid rect.pick { stroke: var(--text); stroke-width: 1.3; }
.v-grid rect.hit { fill: var(--accent); }
.v-grid rect.miss { fill: none; stroke: var(--value); stroke-width: 1.3; }
.v-grid rect.wait { opacity: 0.12; }

.v-fine { fill: #6f8a7e; }
.v-wsq { fill: var(--line); }
.v-strip { fill: var(--accent); }
.v-piece { fill: var(--accent); transition: opacity 0.3s ease; }
.v-piece.dim { opacity: 0.3; }

/* 숫자가 든 칸 */
.v-ncell { transition: opacity 0.3s ease; }
.v-ncell rect { fill: var(--surface-2); stroke: transparent; stroke-width: 1.5; transition: stroke 0.25s ease, fill 0.3s ease; }
.v-ncell.on rect { stroke: var(--accent); }
.v-ncell.hot rect { fill: color-mix(in srgb, var(--accent) 24%, var(--surface)); stroke: var(--accent); }
.v-ncell.ice rect { fill: var(--line); }
.v-ncell.ice text { fill: var(--muted); }
.v-ncell.dim { opacity: 0.3; }
.v-ncell.hide { opacity: 0; }

/* 토큰 한 칸, 문자 한 통 */
.v-tok { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); transition: fill 0.35s ease; }
.v-tok.pad { fill: color-mix(in srgb, var(--key) 62%, var(--surface-2)); }
.v-tok.t { fill: var(--soft); }
.v-tok.spam { fill: var(--value); }

/* 줄과 틀 */
.v-rowbg { fill: var(--surface); stroke: var(--line); transition: stroke 0.3s ease; }
.v-row { transition: opacity 0.3s ease; }
.v-row.dim { opacity: 0.35; }
.v-row.on .v-rowbg { stroke: var(--accent); }
.v-row.on .v-tlc { fill: var(--accent); }
.v-row.on .v-tlc + text { fill: var(--on-accent); }
.v-tlc { fill: var(--surface-2); transition: fill 0.3s ease; }
.v-frame { transition: stroke 0.3s ease, opacity 0.3s ease; }
.v-frame.dash { stroke-dasharray: 4 4; }
.v-frame.bad { stroke: var(--value); }
.v-plus { fill: var(--surface-2); stroke: var(--muted); stroke-width: 1.5; transition: stroke 0.3s ease, fill 0.3s ease; }
.v-plus.on { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 24%, var(--surface)); }

/* 눈금선과 점선, 그래프의 선 */
.v-rule { fill: none; stroke: var(--line); stroke-width: 1; }
.v-rule.dot { stroke: var(--muted); stroke-dasharray: 3 4; }
.v-rule.mark { stroke: var(--text); stroke-width: 2; }
.v-curve { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.v-curve.k { stroke: var(--key); }
.v-gap { fill: var(--key); opacity: 0.16; }
.v-ring { fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; }
.v-ring.k { stroke: var(--key); }
.v-dot.k { fill: var(--key); }
.v-dot.m { fill: var(--muted); }

.v-bar { transition: opacity 0.3s ease; }
.v-bar.t { fill: var(--soft); }
.v-bar.ice { fill: var(--line); }
.v-bar.dim { opacity: 0.3; }
.v-vector { transition: opacity 0.3s ease; }
.v-vector.hide, .v-line.hide { opacity: 0; }
.v-line.fx { transition: opacity 0.3s ease, stroke 0.3s ease; }

.nb { white-space: nowrap; }

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