/* ============================================================
   PDS — 디자인 토큰 (pind-crm 디자인 시스템 · LOP 계승판 사본 — 값 변경은 원본과 함께)
   ============================================================
   이 파일이 디자인 시스템의 "단일 진실 원천(SSOT)" 이다.
   여기의 값을 바꾸면 사이트 전체 테마가 즉시 바뀐다.
   app.css 및 페이지 인라인 스타일은 이 토큰만 소비한다.

   구조 (3계층):
     L1 Primitives  — 원시 팔레트·크기 램프. 직접 사용 금지.
     L2 Semantic    — 역할 토큰(테마 변경 시 이 계층만 수정).
     L3 Component   — 컴포넌트 전용 + 레거시 별칭(호환 유지).

   문서: docs/06_디자인_시스템.md · docs/07_디자인_가이드라인.md
   접근성: 흰 글자를 올리는 배경은 흰색 대비 4.5:1 이상 유지.
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  /* ════════ L1. PRIMITIVES ════════ */

  /* Teal — 브랜드 램프 (500 = 브랜드 원색) */
  --teal-50:#F0FAFB;  --teal-100:#D9F2F5; --teal-200:#B3E5EC;
  --teal-300:#8FD9E2; --teal-400:#4FC3D3; --teal-500:#24B6C8;
  --teal-600:#1497AB; --teal-700:#0E7490; /* ← 흰글자 대비 5.4:1 (AA) */
  --teal-800:#0C5A6E; --teal-900:#0B4A55; --teal-950:#103A42;

  /* Gray — 텍스트/면/경계 */
  --gray-50:#F9FAFB;  --gray-100:#F3F4F6; --gray-200:#E5E7EB;
  --gray-300:#D1D5DB; --gray-400:#9CA3AF; --gray-500:#6B7280;
  --gray-700:#374151; --gray-900:#111827;

  /* Status ramps */
  --green-50:#ECFDF5;  --green-100:#DCFCE7; --green-200:#A7F3D0;
  --green-600:#16A34A; --green-700:#15803D; --green-800:#065F46;
  --amber-100:#FEF3C7; --amber-500:#F59E0B; --amber-700:#B45309;
  --red-50:#FEF2F2;    --red-100:#FEE2E2;   --red-200:#FECACA;
  --red-500:#EF4444;   --red-600:#DC2626;   --red-700:#B91C1C;
  --blue-100:#DBEAFE;  --blue-600:#2563EB;  --blue-700:#1D4ED8;
  --sky-100:#E0F2FE;   --sky-600:#0284C7;   --sky-700:#0369A1;
  --violet-100:#EDE9FE;--violet-500:#8B5CF6;--violet-600:#7C3AED;
  --cyan-100:#CFFAFE;  --cyan-700:#0E7490;
  --mint-100:#CCFBF1;  --mint-700:#0F766E;
  --rose-100:#FFE4E6;  --rose-600:#E11D48;
  --slate-100:#F1F5F9; --slate-400:#94A3B8; --slate-600:#475569;
  --indigo-600:#4F46E5; --tealx-600:#0D9488;

  /* Typography */
  --font-sans:'Pretendard Variable',Pretendard,'Noto Sans KR',-apple-system,'Malgun Gothic',sans-serif;
  --font-mono:'JetBrains Mono',Consolas,monospace;
  --fs-caption:12px;   --fs-body-sm:13px;  --fs-body:13.5px; --fs-body-lg:14px;
  --fs-title-sm:15px;  --fs-title:16px;    --fs-h2:18px;
  --fs-page-title:24px;--fs-kpi:28px;
  --lh-body:1.55;      --lh-tight:1.3;

  /* Spacing (4px 그리드) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px;

  /* Radius · Shadow · Z-index */
  --radius-card:14px; --radius-input:8px; --radius-button:8px;
  --radius-chip:6px;  --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(16,24,40,.06);
  --shadow-popover:0 12px 24px rgba(16,24,40,.14);
  --shadow-drawer:0 24px 48px rgba(16,24,40,.35);
  --z-nav:100; --z-scrim:99; --z-popover:80; --z-sticky:40;

  /* ════════ L2. SEMANTIC — 테마는 여기서 바꾼다 ════════ */

  /* 브랜드 vs 액션 분리:
     brand   = 시각적 아이덴티티(로고·장식·포커스 링) — 밝아도 됨
     primary = 클릭 가능한 것(버튼·링크·활성 상태) — AA 대비 필수 */
  --brand:var(--teal-500);
  --brand-soft:var(--teal-100);
  --primary:var(--teal-700);
  --primary-hover:var(--teal-800);
  --primary-dark:var(--teal-900);
  --link:var(--teal-700);
  --focus-ring:var(--teal-700);
  --focus-shadow:0 0 0 3px rgba(14,116,144,.18);

  /* 면 · 텍스트 · 경계 */
  --page-bg:#F6F8FA;
  --surface:#FFFFFF;
  --surface-subtle:var(--gray-50);
  --text-primary:var(--gray-900);
  --text-secondary:var(--gray-700);
  --text-muted:var(--gray-500);
  --text-disabled:var(--gray-400);
  --border:var(--gray-200);
  --border-strong:var(--gray-300);
  --hover:var(--gray-100);

  /* 상태 (텍스트·흰글자 배경으로 써도 AA 통과하는 진한 값) */
  --success:var(--green-700);        --success-bg:var(--green-100);
  --warning:var(--amber-500);        --warning-strong:var(--amber-700); --warning-bg:var(--amber-100);
  --danger:var(--red-600);           --danger-hover:var(--red-700);     --danger-bg:var(--red-100);
  --info:var(--blue-600);            --info-bg:var(--blue-100);

  /* ════════ L3. COMPONENT ════════ */

  /* Sidebar / TopBar / 레이아웃 규격 */
  --sidebar-bg:var(--teal-950);
  --sidebar-active:#155A63;
  --sidebar-text:#D7EEF2;
  --sidebar-muted:#7EA7AE;
  --sidebar-width:206px;
  --sidebar-width-mobile:264px;
  --topbar-height:60px;
  --input-height:40px;
  --input-height-mobile:44px;   /* 터치 타깃 ≥44px */
  --btn-height:38px;
  --btn-height-mobile:42px;

  /* Chip / Badge 페어 (bg·fg — fg는 bg 위 4.5:1 이상) */
  --chip-prod-bg:var(--mint-100);   --chip-prod-fg:var(--mint-700);
  --chip-part-bg:var(--blue-100);   --chip-part-fg:var(--blue-700);
  --chip-app-bg:var(--violet-100);  --chip-app-fg:var(--violet-600);
  --chip-stage-bg:var(--sky-100);   --chip-stage-fg:var(--sky-700);
  --chip-doc-bg:var(--rose-100);    --chip-doc-fg:var(--rose-600);
  --chip-rel-bg:var(--slate-100);   --chip-rel-fg:var(--slate-600);
  --pill-ok-bg:var(--green-100);    --pill-ok-fg:var(--green-700);
  --pill-warn-bg:var(--amber-100);  --pill-warn-fg:var(--amber-700);
  --pill-bad-bg:var(--red-100);     --pill-bad-fg:var(--red-600);
  --pill-mut-bg:var(--slate-100);   --pill-mut-fg:var(--slate-600);
  --pill-info-bg:var(--blue-100);   --pill-info-fg:var(--blue-700);
  --pill-cyan-bg:var(--cyan-100);   --pill-cyan-fg:var(--cyan-700);
  --pill-purple-bg:var(--violet-100);--pill-purple-fg:var(--violet-600);

  /* Admin 전용 표식 — 붉은 계열. admin 에게만 허용된 기능·메뉴·카드에 일관 적용 (06 §3.6 / 07 §3) */
  --admin-accent:var(--red-600);   /* 강조 텍스트·보더 (흰 배경 위 AA) */
  --admin-bg:var(--red-50);        /* 배지·연한 배경 */
  --admin-border:var(--red-200);   /* 배지 테두리 */
  --admin-nav:var(--red-200);      /* 어두운 사이드바 위 메뉴 텍스트 (대비 확보용 밝은 값) */

  /* 소스 아이콘(CF/JI/BX/WEB) · 활동 타입 */
  --src-cf:var(--indigo-600); --src-ji:var(--sky-600);
  --src-bx:var(--tealx-600);  --src-web:var(--primary);
  --act-call:var(--success);  --act-email:var(--info);
  --act-meeting:var(--violet-500); --act-visit:var(--amber-700);
  --act-note:var(--slate-400);

  /* ── 레거시 별칭 (기존 마크업 인라인 var() 호환 — 삭제 금지) ── */
  --teal:var(--primary); --teal-dark:var(--primary-dark); --teal-light:var(--teal-300);
  --purple:var(--violet-500); --pink:var(--danger); --blue:var(--info);
  --strong:var(--text-primary); --body:var(--text-secondary); --sub:var(--text-muted);
  --hair:var(--border); --bg:#fff; --bg2:var(--page-bg);
  --tint:#E9F7F9; --tint-pink:var(--red-50); --field:#fff;
  --focus:var(--primary); --shell:var(--sidebar-bg);
  --green:var(--success); --orange:var(--warning);
}

/* ============================================================
   테마 프리셋 예시 — 아래 블록의 주석을 해제하면 L2만 바뀌어
   사이트 전체가 재도색된다. (L1·L3 는 손대지 않는다)
   ============================================================

:root{ — Navy 프리셋 —
  --brand:#3B82F6; --primary:#1D4ED8; --primary-hover:#1E40AF;
  --primary-dark:#1E3A8A; --link:#1D4ED8; --focus-ring:#1D4ED8;
  --focus-shadow:0 0 0 3px rgba(29,78,216,.18);
  --sidebar-bg:#0F1E3D; --sidebar-active:#1C3260;
  --sidebar-text:#D6E4FF; --sidebar-muted:#7E93B8;
}

:root{ — Graphite 프리셋 —
  --brand:#64748B; --primary:#334155; --primary-hover:#1E293B;
  --primary-dark:#0F172A; --link:#334155; --focus-ring:#334155;
  --focus-shadow:0 0 0 3px rgba(51,65,85,.18);
  --sidebar-bg:#111827; --sidebar-active:#1F2937;
  --sidebar-text:#E5E7EB; --sidebar-muted:#6B7280;
}
============================================================ */