사이드패널 넓이 조절기능 추가

public/app.js

@@ -391,6 +391,45 @@ document.addEventListener('DOMContentLoaded', () => {
     if (canvasEl) connect();
     window.addEventListener('resize', updateBboxContainerPosition);
 
+    // =================================================
+    // [신규] Sidebar Resizer (Drag Handle) Logic
+    // =================================================
+    const resizer = document.getElementById('drag-handle');
+    const rightPanel = document.querySelector('.mission-right');
+
+    if (resizer && rightPanel) {
+        resizer.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+
+            // 드래그 시작 시점의 위치와 너비 저장
+            const startX = e.clientX;
+            const startRightWidth = rightPanel.getBoundingClientRect().width;
+
+            // 드래그 중
+            const onMouseMove = (e) => {
+                // 오른쪽 패널은 왼쪽에 있으므로, 왼쪽으로 가면 너비가 늘어나고 오른쪽으로 가면 줄어듦
+                // Delta = 현재 마우스 X - 시작 X
+                // 이동한 만큼 너비에서 뺌 (왼쪽 드래그 -> 음수 -> 너비 증가)
+                const newWidth = startRightWidth - (e.clientX - startX);
+
+                // 너비 적용 (CSS의 min-width, max-width가 있어서 제한됨)
+                rightPanel.style.width = `${newWidth}px`;
+
+                // **중요**: 레이아웃이 변경되면 캔버스 오버레이(BBox) 위치가 어긋나므로 재계산 필요
+                updateBboxContainerPosition();
+            };
+
+            // 드래그 종료
+            const onMouseUp = () => {
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+            };
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        });
+    }
+
     // =================================================
     // 3. 모델 파일 관리 로직
     // =================================================

public/dashboard.html

@@ -94,6 +94,8 @@
                 </div>
             </div>
 
+            <div id="drag-handle" class="resizer"></div>
+
             <aside class="mission-right">
                 <div class="right-header">
                     <span id="btn-summary" class="active">Summary</span>

public/style.css

@@ -1,4 +1,4 @@
-/* style.css - Merged & Updated */
+/* style.css - Merged & Updated (Resizable Sidebar Added) */
 
 /* ========================================================== */
 /* 1. 기본 및 공통 스타일 (Base) */
@@ -143,6 +143,7 @@ main {
     background-color: #e0e0e0;
     display: flex; flex-direction: column;
     border-right: 1px solid #999;
+    flex-shrink: 0; /* 좌측 메뉴 크기 고정 */
 }
 .nav-item {
     display: flex; flex-direction: column; align-items: center; justify-content: center;
@@ -161,8 +162,7 @@ main {
 .mission-center {
     flex-grow: 1; display: flex; flex-direction: column;
     position: relative; background-color: #555;
-    /* 추가: 너비 확보 */
-    min-width: 0;
+    min-width: 0; /* Flexbox overflow fix */
 }
 
 .filter-push-right {
@@ -250,14 +250,34 @@ main {
     line-height: 1;
 }
 
+/* 5-2-1. [신규] 리사이저 (Drag Handle) */
+.resizer {
+    width: 5px;
+    cursor: col-resize;
+    background-color: #333;
+    border-left: 1px solid #444;
+    border-right: 1px solid #444;
+    flex-shrink: 0;
+    z-index: 100;
+    transition: background-color 0.2s;
+}
+.resizer:hover {
+    background-color: #5a67d8; /* 드래그 가능함을 알리는 강조색 */
+}
+
 /* 5-3. 우측 사이드바 (정보 패널) */
 .mission-right {
-    width: 300px; background-color: #444;
-    border-left: 1px solid #666;
+    width: 300px; /* 기본 너비 */
+    min-width: 150px; /* 최소 너비 */
+    max-width: 800px; /* 최대 너비 */
+    background-color: #444;
+    /* border-left: 1px solid #666; -> Resizer에 border를 주었으므로 제거 */
     display: flex; flex-direction: column;
+    flex-shrink: 0; /* 자동 수축 방지 */
 }
 .right-header {
     height: 40px; display: flex; border-bottom: 1px solid #666;
+    flex-shrink: 0;
 }
 .right-header span {
     flex: 1; display: flex; align-items: center; justify-content: center;