defVideo 작업분 반영

client/src/components/overlay/StationOverlay.tsx

@@ -509,9 +509,10 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
         });
       }
 
-      // 나침반 HUD
+      // 나침반 HUD — 우측 상단 (상단 '카메라 파라미터' 버튼 아래로 띄워 하단 StationBar/배지와 겹침 방지)
       {
-        const cx = W-54, cy = H-54-H*0.05, r = 38;
+        const r = 38;
+        const cx = W-54, cy = 52 + r;
         ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI*2);
         ctx.fillStyle = 'rgba(0,0,0,0.55)'; ctx.fill();
         ctx.strokeStyle = 'rgba(255,255,255,0.25)'; ctx.lineWidth = 1; ctx.stroke();
@@ -545,11 +546,13 @@ export default function StationOverlay({ currentFrame, currentTime, fps, visible
           ...(cache.clCount > 0 ? [{ color: 'rgba(255,60,60,0.9)', text: `— 선로중심선 (${cache.clCount}점)` }] : []),
           ...(cache.poiCount > 0 ? [{ color: '#64c8ff', text: `+ 지장물 ${cache.poiCount}개` }] : []),
         ];
+        // 좌상단 타임코드(HTML) 아래로 배치 (코너 HUD 정보 그룹)
+        const legendTop = 34;
         ctx.fillStyle = 'rgba(0,0,0,0.6)';
-        ctx.fillRect(6, 6, 160, lines.length*15+6);
+        ctx.fillRect(6, legendTop, 160, lines.length*15+6);
         lines.forEach(({ color, text }, i) => {
           ctx.font = '10px sans-serif'; ctx.fillStyle = color;
-          ctx.fillText(text, 12, 20+i*15);
+          ctx.fillText(text, 12, legendTop + 14 + i*15);
         });
       }
     };