/* 2강 전용 스타일. 2강의 편 화면에서만 불러온다 */

/* 그림 속 숫자는 11px 이상으로 */
.viz text.v-num,
.viz text.n { font-size: 11.5px; }

.viz text.mono { font-family: var(--mono); }
.viz text.k { font-weight: 700; }
.viz text.bad { font-weight: 700; }
.viz text.huge { font-size: 22px; font-weight: 700; }

/* 칩 색: 붉은 테두리(실패), 청록 테두리(끝 표시), 점선(빈칸) */
.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); }
.v-chip.sp rect { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 3; }
.v-chip.sp text { fill: var(--muted); font-weight: 500; }
.v-chip.strike text { text-decoration: line-through; }

.v-box.bad rect { stroke: var(--value); }
.v-box.k rect { stroke: var(--key); }
.v-box rect { transition: stroke 0.25s ease; }

.v-blank { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 2.5 2.5; transition: stroke 0.25s ease; }
.v-blank.on { stroke: var(--accent); }
.v-blank.bad { stroke: var(--value); stroke-dasharray: none; fill: color-mix(in srgb, var(--value) 22%, transparent); }

.v-set { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.v-slot.k { fill: var(--key); }
.v-slot.pad { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 3; }
.v-slot.soft { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.v-slot.fx, .v-set.fx { transition: opacity 0.3s ease, fill 0.3s ease; }
.v-page { fill: var(--surface); stroke: var(--line); }

@media (prefers-reduced-motion: reduce) {
  .v-blank, .v-slot.fx, .v-set.fx, .v-chip rect, .v-chip text, .v-box rect, .v-line.fx2 { transition: none; }
}