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/templates/DataTableTemplate.tsx

@@ -259,14 +259,14 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
         
         {/* 🆕 선택된 컬럼의 검색 입력 필드 */}
         {searchFilterColumns.size > 0 && (
-          <div className="grid grid-cols-1 gap-3 rounded-lg border bg-gray-50/50 p-4 md:grid-cols-2 lg:grid-cols-3">
+          <div className="grid grid-cols-1 gap-3 rounded-lg border bg-muted/50 p-4 md:grid-cols-2 lg:grid-cols-3">
             {Array.from(searchFilterColumns).map((columnId) => {
               const column = defaultColumns.find(col => col.id === columnId);
               if (!column) return null;
               
               return (
                 <div key={columnId} className="space-y-1.5">
-                  <label className="text-xs font-medium text-gray-700">
+                  <label className="text-xs font-medium text-foreground">
                     {column.label}
                   </label>
                   <Input
@@ -378,7 +378,7 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
                             )}
                             {actions.enableDelete && (
                               <Button variant="ghost" size="sm" disabled>
-                                <Trash2 className="h-3 w-3 text-red-500" />
+                                <Trash2 className="h-3 w-3 text-destructive" />
                               </Button>
                             )}
                           </div>
@@ -465,7 +465,7 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
           
           <div className="max-h-[400px] space-y-2 overflow-y-auto py-4">
             {defaultColumns.map((column) => (
-              <div key={column.id} className="flex items-center space-x-3 rounded-lg p-3 hover:bg-gray-50">
+              <div key={column.id} className="flex items-center space-x-3 rounded-lg p-3 hover:bg-muted">
                 <Checkbox
                   id={`filter-${column.id}`}
                   checked={searchFilterColumns.has(column.id)}
@@ -473,7 +473,7 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
                 />
                 <label htmlFor={`filter-${column.id}`} className="flex-1 cursor-pointer text-sm">
                   {column.label}
-                  <span className="ml-2 text-xs text-gray-500">({column.type})</span>
+                  <span className="ml-2 text-xs text-muted-foreground">({column.type})</span>
                 </label>
               </div>
             ))}