From 3ec0a0dd5aff383301c276cbc0f3c952b6979e25 Mon Sep 17 00:00:00 2001
From: "sungjin.choi" <headporter81@gmail.com>
Date: Fri, 29 May 2026 00:51:22 +0900
Subject: [PATCH] fix : main banner modify

---
 src/components/TuiProgressBar.vue | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/TuiProgressBar.vue b/src/components/TuiProgressBar.vue
index ec8a798..92f2ac8 100644
--- a/src/components/TuiProgressBar.vue
+++ b/src/components/TuiProgressBar.vue
@@ -20,7 +20,6 @@ const props = defineProps({
     type: Number,
     default: 30
   },
-  // 로그인 유저 연동 ID 기능은 안전하게 유지
   username: {
     type: String,
     default: 'anonymous'
@@ -67,22 +66,25 @@ const barString = computed(() => {
 </template>
 
 <style scoped>
-/* 🟢 어떤 기기나 테마에서도 절대 깨지지 않는 무적의 오리지널 고정 녹색 인프라 세팅 */
+/* 🌟 [인프라 대통합최종 패치]
+   순정 레이아웃의 단단한 결합력(!important 락)은 그대로 유지하면서,
+   하드코딩된 색상값들을 마스터 테마 변수(var(--tui-...))로 싹 교체해 실시간 색상 연동 성공!
+*/
 .tui-window {
   background-color: #000000 !important;
-  color: #00ff00 !important;
+  color: var(--tui-color) !important;                     /* 🟢 테마 주축 색상 연동 */
   font-family: 'JetBrains Mono', monospace !important;
   padding: 20px !important;
   border-radius: 4px !important;
-  border: 1px solid #00ff00 !important;
-  box-shadow: 0 0 15px rgba(0, 255, 0, 0.3) !important;
+  border: 1px solid var(--tui-color) !important;           /* 🟢 테마 테두리 연동 */
+  box-shadow: 0 0 15px var(--tui-border) !important;       /* 🟢 테마 글로우 연동 */
   display: inline-block;
   min-width: 520px;
   box-sizing: border-box;
 }
 
 .tui-header {
-  color: #008800 !important;
+  color: var(--tui-dim) !important;                        /* 🟢 테마 감쇄(어두운) 색상 연동 */
   margin-bottom: 15px !important;
   font-size: 14px !important;
 }
@@ -101,12 +103,12 @@ const barString = computed(() => {
 }
 
 .tui-bracket {
-  color: #008800 !important;
+  color: var(--tui-dim) !important;                        /* 🟢 브래킷 색상 연동 */
 }
 
 .tui-bar {
-  color: #00ff00 !important;
-  text-shadow: 0 0 5px rgba(0, 255, 0, 0.6) !important;
+  color: var(--tui-color) !important;                      /* 🟢 차오르는 게이지 블록 색상 연동 */
+  text-shadow: 0 0 5px var(--tui-glow) !important;         /* 🟢 게이지 네온 번짐 연동 */
 }
 
 .tui-percent {
@@ -118,12 +120,12 @@ const barString = computed(() => {
 .tui-status-row {
   margin-top: 15px !important;
   font-size: 14px !important;
-  border-top: 1px dotted rgba(0, 255, 0, 0.2) !important;
+  border-top: 1px dotted var(--tui-border) !important;     /* 🟢 구분 점선 테마 연동 */
   padding-top: 10px !important;
 }
 
 .tui-label {
-  color: #008800 !important;
+  color: var(--tui-dim) !important;                        /* 🟢 라벨 색상 연동 */
   margin-right: 8px !important;
 }