feat(rebar): 확대기초 교각축 단면(길이 L) 탭 추가

- view/footing-section-l-svg.ts: 길이 방향 단면 (B1–B4 점, B5–B8 선, B9 세로선, B10-2 점·B10-1 선, B11 점, B12 선)
- 탭 전환: 교각축 직각 단면(폭 W) ↔ 교각축 단면(길이 L), 다리 배치 상세·B10 모서리는 다음 단계
- 테스트: 점·선 개수가 철근표 개수와 같음

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

src/main.ts

@@ -33,6 +33,7 @@ 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 { footingSectionLSvg } from './view/footing-section-l-svg';
 import { columnElevationSvg } from './view/column-elevation-svg';
 import { type ColumnSection, columnSectionSvg } from './view/column-section-svg';
 import { groundSectionSvg } from './view/ground-svg';
@@ -1373,25 +1374,36 @@ function renderFootingSettings(box: HTMLDivElement, pier: Pier): void {
     applyFootingRebar(pier.input.name, next);
   });
   wrap.append(msg, apply);
-  // 확대기초 단면 탭 (승인 2026-10-26, 추천안 2단계): 첫 탭 "교각축 직각 단면 (폭 W)"만 작동하고, 나머지 탭은 다음 단계 자리만 둡니다.
+  // 확대기초 단면 탭 (승인 2026-10-26): 교각축 직각 단면 (폭 W) and 교각축 단면 (길이 L) work; the other tabs are next steps.
+  const footingModel = pier.model;
+  let footingView: 'W' | 'L' = 'W';
   const tabs = el('div');
   tabs.style.display = 'flex';
   tabs.style.flexWrap = 'wrap';
   tabs.style.gap = '6px';
-  for (const [label, enabled] of [['교각축 직각 단면 (폭 W)', true], ['교각축 단면 (길이 L)', false], ['다리 배치 상세', false], ['B10 모서리', false]] as const) {
-    const b = el('button', label, 'btn small');
-    b.type = 'button';
-    b.setAttribute('aria-pressed', String(enabled));
-    b.disabled = !enabled;
-    if (!enabled) b.title = '다음 단계에서 추가';
-    tabs.appendChild(b);
-  }
-  wrap.appendChild(tabs);
-  // 교각축 직각 단면 (폭 W): 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'));
-  wrap.appendChild(sectionFig);
+  const figBox = el('div');
+  const drawFootingFigure = (): void => {
+    tabs.replaceChildren();
+    for (const [view, label, enabled] of [['W', '교각축 직각 단면 (폭 W)', true], ['L', '교각축 단면 (길이 L)', true], ['D', '다리 배치 상세', false], ['B10', 'B10 모서리', false]] as const) {
+      const b = el('button', label, 'btn small');
+      b.type = 'button';
+      b.setAttribute('aria-pressed', String(view === footingView));
+      b.disabled = !enabled;
+      if (!enabled) b.title = '다음 단계에서 추가';
+      if (enabled) b.addEventListener('click', () => {
+        footingView = view as 'W' | 'L';
+        drawFootingFigure();
+      });
+      tabs.appendChild(b);
+    }
+    figBox.replaceChildren();
+    const sectionFig = el('figure', undefined, 'ground-fig');
+    sectionFig.innerHTML = footingView === 'W' ? footingSectionSvg(footingModel) : footingSectionLSvg(footingModel);
+    sectionFig.appendChild(el('figcaption', footingView === 'W' ? '교각축 직각 단면 (폭 W) · 실제 비율 · 다리 생략' : '교각축 단면 (길이 L) · 실제 비율 · 다리 생략', 'muted small'));
+    figBox.appendChild(sectionFig);
+  };
+  drawFootingFigure();
+  wrap.append(tabs, figBox);
   box.appendChild(wrap);
 }