/* 3강 전용 그림 부품. 노랑(on) = 입력, 청록(k) = 타깃 */

/* 글자나 번호가 든 네모 칸 */
.t-cell { transition: opacity 0.3s ease; }

.t-cell rect {
  fill: var(--surface-2);
  stroke: transparent;
  stroke-width: 1.5;
  transition: fill 0.25s ease, stroke 0.25s ease;
}

.viz .t-cell text {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--text);
  transition: fill 0.25s ease;
}

.viz .t-cell.w text { font-family: var(--font); font-size: 11.5px; }

.t-cell.on rect { fill: var(--accent); }
.viz .t-cell.on text { fill: var(--on-accent); }
.t-cell.k rect { fill: var(--key); }
.viz .t-cell.k text { fill: var(--on-accent); }
.t-cell.soft rect { fill: color-mix(in srgb, var(--accent) 40%, var(--surface-2)); }
.t-cell.ol rect { stroke: var(--accent); }
.t-cell.olk rect { stroke: var(--key); }
.t-cell.bad rect { stroke: var(--value); }
.viz .t-cell.bad text { fill: var(--value); }
.t-cell.dim { opacity: 0.28; }
.t-cell.hide { opacity: 0; }

/* 표의 한 줄 */
.t-row { transition: opacity 0.3s ease; }
.t-row.dim { opacity: 0.22; }
.t-row.hide { opacity: 0; }
.t-row.on .t-cell rect { stroke: var(--accent); }
.viz .t-row text.lab { fill: var(--muted); font-size: 11.5px; transition: fill 0.25s ease; }
.viz .t-row.on text.lab { fill: var(--accent); font-weight: 700; }

/* 창문(윈도) 테두리 */
.t-frame { fill: none; stroke: var(--accent); stroke-width: 2; }
.t-frame.k { stroke: var(--key); }
.t-frame.ghost { stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.6; }

/* 가려 둔 부분 */
.t-cover { fill: var(--surface); stroke: var(--line); stroke-dasharray: 3 3; }

/* 타깃 색 단어 칩 */
.v-chip.k rect { fill: var(--key); }
.v-chip.k 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); }

.viz text.k.b { fill: var(--key); font-weight: 700; }
.viz tspan.k { fill: var(--key); font-weight: 700; }
.viz tspan.on { fill: var(--accent); font-weight: 700; }
.viz tspan.b { fill: var(--text); font-weight: 700; }
.viz text.f11 { font-size: 11px; }
.viz text.f12 { font-size: 12px; }
.viz text.f13 { font-size: 13.5px; }
.viz text.f14 { font-size: 14px; }
.viz text.mono { font-family: var(--mono); }
.viz text.num { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: var(--text); }
.viz text.num.on { fill: var(--accent); }
.viz text.num.k { fill: var(--key); }
.viz text.num.bad { fill: var(--value); }
.viz text.num.f11 { font-size: 11px; }
.viz text.num.xl { font-size: 26px; font-weight: 700; }
.viz text.num.lg { font-size: 17px; font-weight: 700; }

.v-bar.fxw { transition: opacity 0.3s ease; }
.c-key { color: var(--key); }
.card h2 em.c-key { color: var(--key); }

/* 종이 한 장 */
.t-page { fill: var(--surface); stroke: var(--line); }
.t-ink { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.t-band { fill: var(--accent); opacity: 0.14; }
.t-band.k { fill: var(--key); }
.t-band.bad { fill: var(--value); }

@media (prefers-reduced-motion: reduce) {
  .t-cell, .t-cell rect, .t-row, .viz .t-cell text { transition: none; }
  .v-chip rect, .v-chip text, .v-line.fx2, .v-cell, .v-step .bg, .v-step circle { transition: none; }
}

.v-dot.k { fill: var(--key); }