/* 🎨 Insight Arena Design System */
/* 스티치 디자인에서 추출한 색상 시스템 */

:root {
  /* Primary Colors - Facebook Blue 계열로 통일 */
  --primary-color: #1877F2;
  --primary-hover: #1459B9;
  --primary-light: #E6F0FF;
  --primary-accent: #5C9EFF;

  /* Light Theme Colors (Default) */
  --background-color: #ffffff;
  --background-secondary: #f8f9fa;
  --card-color: #ffffff;
  --header-bg: #ffffff;
  --input-bg: #f3f4f6;

  /* Light Theme Text Colors */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-gray: #6b7280;

  /* Light Theme Border Colors */
  --border-color: #e5e7eb;
  --border-secondary: #d1d5db;

  /* Status Colors */
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --info-color: #3b82f6;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #4496e9 0%, #13a4ec 100%);
  --gradient-dark: linear-gradient(135deg, #111418 0%, #1a1e23 100%);

  /* Shadows */
  --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-dark: 0 10px 25px rgba(0, 0, 0, 0.3);

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ========================================
     모바일 CSS 리팩토링 변수 (2025-11-24 추가)
     Phase 1: CSS 변수 중앙화
     ======================================== */

  /* Breakpoints - 미디어 쿼리 통일 */
  --breakpoint-xs: 375px;    /* iPhone SE */
  --breakpoint-sm: 640px;    /* 작은 태블릿 */
  --breakpoint-md: 768px;    /* 태블릿 */
  --breakpoint-lg: 1024px;   /* 데스크톱 */
  --breakpoint-xl: 1280px;   /* 큰 화면 */

  /* 터치 타겟 최소 크기 */
  --mobile-touch-min: 44px;      /* iOS HIG 최소 크기 */
  --mobile-touch-ideal: 48px;    /* Android Material 권장 */

  /* 모바일 전용 간격 */
  --mobile-spacing-xs: 0.25rem;  /* 4px */
  --mobile-spacing-sm: 0.5rem;   /* 8px */
  --mobile-spacing-md: 1rem;     /* 16px */
  --mobile-spacing-lg: 1.5rem;   /* 24px */
  --mobile-spacing-xl: 2rem;     /* 32px */

  /* 프로필/아바타 이미지 크기 */
  --avatar-xs: 24px;   /* 댓글 작은 프로필 */
  --avatar-sm: 32px;   /* 예측 목록 프로필 */
  --avatar-md: 40px;   /* 기본 프로필 */
  --avatar-lg: 56px;   /* 프로필 페이지 중형 */
  --avatar-xl: 96px;   /* 프로필 페이지 대형 */

  /* 레벨 배지 크기 */
  --level-badge-xs: 20px;  /* 모바일 작은 배지 */
  --level-badge-sm: 24px;  /* 모바일 기본 배지 */
  --level-badge-md: 32px;  /* 데스크톱 기본 배지 */
  --level-badge-lg: 40px;  /* 데스크톱 큰 배지 */
  --level-badge-xl: 64px;  /* 레벨 상세 페이지 */

  /* 버튼 크기 */
  --btn-height-sm: 40px;  /* 작은 버튼 */
  --btn-height-md: 48px;  /* 기본 버튼 */
  --btn-height-lg: 56px;  /* 큰 버튼 */

  /* 모바일 폰트 크기 */
  --mobile-text-xs: 0.75rem;    /* 12px */
  --mobile-text-sm: 0.875rem;   /* 14px */
  --mobile-text-base: 1rem;     /* 16px - iOS 줌 방지 */
  --mobile-text-lg: 1.125rem;   /* 18px */
  --mobile-text-xl: 1.25rem;    /* 20px */

  /* 안전 영역 (iOS Notch 대응) */
  --safe-area-top: env(safe-area-inset-top, 20px);
  --safe-area-bottom: env(safe-area-inset-bottom, 20px);
  --safe-area-left: env(safe-area-inset-left, 16px);
  --safe-area-right: env(safe-area-inset-right, 16px);

  /* Z-index 계층 */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Base Styles */
body {
  font-family: 'Inter', 'Noto Sans', 'Space Grotesk', sans-serif;
  background-color: var(--background-color);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Smooth transitions for theme switching */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: var(--transition-normal);
  transition-timing-function: ease-in-out;
}

/* Component Base Classes */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background-color: var(--card-color);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: var(--border-secondary);
  border-color: var(--border-secondary);
}

.card {
  background-color: var(--card-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

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

.input-field {
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  padding: var(--space-sm) var(--space-md);
  transition: all var(--transition-fast);
  width: 100%;
}

.input-field:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(68, 150, 233, 0.1);
}

.input-field::placeholder {
  color: var(--text-tertiary);
}

/* Navigation Styles */
.navbar {
  background-color: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-normal);
}

.nav-link {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  font-weight: 500;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
}

.nav-link.primary {
  color: var(--primary-color);
}

/* Status Indicators */
.status-active {
  color: var(--success-color);
}

.status-pending {
  color: var(--warning-color);
}

.status-completed {
  color: var(--info-color);
}

.status-error {
  color: var(--error-color);
}

/* Utility Classes */
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient {
  background: var(--gradient-primary);
}

.bg-dark-gradient {
  background: var(--gradient-dark);
}

/* Animation Classes */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

.animate-slide-in {
  animation: slideIn 0.3s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
  :root {
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
  }

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

/* Dark Theme */
[data-theme="dark"] {
  /* Dark Background Colors */
  --background-color: #111418;
  --background-secondary: #111c22;
  --card-color: #1a1e23;
  --header-bg: #233c48;
  --input-bg: #293038;

  /* Dark Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #9dabb8;
  --text-tertiary: #92b7c9;
  --text-gray: #9ca3af;

  /* Dark Border Colors */
  --border-color: #233c48;
  --border-secondary: #344e5c;

  /* Dark Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-dark: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* Light Theme (Explicit) */
[data-theme="light"] {
  /* Light Background Colors */
  --background-color: #ffffff;
  --background-secondary: #f8f9fa;
  --card-color: #ffffff;
  --header-bg: #ffffff;
  --input-bg: #f3f4f6;

  /* Light Text Colors */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-gray: #6b7280;

  /* Light Border Colors */
  --border-color: #e5e7eb;
  --border-secondary: #d1d5db;

  /* Light Shadows */
  --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-dark: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background-color);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-secondary);
}

/* ============================================ */
/* 다크모드 버튼 가시성 개선 (2025-11-11 추가) */
/* ============================================ */

/* 공통 버튼 스타일 - Tailwind dark: 클래스와 호환 */
.stitch-btn-primary {
  background-color: var(--primary-color);
  color: #ffffff;
}

.stitch-btn-primary:hover {
  background-color: var(--primary-hover);
}

.dark .stitch-btn-primary {
  background-color: var(--primary-color);
  color: #ffffff;
}

.stitch-btn-secondary {
  background-color: #e5e7eb;
  color: #111827;
}

.stitch-btn-secondary:hover {
  background-color: #d1d5db;
}

.dark .stitch-btn-secondary {
  background-color: #374151;
  color: #ffffff;
}

.dark .stitch-btn-secondary:hover {
  background-color: #4b5563;
}

/* 뷰 토글 버튼 */
.view-toggle {
  color: #111827;
  transition: all var(--transition-fast);
}

.view-toggle:hover {
  background-color: #f3f4f6;
}

.dark .view-toggle {
  color: #ffffff;
}

.dark .view-toggle:hover {
  background-color: #374151;
}

/* 카테고리 필터 버튼 */
.category-filter {
  color: #111827;
  transition: all var(--transition-fast);
}

.dark .category-filter {
  color: #ffffff;
}

/* 네비게이션 링크 - 다크모드 강제 적용 */
.dark .nav-link {
  color: #9dabb8;
}

.dark .nav-link:hover,
.dark .nav-link.active {
  color: #ffffff;
}

/* 아이콘 버튼 (햄버거, 다크모드 토글, 알림 등) */
.icon-button {
  color: #111827;
  transition: color var(--transition-fast);
}

.dark .icon-button {
  color: #ffffff;
}

/* Material Icons 다크모드 대응 */
.dark .material-icons {
  color: #ffffff;
}

/* 탭 버튼 */
.tab-button {
  color: #111827;
}

.dark .tab-button {
  color: #ffffff;
}

/* stitch-input 다크모드 - .dark 클래스 방식 */
.dark .stitch-input {
  background-color: #293038 !important;
  border-color: #374151 !important;
  color: #ffffff !important;
}

.dark .stitch-input::placeholder {
  color: #9ca3af !important;
}

/* stitch-input 다크모드 - data-theme 방식 */
[data-theme="dark"] .stitch-input {
  background-color: #293038 !important;
  border-color: #374151 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .stitch-input::placeholder {
  color: #9ca3af !important;
}

/* 모바일 검색 input 다크모드 - 명시적 선택자 */
.dark #search-input-mobile,
.dark input.stitch-input,
[data-theme="dark"] #search-input-mobile,
[data-theme="dark"] input.stitch-input {
  background-color: #293038 !important;
  border-color: #374151 !important;
  color: #ffffff !important;
}

/* 드롭다운/모달 배경 */
.dark .dropdown-menu,
.dark .modal-content {
  background-color: #1a1e23;
  border-color: #233c48;
  color: #ffffff;
}