/* ════════════════════════════════════════════════════════════════
 * Claude Design — 모비딕 v2 디자인 시스템 (2026-05-14)
 * ════════════════════════════════════════════════════════════════
 * 박하영 팀장 결정: v1 안정 운영 + v2 별도 URL 로 발전.
 * 5명 페르소나 의견 종합:
 *   박서영 — 통일된 시각·인지 부담 ↓
 *   윤채린 — 모비딕 브랜드 (민트 + 다크네이비 + 화이트)
 *   신예린 — 2026 트렌드 (큰 radius, 부드러운 그라데이션, 미니멀)
 *   정민수 — CSS Variables + 유틸 클래스 (빌드 불필요)
 *   한지유 — 시각적 안정감 + 신뢰
 * ════════════════════════════════════════════════════════════════
 */

:root {
  /* ━━━ 색상 토큰 (모비딕 시그니처 + 시맨틱) ━━━ */
  --md-primary:        #10b981;  /* 그린 — 주 액션 (이 카피로 만들기, 적용 등) */
  --md-primary-dark:   #059669;
  --md-primary-hover:  #047857;

  --md-accent:         #03c75a;  /* 모비딕 시그니처 민트 */
  --md-accent-light:   #e8f7f5;

  --md-warning:        #fbbf24;  /* 황색 — 안내, 카피 작업 */
  --md-warning-soft:   rgba(251, 191, 36, 0.08);
  --md-warning-border: rgba(251, 191, 36, 0.35);

  --md-danger:         #ef4444;  /* 빨강 — 삭제, 위험 */
  --md-danger-soft:    rgba(239, 68, 68, 0.08);

  --md-info:           #0ea5e9;  /* 청색 — 정보, 보조 액션 */
  --md-info-soft:      rgba(14, 165, 233, 0.08);

  --md-purple:         #a855f7;  /* 보라 — 강조, 시작 카드 */
  --md-purple-soft:    rgba(168, 85, 247, 0.06);

  /* 배경 + surface */
  --md-bg:             #0b1220;  /* 메인 배경 */
  --md-bg-deep:        #0a0f1a;  /* 더 깊은 배경 */
  --md-surface:        #1f2937;  /* 카드·모달 표면 */
  --md-surface-elev:   #374151;  /* outline / divider */

  /* 텍스트 */
  --md-text-primary:   #f9fafb;
  --md-text-secondary: #cbd5e1;
  --md-text-muted:     #9ca3af;
  --md-text-dim:       #6b7280;

  /* ━━━ 형태 토큰 ━━━ */
  --md-radius-sm: 6px;
  --md-radius:    10px;
  --md-radius-lg: 14px;

  --md-gap-xs:  4px;
  --md-gap-sm:  6px;
  --md-gap:     8px;
  --md-gap-md:  12px;
  --md-gap-lg:  16px;
  --md-gap-xl:  24px;

  --md-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.2);
  --md-shadow:     0 4px 12px rgba(0, 0, 0, 0.25);
  --md-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.4);

  /* ━━━ 폰트 토큰 ━━━ */
  --md-font-xs:  10px;
  --md-font-sm:  11px;
  --md-font:     13px;
  --md-font-md:  14px;
  --md-font-lg:  16px;
  --md-font-xl:  20px;

  /* ━━━ 트랜지션 ━━━ */
  --md-trans-fast: 0.12s ease-out;
  --md-trans:      0.2s ease-out;
}

/* ════════════════════════════════════════════════════════════════
 * 컴포넌트 클래스 (유틸리티)
 * ════════════════════════════════════════════════════════════════
 */

/* ━━━ 버튼 ━━━ */
.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-gap-sm);
  padding: 8px 14px;
  font-size: var(--md-font);
  font-weight: 600;
  border-radius: var(--md-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--md-trans), border-color var(--md-trans), transform var(--md-trans-fast);
  text-align: center;
  line-height: 1.4;
}
.md-btn:hover     { transform: translateY(-1px); box-shadow: var(--md-shadow-sm); }
.md-btn:active    { transform: translateY(0); }
.md-btn:disabled  { opacity: 0.5; cursor: not-allowed; transform: none; }

.md-btn-primary   { background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark)); color: #fff; }
.md-btn-primary:hover { background: linear-gradient(135deg, var(--md-primary-dark), var(--md-primary-hover)); }

.md-btn-secondary { background: var(--md-surface); color: var(--md-text-primary); border-color: var(--md-surface-elev); }
.md-btn-secondary:hover { background: var(--md-surface-elev); }

.md-btn-warning   { background: linear-gradient(135deg, var(--md-warning), #f59e0b); color: var(--md-bg); }
.md-btn-danger    { background: var(--md-danger); color: #fff; }
.md-btn-info      { background: linear-gradient(135deg, var(--md-info), #0284c7); color: #fff; }

.md-btn-ghost     { background: transparent; color: var(--md-text-secondary); border-color: var(--md-surface-elev); }
.md-btn-ghost:hover { background: var(--md-surface); }

.md-btn-sm        { padding: 5px 10px; font-size: var(--md-font-sm); }
.md-btn-lg        { padding: 12px 20px; font-size: var(--md-font-md); }
.md-btn-block     { width: 100%; }

/* ━━━ 카드 ━━━ */
.md-card {
  background: var(--md-surface);
  border: 1px solid var(--md-surface-elev);
  border-radius: var(--md-radius);
  padding: var(--md-gap-md);
}
.md-card-accent {
  background: var(--md-warning-soft);
  border: 2px solid var(--md-warning);
}
.md-card-info {
  background: var(--md-info-soft);
  border: 1px solid var(--md-info);
}
.md-card-success {
  background: var(--md-purple-soft);
  border: 2px dashed var(--md-purple);
}

/* ━━━ 입력 ━━━ */
.md-input {
  background: var(--md-bg-deep);
  border: 1px solid var(--md-surface-elev);
  border-radius: var(--md-radius-sm);
  color: var(--md-text-primary);
  padding: 8px 12px;
  font-size: var(--md-font);
  transition: border-color var(--md-trans), box-shadow var(--md-trans);
}
.md-input:focus {
  outline: none;
  border-color: var(--md-info);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}

/* ━━━ 레이블 + 텍스트 ━━━ */
.md-label-sm { font-size: var(--md-font-sm); color: var(--md-text-muted); }
.md-text-muted { color: var(--md-text-muted); }
.md-text-dim   { color: var(--md-text-dim); }
.md-h2  { font-size: var(--md-font-xl); font-weight: 700; color: var(--md-text-primary); }
.md-h3  { font-size: var(--md-font-lg); font-weight: 700; color: var(--md-text-primary); }

/* ━━━ 토글 그룹 (라디오 형식) ━━━ */
.md-toggle-group {
  display: inline-flex;
  background: var(--md-bg-deep);
  border: 1px solid var(--md-surface-elev);
  border-radius: var(--md-radius);
  padding: 3px;
  gap: 2px;
}
.md-toggle-btn {
  background: transparent;
  border: none;
  color: var(--md-text-muted);
  padding: 6px 12px;
  font-size: var(--md-font-sm);
  font-weight: 600;
  border-radius: var(--md-radius-sm);
  cursor: pointer;
  transition: all var(--md-trans-fast);
}
.md-toggle-btn.active {
  background: var(--md-primary);
  color: #fff;
}
.md-toggle-btn:hover:not(.active) {
  background: var(--md-surface);
  color: var(--md-text-secondary);
}

/* ━━━ 베이지 / 알약 ━━━ */
.md-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--md-font-xs);
  font-weight: 700;
  background: var(--md-surface);
  color: var(--md-text-secondary);
}
.md-badge-success { background: var(--md-primary); color: #fff; }
.md-badge-warning { background: var(--md-warning); color: var(--md-bg); }
.md-badge-info    { background: var(--md-info); color: #fff; }

/* ━━━ 안내 텍스트 ━━━ */
.md-hint {
  font-size: var(--md-font-xs);
  color: var(--md-text-dim);
  line-height: 1.5;
}
.md-hint-success { color: #86efac; }
.md-hint-warning { color: #fcd34d; }
.md-hint-info    { color: #7dd3fc; }

/* ━━━ Divider ━━━ */
.md-divider {
  border: none;
  border-top: 1px solid var(--md-surface-elev);
  margin: var(--md-gap-md) 0;
}

/* ━━━ Beta 마커 ━━━ */
.md-beta-marker {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--md-purple), #7c3aed);
  color: #fff;
  font-size: var(--md-font-xs);
  font-weight: 700;
  padding: 3px 16px;
  border-radius: 0 0 var(--md-radius-sm) var(--md-radius-sm);
  z-index: 9999;
  letter-spacing: 0.5px;
}