/* 다크모드 커스텀 색상 (koreamoa.com 참고) */
:root {
  --color-bg-primary: #000000;
  --color-bg-secondary: #0a0a0a;
  --color-bg-card: #1a1a1a;
  --color-border: rgba(75, 85, 99, 0.3);
  --color-text-primary: #f3f4f6;
  --color-text-secondary: #9ca3af;
  --color-accent-blue: #1e3a8a;
  --color-accent-purple: #581c87;
}

/* 커스텀 스크롤바 스타일 */
.scrollbar-custom,
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #475569 transparent;
}

.scrollbar-custom::-webkit-scrollbar,
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-custom::-webkit-scrollbar-track,
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.scrollbar-custom::-webkit-scrollbar-thumb,
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 10px;
  transition: background 0.2s;
}

.scrollbar-custom::-webkit-scrollbar-thumb:hover,
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* 스크롤바 숨김 (호버 시에만 표시) */
.scrollbar-hover {
  scrollbar-width: none;
}

.scrollbar-hover::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-hover::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
  transition: background 0.2s;
}

.scrollbar-hover:hover::-webkit-scrollbar-thumb {
  background: #475569;
}

.scrollbar-hover:hover {
  scrollbar-width: thin;
  scrollbar-color: #475569 transparent;
}

/* 재사용 가능한 컴포넌트 스타일 */
.card {
  @apply bg-gray-900 rounded-lg p-6 border border-gray-800 shadow-lg;
}

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.btn-secondary {
  @apply bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.input-field {
  @apply bg-gray-800 border border-gray-700 text-gray-100 rounded-md px-4 py-2
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.select-field {
  @apply bg-gray-800 border border-gray-700 text-gray-100 rounded-md px-4 py-2
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
         cursor-pointer;
}

/* 그라디언트 텍스트 */
.gradient-text {
  @apply bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent;
}

/* 테이블 스타일 */
.table-header {
  @apply px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider;
}

.table-cell {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-300;
}

.table-row-hover {
  @apply hover:bg-gray-800/50 transition-colors duration-150;
}