feat(view): the 열별 본수 card sits beside the footing plan on ② (grid, stacks on narrow screens)

The pile-count card (−/+ and the 20본 total) is on the left and the plan on the right, in one row; the side view is below.
Changing a count is now seen on the plan next to it. The layout stacks below 800 px.

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

src/main.ts

@@ -718,18 +718,25 @@ function footingLengthOf(p: Pier): number | undefined {
 }
 
 /** 확대기초·말뚝 그림 (2단계, 승인 2026-10-23): plan and side views drawn from the model; θ is shown as a note. */
+/**
+ * The 말뚝 layout (승인 2026-10-23 추천안): the 열별 본수 card on the left, the plan beside it, the side view below.
+ * The card and the plan share one row; on narrow screens they stack.
+ */
 function renderFootingDrawings(box: HTMLDivElement, pier: Pier): void {
   if (!pier.model) return;
-  const wrap = el('div', undefined, 'footing-drawings');
+  const grid = el('div', undefined, 'footing-grid');
+  const cardCol = el('div', undefined, 'footing-card-col');
+  renderPileRows(cardCol, pier);
   const plan = el('figure', undefined, 'footing-fig');
   plan.innerHTML = footingPlanSvg(pier.model);
   plan.appendChild(el('figcaption', '평면 · 1열이 아래, 열은 교축과 직각 방향 줄', 'muted small'));
+  grid.append(cardCol, plan);
+  box.appendChild(grid);
   const side = el('figure', undefined, 'footing-fig');
   side.innerHTML = footingSideSvg(pier.model);
   side.appendChild(el('figcaption', '정면 · 점선 = 경사 선택 시 상면 (L2, h2)', 'muted small'));
-  wrap.append(plan, side);
+  box.appendChild(side);
-  wrap.appendChild(el('p', '기초 회전각 θ는 교각축 대비 회전으로, 생성 규칙은 spec에 추가 후 적용합니다 (지금은 0°).', 'muted small'));
+  box.appendChild(el('p', '기초 회전각 θ는 교각축 대비 회전으로, 생성 규칙은 spec에 추가 후 적용합니다 (지금은 0°).', 'muted small'));
-  box.appendChild(wrap);
 }
 
 /** 말뚝 규격 (승인 2026-10-23): 강관 and PHC from their lists by outer diameter and wall; the inner diameter, area and weight are read. */
@@ -1660,7 +1667,6 @@ function renderPlan(): void {
     fieldRows(fields, pier, member.keys);
     if (member.id === 'footing') {
       renderPileSpec(fields, pier);
-      renderPileRows(fields, pier);
       renderFootingDrawings(fields, pier);
     }
     if (member.id === 'coping') renderCopingInfo(fields, pier);

src/style.css

@@ -799,3 +799,9 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
 .footing-drawings { display: grid; gap: 10px; margin-top: 12px; }
 .footing-fig { margin: 0; }
 .footing-fig svg { width: 100%; height: auto; max-height: 260px; background: #ffffff; border: 1px solid #d5dde6; border-radius: 6px; }
+
+/* ② 말뚝 배치: 열별 본수 카드 (왼쪽) · 평면도 (오른쪽), 측면도는 아래 */
+.footing-grid { display: grid; grid-template-columns: minmax(230px, 320px) minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 12px; }
+@media (max-width: 800px) {
+  .footing-grid { grid-template-columns: 1fr; }
+}