feat: improve workbench layout and panel controls (#9)

web/index.html

@@ -12,12 +12,13 @@
 <link rel="stylesheet" href="viewer-readability.css">
 </head>
 <body class="network-page">
-<header class="topbar"><a class="brand" href="./"><span class="brand-icon" aria-hidden="true">⌘</span><span>HWACHEON<small>STORMWATER NETWORK</small></span></a><div class="title-block"><h1>화천군 맨홀 및 우수관로 3D 뷰어</h1><span>입력 제원 기반 관망 탐색</span></div><span class="local-badge"><i></i> LOCAL ONLY</span><nav class="studio-nav" aria-label="화천군 관망"><a href="./" aria-current="page">화천군 관망</a></nav></header>
+<header class="topbar"><a class="brand" href="./"><span class="brand-icon" aria-hidden="true">⌘</span><span>HWACHEON<small>STORMWATER NETWORK</small></span></a><div class="title-block"><h1>화천군 관망도</h1><span>SWMM 입력 제원 · 3D 검토</span></div><span class="local-badge"><i></i> 입력 자료 기반</span><nav class="panel-actions" aria-label="화면 패널"><button id="toggle-controls" aria-controls="controls-panel" aria-expanded="true">시설·점검</button><button id="toggle-inspector" aria-controls="inspector-panel" aria-expanded="true">시설 제원</button></nav></header>
+<button id="panel-backdrop" class="panel-backdrop" aria-label="열린 패널 닫기" hidden></button>
 <main class="app-grid">
-<aside class="controls" aria-label="관망 제어">
+<aside class="controls" id="controls-panel" aria-label="관망 제어" tabindex="-1">
  <div class="section-kicker">NETWORK EXPLORER <span>01</span></div>
- <h2>관망을 입체로,<br><span>연결을 더 분명하게.</span></h2>
- <p class="subtle">SWMM 입력 제원을 공간으로 살펴봅니다.<br>형상과 연결 높이를 선택해 확인하세요.</p>
+ <h2>시설 탐색과 점검</h2>
+ <p class="subtle">ID로 찾고, 연결과 제원을 확인하세요.</p>
  <div class="summary-cards"><div><span>접합부</span><strong id="node-count">—</strong></div><div><span>관로</span><strong id="pipe-count">—</strong></div></div>
  <section><div class="section-heading"><h3>시설 찾기</h3><span class="small">ID 검색</span></div><label class="search-wrap"><span aria-hidden="true">⌕</span><input id="search" type="search" placeholder="MH3, UHR1-0249…" autocomplete="off" aria-label="시설 ID 검색"></label><div id="search-status" class="small" aria-live="polite"></div><div id="search-results" class="search-results" aria-label="검색 결과"></div></section>
  <section><div class="section-heading"><h3>시설 표시</h3><button id="show-all" class="text-button">모두 표시</button></div><div class="layer-list">
@@ -54,7 +55,7 @@
  <div class="viewer-footer"><span>드래그 회전 <i>·</i> 휠 확대 <i>·</i> Shift / 우클릭 드래그 이동</span><button id="open-help" class="text-button">조작 안내 ⓘ</button></div>
  <div class="datum-note">기준 그리드 · 지형 아님</div>
 </section>
-<aside class="inspector" aria-label="시설 제원"><div class="section-kicker">FACILITY DETAILS <span>02</span></div><div id="details"></div></aside>
+<aside class="inspector" id="inspector-panel" aria-label="시설 제원" tabindex="-1"><div class="section-kicker">시설 제원 <span>INSPECTOR</span></div><div id="details"></div></aside>
 </main>
 <footer class="statusbar"><span><i class="status-light"></i> <span id="render-status">준비 중</span></span><span id="model-status">단위 · m / XY 단위는 가정</span><span>수위·유량·실제 흐름 미해석</span></footer>
 <div id="toast" role="status" aria-live="polite"></div>