/* =============================================
   DESIGN SYSTEM — CSS 변수 (컬러풀 테마)
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root {
  /* ─── 기본 팔레트 ─── */
  --color-text:        #1E1B4B;   /* 진한 인디고 계열 */
  --color-sub:         #6B7280;
  --color-bg:          #FFFFFF;
  --color-surface:     #F8F7FF;   /* 연한 보라 틴트 */
  --color-surface-2:   #EFEDFD;
  --color-border:      #E5E7EB;
  --color-hover:       #F3F4F6;
  --color-active:      #EDE9FE;

  /* ─── 메인 액센트 (인디고/바이올렛) ─── */
  --color-accent:        #6366F1;
  --color-accent-hover:  #4F46E5;
  --color-accent-light:  #EEF2FF;
  --color-danger:        #EF4444;
  --color-danger-light:  #FEE2E2;
  --color-success:       #10B981;
  --color-success-light: #D1FAE5;
  --color-warning:       #F59E0B;
  --color-warning-light: #FEF3C7;

  /* ─── 그룹 카테고리 색상 ─── */
  --bunyeo-color:  #9333EA;   /* 부녀회 - 바이올렛 */
  --bunyeo-light:  #FAF5FF;
  --bunyeo-border: #D8B4FE;
  --cheong-color:  #2563EB;   /* 청년회 - 블루 */
  --cheong-light:  #EFF6FF;
  --cheong-border: #93C5FD;
  --etc-color:     #D97706;   /* 기타 - 앰버 */
  --etc-light:     #FFFBEB;
  --etc-border:    #FCD34D;

  /* ─── 단계별 색상 ─── */
  --s1-color: #DC2626; --s1-bg: #FEF2F2;  /* 찾기1 - 레드 */
  --s2-color: #EA580C; --s2-bg: #FFF7ED;  /* 찾기2 - 오렌지 */
  --s3-color: #059669; --s3-bg: #ECFDF5;  /* 합자 - 그린 */
  --s4-color: #2563EB; --s4-bg: #EFF6FF;  /* 상담 - 블루 */
  --s5-color: #7C3AED; --s5-bg: #F5F3FF;  /* 육따기 - 퍼플 */
  --s6-color: #DB2777; --s6-bg: #FDF2F8;  /* 복등 - 핑크 */

  /* ─── 타이포그래피 ─── */
  --font-family: 'Noto Sans KR', sans-serif;
  --text-xs:   11px; --text-sm:  12px; --text-base: 14px;
  --text-md:   16px; --text-lg:  20px; --text-xl:   24px; --text-2xl: 32px;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;
  --lh-tight: 1.3; --lh-base: 1.6;

  /* ─── 간격 ─── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* ─── 모서리 ─── */
  --radius-sm:3px; --radius-base:6px; --radius-md:10px; --radius-lg:14px; --radius-full:9999px;

  /* ─── 그림자 ─── */
  --shadow-xs: 0 1px 2px rgba(99,102,241,.06);
  --shadow-sm: 0 2px 6px rgba(99,102,241,.08);
  --shadow-md: 0 4px 16px rgba(99,102,241,.12);
  --shadow-lg: 0 8px 32px rgba(99,102,241,.16);

  /* ─── 레이아웃 ─── */
  --sidebar-width: 240px;
  --header-h: 52px;

  /* ─── 트랜지션 ─── */
  --ease-fast: 120ms ease;
  --ease-base: 200ms ease;
}