/* =============================================================================
 * casty — Design Tokens (Color)
 * -----------------------------------------------------------------------------
 * 이 파일은 개발자 참조/핸드오프용입니다.
 * 실제 정의는 casty.html 의 helmet <style> 안 :root 에 동일하게 들어 있습니다.
 * (casty.html 은 escape 된 JSON 번들이라 직접 보기 어려워 별도 추출)
 *
 * - 색을 바꿀 땐 :root 의 해당 토큰 1줄만 고치면 사용처 전체에 반영됩니다.
 * - 코드 전역에서 color/background/border 등은 var(--토큰) 으로 참조합니다(총 477곳).
 * - 정의서: color-system.md (§6), typography-system.md
 * - 최종 갱신: 2026-06-30
 * ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------- */
  --brand:            #64FFE0;   /* 주요 강조·활성/선택·숫자 하이라이트   (67) */
  --brand-hover:      #55D9BE;   /* 브랜드 버튼 호버                       (5) */
  --brand-light:      #9BFFE9;   /* 연한 강조(활발 칩 등)                  (1) */
  --on-brand:         #07120B;   /* 브랜드 배경 위 텍스트/아이콘           (15) */

  /* --- Surface (불투명, 밝기 순) ---------------------------------------- */
  --surface-1:        #0C0E13;   /* 모달·패널·아이콘 배경                  (9) */
  --bg:               #0E1014;   /* 앱 최하단 배경(body/메인)              (6) */
  --sidebar:          #101216;   /* 사이드바 배경                          (2) */
  --surface-select:   #14181F;   /* native select 옵션 배경                (1) */
  --card:             #181A20;   /* 카드 표면(후보·요약 카드)              (9) */
  --surface-disabled: #1A1E26;   /* 비활성 버튼 표면                       (4) */
  --surface-tooltip:  #1C2128;   /* 미세 보더·툴팁 표면                    (3) */

  /* --- Text (그레이 위계) ----------------------------------------------- */
  --text-1:           #E8EAED;   /* Primary  — 본문/핵심                   (50) */
  --text-2:           #CFD3D9;   /* Secondary— 보조 본문·라벨              (34) */
  --text-3:           #9AA0AA;   /* Tertiary — 설명·메타                   (44) */
  --text-muted:       #686D76;   /* Muted    — 캡션·섹션 라벨·placeholder  (46) */
  --text-faint:       #5A606B;   /* Faint    — 가장 희미한 보조 텍스트/아이콘 (4) */
  --text-disabled:    #4B515B;   /* Disabled — 비활성 컨트롤               (7) */

  /* --- White alpha (중립 테두리·표면 틴트, 6단계) ----------------------- */
  --w-03:  rgba(255,255,255,.03);  /* 가장 옅은 표면 틴트(입력필드 등)     (24) */
  --w-08:  rgba(255,255,255,.08);  /* 옅은 테두리·디바이더                 (21) */
  --w-12:  rgba(255,255,255,.12);  /* 기본 테두리                         (34) */
  --w-16:  rgba(255,255,255,.16);  /* 또렷한 테두리                       (21) */
  --w-24:  rgba(255,255,255,.24);  /* 강조/호버 테두리                    (11) */
  --w-34:  rgba(255,255,255,.34);  /* 최강 테두리·호버                    (12) */

  /* --- Brand alpha (강조 틴트·테두리, 4단계, .08 앵커 고정) ------------- */
  --b-08:  rgba(100,255,224,.08);  /* 가장 옅은 강조 틴트(배경·아이콘)     (8) */
  --b-12:  rgba(100,255,224,.12);  /* 옅은 강조 배경                       (6) */
  --b-25:  rgba(100,255,224,.25);  /* 강조 테두리                         (4) */
  --b-45:  rgba(100,255,224,.45);  /* 강한/활성 테두리·하이라이트          (10) */

  /* --- Semantic --------------------------------------------------------- */
  --warning:          #FBBF24;   /* 경고(채널 0개·충전 필요·warn 토스트)   (4) */
  --danger:           #F87171;   /* 위험(제거·토큰 부족)                   (3) */
  --info:             #A5B4FC;   /* 정보/광고(텍스트). AD 배경은 #6366F1 계열 (1) */
  /* Success 는 별도 색 없이 --brand(#64FFE0) 사용 */

  /* --- Misc ------------------------------------------------------------- */
  --tooltip-bg:       #F4F6F8;   /* 국기 호버 툴팁 배경(밝은 고대비)        (2) */
  --white:            #FFF;      /* 이미지/오버레이 위 순수 흰색            (9) */
}

/* =============================================================================
 * 토큰화하지 않고 raw 로 둔 색 (의도)
 * -----------------------------------------------------------------------------
 * 일회성 오버레이·그림자·시맨틱 알파 등 재사용성이 낮아 변수화하지 않음:
 *   - 검정 오버레이/그림자:  rgba(0,0,0, .35/.40/.42/.45/.50/.55/.82)
 *   - 모달 백드롭:           rgba(6,8,11,.82)
 *   - 썸네일 그라데이션/오버레이: rgba(8,12,16, …), rgba(12,14,19,.4), rgba(14,16,20,0)
 *   - 시맨틱 알파(1회용):    rgba(251,191,36, .4/.08)  warning
 *                            rgba(248,113,113, .5/.08) danger
 *                            rgba(99,102,241, .85/.9/.14) info/AD(#6366F1)
 *   - 영상 카드 배경(HSL):   hsl(220 7% 17%) → hsl(220 6% 12%)  (그라데이션)
 * ========================================================================== */

/* 사용 예시
 * .some-text   { color: var(--text-1); }
 * .some-card   { background: var(--card); border: 1px solid var(--w-12); }
 * .save-btn    { background: var(--brand); color: var(--on-brand); }
 */


/* =============================================================================
 * Typography / Radius / Spacing 스케일
 * -----------------------------------------------------------------------------
 * ⚠️ 색과 달리 아래는 CSS 변수로 구현돼 있지 않습니다(코드엔 px 값으로 직접 들어감).
 *    "지켜야 할 스케일(규칙)"로 참조하세요. 새 작업 시 목록 밖 값은 쓰지 않습니다.
 *    상세: typography-system.md / color-system.md
 * ========================================================================== */

/* --- Typography ----------------------------------------------------------- *
 * Font  : Pretendard (가변, weight 45–920) · fallback system-ui, sans-serif
 *
 * Size scale (px) — 목록 밖 금지:
 *   Caption  10 · 11 · 12 · 13
 *   Body     13 · 14
 *   Subtitle 15 · 16 · 18 · 20
 *   Title    20 · 24 · 28 · 32
 *   Display  36 · 40
 *   (현재 코드 사용: 10,11,12,13,14,15,16,18,20,24,28,32,40)
 *
 * Weight : 500(Medium·본문/라벨) · 600(SemiBold·버튼/서브타이틀) · 700(Bold·제목/숫자)
 *          ※ 800 폐지
 *
 * Line-height : Display/Title 1.3 · Subtitle 1.4 · Body 1.6 · Caption 1.4
 *
 * Letter-spacing (% = em, CSS는 %미지원이라 코드엔 em) :
 *   Tight  -2% (-0.02em)  큰 제목·서브타이틀(18px↑)
 *   Default-1% (-0.01em)  본문·기본 (루트 래퍼에 전역 적용)
 *   Wide   +2% ( 0.02em)  작은 라벨·메타(12px↓)
 *
 * Text color : 위 :root --text-1 ~ --text-disabled 참조
 * ------------------------------------------------------------------------- */

/* --- Radius (px) ---------------------------------------------------------- *
 *   6   tiny (진행바·v1.0 배지)
 *   8   작은 배지·칩 (타입라벨·AD·도달칩)
 *   10  버튼·컨트롤 (주력)
 *   12  카드·영상 썸네일·발굴 버튼
 *   16  크리에이터 카드·모달
 *   20  키워드 칩·라이트박스 (pill 성격)
 *   50% 원형 (아바타·라디오·국기 뱃지)
 * ------------------------------------------------------------------------- */

/* --- Spacing (px) — padding / gap / margin ------------------------------- *
 * 기본 4px 그리드 + 2(half-step). 컴포넌트 의도값으로 6·10·30 일부 잔존.
 *   2 · 4 · 6 · 8 · 10 · 12 · 16 · 20 · 24 · 32 · 36 · 40 · 48 · 60 · 64 · 80 · 100
 *   - 주력:   8(최다) · 16 · 12 · 4 · 24 · 20
 *   - 잔존 off-grid(의도): 6(gap 다수) · 10(컨트롤) · 30(소수)
 *   - 큰 값:  80(빈 상태) · 100(스크롤 영역 하단 여백)
 * ------------------------------------------------------------------------- */