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/pivot-grid/PivotGridConfigPanel.tsx

@@ -90,10 +90,10 @@ interface ColumnChipProps {
 const ColumnChip: React.FC<ColumnChipProps> = ({ column, isUsed, onClick }) => {
   const dataType = mapDbTypeToFieldType(column.data_type);
   const typeColor = {
-    number: "bg-blue-100 text-blue-700 border-blue-200",
-    string: "bg-green-100 text-green-700 border-green-200",
+    number: "bg-primary/10 text-primary border-primary/20",
+    string: "bg-emerald-100 text-emerald-700 border-emerald-200",
     date: "bg-purple-100 text-purple-700 border-purple-200",
-    boolean: "bg-orange-100 text-orange-700 border-orange-200",
+    boolean: "bg-amber-100 text-orange-700 border-orange-200",
   }[dataType];
 
   return (
@@ -400,12 +400,12 @@ export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
   return (
     <div className="space-y-4">
       {/* 사용 가이드 */}
-      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+      <div className="bg-primary/10 border border-primary/20 rounded-lg p-3">
         <div className="flex items-start gap-2">
-          <Info className="h-4 w-4 text-blue-600 mt-0.5" />
-          <div className="text-xs text-blue-800">
+          <Info className="h-4 w-4 text-primary mt-0.5" />
+          <div className="text-xs text-primary">
             <p className="font-medium mb-1">피벗 테이블 설정 방법</p>
-            <ol className="list-decimal list-inside space-y-0.5 text-blue-700">
+            <ol className="list-decimal list-inside space-y-0.5 text-primary">
               <li>데이터를 가져올 <strong>테이블</strong>을 선택하세요</li>
               <li><strong>행 그룹</strong>에 그룹화할 컬럼을 추가하세요 (예: 지역, 부서)</li>
               <li><strong>열 그룹</strong>에 가로로 펼칠 컬럼을 추가하세요 (예: 월, 분기)</li>
@@ -502,13 +502,13 @@ export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
               area="column"
               label="열 그룹"
               description="가로로 펼칠 항목 (예: 월, 분기, 연도)"
-              icon={<Columns className="h-4 w-4 text-blue-600" />}
+              icon={<Columns className="h-4 w-4 text-primary" />}
               fields={getFieldsByArea("column")}
               columns={columns}
               onAddField={(col) => handleAddField("column", col)}
               onRemoveField={(idx) => handleRemoveField("column", idx)}
               onUpdateField={(idx, updates) => handleUpdateField("column", idx, updates)}
-              color="border-blue-200 bg-blue-50/50"
+              color="border-primary/20 bg-primary/10/50"
             />
 
             <AreaDropZone