frontend/components/common/ScreenModal.tsx

@@ -554,6 +554,16 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
         // 화면 관리에서 설정한 해상도 사용 (우선순위)
         const screenResolution = (layoutData as any).screenResolution || (screenInfo as any).screenResolution;
 
+        console.log("🔍 [ScreenModal] 해상도 디버그:", {
+          screenId,
+          v2ScreenResolution: v2LayoutData?.screenResolution,
+          layoutScreenResolution: (layoutData as any).screenResolution,
+          screenInfoResolution: (screenInfo as any).screenResolution,
+          finalScreenResolution: screenResolution,
+          hasWidth: screenResolution?.width,
+          hasHeight: screenResolution?.height,
+        });
+
         let dimensions;
         if (screenResolution && screenResolution.width && screenResolution.height) {
           // 화면 관리에서 설정한 해상도 사용
@@ -563,9 +573,11 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
             offsetX: 0,
             offsetY: 0,
           };
+          console.log("✅ [ScreenModal] 화면관리 해상도 적용:", dimensions);
         } else {
           // 해상도 정보가 없으면 자동 계산
           dimensions = calculateScreenDimensions(components);
+          console.log("⚠️ [ScreenModal] 해상도 없음 - 자동 계산:", dimensions);
         }
 
         setScreenDimensions(dimensions);
@@ -869,16 +881,24 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   // 모달 크기 설정 - 화면관리 설정 크기 + 헤더/푸터
   const getModalStyle = () => {
     if (!screenDimensions) {
+      console.log("⚠️ [ScreenModal] getModalStyle: screenDimensions가 null - 기본 스타일 사용");
       return {
         className: "w-fit min-w-[400px] max-w-4xl overflow-hidden",
         style: { padding: 0, gap: 0, maxHeight: "calc(100dvh - 8px)" },
       };
     }
 
+    const finalWidth = Math.min(screenDimensions.width, window.innerWidth * 0.98);
+    console.log("✅ [ScreenModal] getModalStyle: 해상도 적용됨", {
+      screenDimensions,
+      finalWidth: `${finalWidth}px`,
+      viewportWidth: window.innerWidth,
+    });
+
     return {
       className: "overflow-hidden",
       style: {
-        width: `${Math.min(screenDimensions.width, window.innerWidth * 0.98)}px`,
+        width: `${finalWidth}px`,
         // CSS가 알아서 처리: 뷰포트 안에 들어가면 auto-height, 넘치면 max-height로 제한
         maxHeight: "calc(100dvh - 8px)",
         maxWidth: "98vw",

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -2494,7 +2494,13 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           setPopupScreen(null);
           setPopupFormData({}); // 팝업 닫을 때 formData도 초기화
         }}>
-          <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0">
+          <DialogContent 
+            className="max-w-none w-auto max-h-[90vh] overflow-hidden p-0"
+            style={popupScreenResolution ? { 
+              width: `${Math.min(popupScreenResolution.width + 48, window.innerWidth * 0.98)}px`,
+              maxWidth: "98vw",
+            } : { maxWidth: "56rem" }}
+          >
             <DialogHeader className="px-6 pt-4 pb-2">
               <DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle>
             </DialogHeader>