/* 14강 전용 스타일: 그림 속 글씨 크기, 그래프 선, 생성한 글 상자 */

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

/* 눈금선과 점선 (V.path 는 길이를 1로 맞추므로 점선은 따로 그린다) */
.v-rule { fill: none; stroke: var(--line); stroke-width: 1; }
.v-rule.dot { stroke: var(--muted); stroke-dasharray: 3 4; }
.v-rule.on { stroke: var(--accent); }
.v-rule.w { stroke: var(--text); }
.v-rule.k { stroke: var(--key); }
.v-rule.bad { stroke: var(--value); }
.v-rule.thick { stroke-width: 3; stroke-linecap: round; }
.v-rule.dash { stroke-dasharray: 4 4; }

/* 그래프의 선 */
.v-curve { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.v-curve.k { stroke: var(--key); }
.v-curve.w { stroke: var(--text); }
.v-curve.bad { stroke: var(--value); }
.v-curve.m { stroke: var(--muted); stroke-width: 1.5; }
.v-curve.ghost { stroke: var(--line); stroke-width: 2; }
.v-gap { fill: var(--value); opacity: 0.16; }
.v-area { fill: var(--accent); opacity: 0.3; }
.v-area.w { fill: var(--text); opacity: 0.12; }

.v-dot.k { fill: var(--key); }
.v-dot.bad { fill: var(--value); }
.v-dot.m { fill: var(--muted); }
.v-dot.w { fill: var(--text); }
.v-ring { fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; }
.v-ring.k { stroke: var(--key); }
.v-ring.w { stroke: var(--text); }
.v-ring.m { stroke: var(--muted); stroke-width: 1.5; }

.v-zone.on { fill: var(--accent); opacity: 0.1; }
.v-zone.fx { transition: opacity 0.3s ease; }
.v-zone.fx.hide { opacity: 0; }

.v-bar.dim { opacity: 0.25; }
.v-bar.w { fill: var(--text); }
.v-bar.soft { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.v-bar.fx { transition: opacity 0.3s ease; }
.v-slot { transition: fill 0.25s ease, opacity 0.25s ease; }
.v-slot.g { fill: #6f8a7e; }
.v-slot.soft { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.v-slot.ghost { fill: none; stroke: var(--muted); stroke-dasharray: 3 3; }
.v-vector.bad line, .v-vector.bad path { stroke: var(--value); }
.v-vector.w line, .v-vector.w path { stroke: var(--text); }
.v-vector.fx { transition: opacity 0.3s ease; }

.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(--muted); stroke-dasharray: 3 3; }
.v-chip.ghost text { fill: var(--muted); }

/* 새로 들어간 동작 */
.v-step.new .bg { stroke: var(--accent); stroke-dasharray: 4 3; }
.v-step.new circle { fill: color-mix(in srgb, var(--accent) 40%, var(--surface-2)); }
.v-step.new text.n { fill: var(--text); }
.v-step.on .bg { stroke-dasharray: none; }
.v-step.on text.n { fill: var(--on-accent); }

.v-frame.bad { fill: none; stroke: var(--value); stroke-width: 1.5; }
.v-frame.fx { transition: opacity 0.3s ease; }

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

/* 코드 줄에서 새로 들어간 줄 */
.lines li.new code { color: var(--accent); }

/* --- 생성한 글을 보여 주는 상자 (HTML) --- */

.gen { display: grid; gap: 0.4em; }

.gen-row {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  align-items: center;
  column-gap: 0.7em;
  padding: 0.5em 0.7em;
  border-radius: 0.7em;
  background: var(--surface);
  outline: 1.5px solid transparent;
  transition: outline-color 0.25s ease, opacity 0.25s ease;
}

.gen-head {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  column-gap: 0.7em;
  padding: 0 0.7em;
}

.gen-head span { font-size: 0.72em; color: var(--muted); }

.gen-row.on { outline-color: var(--accent); }
.gen-row.wait { opacity: 0.35; }

.gen-row .ep {
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1.35;
  color: var(--muted);
}

.gen-row .ep b {
  display: block;
  font-family: var(--mono);
  font-size: 1.15em;
  color: var(--accent);
}

.gen-row .out {
  font-family: var(--mono);
  font-size: 0.72em;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

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