From 290240406123bcbba7239fcf2dc63f81c16f1af3 Mon Sep 17 00:00:00 2001
From: ypshim <ypshim71@gmail.com>
Date: Fri, 23 Oct 2026 11:14:34 +0900
Subject: [PATCH] feat(view): 3D area with a thin title band and collapsible
 info panels left and right
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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    | 20 +++++++++++---------
 src/main.ts   |  2 +-
 src/style.css | 19 +++++++++++++++++++
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 20a9434..de16fcf 100644
--- a/index.html
+++ b/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">
diff --git a/src/main.ts b/src/main.ts
index 89d73af..383b5b3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -811,7 +811,7 @@ const REBAR_MEMBERS: { id: RebarRow['member']; label: string }[] = [
 /** 3D colour basis buttons on ③ and their legend (spec §6.7). */
 function renderRebarColor(): void {
   // The colour control lives in the 3D window and is shown only on ③.
-  $<HTMLDivElement>('rebar-color').hidden = state.stage !== 'rebar';
+  $<HTMLDetailsElement>('color-info').hidden = state.stage !== 'rebar';
   for (const b of document.querySelectorAll<HTMLButtonElement>('#rebar-color button')) {
     b.setAttribute('aria-pressed', String(b.dataset.color === state.rebarColor));
   }
diff --git a/src/style.css b/src/style.css
index 1624611..e40e24d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -760,3 +760,22 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
   .viewer-slot .canvas { height: 60vh; min-height: 420px; flex: none; }
   .rebar-table thead th { position: sticky; top: 0; background: #ffffff; z-index: 1; }
 }
+
+/* 3D 영역 (승인 2026-10-23): 상단 띠와 좌·우 정보창을 캔버스 위에 얇게 띄움. 조작 요소 44px. */
+#viewer-block { position: relative; }
+#viewer-block .viewer-head { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 5; margin: 0; height: 44px; padding: 0 10px; flex-wrap: nowrap; background: rgba(255, 255, 255, 0.92); border-radius: 6px; }
+#viewer-block .viewer-head h2 { font-size: 14px; white-space: nowrap; }
+#viewer-block .viewer-head #origin { margin-left: auto; font-size: 12px; white-space: nowrap; }
+#viewer-block .info-panel { position: absolute; z-index: 5; top: 60px; max-height: calc(100% - 120px); overflow: auto; background: rgba(255, 255, 255, 0.92); border: 1px solid #d5dde6; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); padding: 0 8px 8px; font-size: 13px; }
+#viewer-block .info-panel > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: #18212b; list-style-position: outside; }
+#viewer-block .parts-info { left: 8px; width: 168px; }
+#viewer-block .color-info { right: 8px; width: 180px; }
+#viewer-block .parts-info #parts label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
+#viewer-block .color-info .rebar-color { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
+#viewer-block .color-info .rebar-color button { width: 100%; }
+#viewer-block .color-info .rebar-legend { flex-direction: column; gap: 4px; padding: 6px 0 0; }
+@media (max-width: 600px) {
+  #viewer-block .viewer-head { position: static; height: auto; flex-wrap: wrap; }
+  #viewer-block .info-panel { position: static; width: auto; max-height: none; margin: 8px 0 0; }
+}
+#viewer-block .parts-info .parts-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; }