/* ════════════════════════════════════════════
   웃는생각 OS 디자인 토큰 — 단일 출처 (스펙 2026-06-10)
   규칙: 화면 CSS는 --ws-* 만 참조. 리터럴 색상 금지.
   ════════════════════════════════════════════ */
:root {
  /* 브랜드 */
  --ws-primary:        #3182F6;
  --ws-primary-hover:  #1B64DA;
  --ws-primary-active: #1957C2;
  --ws-primary-soft:   #EBF3FE;
  /* 텍스트 */
  --ws-text-strong: #191F28;
  --ws-text:        #4E5968;
  --ws-text-muted:  #8B95A1;
  /* 보조 텍스트 단계 (지시서 §2 — gray-500 보조 / gray-300 힌트) */
  --ws-text-sub:    #6B7684;
  --ws-text-hint:   #B0B8C1;
  /* 서피스/보더 — 보더 색은 하나만 쓴다(지시서 §1) */
  --ws-border:       #D1D6DB;
  --ws-border-light: #EDF0F4;
  --ws-bg:           #F4F6F9;
  --ws-bg-subtle:    #F9FAFB;
  --ws-surface:      #FFFFFF;
  --ws-surface-alt:  #F4F7FB;   /* 보조 서피스(hover·연한 패널) — SCM 팀 페이지 다수 참조(미정의였음) */
  /* SCM 팀 페이지가 참조하나 미정의였던 토큰 보강(라이트·다크 양쪽 먹통 해소) */
  --ws-text-primary: var(--ws-text-strong);   /* 본문 강조색 별칭(다크서 자동 전환) — 입력 글자색 */
  --ws-bg-hover:     #ECEFF3;                  /* 행/버튼 hover 배경 */
  /* 시맨틱 */
  --ws-success:      #0F6E56;
  --ws-success-soft: #E8F8F0;
  --ws-warning:      #9B6010;
  --ws-warning-soft: #FFF7E6;
  --ws-danger:       #A32D2D;
  --ws-danger-soft:  #FDEDEE;
  --ws-info:         #1957C2;
  --ws-info-soft:    #EBF3FE;
  --ws-purple:       #6B4EE6;   /* 메뉴 칩·보조 분류용 (지시서 §1) */
  --ws-purple-soft:  #F0EBFF;
  /* 형태 — 라운드는 이 4단계만. 혼용 금지 (지시서 §5) */
  --ws-radius-card:  20px;   /* 카드 */
  --ws-radius-inner: 14px;   /* 카드 안 하위 블록 */
  --ws-radius-btn:   12px;   /* 버튼·입력·메뉴 등 컨트롤 */
  --ws-radius-badge: 8px;    /* 배지·칩 */
  --ws-radius-pill:  999px;
  --ws-radius:       var(--ws-radius-inner);
  --ws-radius-sm:    var(--ws-radius-badge);
  /* 그림자 — 면에는 이것 하나. 강한 그림자 금지 (지시서 §1·§5) */
  --ws-shadow-card:  0 1px 2px rgba(25,31,40,.04);
  --ws-shadow-rest:  var(--ws-shadow-card);
  --ws-shadow-hover: 0 2px 8px rgba(25,31,40,.07);
  /* 타이포 */
  --ws-font: 'Pretendard Variable', Pretendard, -apple-system, 'Noto Sans KR', sans-serif;
  --ws-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  /* 타이포 (지시서 §2) */
  --ws-fs-display:  26px;   /* 페이지 제목·인사말·KPI 큰 숫자 — 800 */
  --ws-fs-title:    16px;   /* 카드 제목 — 700 */
  --ws-fs-h3:       15px;
  --ws-fs-subtitle: var(--ws-fs-h3);
  --ws-fs-body:     14px;
  --ws-fs-caption:  12px;
  --ws-fs-label:    12px;   /* 섹션 라벨 — 700 */
  --ws-transition-fast: all .15s ease;
  /* 간격 스케일 (대표 지시서 2026-08-10) — 이 8단계 밖의 값은 쓰지 않는다.
     제각각인 여백이 정렬을 깨뜨린다. 묶음 안은 좁게, 묶음 사이는 그 2배 이상. */
  --ws-sp-1: 4px;   --ws-sp-2: 8px;   --ws-sp-3: 12px;  --ws-sp-4: 16px;
  --ws-sp-5: 20px;  --ws-sp-6: 24px;  --ws-sp-8: 32px;  --ws-sp-10: 40px;
  /* 레이아웃 골격 */
  --ws-sidebar-w: 250px;
  --ws-header-h:  64px;
  /* 구식 별칭(코드 곳곳에서 옛 이름으로 참조 — 단일 출처 유지 위해 표준 토큰에 매핑) */
  --ws-accent:         var(--ws-primary);
  --ws-bg-alt:         var(--ws-bg-subtle);
  --ws-bg-main:        var(--ws-bg);
  --ws-bg-muted:       var(--ws-bg-subtle);
  --ws-text-secondary: var(--ws-text);
  --ws-error:          var(--ws-danger);
  --ws-error-bg:       var(--ws-danger-soft);
  --ws-success-bg:     var(--ws-success-soft);
  --ws-warning-bg:     var(--ws-warning-soft);
  --ws-info-bg:        var(--ws-info-soft);
}
body.dark-mode {
  --ws-primary:        #4D94FF;
  --ws-primary-hover:  #6BA6FF;
  --ws-primary-active: #3182F6;
  --ws-primary-soft:   rgba(77,148,255,.14);
  --ws-text-strong: #F1F4FB;
  --ws-text:        #C3CAD9;
  --ws-text-muted:  #7C87A8;
  --ws-text-sub:    #9AA3BC;   /* 다크 보조 텍스트 */
  --ws-text-hint:   #6A7490;   /* 다크 힌트 */
  --ws-border:       #2A3349;
  --ws-border-light: #232C42;
  --ws-bg:           #0E1322;
  --ws-bg-subtle:    #121829;
  --ws-surface:      #181F33;
  --ws-surface-alt:  #1F2740;   /* 다크 보조 서피스 */
  --ws-bg-hover:     #232C42;   /* 다크 hover 배경 (--ws-text-primary·--ws-radius는 :root 상속) */
  --ws-success:      #5FD4A8;
  --ws-success-soft: rgba(95,212,168,.13);
  --ws-warning:      #F4B860;
  --ws-warning-soft: rgba(244,184,96,.13);
  --ws-danger:       #F08C8C;
  --ws-danger-soft:  rgba(240,140,140,.13);
  --ws-info:         #6BA6FF;
  --ws-info-soft:    rgba(107,166,255,.14);
  --ws-purple:       #A18CFF;
  --ws-purple-soft:  rgba(161,140,255,.14);
  --ws-shadow-card:  0 1px 2px rgba(0,0,0,.3);
  --ws-shadow-rest:  var(--ws-shadow-card);
  --ws-shadow-hover: 0 2px 8px rgba(0,0,0,.4);
}