@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Default Dark Theme (Purple/Blue base) */
    --bg-main: #111827; /* gray-900 like */
    --bg-paper: #1f2937; /* gray-800 like */
    --bg-gradient-start: #1e3a8a; /* blue-900 */
    --bg-gradient-mid: #581c87; /* purple-900 */
    --bg-gradient-end: #312e81; /* indigo-900 */
    
    --text-primary: #f9fafb; /* gray-50 */
    --text-secondary: #9ca3af; /* gray-400 */
    --text-muted: #6b7280; /* gray-500 */
    
    --border-color: rgba(255, 255, 255, 0.1);
    --border-base: #374151; /* gray-700 */

    --color-primary: 59, 130, 246; /* blue-500 (RGB) */
    --color-primary-light: 96, 165, 250; /* blue-400 */
    --color-primary-dark: 37, 99, 235; /* blue-600 */
    
    --color-accent: 139, 92, 246; /* violet-500 */
    
    --glass-bg: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.18);
  }

  .theme-pink {
    /* "PSH_PINK" Theme - Magenta & Pink */
    /* Background: Pinkish base */
    --bg-main: #501025; /* Deep pink/wine */
    --bg-paper: #1f0510; /* Very dark pink */
    --bg-gradient-start: #be185d; /* pink-700 */
    --bg-gradient-mid: #9d174d; /* pink-800 */
    --bg-gradient-end: #831843; /* pink-900 */

    --text-primary: #fce7f3; /* pink-100 */
    --text-secondary: #fbcfe8; /* pink-200 */
    --text-muted: #f9a8d4; /* pink-300 */

    --border-color: rgba(255, 192, 203, 0.4); /* Pink border */
    --border-base: #9d174d; /* pink-800 */

    /* Primary: Magenta (#FF00FF -> 255, 0, 255) */
    --color-primary: 255, 0, 255; /* Magenta */
    --color-primary-light: 255, 105, 180; /* HotPink */
    --color-primary-dark: 199, 21, 133; /* MediumVioletRed */
    
    /* Accent: Pink (#FFC0CB -> 255, 192, 203) */
    --color-accent: 255, 192, 203; /* Pink */
    
    --glass-bg: rgba(255, 0, 255, 0.1);
    --glass-border: rgba(255, 192, 203, 0.4);
  }

  .theme-sky {
    /* "JW_SKY" Theme - Sky Blue & White/Blue */
    --bg-main: #0c4a6e; /* sky-900 */
    --bg-paper: #082f49; /* sky-950 */
    --bg-gradient-start: #38bdf8; /* sky-400 */
    --bg-gradient-mid: #0ea5e9; /* sky-500 */
    --bg-gradient-end: #0284c7; /* sky-600 */

    --text-primary: #f0f9ff; /* sky-50 */
    --text-secondary: #bae6fd; /* sky-200 */
    --text-muted: #7dd3fc; /* sky-300 */

    --border-color: rgba(186, 230, 253, 0.3); /* sky-200 / 0.3 */
    --border-base: #0369a1; /* sky-700 */

    --color-primary: 14, 165, 233; /* sky-500 */
    --color-primary-light: 56, 189, 248; /* sky-400 */
    --color-primary-dark: 2, 132, 199; /* sky-600 */
    
    --color-accent: 255, 255, 255; /* White accent */
    
    --glass-bg: rgba(255, 255, 255, 0.2);
    --glass-border: rgba(255, 255, 255, 0.2);
  }
  
  body {
    background-color: var(--bg-main);
    color: var(--text-primary);
  }
}

.glass-effect {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
}

/* 드롭다운 메뉴용 불투명 배경 */
.glass-effect-solid {
  background: var(--bg-paper);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
}

.gradient-bg {
  background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 드롭다운 스타일 */
select option {
  background-color: var(--bg-paper);
  color: var(--text-primary);
}

select:focus option:checked {
  background-color: rgb(var(--color-primary));
}

select option:hover {
  background-color: var(--bg-gradient-mid);
}
