From 41406990071f5c895e49a8e5cd80e7f538c01bc2 Mon Sep 17 00:00:00 2001
From: ypshim <ypshim71@gmail.com>
Date: Fri, 23 Oct 2026 09:12:31 +0900
Subject: [PATCH] =?UTF-8?q?fix(view):=20move=20the=20=E2=91=A2=20colour=20?=
 =?UTF-8?q?control=20into=20the=203D=20viewer=20window?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The colour basis control and legend sit below the 3D canvas and show only on ③, so they belong to the model window.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 index.html    | 14 +++++++-------
 src/main.ts   |  3 +++
 src/style.css |  1 +
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index da7f8c7..68994e1 100644
--- a/index.html
+++ b/index.html
@@ -74,6 +74,13 @@
             <span id="origin" class="muted"></span>
           </div>
           <div id="canvas" class="canvas" aria-label="교각 3D 뷰"></div>
+          <div class="rebar-color" id="rebar-color" hidden role="group" aria-label="철근 색 기준">
+            <span class="lbl">색 기준</span>
+            <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>
           <fieldset class="parts">
             <legend>부재 표시</legend>
             <div id="parts"></div>
@@ -152,13 +159,6 @@
           <p class="pnote">형상은 ② 형상계획 기준입니다. 형상이 바뀌면 "형상 바뀜"으로 표시합니다.</p>
         </aside>
         <div class="center-col">
-          <div class="rebar-color" id="rebar-color" role="group" aria-label="철근 색 기준">
-            <span class="lbl">색 기준</span>
-            <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>
           <div class="viewer-slot" id="slot-rebar"></div>
         <section class="panel viewer" aria-labelledby="rebar-title">
           <div class="viewer-head"><h2 id="rebar-title">철근표</h2></div>
diff --git a/src/main.ts b/src/main.ts
index 592d46b..122fd7e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -709,6 +709,7 @@ function placeViewer(stage: 'shape' | 'plan' | 'rebar'): void {
   const slot = stage === 'plan' ? $<HTMLElement>('slot-plan') : stage === 'rebar' ? $<HTMLElement>('slot-rebar') : null;
   if (slot) slot.appendChild(block);
   else if (viewerHome.parent) viewerHome.parent.insertBefore(block, viewerHome.next);
+  renderRebarColor();
   resize();
 }
 
@@ -771,6 +772,8 @@ 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';
   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 2491f5a..882e1d1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -705,3 +705,4 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
 .rebar-legend { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
 .rebar-legend-item { display: flex; align-items: center; gap: 6px; }
 .rebar-legend .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
+.rebar-color[hidden] { display: none; }