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/panels/properties/LogProperties.tsx

@@ -16,10 +16,10 @@ interface LogPropertiesProps {
 }
 
 const LOG_LEVELS = [
-  { value: "debug", label: "Debug", icon: Info, color: "text-blue-600" },
-  { value: "info", label: "Info", icon: Info, color: "text-green-600" },
-  { value: "warn", label: "Warning", icon: AlertTriangle, color: "text-yellow-600" },
-  { value: "error", label: "Error", icon: AlertCircle, color: "text-red-600" },
+  { value: "debug", label: "Debug", icon: Info, color: "text-primary" },
+  { value: "info", label: "Info", icon: Info, color: "text-emerald-600" },
+  { value: "warn", label: "Warning", icon: AlertTriangle, color: "text-amber-600" },
+  { value: "error", label: "Error", icon: AlertCircle, color: "text-destructive" },
 ];
 
 export function LogProperties({ nodeId, data }: LogPropertiesProps) {
@@ -48,9 +48,9 @@ export function LogProperties({ nodeId, data }: LogPropertiesProps) {
 
   return (
     <div className="space-y-4 p-4 pb-8">
-      <div className="flex items-center gap-2 rounded-md bg-gray-50 p-2">
-        <FileText className="h-4 w-4 text-gray-600" />
-        <span className="font-semibold text-gray-600">로그</span>
+      <div className="flex items-center gap-2 rounded-md bg-muted p-2">
+        <FileText className="h-4 w-4 text-muted-foreground" />
+        <span className="font-semibold text-muted-foreground">로그</span>
       </div>
 
       <div>
@@ -91,12 +91,12 @@ export function LogProperties({ nodeId, data }: LogPropertiesProps) {
       <div className="flex items-center justify-between">
         <div>
           <Label className="text-xs">데이터 포함</Label>
-          <p className="text-xs text-gray-500">플로우 데이터를 로그에 포함합니다</p>
+          <p className="text-xs text-muted-foreground">플로우 데이터를 로그에 포함합니다</p>
         </div>
         <Switch checked={includeData} onCheckedChange={setIncludeData} />
       </div>
 
-      <div className={`rounded-md border p-3 ${selectedLevel?.color || "text-gray-600"}`}>
+      <div className={`rounded-md border p-3 ${selectedLevel?.color || "text-muted-foreground"}`}>
         <div className="mb-1 flex items-center gap-2">
           <LevelIcon className="h-4 w-4" />
           <span className="text-xs font-semibold uppercase">{level}</span>