From 1de5c24dc952f49faaaa98654f2407e010088500 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 2 Apr 2026 18:04:07 +0900
Subject: [PATCH] Merge branch 'main' of https://g.wace.me/jskim/vexplor_dev
 into jskim-node

---
 frontend/app/globals.css | 513 +++++++++++++++++++++++++++++----------
 1 file changed, 384 insertions(+), 129 deletions(-)

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index f2978a19..db6c6984 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -410,7 +410,9 @@ select {
   border-radius: 4px !important;
   color: hsl(210 15% 55%) !important;
   opacity: 0.6;
-  transition: opacity 0.15s, background 0.15s;
+  transition:
+    opacity 0.15s,
+    background 0.15s;
 }
 [data-sonner-toaster] [data-sonner-toast] [data-close-button]:hover {
   background: hsl(220 20% 24%) !important;
@@ -508,10 +510,10 @@ select {
   font-family: "Gaegu", cursive;
 }
 
-/* ===== 전체 폰트 사이즈 16px 통일 (버튼 제외) ===== */
+/* ===== 전체 폰트 사이즈 16px 통일 (버튼 제외) =====
 body *:not(button, [role="button"], .kpi-dynamic-font) {
   font-size: 16px !important;
-}
+} */
 
 body button *,
 body [role="button"] * {
@@ -545,11 +547,18 @@ body span.messenger-time {
 
 /* ===== 카드 펄스 도트 애니메이션 ===== */
 @keyframes screen-card-pulse {
-  0%, 100% { opacity: 0; transform: scale(1); }
-  50% { opacity: 0.35; transform: scale(2); }
+  0%,
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.35;
+    transform: scale(2);
+  }
 }
 .screen-card-pulse-dot::after {
-  content: '';
+  content: "";
   position: absolute;
   inset: -3px;
   border-radius: 50%;
@@ -574,9 +583,18 @@ body span.messenger-time {
 
 /* ===== 모달 필수 입력 검증 ===== */
 @keyframes validationShake {
-  0%, 100% { transform: translateX(0); }
-  20%, 60% { transform: translateX(-4px); }
-  40%, 80% { transform: translateX(4px); }
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20%,
+  60% {
+    transform: translateX(-4px);
+  }
+  40%,
+  80% {
+    transform: translateX(4px);
+  }
 }
 
 /* 흔들림 애니메이션 (일회성) */
@@ -589,7 +607,6 @@ body span.messenger-time {
   border-color: hsl(var(--destructive)) !important;
 }
 
-
 /* 채번 세그먼트 포커스 스타일 (shadcn Input과 동일한 3단 구조) */
 .numbering-segment:focus-within {
   box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);
@@ -621,160 +638,398 @@ body span.messenger-time {
 /* 개별 컴포넌트 수정 없이, 이 한 곳에서 전체 프로젝트 커버 */
 
 /* --- 1. 배경색: white/gray → 시맨틱 토큰 --- */
-.dark .bg-white { background-color: hsl(var(--card)) !important; }
-.dark .bg-gray-50 { background-color: hsl(var(--muted)) !important; }
-.dark .bg-gray-100 { background-color: hsl(var(--muted)) !important; }
-.dark .bg-gray-200 { background-color: hsl(var(--accent)) !important; }
+.dark .bg-white {
+  background-color: hsl(var(--card)) !important;
+}
+.dark .bg-gray-50 {
+  background-color: hsl(var(--muted)) !important;
+}
+.dark .bg-gray-100 {
+  background-color: hsl(var(--muted)) !important;
+}
+.dark .bg-gray-200 {
+  background-color: hsl(var(--accent)) !important;
+}
 
 /* --- 2. 텍스트: gray → 시맨틱 토큰 --- */
-.dark .text-gray-400 { color: hsl(var(--muted-foreground)) !important; }
-.dark .text-gray-500 { color: hsl(var(--muted-foreground)) !important; }
-.dark .text-gray-600 { color: hsl(var(--foreground) / 0.7) !important; }
-.dark .text-gray-700 { color: hsl(var(--foreground) / 0.8) !important; }
-.dark .text-gray-800 { color: hsl(var(--foreground) / 0.9) !important; }
-.dark .text-gray-900 { color: hsl(var(--foreground)) !important; }
+.dark .text-gray-400 {
+  color: hsl(var(--muted-foreground)) !important;
+}
+.dark .text-gray-500 {
+  color: hsl(var(--muted-foreground)) !important;
+}
+.dark .text-gray-600 {
+  color: hsl(var(--foreground) / 0.7) !important;
+}
+.dark .text-gray-700 {
+  color: hsl(var(--foreground) / 0.8) !important;
+}
+.dark .text-gray-800 {
+  color: hsl(var(--foreground) / 0.9) !important;
+}
+.dark .text-gray-900 {
+  color: hsl(var(--foreground)) !important;
+}
 
 /* --- 3. 보더: gray → 시맨틱 토큰 --- */
-.dark .border-gray-100 { border-color: hsl(var(--border)) !important; }
-.dark .border-gray-200 { border-color: hsl(var(--border)) !important; }
-.dark .border-gray-300 { border-color: hsl(var(--border)) !important; }
-.dark .divide-gray-200 > * + * { border-color: hsl(var(--border)) !important; }
+.dark .border-gray-100 {
+  border-color: hsl(var(--border)) !important;
+}
+.dark .border-gray-200 {
+  border-color: hsl(var(--border)) !important;
+}
+.dark .border-gray-300 {
+  border-color: hsl(var(--border)) !important;
+}
+.dark .divide-gray-200 > * + * {
+  border-color: hsl(var(--border)) !important;
+}
 
 /* --- 4. 호버: gray → 시맨틱 토큰 --- */
-.dark .hover\:bg-gray-50:hover { background-color: hsl(var(--muted)) !important; }
-.dark .hover\:bg-gray-100:hover { background-color: hsl(var(--accent)) !important; }
-.dark .hover\:bg-gray-200:hover { background-color: hsl(var(--accent)) !important; }
+.dark .hover\:bg-gray-50:hover {
+  background-color: hsl(var(--muted)) !important;
+}
+.dark .hover\:bg-gray-100:hover {
+  background-color: hsl(var(--accent)) !important;
+}
+.dark .hover\:bg-gray-200:hover {
+  background-color: hsl(var(--accent)) !important;
+}
 
 /* --- 5. Emerald (성공/완료 상태) --- */
-.dark .bg-emerald-50 { background-color: hsl(142 40% 12%) !important; }
-.dark .bg-emerald-100 { background-color: hsl(142 40% 15%) !important; }
-.dark .text-emerald-600 { color: hsl(142 70% 55%) !important; }
-.dark .text-emerald-700 { color: hsl(142 70% 50%) !important; }
-.dark .text-emerald-800 { color: hsl(142 70% 60%) !important; }
-.dark .text-emerald-900 { color: hsl(142 70% 65%) !important; }
-.dark .border-emerald-200 { border-color: hsl(142 40% 25%) !important; }
-.dark .border-emerald-300 { border-color: hsl(142 40% 30%) !important; }
-.dark .ring-emerald-200 { --tw-ring-color: hsl(142 40% 25%) !important; }
+.dark .bg-emerald-50 {
+  background-color: hsl(142 40% 12%) !important;
+}
+.dark .bg-emerald-100 {
+  background-color: hsl(142 40% 15%) !important;
+}
+.dark .text-emerald-600 {
+  color: hsl(142 70% 55%) !important;
+}
+.dark .text-emerald-700 {
+  color: hsl(142 70% 50%) !important;
+}
+.dark .text-emerald-800 {
+  color: hsl(142 70% 60%) !important;
+}
+.dark .text-emerald-900 {
+  color: hsl(142 70% 65%) !important;
+}
+.dark .border-emerald-200 {
+  border-color: hsl(142 40% 25%) !important;
+}
+.dark .border-emerald-300 {
+  border-color: hsl(142 40% 30%) !important;
+}
+.dark .ring-emerald-200 {
+  --tw-ring-color: hsl(142 40% 25%) !important;
+}
 
 /* --- 6. Amber/Yellow (경고/주의 상태) --- */
-.dark .bg-amber-50 { background-color: hsl(38 40% 12%) !important; }
-.dark .bg-amber-100 { background-color: hsl(38 40% 15%) !important; }
-.dark .bg-yellow-50 { background-color: hsl(48 40% 12%) !important; }
-.dark .bg-yellow-100 { background-color: hsl(48 40% 15%) !important; }
-.dark .text-amber-600 { color: hsl(38 90% 58%) !important; }
-.dark .text-amber-700 { color: hsl(38 90% 55%) !important; }
-.dark .text-amber-800 { color: hsl(38 90% 60%) !important; }
-.dark .text-amber-900 { color: hsl(38 90% 65%) !important; }
-.dark .text-yellow-600 { color: hsl(48 90% 55%) !important; }
-.dark .text-yellow-700 { color: hsl(48 90% 50%) !important; }
-.dark .text-yellow-800 { color: hsl(48 90% 60%) !important; }
-.dark .border-amber-200 { border-color: hsl(38 40% 25%) !important; }
-.dark .border-amber-300 { border-color: hsl(38 40% 30%) !important; }
-.dark .border-yellow-200 { border-color: hsl(48 40% 25%) !important; }
-.dark .ring-amber-200 { --tw-ring-color: hsl(38 40% 25%) !important; }
+.dark .bg-amber-50 {
+  background-color: hsl(38 40% 12%) !important;
+}
+.dark .bg-amber-100 {
+  background-color: hsl(38 40% 15%) !important;
+}
+.dark .bg-yellow-50 {
+  background-color: hsl(48 40% 12%) !important;
+}
+.dark .bg-yellow-100 {
+  background-color: hsl(48 40% 15%) !important;
+}
+.dark .text-amber-600 {
+  color: hsl(38 90% 58%) !important;
+}
+.dark .text-amber-700 {
+  color: hsl(38 90% 55%) !important;
+}
+.dark .text-amber-800 {
+  color: hsl(38 90% 60%) !important;
+}
+.dark .text-amber-900 {
+  color: hsl(38 90% 65%) !important;
+}
+.dark .text-yellow-600 {
+  color: hsl(48 90% 55%) !important;
+}
+.dark .text-yellow-700 {
+  color: hsl(48 90% 50%) !important;
+}
+.dark .text-yellow-800 {
+  color: hsl(48 90% 60%) !important;
+}
+.dark .border-amber-200 {
+  border-color: hsl(38 40% 25%) !important;
+}
+.dark .border-amber-300 {
+  border-color: hsl(38 40% 30%) !important;
+}
+.dark .border-yellow-200 {
+  border-color: hsl(48 40% 25%) !important;
+}
+.dark .ring-amber-200 {
+  --tw-ring-color: hsl(38 40% 25%) !important;
+}
 
 /* --- 7. Blue (정보/프라이머리 상태) --- */
-.dark .bg-blue-50 { background-color: hsl(217 40% 12%) !important; }
-.dark .bg-blue-100 { background-color: hsl(217 40% 15%) !important; }
-.dark .text-blue-600 { color: hsl(217 90% 65%) !important; }
-.dark .text-blue-700 { color: hsl(217 90% 60%) !important; }
-.dark .text-blue-800 { color: hsl(217 90% 65%) !important; }
-.dark .border-blue-200 { border-color: hsl(217 40% 25%) !important; }
-.dark .ring-blue-200 { --tw-ring-color: hsl(217 40% 25%) !important; }
+.dark .bg-blue-50 {
+  background-color: hsl(217 40% 12%) !important;
+}
+.dark .bg-blue-100 {
+  background-color: hsl(217 40% 15%) !important;
+}
+.dark .text-blue-600 {
+  color: hsl(217 90% 65%) !important;
+}
+.dark .text-blue-700 {
+  color: hsl(217 90% 60%) !important;
+}
+.dark .text-blue-800 {
+  color: hsl(217 90% 65%) !important;
+}
+.dark .border-blue-200 {
+  border-color: hsl(217 40% 25%) !important;
+}
+.dark .ring-blue-200 {
+  --tw-ring-color: hsl(217 40% 25%) !important;
+}
 
 /* --- 8. Red (에러/삭제 상태) --- */
-.dark .bg-red-50 { background-color: hsl(0 40% 12%) !important; }
-.dark .bg-red-100 { background-color: hsl(0 40% 15%) !important; }
-.dark .text-red-600 { color: hsl(0 75% 60%) !important; }
-.dark .text-red-700 { color: hsl(0 75% 55%) !important; }
-.dark .text-red-800 { color: hsl(0 75% 60%) !important; }
-.dark .border-red-200 { border-color: hsl(0 40% 25%) !important; }
-.dark .ring-red-200 { --tw-ring-color: hsl(0 40% 25%) !important; }
+.dark .bg-red-50 {
+  background-color: hsl(0 40% 12%) !important;
+}
+.dark .bg-red-100 {
+  background-color: hsl(0 40% 15%) !important;
+}
+.dark .text-red-600 {
+  color: hsl(0 75% 60%) !important;
+}
+.dark .text-red-700 {
+  color: hsl(0 75% 55%) !important;
+}
+.dark .text-red-800 {
+  color: hsl(0 75% 60%) !important;
+}
+.dark .border-red-200 {
+  border-color: hsl(0 40% 25%) !important;
+}
+.dark .ring-red-200 {
+  --tw-ring-color: hsl(0 40% 25%) !important;
+}
 
 /* --- 9. Green (성공 - emerald 변형) --- */
-.dark .bg-green-50 { background-color: hsl(142 40% 12%) !important; }
-.dark .bg-green-100 { background-color: hsl(142 40% 15%) !important; }
-.dark .text-green-600 { color: hsl(142 70% 55%) !important; }
-.dark .text-green-700 { color: hsl(142 70% 50%) !important; }
-.dark .border-green-200 { border-color: hsl(142 40% 25%) !important; }
+.dark .bg-green-50 {
+  background-color: hsl(142 40% 12%) !important;
+}
+.dark .bg-green-100 {
+  background-color: hsl(142 40% 15%) !important;
+}
+.dark .text-green-600 {
+  color: hsl(142 70% 55%) !important;
+}
+.dark .text-green-700 {
+  color: hsl(142 70% 50%) !important;
+}
+.dark .border-green-200 {
+  border-color: hsl(142 40% 25%) !important;
+}
 
 /* --- 10. Slate (gray 변형) --- */
-.dark .bg-slate-50 { background-color: hsl(var(--muted)) !important; }
-.dark .bg-slate-100 { background-color: hsl(var(--muted)) !important; }
-.dark .text-slate-500 { color: hsl(var(--muted-foreground)) !important; }
-.dark .text-slate-600 { color: hsl(var(--foreground) / 0.7) !important; }
-.dark .text-slate-700 { color: hsl(var(--foreground) / 0.8) !important; }
-.dark .border-slate-200 { border-color: hsl(var(--border)) !important; }
+.dark .bg-slate-50 {
+  background-color: hsl(var(--muted)) !important;
+}
+.dark .bg-slate-100 {
+  background-color: hsl(var(--muted)) !important;
+}
+.dark .text-slate-500 {
+  color: hsl(var(--muted-foreground)) !important;
+}
+.dark .text-slate-600 {
+  color: hsl(var(--foreground) / 0.7) !important;
+}
+.dark .text-slate-700 {
+  color: hsl(var(--foreground) / 0.8) !important;
+}
+.dark .border-slate-200 {
+  border-color: hsl(var(--border)) !important;
+}
 
 /* --- 11. bg-white opacity 변형 --- */
-.dark .bg-white\/30 { background-color: hsl(var(--card) / 0.3) !important; }
-.dark .bg-white\/50 { background-color: hsl(var(--card) / 0.5) !important; }
-.dark .bg-white\/80 { background-color: hsl(var(--card) / 0.8) !important; }
-.dark .bg-white\/90 { background-color: hsl(var(--card) / 0.9) !important; }
-.dark .hover\:bg-white:hover { background-color: hsl(var(--card)) !important; }
+.dark .bg-white\/30 {
+  background-color: hsl(var(--card) / 0.3) !important;
+}
+.dark .bg-white\/50 {
+  background-color: hsl(var(--card) / 0.5) !important;
+}
+.dark .bg-white\/80 {
+  background-color: hsl(var(--card) / 0.8) !important;
+}
+.dark .bg-white\/90 {
+  background-color: hsl(var(--card) / 0.9) !important;
+}
+.dark .hover\:bg-white:hover {
+  background-color: hsl(var(--card)) !important;
+}
 
 /* --- 12. text-black → foreground --- */
-.dark .text-black { color: hsl(var(--foreground)) !important; }
+.dark .text-black {
+  color: hsl(var(--foreground)) !important;
+}
 
 /* --- 13. bg/text/border - purple (관리 UI) --- */
-.dark .bg-purple-50 { background-color: hsl(270 40% 12%) !important; }
-.dark .bg-purple-100 { background-color: hsl(270 40% 15%) !important; }
-.dark .bg-purple-200 { background-color: hsl(270 40% 20%) !important; }
-.dark .text-purple-500 { color: hsl(270 70% 60%) !important; }
-.dark .text-purple-600 { color: hsl(270 70% 55%) !important; }
-.dark .text-purple-700 { color: hsl(270 70% 50%) !important; }
-.dark .border-purple-200 { border-color: hsl(270 40% 25%) !important; }
-.dark .border-purple-300 { border-color: hsl(270 40% 30%) !important; }
+.dark .bg-purple-50 {
+  background-color: hsl(270 40% 12%) !important;
+}
+.dark .bg-purple-100 {
+  background-color: hsl(270 40% 15%) !important;
+}
+.dark .bg-purple-200 {
+  background-color: hsl(270 40% 20%) !important;
+}
+.dark .text-purple-500 {
+  color: hsl(270 70% 60%) !important;
+}
+.dark .text-purple-600 {
+  color: hsl(270 70% 55%) !important;
+}
+.dark .text-purple-700 {
+  color: hsl(270 70% 50%) !important;
+}
+.dark .border-purple-200 {
+  border-color: hsl(270 40% 25%) !important;
+}
+.dark .border-purple-300 {
+  border-color: hsl(270 40% 30%) !important;
+}
 
 /* --- 14. bg/text/border - indigo --- */
-.dark .bg-indigo-50 { background-color: hsl(231 40% 12%) !important; }
-.dark .bg-indigo-100 { background-color: hsl(231 40% 15%) !important; }
-.dark .text-indigo-600 { color: hsl(231 70% 60%) !important; }
-.dark .text-indigo-700 { color: hsl(231 70% 55%) !important; }
-.dark .border-indigo-200 { border-color: hsl(231 40% 25%) !important; }
+.dark .bg-indigo-50 {
+  background-color: hsl(231 40% 12%) !important;
+}
+.dark .bg-indigo-100 {
+  background-color: hsl(231 40% 15%) !important;
+}
+.dark .text-indigo-600 {
+  color: hsl(231 70% 60%) !important;
+}
+.dark .text-indigo-700 {
+  color: hsl(231 70% 55%) !important;
+}
+.dark .border-indigo-200 {
+  border-color: hsl(231 40% 25%) !important;
+}
 
 /* --- 15. bg/text - pink/rose (상태 뱃지) --- */
-.dark .bg-pink-50 { background-color: hsl(330 40% 12%) !important; }
-.dark .bg-pink-100 { background-color: hsl(330 40% 15%) !important; }
-.dark .text-pink-600 { color: hsl(330 70% 60%) !important; }
-.dark .text-pink-700 { color: hsl(330 70% 55%) !important; }
-.dark .bg-rose-50 { background-color: hsl(350 40% 12%) !important; }
-.dark .bg-rose-100 { background-color: hsl(350 40% 15%) !important; }
-.dark .text-rose-600 { color: hsl(350 70% 60%) !important; }
-.dark .text-rose-700 { color: hsl(350 70% 55%) !important; }
+.dark .bg-pink-50 {
+  background-color: hsl(330 40% 12%) !important;
+}
+.dark .bg-pink-100 {
+  background-color: hsl(330 40% 15%) !important;
+}
+.dark .text-pink-600 {
+  color: hsl(330 70% 60%) !important;
+}
+.dark .text-pink-700 {
+  color: hsl(330 70% 55%) !important;
+}
+.dark .bg-rose-50 {
+  background-color: hsl(350 40% 12%) !important;
+}
+.dark .bg-rose-100 {
+  background-color: hsl(350 40% 15%) !important;
+}
+.dark .text-rose-600 {
+  color: hsl(350 70% 60%) !important;
+}
+.dark .text-rose-700 {
+  color: hsl(350 70% 55%) !important;
+}
 
 /* --- 16. bg/text - cyan/teal (정보/상태) --- */
-.dark .bg-cyan-50 { background-color: hsl(187 40% 12%) !important; }
-.dark .bg-cyan-100 { background-color: hsl(187 40% 15%) !important; }
-.dark .text-cyan-600 { color: hsl(187 70% 55%) !important; }
-.dark .text-cyan-700 { color: hsl(187 70% 50%) !important; }
-.dark .bg-teal-50 { background-color: hsl(162 40% 12%) !important; }
-.dark .bg-teal-100 { background-color: hsl(162 40% 15%) !important; }
-.dark .text-teal-600 { color: hsl(162 70% 55%) !important; }
-.dark .text-teal-700 { color: hsl(162 70% 50%) !important; }
+.dark .bg-cyan-50 {
+  background-color: hsl(187 40% 12%) !important;
+}
+.dark .bg-cyan-100 {
+  background-color: hsl(187 40% 15%) !important;
+}
+.dark .text-cyan-600 {
+  color: hsl(187 70% 55%) !important;
+}
+.dark .text-cyan-700 {
+  color: hsl(187 70% 50%) !important;
+}
+.dark .bg-teal-50 {
+  background-color: hsl(162 40% 12%) !important;
+}
+.dark .bg-teal-100 {
+  background-color: hsl(162 40% 15%) !important;
+}
+.dark .text-teal-600 {
+  color: hsl(162 70% 55%) !important;
+}
+.dark .text-teal-700 {
+  color: hsl(162 70% 50%) !important;
+}
 
 /* --- 17. bg/text - orange (경고 변형) --- */
-.dark .bg-orange-50 { background-color: hsl(25 40% 12%) !important; }
-.dark .bg-orange-100 { background-color: hsl(25 40% 15%) !important; }
-.dark .bg-orange-200 { background-color: hsl(25 40% 20%) !important; }
-.dark .text-orange-600 { color: hsl(25 90% 65%) !important; }
-.dark .text-orange-700 { color: hsl(25 90% 70%) !important; }
-.dark .border-orange-200 { border-color: hsl(25 40% 25%) !important; }
-.dark .border-orange-300 { border-color: hsl(25 40% 30%) !important; }
+.dark .bg-orange-50 {
+  background-color: hsl(25 40% 12%) !important;
+}
+.dark .bg-orange-100 {
+  background-color: hsl(25 40% 15%) !important;
+}
+.dark .bg-orange-200 {
+  background-color: hsl(25 40% 20%) !important;
+}
+.dark .text-orange-600 {
+  color: hsl(25 90% 65%) !important;
+}
+.dark .text-orange-700 {
+  color: hsl(25 90% 70%) !important;
+}
+.dark .border-orange-200 {
+  border-color: hsl(25 40% 25%) !important;
+}
+.dark .border-orange-300 {
+  border-color: hsl(25 40% 30%) !important;
+}
 
 /* --- 18. bg/text/border - violet (필터/관계 표시) --- */
-.dark .bg-violet-50 { background-color: hsl(263 40% 12%) !important; }
-.dark .bg-violet-100 { background-color: hsl(263 40% 18%) !important; }
-.dark .bg-violet-200 { background-color: hsl(263 40% 22%) !important; }
-.dark .text-violet-500 { color: hsl(263 80% 70%) !important; }
-.dark .text-violet-600 { color: hsl(263 80% 65%) !important; }
-.dark .text-violet-700 { color: hsl(263 80% 72%) !important; }
-.dark .border-violet-200 { border-color: hsl(263 40% 30%) !important; }
-.dark .border-violet-300 { border-color: hsl(263 40% 35%) !important; }
+.dark .bg-violet-50 {
+  background-color: hsl(263 40% 12%) !important;
+}
+.dark .bg-violet-100 {
+  background-color: hsl(263 40% 18%) !important;
+}
+.dark .bg-violet-200 {
+  background-color: hsl(263 40% 22%) !important;
+}
+.dark .text-violet-500 {
+  color: hsl(263 80% 70%) !important;
+}
+.dark .text-violet-600 {
+  color: hsl(263 80% 65%) !important;
+}
+.dark .text-violet-700 {
+  color: hsl(263 80% 72%) !important;
+}
+.dark .border-violet-200 {
+  border-color: hsl(263 40% 30%) !important;
+}
+.dark .border-violet-300 {
+  border-color: hsl(263 40% 35%) !important;
+}
 
 /* --- 19. bg/text/border - amber (조인/경고) --- */
-.dark .bg-amber-200 { background-color: hsl(38 40% 20%) !important; }
-.dark .text-amber-500 { color: hsl(38 90% 60%) !important; }
-.dark .text-amber-600 { color: hsl(38 90% 65%) !important; }
+.dark .bg-amber-200 {
+  background-color: hsl(38 40% 20%) !important;
+}
+.dark .text-amber-500 {
+  color: hsl(38 90% 60%) !important;
+}
+.dark .text-amber-600 {
+  color: hsl(38 90% 65%) !important;
+}
 
 /* ===== End Dark Mode Compatibility Layer ===== */