/* 13강 공용 스타일: 로봇 모델(R2D2 닮은 모델), RViz 3D 뷰, 슬라이더, 속성 목록 */

/* 3D 뷰 바탕과 바닥 격자 */
.m-view { fill: #0b0d12; stroke: var(--line); }
.m-grid { fill: none; stroke: #3b404c; stroke-width: 1; }

/* 로봇 부품 (link). 기본은 회색, blue·white는 material 색 */
.m-part { transition: opacity 0.3s ease; }
.m-part .sh { fill: var(--surface-2); stroke: var(--soft); stroke-width: 1.3; transition: fill 0.35s ease, stroke 0.35s ease; }
.m-part.blue .sh { fill: color-mix(in srgb, #3d63ff 62%, var(--surface)); stroke: #8ea4ff; }
.m-part.white .sh { fill: #d9dbe0; stroke: #f4f2ec; }
.m-part.black .sh { fill: #3a3d45; stroke: #6b6f7a; }
.m-part.on .sh { stroke: var(--accent); stroke-width: 2; }
.m-part.bad .sh { stroke: var(--value); stroke-dasharray: 3 3; }
.m-part.dim { opacity: 0.3; }
.m-part.hide { opacity: 0; }
.m-part .lo { opacity: 0.45; }

/* link 상자 (나무 그림) */
.m-link { transition: opacity 0.3s ease; }
.m-link rect { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; transition: stroke 0.3s ease, fill 0.3s ease; }
.m-link text { font-family: var(--mono); font-weight: 700; fill: var(--text); transition: fill 0.3s ease; }
.m-link.on rect { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.m-link.on text { fill: var(--accent); }
.m-link.k rect { stroke: var(--key); }
.m-link.bad rect { stroke: var(--value); }
.m-link.dim { opacity: 0.35; }
.m-link.hide { opacity: 0; }

/* 슬라이더 */
.m-track { fill: var(--surface-2); }
.m-fill { fill: var(--accent); opacity: 0.55; }
.m-knob { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.m-slider.dim { opacity: 0.4; }
.m-slider { transition: opacity 0.3s ease; }

/* 속성 목록 (RViz Displays 같은 줄) */
.m-row { transition: opacity 0.3s ease; }
.m-row .bg { fill: transparent; transition: fill 0.3s ease; }
.m-row.on .bg { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.m-row.bad .bg { fill: color-mix(in srgb, var(--value) 18%, transparent); }
.m-row.dim { opacity: 0.35; }
.m-row.hide { opacity: 0; }
.m-box { fill: none; stroke: var(--muted); stroke-width: 1.3; }
.m-row .tick { fill: none; stroke: var(--key); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.25s ease; }
.m-row .tick.hide { opacity: 0; }

/* 구역 표시 (RViz 화면 구성) */
.m-zone { fill: var(--surface-2); stroke: var(--line); transition: stroke 0.3s ease, fill 0.3s ease; }
.m-zone.on { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 14%, var(--surface)); }

/* 버튼 */
.m-btn rect { fill: var(--surface-2); stroke: var(--line); transition: stroke 0.3s ease, fill 0.3s ease; }
.m-btn text { fill: var(--text); font-weight: 600; }
.m-btn.on rect { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.m-btn.on text { fill: var(--accent); }