(김준회) 돌체 관련, 다크모드 지원하도록 개선

- 가능하면 시멘틱 색상 사용(muted, muted-foreground)
- 어려운 컬러는 dark: 변수로 다크모드 클래스 지정

9 files changed, 104 insertions, 108 deletions

diff --git a/lib/vendor-document-list/plant/document-stage-dialogs.tsx b/lib/vendor-document-list/plant/document-stage-dialogs.tsx
index 3811e668..26f6b638 100644
--- a/lib/vendor-document-list/plant/document-stage-dialogs.tsx
+++ b/lib/vendor-document-list/plant/document-stage-dialogs.tsx
@@ -368,8 +368,8 @@ export function AddDocumentDialog({
 
               {/* Dynamic Fields */}
               {selectedTypeConfigs.length > 0 && (
-                <div className="border rounded-lg p-4 bg-blue-50/30">
-                  <Label className="text-sm font-medium text-blue-800 mb-3 block">
+                <div className="border rounded-lg p-4 bg-blue-50/30 dark:bg-blue-950/30">
+                  <Label className="text-sm font-medium text-blue-800 dark:text-blue-200 mb-3 block">
                     Document Number Components
                   </Label>
                   <div className="grid gap-3">
@@ -379,7 +379,7 @@ export function AddDocumentDialog({
                           {config.codeGroup?.description || config.description}
                           {config.required && <span className="text-red-500 ml-1">*</span>}
                           {config.remark && (
-                            <span className="text-xs text-gray-500 ml-2">({config.remark})</span>
+                            <span className="text-xs text-gray-500 dark:text-gray-400 ml-2">({config.remark})</span>
                           )}
                         </Label>
 
@@ -400,7 +400,7 @@ export function AddDocumentDialog({
                             </SelectContent>
                           </Select>
                         ) : config.documentClass ? (
-                          <div className="p-2 bg-gray-100 rounded text-sm">
+                          <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded text-sm">
                             {config.documentClass.code} - {config.documentClass.description}
                           </div>
                         ) : (
@@ -415,9 +415,9 @@ export function AddDocumentDialog({
                   </div>
 
                   {/* Document Number Preview */}
-                  <div className="mt-3 p-2 bg-white border rounded">
-                    <Label className="text-xs text-gray-600">Document Number Preview:</Label>
-                    <div className="font-mono text-sm font-medium text-blue-600">
+                  <div className="mt-3 p-2 bg-white dark:bg-gray-900 border rounded">
+                    <Label className="text-xs text-gray-600 dark:text-gray-400">Document Number Preview:</Label>
+                    <div className="font-mono text-sm font-medium text-blue-600 dark:text-blue-400">
                       {generatePreviewDocNumber()}
                     </div>
                   </div>
@@ -445,7 +445,7 @@ export function AddDocumentDialog({
                   </SelectContent>
                 </Select>
                 {formData.documentClassId && (
-                  <p className="text-xs text-gray-600">
+                  <p className="text-xs text-gray-600 dark:text-gray-400">
                     Options from the selected class will be automatically created as stages.
                   </p>
                 )}
@@ -453,8 +453,8 @@ export function AddDocumentDialog({
 
               {/* Document Class Options with Plan Dates */}
               {documentClassOptions.length > 0 && (
-                <div className="border rounded-lg p-4 bg-green-50/30">
-                  <Label className="text-sm font-medium text-green-800 mb-3 block">
+                <div className="border rounded-lg p-4 bg-green-50/30 dark:bg-green-950/30">
+                  <Label className="text-sm font-medium text-green-800 dark:text-green-200 mb-3 block">
                     Document Class Stages with Plan Dates
                   </Label>
                   <div className="grid gap-3">
@@ -465,11 +465,11 @@ export function AddDocumentDialog({
                             {option.optionValue}
                           </Label>
                           {option.optionCode && (
-                            <p className="text-xs text-gray-500">Code: {option.optionCode}</p>
+                            <p className="text-xs text-gray-500 dark:text-gray-400">Code: {option.optionCode}</p>
                           )}
                         </div>
                         <div className="grid gap-1">
-                          <Label className="text-xs text-gray-600">Plan Date</Label>
+                          <Label className="text-xs text-gray-600 dark:text-gray-400">Plan Date</Label>
                           <Input
                             type="date"
                             value={formData.planDates[option.id] || ""}
@@ -635,7 +635,7 @@ export function EditDocumentDialog({
             {/* Document Number (Read-only) */}
             <div className="grid gap-2">
               <Label>Document Number</Label>
-              <div className="p-2 bg-gray-100 rounded text-sm font-mono">
+              <div className="p-2 bg-gray-100 dark:bg-gray-800 rounded text-sm font-mono">
                 {document?.docNumber}
               </div>
             </div>
@@ -668,8 +668,8 @@ export function EditDocumentDialog({
 
             {/* Current Document Stages with Plan Dates */}
             {document?.allStages && document.allStages.length > 0 && (
-              <div className="border rounded-lg p-4 bg-green-50/30">
-                <Label className="text-sm font-medium text-green-800 mb-3 block">
+              <div className="border rounded-lg p-4 bg-green-50/30 dark:bg-green-950/30">
+                <Label className="text-sm font-medium text-green-800 dark:text-green-200 mb-3 block">
                   Document Stages - Plan Dates
                 </Label>
                 <div className="grid gap-3">
@@ -697,13 +697,13 @@ export function EditDocumentDialog({
                               )}
                             </div>
                             {stage.actualDate && (
-                              <p className="text-xs text-gray-500 mt-1">
+                              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                 완료일: {formatDate(stage.actualDate)}
                               </p>
                             )}
                           </div>
                           <div className="grid gap-1">
-                            <Label className="text-xs text-gray-600">Plan Date</Label>
+                            <Label className="text-xs text-gray-600 dark:text-gray-400">Plan Date</Label>
                             <Input
                               type="date"
                               value={formData.stagePlanDates[stage.id] || ""}
@@ -711,11 +711,11 @@ export function EditDocumentDialog({
                               disabled={!canEditPlanDate}
                               className={cn(
                                 "text-sm",
-                                !canEditPlanDate && "bg-gray-100 cursor-not-allowed"
+                                !canEditPlanDate && "bg-gray-100 dark:bg-gray-800 cursor-not-allowed"
                               )}
                             />
                             {!canEditPlanDate && (
-                              <p className="text-xs text-gray-500">
+                              <p className="text-xs text-gray-500 dark:text-gray-400">
                                 계획 상태일 때만 수정 가능
                               </p>
                             )}
@@ -830,19 +830,19 @@ export function EditStageDialog({
 
         <div className="grid gap-4 py-4">
           {/* 참조 정보 섹션 */}
-          <div className="border rounded-lg p-3 bg-gray-50">
-            <Label className="text-sm font-medium text-gray-700 mb-2 block">
+          <div className="border rounded-lg p-3 bg-gray-50 dark:bg-gray-900">
+            <Label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
               스테이지 정보 (참조용)
             </Label>
             
             <div className="grid grid-cols-2 gap-3 text-sm">
               <div>
-                <Label className="text-xs text-gray-600">스테이지명</Label>
+                <Label className="text-xs text-gray-600 dark:text-gray-400">스테이지명</Label>
                 <div className="font-medium">{currentStage.stageName}</div>
               </div>
               
               <div>
-                <Label className="text-xs text-gray-600">현재 상태</Label>
+                <Label className="text-xs text-gray-600 dark:text-gray-400">현재 상태</Label>
                 <Badge
                   variant={getStatusVariant(currentStage.stageStatus)}
                   className="text-xs"
@@ -852,18 +852,18 @@ export function EditStageDialog({
               </div>
               
               <div>
-                <Label className="text-xs text-gray-600">담당자</Label>
+                <Label className="text-xs text-gray-600 dark:text-gray-400">담당자</Label>
                 <div>{currentStage.assigneeName || "미지정"}</div>
               </div>
               
               <div>
-                <Label className="text-xs text-gray-600">우선순위</Label>
+                <Label className="text-xs text-gray-600 dark:text-gray-400">우선순위</Label>
                 <div>{currentStage.priority || "MEDIUM"}</div>
               </div>
               
               {currentStage.actualDate && (
                 <div className="col-span-2">
-                  <Label className="text-xs text-gray-600">실제 완료일</Label>
+                  <Label className="text-xs text-gray-600 dark:text-gray-400">실제 완료일</Label>
                   <div className="flex items-center gap-1">
                     <CheckCircle className="h-3 w-3 text-green-500" />
                     {formatDate(currentStage.actualDate)}
@@ -892,10 +892,10 @@ export function EditStageDialog({
                 value={formData.planDate}
                 onChange={(e) => setFormData({ ...formData, planDate: e.target.value })}
                 disabled={!canEditPlanDate}
-                className={!canEditPlanDate ? "bg-gray-100" : ""}
+                className={!canEditPlanDate ? "bg-gray-100 dark:bg-gray-800" : ""}
               />
               {!canEditPlanDate && (
-                <p className="text-xs text-gray-500">
+                <p className="text-xs text-gray-500 dark:text-gray-400">
                   계획 날짜는 '계획' 상태일 때만 수정할 수 있습니다.
                 </p>
               )}
@@ -1128,9 +1128,9 @@ export function ExcelImportDialog({
         <div className="flex-1 overflow-y-auto pr-2">
           <div className="grid gap-4 py-4">
             {/* 템플릿 다운로드 섹션 */}
-            <div className="border rounded-lg p-4 bg-blue-50/30">
-              <h4 className="font-medium text-blue-800 mb-2">1. 템플릿 다운로드</h4>
-              <p className="text-sm text-blue-700 mb-3">
+            <div className="border rounded-lg p-4 bg-blue-50/30 dark:bg-blue-950/30">
+              <h4 className="font-medium text-blue-800 dark:text-blue-200 mb-2">1. 템플릿 다운로드</h4>
+              <p className="text-sm text-blue-700 dark:text-blue-300 mb-3">
                 올바른 형식과 드롭다운이 적용된 템플릿을 다운로드하세요.
               </p>
               <Button 
@@ -1162,7 +1162,7 @@ export function ExcelImportDialog({
                   className="file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
                 />
                 {file && (
-                  <p className="text-sm text-gray-600 mt-1">
+                  <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                     선택된 파일: {file.name} ({(file.size / 1024 / 1024).toFixed(2)} MB)
                   </p>
                 )}
@@ -1171,12 +1171,12 @@ export function ExcelImportDialog({
 
             {/* 진행 상태 */}
             {isProcessing && (
-              <div className="border rounded-lg p-4 bg-yellow-50/30">
+              <div className="border rounded-lg p-4 bg-yellow-50/30 dark:bg-yellow-950/30">
                 <div className="flex items-center gap-2 mb-2">
                   <Loader2 className="h-4 w-4 animate-spin text-yellow-600" />
-                  <span className="text-sm font-medium text-yellow-800">처리 중...</span>
+                  <span className="text-sm font-medium text-yellow-800 dark:text-yellow-200">처리 중...</span>
                 </div>
-                <p className="text-sm text-yellow-700 mb-2">{processStep}</p>
+                <p className="text-sm text-yellow-700 dark:text-yellow-300 mb-2">{processStep}</p>
                 <Progress value={progress} className="h-2" />
               </div>
             )}
@@ -1227,9 +1227,9 @@ export function ExcelImportDialog({
             )}
 
             {/* 파일 형식 가이드 */}
-            <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
-              <h4 className="font-medium text-gray-800 mb-2">파일 형식 가이드</h4>
-              <div className="text-sm text-gray-700 space-y-1">
+            <div className="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+              <h4 className="font-medium text-gray-800 dark:text-gray-200 mb-2">파일 형식 가이드</h4>
+              <div className="text-sm text-gray-700 dark:text-gray-300 space-y-1">
                 <p><strong>Documents 시트:</strong></p>
                 <ul className="ml-4 list-disc">
                   <li>Document Number* (문서번호)</li>
@@ -1245,13 +1245,13 @@ export function ExcelImportDialog({
                   <li>Stage Name* (스테이지명 - 드롭다운 선택, 해당 문서클래스에 맞는 스테이지만 선택)</li>
                   <li>Plan Date (계획날짜: YYYY-MM-DD)</li>
                 </ul>
-                <p className="mt-2 text-green-600"><strong>스마트 기능:</strong></p>
-                <ul className="ml-4 list-disc text-green-600">
+                <p className="mt-2 text-green-600 dark:text-green-400"><strong>스마트 기능:</strong></p>
+                <ul className="ml-4 list-disc text-green-600 dark:text-green-400">
                   <li>Document Class는 드롭다운으로 정확한 값만 선택 가능</li>
                   <li>Stage Name도 드롭다운으로 오타 방지</li>
                   <li>"사용 가이드" 시트에서 각 클래스별 사용 가능한 스테이지 확인 가능</li>
                 </ul>
-                <p className="mt-2 text-red-600">* 필수 항목</p>
+                <p className="mt-2 text-red-600 dark:text-red-400">* 필수 항목</p>
               </div>
             </div>
           </div>
diff --git a/lib/vendor-document-list/plant/document-stages-columns.tsx b/lib/vendor-document-list/plant/document-stages-columns.tsx
index d4baf7fb..aee47029 100644
--- a/lib/vendor-document-list/plant/document-stages-columns.tsx
+++ b/lib/vendor-document-list/plant/document-stages-columns.tsx
@@ -93,7 +93,7 @@ const DueDateInfo = ({
 }) => {
   if (isOverdue && daysUntilDue !== null && daysUntilDue < 0) {
     return (
-      <span className={cn("inline-flex items-center gap-1 text-red-600 text-xs", className)}>
+      <span className={cn("inline-flex items-center gap-1 text-red-600 dark:text-red-400 text-xs", className)}>
         <AlertTriangle className="w-3 h-3" />
         {Math.abs(daysUntilDue)}d overdue
       </span>
@@ -102,7 +102,7 @@ const DueDateInfo = ({
 
   if (daysUntilDue === 0) {
     return (
-      <span className={cn("inline-flex items-center gap-1 text-orange-600 text-xs", className)}>
+      <span className={cn("inline-flex items-center gap-1 text-orange-600 dark:text-orange-400 text-xs", className)}>
         <Clock className="w-3 h-3" />
         Due today
       </span>
@@ -111,7 +111,7 @@ const DueDateInfo = ({
 
   if (daysUntilDue && daysUntilDue > 0 && daysUntilDue <= 3) {
     return (
-      <span className={cn("inline-flex items-center gap-1 text-orange-600 text-xs", className)}>
+      <span className={cn("inline-flex items-center gap-1 text-orange-600 dark:text-orange-400 text-xs", className)}>
         <Clock className="w-3 h-3" />
         {daysUntilDue}d left
       </span>
@@ -120,7 +120,7 @@ const DueDateInfo = ({
 
   if (daysUntilDue && daysUntilDue > 0) {
     return (
-      <span className={cn("inline-flex items-center gap-1 text-gray-500 text-xs", className)}>
+      <span className={cn("inline-flex items-center gap-1 text-gray-500 dark:text-gray-400 text-xs", className)}>
         <Calendar className="w-3 h-3" />
         {daysUntilDue}d
       </span>
@@ -128,7 +128,7 @@ const DueDateInfo = ({
   }
 
   return (
-    <span className={cn("inline-flex items-center gap-1 text-green-600 text-xs", className)}>
+    <span className={cn("inline-flex items-center gap-1 text-green-600 dark:text-green-400 text-xs", className)}>
       <CheckCircle className="w-3 h-3" />
       Done
     </span>
@@ -205,9 +205,9 @@ export function getDocumentStagesColumns({
         cell: ({ row }) => {
           const doc = row.original
           return doc.vendorCode ? (
-            <span className="font-mono text-sm font-medium text-blue-600">{doc.vendorCode}</span>
+            <span className="font-mono text-sm font-medium text-blue-600 dark:text-blue-400">{doc.vendorCode}</span>
           ) : (
-            <span className="text-gray-400 text-sm">-</span>
+            <span className="text-gray-400 dark:text-gray-500 text-sm">-</span>
           )
         },
         size: 120,
@@ -227,7 +227,7 @@ export function getDocumentStagesColumns({
           return doc.vendorName ? (
             <span className="text-sm font-medium">{doc.vendorName}</span>
           ) : (
-            <span className="text-gray-400 text-sm">-</span>
+            <span className="text-gray-400 dark:text-gray-500 text-sm">-</span>
           )
         },
         size: 150,
@@ -268,11 +268,11 @@ export function getDocumentStagesColumns({
       const doc = row.original
       return (
         <div className="min-w-0 flex-1">
-          <div className="font-medium text-gray-900 truncate text-sm" title={doc.title}>
+          <div className="font-medium text-gray-900 dark:text-gray-100 truncate text-sm" title={doc.title}>
             {doc.title}
           </div>
           {doc.pic && (
-            <span className="text-xs text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded mt-1 inline-block">
+            <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded mt-1 inline-block">
               PIC: {doc.pic}
             </span>
           )}
@@ -298,9 +298,9 @@ export function getDocumentStagesColumns({
         cell: ({ row }) => {
           const doc = row.original
           return doc.vendorDocNumber ? (
-            <span className="font-mono text-sm text-blue-600">{doc.vendorDocNumber}</span>
+            <span className="font-mono text-sm text-blue-600 dark:text-blue-400">{doc.vendorDocNumber}</span>
           ) : (
-            <span className="text-gray-400 text-sm">-</span>
+            <span className="text-gray-400 dark:text-gray-500 text-sm">-</span>
           )
         },
         size: 120,
@@ -351,7 +351,7 @@ export function getDocumentStagesColumns({
               {getStatusText(doc.currentStageStatus || '')}
             </Badge>
             {doc.currentStageAssigneeName && (
-              <span className="text-xs text-gray-500 flex items-center gap-1">
+              <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
                 <User className="w-3 h-3" />
                 {doc.currentStageAssigneeName}
               </span>
@@ -374,7 +374,7 @@ export function getDocumentStagesColumns({
       ),
       cell: ({ row }) => {
         const doc = row.original
-        if (!doc.currentStagePlanDate) return <span className="text-gray-400">-</span>
+        if (!doc.currentStagePlanDate) return <span className="text-gray-400 dark:text-gray-500">-</span>
 
         return (
           <div className="flex items-center gap-2">
@@ -417,11 +417,11 @@ export function getDocumentStagesColumns({
             )}
             <div className="flex items-center gap-1">
               <Progress value={progress} className="w-12 h-1.5" />
-              <span className="text-xs text-gray-600 min-w-[2rem]">
+              <span className="text-xs text-gray-600 dark:text-gray-400 min-w-[2rem]">
                 {progress}%
               </span>
             </div>
-            <span className="text-xs text-gray-500">
+            <span className="text-xs text-gray-500 dark:text-gray-400">
               ({completed}/{total})
             </span>
           </div>
@@ -441,7 +441,7 @@ export function getDocumentStagesColumns({
         <DataTableColumnHeaderSimple column={column} title="Updated At" />
       ),
       cell: ({ cell }) => (
-        <span className="text-xs text-gray-600">
+        <span className="text-xs text-gray-600 dark:text-gray-400">
           {formatDateTime(cell.getValue() as Date)}
         </span>
       ),
@@ -487,7 +487,7 @@ export function getDocumentStagesColumns({
             icon: Trash2,
             action: () => setRowAction({ row, type: "delete" }),
             show: true,
-            className: "text-red-600",
+            className: "text-red-600 dark:text-red-400",
             shortcut: "⌘⌫"
           }
         ]
diff --git a/lib/vendor-document-list/plant/document-stages-expanded-content.tsx b/lib/vendor-document-list/plant/document-stages-expanded-content.tsx
index eda6f57a..ca5e9c5b 100644
--- a/lib/vendor-document-list/plant/document-stages-expanded-content.tsx
+++ b/lib/vendor-document-list/plant/document-stages-expanded-content.tsx
@@ -76,9 +76,9 @@ export function DocumentStagesExpandedContent({
   const sortedStages = stages.sort((a, b) => a.stageOrder - b.stageOrder)
 
   return (
-    <div className="bg-gray-50 border-t p-3">
+    <div className="bg-gray-50 dark:bg-gray-900 border-t p-3">
       {stages.length === 0 ? (
-        <div className="text-center py-3 text-gray-500 text-sm">
+        <div className="text-center py-3 text-gray-500 dark:text-gray-400 text-sm">
           등록된 스테이지가 없습니다.
         </div>
       ) : (
@@ -94,8 +94,8 @@ export function DocumentStagesExpandedContent({
                 className={cn(
                   "relative p-2 rounded-md border text-xs transition-colors hover:shadow-sm",
                   isCurrentStage 
-                    ? "bg-blue-50 border-blue-200" 
-                    : "bg-white border-gray-200"
+                    ? "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-700" 
+                    : "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700"
                 )}
               >
                 {/* 편집 버튼 - 우측 상단에 절대 위치 */}
@@ -103,7 +103,7 @@ export function DocumentStagesExpandedContent({
                   size="sm"
                   variant="ghost"
                   onClick={() => onEditStage(stage.id)}
-                  className="absolute top-1 right-1 h-5 w-5 p-0 hover:bg-gray-100"
+                  className="absolute top-1 right-1 h-5 w-5 p-0 hover:bg-gray-100 dark:hover:bg-gray-700"
                 >
                   <Edit className="h-3 w-3" />
                 </Button>
@@ -112,11 +112,7 @@ export function DocumentStagesExpandedContent({
                 <div className="flex items-center gap-2 mb-2 pr-6">
                   {/* 스테이지 순서 */}
                 <div 
-                    className="text-white rounded-full min-w-[20px] w-4 h-4 flex items-center justify-center text-xs font-bold flex-shrink-0"
-                    style={{ 
-                      backgroundColor: '#4B5563', 
-                      borderRadius: '50%' 
-                    }}
+                    className="text-white bg-gray-600 dark:bg-gray-500 rounded-full min-w-[20px] w-4 h-4 flex items-center justify-center text-xs font-bold flex-shrink-0"
                   >
                     {index + 1}
                   </div>
@@ -142,7 +138,7 @@ export function DocumentStagesExpandedContent({
                 </div>
 
                 {/* 날짜 정보 */}
-                <div className="space-y-1 text-xs text-gray-600">
+                <div className="space-y-1 text-xs text-gray-600 dark:text-gray-400">
                   {planDate && (
                     <div className="flex items-center gap-1">
                       <Calendar className="h-3 w-3" />
diff --git a/lib/vendor-document-list/plant/document-stages-table.tsx b/lib/vendor-document-list/plant/document-stages-table.tsx
index 8bfae284..3d2ddafd 100644
--- a/lib/vendor-document-list/plant/document-stages-table.tsx
+++ b/lib/vendor-document-list/plant/document-stages-table.tsx
@@ -297,7 +297,7 @@ export function DocumentStagesTable({
             <AlertTriangle className="h-4 w-4 text-red-500" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-red-600">{stats.overdue}</div>
+            <div className="text-2xl font-bold text-red-600 dark:text-red-400">{stats.overdue}</div>
             <p className="text-xs text-muted-foreground">{t('documentList.dashboard.checkImmediately')}</p>
           </CardContent>
         </Card>
@@ -308,7 +308,7 @@ export function DocumentStagesTable({
             <Clock className="h-4 w-4 text-orange-500" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-orange-600">{stats.dueSoon}</div>
+            <div className="text-2xl font-bold text-orange-600 dark:text-orange-400">{stats.dueSoon}</div>
             <p className="text-xs text-muted-foreground">{t('documentList.dashboard.dueInDays')}</p>
           </CardContent>
         </Card>
@@ -319,7 +319,7 @@ export function DocumentStagesTable({
             <Target className="h-4 w-4 text-green-500" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-green-600">{stats.avgProgress}%</div>
+            <div className="text-2xl font-bold text-green-600 dark:text-green-400">{stats.avgProgress}%</div>
             <p className="text-xs text-muted-foreground">{t('documentList.dashboard.overallProgress')}</p>
           </CardContent>
         </Card>
@@ -344,7 +344,7 @@ export function DocumentStagesTable({
         </Badge>
         <Badge
           variant={quickFilter === 'due_soon' ? 'default' : 'outline'}
-          className="cursor-pointer hover:bg-orange-500 hover:text-white whitespace-nowrap"
+          className="cursor-pointer hover:bg-orange-500 hover:text-white dark:hover:bg-orange-600 whitespace-nowrap"
           onClick={() => setQuickFilter('due_soon')}
         >
           <Clock className="w-3 h-3 mr-1" />
@@ -352,7 +352,7 @@ export function DocumentStagesTable({
         </Badge>
         <Badge
           variant={quickFilter === 'in_progress' ? 'default' : 'outline'}
-          className="cursor-pointer hover:bg-blue-500 hover:text-white whitespace-nowrap"
+          className="cursor-pointer hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 whitespace-nowrap"
           onClick={() => setQuickFilter('in_progress')}
         >
           <Users className="w-3 h-3 mr-1" />
@@ -370,7 +370,7 @@ export function DocumentStagesTable({
 
       {/* 메인 테이블 */}
       <div className="space-y-4">
-        <div className="rounded-md border bg-white overflow-hidden">
+        <div className="rounded-md border bg-background overflow-hidden">
           <ExpandableDataTable
             table={table}
             expandable={true}
diff --git a/lib/vendor-document-list/ship/bulk-b4-upload-dialog.tsx b/lib/vendor-document-list/ship/bulk-b4-upload-dialog.tsx
index 65166bd6..db0fa08e 100644
--- a/lib/vendor-document-list/ship/bulk-b4-upload-dialog.tsx
+++ b/lib/vendor-document-list/ship/bulk-b4-upload-dialog.tsx
@@ -366,10 +366,10 @@ export function BulkB4UploadDialog({
                               <Loader2 className="h-4 w-4 animate-spin" />
                             )}
                             {pf.status === 'success' && (
-                              <CheckCircle2 className="h-4 w-4 text-green-500" />
+                              <CheckCircle2 className="h-4 w-4 text-emerald-500 dark:text-emerald-400" />
                             )}
                             {pf.status === 'error' && (
-                              <AlertCircle className="h-4 w-4 text-red-500" />
+                              <AlertCircle className="h-4 w-4 text-destructive" />
                             )}
                             {pf.status === 'ignored' && (
                               <AlertTriangle className="h-4 w-4 text-yellow-500" />
diff --git a/lib/vendor-document-list/ship/enhanced-doc-table-columns.tsx b/lib/vendor-document-list/ship/enhanced-doc-table-columns.tsx
index 8370cd34..096f9b24 100644
--- a/lib/vendor-document-list/ship/enhanced-doc-table-columns.tsx
+++ b/lib/vendor-document-list/ship/enhanced-doc-table-columns.tsx
@@ -37,12 +37,12 @@ interface GetColumnsProps {
 
 // 날짜 표시 컴포넌트 (간단 버전)
 const DateDisplay = ({ date, isSelected = false }: { date: string | null, isSelected?: boolean }) => {
-  if (!date) return <span className="text-gray-400">-</span>
+  if (!date) return <span className="text-muted-foreground">-</span>
   
   return (
     <span className={cn(
       "text-sm",
-      isSelected && "text-blue-600 font-semibold"
+      isSelected && "text-primary font-semibold"
     )}>
       {formatDate(date)}
     </span>
@@ -59,7 +59,7 @@ export function getSimplifiedDocumentColumns({
       id: "select",
       header: ({ table }) => (
         <div className="flex items-center justify-center">
-          <span className="text-xs text-gray-500">Select</span>
+          <span className="text-xs text-muted-foreground">Select</span>
         </div>
       ),
       cell: ({ row }) => {
@@ -180,7 +180,7 @@ export function getSimplifiedDocumentColumns({
         const firstRow = table.getRowModel().rows[0]?.original
         const stageName = firstRow?.firstStageName || "First Stage"
         return (
-          <div className="text-center font-medium text-gray-700">
+          <div className="text-center font-medium text-foreground">
             {stageName}
           </div>
         )
@@ -223,7 +223,7 @@ export function getSimplifiedDocumentColumns({
         const firstRow = table.getRowModel().rows[0]?.original
         const stageName = firstRow?.secondStageName || "Second Stage"
         return (
-          <div className="text-center font-medium text-gray-700">
+          <div className="text-center font-medium text-foreground">
             {stageName}
           </div>
         )
@@ -373,8 +373,8 @@ function DocNumberCell({ doc }: { doc: SimplifiedDocumentsView }) {
       className={cn(
         "font-mono text-sm font-medium cursor-pointer px-2 py-1 rounded transition-colors",
         isSelected 
-          ? "text-blue-600 font-bold bg-blue-50" 
-          : "hover:bg-gray-50"
+          ? "text-primary font-bold bg-primary/10" 
+          : "hover:bg-muted/50"
       )}
       onClick={() => {
         const newSelection = isSelected ? null : doc.documentId;
@@ -393,10 +393,10 @@ function TitleCell({ doc }: { doc: SimplifiedDocumentsView }) {
   return (
     <div 
       className={cn(
-        "font-medium text-gray-900 truncate max-w-[300px] cursor-pointer px-2 py-1 rounded transition-colors",
+        "font-medium text-foreground truncate max-w-[300px] cursor-pointer px-2 py-1 rounded transition-colors",
         isSelected 
-          ? "text-blue-600 font-bold bg-blue-50" 
-          : "hover:bg-gray-50"
+          ? "text-primary font-bold bg-primary/10" 
+          : "hover:bg-muted/50"
       )} 
       title={doc.title}
       onClick={() => {
@@ -413,12 +413,12 @@ function ProjectCodeCell({ projectCode, documentId }: { projectCode: string | nu
   const { selectedDocumentId } = React.useContext(DocumentSelectionContext);
   const isSelected = selectedDocumentId === documentId;
 
-  if (!projectCode) return <span className="text-gray-400">-</span>;
+  if (!projectCode) return <span className="text-muted-foreground">-</span>;
   
   return (
     <span className={cn(
       "text-sm font-medium",
-      isSelected && "text-blue-600 font-bold"
+      isSelected && "text-primary font-bold"
     )}>
       {projectCode}
     </span>
@@ -439,8 +439,8 @@ function FirstStageActualDateCell({ row }: { row: any }) {
   
   return (
     <div className={cn(
-      date ? "text-green-600 font-medium" : "",
-      isSelected && date && "text-green-700 font-bold"
+      date ? "text-emerald-600 dark:text-emerald-400 font-medium" : "",
+      isSelected && date && "text-emerald-700 dark:text-emerald-300 font-bold"
     )}>
       <DateDisplay date={date} isSelected={isSelected && !date} />
       {date && <span className="text-xs block">✓ 완료</span>}
@@ -462,8 +462,8 @@ function SecondStageActualDateCell({ row }: { row: any }) {
   
   return (
     <div className={cn(
-      date ? "text-green-600 font-medium" : "",
-      isSelected && date && "text-green-700 font-bold"
+      date ? "text-emerald-600 dark:text-emerald-400 font-medium" : "",
+      isSelected && date && "text-emerald-700 dark:text-emerald-300 font-bold"
     )}>
       <DateDisplay date={date} isSelected={isSelected && !date} />
       {date && <span className="text-xs block">✓ 완료</span>}
@@ -477,10 +477,10 @@ function AttachmentCountCell({ count, documentId }: { count: number, documentId:
 
   return (
     <div className="flex items-center justify-center gap-1">
-      <FileText className="w-4 h-4 text-gray-400" />
+      <FileText className="w-4 h-4 text-muted-foreground" />
       <span className={cn(
         "text-sm font-medium",
-        isSelected && "text-blue-600 font-bold"
+        isSelected && "text-primary font-bold"
       )}>
         {count}
       </span>
@@ -494,8 +494,8 @@ function UpdatedAtCell({ updatedAt, documentId }: { updatedAt: Date, documentId:
 
   return (
     <span className={cn(
-      "text-sm text-gray-600",
-      isSelected && "text-blue-600 font-semibold"
+      "text-sm text-muted-foreground",
+      isSelected && "text-primary font-semibold"
     )}>
       {formatDateTime(updatedAt)}
     </span>
diff --git a/lib/vendor-document-list/ship/enhanced-documents-table.tsx b/lib/vendor-document-list/ship/enhanced-documents-table.tsx
index 287df755..24ab42fb 100644
--- a/lib/vendor-document-list/ship/enhanced-documents-table.tsx
+++ b/lib/vendor-document-list/ship/enhanced-documents-table.tsx
@@ -26,17 +26,17 @@ const DRAWING_KIND_INFO = {
   B3: {
     title: "B3 Vendor",
     description: "Approval-focused drawings progressing through Approval → Work stages",
-    color: "bg-blue-50 text-blue-700 border-blue-200"
+    color: "bg-primary/10 text-primary border-primary/20"
   },
   B4: {
     title: "B4 GTT", 
     description: "DOLCE-integrated drawings progressing through Pre → Work stages",
-    color: "bg-green-50 text-green-700 border-green-200"
+    color: "bg-emerald-50 dark:bg-emerald-950/20 text-emerald-700 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800"
   },
   B5: {
     title: "B5 FMEA",
     description: "Sequential drawings progressing through First → Second stages", 
-    color: "bg-purple-50 text-purple-700 border-purple-200"
+    color: "bg-purple-50 dark:bg-purple-950/20 text-purple-700 dark:text-purple-400 border-purple-200 dark:border-purple-800"
   }
 } as const
 
diff --git a/lib/vendor-document-list/ship/import-from-dolce-button.tsx b/lib/vendor-document-list/ship/import-from-dolce-button.tsx
index 5e720220..fe7f55c7 100644
--- a/lib/vendor-document-list/ship/import-from-dolce-button.tsx
+++ b/lib/vendor-document-list/ship/import-from-dolce-button.tsx
@@ -375,7 +375,7 @@ export function ImportFromDOLCEButton({
     }
 
     return (
-      <Badge variant="default" className="gap-1 bg-green-500 hover:bg-green-600">
+      <Badge variant="default" className="gap-1 bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700">
         <CheckCircle className="w-3 h-3" />
         {t('dolceImport.status.synchronized')}
       </Badge>
@@ -440,7 +440,7 @@ export function ImportFromDOLCEButton({
             <Button
               variant="outline"
               size="sm"
-              className="flex items-center border-blue-200 hover:bg-blue-50"
+              className="flex items-center border-primary/20 hover:bg-primary/10"
               disabled={isImporting || statusLoading}
             >
               {isImporting ? (
@@ -473,7 +473,7 @@ export function ImportFromDOLCEButton({
 
             {/* 프로젝트 소스 표시 */}
             {allDocuments.length === 0 && vendorProjectIds.length > 0 && (
-              <div className="text-xs text-blue-600 bg-blue-50 p-2 rounded">
+              <div className="text-xs text-primary bg-primary/10 p-2 rounded">
                 {t('dolceImport.descriptions.noDocumentsImportAll')}
               </div>
             )}
diff --git a/lib/vendor-document-list/ship/send-to-shi-button.tsx b/lib/vendor-document-list/ship/send-to-shi-button.tsx
index 87cc6ff5..532aabf5 100644
--- a/lib/vendor-document-list/ship/send-to-shi-button.tsx
+++ b/lib/vendor-document-list/ship/send-to-shi-button.tsx
@@ -231,7 +231,7 @@ export function SendToSHIButton({
 
     if (totalStats.totalSynced > 0) {
       return (
-        <Badge variant="default" className="gap-1 bg-green-500 hover:bg-green-600">
+        <Badge variant="default" className="gap-1 bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700">
           <CheckCircle className="w-3 h-3" />
           {t('shiSync.status.synchronized')}
         </Badge>
@@ -249,7 +249,7 @@ export function SendToSHIButton({
             <Button
               variant="default"
               size="sm"
-              className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700"
+              className="flex items-center gap-2 bg-primary hover:bg-primary/90"
               disabled={isSyncing || totalStats.isLoading || documentsContractIds.length === 0}
             >
               {isSyncing ? (
@@ -332,11 +332,11 @@ export function SendToSHIButton({
                   </div>
                   <div className="text-center">
                     <div className="text-muted-foreground">{t('shiSync.labels.synced')}</div>
-                    <div className="font-medium text-green-600">{t('shiSync.labels.itemCount', { count: totalStats.totalSynced })}</div>
+                    <div className="font-medium text-emerald-600 dark:text-emerald-400">{t('shiSync.labels.itemCount', { count: totalStats.totalSynced })}</div>
                   </div>
                   <div className="text-center">
                     <div className="text-muted-foreground">{t('shiSync.labels.failed')}</div>
-                    <div className="font-medium text-red-600">{t('shiSync.labels.itemCount', { count: totalStats.totalFailed })}</div>
+                    <div className="font-medium text-destructive">{t('shiSync.labels.itemCount', { count: totalStats.totalFailed })}</div>
                   </div>
                 </div>