fix(view): ② and ③ use the ① layout — model above the table in the centre column

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

@@ -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>

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; }