From 4477bbe52c42583bbe0c473bd1880388c843a66b Mon Sep 17 00:00:00 2001
From: ypshim <ypshim71@gmail.com>
Date: Fri, 23 Oct 2026 16:07:52 +0900
Subject: [PATCH] =?UTF-8?q?feat(view):=20the=20=EC=97=B4=EB=B3=84=20?=
 =?UTF-8?q?=EB=B3=B8=EC=88=98=20card=20sits=20beside=20the=20footing=20pla?=
 =?UTF-8?q?n=20on=20=E2=91=A1=20(grid,=20stacks=20on=20narrow=20screens)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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   | 16 +++++++++++-----
 src/style.css |  6 ++++++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 58c8dd3..07e835c 100644
--- a/src/main.ts
+++ b/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);
-  wrap.appendChild(el('p', '기초 회전각 θ는 교각축 대비 회전으로, 생성 규칙은 spec에 추가 후 적용합니다 (지금은 0°).', 'muted small'));
-  box.appendChild(wrap);
+  box.appendChild(side);
+  box.appendChild(el('p', '기초 회전각 θ는 교각축 대비 회전으로, 생성 규칙은 spec에 추가 후 적용합니다 (지금은 0°).', 'muted small'));
 }
 
 /** 말뚝 규격 (승인 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);
diff --git a/src/style.css b/src/style.css
index cf82b55..d385ae8 100644
--- a/src/style.css
+++ b/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; }
+}