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/lib/registry/components/map/MapComponent.tsx

@@ -188,10 +188,10 @@ export default function MapComponent({ component }: MapComponentProps) {
 
   if (error) {
     return (
-      <div className="flex h-full w-full items-center justify-center bg-gray-50">
+      <div className="flex h-full w-full items-center justify-center bg-muted">
         <div className="text-center">
-          <AlertCircle className="mx-auto h-12 w-12 text-red-500" />
-          <p className="mt-2 text-sm text-red-600">{error}</p>
+          <AlertCircle className="mx-auto h-12 w-12 text-destructive" />
+          <p className="mt-2 text-sm text-destructive">{error}</p>
           <Button onClick={loadMapData} className="mt-4" size="sm">
             다시 시도
           </Button>
@@ -261,11 +261,11 @@ export default function MapComponent({ component }: MapComponentProps) {
 
       {/* 상단 정보 바 */}
       <div className="absolute top-2 right-2 z-[1000] flex items-center gap-2 rounded-lg bg-white/90 backdrop-blur-sm px-3 py-2 shadow-lg">
-        <span className="text-xs font-medium text-gray-700">
+        <span className="text-xs font-medium text-foreground">
           마커: {markers.length}개
         </span>
         {lastUpdate && (
-          <span className="text-xs text-gray-500">
+          <span className="text-xs text-muted-foreground">
             {lastUpdate.toLocaleTimeString()}
           </span>
         )}