feat(view): 3D area with a thin title band and collapsible info panels left and right

The title, view buttons and origin sit in one 44 px band on the model. 부재 표시 is a collapsible panel on the left and
색 기준 (③ only) a collapsible panel on the right, both over the canvas, about 170 px wide, with 44 px touch targets.
Below 600 px the band wraps and the panels fall below the model.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>

index.html

@@ -75,20 +75,22 @@
           <div class="viewer-head">
             <h2 id="viewer-title">교각 3D 뷰</h2>
             <div id="views" class="views" role="group" aria-label="시점"></div>
-            <div class="rebar-color" id="rebar-color" hidden role="group" aria-label="철근 색 기준">
-              <span class="lbl">색 기준</span>
+            <span id="origin" class="muted"></span>
+          </div>
+          <div id="canvas" class="canvas" aria-label="교각 3D 뷰"></div>
+          <details class="info-panel parts-info" open>
+            <summary>부재 표시</summary>
+            <div id="parts"></div>
+          </details>
+          <details class="info-panel color-info" id="color-info" open hidden>
+            <summary>색 기준</summary>
+            <div class="rebar-color" id="rebar-color" role="group" aria-label="철근 색 기준">
               <button type="button" data-color="role" aria-pressed="true">역할</button>
               <button type="button" data-color="diameter" aria-pressed="false">직경</button>
               <button type="button" data-color="member" aria-pressed="false">부재</button>
               <ul id="rebar-legend" class="rebar-legend"></ul>
             </div>
-            <span id="origin" class="muted"></span>
-          </div>
-          <div id="canvas" class="canvas" aria-label="교각 3D 뷰"></div>
-          <fieldset class="parts">
-            <legend>부재 표시</legend>
-            <div id="parts"></div>
-          </fieldset>
+          </details>
         </section>
 
         <aside class="panel results" aria-labelledby="result-title">