feat(rebar): 확대기초 다리 배치 상세 탭과 B10 모서리 탭 추가

- core/rebar/footing-legs.ts: 번호별 다리 형태·길이·끝 높이·이음 여부 (계산 함수 결과 사용)
- view/footing-corner-svg.ts: B10-2 → B10-1 모서리 갈고리, 깊이 122.25 / 123.85, l_h 296, 최하단 제외 표시
- 패널 탭 4개 모두 작동 (B10 모서리는 개략도, 단면 비율 아님)
- 테스트: 12개 철근, B2 다리 1723, B6 이음 필요, 모서리 값

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

src/view/footing-corner-svg.ts

@@ -0,0 +1,47 @@
+import type { PierModel } from '../core/geometry';
+import { NOMINAL_DIAMETER, hookLength } from '../core/rebar/common';
+import { b10Levels, layers, sideDepth } from '../core/rebar/footing';
+import { DEFAULT_FOOTING_REBAR } from '../core/rebar/footing-settings';
+
+/**
+ * 확대기초 · B10 모서리 (plan corner, 확대기초철근 (1).md §7, 승인 2026-10-27). Schematic of the corner where the B10-2 bar (L face)
+ * bends 90° into the B10-1 bar (W face), with the depths and the 19.1 offset from the table. Lowest level removed (B2·B4 take its place).
+ */
+const COLOR = { outline: '#55606E', b10: '#2E7D32', b14: '#B4531F', dim: '#B42318' };
+
+export function footingCornerSvg(model: PierModel): string {
+  const foot = model.footings[0];
+  const fs = model.footingRebar ?? DEFAULT_FOOTING_REBAR;
+  if (!foot) return '<svg viewBox="0 0 520 300" width="520" height="300"><text x="20" y="150" font-size="12">확대기초 없음</text></svg>';
+  const H = (foot.top - foot.bottom) * 1000;
+  const z = layers(H, fs);
+  const levels = b10Levels(H, fs);
+  const depth2 = sideDepth(NOMINAL_DIAMETER.S25, NOMINAL_DIAMETER.S19, fs);
+  const depth1 = sideDepth(NOMINAL_DIAMETER.S29, NOMINAL_DIAMETER.S19, fs);
+  const hook = hookLength('main90', NOMINAL_DIAMETER.S19);
+  const k = 1 / 6;
+  const ox = 120;
+  const oy = 230;
+  const cornerX = ox;
+  const cornerY = oy;
+  const parts: string[] = [];
+  const text = (xx: number, yy: number, s: string, anchor = 'start', fill = COLOR.outline) =>
+    `<text x="${xx.toFixed(1)}" y="${yy.toFixed(1)}" font-size="10" font-family="JetBrains Mono, monospace" fill="${fill}" stroke="#fff" stroke-width="3" paint-order="stroke" text-anchor="${anchor}">${s}</text>`;
+  // Plan corner: the L face (horizontal) and the W face (vertical) of the footing.
+  parts.push(`<line x1="${cornerX}" y1="${cornerY}" x2="${cornerX + 300}" y2="${cornerY}" stroke="${COLOR.outline}" stroke-width="1.6"/>`);
+  parts.push(`<line x1="${cornerX}" y1="${cornerY}" x2="${cornerX}" y2="${cornerY - 200}" stroke="${COLOR.outline}" stroke-width="1.6"/>`);
+  // B10-2 (L face) at depth2 from the L face, bending 90° at the corner into the B10-1 (W face) at depth1 from the W face.
+  const xL = cornerX + depth2 * k;
+  const yW = cornerY - depth1 * k;
+  parts.push(`<polyline points="${(cornerX + hook * k).toFixed(1)},${(cornerY - depth2 * k).toFixed(1)} ${xL.toFixed(1)},${(cornerY - depth2 * k).toFixed(1)} ${xL.toFixed(1)},${(cornerY - depth2 * k).toFixed(1)} ${(xL + 1).toFixed(1)},${cornerY.toFixed(1)}" fill="none" stroke="${COLOR.b10}" stroke-width="2.2"/>`);
+  parts.push(`<polyline points="${(cornerX + depth1 * k).toFixed(1)},${(cornerY - hook * k).toFixed(1)} ${(cornerX + depth1 * k).toFixed(1)},${yW.toFixed(1)} ${(cornerX + depth1 * k).toFixed(1)},${yW.toFixed(1)} ${cornerX.toFixed(1)},${(yW - 1).toFixed(1)}" fill="none" stroke="${COLOR.b10}" stroke-width="2.2" stroke-dasharray="4 2"/>`);
+  // B2·B4 at the 하면 1단 (replace the lowest B10 level): the orange bars along the corner.
+  parts.push(`<circle cx="${(cornerX + depth1 * k).toFixed(1)}" cy="${(cornerY - depth2 * k).toFixed(1)}" r="3" fill="${COLOR.b14}"/>`);
+  parts.push(text(cornerX + 6, cornerY + 14, `B10-2 ${depth2.toFixed(2)} (L면)`, 'start', COLOR.b10));
+  parts.push(text(cornerX + 6, cornerY - 210, `B10-1 ${depth1.toFixed(2)} (W면)`, 'start', COLOR.b10));
+  parts.push(text(cornerX + 120, cornerY + 14, `모서리 갈고리 l_h ${hook.toFixed(0)}`, 'start', COLOR.dim));
+  parts.push(text(cornerX + 120, cornerY + 28, `B10-1 = B10-2 + 19.1 (높이)`, 'start', COLOR.dim));
+  parts.push(text(cornerX + 120, cornerY + 42, `최하단 B10 제외 · 하면 1단 B2·B4가 대체 (z ${z.B24.toFixed(0)})`, 'start', COLOR.outline));
+  parts.push(text(cornerX + 120, cornerY + 56, `단 수 ${levels - 1} (B10 9단 중 최하단 제외)`, 'start', COLOR.outline));
+  return `<svg viewBox="0 0 520 300" width="520" height="300" role="img" aria-label="확대기초 B10 모서리">${parts.join('')}</svg>`;
+}