/* ✅ design-system.css - 한글 기반 모던 디자인 시스템 */

/* ========== 색상 시스템 ========== */
:root {
  /* 주요 브랜드 색상 (하늘색 계열) */
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --primary-800: #075985;
  --primary-900: #0c4a6e;

  /* 헤더 그라디언트 */
  --header-gradient: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%);

  /* 보조 색상 */
  --secondary-50: #f3e5f5;
  --secondary-100: #e1bee7;
  --secondary-200: #ce93d8;
  --secondary-300: #ba68c8;
  --secondary-400: #ab47bc;
  --secondary-500: #9c27b0;
  --secondary-600: #8e24aa;
  --secondary-700: #7b1fa2;
  --secondary-800: #6a1b9a;
  --secondary-900: #4a148c;

  /* 그레이 스케일 */
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;

  /* 상태 색상 */
  --success-50: #e8f5e8;
  --success-500: #4caf50;
  --success-700: #388e3c;
  
  --warning-50: #fff8e1;
  --warning-500: #ff9800;
  --warning-700: #f57c00;
  
  --error-50: #ffebee;
  --error-500: #f44336;
  --error-700: #d32f2f;
  
  --info-50: #e1f5fe;
  --info-500: #03a9f4;
  --info-700: #0288d1;

  /* 따뜻한 중성 색상 (베이지/크림) */
  --warm-50: #fafaf9;   /* 매우 밝은 크림 */
  --warm-100: #f5f5f4;  /* 밝은 크림 */
  --warm-200: #e7e5e4;  /* 베이지 */
  --warm-300: #d6d3d1;  /* 중간 베이지 */
  --warm-400: #a8a29e;  /* 진한 베이지 */
  --warm-500: #78716c;  /* 그레이 베이지 */

  /* 부드러운 작업 상태 색상 (눈이 편한 톤) */
  --status-success-bg: #dcfce7;    /* 부드러운 초록 배경 */
  --status-success-text: #16a34a;  /* 부드러운 초록 텍스트 */
  --status-info-bg: #e0f2fe;       /* 부드러운 하늘색 배경 */
  --status-info-text: #0284c7;     /* 부드러운 하늘색 텍스트 */
  --status-warning-bg: #fef3c7;    /* 부드러운 노랑 배경 */
  --status-warning-text: #ca8a04;  /* 부드러운 노랑 텍스트 */
  --status-error-bg: #fee2e2;      /* 부드러운 빨강 배경 */
  --status-error-text: #dc2626;    /* 부드러운 빨강 텍스트 */
  --status-critical-bg: #fecaca;   /* 진한 빨강 배경 */
  --status-critical-text: #b91c1c; /* 진한 빨강 텍스트 */
  --status-vacation-bg: #fed7aa;   /* 부드러운 주황 배경 */
  --status-vacation-text: #ea580c; /* 부드러운 주황 텍스트 */

  /* 배경 색상 */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* 텍스트 색상 */
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --text-tertiary: #718096;
  --text-inverse: #ffffff;

  /* 경계선 */
  --border-light: #e2e8f0;
  --border-medium: #cbd5e0;
  --border-dark: #a0aec0;

  /* 그림자 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* 반경 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* 폰트 크기 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  /* 폰트 두께 */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* 애니메이션 */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* ========== 기본 리셋 ========== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== 타이포그래피 ========== */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-inverse { color: var(--text-inverse); }

/* ========== 카드 컴포넌트 ========== */
.card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--border-light);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: var(--space-6);
  border-top: 1px solid var(--border-light);
  background: var(--bg-tertiary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ========== 버튼 컴포넌트 ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary-500);
  color: var(--text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--gray-100);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--gray-200);
}

.btn-success {
  background: var(--success-500);
  color: var(--text-inverse);
}

.btn-success:hover:not(:disabled) {
  background: var(--success-700);
}

.btn-warning {
  background: var(--warning-500);
  color: var(--text-inverse);
}

.btn-warning:hover:not(:disabled) {
  background: var(--warning-700);
}

.btn-error {
  background: var(--error-500);
  color: var(--text-inverse);
}

.btn-error:hover:not(:disabled) {
  background: var(--error-700);
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
}

/* ========== 배지 컴포넌트 ========== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-primary {
  background: var(--primary-100);
  color: var(--primary-800);
}

.badge-success {
  background: var(--success-50);
  color: var(--success-700);
}

.badge-warning {
  background: var(--warning-50);
  color: var(--warning-700);
}

.badge-error {
  background: var(--error-50);
  color: var(--error-700);
}

.badge-gray {
  background: var(--gray-100);
  color: var(--gray-700);
}

/* ========== 상태 표시기 ========== */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-right: var(--space-2);
}

.status-dot.active {
  background: var(--success-500);
  box-shadow: 0 0 0 2px var(--success-100);
}

.status-dot.inactive {
  background: var(--gray-400);
}

.status-dot.warning {
  background: var(--warning-500);
  box-shadow: 0 0 0 2px var(--warning-100);
}

.status-dot.error {
  background: var(--error-500);
  box-shadow: 0 0 0 2px var(--error-100);
}

/* ========== 그리드 시스템 ========== */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* ========== 플렉스 유틸리티 ========== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* ========== 간격 유틸리티 ========== */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

/* ========== 반응형 유틸리티 ========== */
@media (max-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:text-sm { font-size: var(--text-sm); }
  .sm\:p-4 { padding: var(--space-4); }
}

@media (max-width: 768px) {
  .md\:hidden { display: none; }
  .md\:flex-col { flex-direction: column; }
}

@media (max-width: 1024px) {
  .lg\:hidden { display: none; }
}

/* ========== 애니메이션 ========== */
.fade-in {
  animation: fadeIn var(--transition-normal) ease-in-out;
}

.slide-up {
  animation: slideUp var(--transition-normal) ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* ========== 로딩 스피너 ========== */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-200);
  border-top: 2px solid var(--primary-500);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}