/**
 * 디자인 토큰 시스템
 * 모든 색상, 간격, 타이포그래피, 애니메이션 값을 중앙에서 관리
 */

:root {
  /* === 브랜드 색상 === */
  --color-brand-primary: #FE223A;
  --color-brand-primary-light: #FFE9EA;
  --color-brand-primary-dark: #D11429;
  --color-brand-gradient-start: #FB273E;
  --color-brand-gradient-end: #6F00A4;
  
  /* === 카테고리 색상 === */
  --color-category-tarot-bg: #33124D;
  --color-category-tarot-text: #EABFFF;
  --color-category-saju-bg: #04061E;
  --color-category-saju-text: #6EFDFF;
  --color-category-fortune-bg: #02221E;
  --color-category-fortune-text: #A3FF6E;
  
  /* === 중립 색상 === */
  --color-neutral-white: #FFFFFF;
  --color-neutral-black: #000000;
  --color-neutral-gray-50: #FAFAFA;
  --color-neutral-gray-100: #F5F5F5;
  --color-neutral-gray-200: #EFEFEF;
  --color-neutral-gray-300: #EAEAEA;
  --color-neutral-gray-400: #DBDBDB;
  --color-neutral-gray-500: #B5B5B5;
  --color-neutral-gray-600: #8A8A8A;
  --color-neutral-gray-700: #737373;
  --color-neutral-gray-800: #333333;
  --color-neutral-gray-900: #1A1A1A;
  
  /* === 텍스트 색상 === */
  --color-text-primary: #333333;
  --color-text-secondary: rgba(51, 51, 51, 0.67);
  --color-text-tertiary: rgba(51, 51, 51, 0.72);
  --color-text-disabled: #B3B3B3;
  --color-text-inverse: #FFFFFF;
  --color-text-muted: #707070;
  
  /* === 배경 색상 === */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #FBFBFB;
  --color-bg-tertiary: #F6F6F6;
  --color-bg-hover: #F9F9F9;
  --color-bg-overlay: rgba(0, 0, 0, 0.56);
  
  /* === 버튼 색상 === */
  --color-btn-primary: var(--color-brand-primary);
  --color-btn-primary-hover: var(--color-brand-primary-dark);
  --color-btn-secondary: #f6c256;
  --color-btn-secondary-hover: #e7b03c;
  --color-btn-secondary-border: #e7b03c;
  --color-btn-disabled: #767676;
  --color-btn-disabled-hover: #666666;
  --color-btn-disabled-border: #a8a8a8;
  --color-btn-ghost-text: #767676;
  --color-btn-ghost-border: #c8c8c8;
  --color-btn-ghost-hover-border: #999999;
  --color-btn-ghost-hover-text: #555555;

  /* === 상태 색상 === */
  --color-success: #09C905;
  --color-error: #DB001A;
  --color-warning: #FFC107;
  --color-info: #17A2B8;
  
  /* === 간격 시스템 (8px 기준) === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  
  /* === 타이포그래피 === */
  --font-family-base: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-family-display: 'HSBomBaram2', sans-serif;
  
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 36px;
  --font-size-5xl: 50px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  --line-height-loose: 2;
  
  --letter-spacing-tight: -1.05px;
  --letter-spacing-normal: -0.8px;
  --letter-spacing-wide: 0.2px;
  
  /* === 보더 === */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;
  
  --border-color-light: #EAEAEA;
  --border-color-medium: #DBDBDB;
  --border-color-dark: #DADADA;
  
  --border-radius-sm: 5px;
  --border-radius-md: 10px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 20px;
  --border-radius-full: 999px;
  
  /* === 그림자 === */
  --shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-md: 0px 0px 10px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0px 10px 30px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 8px 24px rgba(99, 102, 241, 0.35);
  
  /* === 애니메이션 === */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  --animation-duration-fast: 0.15s;
  --animation-duration-base: 0.3s;
  --animation-duration-slow: 0.5s;
  
  /* === 반응형 브레이크포인트 === */
  --breakpoint-xs: 400px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1000px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1300px;
  
  /* === Z-index 레이어 === */
  --z-index-base: 1;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-modal-backdrop: 400;
  --z-index-modal: 500;
  --z-index-popover: 600;
  --z-index-tooltip: 700;
  --z-index-max: 99999;
  
  /* === 접근성 === */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-brand-primary);
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* === 터치 최적화 === */
a, button, input, select, textarea, [role="button"] {
  touch-action: manipulation;
}

/* === 접근성 개선: 포커스 스타일 === */
*:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--border-radius-sm);
}

/* === 버튼 표준 스타일 === */
.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  text-align: center;
  text-decoration: none;
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-primary);
}

.btn-primary:hover {
  background-color: var(--color-brand-primary-dark);
  border-color: var(--color-brand-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background-color: var(--color-brand-primary-light);
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary-light);
}

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

.btn-outline {
  background-color: transparent;
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

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

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-neutral-gray-300);
}

.btn-ghost:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--color-neutral-gray-400);
}

/* === 버튼 disabled 상태 === */
.btn-base:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
.btn-ghost:disabled,
.defaultBtn:disabled,
.btn_default:disabled,
.btn_submit:disabled,
.btn_submit2:disabled,
.btn_call:disabled,
.btn_call_default:disabled,
.btn_call_talk:disabled,
.btn_call_miss:disabled,
.btn_sub_review:disabled,
.callBtn:disabled,
.callBtn_talk:disabled,
.callBtn_miss:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* === 버튼 클래스 통합 매핑 ===
 * 구 클래스명(style.css)과 신 클래스명(sub.css)을 통합합니다.
 * 양쪽 모두 동일하게 동작하며, 점진적으로 신 클래스로 전환합니다.
 *
 * 매핑 테이블:
 *   구(style.css)    →  신(sub.css)       →  통합(design-tokens)
 *   .defaultBtn      →  .btn_default      →  .btn-ghost (고스트)
 *   .callBtn         →  .btn_call_default  →  .btn-primary (주요 액션)
 *   .callBtn_miss    →  .btn_call_miss     →  .btn-disabled (비활성)
 *   .callBtn_talk    →  .btn_call_talk     →  .btn-secondary (보조 액션)
 *   -                →  .btn_submit        →  .btn-primary (폼 제출)
 *   -                →  .btn_submit2       →  .btn-secondary (폼 보조)
 *   -                →  .btn_sub_review    →  .btn-secondary (리뷰)
 */

/* === 간격 유틸리티 클래스 === */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* === 스켈레톤 로딩 UI === */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--border-radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.skeleton * {
  visibility: hidden;
}

/* 기본 도형 */
.skeleton-text {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 65%; }
.skeleton-text.long { width: 90%; }

.skeleton-circle {
  border-radius: 50%;
}

.skeleton-rect {
  border-radius: var(--border-radius-md);
}

/* 상담사 카드 스켈레톤 */
.skeleton-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  gap: 10px;
}

.skeleton-card .skeleton-thumb {
  width: 80px;
  height: 80px;
}

.skeleton-card .skeleton-name {
  width: 60px;
  height: 14px;
}

.skeleton-card .skeleton-tag {
  width: 45px;
  height: 12px;
}

/* 리스트 아이템 스켈레톤 */
.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-neutral-gray-200);
}

.skeleton-list-item .skeleton-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.skeleton-list-item .skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 리뷰 스켈레톤 */
.skeleton-review {
  padding: 16px;
  border-bottom: 1px solid var(--color-neutral-gray-200);
}

.skeleton-review .skeleton-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.skeleton-review .skeleton-avatar {
  width: 36px;
  height: 36px;
}

.skeleton-review .skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 전체 페이지 스켈레톤 래퍼 */
.skeleton-wrap {
  padding: 16px;
}

.skeleton-wrap .skeleton-title {
  height: 20px;
  width: 50%;
  margin-bottom: 20px;
}

/* reduced motion 대응 */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: #f0f0f0;
  }
}

/* === 반응형 유틸리티 === */
@media (max-width: 640px) {
  :root {
    --font-size-base: 13px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
  }
}