From 59f5c5a7edf70406bd0d31aa6ca664db8070dede Mon Sep 17 00:00:00 2001
From: doyeon <dokaykim@gmail.com>
Date: Tue, 21 Oct 2025 09:57:51 +0900
Subject: [PATCH] =?UTF-8?q?UI=20=EC=83=89=EC=83=81=20=EC=B2=B4=EA=B3=84=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC=20=EB=B0=8F=20CSS=20=EB=B3=80=EC=88=98=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CSS 변수 색상 팔레트 확장 (Primary, Secondary, Grayscale 세분화)
- 배경 및 경계선 색상 변수 추가 (bg-primary/secondary/tertiary, border-light/medium/dark)
- 모든 컴포넌트의 하드코딩된 색상값을 CSS 변수로 교체
- 버튼, 카드, Input, Modal, Navigation 컴포넌트 색상 통일
- 일관된 색상 시스템으로 유지보수성 및 확장성 향상

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../uiux/prototype/css/components/buttons.css | 10 ++--
 .../uiux/prototype/css/components/cards.css   | 19 ++++---
 .../uiux/prototype/css/components/inputs.css  | 40 +++++++-------
 .../uiux/prototype/css/components/modals.css  | 34 ++++++------
 .../prototype/css/components/navigation.css   | 20 +++----
 design/uiux/prototype/css/variables.css       | 55 +++++++++++++++++--
 6 files changed, 111 insertions(+), 67 deletions(-)

diff --git a/design/uiux/prototype/css/components/buttons.css b/design/uiux/prototype/css/components/buttons.css
index 894f30a..3699931 100644
--- a/design/uiux/prototype/css/components/buttons.css
+++ b/design/uiux/prototype/css/components/buttons.css
@@ -72,16 +72,16 @@
 }
 
 .btn-secondary:hover:not(:disabled) {
-  background-color: #FFF5F5; /* 5% Red tint */
+  background-color: var(--color-primary-50);
 }
 
 .btn-secondary:active:not(:disabled) {
-  background-color: #FFEBEB; /* 10% Red tint */
+  background-color: var(--color-primary-100);
 }
 
 .btn-secondary:disabled {
   background-color: var(--color-white);
-  border-color: var(--color-gray-300);
+  border-color: var(--border-medium);
   color: var(--color-gray-500);
   cursor: not-allowed;
 }
@@ -97,11 +97,11 @@
 }
 
 .btn-text:hover:not(:disabled) {
-  background-color: #FFF5F5; /* 5% Red tint */
+  background-color: var(--color-primary-50);
 }
 
 .btn-text:active:not(:disabled) {
-  background-color: #FFEBEB; /* 10% Red tint */
+  background-color: var(--color-primary-100);
 }
 
 .btn-text:disabled {
diff --git a/design/uiux/prototype/css/components/cards.css b/design/uiux/prototype/css/components/cards.css
index 8952534..b244da8 100644
--- a/design/uiux/prototype/css/components/cards.css
+++ b/design/uiux/prototype/css/components/cards.css
@@ -11,8 +11,8 @@
    ======================================== */
 
 .card {
-  background-color: var(--color-white);
-  border: 1px solid #E0E0E0;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-light);
   border-radius: var(--radius-m);
   box-shadow: var(--shadow-md);
   padding: var(--spacing-l);
@@ -21,7 +21,7 @@
 
 .card:hover {
   border-color: var(--color-primary);
-  box-shadow: 0 4px 12px rgba(227, 30, 36, 0.12);
+  box-shadow: var(--shadow-lg);
 }
 
 .card-selected {
@@ -34,7 +34,7 @@
    ======================================== */
 
 .event-card {
-  background-color: var(--color-white);
+  background-color: var(--bg-primary);
   border-radius: var(--radius-m);
   box-shadow: var(--shadow-md);
   overflow: hidden;
@@ -88,7 +88,7 @@
    ======================================== */
 
 .stat-card {
-  background-color: var(--color-white);
+  background-color: var(--bg-primary);
   border-radius: var(--radius-l);
   box-shadow: var(--shadow-md);
   padding: var(--spacing-l);
@@ -168,8 +168,8 @@
 
 .ai-card {
   position: relative;
-  background-color: var(--color-white);
-  border: 1px solid #E0E0E0;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-light);
   border-radius: var(--radius-m);
   padding: var(--spacing-l);
   cursor: pointer;
@@ -177,13 +177,14 @@
 }
 
 .ai-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-color: var(--color-primary-light);
+  box-shadow: var(--shadow-lg);
   transform: translateY(-2px);
 }
 
 .ai-card--selected {
   border: 2px solid var(--color-primary);
-  background-color: #FFF5F5;
+  background-color: var(--color-primary-50);
   padding: calc(var(--spacing-l) - 1px);
 }
 
diff --git a/design/uiux/prototype/css/components/inputs.css b/design/uiux/prototype/css/components/inputs.css
index 9663e6a..0f8873f 100644
--- a/design/uiux/prototype/css/components/inputs.css
+++ b/design/uiux/prototype/css/components/inputs.css
@@ -53,9 +53,9 @@
   width: 100%;
   height: var(--input-height);
   padding: var(--spacing-m);
-  border: 1px solid var(--color-gray-300);
+  border: 1px solid var(--border-medium);
   border-radius: var(--radius-s);
-  background-color: var(--color-white);
+  background-color: var(--bg-primary);
   font-family: var(--font-family);
   font-size: var(--font-size-body-large);
   font-weight: var(--font-weight-regular);
@@ -77,8 +77,8 @@
 }
 
 .input:disabled {
-  background-color: var(--color-gray-100);
-  border-color: #E0E0E0;
+  background-color: var(--bg-tertiary);
+  border-color: var(--border-light);
   color: var(--color-gray-500);
   cursor: not-allowed;
 }
@@ -103,9 +103,9 @@
   width: 100%;
   min-height: var(--textarea-min-height);
   padding: var(--spacing-m);
-  border: 1px solid var(--color-gray-300);
+  border: 1px solid var(--border-medium);
   border-radius: var(--radius-s);
-  background-color: var(--color-white);
+  background-color: var(--bg-primary);
   font-family: var(--font-family);
   font-size: var(--font-size-body-medium);
   font-weight: var(--font-weight-regular);
@@ -128,8 +128,8 @@
 }
 
 .textarea:disabled {
-  background-color: var(--color-gray-100);
-  border-color: #E0E0E0;
+  background-color: var(--bg-tertiary);
+  border-color: var(--border-light);
   color: var(--color-gray-500);
   cursor: not-allowed;
   resize: none;
@@ -144,9 +144,9 @@
   height: var(--input-height);
   padding: var(--spacing-m);
   padding-right: 40px;
-  border: 1px solid var(--color-gray-300);
+  border: 1px solid var(--border-medium);
   border-radius: var(--radius-s);
-  background-color: var(--color-white);
+  background-color: var(--bg-primary);
   background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="%239E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
   background-repeat: no-repeat;
   background-position: right 16px center;
@@ -168,8 +168,8 @@
 }
 
 .select:disabled {
-  background-color: var(--color-gray-100);
-  border-color: #E0E0E0;
+  background-color: var(--bg-tertiary);
+  border-color: var(--border-light);
   color: var(--color-gray-500);
   cursor: not-allowed;
 }
@@ -191,9 +191,9 @@
   appearance: none;
   width: 24px;
   height: 24px;
-  border: 2px solid var(--color-gray-300);
+  border: 2px solid var(--border-medium);
   border-radius: var(--radius-xs);
-  background-color: var(--color-white);
+  background-color: var(--bg-primary);
   cursor: pointer;
   position: relative;
   transition: all var(--transition-fast) var(--ease-out);
@@ -223,8 +223,8 @@
 }
 
 .checkbox:disabled {
-  background-color: var(--color-gray-100);
-  border-color: #E0E0E0;
+  background-color: var(--bg-tertiary);
+  border-color: var(--border-light);
   cursor: not-allowed;
 }
 
@@ -251,9 +251,9 @@
   appearance: none;
   width: 24px;
   height: 24px;
-  border: 2px solid var(--color-gray-300);
+  border: 2px solid var(--border-medium);
   border-radius: 50%;
-  background-color: var(--color-white);
+  background-color: var(--bg-primary);
   cursor: pointer;
   position: relative;
   transition: all var(--transition-fast) var(--ease-out);
@@ -282,8 +282,8 @@
 }
 
 .radio:disabled {
-  background-color: var(--color-gray-100);
-  border-color: #E0E0E0;
+  background-color: var(--bg-tertiary);
+  border-color: var(--border-light);
   cursor: not-allowed;
 }
 
diff --git a/design/uiux/prototype/css/components/modals.css b/design/uiux/prototype/css/components/modals.css
index 4d78150..8bc7c25 100644
--- a/design/uiux/prototype/css/components/modals.css
+++ b/design/uiux/prototype/css/components/modals.css
@@ -16,7 +16,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--bg-overlay);
   z-index: var(--z-modal-backdrop);
   display: flex;
   align-items: center;
@@ -30,7 +30,7 @@
    ======================================== */
 
 .modal {
-  background-color: var(--color-white);
+  background-color: var(--bg-primary);
   border-radius: var(--radius-m);
   box-shadow: var(--shadow-xl);
   max-width: 600px;
@@ -62,7 +62,7 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--spacing-l);
-  border-bottom: 1px solid var(--color-gray-300);
+  border-bottom: 1px solid var(--border-light);
 }
 
 .modal__title {
@@ -97,7 +97,7 @@
   justify-content: flex-end;
   gap: var(--spacing-m);
   padding: var(--spacing-l);
-  border-top: 1px solid var(--color-gray-300);
+  border-top: 1px solid var(--border-light);
 }
 
 /* ========================================
@@ -109,9 +109,9 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: var(--color-white);
+  background-color: var(--bg-primary);
   border-radius: var(--radius-l) var(--radius-l) 0 0;
-  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-lg);
   max-height: 90vh;
   display: flex;
   flex-direction: column;
@@ -122,7 +122,7 @@
 .bottom-sheet__handle {
   width: 40px;
   height: 4px;
-  background-color: var(--color-gray-300);
+  background-color: var(--border-medium);
   border-radius: var(--radius-xs);
   margin: var(--spacing-m) auto;
   cursor: grab;
@@ -133,7 +133,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--spacing-l) var(--spacing-l);
-  border-bottom: 1px solid var(--color-gray-300);
+  border-bottom: 1px solid var(--border-light);
 }
 
 .bottom-sheet__title {
@@ -168,7 +168,7 @@
   justify-content: flex-end;
   gap: var(--spacing-m);
   padding: var(--spacing-l);
-  border-top: 1px solid var(--color-gray-300);
+  border-top: 1px solid var(--border-light);
 }
 
 /* ========================================
@@ -247,7 +247,7 @@
    ======================================== */
 
 .dialog {
-  background-color: var(--color-white);
+  background-color: var(--bg-primary);
   border-radius: var(--radius-m);
   box-shadow: var(--shadow-xl);
   max-width: 400px;
@@ -258,7 +258,7 @@
 
 .dialog__header {
   padding: var(--spacing-l);
-  border-bottom: 1px solid var(--color-gray-300);
+  border-bottom: 1px solid var(--border-light);
 }
 
 .dialog__title {
@@ -284,7 +284,7 @@
   justify-content: flex-end;
   gap: var(--spacing-m);
   padding: var(--spacing-l);
-  border-top: 1px solid var(--color-gray-300);
+  border-top: 1px solid var(--border-light);
 }
 
 /* ========================================
@@ -355,8 +355,8 @@
   top: 100%;
   left: 0;
   margin-top: var(--spacing-xs);
-  background-color: var(--color-white);
-  border: 1px solid var(--color-gray-300);
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-light);
   border-radius: var(--radius-s);
   box-shadow: var(--shadow-md);
   min-width: 200px;
@@ -376,15 +376,15 @@
 }
 
 .dropdown__item:hover {
-  background-color: var(--color-gray-100);
+  background-color: var(--bg-tertiary);
 }
 
 .dropdown__item:active {
-  background-color: var(--color-gray-300);
+  background-color: var(--bg-secondary);
 }
 
 .dropdown__divider {
   height: 1px;
-  background-color: var(--color-gray-300);
+  background-color: var(--border-light);
   margin: var(--spacing-xs) 0;
 }
diff --git a/design/uiux/prototype/css/components/navigation.css b/design/uiux/prototype/css/components/navigation.css
index 2c174c9..4828602 100644
--- a/design/uiux/prototype/css/components/navigation.css
+++ b/design/uiux/prototype/css/components/navigation.css
@@ -16,8 +16,8 @@
   left: 0;
   right: 0;
   height: var(--app-bar-height);
-  background-color: var(--color-white);
-  border-bottom: 1px solid var(--color-gray-300);
+  background-color: var(--bg-primary);
+  border-bottom: 1px solid var(--border-light);
   box-shadow: var(--shadow-sm);
   z-index: var(--z-sticky);
 }
@@ -68,8 +68,8 @@
   left: 0;
   right: 0;
   height: var(--bottom-nav-height);
-  background-color: var(--color-white);
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
+  background-color: var(--bg-primary);
+  box-shadow: var(--shadow-md);
   z-index: var(--z-fixed);
 }
 
@@ -128,7 +128,7 @@
 .tab-nav {
   display: flex;
   gap: var(--spacing-s);
-  border-bottom: 1px solid var(--color-gray-300);
+  border-bottom: 1px solid var(--border-light);
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
@@ -194,7 +194,7 @@
 }
 
 .breadcrumb__separator {
-  color: var(--color-gray-300);
+  color: var(--color-gray-400);
 }
 
 .breadcrumb__item--active {
@@ -246,8 +246,8 @@
 
 /* Pending */
 .stepper__step--pending .stepper__circle {
-  background-color: var(--color-gray-100);
-  border: 1px solid var(--color-gray-300);
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-medium);
   color: var(--color-gray-500);
 }
 
@@ -267,7 +267,7 @@
 .stepper__line {
   flex: 1;
   height: 2px;
-  background-color: var(--color-gray-300);
+  background-color: var(--border-medium);
   margin: 0 var(--spacing-s);
 }
 
@@ -282,7 +282,7 @@
 .progress-bar {
   width: 100%;
   height: 48px;
-  background-color: var(--color-gray-100);
+  background-color: var(--bg-tertiary);
   border-radius: var(--radius-xl);
   overflow: hidden;
   position: relative;
diff --git a/design/uiux/prototype/css/variables.css b/design/uiux/prototype/css/variables.css
index b804579..21990bd 100644
--- a/design/uiux/prototype/css/variables.css
+++ b/design/uiux/prototype/css/variables.css
@@ -11,39 +11,82 @@
      Primary Colors (KT Red)
      ======================================== */
   --color-primary: #E31E24;
-  --color-primary-light: #FF4D52;
-  --color-primary-dark: #C71820;
+  --color-primary-light: #FF5A5F;
+  --color-primary-dark: #C01015;
+  --color-primary-50: #FFF5F5;
+  --color-primary-100: #FFE5E6;
+  --color-primary-200: #FFCCCE;
 
   /* ========================================
      Secondary Colors (AI Blue)
      ======================================== */
   --color-secondary: #0066FF;
   --color-secondary-light: #4D94FF;
-  --color-secondary-dark: #004DBF;
+  --color-secondary-dark: #0052CC;
+  --color-secondary-50: #F0F7FF;
+  --color-secondary-100: #E0EFFF;
+  --color-secondary-200: #B8DBFF;
 
   /* ========================================
      Grayscale
      ======================================== */
   --color-black: #1A1A1A;          /* Gray-900 */
+  --color-gray-800: #333333;
   --color-gray-700: #4A4A4A;
+  --color-gray-600: #6B6B6B;
   --color-gray-500: #9E9E9E;
+  --color-gray-400: #BDBDBD;
   --color-gray-300: #D9D9D9;
+  --color-gray-200: #EEEEEE;
   --color-gray-100: #F5F5F5;
-  --color-white: #FFFFFF;          /* Gray-50 */
+  --color-gray-50: #FAFAFA;
+  --color-white: #FFFFFF;
 
   /* ========================================
      Semantic Colors
      ======================================== */
   --color-success: #00C853;
+  --color-success-light: #5EFC82;
+  --color-success-dark: #00A344;
+  --color-success-bg: #E8F5E9;
+
   --color-warning: #FFA000;
-  --color-error: #D32F2F;
+  --color-warning-light: #FFB333;
+  --color-warning-dark: #CC8000;
+  --color-warning-bg: #FFF8E1;
+
+  --color-error: #E31E24;
+  --color-error-light: #FF5A5F;
+  --color-error-dark: #C01015;
+  --color-error-bg: #FFEBEE;
+
   --color-info: #0288D1;
+  --color-info-light: #4FC3F7;
+  --color-info-dark: #01579B;
+  --color-info-bg: #E1F5FE;
 
   /* ========================================
      Gradient
      ======================================== */
-  --gradient-primary: linear-gradient(135deg, #E31E24 0%, #FF4D52 100%);
+  --gradient-primary: linear-gradient(135deg, #E31E24 0%, #FF5A5F 100%);
   --gradient-secondary: linear-gradient(135deg, #0066FF 0%, #4D94FF 100%);
+  --gradient-success: linear-gradient(135deg, #00C853 0%, #5EFC82 100%);
+  --gradient-warning: linear-gradient(135deg, #FFA000 0%, #FFB333 100%);
+
+  /* ========================================
+     Background Colors
+     ======================================== */
+  --bg-primary: #FFFFFF;
+  --bg-secondary: #FAFAFA;
+  --bg-tertiary: #F5F5F5;
+  --bg-overlay: rgba(0, 0, 0, 0.5);
+
+  /* ========================================
+     Border Colors
+     ======================================== */
+  --border-light: #EEEEEE;
+  --border-medium: #D9D9D9;
+  --border-dark: #BDBDBD;
 
   /* ========================================
      Typography - Font Family