feat(rebar): 확대기초 교각축 직각 단면(폭 W) 삽도 1단계

- view/footing-section-svg.ts: B5–B8 선, B1–B4 점, B9 행 선, B10-1 측면 점, B11 선, B12 점을 계산 함수 결과로 그림
- 치수: 폭 W, 격자(e · n@s=G · e), 피복, B10 단 수 @ s_v, 높이 방향 축소 표시
- 풍선(B1–B5, B11, B2–B4, B10-1)을 누르면 그 철근만 강조, 다시 누르면 해제
- 테스트: 점·선 개수가 철근표 개수와 같음 (B1·B2·B4, B9 행, B10-1, B11 단, B12)

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

src/main.ts

@@ -32,6 +32,7 @@ import { COLUMN_REBAR_RANGES, type ColumnRebarSettings, columnSettingsIssues, DE
 import { columnInputFor, columnRebar } from './core/rebar/column';
 import { DEFAULT_FOOTING_REBAR, FOOTING_REBAR_RANGES, type FootingRebarSettings, footingSettingsIssues } from './core/rebar/footing-settings';
 import { footingRuleValues } from './core/rebar/footing';
+import { footingSectionSvg } from './view/footing-section-svg';
 import { columnElevationSvg } from './view/column-elevation-svg';
 import { type ColumnSection, columnSectionSvg } from './view/column-section-svg';
 import { groundSectionSvg } from './view/ground-svg';
@@ -1372,9 +1373,24 @@ function renderFootingSettings(box: HTMLDivElement, pier: Pier): void {
     applyFootingRebar(pier.input.name, next);
   });
   wrap.append(msg, apply);
+  // 교각축 직각 단면 (폭 W) (승인 2026-10-26, 추천안 1단계): a bubble click highlights that bar family; a second click clears it.
+  const sectionFig = el('figure', undefined, 'ground-fig');
+  sectionFig.innerHTML = footingSectionSvg(pier.model);
+  sectionFig.appendChild(el('figcaption', '교각축 직각 단면 (폭 W) · 풍선을 누르면 그 철근만 강조 · 높이 방향 축소 · 다리 생략', 'muted small'));
+  sectionFig.querySelectorAll<SVGGElement>('[data-bubble]').forEach((g) => g.addEventListener('click', () => highlightFootingBar(sectionFig, g.dataset.bubble ?? '')));
+  wrap.appendChild(sectionFig);
   box.appendChild(wrap);
 }
 
+/** Highlights the marks of one bar family in a footing section (data-bar); the others dim. A second click on the same family clears it. */
+function highlightFootingBar(fig: HTMLElement, name: string): void {
+  const active = fig.dataset.active === name ? '' : name;
+  fig.dataset.active = active;
+  fig.querySelectorAll<SVGElement>('[data-bar]').forEach((m) => {
+    m.style.opacity = active === '' || m.dataset.bar === active ? '1' : '0.2';
+  });
+}
+
 function renderCopingDrawings(box: HTMLDivElement, pier: Pier): void {
   if (!pier.model || !rebar3d) return;
   const L = pier.model.copingL;