refactor(rebar): 확대기초 단면의 풍선 클릭 강조 기능 제거

- 풍선 클릭 리스너와 강조 함수 제거, 풍선은 라벨로만 표시
- 캡션에서 "풍선을 누르면" 문구 제거

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

src/main.ts

@@ -1390,21 +1390,11 @@ function renderFootingSettings(box: HTMLDivElement, pier: Pier): void {
   // 교각축 직각 단면 (폭 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'));
+  sectionFig.appendChild(el('figcaption', '교각축 직각 단면 (폭 W) · 실제 비율 · 다리 생략', 'muted small'));
-  sectionFig.querySelectorAll<SVGGElement>('[data-bubble]').forEach((g) => g.addEventListener('click', () => highlightFootingBar(sectionFig, g.dataset.bubble ?? '')));
   wrap.appendChild(sectionFig);
   box.appendChild(wrap);
 }
 
-/** Highlights the marks of one bar family in a footing section (data-bar); the others dim. A second click on the same family clears it. */
-function highlightFootingBar(fig: HTMLElement, name: string): void {
-  const active = fig.dataset.active === name ? '' : name;
-  fig.dataset.active = active;
-  fig.querySelectorAll<SVGElement>('[data-bar]').forEach((m) => {
-    m.style.opacity = active === '' || m.dataset.bar === active ? '1' : '0.2';
-  });
-}
-
 function renderCopingDrawings(box: HTMLDivElement, pier: Pier): void {
   if (!pier.model || !rebar3d) return;
   const L = pier.model.copingL;

src/view/footing-section-svg.ts

@@ -155,7 +155,7 @@ export function footingSectionSvg(model: PierModel): string {
   // 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>`;
+    return `<g class="bubble" data-bubble="${name}"><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 zB11 = js.length > 0 ? fs.cBottom + js[0] * fs.sV : fs.cBottom;
   const yTop = 40;