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/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx

@@ -126,11 +126,11 @@ const FieldColumn: React.FC<FieldColumnProps> = ({
             : isSelected
               ? "border-primary bg-primary/10 shadow-md"
               : isMapped
-                ? "border-green-500 bg-green-50 shadow-sm"
+                ? "border-emerald-500 bg-emerald-50 shadow-sm"
                 : isBlockedDropTarget
-                  ? "border-red-400 bg-destructive/10 shadow-md"
+                  ? "border-destructive/60 bg-destructive/10 shadow-md"
                   : isDropTarget
-                    ? "border-blue-400 bg-accent shadow-md"
+                    ? "border-primary/60 bg-accent shadow-md"
                     : "border-border hover:bg-muted/50 hover:shadow-sm"
         } `}
         draggable={type === "from" && !isMapped}
@@ -146,8 +146,8 @@ const FieldColumn: React.FC<FieldColumnProps> = ({
             isSelected
               ? "bg-primary border-primary"
               : isMapped
-                ? "border-green-500 bg-green-500"
-                : "border-gray-300 bg-white"
+                ? "border-emerald-500 bg-emerald-500"
+                : "border-input bg-white"
           } `}
           style={{
             [type === "from" ? "right" : "left"]: "-6px",
@@ -156,9 +156,9 @@ const FieldColumn: React.FC<FieldColumnProps> = ({
 
         <div className="flex items-center justify-between">
           <div className="flex min-w-0 flex-1 items-center gap-2">
-            {type === "from" && !isMapped && <GripVertical className="h-3 w-3 flex-shrink-0 text-gray-400" />}
+            {type === "from" && !isMapped && <GripVertical className="h-3 w-3 flex-shrink-0 text-muted-foreground/70" />}
             <span className="truncate text-sm font-medium">{displayName}</span>
-            {isMapped && <Link className="h-3 w-3 flex-shrink-0 text-green-600" />}
+            {isMapped && <Link className="h-3 w-3 flex-shrink-0 text-emerald-600" />}
           </div>
           <Badge variant="outline" className="flex-shrink-0 text-xs">
             {field.webType || field.dataType || "unknown"}

frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx

@@ -91,9 +91,9 @@ const MappingControls: React.FC<MappingControlsProps> = ({
               </Badge>
               {/* 타입 호환성 아이콘 */}
               {selectedFromField.webType === selectedToField.webType ? (
-                <span className="text-xs text-green-600">✅</span>
+                <span className="text-xs text-emerald-600">✅</span>
               ) : (
-                <span className="text-xs text-orange-600">⚠️</span>
+                <span className="text-xs text-amber-600">⚠️</span>
               )}
             </div>
           </div>