/* 9강 전용 스타일: 그림 속 숫자 크기, 색 칩, 글 상자 */

.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: 24px; }
.viz text.v-num.k { fill: var(--key); }
.viz text.v-num.m { fill: var(--muted); }
.viz text.sm { font-size: 11.5px; }
.viz text.k { font-weight: 700; }
.viz text.v { font-weight: 700; }
.viz text.bad { font-weight: 700; }
.viz text.fx { transition: opacity 0.3s ease, fill 0.3s ease; }
.viz text.ink { fill: var(--on-accent); font-weight: 700; }

/* 색 칩 */
.v-chip.k rect { fill: var(--key); }
.v-chip.k text { fill: var(--on-accent); }
.v-chip.v rect { fill: var(--value); }
.v-chip.v text { fill: var(--on-accent); }
.v-chip.bad rect { fill: none; stroke: var(--value); stroke-width: 1.5; }
.v-chip.bad text { fill: var(--value); }
.v-chip.ghost rect { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 3; }
.v-chip.ghost text { fill: var(--muted); }

/* 막대, 칸 */
.v-bar { transition: opacity 0.3s ease; }
.v-bar.dim { opacity: 0.25; }
.v-bar.soft { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.v-slot { transition: fill 0.25s ease, opacity 0.25s ease; }
.v-slot.k { fill: var(--key); }
.v-slot.v { fill: var(--value); }
.v-slot.ghost { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 3; }
.v-cellbox { stroke: none; transition: fill 0.3s ease; }
.v-cellbox.bad { stroke: var(--value); stroke-width: 2; }
.v-grid.k rect { fill: var(--key); }
.v-grid rect.gone { opacity: 0; }

/* 상자 */
.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.k rect { stroke: var(--key); }
.v-box.dim { opacity: 0.3; }
.v-frame { transition: stroke 0.3s ease, opacity 0.3s ease; }
.v-frame.bad { stroke: var(--value); }
.v-frame.k { stroke: var(--key); }
.v-frame.ghost { fill: none; stroke-dasharray: 3 3; }

.v-dot.bad { fill: var(--value); }
.v-dot.k { fill: var(--key); }
.v-vector.bad line,
.v-vector.bad path { stroke: var(--value); }
.v-vector.k line,
.v-vector.k path { stroke: var(--key); }
.v-line.fx { transition: opacity 0.3s ease, stroke 0.3s ease; }
.v-line.dash.fx.hide { opacity: 0; }

.fx.off { opacity: 0.14; }
.v-step { transition: opacity 0.3s ease; }

/* 모델이 쓴 글을 보여 주는 상자 */
.gen { display: grid; gap: 0.5em; }

.gen-box {
  padding: 0.6em 0.9em 0.65em;
  border: 1px solid var(--line);
  border-radius: 0.9em;
  background: var(--surface);
}

.gen-box .label {
  display: block;
  margin-bottom: 0.3em;
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.gen-box .text {
  font-size: 0.9em;
  line-height: 1.55;
  word-break: normal;
  overflow-wrap: anywhere;
}

.gen-box .seed { color: var(--muted); }
.gen-box .new { color: var(--accent); font-weight: 700; white-space: pre-wrap; transition: opacity 0.2s ease; }
.gen-box.bad .new { color: var(--value); }
.gen-box .new.hide { opacity: 0; }

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

/* 움직임을 줄인 환경: 스크립트가 바꾼 색과 밝기가 곧바로 마지막 모습이 되게 한다 */
@media (prefers-reduced-motion: reduce) {
  .viz *,
  .gen-box .new { transition: none !important; }
}