/* ============================================
   D'LIVE 프로페셔널 선거 테마
   Version: 2.0
   Updated: 2026-01-28
   ============================================ */

/* ----------------------------------------
   1. CSS 변수 정의
   ---------------------------------------- */
:root {
  /* 메인 브랜드 색상 */
  --primary: #1e3a5f;
  --primary-dark: #0f2744;
  --primary-light: #2d4a6f;

  /* 강조 색상 */
  --accent: #c9a227;
  --accent-light: #d4b84a;
  --accent-red: #c53030;

  /* 기존 호환용 (점진적 마이그레이션) */
  --secondary: #0f2744;

  /* 텍스트 색상 */
  --text: #1a202c;
  --text-light: #4a5568;
  --text-muted: #718096;
  --text-inverse: #ffffff;

  /* 배경 색상 */
  --bg: #ffffff;
  --bg-light: #f7f9fc;
  --bg-dark: #eef2f7;
  --bg-primary: #1e3a5f;
  --bg-primary-dark: #0f2744;

  /* 테두리 색상 */
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --border-dark: #cbd5e1;

  /* 상태 색상 */
  --success: #2f855a;
  --success-light: #c6f6d5;
  --warning: #c05621;
  --warning-light: #feebc8;
  --error: #c53030;
  --error-light: #fed7d7;

  /* 그림자 */
  --shadow-sm: 0 1px 2px rgba(30, 58, 95, 0.05);
  --shadow-md: 0 4px 12px rgba(30, 58, 95, 0.08);
  --shadow-lg: 0 8px 24px rgba(30, 58, 95, 0.12);
  --shadow-xl: 0 16px 40px rgba(30, 58, 95, 0.16);

  /* 그라데이션 */
  --gradient-primary: linear-gradient(135deg, #0f2744 0%, #1e3a5f 50%, #2d4a6f 100%);
  --gradient-accent: linear-gradient(135deg, #c9a227 0%, #b8941f 100%);
  --gradient-hero: linear-gradient(135deg, #0f2744 0%, #1e3a5f 100%);

  /* 간격 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* 모서리 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* 트랜지션 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* ----------------------------------------
   2. 브랜드 그라데이션 유틸리티
   ---------------------------------------- */
.brand-gradient {
  background: var(--gradient-primary);
}

.brand-gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.accent-gradient {
  background: var(--gradient-accent);
}

/* ----------------------------------------
   3. 로고 스타일 (기존 선택자 유지)
   ---------------------------------------- */
.logo .apostrophe {
  color: var(--accent);
}

/* ----------------------------------------
   4. 버튼 스타일 (기존 클래스 유지)
   ---------------------------------------- */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--text-inverse);
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  box-shadow: 0 10px 30px rgba(30, 58, 95, 0.35);
  transform: translateY(-1px);
}

.btn-accent {
  background: var(--gradient-accent);
  color: var(--primary-dark);
  border: none;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.3);
}

.btn-accent:hover {
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.4);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-normal);
}

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

/* ----------------------------------------
   5. 서비스 카드 스타일 (기존 클래스 유지)
   ---------------------------------------- */
.service-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  transition: all var(--transition-normal);
}

.service-card:hover {
  transform: translateY(-10px);
  border-color: var(--primary);
  box-shadow: 0 20px 40px rgba(30, 58, 95, 0.2);
}

/* ----------------------------------------
   6. 히어로 섹션 스타일
   ---------------------------------------- */
.hero-section {
  background: var(--gradient-hero);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(201, 162, 39, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,0.03) 0%, transparent 40%);
  pointer-events: none;
}

/* ----------------------------------------
   7. CTA 박스 스타일
   ---------------------------------------- */
.cta-box {
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl) var(--spacing-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.cta-box .highlight {
  color: var(--accent);
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
}

/* ----------------------------------------
   8. 테이블 스타일
   ---------------------------------------- */
.table-professional {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.table-professional thead {
  background: var(--primary);
  color: var(--text-inverse);
}

.table-professional thead th {
  padding: 16px 20px;
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  letter-spacing: 0.5px;
}

.table-professional thead th.highlight {
  background: var(--accent);
  color: var(--primary-dark);
}

.table-professional tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.table-professional tbody tr:nth-child(even) {
  background: var(--bg-light);
}

.table-professional tbody tr:hover {
  background: var(--bg-dark);
}

/* ----------------------------------------
   9. 배지 스타일
   ---------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.badge-primary {
  background: rgba(30, 58, 95, 0.1);
  color: var(--primary);
}

.badge-accent {
  background: var(--accent);
  color: var(--primary-dark);
}

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

/* ----------------------------------------
   10. 반응형 유틸리티
   ---------------------------------------- */
@media (max-width: 768px) {
  :root {
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;
  }

  .section-header h2 {
    font-size: 24px;
  }
}

/* ----------------------------------------
   11. Lucide 아이콘 스타일
   ---------------------------------------- */
[data-lucide] {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

.icon-sm [data-lucide] {
  width: 18px;
  height: 18px;
}

.icon-lg [data-lucide] {
  width: 32px;
  height: 32px;
}

.icon-xl [data-lucide] {
  width: 48px;
  height: 48px;
}

/* 아이콘 박스 */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--primary);
}

.icon-box-primary {
  background: var(--primary);
  border: none;
  color: var(--text-inverse);
}

.icon-box-accent {
  background: var(--gradient-accent);
  border: none;
  color: var(--primary-dark);
}

.icon-box-lg {
  width: 80px;
  height: 80px;
}

.icon-box-xl {
  width: 100px;
  height: 100px;
}

/* ----------------------------------------
   12. 컴포넌트 색상 오버라이드
   ---------------------------------------- */
/* 링크 색상 */
a {
  color: var(--primary);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-light);
}

/* 선택 영역 색상 */
::selection {
  background: var(--primary);
  color: white;
}

::-moz-selection {
  background: var(--primary);
  color: white;
}

/* 스크롤바 커스터마이징 (Webkit 브라우저) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}