diff --git a/src/view/footing-section-svg.ts b/src/view/footing-section-svg.ts
index a50078f..e372bd8 100644
--- a/src/view/footing-section-svg.ts
+++ b/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>`;
 }