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/tax-invoice/CostTypeStats.tsx

@@ -46,12 +46,12 @@ const costTypeIcons: Record<CostType, React.ReactNode> = {
 
 // 비용 유형별 색상
 const costTypeColors: Record<CostType, string> = {
-  purchase: "bg-blue-500",
-  installation: "bg-green-500",
-  repair: "bg-orange-500",
+  purchase: "bg-primary",
+  installation: "bg-emerald-500",
+  repair: "bg-amber-500",
   maintenance: "bg-purple-500",
-  disposal: "bg-red-500",
-  other: "bg-gray-500",
+  disposal: "bg-destructive",
+  other: "bg-muted0",
 };
 
 export function CostTypeStats() {
@@ -168,7 +168,7 @@ export function CostTypeStats() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">구매 비용</CardTitle>
-            <Package className="h-4 w-4 text-blue-500" />
+            <Package className="h-4 w-4 text-primary" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
@@ -184,7 +184,7 @@ export function CostTypeStats() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">수리/유지보수</CardTitle>
-            <Wrench className="h-4 w-4 text-orange-500" />
+            <Wrench className="h-4 w-4 text-amber-500" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
@@ -200,7 +200,7 @@ export function CostTypeStats() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">설치/폐기</CardTitle>
-            <Settings className="h-4 w-4 text-green-500" />
+            <Settings className="h-4 w-4 text-emerald-500" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
@@ -238,7 +238,7 @@ export function CostTypeStats() {
                       <div className="flex items-center gap-2">
                         <div className="flex-1 h-3 rounded-full bg-muted overflow-hidden">
                           <div
-                            className={`h-full ${costType ? costTypeColors[costType] : "bg-gray-400"}`}
+                            className={`h-full ${costType ? costTypeColors[costType] : "bg-muted-foreground"}`}
                             style={{ width: `${Math.max(percentage, 2)}%` }}
                           />
                         </div>
@@ -296,7 +296,7 @@ export function CostTypeStats() {
                           return (
                             <div
                               key={costType || "none"}
-                              className={`h-6 ${costType ? costTypeColors[costType] : "bg-gray-400"} rounded`}
+                              className={`h-6 ${costType ? costTypeColors[costType] : "bg-muted-foreground"} rounded`}
                               style={{ width: `${Math.max(width, 5)}%` }}
                               title={`${costType ? costTypeLabels[costType] : "미분류"}: ${formatAmount(item.total_amount)}원`}
                             />

frontend/components/tax-invoice/TaxInvoiceDetail.tsx

@@ -61,10 +61,10 @@ const statusLabels: Record<string, string> = {
 
 // 상태 색상
 const statusColors: Record<string, string> = {
-  draft: "bg-gray-100 text-gray-800",
-  issued: "bg-green-100 text-green-800",
-  sent: "bg-blue-100 text-blue-800",
-  cancelled: "bg-red-100 text-red-800",
+  draft: "bg-muted text-foreground",
+  issued: "bg-emerald-100 text-emerald-800",
+  sent: "bg-primary/10 text-primary",
+  cancelled: "bg-destructive/10 text-red-800",
 };
 
 export function TaxInvoiceDetail({ open, onClose, invoiceId }: TaxInvoiceDetailProps) {
@@ -458,7 +458,7 @@ export function TaxInvoiceDetail({ open, onClose, invoiceId }: TaxInvoiceDetailP
 
               {/* 품목 내역 */}
               <div className="mb-6">
-                <h3 className="mb-3 border-b-2 border-gray-800 pb-2 font-semibold">품목 내역</h3>
+                <h3 className="mb-3 border-b-2 border-foreground pb-2 font-semibold">품목 내역</h3>
                 <Table>
                   <TableHeader>
                     <TableRow>
@@ -555,7 +555,7 @@ export function TaxInvoiceDetail({ open, onClose, invoiceId }: TaxInvoiceDetailP
                       .map((file) => (
                         <div
                           key={file.id}
-                          className="group relative aspect-square overflow-hidden rounded-lg border bg-gray-50"
+                          className="group relative aspect-square overflow-hidden rounded-lg border bg-muted"
                         >
                           <img
                             src={getFilePreviewUrl(file)}

frontend/components/tax-invoice/TaxInvoiceList.tsx

@@ -707,7 +707,7 @@ export function TaxInvoiceList() {
                               onClick={() => handleIssueConfirm(invoice)}
                               title="발행"
                             >
-                              <CheckCircle className="h-4 w-4 text-green-600" />
+                              <CheckCircle className="h-4 w-4 text-emerald-600" />
                             </Button>
                             <Button
                               variant="ghost"
@@ -724,7 +724,7 @@ export function TaxInvoiceList() {
                           <Button
                             variant="ghost"
                             size="icon"
-                            className="h-8 w-8 text-orange-600"
+                            className="h-8 w-8 text-amber-600"
                             onClick={() => handleCancelConfirm(invoice)}
                             title="취소"
                           >