/* 당근영어 테마 CSS */

:root {
  /* 당근영어 메인 색상 테마 */
  --primary: #FF8A00; /* 당근 오렌지 */
  --secondary: #4CAF50; /* 잎사귀 녹색 */
  --background: #FFF8F0; /* 연한 오렌지 배경 */
  --text-primary: #333333;
  --accent-1: #FF6B2B; /* 진한 오렌지 */
  --accent-2: #2E7D32; /* 진한 녹색 */
  --accent-3: #FF9800;
  --success: #4CAF50;
  --error: #F44336;
  --neutral: #FFC107;
  --shadow: rgba(0, 0, 0, 0.1);
  
  /* 미션 맵 등급 색상 재정의 */
  --rank-beginner: #4CAF50;      /* 비기너: 연한 녹색(당근 새싹) */
  --rank-intermediate: #8BC34A;  /* 인터미디에이트: 중간 녹색 */
  --rank-advanced: #FF9800;      /* 어드밴스드: 오렌지(작은 당근) */
  --rank-master: #FF6B2B;        /* 마스터: 진한 오렌지(완성된 당근) */
  --rank-grandmaster: #E65100;   /* 그랜드마스터: 갈색 오렌지(황금 당근) */
  
  /* 미션 맵용 변수 재정의 */
  --primary-color: #FF8A00;
  --primary-dark: #FF6B2B;
  --primary-light: #FFE0B2;
  --accent-color: #4CAF50;
  --accent-dark: #2E7D32;
  --accent-light: #C8E6C9;
}

/* 공통 스타일 오버라이드 */
body {
  background-color: var(--background);
}

/* 헤더 스타일 오버라이드 */
.main-header {
  background: linear-gradient(135deg, #FF8A00 0%, #FF6B2B 100%);
  box-shadow: 0 6px 20px rgba(255, 138, 0, 0.35);
}

.main-header .logo {
  color: white;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.main-nav a {
  color: rgba(255, 255, 255, 0.9);
}

.main-nav a:hover,
.main-nav a.active {
  color: white;
}

.main-nav a.active::after {
  background-color: white;
}

/* 페이지 헤더 */
.page-header h1 {
  color: var(--primary);
}

.back-btn {
  color: var(--primary);
}

/* 등급 버튼 스타일 */
.rank-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.rank-btn::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 138, 0, 0.1);
  top: -10px;
  right: -10px;
  z-index: 0;
  transition: all 0.3s ease;
}

.rank-btn:hover::before {
  transform: scale(2);
}

.rank-btn[data-rank="beginner"] {
  border-color: var(--rank-beginner);
  color: var(--rank-beginner);
}

.rank-btn[data-rank="intermediate"] {
  border-color: var(--rank-intermediate);
  color: var(--rank-intermediate);
}

.rank-btn[data-rank="advanced"] {
  border-color: var(--rank-advanced);
  color: var(--rank-advanced);
}

.rank-btn[data-rank="master"] {
  border-color: var(--rank-master);
  color: var(--rank-master);
}

.rank-btn[data-rank="grandmaster"] {
  border-color: var(--rank-grandmaster);
  color: var(--rank-grandmaster);
}

.rank-btn.active[data-rank="beginner"] {
  background-color: var(--rank-beginner);
  color: white;
}

.rank-btn.active[data-rank="intermediate"] {
  background-color: var(--rank-intermediate);
  color: white;
}

.rank-btn.active[data-rank="advanced"] {
  background-color: var(--rank-advanced);
  color: white;
}

.rank-btn.active[data-rank="master"] {
  background-color: var(--rank-master);
  color: white;
}

.rank-btn.active[data-rank="grandmaster"] {
  background-color: var(--rank-grandmaster);
  color: white;
}

/* 미션 카드 스타일 */
.mission-card {
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}

.mission-card::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #FF8A00, #FF6B2B);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.mission-card:hover::after {
  transform: scaleX(1);
}

.mission-title {
  color: var(--primary);
}

/* 미션 상태 스타일 재정의 */
.status-completed {
  background-color: rgba(76, 175, 80, 0.1);
  color: var(--secondary);
}

.status-in-progress {
  background-color: rgba(255, 138, 0, 0.1);
  color: var(--primary);
}

/* 버튼 스타일 */
.filter-btn.active,
.start-mission-btn,
.tab-btn.active {
  background-color: var(--primary);
  border-color: var(--primary);
}

.start-mission-btn:hover {
  background-color: var(--primary-dark);
}

/* 푸터 스타일 */
.main-footer {
  background-color: white;
  border-top: 1px solid #FFE0B2;
}

#footer-nav a:hover {
  color: var(--primary);
}

/* 당근 아이콘 추가 스타일 */
.difficulty-beginner .difficulty-dot {
  background-color: var(--rank-beginner);
}

.difficulty-intermediate .difficulty-dot {
  background-color: var(--rank-intermediate);
}

.difficulty-advanced .difficulty-dot {
  background-color: var(--rank-advanced);
}

.difficulty-master .difficulty-dot {
  background-color: var(--rank-master);
}

.difficulty-grandmaster .difficulty-dot {
  background-color: var(--rank-grandmaster);
}