/* EduFellow Theme System - 메뉴별 특화 색상 시스템 */

:root {
  /* === SITE BASE THEME (Green) === */
  /* 전체 사이트 기본 색상 - 녹색 계열 */
  --site-base-50: #ecfdf5;
  --site-base-100: #d1fae5;
  --site-base-200: #a7f3d0;
  --site-base-300: #6ee7b7;
  --site-base-400: #34d399;
  --site-base-500: #10b981;
  --site-base-600: #059669;
  --site-base-700: #047857;
  --site-base-800: #065f46;
  --site-base-900: #064e3b;

  /* === MENU-SPECIFIC COLORS === */
  /* 연수신청 전용 색상 - Blue 계열 */
  --menu-course-50: #eff6ff;
  --menu-course-100: #dbeafe;
  --menu-course-200: #bfdbfe;
  --menu-course-300: #93c5fd;
  --menu-course-400: #60a5fa;
  --menu-course-500: #3b82f6;
  --menu-course-600: #2563eb;
  --menu-course-700: #1d4ed8;
  --menu-course-800: #1e40af;
  --menu-course-900: #1e3a8a;

  /* 지식나눔 전용 색상 - Green 계열 (사이트 기본 색상과 동일) */
  --menu-share-50: #ecfdf5;
  --menu-share-100: #d1fae5;
  --menu-share-200: #a7f3d0;
  --menu-share-300: #6ee7b7;
  --menu-share-400: #34d399;
  --menu-share-500: #10b981;
  --menu-share-600: #059669;
  --menu-share-700: #047857;
  --menu-share-800: #065f46;
  --menu-share-900: #064e3b;

  /* 나의강의실 전용 색상 - Orange 계열 */
  --menu-classroom-50: #fff7ed;
  --menu-classroom-100: #ffedd5;
  --menu-classroom-200: #fed7aa;
  --menu-classroom-300: #fdba74;
  --menu-classroom-400: #fb923c;
  --menu-classroom-500: #f97316;
  --menu-classroom-600: #ea580c;
  --menu-classroom-700: #c2410c;
  --menu-classroom-800: #9a3412;
  --menu-classroom-900: #7c2d12;

  /* 나머지 페이지들 전용 색상 - Light Green 계열 (연녹색) */
  --menu-support-50: #f0fdf4;
  --menu-support-100: #dcfce7;
  --menu-support-200: #bbf7d0;
  --menu-support-300: #86efac;
  --menu-support-400: #4ade80;
  --menu-support-500: #22c55e;
  --menu-support-600: #16a34a;
  --menu-support-700: #15803d;
  --menu-support-800: #166534;
  --menu-support-900: #14532d;

  /* === UTILITY COLORS === */
  /* 경고/알림 색상 */
  --theme-warning-50: #fffbeb;
  --theme-warning-100: #fef3c7;
  --theme-warning-200: #fde68a;
  --theme-warning-300: #fcd34d;
  --theme-warning-400: #fbbf24;
  --theme-warning-500: #f59e0b;
  --theme-warning-600: #d97706;
  --theme-warning-700: #b45309;
  --theme-warning-800: #92400e;
  --theme-warning-900: #78350f;

  /* 에러/위험 색상 */
  --theme-danger-50: #fef2f2;
  --theme-danger-100: #fee2e2;
  --theme-danger-200: #fecaca;
  --theme-danger-300: #fca5a5;
  --theme-danger-400: #f87171;
  --theme-danger-500: #ef4444;
  --theme-danger-600: #dc2626;
  --theme-danger-700: #b91c1c;
  --theme-danger-800: #991b1b;
  --theme-danger-900: #7f1d1d;

  /* === NEUTRAL COLORS === */
  --theme-gray-50: #f8fafc;
  --theme-gray-100: #f1f5f9;
  --theme-gray-200: #e2e8f0;
  --theme-gray-300: #cbd5e1;
  --theme-gray-400: #94a3b8;
  --theme-gray-500: #64748b;
  --theme-gray-600: #475569;
  --theme-gray-700: #334155;
  --theme-gray-800: #1e293b;
  --theme-gray-900: #0f172a;

  /* === GRADIENT DEFINITIONS === */
  /* 사이트 기본 그라데이션 */
  --gradient-base: linear-gradient(135deg, var(--site-base-500), var(--site-base-600));
  --gradient-base-hover: linear-gradient(135deg, var(--site-base-600), var(--site-base-700));
  
  /* 메뉴별 특화 그라데이션 */
  --gradient-course: linear-gradient(135deg, var(--menu-course-500), var(--menu-course-600));
  --gradient-course-hover: linear-gradient(135deg, var(--menu-course-600), var(--menu-course-700));
  
  --gradient-share: linear-gradient(135deg, var(--menu-share-500), var(--menu-share-600));
  --gradient-share-hover: linear-gradient(135deg, var(--menu-share-600), var(--menu-share-700));
  
  --gradient-classroom: linear-gradient(135deg, var(--menu-classroom-500), var(--menu-classroom-600));
  --gradient-classroom-hover: linear-gradient(135deg, var(--menu-classroom-600), var(--menu-classroom-700));
  
  --gradient-support: linear-gradient(135deg, var(--menu-support-500), var(--menu-support-600));
  --gradient-support-hover: linear-gradient(135deg, var(--menu-support-600), var(--menu-support-700));
  
  /* 히어로 섹션 그라데이션 */
  --gradient-hero-base: linear-gradient(135deg, var(--theme-gray-900), var(--site-base-900), var(--site-base-800));
  --gradient-hero-course: linear-gradient(135deg, var(--theme-gray-900), var(--menu-course-900), var(--menu-course-800));
  --gradient-hero-share: linear-gradient(135deg, var(--theme-gray-900), var(--menu-share-900), var(--menu-share-800));
  --gradient-hero-classroom: linear-gradient(135deg, var(--theme-gray-900), var(--menu-classroom-900), var(--menu-classroom-800));
  --gradient-hero-support: linear-gradient(135deg, var(--theme-gray-900), var(--menu-support-900), var(--menu-support-800));

  /* === SHADOW DEFINITIONS === */
  --shadow-base: 0 10px 25px -5px rgba(16, 185, 129, 0.25);
  --shadow-base-lg: 0 20px 40px -10px rgba(16, 185, 129, 0.3);
  
  --shadow-course: 0 10px 25px -5px rgba(59, 130, 246, 0.25);
  --shadow-course-lg: 0 20px 40px -10px rgba(59, 130, 246, 0.3);
  
  --shadow-share: 0 10px 25px -5px rgba(16, 185, 129, 0.25);
  --shadow-share-lg: 0 20px 40px -10px rgba(16, 185, 129, 0.3);
  
  --shadow-classroom: 0 10px 25px -5px rgba(249, 115, 22, 0.25);
  --shadow-classroom-lg: 0 20px 40px -10px rgba(249, 115, 22, 0.3);
  
  --shadow-support: 0 10px 25px -5px rgba(34, 197, 94, 0.25);
  --shadow-support-lg: 0 20px 40px -10px rgba(34, 197, 94, 0.3);

  /* === GLOW EFFECTS === */
  --glow-base: 0 0 20px rgba(16, 185, 129, 0.3);
  --glow-base-strong: 0 0 40px rgba(16, 185, 129, 0.6);
  
  --glow-course: 0 0 20px rgba(59, 130, 246, 0.3);
  --glow-course-strong: 0 0 40px rgba(59, 130, 246, 0.6);
  
  --glow-share: 0 0 20px rgba(16, 185, 129, 0.3);
  --glow-share-strong: 0 0 40px rgba(16, 185, 129, 0.6);
  
  --glow-classroom: 0 0 20px rgba(249, 115, 22, 0.3);
  --glow-classroom-strong: 0 0 40px rgba(249, 115, 22, 0.6);
  
  --glow-support: 0 0 20px rgba(34, 197, 94, 0.3);
  --glow-support-strong: 0 0 40px rgba(34, 197, 94, 0.6);

  /* === BACKDROP BLUR === */
  --backdrop-blur: blur(20px);
  --backdrop-blur-sm: blur(10px);
}

/* === ALTERNATIVE THEME: GREEN (Emerald) === */
[data-theme="green"] {
  --theme-primary-50: #ecfdf5;
  --theme-primary-100: #d1fae5;
  --theme-primary-200: #a7f3d0;
  --theme-primary-300: #6ee7b7;
  --theme-primary-400: #34d399;
  --theme-primary-500: #10b981;
  --theme-primary-600: #059669;
  --theme-primary-700: #047857;
  --theme-primary-800: #065f46;
  --theme-primary-900: #064e3b;

  --theme-secondary-50: #f0fdfa;
  --theme-secondary-100: #ccfbf1;
  --theme-secondary-200: #99f6e4;
  --theme-secondary-300: #5eead4;
  --theme-secondary-400: #2dd4bf;
  --theme-secondary-500: #14b8a6;
  --theme-secondary-600: #0d9488;
  --theme-secondary-700: #0f766e;
  --theme-secondary-800: #115e59;
  --theme-secondary-900: #134e4a;

  --gradient-primary: linear-gradient(135deg, var(--theme-primary-500), var(--theme-secondary-500));
  --gradient-hero: linear-gradient(135deg, var(--theme-gray-900), var(--theme-primary-900), var(--theme-secondary-900));
  --shadow-primary: 0 10px 25px -5px rgba(16, 185, 129, 0.25);
  --glow-primary: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* === ALTERNATIVE THEME: PURPLE === */
[data-theme="purple"] {
  --theme-primary-50: #faf5ff;
  --theme-primary-100: #f3e8ff;
  --theme-primary-200: #e9d5ff;
  --theme-primary-300: #d8b4fe;
  --theme-primary-400: #c084fc;
  --theme-primary-500: #a855f7;
  --theme-primary-600: #9333ea;
  --theme-primary-700: #7c3aed;
  --theme-primary-800: #6b21a8;
  --theme-primary-900: #581c87;

  --theme-secondary-50: #fdf4ff;
  --theme-secondary-100: #fae8ff;
  --theme-secondary-200: #f5d0fe;
  --theme-secondary-300: #f0abfc;
  --theme-secondary-400: #e879f9;
  --theme-secondary-500: #d946ef;
  --theme-secondary-600: #c026d3;
  --theme-secondary-700: #a21caf;
  --theme-secondary-800: #86198f;
  --theme-secondary-900: #701a75;

  --gradient-primary: linear-gradient(135deg, var(--theme-primary-500), var(--theme-secondary-500));
  --gradient-hero: linear-gradient(135deg, var(--theme-gray-900), var(--theme-primary-900), var(--theme-secondary-900));
  --shadow-primary: 0 10px 25px -5px rgba(168, 85, 247, 0.25);
  --glow-primary: 0 0 20px rgba(168, 85, 247, 0.3);
}

/* === UTILITY CLASSES === */
/* 사이트 기본 색상 */
.theme-base { color: var(--site-base-600); }
.theme-base-bg { background-color: var(--site-base-600); }
.theme-base-border { border-color: var(--site-base-600); }

/* 연수신청 메뉴 색상 */
.theme-course { color: var(--menu-course-600); }
.theme-course-bg { background-color: var(--menu-course-600); }
.theme-course-border { border-color: var(--menu-course-600); }

/* 지식나눔 메뉴 색상 */
.theme-share { color: var(--menu-share-600); }
.theme-share-bg { background-color: var(--menu-share-600); }
.theme-share-border { border-color: var(--menu-share-600); }

/* 나의강의실 메뉴 색상 */
.theme-classroom { color: var(--menu-classroom-600); }
.theme-classroom-bg { background-color: var(--menu-classroom-600); }
.theme-classroom-border { border-color: var(--menu-classroom-600); }

/* 고객센터/지원 메뉴 색상 */
.theme-support { color: var(--menu-support-600); }
.theme-support-bg { background-color: var(--menu-support-600); }
.theme-support-border { border-color: var(--menu-support-600); }

/* === GRADIENT CLASSES === */
.gradient-base { background: var(--gradient-base); }
.gradient-base-hover:hover { background: var(--gradient-base-hover); }

.gradient-course { background: var(--gradient-course); }
.gradient-course-hover:hover { background: var(--gradient-course-hover); }

.gradient-share { background: var(--gradient-share); }
.gradient-share-hover:hover { background: var(--gradient-share-hover); }

.gradient-classroom { background: var(--gradient-classroom); }
.gradient-classroom-hover:hover { background: var(--gradient-classroom-hover); }

.gradient-support { background: var(--gradient-support); }
.gradient-support-hover:hover { background: var(--gradient-support-hover); }

/* 히어로 그라데이션 */
.gradient-hero-base { background: var(--gradient-hero-base); }
.gradient-hero-course { background: var(--gradient-hero-course); }
.gradient-hero-share { background: var(--gradient-hero-share); }
.gradient-hero-classroom { background: var(--gradient-hero-classroom); }
.gradient-hero-support { background: var(--gradient-hero-support); }

/* === SHADOW CLASSES === */
.shadow-base { box-shadow: var(--shadow-base); }
.shadow-base-lg { box-shadow: var(--shadow-base-lg); }

.shadow-course { box-shadow: var(--shadow-course); }
.shadow-course-lg { box-shadow: var(--shadow-course-lg); }

.shadow-share { box-shadow: var(--shadow-share); }
.shadow-share-lg { box-shadow: var(--shadow-share-lg); }

.shadow-classroom { box-shadow: var(--shadow-classroom); }
.shadow-classroom-lg { box-shadow: var(--shadow-classroom-lg); }

.shadow-support { box-shadow: var(--shadow-support); }
.shadow-support-lg { box-shadow: var(--shadow-support-lg); }

/* === GLOW CLASSES === */
.glow-base { box-shadow: var(--glow-base); }
.glow-base-strong { box-shadow: var(--glow-base-strong); }

.glow-course { box-shadow: var(--glow-course); }
.glow-course-strong { box-shadow: var(--glow-course-strong); }

.glow-share { box-shadow: var(--glow-share); }
.glow-share-strong { box-shadow: var(--glow-share-strong); }

.glow-classroom { box-shadow: var(--glow-classroom); }
.glow-classroom-strong { box-shadow: var(--glow-classroom-strong); }

.glow-support { box-shadow: var(--glow-support); }
.glow-support-strong { box-shadow: var(--glow-support-strong); }

/* === NEON TEXT GLOW === */
.neon-glow-base {
  text-shadow: 
    0 0 10px rgba(16, 185, 129, 0.5),
    0 0 20px rgba(16, 185, 129, 0.3),
    0 0 30px rgba(16, 185, 129, 0.2);
}

.neon-glow-course {
  text-shadow: 
    0 0 10px rgba(59, 130, 246, 0.5),
    0 0 20px rgba(59, 130, 246, 0.3),
    0 0 30px rgba(59, 130, 246, 0.2);
}

.neon-glow-share {
  text-shadow: 
    0 0 10px rgba(16, 185, 129, 0.5),
    0 0 20px rgba(16, 185, 129, 0.3),
    0 0 30px rgba(16, 185, 129, 0.2);
}

.neon-glow-classroom {
  text-shadow: 
    0 0 10px rgba(249, 115, 22, 0.5),
    0 0 20px rgba(249, 115, 22, 0.3),
    0 0 30px rgba(249, 115, 22, 0.2);
}

.neon-glow-support {
  text-shadow: 
    0 0 10px rgba(34, 197, 94, 0.5),
    0 0 20px rgba(34, 197, 94, 0.3),
    0 0 30px rgba(34, 197, 94, 0.2);
}

/* === GLASSMORPHISM === */
.glassmorphism {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glassmorphism-dark {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* === ANIMATIONS === */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: var(--glow-primary); }
  50% { box-shadow: var(--glow-primary-strong); }
}

@keyframes hologram-move {
  0% { background-position: 0 0; }
  100% { background-position: 20px 20px; }
}

@keyframes data-flow {
  0% { left: -100%; }
  100% { left: 100%; }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }
.animate-hologram { 
  background: linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.1) 50%, transparent 70%);
  background-size: 20px 20px;
  animation: hologram-move 3s linear infinite;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
  :root {
    --backdrop-blur: blur(15px);
  }
}

/* === DARK MODE SUPPORT === */
@media (prefers-color-scheme: dark) {
  :root {
    --theme-gray-50: #0f172a;
    --theme-gray-100: #1e293b;
    --theme-gray-200: #334155;
    --theme-gray-300: #475569;
    --theme-gray-400: #64748b;
    --theme-gray-500: #94a3b8;
    --theme-gray-600: #cbd5e1;
    --theme-gray-700: #e2e8f0;
    --theme-gray-800: #f1f5f9;
    --theme-gray-900: #f8fafc;
  }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
  :root {
    --theme-primary-600: #1d4ed8;
    --theme-secondary-600: #4338ca;
    --theme-accent-600: #a21caf;
    --theme-success-600: #047857;
  }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-glow-pulse,
  .animate-hologram {
    animation: none;
  }
}

/* ===================================================================
   THEME SYSTEM USAGE GUIDE
   ================================================================= */

/*
  메뉴별 특화 색상 시스템 사용법:

  1. 전체 사이트 기본 색상 (녹색 계열):
     - 클래스: .theme-base, .gradient-base, .shadow-base, .glow-base
     - 변수: --site-base-* (50~900)

  2. 연수신청 메뉴 (파란색 계열):
     - 클래스: .theme-course, .gradient-course, .shadow-course, .glow-course
     - 변수: --menu-course-* (50~900)
     - 히어로: .gradient-hero-course

  3. 지식나눔 메뉴 (보라색 계열):
     - 클래스: .theme-share, .gradient-share, .shadow-share, .glow-share
     - 변수: --menu-share-* (50~900)
     - 히어로: .gradient-hero-share

  4. 나의강의실 메뉴 (주황색 계열):
     - 클래스: .theme-classroom, .gradient-classroom, .shadow-classroom, .glow-classroom
     - 변수: --menu-classroom-* (50~900)
     - 히어로: .gradient-hero-classroom

  5. 고객센터/지원 메뉴 (청록색 계열):
     - 클래스: .theme-support, .gradient-support, .shadow-support, .glow-support
     - 변수: --menu-support-* (50~900)
     - 히어로: .gradient-hero-support

  사용 예시:
  <button class="gradient-course shadow-course-lg">연수신청</button>
  <div class="gradient-hero-share">지식나눔 히어로 섹션</div>
  <span class="theme-classroom neon-glow-classroom">나의강의실</span>
*/

/* ===================================================================
   MENU-SPECIFIC COMPONENT STYLES
   ================================================================= */

/* 연수신청 관련 컴포넌트 */
.course-card {
  background: var(--gradient-course);
  box-shadow: var(--shadow-course);
  transition: all 0.3s ease;
}

.course-card:hover {
  background: var(--gradient-course-hover);
  box-shadow: var(--shadow-course-lg);
  transform: translateY(-2px);
}

.course-button {
  background: var(--gradient-course);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.course-button:hover {
  background: var(--gradient-course-hover);
  box-shadow: var(--shadow-course);
  transform: translateY(-1px);
}

/* 지식나눔 관련 컴포넌트 */
.share-card {
  background: var(--gradient-share);
  box-shadow: var(--shadow-share);
  transition: all 0.3s ease;
}

.share-card:hover {
  background: var(--gradient-share-hover);
  box-shadow: var(--shadow-share-lg);
  transform: translateY(-2px);
}

/* 나의강의실 관련 컴포넌트 */
.classroom-card {
  background: var(--gradient-classroom);
  box-shadow: var(--shadow-classroom);
  transition: all 0.3s ease;
}

.classroom-card:hover {
  background: var(--gradient-classroom-hover);
  box-shadow: var(--shadow-classroom-lg);
  transform: translateY(-2px);
}

/* 고객센터/지원 관련 컴포넌트 */
.support-card {
  background: var(--gradient-support);
  box-shadow: var(--shadow-support);
  transition: all 0.3s ease;
}

.support-card:hover {
  background: var(--gradient-support-hover);
  box-shadow: var(--shadow-support-lg);
  transform: translateY(-2px);
}

/* ===================================================================
   QUICK COLOR CHANGE SYSTEM
   ================================================================= */

/* 색상을 빠르게 변경하려면 아래 변수들만 수정하세요 */

/* 연수신청 색상 변경 (현재: Blue → 다른 색상으로 변경 가능) */
/*
:root {
  --menu-course-500: #ef4444; // Red로 변경 예시
  --menu-course-600: #dc2626;
  --menu-course-700: #b91c1c;
}
*/

/* 지식나눔 색상 변경 (현재: Purple → 다른 색상으로 변경 가능) */
/*
:root {
  --menu-share-500: #06b6d4; // Cyan으로 변경 예시
  --menu-share-600: #0891b2;
  --menu-share-700: #0e7490;
}
*/

/* 나의강의실 색상 변경 (현재: Orange → 다른 색상으로 변경 가능) */
/*
:root {
  --menu-classroom-500: #8b5cf6; // Violet으로 변경 예시
  --menu-classroom-600: #7c3aed;
  --menu-classroom-700: #6d28d9;
}
*/