feat(rebar): plan view of the block rebar with the 단면/평면 switch (승인 2026-10-26)

- view/block-rebar-plan-svg.ts: the selected pair from above — S2 lines along the
  교각축 (spaced at S2 across the 교축), S1 lines along the 교축 (spaced at S1),
  each end a dot (leg); the bar sets carry the row numbers only (S1, S2).
- The ③ card switches between the C–C section and the plan.

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

src/view/block-rebar-plan-svg.ts

@@ -0,0 +1,76 @@
+import type { PierModel } from '../core/geometry';
+import { blockFramePoint } from '../core/geometry';
+import { barDepths, barsAcross, type BlockRebarSettings } from '../core/rebar/bearing-block';
+import { pairEccentricities } from '../core/bearing-layout';
+import { INTEGRATED_BLOCK } from '../core/integrated-block';
+
+/**
+ * 받침블럭 배근 · 평면 (승인 2026-10-26): the blocks seen from above for the selected pair. x = 교축 (n), y = 교각축 (s).
+ * S2 bars run along the 교각축 (lines spaced across the 교축 at S2), S1 bars run along the 교축 (spaced along the 교각축 at S1).
+ * Each bar's ends are dots (the legs). The bar sets carry the table row numbers only (S1, S2).
+ */
+export function blockRebarPlanSvg(m: PierModel, pairIndex = 0): string {
+  const s: BlockRebarSettings = m.blockRebar;
+  const depth = barDepths(s);
+  const pair = pairEccentricities(m.blocks)[pairIndex];
+  if (!pair) return '';
+  const f = m.blocks.find((b) => b.no === pair.frontNo && b.row === '전열')!;
+  const k = m.blocks.find((b) => b.no === pair.backNo && b.row === '후열')!;
+  const ib = m.integratedBlocks.find((x) => x.frontNo === pair.frontNo);
+  const sc = ib ? ib.s : (f.s + k.s) / 2;
+  const nc = ib ? ib.n : (f.n + k.n) / 2;
+  const X = (n: number) => (n - nc) * 1000;
+  const Y = (sv: number) => (sv - sc) * 1000;
+  const parts: string[] = [];
+
+  // One block: a = along the 교각축 (s), c = along the 교축 (n), both in metres from the block centre, turned by the row skew.
+  const drawBlock = (cs: number, cn: number, skew: number, wA: number, wC: number) => {
+    const P = (a: number, c: number): [number, number] => {
+      const [sv, nv] = blockFramePoint({ s: cs, n: cn, rowSkewDeg: skew }, a, c);
+      return [X(nv), Y(sv)];
+    };
+    // Outline
+    const corners = [P(-wA / 2, -wC / 2), P(wA / 2, -wC / 2), P(wA / 2, wC / 2), P(-wA / 2, wC / 2)];
+    parts.push(`<polygon points="${corners.map((p) => p.join(',')).join(' ')}" fill="none" stroke="#6E8496" stroke-width="10"></polygon>`);
+    // S2: lines along the 교각축 at offsets across the 교축.
+    {
+      const a2s = barsAcross(wC * 1000, s.spacingS2, s);
+      const half = (wA * 1000 - 2 * s.coverSide) / 2000;
+      for (let i = 0; i < a2s.count; i++) {
+        const c = (a2s.firstEnd + i * a2s.spacing) / 1000 - wC / 2;
+        const p1 = P(-half, c);
+        const p2 = P(half, c);
+        parts.push(`<line x1="${p1[0]}" y1="${p1[1]}" x2="${p2[0]}" y2="${p2[1]}" stroke="#0F5C66" stroke-width="8"></line>`);
+        parts.push(`<circle cx="${p1[0]}" cy="${p1[1]}" r="14" fill="#0F5C66"></circle><circle cx="${p2[0]}" cy="${p2[1]}" r="14" fill="#0F5C66"></circle>`);
+      }
+    }
+    // S1: lines along the 교축 at offsets along the 교각축.
+    {
+      const a1s = barsAcross(wA * 1000, s.spacingS1, s);
+      const half = (wC * 1000 - 2 * s.coverSide) / 2000;
+      for (let i = 0; i < a1s.count; i++) {
+        const a = (a1s.firstEnd + i * a1s.spacing) / 1000 - wA / 2;
+        const p1 = P(a, -half);
+        const p2 = P(a, half);
+        parts.push(`<line x1="${p1[0]}" y1="${p1[1]}" x2="${p2[0]}" y2="${p2[1]}" stroke="#B4531F" stroke-width="8"></line>`);
+        parts.push(`<circle cx="${p1[0]}" cy="${p1[1]}" r="14" fill="#B4531F"></circle><circle cx="${p2[0]}" cy="${p2[1]}" r="14" fill="#B4531F"></circle>`);
+      }
+    }
+    return P;
+  };
+
+  if (ib) {
+    const P = drawBlock(ib.s, ib.n, ib.rowSkewDeg, INTEGRATED_BLOCK.depth / 1000, INTEGRATED_BLOCK.length / 1000);
+    // Row numbers: S2 and S1 once each, at the first bar's end.
+    const [sx, sy] = P(-0.6 + 0.1, -1.25 + 0.1);
+    parts.push(`<text x="${sx}" y="${sy - 40}" font-size="90" fill="#0F5C66">S2</text>`);
+    parts.push(`<text x="${sx + 200}" y="${sy + 150}" font-size="90" fill="#B4531F">S1</text>`);
+    parts.push(`<text x="0" y="${-800}" text-anchor="middle" font-size="90" fill="#18212B">${INTEGRATED_BLOCK.length}</text>`);
+  } else {
+    for (const b of [f, k]) drawBlock(b.s, b.n, b.rowSkewDeg, 1.2, 1.2);
+    const [sx, sy] = [X(f.n) - 500, Y(f.s) - 500];
+    parts.push(`<text x="${sx}" y="${sy}" font-size="90" fill="#0F5C66">S2</text>`);
+    parts.push(`<text x="${sx + 300}" y="${sy + 120}" font-size="90" fill="#B4531F">S1</text>`);
+  }
+  return `<svg viewBox="-1900 -1100 3800 2200" width="100%" style="max-width: 680px; height: auto" role="img" aria-label="받침블럭 배근 평면: S2 선과 S1 선, 다리는 점">${parts.join('')}</svg>`;
+}