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/screen/config-panels/ButtonDataflowConfigPanel.tsx

@@ -296,7 +296,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                 </SelectItem>
               </SelectContent>
             </Select>
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-muted-foreground">
               {dataflowConfig.controlDataSource === "form" && "현재 폼의 입력값으로 조건을 체크합니다"}
               {dataflowConfig.controlDataSource === "table-selection" && "테이블에서 선택된 항목의 데이터로 조건을 체크합니다"}
               {dataflowConfig.controlDataSource === "table-all" && "테이블의 모든 데이터(페이징 무관)로 조건을 체크합니다"}
@@ -313,7 +313,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
       {config.enableDataflowControl && (
         <div className="space-y-6 border-l-2 border-primary/20 pl-4">
           {/* 현재 액션 정보 (간소화) */}
-          <div className="rounded bg-gray-100 p-2">
+          <div className="rounded bg-muted p-2">
             <p className="text-xs text-muted-foreground">
               <strong>{getActionDisplayName(config.actionType || "save")}</strong> 액션에 제어관리 연결
             </p>
@@ -362,8 +362,8 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
 
           {/* 간편 모드 설정 */}
           {(dataflowConfig.controlMode === "simple" || !dataflowConfig.controlMode) && (
-            <div className="space-y-3 rounded border bg-gray-50 p-3">
-              <h4 className="text-sm font-medium text-gray-700">관계 선택</h4>
+            <div className="space-y-3 rounded border bg-muted p-3">
+              <h4 className="text-sm font-medium text-foreground">관계 선택</h4>
 
               {/* 관계 선택 */}
               <div>
@@ -393,9 +393,9 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                   <PopoverContent className="w-80 p-0">
                     <div className="p-2">
                       {diagramsLoading ? (
-                        <div className="p-4 text-center text-sm text-gray-500">관계 목록을 불러오는 중...</div>
+                        <div className="p-4 text-center text-sm text-muted-foreground">관계 목록을 불러오는 중...</div>
                       ) : diagrams.length === 0 ? (
-                        <div className="p-4 text-center text-sm text-gray-500">사용 가능한 관계가 없습니다</div>
+                        <div className="p-4 text-center text-sm text-muted-foreground">사용 가능한 관계가 없습니다</div>
                       ) : (
                         <div className="max-h-60 overflow-y-auto">
                           {diagrams.map((diagram) => (
@@ -419,7 +419,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                                 />
                                 <div className="flex-1 text-left">
                                   <div className="font-medium">{diagram.name}</div>
-                                  <div className="text-xs text-gray-500">{diagram.relationshipCount}개 관계</div>
+                                  <div className="text-xs text-muted-foreground">{diagram.relationshipCount}개 관계</div>
                                 </div>
                               </div>
                             </Button>
@@ -460,9 +460,9 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                     <PopoverContent className="w-96 p-0">
                       <div className="p-2">
                         {relationshipsLoading ? (
-                          <div className="p-4 text-center text-sm text-gray-500">관계 목록을 불러오는 중...</div>
+                          <div className="p-4 text-center text-sm text-muted-foreground">관계 목록을 불러오는 중...</div>
                         ) : relationships.length === 0 ? (
-                          <div className="p-4 text-center text-sm text-gray-500">
+                          <div className="p-4 text-center text-sm text-muted-foreground">
                             이 관계에는 사용 가능한 관계가 없습니다
                           </div>
                         ) : (
@@ -489,7 +489,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                                   />
                                   <div className="flex-1 text-left">
                                     <div className="font-medium">{relationship.name}</div>
-                                    <div className="text-xs text-gray-500">
+                                    <div className="text-xs text-muted-foreground">
                                       {relationship.sourceTable} → {relationship.targetTable}
                                     </div>
                                     <Badge variant="outline" className="mt-1 text-xs">
@@ -510,7 +510,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
               {/* 선택된 관계 간단 정보 */}
               {selectedRelationship && (
                 <div className="mt-2 rounded border bg-accent p-2">
-                  <p className="text-xs text-blue-700">
+                  <p className="text-xs text-primary">
                     <strong>{selectedRelationship.sourceTable}</strong> →{" "}
                     <strong>{selectedRelationship.targetTable}</strong>
                     {previewData && (