refactor: 전체 프론트엔드 하드코딩 색상 → CSS 변수 일괄 치환

447+ 파일, 4500+ 줄 변경:
- gray-* → border/bg-muted/text-foreground/text-muted-foreground
- blue-* → primary/ring
- red-* → destructive
- green-* → emerald (일관성)
- indigo-* → primary
- yellow/orange → amber (통일)
- dark mode 변형도 시맨틱 토큰으로 변환

Made-with: Cursor

frontend/components/screen/ResponsiveDesignerContainer.tsx

@@ -106,15 +106,15 @@ export const ResponsiveDesignerContainer: React.FC<ResponsiveDesignerContainerPr
   };
 
   return (
-    <div className="flex h-full w-full flex-col bg-gray-100">
+    <div className="flex h-full w-full flex-col bg-muted">
       {/* 상단 컨트롤 바 */}
       <div className="flex items-center justify-between border-b bg-white px-4 py-2 shadow-sm">
         <div className="flex items-center space-x-2">
-          <span className="text-sm font-medium text-gray-700">
+          <span className="text-sm font-medium text-foreground">
             {screenName && `${screenName} - `}
             {designWidth} × {designHeight}
           </span>
-          <span className="text-xs text-gray-500">
+          <span className="text-xs text-muted-foreground">
             (배율: {Math.round(scale * 100)}% | 컨테이너: {containerSize.width}×{containerSize.height})
           </span>
         </div>