화면 좌우 맞추기

frontend/app/(main)/main/page.tsx

@@ -9,7 +9,7 @@ import { Badge } from "@/components/ui/badge";
  */
 export default function MainPage() {
   return (
-    <div className="space-y-6 px-4 pt-10">
+    <div className="space-y-6 p-4">
       {/* 메인 컨텐츠 */}
       {/* Welcome Message */}
       <Card>

frontend/app/(main)/page.tsx

@@ -1,6 +1,6 @@
 export default function MainHomePage() {
   return (
-    <div className="space-y-6 px-4 pt-10">
+    <div className="space-y-6 p-4">
       {/* 대시보드 컨텐츠 */}
       <div className="rounded-lg border bg-background p-6 shadow-sm">
         <h3 className="mb-4 text-lg font-semibold">WACE 솔루션에 오신 것을 환영합니다!</h3>

frontend/components/layout/AppLayout.tsx

@@ -470,7 +470,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
 
         {/* 가운데 컨텐츠 영역 - 스크롤 가능 */}
         <main className="h-[calc(100vh-3.5rem)] min-w-0 flex-1 overflow-auto bg-white">
-          <div className="h-full w-full p-4">{children}</div>
+          {children}
         </main>
       </div>
 

frontend/components/screen/ResponsiveDesignerContainer.tsx

@@ -35,9 +35,9 @@ export const ResponsiveDesignerContainer: React.FC<ResponsiveDesignerContainerPr
 
     switch (viewMode) {
       case "fit":
-        // 컨테이너에 맞춰 비율 유지하며 조정 (여백 허용)
-        const scaleX = (containerSize.width - 40) / designWidth;
-        const scaleY = (containerSize.height - 40) / designHeight;
+        // 컨테이너에 맞춰 비율 유지하며 조정 (좌우 여백 16px씩 유지)
+        const scaleX = (containerSize.width - 32) / designWidth;
+        const scaleY = (containerSize.height - 64) / designHeight;
         return Math.min(scaleX, scaleY, 2); // 최대 2배까지 허용
 
       case "custom":
@@ -154,7 +154,7 @@ export const ResponsiveDesignerContainer: React.FC<ResponsiveDesignerContainerPr
       {/* 디자인 영역 */}
       <div
         ref={containerRef}
-        className="flex-1 overflow-auto p-8"
+        className="flex-1 overflow-auto px-4 py-8"
         style={{
           justifyContent: "center",
           alignItems: "flex-start",