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