fix: POP 뷰어 헤더 제거 + 디자이너-뷰어 그리드 칸 수 불일치 수정

POP 화면 상단 네비게이션 바(POP 대시보드/PC 모드 전환)를 제거하고,
디자이너와 뷰어의 그리드 칸 수가 달라 컴포넌트 배치가 어긋나는 문제를 수정한다.
[헤더 제거]
- "POP 대시보드 | 화면이름 | PC 모드" 바 삭제 (pop-profile 컴포넌트로 대체)
- 미사용 import 정리 (LayoutGrid, Monitor, GAP_PRESETS, GRID_BREAKPOINTS)
[그리드 불일치 수정]
- 문제: 디자이너 태블릿 가로=1024px(38칸), 뷰어 window.innerWidth=1366px(52칸)
- 수정: 뷰어에서 모드별 기준 너비 고정 (tablet_landscape=1024, tablet_portrait=820,
  mobile_landscape=600, mobile_portrait=375)
- rawWidth는 모드 감지 용도로만 사용, viewportWidth는 디자이너와 동일한 기준 너비

frontend/app/(pop)/pop/screens/[screenId]/page.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
-import { Loader2, ArrowLeft, Smartphone, Tablet, RotateCcw, RotateCw, LayoutGrid, Monitor } from "lucide-react";
+import { Loader2, ArrowLeft, Smartphone, Tablet, RotateCcw, RotateCw } from "lucide-react";
 import { screenApi } from "@/lib/api/screen";
 import { ScreenDefinition } from "@/types/screen";
 import { useRouter } from "next/navigation";
@@ -21,8 +21,6 @@ import {
   GridMode,
   isPopLayout,
   createEmptyLayout,
-  GAP_PRESETS,
-  GRID_BREAKPOINTS,
   BLOCK_GAP,
   BLOCK_PADDING,
   detectGridMode,
@@ -86,26 +84,32 @@ function PopScreenViewPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // 뷰포트 너비 (클라이언트 사이드에서만 계산, 최대 1366px)
-  const [viewportWidth, setViewportWidth] = useState(1024); // 기본값: 태블릿 가로
-  
-  // 모드 결정: 
-  // - 프리뷰 모드: 수동 선택한 device/orientation 사용
-  // - 일반 모드: 화면 너비 기준으로 자동 결정 (GRID_BREAKPOINTS와 일치)
-  const currentModeKey = isPreviewMode 
-    ? getModeKey(deviceType, isLandscape)
-    : detectGridMode(viewportWidth);
+  // 실제 브라우저 너비 (모드 감지용)
+  const [rawWidth, setRawWidth] = useState(1024);
   
   useEffect(() => {
-    const updateViewportWidth = () => {
-      setViewportWidth(Math.min(window.innerWidth, 1366));
-    };
-    
-    updateViewportWidth();
-    window.addEventListener("resize", updateViewportWidth);
-    return () => window.removeEventListener("resize", updateViewportWidth);
+    const updateWidth = () => setRawWidth(window.innerWidth);
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
   }, []);
 
+  // 모드 결정
+  const currentModeKey = isPreviewMode 
+    ? getModeKey(deviceType, isLandscape)
+    : detectGridMode(rawWidth);
+
+  // 디자이너와 동일한 기준 너비 사용 (모드별 고정 너비)
+  const MODE_REFERENCE_WIDTH: Record<GridMode, number> = {
+    mobile_portrait: 375,
+    mobile_landscape: 600,
+    tablet_portrait: 820,
+    tablet_landscape: 1024,
+  };
+  const viewportWidth = isPreviewMode
+    ? DEVICE_SIZES[deviceType][isLandscape ? "landscape" : "portrait"].width
+    : MODE_REFERENCE_WIDTH[currentModeKey];
+
   // 화면 및 POP 레이아웃 로드
   useEffect(() => {
     const loadScreen = async () => {
@@ -288,20 +292,7 @@ function PopScreenViewPage() {
               </div>
             )}
 
-            {/* 일반 모드 네비게이션 바 */}
-            {!isPreviewMode && (
-              <div className="sticky top-0 z-50 flex h-10 items-center justify-between border-b bg-white/80 px-3 backdrop-blur">
-                <Button variant="ghost" size="sm" onClick={() => router.push("/pop")} className="gap-1 text-xs">
-                  <LayoutGrid className="h-3.5 w-3.5" />
-                  POP 대시보드
-                </Button>
-                <span className="text-xs text-gray-500">{screen.screenName}</span>
-                <Button variant="ghost" size="sm" onClick={() => router.push("/")} className="gap-1 text-xs">
-                  <Monitor className="h-3.5 w-3.5" />
-                  PC 모드
-                </Button>
-              </div>
-            )}
+            {/* 일반 모드 네비게이션 바 제거 (프로필 컴포넌트에서 PC 모드 전환 가능) */}
 
             {/* POP 화면 컨텐츠 */}
             <div className={`flex-1 flex flex-col overflow-auto ${isPreviewMode ? "py-4 items-center" : "bg-white"}`}>