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/node-editor/nodes/ExternalDBSourceNode.tsx

@@ -32,7 +32,7 @@ export const ExternalDBSourceNode = memo(({ data, selected }: NodeProps<External
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+        selected ? "border-orange-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
@@ -48,27 +48,27 @@ export const ExternalDBSourceNode = memo(({ data, selected }: NodeProps<External
       {/* 본문 */}
       <div className="p-3">
         <div className="mb-2 flex items-center gap-1 text-xs">
-          <div className="rounded bg-orange-100 px-2 py-0.5 font-medium text-orange-700">{data.dbType || "DB"}</div>
-          <div className="flex-1 text-gray-500">외부 DB</div>
+          <div className="rounded bg-amber-100 px-2 py-0.5 font-medium text-orange-700">{data.dbType || "DB"}</div>
+          <div className="flex-1 text-muted-foreground">외부 DB</div>
         </div>
 
         {/* 필드 목록 */}
         <div className="space-y-1">
-          <div className="text-xs font-medium text-gray-700">출력 필드:</div>
+          <div className="text-xs font-medium text-foreground">출력 필드:</div>
           <div className="max-h-[150px] overflow-y-auto">
             {data.fields && data.fields.length > 0 ? (
               data.fields.slice(0, 5).map((field) => (
-                <div key={field.name} className="flex items-center gap-2 text-xs text-gray-600">
+                <div key={field.name} className="flex items-center gap-2 text-xs text-muted-foreground">
                   <div className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: dbColor }} />
                   <span className="font-mono">{field.name}</span>
-                  <span className="text-gray-400">({field.type})</span>
+                  <span className="text-muted-foreground/70">({field.type})</span>
                 </div>
               ))
             ) : (
-              <div className="text-xs text-gray-400">필드 없음</div>
+              <div className="text-xs text-muted-foreground/70">필드 없음</div>
             )}
             {data.fields && data.fields.length > 5 && (
-              <div className="text-xs text-gray-400">... 외 {data.fields.length - 5}개</div>
+              <div className="text-xs text-muted-foreground/70">... 외 {data.fields.length - 5}개</div>
             )}
           </div>
         </div>