/* 8강 전용 스타일: 그림 속 숫자 크기, 손실 그래프, 생성한 글 상자 */

.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: 22px; }
.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.sm { font-size: 11.5px; }
.viz text.mono { font-family: var(--mono); }
.viz text.fx { transition: opacity 0.3s ease, fill 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.k rect { fill: none; stroke: var(--key); stroke-width: 1.5; }
.v-chip.k text { fill: var(--key); }
.v-chip.kk rect { fill: var(--key); }
.v-chip.kk text { fill: var(--on-accent); }

/* 눈금선과 점선 (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.hi { stroke: var(--text); }
.v-rule.k { stroke: var(--key); }
.v-rule.bad { stroke: var(--value); }

/* 그래프의 선 */
.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.m { stroke: var(--muted); stroke-width: 1.5; }
.v-gap { fill: var(--value); opacity: 0.16; }

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

.v-bar.dim { opacity: 0.3; }
.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.soft { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.v-slot.ksoft { fill: color-mix(in srgb, var(--key) 45%, var(--surface-2)); }
.v-frame.k { stroke: var(--key); }
.v-box.k rect { stroke: var(--key); }
.v-box.fx { transition: opacity 0.3s ease; }
.v-box rect { transition: stroke 0.3s ease; }
.v-vector.k line, .v-vector.k path { stroke: var(--key); }
.v-vector.bad line, .v-vector.bad path { stroke: var(--value); }
.v-vector.fx { transition: opacity 0.3s ease; }
.v-grid.k rect { fill: var(--key); }

.fx.off { opacity: 0.15; }

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

/* --- 생성한 글을 보여 주는 상자 (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;
}

/* 원문과 견주기 */
.memo { display: grid; gap: 0.6em; }

.memo-box {
  padding: 0.7em 0.8em;
  border: 1px solid var(--line);
  border-radius: 0.8em;
  background: var(--surface);
}

.memo-box > b {
  display: block;
  margin-bottom: 0.35em;
  font-size: 0.74em;
  color: var(--muted);
}

.memo-box p {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72em;
  line-height: 1.6;
  color: var(--muted);
}

.memo-box p i {
  font-style: normal;
  border-radius: 0.2em;
  transition: color 0.2s ease;
}

.memo-box p i.hit { color: var(--accent); }
.memo-box p i.own { color: var(--value); }

.memo-count {
  font-size: 0.8em;
  font-weight: 700;
  text-align: center;
  color: var(--accent);
}

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