diff --git a/src/main.ts b/src/main.ts
index 73da512..89d73af 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -168,6 +168,8 @@ function resize(): void {
   camera.updateProjectionMatrix();
 }
 window.addEventListener('resize', resize);
+// The 3D view follows its container, which changes when the layout frame or a panel size changes (승인 2026-10-23).
+new ResizeObserver(() => resize()).observe(container);
 resize();
 
 function animate(): void {
diff --git a/src/style.css b/src/style.css
index 17f5820..1624611 100644
--- a/src/style.css
+++ b/src/style.css
@@ -734,3 +734,29 @@ body { background: #eef1f4; font-family: 'Noto Sans KR', system-ui, sans-serif;
 .toast { display: flex; align-items: center; gap: 10px; background: #1b2733; color: #ffffff; padding: 10px 14px; border-radius: 6px; font-size: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
 .toast.error { background: #8a1c1c; }
 .toast .btn { min-height: 44px; }
+
+/* --- 고정 프레임 (승인 2026-10-23): 좌측 창 · 중앙 상단(모델) · 중앙 하단 · 우측 창, 각각 독립 스크롤 --- */
+@media (min-width: 1101px) {
+  .app { height: 100vh; overflow: hidden; }
+  .top, .status-row { flex: none; }
+  .grid { flex: 1 1 auto; min-height: 0; height: auto; grid-template-rows: minmax(0, 1fr); padding-bottom: 12px; }
+  .grid > .panel, .grid > .center-col { min-height: 0; overflow: auto; }
+  .grid > #viewer-block { display: flex; flex-direction: column; }
+  .grid > #viewer-block .canvas { flex: 1 1 auto; height: auto; min-height: 240px; }
+  /* ②–④: the model keeps a fixed band at the top; the table scrolls below it. */
+  .center-col { display: grid; grid-template-rows: clamp(280px, 48vh, 560px) minmax(0, 1fr); gap: 12px; }
+  .viewer-slot { min-height: 0; height: 100%; display: flex; flex-direction: column; }
+  .viewer-slot > .viewer { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+  .viewer-slot .canvas { flex: 1 1 auto; height: auto; min-height: 180px; }
+  .center-col > .viewer { min-height: 0; overflow: auto; }
+  .rebar-table thead th, .quantity .rebar-table thead th { position: sticky; top: 0; background: #ffffff; z-index: 1; }
+}
+
+@media (max-width: 1100px) {
+  .app { min-height: 100vh; }
+  .grid { height: auto; }
+  .grid > .panel, .grid > .center-col { max-height: 60vh; overflow: auto; }
+  .center-col { display: flex; flex-direction: column; gap: 16px; }
+  .viewer-slot .canvas { height: 60vh; min-height: 420px; flex: none; }
+  .rebar-table thead th { position: sticky; top: 0; background: #ffffff; z-index: 1; }
+}