/* 그림(SVG) 부품과 등장 효과. 좌표는 viewBox 기준 폭 320 */

.viz { margin: 0; }

.viz svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- 글자 --- */

.viz text {
  font-family: var(--font);
  font-size: 12.5px;
  fill: var(--soft);
}

.viz text.b { fill: var(--text); font-weight: 700; }
.viz text.s { fill: var(--muted); font-size: 11px; }
.viz text.m { fill: var(--muted); }
.viz text.on { fill: var(--accent); font-weight: 700; }
.viz text.bad { fill: var(--value); }
.viz text.q { fill: var(--accent); }
.viz text.k { fill: var(--key); }
.viz text.v { fill: var(--value); }
.viz text.big { font-size: 16px; font-weight: 700; }

.viz text.v-num {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--text);
}

.viz text.v-num.big { font-size: 15px; }
.viz text.v-num.on { fill: var(--accent); }
.viz text.v-num.bad { fill: var(--value); }

.viz text.n {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  fill: var(--muted);
}

/* --- 단어 칩 --- */

.v-chip { transition: opacity 0.3s ease; }
.v-chip rect { fill: var(--surface-2); transition: fill 0.25s ease; }
.v-chip text { fill: var(--text); font-weight: 600; transition: fill 0.25s ease; }
.v-chip.on rect { fill: var(--accent); }
.v-chip.on text { fill: var(--on-accent); }
.v-chip.dim { opacity: 0.3; }
.v-chip.q rect { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.v-chip.q text { fill: var(--accent); }
.v-chip.mono text { font-family: var(--mono); }

/* --- 선, 화살표 --- */

.v-line {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v-line.on, .v-line.q { stroke: var(--accent); }
.v-line.k { stroke: var(--key); }
.v-line.v, .v-line.bad { stroke: var(--value); }
.v-line.thick { stroke-width: 2.5; }
.v-line.axis { stroke: var(--line); }
.v-line.track { stroke: var(--surface-2); stroke-width: 4; }
.v-line.dash { stroke: var(--line); stroke-dasharray: 3 4; }
.v-line.dash.on { stroke: var(--accent); opacity: 0.6; }
.v-line.fx2 { transition: stroke-width 0.4s ease, opacity 0.4s ease; }

.v-vector line,
.v-vector path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v-vector.on line, .v-vector.on path { stroke: var(--accent); }
.v-vector.big line, .v-vector.big path { stroke-width: 2.5; }

/* --- 상자, 칸 --- */

.v-box rect { fill: var(--surface); stroke: var(--line); }
.v-box.on rect { stroke: var(--accent); }
.v-box.ghost rect { fill: none; stroke-dasharray: 3 3; }
.v-box.ghost text { fill: var(--muted); }

.v-frame { fill: var(--surface); stroke: var(--line); }
.v-frame.on { stroke: var(--accent); }
.v-frame.q { stroke: var(--accent); }

.v-slot { fill: var(--surface-2); }
.v-slot.on { fill: var(--accent); }
.v-zone { fill: var(--value); opacity: 0.1; }
.v-track { fill: var(--surface-2); }
.v-funnel { fill: var(--surface); stroke: var(--line); }
.v-focus { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.v-knob { fill: var(--accent); }
.v-dot { fill: var(--accent); }
.v-dial { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 3; }

.v-node { fill: var(--surface-2); stroke: var(--muted); stroke-width: 1.5; }
.v-node.on { fill: var(--accent); stroke: none; }
.v-node.on + text.n { fill: var(--on-accent); }

.v-bar { fill: #6d7383; }
.v-bar.on { fill: var(--accent); }
.v-bar.bad { fill: var(--value); }
.v-bar.k { fill: var(--key); }
.v-bar.v { fill: var(--value); }

.v-cells rect { fill: var(--surface-2); transition: fill 0.3s ease; }
.v-cells.on rect { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.v-cells.q rect { fill: var(--accent); }
.v-cells.k rect { fill: var(--key); }
.v-cells.v rect { fill: var(--value); }

.v-grid rect { fill: var(--surface-2); transition: opacity 0.35s ease, fill 0.35s ease; }
.v-grid.on rect, .v-grid.q rect { fill: var(--accent); }
.v-grid.k rect { fill: var(--key); }
.v-grid.v rect { fill: var(--value); }
.v-grid.soft rect { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.v-grid rect.off { opacity: 0.1; }

.v-cell { transition: stroke 0.25s ease; }
.v-cell.on { stroke: var(--accent); stroke-width: 2; }

/* 단계 표시 */
.v-step .bg { fill: var(--surface); stroke: var(--line); transition: stroke 0.3s ease; }
.v-step circle { fill: var(--surface-2); transition: fill 0.3s ease; }
.v-step text.n { transition: fill 0.3s ease; }
.v-step.on .bg { stroke: var(--accent); }
.v-step.on circle { fill: var(--accent); }
.v-step.on text.n { fill: var(--on-accent); }

/* 작은 그림 */
.v-icon .ring { fill: var(--surface); stroke: var(--line); }
.v-icon .o {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v-icon .f { fill: var(--accent); }

/* 스크립트로 켜고 끄는 요소 */
.fx { transition: opacity 0.3s ease; }
.fx.hide, .v-chip.hide { opacity: 0; }
.fx.dim { opacity: 0.4; }

@keyframes v-pulse {
  0%, 100% { stroke-width: 1.5; }
  50% { stroke-width: 4; }
}

.card.is-active .v-chip.pulse rect { animation: v-pulse 1.4s ease-in-out 1.2s infinite; }

/* --- HTML 부품 --- */

/* 합이 1인 띠 */
.stackbar { display: flex; gap: 2px; height: 1.3em; }
.stackbar i { flex: 0 0 auto; width: calc(var(--v) * 100% - 2px); border-radius: 0.25em; background: #6d7383; }
.stackbar i.on { background: var(--accent); }

.stackbar-label {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4em;
  font-size: 0.74em;
  color: var(--muted);
}

/* 6×6 가중치 표 */
.heat { display: grid; gap: 3px; }

.heat-row {
  display: grid;
  grid-template-columns: 4.3em repeat(6, 1fr);
  gap: 3px;
  align-items: center;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

.heat-row.on, .heat-row.head { opacity: 1; }
.heat-row.head span { font-size: 0.58em; text-align: center; color: var(--muted); }

.heat-row button {
  padding: 0.5em 0.2em;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.74em;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.heat-row.on button { color: var(--accent); }
.heat-row button:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }

.heat .cell {
  padding: 0.6em 0;
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--accent) var(--p), var(--surface-2));
  font-family: var(--mono);
  font-size: 0.62em;
  font-weight: 600;
  text-align: center;
}

.heat .cell.hi { color: var(--on-accent); }

.lines li { outline: 1.5px solid transparent; transition: outline-color 0.25s ease; }
.lines li.on { outline-color: var(--accent); }

/* --- 등장 효과: data-a, 지연은 --d --- */

.js [data-a] {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.45s ease var(--d, 0s),
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s);
}

.js [data-a="grow-x"] { transform-origin: left center; }
.js [data-a="grow-xr"] { transform-origin: right center; }
.js [data-a="grow-y"] { transform-origin: center bottom; }

.js [data-a="draw"] {
  stroke-dasharray: 1;
  transition:
    opacity 0.01s linear var(--d, 0s),
    stroke-dashoffset 0.7s ease var(--d, 0s);
}

.js .card:not(.is-active) [data-a] { transition: none; }
.js .card:not(.is-active) [data-a="fade"] { opacity: 0; }
.js .card:not(.is-active) [data-a="rise"] { opacity: 0; transform: translateY(8px); }
.js .card:not(.is-active) [data-a="pop"] { opacity: 0; transform: scale(0.5); }
.js .card:not(.is-active) [data-a="grow-x"],
.js .card:not(.is-active) [data-a="grow-xr"] { transform: scaleX(0); }
.js .card:not(.is-active) [data-a="grow-y"] { transform: scaleY(0); }
.js .card:not(.is-active) [data-a="draw"] { opacity: 0; stroke-dashoffset: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .card [data-a],
  .js .card:not(.is-active) [data-a] {
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  .fx, .v-chip, .v-chip rect, .v-chip text, .v-grid rect, .v-cells rect, .v-step * { transition: none; }
  .card.is-active .v-chip.pulse rect { animation: none; }
}