From 4aa8dbb3cb34092bef65b525c33cd0d178d172af Mon Sep 17 00:00:00 2001
From: ypshim <ypshim71@gmail.com>
Date: Thu, 22 Oct 2026 12:33:36 +0900
Subject: [PATCH] =?UTF-8?q?fix(view):=20=E2=91=A1=20and=20=E2=91=A2=20use?=
 =?UTF-8?q?=20the=20=E2=91=A0=20layout=20=E2=80=94=20model=20above=20the?=
 =?UTF-8?q?=20table=20in=20the=20centre=20column?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The model sits at the top of the centre column and the table or member card
below it, between the pier list on the left and the results on the right, as in
the ① screen and the 시안.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
---
 index.html    | 8 ++++++--
 src/style.css | 6 ++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 0b08969..86aa673 100644
--- a/index.html
+++ b/index.html
@@ -107,7 +107,6 @@
       </main>
 
       <main class="grid plan" id="view-plan" hidden>
-        <div class="viewer-slot" id="slot-plan"></div>
         <aside class="panel piers" aria-labelledby="plan-pier-title">
           <p id="plan-pier-title" class="lbl">교각 목록</p>
           <div class="phead" aria-hidden="true"><span></span><span>교각</span><span>변경</span></div>
@@ -116,6 +115,8 @@
           <ul id="members" class="members"></ul>
         </aside>
 
+        <div class="center-col">
+          <div class="viewer-slot" id="slot-plan"></div>
         <section class="panel viewer" aria-labelledby="member-title">
           <div class="viewer-head">
             <h2 id="member-title">코핑</h2>
@@ -126,6 +127,7 @@
           <p id="member-note" class="muted small"></p>
           <button id="member-regen" class="btn primary" type="button" disabled>다시 생성 · 변경 0</button>
         </section>
+        </div>
 
         <aside class="panel results" aria-labelledby="changes-title">
           <h2 id="changes-title">기본값 대비 변경</h2>
@@ -136,7 +138,6 @@
       </main>
 
       <main class="grid rebar" id="view-rebar" hidden>
-        <div class="viewer-slot" id="slot-rebar"></div>
         <aside class="panel piers" aria-labelledby="rebar-pier-title">
           <p id="rebar-pier-title" class="lbl">교각 목록</p>
           <div class="phead" aria-hidden="true"><span></span><span>교각</span><span>배근</span></div>
@@ -150,11 +151,14 @@
           <ul id="rebar-tabs" class="members"></ul>
           <p class="pnote">형상은 ② 형상계획 기준입니다. 형상이 바뀌면 "형상 바뀜"으로 표시합니다.</p>
         </aside>
+        <div class="center-col">
+          <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>
           <p id="rebar-note" class="num"></p>
           <div id="rebar-table"></div>
         </section>
+        </div>
         <aside class="panel results" aria-labelledby="rebar-issues-title">
           <h2 id="rebar-issues-title">알림</h2>
           <ul id="rebar-issues" class="issues"></ul>
diff --git a/src/style.css b/src/style.css
index b165a56..6ab5d23 100644
--- a/src/style.css
+++ b/src/style.css
@@ -661,7 +661,6 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
 .member[aria-pressed='true'] { background: #e3edf8; color: #123e70; font-weight: 700; }
 #member-fields { margin-top: 10px; }
 #member-summary { color: #55606e; margin: 4px 0 8px; }
-.plan .viewer { flex: 1 1 380px; }
 .plan .results { flex: 1 1 300px; max-width: 360px; }
 /* 형상 선택칩 (C5) and the scrolling pier list (C6) */
 .shape-options { display: grid; gap: 6px; margin: 6px 0 10px; }
@@ -688,6 +687,9 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
 .rebar-table th:nth-child(10) { text-align: right; }
 .rebar-table td:nth-child(12) { white-space: normal; min-width: 240px; }
 /* 3D viewer shared by ①, ②, ③: the slot takes the full width above the other columns */
-.viewer-slot { flex: 1 1 100%; min-width: 0; }
+.viewer-slot { flex: none; width: 100%; min-width: 0; }
 .viewer-slot > .viewer { width: 100%; }
+/* ② and ③ use the ① layout: list | model above the table | results */
+.center-col { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
+.center-col > .viewer { flex: none; }