/**
 * Levely Design System
 * 기획서 기반 디자인 스타일 에셋
 *
 * 2D RPG 게임 스타일 UI - 귀여운 판타지 테마
 * 아동 친화적 디자인 (8-12세 타겟)
 */

:root {
  /* ============================================ */
  /* 1. 메인 컬러 팔레트 */
  /* ============================================ */

  /* Primary - 보라색 그라데이션 */
  --color-primary: #6C5CE7;
  --color-primary-light: #A29BFE;
  --color-primary-dark: #5849BE;
  --color-primary-gradient: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);

  /* Secondary - 민트/청록색 */
  --color-secondary: #00CEC9;
  --color-secondary-light: #81ECEC;
  --color-secondary-dark: #00B894;
  --color-secondary-gradient: linear-gradient(135deg, #4ECDC4 0%, #00CEC9 100%);

  /* Accent - 골드/노란색 */
  --color-accent: #FDCB6E;
  --color-accent-light: #FFE66D;
  --color-accent-dark: #F5B84B;
  --color-accent-gradient: linear-gradient(135deg, #FFD93D 0%, #FDCB6E 100%);

  /* Status Colors */
  --color-success: #00B894;
  --color-success-light: #55EFC4;
  --color-warning: #F5B84B;
  --color-warning-light: #FFEAA7;
  --color-danger: #FF6B6B;
  --color-danger-light: #FFCCCC;
  --color-info: #74B9FF;
  --color-info-light: #DBEAFE;

  /* 그릿 시스템 컬러 */
  --color-grit: #FF6B6B;
  --color-dream: #FFD93D;
  --color-effort: #6C5CE7;

  /* 그릿 스테이지별 테마 컬러 */
  --stage-interest: #4ECDC4;      /* 흥미 발견 */
  --stage-practice: #FF8C42;      /* 의도적 연습 */
  --stage-purpose: #9B59B6;       /* 목적 발견 */
  --stage-hope: #A8E6CF;          /* 희망 유지 */

  /* ============================================ */
  /* 2. 리소스 카테고리 컬러 */
  /* ============================================ */
  --color-character: #6C5CE7;
  --color-npc: #00CEC9;
  --color-enemy: #FF6B6B;
  --color-equipment: #FDCB6E;
  --color-consumable: #E17055;
  --color-material: #81ECEC;
  --color-building: #A29BFE;
  --color-decoration: #55EFC4;
  --color-map: #74B9FF;
  --color-tile: #DFE6E9;
  --color-effect: #FD79A8;
  --color-audio: #00B894;
  --color-badge: #FFD700;

  /* ============================================ */
  /* 3. 퀘스트 카테고리 컬러 */
  /* ============================================ */
  --quest-study: #60A5FA;
  --quest-health: #34D399;
  --quest-chore: #FBBF24;
  --quest-social: #A78BFA;
  --quest-creative: #F472B6;

  /* ============================================ */
  /* 4. 배경 컬러 */
  /* ============================================ */
  --bg-dark: #1A1A2E;
  --bg-dark-light: #16213E;
  --bg-card-dark: #0F3460;
  --bg-light: #FAFAFA;
  --bg-white: #FFFFFF;
  --bg-gray: #F3F4F6;

  /* ============================================ */
  /* 5. 텍스트 컬러 */
  /* ============================================ */
  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --text-light: #FFFFFF;
  --text-link: #6366F1;

  /* ============================================ */
  /* 6. 보더/디바이더 */
  /* ============================================ */
  --border-light: #E5E7EB;
  --border-medium: #D1D5DB;
  --border-dark: rgba(255, 255, 255, 0.1);

  /* ============================================ */
  /* 7. 그림자 */
  /* ============================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 20px rgba(108, 92, 231, 0.3);
  --shadow-glow-gold: 0 0 20px rgba(253, 203, 110, 0.4);

  /* ============================================ */
  /* 8. 둥근 모서리 */
  /* ============================================ */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ============================================ */
  /* 9. 간격 */
  /* ============================================ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  /* ============================================ */
  /* 10. 타이포그래피 */
  /* ============================================ */
  --font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ============================================ */
  /* 11. 전환 효과 */
  /* ============================================ */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ============================================ */
  /* 12. 애니메이션 */
  /* ============================================ */
  --animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --animation-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================ */
/* 공통 버튼 스타일 */
/* ============================================ */
.btn-levely {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn-levely-primary {
  background: var(--color-primary-gradient);
  color: var(--text-light);
  box-shadow: var(--shadow-md);
}

.btn-levely-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.btn-levely-secondary {
  background: var(--color-secondary-gradient);
  color: var(--text-light);
}

.btn-levely-accent {
  background: var(--color-accent-gradient);
  color: var(--text-primary);
}

.btn-levely-outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

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

/* ============================================ */
/* 카드 스타일 */
/* ============================================ */
.card-levely {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  transition: all var(--transition-normal);
}

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

.card-levely-dark {
  background: var(--bg-card-dark);
  border-color: var(--border-dark);
  color: var(--text-light);
}

/* ============================================ */
/* 리소스 카테고리 아이콘 배경 */
/* ============================================ */
.resource-icon-bg {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.resource-icon-character { background: rgba(108, 92, 231, 0.15); color: var(--color-character); }
.resource-icon-npc { background: rgba(0, 206, 201, 0.15); color: var(--color-npc); }
.resource-icon-enemy { background: rgba(255, 107, 107, 0.15); color: var(--color-enemy); }
.resource-icon-equipment { background: rgba(253, 203, 110, 0.15); color: var(--color-equipment); }
.resource-icon-consumable { background: rgba(225, 112, 85, 0.15); color: var(--color-consumable); }
.resource-icon-material { background: rgba(129, 236, 236, 0.15); color: var(--color-material); }
.resource-icon-building { background: rgba(162, 155, 254, 0.15); color: var(--color-building); }
.resource-icon-map { background: rgba(116, 185, 255, 0.15); color: var(--color-map); }
.resource-icon-effect { background: rgba(253, 121, 168, 0.15); color: var(--color-effect); }
.resource-icon-badge { background: rgba(255, 215, 0, 0.15); color: var(--color-badge); }

/* ============================================ */
/* 퀘스트 카테고리 아이콘 배경 */
/* ============================================ */
.quest-icon-study { background: rgba(96, 165, 250, 0.2); color: var(--quest-study); }
.quest-icon-health { background: rgba(52, 211, 153, 0.2); color: var(--quest-health); }
.quest-icon-chore { background: rgba(251, 191, 36, 0.2); color: var(--quest-chore); }
.quest-icon-social { background: rgba(167, 139, 250, 0.2); color: var(--quest-social); }
.quest-icon-creative { background: rgba(244, 114, 182, 0.2); color: var(--quest-creative); }

/* ============================================ */
/* 그릿 스테이지 배지 */
/* ============================================ */
.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.stage-interest { background: var(--stage-interest); color: white; }
.stage-practice { background: var(--stage-practice); color: white; }
.stage-purpose { background: var(--stage-purpose); color: white; }
.stage-hope { background: var(--stage-hope); color: #333; }

/* ============================================ */
/* 포인트 배지 */
/* ============================================ */
.point-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.point-badge-grit {
  background: rgba(255, 107, 107, 0.15);
  color: var(--color-grit);
}

.point-badge-dream {
  background: rgba(255, 217, 61, 0.15);
  color: #D97706;
}

.point-badge-effort {
  background: rgba(108, 92, 231, 0.15);
  color: var(--color-effort);
}

/* ============================================ */
/* 모달 스타일 */
/* ============================================ */
.modal-levely {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: var(--space-lg);
}

.modal-levely.active {
  display: flex;
}

.modal-levely-content {
  background: var(--bg-white);
  border-radius: var(--radius-2xl);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.modal-levely-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-light);
}

.modal-levely-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.modal-levely-close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-gray);
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.modal-levely-close:hover {
  background: var(--border-light);
}

.modal-levely-body {
  padding: var(--space-xl);
  overflow-y: auto;
  max-height: calc(90vh - 140px);
}

.modal-levely-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--border-light);
}

/* ============================================ */
/* 폼 요소 */
/* ============================================ */
.form-group-levely {
  margin-bottom: var(--space-lg);
}

.form-label-levely {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.form-input-levely {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.form-input-levely:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

.form-select-levely {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  background: var(--bg-white);
  cursor: pointer;
}

/* ============================================ */
/* 태그 */
/* ============================================ */
.tag-levely {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background: var(--bg-gray);
  color: var(--text-secondary);
}

.tag-levely-primary { background: rgba(108, 92, 231, 0.1); color: var(--color-primary); }
.tag-levely-success { background: rgba(0, 184, 148, 0.1); color: var(--color-success); }
.tag-levely-warning { background: rgba(245, 184, 75, 0.1); color: var(--color-warning); }
.tag-levely-danger { background: rgba(255, 107, 107, 0.1); color: var(--color-danger); }

/* ============================================ */
/* 로딩 스피너 */
/* ============================================ */
.spinner-levely {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================ */
/* 애니메이션 */
/* ============================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.animate-fadeIn { animation: fadeIn 0.3s ease-out; }
.animate-slideUp { animation: slideUp 0.4s var(--animation-smooth); }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }