/* 13강 전용 스타일: 그림 속 글씨 크기, 그래프, 모델과 파일 그림, 글 상자 */

/* 그림 속 작은 글씨는 12px 아래로 내려가지 않게 한다 */
.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: 24px; font-weight: 700; }
.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.mono { font-family: var(--mono); }
.viz text.fx { transition: opacity 0.3s ease, fill 0.3s ease; }
.viz text.hide { opacity: 0; }
.viz text.dim { opacity: 0.35; }
.viz text.halo { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }

/* 칩: 틀림(붉은 테두리), 청록, 점선, 흰색 */
.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-chip.ghost rect { fill: none; stroke: var(--muted); stroke-dasharray: 3 3; }
.v-chip.ghost text { fill: var(--muted); }
.v-chip.tag rect { fill: var(--surface-2); stroke: var(--line); }
.v-chip.tag text { fill: var(--soft); }
.v-chip.off { opacity: 0.18; }
.v-chip.w rect { fill: var(--text); }
.v-chip.w text { fill: var(--bg); }

/* 막대 */
.v-bar { transition: opacity 0.3s ease, fill 0.3s ease; }
.v-bar.w { fill: var(--text); }
.v-bar.dim { opacity: 0.25; }
.v-bar.ghost { fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 3 3; }
.v-track.soft { fill: var(--surface); stroke: var(--line); }

/* 줄과 틀 */
.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.5; }
.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.k { stroke: var(--key); }
.v-frame.back { fill: var(--surface-2); stroke: var(--line); }
.v-frame.ghost { fill: none; stroke-dasharray: 3 3; }

/* 눈금선과 그래프의 선 */
.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.k { stroke: var(--key); }
.v-rule.mark { stroke: var(--text); stroke-width: 2; }
.v-rule.cut { stroke: var(--value); stroke-width: 1.5; stroke-dasharray: 4 3; }
.v-rule.fx { transition: opacity 0.3s ease; }
.v-rule.hide { opacity: 0; }
.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: 2; }
.v-curve.thin { stroke-width: 2; }
.v-gap { fill: var(--accent); opacity: 0.2; }
.v-dot.k { fill: var(--key); }
.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-grid rect.cold { fill: #6f8a7e; }
.v-grid rect.wait { opacity: 0.2; }
.v-grid rect.done { fill: var(--accent); }
.v-grid.k rect.done { fill: var(--key); }
.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-part rect { fill: var(--surface); stroke: var(--line); transition: fill 0.3s ease, stroke 0.3s ease; }
.v-part.hot rect { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke: var(--accent); }

/* 넓이로 견주는 네모 */
.v-area.on { fill: var(--accent); }
.v-area.k { fill: color-mix(in srgb, var(--key) 30%, var(--surface)); stroke: var(--key); stroke-width: 1.5; }

/* 파일, 자물쇠, 사람 */
.v-file { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; transition: stroke 0.3s ease; }
.v-file.on { stroke: var(--accent); }
.v-lock rect { fill: var(--muted); }
.v-lock path { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.v-lock.open rect { fill: var(--accent); }
.v-lock.open path { stroke: var(--accent); }
.v-person { fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 맞음(동그라미)과 틀림(가위표) */
.v-ok { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.v-no { fill: none; stroke: var(--value); stroke-width: 2.5; stroke-linecap: round; }

.v-vector { transition: opacity 0.3s ease; }
.v-vector.k line, .v-vector.k path { stroke: var(--key); }
.v-vector.hide, .v-line.hide { opacity: 0; }
.v-line.fx { transition: opacity 0.3s ease, stroke 0.3s ease; }
.v-line.cut { stroke: var(--value); stroke-dasharray: 4 3; }
.fx.off { opacity: 0.15; }
.fx.gone { opacity: 0; }
.fx.faded { opacity: 0.55; }
.nb { white-space: nowrap; }

/* --- 글 상자 (HTML) --- */

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

.talk-box {
  padding: 0.5em 0.7em;
  border: 1px solid var(--line);
  border-radius: 0.8em;
  background: var(--surface);
  transition: border-color 0.3s ease, opacity 0.3s ease;
}

.talk-box.on { border-color: var(--accent); }
.talk-box.bad { border-color: var(--value); }
.talk-box.wait { opacity: 0; }

.talk-box > b {
  display: block;
  margin-bottom: 0.15em;
  font-size: 0.78em;
  color: var(--muted);
}

.talk-box.on > b { color: var(--accent); }

.talk-box p,
.card .talk-box p {
  margin: 0;
  font-size: 0.84em;
  line-height: 1.42;
  color: var(--text);
  overflow-wrap: anywhere;
}

.talk-box p.mono,
.card .talk-box p.mono { font-family: var(--mono); font-size: 0.8em; }

.talk-box small {
  display: block;
  margin-top: 0.1em;
  font-size: 0.78em;
  line-height: 1.4;
  color: var(--muted);
}

.talk-box small.on { color: var(--accent); font-weight: 700; }
.talk-box small.bad { color: var(--value); font-weight: 700; }

.talk-box p i {
  font-style: normal;
  border-radius: 0.2em;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.talk-box p i.same { color: var(--muted); }
.talk-box p i.key { background: var(--accent); color: var(--on-accent); }
.talk-box p i.bad { background: var(--value); color: var(--on-accent); }
.talk-box p i.mk { color: var(--key); }
.talk-box p i.copy { background: color-mix(in srgb, var(--value) 30%, transparent); }
.talk-box p i.good { background: color-mix(in srgb, var(--accent) 30%, transparent); }

.talk-mid {
  font-size: 0.78em;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
  transition: opacity 0.3s ease;
}

.talk-mid.wait { opacity: 0; }

.talk-tag {
  font-size: 0.86em;
  font-weight: 700;
  text-align: center;
  color: var(--accent);
  transition: opacity 0.3s ease;
}

.talk-tag.bad { color: var(--value); }
.talk-tag.wait { opacity: 0; }

/* 프롬프트 한 편: 표시 줄(### …)과 내용 줄 */
.doc {
  display: grid;
  gap: 0.3em;
  padding: 0.6em 0.7em;
  border: 1px solid var(--line);
  border-radius: 0.8em;
  background: var(--surface);
}

.doc-row {
  padding: 0.15em 0.45em;
  border-left: 3px solid var(--surface-2);
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.doc-row.on { border-left-color: var(--accent); }
.doc-row.wait { opacity: 0; }
.doc-row.off { opacity: 0.3; }

.doc-row b {
  display: flex;
  justify-content: space-between;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 0.78em;
  font-weight: 600;
  color: var(--key);
}

.doc-row b em { font-family: var(--font); font-weight: 700; color: var(--muted); }
.doc-row.on b em { color: var(--accent); }

.doc-row p,
.card .doc-row p {
  margin: 0;
  font-size: 0.84em;
  line-height: 1.42;
  color: var(--text);
}

.doc-row small { display: block; font-size: 0.78em; line-height: 1.4; color: var(--muted); }

/* 코드 한 줄과 그 뜻 */
.code2 {
  display: grid;
  gap: 0.35em;
  margin: 0.5em 0 0;
  padding: 0;
  list-style: none;
}

.code2 li {
  padding: 0.45em 0.7em;
  border-radius: 0.6em;
  background: var(--surface);
  outline: 1.5px solid transparent;
  transition: outline-color 0.25s ease;
}

.code2 li.on { outline-color: var(--accent); }
.code2 code { display: block; font-family: var(--mono); font-size: 0.78em; white-space: nowrap; color: var(--muted); }
.code2 span { display: block; font-size: 0.82em; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .viz *,
  .talk-box,
  .talk-mid,
  .talk-tag,
  .talk-box p i,
  .doc-row,
  .code2 li { transition: none !important; }
}