fix(rebar): 확대기초 단면 풍선 위치를 외곽 밖으로 펼치고 지시선 추가, 캡션을 아래로 이동

- 풍선을 외곽 위·아래에 넓게 배치하고, 각 철근 표시까지 지시선을 그림 (지시선도 같은 data-bar로 강조)
- B2·B4·B3가 겹치던 문제 해결 (풍선 간격 70 px)
- 뷰박스 높이 300, 캡션을 맨 아래로

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

src/view/footing-section-svg.ts

@@ -99,13 +99,23 @@ export function footingSectionSvg(model: PierModel): string {
   parts.push(text(xr, y(H) + 10, `${fs.cTop}`, 'start', COLOR.dim));
   parts.push(text(xr, (y(H) + y(0)) / 2, `${levels - 1}@${fs.sV}=${(levels - 1) * fs.sV}`, 'start', COLOR.dim));
   parts.push(text(xr, y(0) - 4, `${fs.cBottom}`, 'start', COLOR.dim));
-  parts.push(text(X0, y(0) + 36, `높이 방향 축소 (×${SCALE_Y}) · 다리 생략 · 기준: 확대기초 하면 0`, 'start', COLOR.outline));
+  parts.push(text(X0, 292, `높이 방향 축소 (×${SCALE_Y}) · 다리 생략 · 기준: 확대기초 하면 0`, 'start', COLOR.outline));
 
-  // Bubbles: one per bar family, linked to its marks through data-bar (click to highlight, in the panel).
-  const bubbles: [string, number, number][] = [['B5', xa + 6, 24], ['B1', x(xs[1]), 40], ['B11', xb - 6, 56], ['B2', x(xs[1]), y(0) + 40], ['B4', x(xs[2]), y(0) + 40], ['B3', x(xs[3]), y(0) + 40], ['B10-1', X0 - 16, y(fs.cBottom) - 6]];
-  for (const [name, bx, by] of bubbles) {
-    parts.push(`<g class="bubble" data-bubble="${name}" style="cursor:pointer"><circle cx="${bx.toFixed(1)}" cy="${by.toFixed(1)}" r="11" fill="#fff" stroke="${COLOR.outline}"/><text x="${bx.toFixed(1)}" y="${(by + 3).toFixed(1)}" font-size="9" text-anchor="middle" fill="${COLOR.outline}">${name}</text></g>`);
-  }
+  // Bubbles outside the outline, spread apart, each with a leader to its bar (the leader carries the same data-bar, so it highlights too).
+  const bubble = (name: string, bx: number, by: number, tx: number, ty: number) => {
+    const edgeY = by < ty ? by + 11 : by - 11;
+    return `<g class="bubble" data-bubble="${name}" style="cursor:pointer"><line class="leader" data-bar="${name}" x1="${bx.toFixed(1)}" x2="${tx.toFixed(1)}" y1="${edgeY.toFixed(1)}" y2="${ty.toFixed(1)}" stroke="${COLOR.outline}" stroke-width="0.7"/><circle cx="${bx.toFixed(1)}" cy="${by.toFixed(1)}" r="11" fill="#fff" stroke="${COLOR.outline}"/><text x="${bx.toFixed(1)}" y="${(by + 3).toFixed(1)}" font-size="9" text-anchor="middle" fill="${COLOR.outline}">${name}</text></g>`;
+  };
+  const yTop = 52;
+  const yBot = y(0) + 50;
+  parts.push(bubble('B5', xa + 40, yTop, xa + 40, y(z.B5)));
+  parts.push(bubble('B1', x(xs[1]) + 30, yTop, x(xs[1]), y(z.B1)));
+  const zB11 = js.length > 0 ? fs.cBottom + js[0] * fs.sV : fs.cBottom;
+  parts.push(bubble('B11', xb - 30, yTop, xb, y(zB11)));
+  parts.push(bubble('B10-1', X0 - 18, y(fs.cBottom + (levels - 1) * fs.sV / 2), X0 + 2, y(fs.cBottom + (levels - 1) * fs.sV / 2)));
+  parts.push(bubble('B2', cx - 70, yBot, x(xs[1]), y(z.B24)));
+  parts.push(bubble('B4', cx, yBot, x(xs[2]), y(z.B24)));
+  parts.push(bubble('B3', cx + 70, yBot, x(xs[3]), y(z.B3)));
 
-  return `<svg viewBox="0 0 520 260" width="520" height="260" role="img" aria-label="확대기초 교각축 직각 단면">${parts.join('')}</svg>`;
+  return `<svg viewBox="0 0 520 300" width="520" height="300" role="img" aria-label="확대기초 교각축 직각 단면">${parts.join('')}</svg>`;
 }