/* ROS 2 입문 4강 전용 스타일: 메시지 상자 */

.m4-box { transition: opacity 0.3s ease; }
.m4-box .fr { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; transition: stroke 0.3s ease, fill 0.3s ease; }
.m4-box.on .fr { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.m4-box.k .fr { stroke: var(--key); }
.m4-box.bad .fr { stroke: var(--value); }
.m4-box.soft .fr { fill: var(--surface-2); }
.m4-box.dash .fr { fill: none; stroke-dasharray: 4 3; }
.m4-box.dim { opacity: 0.35; }
.m4-box.hide { opacity: 0; }
.viz text.m4-ttl { font-family: var(--mono); font-weight: 700; fill: var(--muted); transition: fill 0.3s ease; }
.m4-box.on text.m4-ttl { fill: var(--accent); }
.m4-box.k text.m4-ttl { fill: var(--key); }
.m4-box.bad text.m4-ttl { fill: var(--value); }
.viz text.mono { font-family: var(--mono); }

/* 라이다 자리, 벽 */
.m4-lidar { fill: var(--surface); stroke: var(--key); stroke-width: 1.6; }
.m4-wall { fill: var(--muted); }

/* 선 위에 놓인 글자의 바탕 */
.viz text.halo { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }