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

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

15 files changed, 156 insertions, 160 deletions

diff --git a/components/information/information-button.tsx b/components/information/information-button.tsx
index 1c6d4e7a..2cff96d0 100644
--- a/components/information/information-button.tsx
+++ b/components/information/information-button.tsx
@@ -231,8 +231,8 @@ export function InformationButton({
           <div className="mt-4">

             {isLoading ? (

               <div className="flex items-center justify-center py-12">

-                <Loader2 className="h-6 w-6 animate-spin text-gray-500" />

-                <span className="ml-2 text-gray-500">정보를 불러오는 중...</span>

+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />

+                <span className="ml-2 text-muted-foreground">정보를 불러오는 중...</span>

               </div>

             ) : (

               <div className="space-y-6">

@@ -241,23 +241,23 @@ export function InformationButton({
                   <div className="flex items-center justify-between">

                     <h4 className="font-semibold">공지사항</h4>

                     {notices.length > 0 && (

-                      <span className="text-xs text-gray-500">{notices.length}개</span>

+                      <span className="text-xs text-muted-foreground">{notices.length}개</span>

                     )}

                   </div>

                   {notices.length > 0 ? (

-                    <div className="max-h-60 overflow-y-auto border rounded-lg bg-gray-50 p-2">

+                    <div className="max-h-60 overflow-y-auto border rounded-lg bg-muted/50 p-2">

                       <div className="space-y-2">

                         {notices.map((notice) => (

                           <div

                             key={notice.id}

-                            className="p-3 bg-white border rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"

+                            className="p-3 bg-white border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors"

                             onClick={() => handleNoticeClick(notice)}

                           >

                             <div className="space-y-1">

                               <h5 className="font-medium text-sm line-clamp-2">

                                 {notice.title}

                               </h5>

-                              <div className="flex items-center gap-3 text-xs text-gray-500">

+                              <div className="flex items-center gap-3 text-xs text-muted-foreground">

                                 <span>{formatDate(notice.createdAt, "KR")}</span>

                                 {notice.authorName && (

                                   <span>{notice.authorName}</span>

@@ -269,8 +269,8 @@ export function InformationButton({
                       </div>

                     </div>

                   ) : (

-                    <div className="bg-gray-50 border rounded-lg p-4">

-                      <div className="text-center text-gray-500">

+                    <div className="bg-muted/50 border rounded-lg p-4">

+                      <div className="text-center text-muted-foreground">

                         공지사항이 없습니다

                       </div>

                     </div>

@@ -293,13 +293,13 @@ export function InformationButton({
                       </Button>

                     )}

                   </div>

-                  <div className="bg-gray-50 border rounded-lg p-4">

+                  <div className="bg-muted/50 border rounded-lg p-4">

                     {information?.informationContent ? (

-                      <div className="text-sm text-gray-600 whitespace-pre-wrap max-h-40 overflow-y-auto">

+                      <div className="text-sm text-muted-foreground whitespace-pre-wrap max-h-40 overflow-y-auto">

                         {information.informationContent}

                       </div>

                     ) : (

-                      <div className="text-center text-gray-500">

+                      <div className="text-center text-muted-foreground">

                         안내사항이 없습니다

                       </div>

                     )}

@@ -311,10 +311,10 @@ export function InformationButton({
                   <div className="flex items-center justify-between">

                     <h4 className="font-semibold">첨부파일</h4>

                     {information?.attachments && information.attachments.length > 0 && (

-                      <span className="text-xs text-gray-500">{information.attachments.length}개</span>

+                      <span className="text-xs text-muted-foreground">{information.attachments.length}개</span>

                     )}

                   </div>

-                  <div className="bg-gray-50 border rounded-lg p-4">

+                  <div className="bg-muted/50 border rounded-lg p-4">

                     {information?.attachments && information.attachments.length > 0 ? (

                       <div className="space-y-3">

                         {information.attachments.map((attachment) => (

@@ -330,7 +330,7 @@ export function InformationButton({
                               

                               </div>

                               {attachment.fileSize && (

-                                <div className="text-xs text-gray-500 mt-1">

+                                <div className="text-xs text-muted-foreground mt-1">

                                   {prettyBytes(Number(attachment.fileSize))}

                                 </div>

                               )}

@@ -362,7 +362,7 @@ export function InformationButton({
                         ))}

                       </div>

                     ) : (

-                      <div className="text-center text-gray-500">

+                      <div className="text-center text-muted-foreground">

                         첨부파일이 없습니다

                       </div>

                     )}

diff --git a/components/information/information-client.tsx b/components/information/information-client.tsx
index e2d273e5..48bb683d 100644
--- a/components/information/information-client.tsx
+++ b/components/information/information-client.tsx
@@ -261,7 +261,7 @@ export function InformationClient({ initialData = [] }: InformationClientProps)
       <div className="flex items-center justify-between gap-4">

         <div className="flex items-center gap-4">

           <div className="relative flex-1 max-w-md">

-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />

+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />

             <Input

               placeholder="페이지명이나 경로로 검색..."

               value={searchQuery}

@@ -354,7 +354,7 @@ export function InformationClient({ initialData = [] }: InformationClientProps)
               </TableRow>

             ) : filteredAndSortedInformations.length === 0 ? (

               <TableRow>

-                <TableCell colSpan={7} className="text-center py-8 text-gray-500">

+                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">

                   정보가 없습니다.

                 </TableCell>

               </TableRow>

@@ -376,7 +376,7 @@ export function InformationClient({ initialData = [] }: InformationClientProps)
                   </TableCell>

                   <TableCell>

                     <div 

-                      className="max-w-[300px] text-sm text-gray-600 line-clamp-2"

+                      className="max-w-[300px] text-sm text-muted-foreground line-clamp-2"

                       dangerouslySetInnerHTML={{ 

                         __html: information.informationContent?.substring(0, 100) + '...' || '' 

                       }}

diff --git a/components/ship-vendor-document/add-attachment-dialog.tsx b/components/ship-vendor-document/add-attachment-dialog.tsx
index 8c5e17c8..6765bcf5 100644
--- a/components/ship-vendor-document/add-attachment-dialog.tsx
+++ b/components/ship-vendor-document/add-attachment-dialog.tsx
@@ -135,16 +135,16 @@ function FileUploadArea({
   return (
     <div className="space-y-4">
       <div
-        className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-gray-400 transition-colors"
+        className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer hover:border-border transition-colors"
         onDrop={handleDrop}
         onDragOver={handleDragOver}
         onClick={() => fileInputRef.current?.click()}
       >
-        <Paperclip className="mx-auto h-12 w-12 text-gray-400 mb-4" />
-        <p className="text-sm text-gray-600 mb-2">
+        <Paperclip className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+        <p className="text-sm text-muted-foreground mb-2">
           Drag files to add here or click to select
         </p>
-        <p className="text-xs text-gray-500">
+        <p className="text-xs text-muted-foreground">
           Supports PDF, Word, Excel, Image, Text, ZIP, CAD files (DWG, DXF, STEP, STL, IGES) (max 1GB)
         </p>
         <p className="text-xs text-orange-600 mt-1">
@@ -167,15 +167,15 @@ function FileUploadArea({
             {files.map((file, index) => (
               <div
                 key={index}
-                className="flex items-center justify-between p-2 bg-gray-50 rounded border"
+                className="flex items-center justify-between p-2 bg-muted/50 rounded border"
               >
                 <div className="flex items-center space-x-2 flex-1">
-                  <FileText className="h-4 w-4 text-gray-500" />
+                  <FileText className="h-4 w-4 text-muted-foreground" />
                   <div className="flex-1 min-w-0">
                     <p className="text-sm font-medium truncate" title={file.name}>
                       {file.name}
                     </p>
-                    <p className="text-xs text-gray-500">
+                    <p className="text-xs text-muted-foreground">
                       {formatFileSize(file.size)}
                     </p>
                   </div>
diff --git a/components/ship-vendor-document/edit-revision-dialog.tsx b/components/ship-vendor-document/edit-revision-dialog.tsx
index 313a27bc..2b8735e7 100644
--- a/components/ship-vendor-document/edit-revision-dialog.tsx
+++ b/components/ship-vendor-document/edit-revision-dialog.tsx
@@ -190,12 +190,12 @@ function RevisionInfoDisplay({ revision }: { revision: RevisionInfo }) {
       case 'APPROVED': return 'bg-green-100 text-green-800'
       case 'UPLOADED': return 'bg-blue-100 text-blue-800'
       case 'REJECTED': return 'bg-red-100 text-red-800'
-      default: return 'bg-gray-100 text-gray-800'
+      default: return 'bg-muted text-muted-foreground'
     }
   }
 
   return (
-    <div className="space-y-3 p-4 bg-gray-50 rounded-lg border">
+    <div className="space-y-3 p-4 bg-muted/50 rounded-lg border">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <Badge variant="outline" className="text-base font-mono">
@@ -211,7 +211,7 @@ function RevisionInfoDisplay({ revision }: { revision: RevisionInfo }) {
           )}
         </div>
         
-        <div className="flex items-center gap-2 text-sm text-gray-600">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
           <FileText className="h-4 w-4" />
           <span>{revision.attachments?.length || 0} file(s)</span>
           {processedCount > 0 && (
@@ -224,11 +224,11 @@ function RevisionInfoDisplay({ revision }: { revision: RevisionInfo }) {
 
       <div className="grid grid-cols-2 gap-4 text-sm">
         <div>
-          <span className="text-gray-500">Uploader:</span>
+          <span className="text-muted-foreground">Uploader:</span>
           <span className="ml-2 font-medium">{revision.uploaderName || '-'}</span>
         </div>
         <div>
-          <span className="text-gray-500">Upload Date:</span>
+          <span className="text-muted-foreground">Upload Date:</span>
           <span className="ml-2">
             {revision.uploadedAt 
               ? new Date(revision.uploadedAt).toLocaleDateString()
@@ -240,7 +240,7 @@ function RevisionInfoDisplay({ revision }: { revision: RevisionInfo }) {
 
       {revision.comment && (
         <div className="pt-2 border-t">
-          <span className="text-gray-500 text-sm">Current Comment:</span>
+          <span className="text-muted-foreground text-sm">Current Comment:</span>
           <p className="mt-1 text-sm bg-white p-2 rounded border">
             {revision.comment}
           </p>
@@ -577,10 +577,10 @@ export function EditRevisionDialog({
                       {revision.attachments.map((file, index) => (
                         <div
                           key={file.id}
-                          className="flex items-center justify-between p-2 bg-gray-50 rounded text-sm"
+                          className="flex items-center justify-between p-2 bg-muted/50 rounded text-sm"
                         >
                           <div className="flex items-center gap-2 flex-1 min-w-0">
-                            <FileText className="h-4 w-4 text-gray-500 flex-shrink-0" />
+                            <FileText className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                             <span className="truncate" title={file.fileName}>
                               {file.fileName}
                             </span>
@@ -667,7 +667,7 @@ export function EditRevisionDialog({
                   </div>
                 </div>
 
-                <div className="space-y-3 text-sm text-gray-600">
+                <div className="space-y-3 text-sm text-muted-foreground">
                   <p>This action will permanently delete:</p>
                   <ul className="list-disc list-inside space-y-1 ml-4">
                     <li>Revision metadata and settings</li>
diff --git a/components/ship-vendor-document/new-revision-dialog.tsx b/components/ship-vendor-document/new-revision-dialog.tsx
index 4fe4de98..1ffcf630 100644
--- a/components/ship-vendor-document/new-revision-dialog.tsx
+++ b/components/ship-vendor-document/new-revision-dialog.tsx
@@ -195,16 +195,16 @@ function FileUploadArea({
   return (
     <div className="space-y-4">
       <div
-        className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-gray-400 transition-colors"
+        className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer hover:border-border transition-colors"
         onDrop={handleDrop}
         onDragOver={handleDragOver}
         onClick={() => fileInputRef.current?.click()}
       >
-        <Upload className="mx-auto h-12 w-12 text-gray-400 mb-4" />
-        <p className="text-sm text-gray-600 mb-2">
+        <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+        <p className="text-sm text-muted-foreground mb-2">
           Drag files here or click to select
         </p>
-        <p className="text-xs text-gray-500">
+        <p className="text-xs text-muted-foreground">
           Supports PDF, Word, Excel, Image, Text, ZIP files (max 1GB)
         </p>
         <p className="text-xs text-orange-600 mt-1">
@@ -227,15 +227,15 @@ function FileUploadArea({
             {files.map((file, index) => (
               <div
                 key={index}
-                className="flex items-center justify-between p-2 bg-gray-50 rounded border"
+                className="flex items-center justify-between p-2 bg-muted/50 rounded border"
               >
                 <div className="flex items-center space-x-2 flex-1">
-                  <FileText className="h-4 w-4 text-gray-500" />
+                  <FileText className="h-4 w-4 text-muted-foreground" />
                   <div className="flex-1 min-w-0">
                     <p className="text-sm font-medium truncate" title={file.name}>
                       {file.name}
                     </p>
-                    <p className="text-xs text-gray-500">
+                    <p className="text-xs text-muted-foreground">
                       {formatFileSize(file.size)}
                     </p>
                   </div>
diff --git a/components/ship-vendor-document/user-vendor-document-table-container.tsx b/components/ship-vendor-document/user-vendor-document-table-container.tsx
index c9118cd0..7fac34a9 100644
--- a/components/ship-vendor-document/user-vendor-document-table-container.tsx
+++ b/components/ship-vendor-document/user-vendor-document-table-container.tsx
@@ -290,7 +290,7 @@ function RevisionTable({
                         {revision.usageType ? (
                           revision.usageType
                         ) : (
-                          <span className="text-gray-400 text-xs">-</span>
+                          <span className="text-muted-foreground text-xs">-</span>
                         )}
                       </span>
                     </TableCell>
@@ -312,12 +312,12 @@ function RevisionTable({
                     <TableCell className="py-1 px-2">
                       {revision.comment ? (
                         <div className="max-w-24">
-                          <p className="text-xs text-gray-700 bg-gray-50 p-1 rounded truncate" title={revision.comment}>
+                          <p className="text-xs text-foreground bg-muted/50 p-1 rounded truncate" title={revision.comment}>
                             {revision.comment}
                           </p>
                         </div>
                       ) : (
-                        <span className="text-gray-400 text-xs">-</span>
+                        <span className="text-muted-foreground text-xs">-</span>
                       )}
                     </TableCell>
                     <TableCell>
@@ -332,7 +332,7 @@ function RevisionTable({
                         <span>{revision.attachments.length}</span>
                         {/* ✅ 처리된 파일 수 표시 */}
                         {processStatus === 'partially-processed' && (
-                          <span className="text-xs text-gray-500">
+                          <span className="text-xs text-muted-foreground">
                             ({revision.attachments.filter(att => 
                               att.dolceFilePath && att.dolceFilePath.trim() !== ''
                             ).length} processed)
@@ -363,7 +363,7 @@ function RevisionTable({
                           className={`h-8 px-2 ${
                             canEdit 
                               ? 'text-blue-600 hover:text-blue-700 hover:bg-blue-50' 
-                              : 'text-gray-400 cursor-not-allowed'
+                              : 'text-muted-foreground cursor-not-allowed'
                           }`}
                           disabled={!canEdit}
                           title={
@@ -610,7 +610,7 @@ function AttachmentTable({
                           className={`h-8 px-2 ${
                             canDeleteFile(file) 
                               ? 'text-red-600 hover:text-red-700 hover:bg-red-50' 
-                              : 'text-gray-400 cursor-not-allowed'
+                              : 'text-muted-foreground cursor-not-allowed'
                           }`}
                           disabled={!canDeleteFile(file) || deletingFileId === file.id}
                           title={
@@ -1225,16 +1225,16 @@ function SelectedDocumentInfo() {
   }
 
   return (
-    <div className="flex flex-wrap items-center gap-3 rounded-lg bg-gray-50 p-4">
+    <div className="flex flex-wrap items-center gap-3 rounded-lg bg-muted/50 p-4">
       <div className="flex items-center gap-2">
         <Badge variant="secondary" className="text-sm">
           Document: {doc.docNumber}
         </Badge>
-        <span className="max-w-[300px] truncate text-sm font-medium text-gray-700">
+        <span className="max-w-[300px] truncate text-sm font-medium text-foreground">
           {doc.title}
         </span>
       </div>
-      <div className="flex items-center gap-2 text-sm text-gray-600">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
         <span>•</span>
         <span>Total {totalRevisions} revisions</span>
         {selectedRevision && (
@@ -1302,8 +1302,8 @@ export function UserVendorDocumentDisplay({
       <Card>
         <CardContent className="flex items-center justify-center py-8">
           <div className="text-center">
-            <AlertCircle className="mx-auto mb-2 h-8 w-8 text-gray-400" />
-            <p className="text-gray-600">Unable to load data.</p>
+            <AlertCircle className="mx-auto mb-2 h-8 w-8 text-muted-foreground" />
+            <p className="text-muted-foreground">Unable to load data.</p>
           </div>
         </CardContent>
       </Card>
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>