feat(abut): 벽체·흉벽 카드를 시안대로 정리 (구간 표, 교좌면 폭, 형상 카드 상시 표시)

- 형상 카드(삽도, 입력 격자, 확인 필요 노트)를 접히는 편집 영역 밖으로 옮김. 벽체·흉벽 카드를 열면 편집 토글과 무관하게 보임
- 전면 입력 라벨을 "교좌면 폭 (흉벽 전면 기준, mm)"으로 바꿈 (시안의 교좌면 폭 1600과 같은 값)
- 구간 표 추가: 구간, 시작, 끝, 교좌면 EL, 받침블럭 높이, 벽체 높이 (모델과 부재에서 계산)
- 확인 필요 패널은 아직 형상 카드 안(입력 격자 아래)에 있음. 시안처럼 오른쪽 열로 옮기지는 않음
- 테스트 641건 통과, 타입 검사·빌드 통과. 브라우저 시각 확인은 미실시

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

index.html

@@ -193,12 +193,9 @@
                 <div id="abut-panel-plan-bearings" class="edit-row"></div>
               </details>
               <div id="abut-panel-plan-wing" class="edit-row"></div>
-              <details class="abut-group">
-                <summary>형상 (벽체·흉벽, 저판, 말뚝)</summary>
-                <div id="abut-panel-plan-shape" class="edit-row"></div>
-              </details>
               <p id="abut-panel-plan-msg" class="muted" aria-live="polite"></p>
             </div>
+            <div id="abut-panel-plan-shape" class="edit-row abut-shape-view"></div>
             <details class="abut-group">
               <summary>상세 (계산값)</summary>
               <dl id="abut-panel-plan-summary" class="kv wide"></dl>

src/core/abut/edit.ts

@@ -71,7 +71,7 @@ export function applyShapeEdit(rec: AbutRecord, key: keyof AbutShape, value: num
 
 /** 형상 입력 fields on the 교대 카드 (시안 ② 벽체·흉벽, 확대기초·말뚝), in the order of the mockup. */
 export const SHAPE_EDIT_FIELDS: { key: keyof AbutShape; label: string }[] = [
-  { key: 'wallFrontMm', label: '벽체 전면 (교대축 기준, mm)' },
+  { key: 'wallFrontMm', label: '교좌면 폭 (흉벽 전면 기준, mm)' },
   { key: 'wallThicknessMm', label: '벽체 두께 (mm)' },
   { key: 'parapetHeightMm', label: '흉벽 높이 (mm)' },
   { key: 'parapetThicknessMm', label: '흉벽 두께 (mm)' },

src/core/abut/summary.ts

@@ -5,7 +5,7 @@
 import type { AbutRecord } from './parse';
 import { buildAbut, type AbutModel } from './geometry';
 import { toAbutInput } from './parse';
-import { buildMembers } from './members';
+import { buildMembers, type AbutMembers } from './members';
 import { buildWings } from './wings';
 
 const m3 = (v: number) => `${v.toFixed(3)} m`;
@@ -76,3 +76,20 @@ export const ABUT_DETAIL_LABELS = [
   '말뚝 선단 EL',
   '접속슬래브 폭',
 ];
+
+/** 구간 표 of the 벽체·흉벽 card (시안 하단): one row per 교좌면 step (2026-11-03). Values come from the model and members. */
+export const ABUT_SEGMENT_HEADER = ['구간', '시작 (m)', '끝 (m)', '교좌면 EL (m)', '받침블럭 높이 (mm)', '벽체 높이 (m)'];
+
+export function abutSegmentRows(model: AbutModel, members: AbutMembers): string[][] {
+  const circled = ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧'];
+  const bearings = [...model.bearings].sort((a, b) => a.s - b.s);
+  return members.wallSegments.map((seg, k) => [
+    circled[k] ?? String(k + 1),
+    seg.sFrom.toFixed(3),
+    seg.sTo.toFixed(3),
+    seg.seatEl.toFixed(3),
+    String(bearings[k]?.blockHeightMm ?? '—'),
+    (seg.seatEl - members.footingTopEl).toFixed(3),
+  ]);
+}
+

src/main.ts

@@ -7,7 +7,7 @@ import { parseWorkbook, type SheetReport } from './core/parseWorkbook';
 import { parseAbutments, toAbutInput, type AbutRecord } from './core/abut/parse';
 import { buildAbut } from './core/abut/geometry';
 import { structureOrder } from './core/abut/order';
-import { ABUT_DETAIL_LABELS, abutInputRows, abutSummaryRows } from './core/abut/summary';
+import { ABUT_DETAIL_LABELS, ABUT_SEGMENT_HEADER, abutInputRows, abutSegmentRows, abutSummaryRows } from './core/abut/summary';
 import { applyAbutEdit, applyBearingEdit, applyShapeEdit, ABUT_EDIT_FIELDS, SHAPE_EDIT_FIELDS, restoreAbutDefault, setWingForm } from './core/abut/edit';
 import { ABUT_SHAPE_DEFAULT, resolveShape } from './core/abut/shape';
 import { abutShown, piersShown } from './core/abut/visibility';
@@ -894,6 +894,25 @@ function fillAbutSlot(slot: (typeof ABUT_SLOTS)[keyof typeof ABUT_SLOTS], rec: A
     });
     shape.append(lab, input, el('span', `기본 ${ABUT_SHAPE_DEFAULT[f.key]}`, 'muted small'));
   }
+  // 구간 표 (시안 하단): one row per 교좌면 step, from the model (2026-11-03).
+  if (planCard) {
+    try {
+      const model = buildAbut(toAbutInput(rec));
+      const members = buildMembers(model, { bottomEl: rec.foundationBottomEl, pileLengthMm: rec.pileLengthMm }, rec.shape);
+      const table = document.createElement('table');
+      table.className = 'abut-seg';
+      const thead = table.createTHead().insertRow();
+      for (const h of ABUT_SEGMENT_HEADER) thead.append(el('th', h));
+      const tbody = table.createTBody();
+      for (const row of abutSegmentRows(model, members)) {
+        const tr = tbody.insertRow();
+        for (const cell of row) tr.append(el('td', cell));
+      }
+      shape.append(table);
+    } catch {
+      // A model that does not build shows no 구간 표 (the errors are reported on import).
+    }
+  }
   // 확인 필요 (spec_abut, 시안 오른쪽 패널): the open 교대 questions that touch the shape (2026-11-03).
   if (planCard) {
     const qa = el('div', undefined, 'abut-qa');

src/style.css

@@ -895,3 +895,9 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
 #abut-panel-plan-shape > .abut-section, #abut-panel-shape > .abut-section, #abut-panel-plan-shape > .abut-qa { grid-column: 1 / -1; }
 .abut-qa { border-top: 1px solid #d5dbe2; padding-top: 8px; }
 .abut-qa p { margin: 3px 0; }
+
+/* 교대 구간 표 (시안 하단) and the 형상 card shown outside the collapsed editor (2026-11-03). */
+#abut-panel-plan-shape.abut-shape-view { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; align-items: center; }
+#abut-panel-plan-shape > .abut-seg { grid-column: 1 / -1; width: 100%; border-collapse: collapse; font-size: 12px; }
+#abut-panel-plan-shape > .abut-seg th, #abut-panel-plan-shape > .abut-seg td { border-bottom: 1px solid #e6eaef; padding: 4px 6px; text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; }
+#abut-panel-plan-shape > .abut-seg th { color: #55606e; font-weight: 500; font-family: inherit; }