feat: make app workspaces resizable

apps/acoustic-camera/index.html

@@ -29,8 +29,8 @@
         <a href="#inspect-step" data-workflow-step="4"><span>4</span><strong>확인</strong><small>Map · 지표</small></a>
       </nav>
 
-      <main class="camera-layout">
-        <aside class="control-panel" aria-label="입력 및 시뮬레이션 설정">
+      <main class="camera-layout" id="camera-layout" data-split-layout>
+        <aside class="control-panel" id="camera-controls" data-split-panel aria-label="입력 및 시뮬레이션 설정">
           <section class="workflow-card input-card" id="input-step" data-workflow-section="1">
             <div class="step-heading">
               <span class="step-number">1</span>
@@ -156,7 +156,20 @@
           </section>
         </aside>
 
-        <section class="scene-workspace" aria-label="Acoustic image workspace">
+        <div
+          class="split-handle"
+          id="camera-split-handle"
+          role="separator"
+          tabindex="0"
+          aria-label="분석 설정 패널 너비 조절"
+          aria-controls="camera-controls"
+          aria-orientation="vertical"
+          data-split-resizer
+          data-storage-key="micarrsim.camera.control-panel-width"
+          title="드래그하거나 방향키로 너비 조절 · Enter/더블클릭으로 초기화"
+        ></div>
+
+        <section class="scene-workspace" id="camera-workspace" aria-label="Acoustic image workspace">
           <div class="workspace-heading">
             <div><span class="compact-label">CURRENT SCENE</span><h1 id="workspace-title">음향 장면</h1></div>
             <p class="workspace-meta" id="scene-meta">장면을 불러오고 있습니다.</p>