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/InsertFieldMappingPanel.tsx

@@ -330,7 +330,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
   return (
     <div className="mt-4">
       {/* 헤더 섹션 */}
-      <p className="mb-4 text-sm leading-relaxed text-gray-700">
+      <p className="mb-4 text-sm leading-relaxed text-foreground">
         양쪽 테이블의 컬럼을 클릭하여 매핑하거나, 대상 컬럼에 기본값을 입력하세요. 같은 데이터 타입의 컬럼만 매핑
         가능합니다. 하나의 FROM 컬럼은 하나의 TO 컬럼에만 매핑 가능합니다.
       </p>
@@ -382,7 +382,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
       {/* 빠른 필터 액션 */}
       <Card className="mt-6 border-none py-2 shadow-none">
         <CardContent className="flex flex-wrap gap-2 p-3">
-          <span className="self-center text-sm font-medium text-gray-700">빠른 필터:</span>
+          <span className="self-center text-sm font-medium text-foreground">빠른 필터:</span>
           <Button
             variant="secondary"
             size="sm"
@@ -410,7 +410,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
               setToShowMappedOnly(false);
               setToShowUnmappedOnly(true);
             }}
-            className="h-7 bg-orange-100 text-xs text-orange-700 hover:bg-orange-200"
+            className="h-7 bg-amber-100 text-xs text-orange-700 hover:bg-orange-200"
           >
             미매핑만 보기
           </Button>
@@ -424,7 +424,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
               setToShowMappedOnly(true);
               setToShowUnmappedOnly(false);
             }}
-            className="h-7 bg-green-100 text-xs text-green-700 hover:bg-green-200"
+            className="h-7 bg-emerald-100 text-xs text-emerald-700 hover:bg-emerald-200"
           >
             매핑됨만 보기
           </Button>
@@ -440,12 +440,12 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
       </Card>
 
       {/* 매핑 통계 */}
-      <Card className="mt-4 bg-gradient-to-r from-gray-50 to-gray-100 py-2">
+      <Card className="mt-4 bg-gradient-to-r from-muted to-muted py-2">
         <CardContent className="p-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
               <div>
-                <div className="font-semibold text-gray-800">매핑 진행 상황</div>
+                <div className="font-semibold text-foreground">매핑 진행 상황</div>
                 <div className="text-sm text-muted-foreground">
                   총 {toTableColumns.length}개 컬럼 중{" "}
                   <span className="font-bold text-primary">
@@ -457,7 +457,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
               </div>
             </div>
             <div className="text-right">
-              <div className="text-2xl font-bold text-gray-800">
+              <div className="text-2xl font-bold text-foreground">
                 {Math.round(
                   (columnMappings.filter((m) => m.fromColumnName || (m.defaultValue && m.defaultValue.trim())).length /
                     actualToColumns.length) *
@@ -465,7 +465,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
                 )}
                 %
               </div>
-              <div className="text-xs text-gray-500">완료율</div>
+              <div className="text-xs text-muted-foreground">완료율</div>
             </div>
           </div>
           <div className="mt-3">