diff --git a/frontend/.storybook/preview-body.html b/frontend/.storybook/preview-body.html
new file mode 100644
index 000000000..8192bf717
--- /dev/null
+++ b/frontend/.storybook/preview-body.html
@@ -0,0 +1,2 @@
+<!-- 앱(index.html)처럼 Portal 대상을 처음부터 둔다. 데코레이터 effect에서 만들면 열린 채 시작하는 오버레이의 첫 렌더가 비어 버린다. -->
+<div id="modal-root"></div>
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
index 971c9f602..73d6175ee 100644
--- a/frontend/.storybook/preview.tsx
+++ b/frontend/.storybook/preview.tsx
@@ -67,11 +67,6 @@ const preview: Preview = {
         } catch (error) {
           console.warn('Failed to initialize mixpanel for Storybook:', error);
         }
-        if (!document.getElementById('modal-root')) {
-          const modalRoot = document.createElement('div');
-          modalRoot.id = 'modal-root';
-          document.body.appendChild(modalRoot);
-        }
       }, []);
 
       return (
diff --git a/frontend/src/components/CLAUDE.md b/frontend/src/components/CLAUDE.md
index 73379a1ba..7ceff5bb7 100644
--- a/frontend/src/components/CLAUDE.md
+++ b/frontend/src/components/CLAUDE.md
@@ -41,7 +41,7 @@ common/Toast/
 화면 위에 띄우는 컴포넌트는 아래 규약을 공유한다.
 
 - **제어형**: `isOpen` + `onClose`를 받고 상태는 호출부가 소유한다. 컴포넌트가 스스로 열림 상태를 들지 않는다.
-- **Portal**: `common/Portal/Portal.tsx`로 `#modal-root`(`index.html`)에 렌더한다. 조상의 `transform`·`overflow`로 인한 stacking context 문제를 피한다. Storybook에서는 `.storybook/preview.tsx`가 `#modal-root`를 만들어 준다.
+- **Portal**: `common/Portal/Portal.tsx`로 `#modal-root`(`index.html`)에 렌더한다. 조상의 `transform`·`overflow`로 인한 stacking context 문제를 피한다. Storybook에서는 `.storybook/preview-body.html`이 `#modal-root`를 처음부터 둔다.
 - **z-index**: `Z_INDEX`에 정의된 값만 사용 (`overlay: 1100` < `modal: 1200` < `toast: 1300`).
 
 ## Toast
diff --git a/frontend/src/components/common/UnderlineTabs/UnderlineTabs.stories.tsx b/frontend/src/components/common/UnderlineTabs/UnderlineTabs.stories.tsx
index 19a82470e..583076e2e 100644
--- a/frontend/src/components/common/UnderlineTabs/UnderlineTabs.stories.tsx
+++ b/frontend/src/components/common/UnderlineTabs/UnderlineTabs.stories.tsx
@@ -67,5 +67,7 @@ export const CenterOnMobile: Story = {
       defaultViewport: 'iphone6',
     },
   },
+  // defaultViewport는 Chromatic 스냅샷 폭에 쓰이고, Storybook 10 화면은 globals.viewport를 읽는다.
+  globals: { viewport: { value: 'iphone6', isRotated: false } },
   render: () => <InteractiveTabs centerOnMobile />,
 };
diff --git a/frontend/src/pages/MainPage/components/Popup/Popup.stories.tsx b/frontend/src/pages/MainPage/components/Popup/Popup.stories.tsx
index eebe5669c..24b2fe0aa 100644
--- a/frontend/src/pages/MainPage/components/Popup/Popup.stories.tsx
+++ b/frontend/src/pages/MainPage/components/Popup/Popup.stories.tsx
@@ -34,6 +34,8 @@ const meta = {
       );
     },
   ],
+  // defaultViewport는 Chromatic 스냅샷 폭에 쓰이고, Storybook 10 화면은 globals.viewport를 읽는다.
+  globals: { viewport: { value: 'iphone6', isRotated: false } },
   tags: ['autodocs'],
 } satisfies Meta<typeof Popup>;