@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root {
  /* ─────────────────────────────────────────────
   *  티처클라우드 (aboutdi1.mycafe24.com) — Design Tokens
   *  Source: 기획안_4.pdf 화면 캡처 5종 (2026-05-02)
   * ───────────────────────────────────────────── */

  /* ── 색상 · 브랜드 ──────────────────────────── */
  --color-primary:        #7C3AED;   /* 보라 메인 (배지, 칩, 강조) */
  --color-primary-dark:   #6D28D9;   /* hover/pressed */
  --color-primary-light:  #EDE9FE;   /* 칩 배경, 보조 표면 */
  --color-primary-soft:   #F5F3FF;   /* 가장 옅은 보라 */

  --color-secondary:      #1F2937;   /* 다크 CTA 영역 (FOR CREATORS) */
  --color-secondary-dark: #0F172A;
  --color-secondary-soft: #334155;

  /* Internal-tools 블루 (마이페이지/정산 등 운영 툴 계열) */
  --brand-blue:        #3B82F6;   /* 운영 툴 액션·링크 */
  --brand-blue-deep:   #1A56A0;   /* 운영 툴 강조·hover */
  --brand-blue-soft:   #EEF2FF;   /* 운영 툴 표면 */
  --brand-blue-pale:   #DBEAFE;   /* 옅은 정보 표면 */
  --brand-blue-border: #BFDBFE;   /* 점선/포커스 */

  --color-danger:         #EF4444;   /* 거절·삭제·경고 */
  --color-danger-strong:  #DC2626;   /* 마이너스 금액·강조 */
  --color-danger-soft:    #FEE2E2;
  --color-success:        #10B981;   /* 완료 */
  --color-success-soft:   #D1FAE5;
  --color-warning:        #F59E0B;   /* 대기 */
  --color-warning-soft:   #FEF3C7;
  --color-info:           #3B82F6;   /* 처리중 */
  --color-info-soft:      #DBEAFE;

  /* ── 색상 · 배경 ────────────────────────────── */
  --bg-page:        #FFFFFF;          /* 페이지 본문 */
  --bg-section:     #F9FAFB;          /* 섹션 구분 */
  --bg-muted:       #F3F4F6;          /* 비활성 표면, 푸터 */
  --bg-card:        #FFFFFF;          /* 카드 본체 */
  --bg-overlay:     rgba(15, 23, 42, 0.55); /* 모달 딤 */

  /* 봄 이벤트 그라데이션 (히어로 배너) */
  --bg-hero-gradient: linear-gradient(135deg, #FCE7F3 0%, #EDE9FE 50%, #DBEAFE 100%);
  /* 멤버십 가입 유도 보라 띠 */
  --bg-promo-strip:   linear-gradient(90deg, #7C3AED 0%, #6366F1 100%);

  /* ── 색상 · 텍스트 ──────────────────────────── */
  --text-primary:   #111827;   /* 본문, 가격, 카드 타이틀 */
  --text-strong:    #374151;   /* 테이블 헤더, 강한 본문 */
  --text-secondary: #4B5563;   /* 부가 설명 */
  --text-tertiary:  #6B7280;   /* 카드 보조, breadcrumb */
  --text-muted:     #9CA3AF;   /* 캡션, 작성자, 비활성 */
  --text-on-primary:#FFFFFF;   /* 보라 위 텍스트 */
  --text-on-dark:   #FFFFFF;   /* 다크 섹션 위 텍스트 */
  --text-link:      #6D28D9;

  /* ── 색상 · 보더 ────────────────────────────── */
  --border-default: #E5E7EB;   /* 카드, 인풋 기본 */
  --border-soft:    #ECEEF1;   /* 테이블·카드 옅은 라인 */
  --border-light:   #F3F4F6;   /* 가장 옅은 구분선 */
  --border-strong:  #D1D5DB;   /* 강조 보더 */
  --border-focus:   #7C3AED;   /* 포커스 링 */

  /* ── 색상 · 배지 / 태그 ─────────────────────── */
  --badge-free-bg:        #7C3AED;   /* "멤버십 무료" 보라 배지 */
  --badge-free-text:      #FFFFFF;
  --badge-event-bg:       #EDE9FE;   /* "봄맞이 특별 이벤트" 캡슐 */
  --badge-event-text:     #6D28D9;
  --badge-rank-bg:        #111827;   /* TOP10 순위 (1·2·3) 검정 캡슐 */
  --badge-rank-text:      #FFFFFF;

  --tag-filter-bg:        #EDE9FE;   /* 활성 필터칩 "한글 ×" */
  --tag-filter-text:      #6D28D9;
  --tag-filter-border:    transparent;
  --tag-default-bg:       #F3F4F6;
  --tag-default-text:     #4B5563;

  /* 상태 배지 (정산) */
  --status-pending-bg:    #FEF3C7;  --status-pending-text:    #92400E;
  --status-processing-bg: #DBEAFE;  --status-processing-text: #1E40AF;
  --status-completed-bg:  #D1FAE5;  --status-completed-text:  #065F46;
  --status-rejected-bg:   #FEE2E2;  --status-rejected-text:   #991B1B;
  --status-rejected-row:  #FEF2F2;  /* 거절 행 배경 */

  /* 콜아웃 (정보·안내) */
  --callout-info-bg:     #F0F9FF;
  --callout-info-border: #BAE6FD;
  --callout-info-text:   #0C4A6E;

  /* ── 폰트 ──────────────────────────────────── */
  --font-family-base:
      "Noto Sans KR",
      "Pretendard", "Pretendard Variable",
      -apple-system, BlinkMacSystemFont,
      "Apple SD Gothic Neo",
      "Malgun Gothic", "맑은 고딕",
      "Helvetica Neue", Arial, sans-serif;
  --font-family-mono:
      ui-monospace, SFMono-Regular, "SF Mono",
      Menlo, Consolas, "Liberation Mono", monospace;

  --font-size-xs: 12px;   /* 캡션, 작성자, 카테고리 */
  --font-size-sm: 13px;   /* 본문 보조, 칩 라벨 */
  --font-size-md: 14px;   /* 본문 기본, 카드 타이틀 */
  --font-size-lg: 16px;   /* 섹션 타이틀 (TOP10 등) */
  --font-size-xl: 28px;   /* 히어로 메인 카피 ("봄 시즌 교육자료") */
  --font-size-2xl: 32px;  /* 모달 강조 카피 ("최대 30% 할인!") */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;

  /* ── 버튼 ──────────────────────────────────── */
  /* default (Primary, 보라) */
  --btn-bg:               var(--color-primary);
  --btn-text:             #FFFFFF;
  --btn-border:           transparent;
  --btn-hover-bg:         var(--color-primary-dark);
  --btn-active-bg:        #5B21B6;

  /* secondary (라인, 흰바탕) */
  --btn-secondary-bg:     #FFFFFF;
  --btn-secondary-text:   #111827;
  --btn-secondary-border: #E5E7EB;
  --btn-secondary-hover-bg: #F9FAFB;

  /* dark (모달 CTA · 히어로 CTA "지금 바로 확인하기") */
  --btn-dark-bg:          #111827;
  --btn-dark-text:        #FFFFFF;
  --btn-dark-hover-bg:    #1F2937;

  /* danger */
  --btn-danger-bg:        var(--color-danger);
  --btn-danger-text:      #FFFFFF;
  --btn-danger-hover-bg:  #DC2626;

  /* disabled */
  --btn-disabled-bg:      #F3F4F6;
  --btn-disabled-text:    #9CA3AF;
  --btn-disabled-border:  #E5E7EB;

  /* 사이즈 */
  --btn-padding-sm: 6px 12px;
  --btn-padding-md: 10px 16px;
  --btn-padding-lg: 14px 24px;
  --btn-font-size-sm: var(--font-size-sm);
  --btn-font-size-md: var(--font-size-md);
  --btn-font-size-lg: var(--font-size-lg);

  /* ── 보더 라디우스 ─────────────────────────── */
  --radius-sm:   6px;     /* 인풋, 작은 배지 */
  --radius-md:   10px;    /* 버튼, 입력칸 */
  --radius-lg:   16px;    /* 카드, 섹션 컨테이너 */
  --radius-xl:   20px;    /* 다크 CTA 박스, 큰 컨테이너 */
  --radius-pill: 9999px;  /* 필터칩, 캡슐 배지 */
  --radius-circle: 50%;   /* 아바타, 페이지네이션 닷 */

  /* ── 그림자 ────────────────────────────────── */
  --shadow-card:   0 1px 3px rgba(15, 23, 42, 0.06),
                   0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 8px 16px rgba(15, 23, 42, 0.08),
                       0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-modal:  0 25px 50px -12px rgba(15, 23, 42, 0.25),
                   0 10px 20px -8px rgba(15, 23, 42, 0.15);
  --shadow-popover:0 10px 20px rgba(15, 23, 42, 0.10),
                   0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-focus:  0 0 0 3px rgba(124, 58, 237, 0.25);

  /* ── 간격 (4의 배수 스케일) ─────────────────── */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* ── 레이아웃 ──────────────────────────────── */
  --container-max:    1280px;   /* 헤더·메인 그리드 너비 */
  --container-padding: 24px;
  --header-height:    64px;
  --grid-gap:         16px;     /* 카드 그리드 간격 */
  --card-image-ratio: 1 / 1;    /* 카드 썸네일 (정사각형) */

  /* ── 트랜지션 ──────────────────────────────── */
  --transition-fast:   120ms ease-out;
  --transition-base:   180ms ease-out;
  --transition-slow:   280ms ease-in-out;

  /* ── z-index ───────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   300;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
}