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/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx

@@ -2136,17 +2136,17 @@ export function RepeatScreenModalComponent({
                   </Badge>
                 )}
                 {rowTypeCounts.aggregation > 0 && (
-                  <Badge className="bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300">
+                  <Badge className="bg-amber-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300">
                     집계 {rowTypeCounts.aggregation}개
                   </Badge>
                 )}
                 {rowTypeCounts.table > 0 && (
-                  <Badge className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+                  <Badge className="bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary/80">
                     테이블 {rowTypeCounts.table}개
                   </Badge>
                 )}
                 {rowTypeCounts.fields > 0 && (
-                  <Badge className="bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">
+                  <Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300">
                     필드 {rowTypeCounts.fields}개
                   </Badge>
                 )}
@@ -2176,7 +2176,7 @@ export function RepeatScreenModalComponent({
 
           {/* 데이터 소스 정보 */}
           {dataSource?.sourceTable && (
-            <div className="rounded-md bg-green-100 px-3 py-2 text-xs dark:bg-green-900">
+            <div className="rounded-md bg-emerald-100 px-3 py-2 text-xs dark:bg-emerald-900">
               소스 테이블: <strong>{dataSource.sourceTable}</strong>
               {dataSource.filterField && <span className="ml-2">(필터: {dataSource.filterField})</span>}
             </div>
@@ -2328,7 +2328,7 @@ export function RepeatScreenModalComponent({
                                     key={row._rowId}
                                     className={cn(
                                       row._isDirty && "bg-primary/5",
-                                      row._isNew && "bg-green-50 dark:bg-green-950",
+                                      row._isNew && "bg-emerald-50 dark:bg-emerald-950",
                                       row._isDeleted && "bg-destructive/10 opacity-60",
                                     )}
                                   >
@@ -2373,7 +2373,7 @@ export function RepeatScreenModalComponent({
                                                 onClick={() =>
                                                   handleEditExternalRow(card._cardId, row._rowId, contentRow.id)
                                                 }
-                                                className="h-7 w-7 p-0 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
+                                                className="h-7 w-7 p-0 text-primary hover:bg-primary/10 hover:text-primary"
                                                 title="수정"
                                               >
                                                 <Pencil className="h-4 w-4" />
@@ -2725,7 +2725,7 @@ function renderContentRow(
 
       if (aggFields.length === 0) {
         return (
-          <div className="rounded-lg bg-orange-50 p-4 text-sm text-orange-600 dark:bg-orange-950 dark:text-orange-400">
+          <div className="rounded-lg bg-amber-50 p-4 text-sm text-amber-600 dark:bg-orange-950 dark:text-orange-400">
             집계 필드가 설정되지 않았습니다. (레이아웃 탭에서 집계 필드를 추가하세요)
           </div>
         );
@@ -2768,7 +2768,7 @@ function renderContentRow(
 
       if (tableColumns.length === 0) {
         return (
-          <div className="rounded-lg bg-blue-50 p-4 text-sm text-blue-600 dark:bg-blue-950 dark:text-blue-400">
+          <div className="rounded-lg bg-primary/10 p-4 text-sm text-primary dark:bg-primary/15 dark:text-primary/80">
             테이블 컬럼이 설정되지 않았습니다. (레이아웃 탭에서 테이블 컬럼을 추가하세요)
           </div>
         );
@@ -2858,7 +2858,7 @@ function renderSimpleContentRow(
 
       if (aggFields.length === 0) {
         return (
-          <div className="rounded-lg bg-orange-50 p-4 text-sm text-orange-600 dark:bg-orange-950 dark:text-orange-400">
+          <div className="rounded-lg bg-amber-50 p-4 text-sm text-amber-600 dark:bg-orange-950 dark:text-orange-400">
             집계 필드가 설정되지 않았습니다.
           </div>
         );
@@ -2903,7 +2903,7 @@ function renderSimpleContentRow(
 
       if (tableColumns.length === 0) {
         return (
-          <div className="rounded-lg bg-blue-50 p-4 text-sm text-blue-600 dark:bg-blue-950 dark:text-blue-400">
+          <div className="rounded-lg bg-primary/10 p-4 text-sm text-primary dark:bg-primary/15 dark:text-primary/80">
             테이블 컬럼이 설정되지 않았습니다.
           </div>
         );
@@ -3004,10 +3004,10 @@ function renderSimpleTableCell(col: TableColumnConfig, card: CardData, onChange:
 // 배경색 클래스 변환
 function getBackgroundClass(color: string): string {
   const colorMap: Record<string, string> = {
-    blue: "bg-blue-50 dark:bg-blue-950",
-    green: "bg-green-50 dark:bg-green-950",
+    blue: "bg-primary/10 dark:bg-primary/15",
+    green: "bg-emerald-50 dark:bg-emerald-950",
     purple: "bg-purple-50 dark:bg-purple-950",
-    orange: "bg-orange-50 dark:bg-orange-950",
+    orange: "bg-amber-50 dark:bg-orange-950",
   };
   return colorMap[color] || "";
 }