feat(view): side view (정면) to the right of the footing plan on one scale; 본수 card, plan and side in one row

Plan and side use the same scale (22 px per m) and share their horizontal extent, so the footing lines up. The side view breaks
the column (3 m above the footing) and the piles (4 m below it) so its height stays near the plan's. The row is three columns
from 1100 px, the side view drops to its own row between 800 and 1100 px, and it stacks below 800 px.

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

src/style.css

@@ -800,8 +800,13 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
 .footing-fig { margin: 0; }
 .footing-fig svg { width: 100%; height: auto; max-height: 260px; background: #ffffff; border: 1px solid #d5dde6; border-radius: 6px; }
 
-/* ② 말뚝 배치: 열별 본수 카드 (왼쪽) · 평면도 (오른쪽), 측면도는 아래 */
-.footing-grid { display: grid; grid-template-columns: minmax(230px, 320px) minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 12px; }
+/* ② 말뚝 배치: 열별 본수 카드 · 평면도 · 정면을 한 줄에 (같은 축척). 1100px 이하는 정면을 아래 줄로, 800px 이하는 한 열로. */
+.footing-grid { display: grid; grid-template-columns: minmax(220px, 280px) auto auto; gap: 12px; align-items: start; margin-top: 12px; }
+.footing-grid .footing-fig svg { display: block; max-width: none; }
+@media (max-width: 1100px) {
+  .footing-grid { grid-template-columns: minmax(220px, 280px) auto; }
+  .footing-grid .footing-fig:last-of-type { grid-column: 1 / -1; }
+}
 @media (max-width: 800px) {
   .footing-grid { grid-template-columns: 1fr; }
 }