diff --git a/frontend/components/dashboard/widgets/BookingAlertWidget.tsx b/frontend/components/dashboard/widgets/BookingAlertWidget.tsx
index c327610f..f28d6fad 100644
--- a/frontend/components/dashboard/widgets/BookingAlertWidget.tsx
+++ b/frontend/components/dashboard/widgets/BookingAlertWidget.tsx
@@ -163,14 +163,14 @@ export default function BookingAlertWidget({ element }: BookingAlertWidgetProps)
           <div className="flex items-center gap-2">
               <h3 className="text-lg font-bold text-foreground">{element?.customTitle || "예약 요청 알림"}</h3>
             {newCount > 0 && (
-              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-destructive text-xs font-bold text-white">
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-destructive text-xs font-bold text-primary-foreground">
                 {newCount}
               </span>
             )}
           </div>
           <button
             onClick={fetchBookings}
-            className="rounded-lg bg-primary px-3 py-1.5 text-sm text-white transition-colors hover:bg-primary/90"
+            className="rounded-lg bg-primary px-3 py-1.5 text-sm text-primary-foreground transition-colors hover:bg-primary/90"
           >
             🔄 새로고침
           </button>
@@ -183,7 +183,7 @@ export default function BookingAlertWidget({ element }: BookingAlertWidgetProps)
               key={f}
               onClick={() => setFilter(f)}
               className={`rounded px-3 py-1 text-xs font-medium transition-colors ${
-                filter === f ? "bg-primary text-white" : "bg-muted text-foreground hover:bg-muted"
+                filter === f ? "bg-primary text-primary-foreground" : "bg-muted text-foreground hover:bg-muted"
               }`}
             >
               {f === "pending" ? "대기중" : f === "accepted" ? "수락됨" : "전체"}
@@ -213,7 +213,7 @@ export default function BookingAlertWidget({ element }: BookingAlertWidgetProps)
                 {/* NEW 뱃지 */}
                 {isNew(booking.createdAt) && booking.status === "pending" && (
                   <div className="absolute -right-2 -top-2 animate-bounce">
-                    <span className="flex h-12 w-12 items-center justify-center rounded-full bg-destructive text-xs font-bold text-white shadow-lg">
+                    <span className="flex h-12 w-12 items-center justify-center rounded-full bg-destructive text-xs font-bold text-primary-foreground shadow-lg">
                       🆕
                     </span>
                   </div>
@@ -245,14 +245,14 @@ export default function BookingAlertWidget({ element }: BookingAlertWidgetProps)
                     <div className="flex gap-1">
                       <button
                         onClick={() => handleAccept(booking.id)}
-                        className="flex items-center gap-1 rounded bg-success px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-success/90"
+                        className="flex items-center gap-1 rounded bg-success px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-success/90"
                       >
                         <Check className="h-4 w-4" />
                         수락
                       </button>
                       <button
                         onClick={() => handleReject(booking.id)}
-                        className="flex items-center gap-1 rounded bg-destructive px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-destructive/90"
+                        className="flex items-center gap-1 rounded bg-destructive px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-destructive/90"
                       >
                         <X className="h-4 w-4" />
                         거절
diff --git a/frontend/components/dashboard/widgets/CalculatorWidget.tsx b/frontend/components/dashboard/widgets/CalculatorWidget.tsx
index e8354769..8f0a8fe5 100644
--- a/frontend/components/dashboard/widgets/CalculatorWidget.tsx
+++ b/frontend/components/dashboard/widgets/CalculatorWidget.tsx
@@ -217,7 +217,7 @@ export default function CalculatorWidget({ element, className = '' }: Calculator
           <Button
             variant="default"
             onClick={() => handleOperation('÷')}
-            className="h-full text-xs sm:text-base bg-primary hover:bg-primary/90 text-white font-semibold select-none"
+            className="h-full text-xs sm:text-base bg-primary hover:bg-primary/90 text-primary-foreground font-semibold select-none"
           >
             ÷
           </Button>
@@ -247,7 +247,7 @@ export default function CalculatorWidget({ element, className = '' }: Calculator
           <Button
             variant="default"
             onClick={() => handleOperation('×')}
-            className="h-full text-xs sm:text-base bg-primary hover:bg-primary/90 text-white font-semibold select-none"
+            className="h-full text-xs sm:text-base bg-primary hover:bg-primary/90 text-primary-foreground font-semibold select-none"
           >
             ×
           </Button>
@@ -277,7 +277,7 @@ export default function CalculatorWidget({ element, className = '' }: Calculator
           <Button
             variant="default"
             onClick={() => handleOperation('-')}
-            className="h-full text-xs sm:text-base bg-primary hover:bg-primary/90 text-white font-semibold select-none"
+            className="h-full text-xs sm:text-base bg-primary hover:bg-primary/90 text-primary-foreground font-semibold select-none"
           >
             -
           </Button>
@@ -307,7 +307,7 @@ export default function CalculatorWidget({ element, className = '' }: Calculator
           <Button
             variant="default"
             onClick={() => handleOperation('+')}
-            className="h-full text-xs sm:text-base bg-primary hover:bg-primary/90 text-white font-semibold select-none"
+            className="h-full text-xs sm:text-base bg-primary hover:bg-primary/90 text-primary-foreground font-semibold select-none"
           >
             +
           </Button>
@@ -330,7 +330,7 @@ export default function CalculatorWidget({ element, className = '' }: Calculator
           <Button
             variant="default"
             onClick={handleEquals}
-            className="h-full text-xs sm:text-base bg-success hover:bg-success/90 text-white font-semibold select-none"
+            className="h-full text-xs sm:text-base bg-success hover:bg-success/90 text-primary-foreground font-semibold select-none"
           >
             =
           </Button>
diff --git a/frontend/components/dashboard/widgets/CustomStatsWidget.tsx b/frontend/components/dashboard/widgets/CustomStatsWidget.tsx
index 0c59e253..da93cdaf 100644
--- a/frontend/components/dashboard/widgets/CustomStatsWidget.tsx
+++ b/frontend/components/dashboard/widgets/CustomStatsWidget.tsx
@@ -603,7 +603,7 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
       indigo: { bg: "bg-primary/10", text: "text-primary" },
       green: { bg: "bg-success/10", text: "text-success" },
       blue: { bg: "bg-primary/10", text: "text-primary" },
-      purple: { bg: "bg-purple-500/10", text: "text-purple-500" },
+      purple: { bg: "bg-primary/10", text: "text-primary" },
       orange: { bg: "bg-warning/10", text: "text-warning" },
       yellow: { bg: "bg-warning/10", text: "text-warning" },
       cyan: { bg: "bg-primary/10", text: "text-primary" },
@@ -634,7 +634,7 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
           {!element?.dataSource?.query && <div className="mt-2 text-xs text-muted-foreground">쿼리를 설정하세요</div>}
           <button
             onClick={loadData}
-            className="mt-3 rounded-lg bg-primary px-4 py-2 text-sm text-white hover:bg-primary/90"
+            className="mt-3 rounded-lg bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90"
           >
             다시 시도
           </button>
@@ -772,7 +772,7 @@ export default function CustomStatsWidget({ element, refreshInterval = 60000 }:
             <div className="mt-6 flex gap-2">
               <button
                 onClick={handleApplySettings}
-                className="flex-1 rounded-lg bg-primary py-2 text-white hover:bg-primary/90"
+                className="flex-1 rounded-lg bg-primary py-2 text-primary-foreground hover:bg-primary/90"
               >
                 적용 ({selectedStats.length}개 선택)
               </button>
diff --git a/frontend/components/dashboard/widgets/DocumentWidget.tsx b/frontend/components/dashboard/widgets/DocumentWidget.tsx
index 8899ef73..bf7231a6 100644
--- a/frontend/components/dashboard/widgets/DocumentWidget.tsx
+++ b/frontend/components/dashboard/widgets/DocumentWidget.tsx
@@ -133,7 +133,7 @@ export default function DocumentWidget({ element }: DocumentWidgetProps) {
       <div className="border-b border-border bg-background px-4 py-3">
         <div className="mb-3 flex items-center justify-between">
           <h3 className="text-lg font-bold text-foreground">{element?.customTitle || "문서 관리"}</h3>
-          <button className="rounded-lg bg-primary px-3 py-1.5 text-sm text-white transition-colors hover:bg-primary/90">
+          <button className="rounded-lg bg-primary px-3 py-1.5 text-sm text-primary-foreground transition-colors hover:bg-primary/90">
             + 업로드
           </button>
         </div>
@@ -177,7 +177,7 @@ export default function DocumentWidget({ element }: DocumentWidgetProps) {
               key={f}
               onClick={() => setFilter(f)}
               className={`rounded px-3 py-1 text-xs font-medium transition-colors ${
-                filter === f ? "bg-primary text-white" : "bg-muted text-foreground hover:bg-muted"
+                filter === f ? "bg-primary text-primary-foreground" : "bg-muted text-foreground hover:bg-muted"
               }`}
             >
               {f === "all" ? "전체" : f}
@@ -232,7 +232,7 @@ export default function DocumentWidget({ element }: DocumentWidgetProps) {
                 {/* 다운로드 버튼 */}
                 <button
                   onClick={() => handleDownload(doc)}
-                  className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-primary text-white transition-colors hover:bg-primary/90"
+                  className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary/90"
                   title="다운로드"
                 >
                   <Download className="h-4 w-4" />
diff --git a/frontend/components/dashboard/widgets/MaintenanceWidget.tsx b/frontend/components/dashboard/widgets/MaintenanceWidget.tsx
index bf48ccdc..fd2d3723 100644
--- a/frontend/components/dashboard/widgets/MaintenanceWidget.tsx
+++ b/frontend/components/dashboard/widgets/MaintenanceWidget.tsx
@@ -120,7 +120,7 @@ export default function MaintenanceWidget() {
       <div className="border-b border-border bg-background px-4 py-3">
         <div className="mb-3 flex items-center justify-between">
           <h3 className="text-lg font-bold text-foreground">🔧 정비 일정 관리</h3>
-          <button className="rounded-lg bg-primary px-3 py-1.5 text-sm text-white transition-colors hover:bg-primary/90">
+          <button className="rounded-lg bg-primary px-3 py-1.5 text-sm text-primary-foreground transition-colors hover:bg-primary/90">
             + 일정 추가
           </button>
         </div>
@@ -152,7 +152,7 @@ export default function MaintenanceWidget() {
               key={f}
               onClick={() => setFilter(f)}
               className={`rounded px-3 py-1 text-xs font-medium transition-colors ${
-                filter === f ? "bg-primary text-white" : "bg-muted text-foreground hover:bg-muted"
+                filter === f ? "bg-primary text-primary-foreground" : "bg-muted text-foreground hover:bg-muted"
               }`}
             >
               {f === "all" ? "전체" : f === "scheduled" ? "예정" : f === "in_progress" ? "진행중" : "지연"}
@@ -218,7 +218,7 @@ export default function MaintenanceWidget() {
                 {/* 액션 버튼 */}
                 {schedule.status === "scheduled" && (
                   <div className="mt-3 flex gap-2">
-                    <button className="flex-1 rounded bg-primary px-3 py-1.5 text-xs font-medium text-white hover:bg-primary/90">
+                    <button className="flex-1 rounded bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90">
                       시작
                     </button>
                     <button className="flex-1 rounded bg-muted px-3 py-1.5 text-xs font-medium text-foreground hover:bg-muted/90">
@@ -228,7 +228,7 @@ export default function MaintenanceWidget() {
                 )}
                 {schedule.status === "in_progress" && (
                   <div className="mt-3">
-                    <button className="w-full rounded bg-success px-3 py-1.5 text-xs font-medium text-white hover:bg-success/90">
+                    <button className="w-full rounded bg-success px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-success/90">
                       <Check className="mr-1 inline h-3 w-3" />
                       완료 처리
                     </button>
diff --git a/frontend/components/dashboard/widgets/StatusSummaryWidget.tsx b/frontend/components/dashboard/widgets/StatusSummaryWidget.tsx
index 85592683..a5387ea4 100644
--- a/frontend/components/dashboard/widgets/StatusSummaryWidget.tsx
+++ b/frontend/components/dashboard/widgets/StatusSummaryWidget.tsx
@@ -270,7 +270,7 @@ export default function StatusSummaryWidget({
       red: { border: "border-destructive", dot: "bg-destructive", text: "text-destructive" },
       yellow: { border: "border-warning", dot: "bg-warning", text: "text-warning" },
       orange: { border: "border-warning", dot: "bg-warning", text: "text-warning" },
-      purple: { border: "border-purple-500", dot: "bg-purple-500/100", text: "text-purple-500" },
+      purple: { border: "border-primary", dot: "bg-primary", text: "text-primary" },
       gray: { border: "border-border", dot: "bg-muted-foreground", text: "text-muted-foreground" },
     };
 
diff --git a/frontend/components/dashboard/widgets/TaskWidget.tsx b/frontend/components/dashboard/widgets/TaskWidget.tsx
index 90e7dc4b..aefb1599 100644
--- a/frontend/components/dashboard/widgets/TaskWidget.tsx
+++ b/frontend/components/dashboard/widgets/TaskWidget.tsx
@@ -572,7 +572,7 @@ export default function TaskWidget({ element }: TaskWidgetProps) {
           </div>
           <button
             onClick={() => setShowAddForm(!showAddForm)}
-            className="flex items-center gap-1 rounded-lg bg-primary px-3 py-1.5 text-sm text-white transition-colors hover:bg-primary/90"
+            className="flex items-center gap-1 rounded-lg bg-primary px-3 py-1.5 text-sm text-primary-foreground transition-colors hover:bg-primary/90"
           >
             <Plus className="h-4 w-4" />
             추가
@@ -610,7 +610,7 @@ export default function TaskWidget({ element }: TaskWidgetProps) {
                 key={f}
                 onClick={() => setFilter(f)}
                 className={`rounded px-3 py-1 text-xs font-medium transition-colors ${
-                  filter === f ? "bg-primary text-white" : "bg-muted text-foreground hover:bg-muted"
+                  filter === f ? "bg-primary text-primary-foreground" : "bg-muted text-foreground hover:bg-muted"
                 }`}
               >
                 {f === "all" ? "전체" : f === "pending" ? "대기" : f === "in_progress" ? "진행중" : "완료"}
@@ -672,7 +672,7 @@ export default function TaskWidget({ element }: TaskWidgetProps) {
             <div className="flex gap-2">
               <button
                 onClick={handleAddTask}
-                className="flex-1 rounded bg-primary px-4 py-2 text-sm text-white hover:bg-primary/90"
+                className="flex-1 rounded bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90"
               >
                 추가
               </button>
diff --git a/frontend/components/dashboard/widgets/TodoWidget.tsx b/frontend/components/dashboard/widgets/TodoWidget.tsx
index 2acd337d..1f4b2e53 100644
--- a/frontend/components/dashboard/widgets/TodoWidget.tsx
+++ b/frontend/components/dashboard/widgets/TodoWidget.tsx
@@ -349,7 +349,7 @@ export default function TodoWidget({ element }: TodoWidgetProps) {
           {/* 추가 버튼 - 항상 표시 */}
           <button
             onClick={() => setShowAddForm(!showAddForm)}
-            className="flex items-center gap-1 rounded-lg bg-primary px-3 py-1.5 text-sm text-white transition-colors hover:bg-primary/90"
+            className="flex items-center gap-1 rounded-lg bg-primary px-3 py-1.5 text-sm text-primary-foreground transition-colors hover:bg-primary/90"
             title="할 일 추가"
           >
             <Plus className="h-4 w-4" />
@@ -391,7 +391,7 @@ export default function TodoWidget({ element }: TodoWidgetProps) {
                 onClick={() => setFilter(f)}
                 className={`rounded px-3 py-1 text-xs font-medium transition-colors ${
                   filter === f
-                    ? "bg-primary text-white"
+                    ? "bg-primary text-primary-foreground"
                     : "bg-muted text-foreground hover:bg-muted"
                 }`}
               >
@@ -454,7 +454,7 @@ export default function TodoWidget({ element }: TodoWidgetProps) {
             <div className="flex gap-2">
               <button
                 onClick={handleAddTodo}
-                className="flex-1 rounded bg-primary px-4 py-2 text-sm text-white hover:bg-primary/90"
+                className="flex-1 rounded bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90"
               >
                 추가
               </button>
diff --git a/frontend/components/dashboard/widgets/TransportStatsWidget.tsx b/frontend/components/dashboard/widgets/TransportStatsWidget.tsx
index 668205ed..0734182f 100644
--- a/frontend/components/dashboard/widgets/TransportStatsWidget.tsx
+++ b/frontend/components/dashboard/widgets/TransportStatsWidget.tsx
@@ -265,7 +265,7 @@ export default function TransportStatsWidget({ element, refreshInterval = 60000
           {!element?.dataSource?.query && <div className="mt-2 text-xs text-muted-foreground">쿼리를 설정하세요</div>}
           <button
             onClick={loadData}
-            className="mt-3 rounded-lg bg-primary px-4 py-2 text-sm text-white hover:bg-primary/90"
+            className="mt-3 rounded-lg bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90"
           >
             다시 시도
           </button>
@@ -305,9 +305,9 @@ export default function TransportStatsWidget({ element, refreshInterval = 60000
         </div>
 
         {/* 정시 도착률 */}
-        <div className="rounded-lg border bg-purple-500/10 p-4 text-center">
+        <div className="rounded-lg border bg-primary/10 p-4 text-center">
           <div className="text-sm text-foreground">정시 도착률</div>
-          <div className="mt-2 text-3xl font-bold text-purple-500">
+          <div className="mt-2 text-3xl font-bold text-primary">
             {stats.on_time_rate.toFixed(1)}
             <span className="ml-1 text-lg">%</span>
           </div>
diff --git a/frontend/components/dashboard/widgets/VehicleListWidget.tsx b/frontend/components/dashboard/widgets/VehicleListWidget.tsx
index 640fcc72..df062b45 100644
--- a/frontend/components/dashboard/widgets/VehicleListWidget.tsx
+++ b/frontend/components/dashboard/widgets/VehicleListWidget.tsx
@@ -111,7 +111,7 @@ export default function VehicleListWidget({ element, refreshInterval = 30000 }:
         <button
           onClick={() => setSelectedStatus("all")}
           className={`rounded-md px-3 py-1 text-xs font-medium whitespace-nowrap transition-colors ${
-            selectedStatus === "all" ? "bg-gray-900 text-white" : "bg-background text-foreground hover:bg-muted"
+            selectedStatus === "all" ? "bg-primary text-primary-foreground" : "bg-background text-foreground hover:bg-muted"
           }`}
         >
           전체 ({vehicles.length})
@@ -119,7 +119,7 @@ export default function VehicleListWidget({ element, refreshInterval = 30000 }:
         <button
           onClick={() => setSelectedStatus("active")}
           className={`rounded-md px-3 py-1 text-xs font-medium whitespace-nowrap transition-colors ${
-            selectedStatus === "active" ? "bg-success text-white" : "bg-background text-foreground hover:bg-muted"
+            selectedStatus === "active" ? "bg-success text-primary-foreground" : "bg-background text-foreground hover:bg-muted"
           }`}
         >
           운행 중 ({vehicles.filter((v) => v.status?.toLowerCase() === "active").length})
@@ -127,7 +127,7 @@ export default function VehicleListWidget({ element, refreshInterval = 30000 }:
         <button
           onClick={() => setSelectedStatus("inactive")}
           className={`rounded-md px-3 py-1 text-xs font-medium whitespace-nowrap transition-colors ${
-            selectedStatus === "inactive" ? "bg-warning/100 text-white" : "bg-background text-foreground hover:bg-muted"
+            selectedStatus === "inactive" ? "bg-warning text-primary-foreground" : "bg-background text-foreground hover:bg-muted"
           }`}
         >
           대기 ({vehicles.filter((v) => v.status?.toLowerCase() === "inactive").length})
@@ -135,7 +135,7 @@ export default function VehicleListWidget({ element, refreshInterval = 30000 }:
         <button
           onClick={() => setSelectedStatus("maintenance")}
           className={`rounded-md px-3 py-1 text-xs font-medium whitespace-nowrap transition-colors ${
-            selectedStatus === "maintenance" ? "bg-warning text-white" : "bg-background text-foreground hover:bg-muted"
+            selectedStatus === "maintenance" ? "bg-warning text-primary-foreground" : "bg-background text-foreground hover:bg-muted"
           }`}
         >
           정비 ({vehicles.filter((v) => v.status?.toLowerCase() === "maintenance").length})
@@ -143,7 +143,7 @@ export default function VehicleListWidget({ element, refreshInterval = 30000 }:
         <button
           onClick={() => setSelectedStatus("warning")}
           className={`rounded-md px-3 py-1 text-xs font-medium whitespace-nowrap transition-colors ${
-            selectedStatus === "warning" ? "bg-destructive text-white" : "bg-background text-foreground hover:bg-muted"
+            selectedStatus === "warning" ? "bg-destructive text-primary-foreground" : "bg-background text-foreground hover:bg-muted"
           }`}
         >
           고장 ({vehicles.filter((v) => v.status?.toLowerCase() === "warning").length})
diff --git a/frontend/components/dashboard/widgets/WorkHistoryWidget.tsx b/frontend/components/dashboard/widgets/WorkHistoryWidget.tsx
index c8ffcaf1..0e62abef 100644
--- a/frontend/components/dashboard/widgets/WorkHistoryWidget.tsx
+++ b/frontend/components/dashboard/widgets/WorkHistoryWidget.tsx
@@ -95,7 +95,7 @@ export default function WorkHistoryWidget({ element, refreshInterval = 60000 }:
           {!element.dataSource?.query && <div className="mt-2 text-xs text-muted-foreground">쿼리를 설정하세요</div>}
           <button
             onClick={loadData}
-            className="mt-3 rounded-lg bg-primary px-4 py-2 text-sm text-white hover:bg-primary/90"
+            className="mt-3 rounded-lg bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90"
           >
             다시 시도
           </button>
@@ -134,7 +134,7 @@ export default function WorkHistoryWidget({ element, refreshInterval = 60000 }:
 
         <button
           onClick={loadData}
-          className="ml-auto rounded bg-primary px-3 py-1 text-sm text-white hover:bg-primary/90"
+          className="ml-auto rounded bg-primary px-3 py-1 text-sm text-primary-foreground hover:bg-primary/90"
         >
           🔄 새로고침
         </button>