/* 11강 전용 스타일: 그림 속 숫자 크기, 모델의 층(얼림과 풀림), 그래프, 글 상자 */

.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; font-weight: 700; }
.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; }
.viz text.dim { opacity: 0.35; }

/* 칩: 스팸(붉은 테두리), 검증 쪽(청록), 꽉 채운 답 */
.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.vv rect { fill: var(--value); }
.v-chip.vv text { fill: var(--on-accent); }
.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); }

/* 모델의 층: 기본, 훈련하는 곳(hot), 얼린 곳(ice) */
.v-part { transition: opacity 0.3s ease; }
.v-part rect { fill: var(--surface); stroke: var(--line); transition: fill 0.3s ease, stroke 0.3s ease; }
.v-part text { transition: fill 0.3s ease; }
.v-part.lit rect { stroke: var(--accent); }
.v-part.hot rect { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke: var(--accent); }
.v-part.ice rect { fill: var(--surface-2); stroke: var(--surface-2); }
.v-part.ice text { fill: var(--muted); }
.v-part.old rect { fill: none; stroke: var(--value); stroke-dasharray: 3 3; }
.v-part.old text { fill: var(--value); }
.v-part.dim { opacity: 0.3; }
.v-part.hide { opacity: 0; }

.v-slab { fill: #6f8a7e; transition: fill 0.3s ease, opacity 0.3s ease; }
.v-slab.lit { fill: color-mix(in srgb, var(--accent) 50%, var(--surface-2)); }
.v-slab.hot { fill: var(--accent); }
.v-slab.ice { fill: var(--line); }
.v-slab.dim { opacity: 0.3; }

/* 자물쇠: 잠김(회색), 열림(노랑) */
.v-lock { transition: opacity 0.3s ease; }
.v-lock rect { fill: var(--muted); transition: fill 0.3s ease; }
.v-lock path { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; transition: stroke 0.3s ease, opacity 0.2s ease; }
.v-lock .sh-open { opacity: 0; }
.v-lock.open rect { fill: var(--accent); }
.v-lock.open path { stroke: var(--accent); }
.v-lock.open .sh-open { opacity: 1; }
.v-lock.open .sh-shut { opacity: 0; }
.v-lock.hide { opacity: 0; }

/* 숫자가 든 칸 */
.v-ncell rect { fill: var(--surface-2); stroke: transparent; stroke-width: 1.5; transition: stroke 0.25s ease, fill 0.3s ease; }
.v-ncell.on rect { stroke: var(--accent); }
.v-ncell.hot rect { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke: var(--accent); }
.v-ncell.bad rect { stroke: var(--value); }
.v-ncell.ice rect { fill: var(--line); }
.v-ncell.ice text { fill: var(--muted); }
.v-ncell.dim { opacity: 0.3; }
.v-ncell { transition: opacity 0.3s ease; }

/* 줄과 틀 */
.v-rowbg { fill: var(--surface); stroke: var(--line); transition: stroke 0.3s ease; }
.v-rowbg.on { stroke: var(--accent); }
.v-row { transition: opacity 0.3s ease; }
.v-row.dim { opacity: 0.42; }
.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-slot { transition: fill 0.25s ease, opacity 0.25s ease, stroke 0.25s ease; }
.v-slot.soft { fill: color-mix(in srgb, var(--accent) 50%, var(--surface-2)); }
.v-slot.pad { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 2; }
.v-slot.bad { fill: var(--value); }
.v-slot.k { fill: var(--key); }
.v-slot.miss { fill: none; stroke: var(--value); stroke-width: 1.2; }
.v-slot.off { opacity: 0.12; }
.v-zone { transition: opacity 0.3s ease; }
.v-zone.good { fill: var(--accent); opacity: 0.14; }
.v-zone.on { opacity: 0.3; }
.v-zone.good.on { opacity: 0.34; }

/* 문자 300통을 나타내는 격자: 맞힘(노랑), 틀림(붉은 테두리) */
.v-grid rect.hit { fill: var(--accent); }
.v-grid rect.miss { fill: none; stroke: var(--value); stroke-width: 1.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.bad { stroke: var(--value); }
.v-rule.mark { stroke: var(--text); stroke-width: 2; }
.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-gap { fill: var(--accent); opacity: 0.2; }
.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 { transition: opacity 0.3s ease; }
.v-bar.dim { opacity: 0.3; }
.v-bar.thin { fill: var(--line); transition: fill 0.2s ease; }
.v-bar.thin.on { fill: var(--accent); }
.v-vector { transition: opacity 0.3s ease; }
.v-vector line, .v-vector path { 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.hide, .v-line.hide { opacity: 0; }
.v-line.fx { transition: opacity 0.3s ease, stroke 0.3s ease; }
.v-line.soft { stroke: var(--line); }

/* 스위치 */
.v-sw { fill: var(--surface-2); stroke: var(--line); transition: fill 0.3s ease, stroke 0.3s ease; }
.v-sw.on { fill: color-mix(in srgb, var(--accent) 30%, var(--surface)); stroke: var(--accent); }
.v-swk { fill: var(--muted); transition: fill 0.3s ease; }
.v-swk.on { fill: var(--accent); }

/* 작은 그림: 문자, 파일 */
.v-msg { fill: var(--surface-2); stroke: var(--line); }
.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); }

.fx.off { opacity: 0.15; }
.nb { white-space: nowrap; }

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

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

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

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

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

.talk-box p,
.card .talk-box p {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.76em;
  line-height: 1.5;
  color: var(--soft);
  overflow-wrap: anywhere;
}

.talk-box.plain p,
.card .talk-box.plain p { font-family: var(--font); font-size: 0.84em; line-height: 1.5; color: var(--text); }

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

.talk-box p i.hit { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); }
.talk-box p i.wait { opacity: 0; }

/* 영어 원문 바로 아래에 붙이는 우리말 뜻 */
.talk-box p.ko,
.card .talk-box p.ko {
  margin-top: 0.4em;
  padding-top: 0.4em;
  border-top: 1px dashed var(--line);
  font-family: var(--font);
  font-size: 0.84em;
  line-height: 1.45;
  color: var(--text);
}

.talk-box p.ko.bad,
.card .talk-box p.ko.bad { color: var(--value); font-weight: 700; }

.talk-mid {
  font-size: 0.76em;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
}

.talk-tag {
  font-size: 0.8em;
  font-weight: 700;
  text-align: center;
  color: var(--value);
}

/* 코드 한 줄을 크게 보여 주고 조각마다 뜻을 단다 */
.code-big {
  padding: 0.8em 0.6em;
  border: 1px solid var(--line);
  border-radius: 0.8em;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.86em;
  text-align: center;
  white-space: nowrap;
  color: var(--muted);
}

.code-big i {
  font-style: normal;
  padding: 0.1em 0.15em;
  border-radius: 0.25em;
  color: var(--text);
  transition: background 0.25s ease, color 0.25s ease;
}

.code-big i.on { background: var(--accent); color: var(--on-accent); }

.code-notes {
  display: grid;
  gap: 0.35em;
  margin: 0.6em 0 0;
  padding: 0;
  list-style: none;
}

.code-notes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  padding: 0.55em 0.8em;
  border-radius: 0.6em;
  background: var(--surface);
  outline: 1.5px solid transparent;
  transition: outline-color 0.25s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  .viz *,
  .talk-box,
  .talk-box p i,
  .code-big i,
  .code-notes li { transition: none !important; }
}