feat(view): 입력값을 6기 표로 보이고 코핑·말뚝 수정 대상 교각을 표시

- 입력값: 교각마다 한 행(코핑 상면·기초 하단·지반고·말뚝·코핑 폭×길이·받침)
- 행을 누르면 그 교각이 활성이 되고 상세와 수정 대상이 바뀜
- 수정 카드 제목에 대상 교각 이름을 표시

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

index.html

@@ -61,6 +61,13 @@
 
           <section class="pier-input" aria-labelledby="input-title">
             <p id="input-title" class="lbl">입력값</p>
+            <div class="pier-table-wrap">
+              <table id="inputs-all" class="grid-table compact">
+                <thead><tr><th>교각</th><th>코핑 상면</th><th>기초 하단</th><th>지반고</th><th>말뚝 (mm)</th><th>코핑 폭×길이</th><th>받침</th></tr></thead>
+                <tbody></tbody>
+              </table>
+            </div>
+            <p class="lbl small" id="inputs-active"></p>
             <dl id="inputs" class="kv wide"></dl>
             <section class="edit-card" aria-labelledby="edit-title">
               <h3 id="edit-title">코핑·말뚝 입력 수정</h3>

src/main.ts

@@ -476,6 +476,42 @@ function renderHeader(): void {
 // --- results panel (시안 ① 입력값 · 계산 결과) ----------------------------------------
 type Pair = [string, string];
 
+/** 입력값 for every pier in one table; the row of the active pier is marked, and a row click makes that pier active. */
+function renderInputTable(): void {
+  const table = $<HTMLTableElement>('inputs-all');
+  const body = table.tBodies[0];
+  body.replaceChildren();
+  for (const p of state.piers) {
+    const inp = p.input;
+    const front = inp.bearings.filter((b) => b.row === '전열').length;
+    const back = inp.bearings.filter((b) => b.row === '후열').length;
+    const tr = el('tr', undefined, p.input.name === state.active ? 'active' : undefined);
+    tr.tabIndex = 0;
+    tr.addEventListener('click', () => selectPier(p.input.name));
+    tr.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') selectPier(p.input.name);
+    });
+    const cells = [
+      inp.name,
+      f3(inp.copingTopEl),
+      f3(inp.footingBottomEl),
+      f3(inp.groundEl),
+      String(inp.pileLengthMm),
+      `${inp.copingWidthMm}×${inp.copingLengthMm}`,
+      `${front}·${back}`,
+    ];
+    for (const v of cells) tr.appendChild(el('td', v));
+    body.appendChild(tr);
+  }
+}
+
+function selectPier(name: string): void {
+  state.active = name;
+  state.rebarSelection = new Set();
+  setupScene();
+  renderAll();
+}
+
 function fillKv(dl: HTMLElement, pairs: Pair[]): void {
   dl.replaceChildren();
   for (const [k, v] of pairs) {
@@ -495,6 +531,10 @@ function renderPanels(): void {
   $('viewer-title').textContent = pier ? `${pier.input.name} · ${pier.input.type} 교각 형상` : '교각 3D 뷰';
   $('origin').textContent = m ? `원점 = 교각 중심 (${pt(m.pivot)})` : '';
 
+  renderInputTable();
+  $('inputs-active').textContent = pier ? `활성 교각 ${pier.input.name} 상세 (표의 행을 누르면 바뀜)` : '';
+  $('edit-title').textContent = pier ? `코핑·말뚝 입력 수정 · ${pier.input.name}` : '코핑·말뚝 입력 수정';
+
   if (!pier) {
     fillKv($('inputs'), []);
     fillKv($('res-axis'), []);

src/style.css

@@ -811,5 +811,12 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
   .footing-grid { grid-template-columns: 1fr; }
 }
 
+/* 입력값: one row per pier; the table scrolls sideways in the narrow left panel. */
+.pier-table-wrap { overflow-x: auto; margin-bottom: 8px; }
+#inputs-all { font-size: 12px; width: 100%; }
+#inputs-all th, #inputs-all td { white-space: nowrap; padding: 4px 6px; }
+#inputs-all tbody tr { cursor: pointer; }
+#inputs-all tbody tr.active td { background: #e3edf8; font-weight: 700; }
+
 /* Import preview: all piers' 받침·IP rows scroll inside the dialog. */
 .pv-scroll { max-height: 240px; overflow: auto; }