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

@@ -32,9 +32,9 @@ export const DataConnectionDesigner: React.FC = () => {
   const { isMobile, isTablet } = useResponsive();
 
   return (
-    <div className="h-screen bg-gradient-to-br from-slate-50 to-gray-100">
-      <div className="bg-white border-b border-gray-200 px-6 py-4">
-        <h1 className="text-2xl font-bold text-gray-900">
+    <div className="h-screen bg-gradient-to-br from-slate-50 to-muted">
+      <div className="bg-white border-b border-border px-6 py-4">
+        <h1 className="text-2xl font-bold text-foreground">
           🎨 제어관리 - 데이터 연결 설정
         </h1>
         <p className="text-muted-foreground mt-1">
@@ -43,7 +43,7 @@ export const DataConnectionDesigner: React.FC = () => {
               </div>
 
       <div className="flex h-[calc(100vh-80px)]">
-        <div className="w-[30%] bg-white border-r border-gray-200 flex flex-col">
+        <div className="w-[30%] bg-white border-r border-border flex flex-col">
           <ConnectionTypeSelector
             connectionType={state.connectionType}
             onConnectionTypeChange={(type) => setState(prev => ({ ...prev, connectionType: type }))}
@@ -59,7 +59,7 @@ export const DataConnectionDesigner: React.FC = () => {
           </div>
         </div>
 
-        <div className="w-[70%] bg-gray-50 flex flex-col">
+        <div className="w-[70%] bg-muted flex flex-col">
           <StepProgress
             currentStep={state.currentStep}
             onStepChange={(step) => setState(prev => ({ ...prev, currentStep: step }))}