/* 12강 공용 스타일: 프레임 이름표, 바닥 격자, 점, 터미널 이어지는 줄 */

/* 프레임 이름표 (둥근 네모 + 고정폭 글자) */
.f-frame { transition: opacity 0.3s ease; }
.f-frame rect { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; transition: stroke 0.3s ease, fill 0.3s ease; }
.viz text.fn { font-family: var(--mono); font-weight: 700; fill: var(--text); transition: fill 0.3s ease; }
.f-frame.on rect { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.f-frame.on text.fn { fill: var(--accent); }
.f-frame.k rect { stroke: var(--key); fill: color-mix(in srgb, var(--key) 14%, var(--surface)); }
.f-frame.bad rect { stroke: var(--value); fill: color-mix(in srgb, var(--value) 14%, var(--surface)); }
.f-frame.bad text.fn { fill: var(--value); }
.f-frame.ghost rect { fill: none; stroke-dasharray: 3 3; }
.f-frame.ghost text.fn { fill: var(--muted); }
.f-frame.dim { opacity: 0.35; }
.f-frame.hide { opacity: 0; }

/* 바닥 격자 */
.f-grid line { stroke: var(--line); stroke-width: 1; opacity: 0.55; }
.f-floor { fill: var(--surface); stroke: var(--line); }

/* 점 */
.f-pt { fill: var(--accent); transition: opacity 0.3s ease, fill 0.3s ease; }
.f-pt.bad { fill: var(--value); }
.f-pt.k { fill: var(--key); }
.f-pt.m { fill: var(--muted); }
.f-pt.hide { opacity: 0; }
.f-pt.ring { fill: none; stroke: var(--accent); stroke-width: 1.6; }

/* 그래프 선 */
.f-plot { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.3s ease; }
.f-plot.on { stroke: var(--accent); }
.f-plot.k { stroke: var(--key); }
.f-plot.bad { stroke: var(--value); }
.f-plot.m { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 4 4; }
.f-plot.hide { opacity: 0; }

/* 터미널에서 앞 줄에 이어지는 명령 (\ 다음 줄) */
.viz text.r-out.c { fill: var(--text); }

/* 묶음 감추기 */
g.f-g { transition: opacity 0.3s ease; }
g.f-g.hide { opacity: 0; }
g.f-g.dim { opacity: 0.3; }