/* 2강 공용 스타일 */

/* 노트북 받침 */
.r2-base { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.v-box.k .r2-base { stroke: var(--key); }
.v-box.bad .r2-base { stroke: var(--value); }
.v-box.on .r2-base { stroke: var(--accent); }
.v-box.on text.b { fill: var(--accent); }

/* 키보드 키 */
.r2-key rect { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; transition: fill 0.2s ease, stroke 0.2s ease; }
.r2-key text { fill: var(--text); font-weight: 700; transition: fill 0.2s ease; }
.r2-key.on rect { fill: var(--accent); stroke: var(--accent); }
.r2-key.on text { fill: var(--on-accent); }
.r2-key.k rect { stroke: var(--key); }
.r2-key.k text { fill: var(--key); }
.r2-key.dim { opacity: 0.45; }

/* 둘레 (컴퓨터 경계, 도메인 묶음) */
.r2-zone { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-dasharray: 4 4; transition: stroke 0.3s ease, opacity 0.3s ease; }
.r2-zone.k { stroke: var(--key); }
.r2-zone.on { stroke: var(--accent); }
.r2-zone.bad { stroke: var(--value); }
.r2-zone.solid { stroke-dasharray: none; }

/* 퍼지는 탐색 물결 */
.r2-wave { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.7; transition: opacity 0.3s ease; }
.r2-wave.hide { opacity: 0; }
.r2-wave.bad { stroke: var(--value); }

/* 터미널 출력 속 강조 글자 */
.viz text.r-out tspan.on { fill: var(--accent); font-weight: 700; }
.viz text.r-out tspan.k { fill: var(--key); font-weight: 700; }
.viz text.r-out tspan.bad { fill: var(--value); font-weight: 700; }

/* 연못 위 글자는 바탕과 띄운다 */
.viz text.r2-onpond { paint-order: stroke; stroke: color-mix(in srgb, #4556ff 30%, var(--surface)); stroke-width: 3px; stroke-linejoin: round; }

/* 묶음 통째로 감추기 */
.viz g.fx { transition: opacity 0.3s ease; }
.viz g.fx.hide { opacity: 0; }
.v-box.ghost .r2-base { fill: none; stroke-dasharray: 3 3; }