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

@@ -18,7 +18,7 @@ export const EmailActionNode = memo(({ data, selected }: NodeProps<EmailActionNo
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-pink-500 shadow-lg" : "border-gray-200"
+        selected ? "border-pink-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
@@ -40,36 +40,36 @@ export const EmailActionNode = memo(({ data, selected }: NodeProps<EmailActionNo
       <div className="space-y-2 p-3">
         {/* 발송 계정 상태 */}
         <div className="flex items-center gap-2 text-xs">
-          <User className="h-3 w-3 text-gray-400" />
-          <span className="text-gray-600">
+          <User className="h-3 w-3 text-muted-foreground/70" />
+          <span className="text-muted-foreground">
             {hasAccount ? (
-              <span className="flex items-center gap-1 text-green-600">
+              <span className="flex items-center gap-1 text-emerald-600">
                 <CheckCircle className="h-3 w-3" />
                 계정 선택됨
               </span>
             ) : (
-              <span className="text-orange-500">발송 계정 선택 필요</span>
+              <span className="text-amber-500">발송 계정 선택 필요</span>
             )}
           </span>
         </div>
 
         {/* 수신자 */}
         <div className="text-xs">
-          <span className="text-gray-500">수신자: </span>
+          <span className="text-muted-foreground">수신자: </span>
           {hasRecipient ? (
-            <span className="text-gray-700">{data.to}</span>
+            <span className="text-foreground">{data.to}</span>
           ) : (
-            <span className="text-orange-500">미설정</span>
+            <span className="text-amber-500">미설정</span>
           )}
         </div>
 
         {/* 제목 */}
         <div className="text-xs">
-          <span className="text-gray-500">제목: </span>
+          <span className="text-muted-foreground">제목: </span>
           {hasSubject ? (
-            <span className="truncate text-gray-700">{data.subject}</span>
+            <span className="truncate text-foreground">{data.subject}</span>
           ) : (
-            <span className="text-orange-500">미설정</span>
+            <span className="text-amber-500">미설정</span>
           )}
         </div>
 
@@ -77,7 +77,7 @@ export const EmailActionNode = memo(({ data, selected }: NodeProps<EmailActionNo
         <div className="flex items-center gap-2">
           <span
             className={`rounded px-1.5 py-0.5 text-xs ${
-              data.bodyType === "html" ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-700"
+              data.bodyType === "html" ? "bg-primary/10 text-primary" : "bg-muted text-foreground"
             }`}
           >
             {data.bodyType === "html" ? "HTML" : "TEXT"}