/* WEB DOCTOR OS 관리자 디자인 토큰 — 중앙 관리되는 CSS 변수.
   Design System 개편(2026, "고급 B2B SaaS 운영도구" 방향) — Toss/Apple류의
   절제된 미니멀 SaaS 감성을 참고하되 특정 서비스를 복제하지 않는다.
   이번 개편은 시각 토큰(색/타이포/간격/반경/그림자)만 다루며, API/상태기계/
   라우트/인증 등 기능은 전혀 건드리지 않는다. 라이트 모드만 지원한다. */

:root {
  /* ── 배경/표면/경계선 ─────────────────────────────────────────────── */
  /* 기존 차가운 blue-gray(#f6f7f9) 대신 아주 살짝 warm한 neutral로
     조정 — 2026년형 SaaS workspace들이 공통적으로 쓰는 톤(완전한 회색도
     완전한 흰색도 아닌, 종이에 가까운 배경). 채도가 매우 낮아 다른
     24개 화면에도 안전하게 적용된다(경계선/텍스트 대비는 그대로 유지). */
  --wd-color-bg: #f7f6f4;
  --wd-color-surface: #ffffff;
  --wd-color-surface-muted: #f9f8f6;
  --wd-color-surface-sunken: #f1f0ed;
  --wd-color-border: #e8e6e1;
  --wd-color-border-strong: #d6d3cc;

  /* ── 텍스트 ───────────────────────────────────────────────────────── */
  --wd-color-text-primary: #16181d;
  --wd-color-text-secondary: #565c6a;
  --wd-color-text-tertiary: #8b909c;
  --wd-color-text-inverse: #ffffff;

  /* ── 브랜드 ───────────────────────────────────────────────────────── */
  --wd-color-primary: #2454e6;
  --wd-color-primary-hover: #1c42c4;
  --wd-color-primary-bg: #eef2ff;
  --wd-color-primary-strong: #17348f;

  /* ── 시맨틱 상태 색 ───────────────────────────────────────────────── */
  --wd-color-danger: #d0342c;
  --wd-color-danger-bg: #fdecec;
  --wd-color-warning: #b4690e;
  --wd-color-warning-bg: #fdf3e2;
  --wd-color-success: #157347;
  --wd-color-success-bg: #e9f7ef;
  --wd-color-neutral: #5b6270;
  --wd-color-neutral-bg: #eef0f3;

  /* KPI/도메인 카드 accent 전용 — 카드 전체를 칠하지 않고 아이콘/작은
     background tint로만 사용한다(요구사항: 색만으로 의미 전달 금지, 텍스트
     라벨을 항상 병행). */
  --wd-color-accent-blue: #2454e6;
  --wd-color-accent-blue-bg: #eef2ff;
  --wd-color-accent-amber: #b4690e;
  --wd-color-accent-amber-bg: #fdf3e2;
  --wd-color-accent-red: #d0342c;
  --wd-color-accent-red-bg: #fdecec;
  --wd-color-accent-orange: #c2410c;
  --wd-color-accent-orange-bg: #fdece2;
  --wd-color-accent-violet: #7c3aed;
  --wd-color-accent-violet-bg: #f4eefe;
  --wd-color-accent-green: #157347;
  --wd-color-accent-green-bg: #e9f7ef;

  /* 우선순위 배지 전용 토큰(색상만으로 상태 표현 금지, 텍스트 배지 병행) */
  --wd-priority-critical-fg: #a3231c;
  --wd-priority-critical-bg: #fdecec;
  --wd-priority-high-fg: #b4690e;
  --wd-priority-high-bg: #fdf3e2;
  --wd-priority-normal-fg: #3a4150;
  --wd-priority-normal-bg: #eef0f3;
  --wd-priority-low-fg: #8b909c;
  --wd-priority-low-bg: #f4f5f7;

  /* focus ring */
  --wd-focus-ring: 0 0 0 3px var(--wd-color-primary-bg);
  --wd-focus-border: var(--wd-color-primary);

  /* ── Sidebar(다크 네이비) — 사용자가 준 실제 레퍼런스(배민 사장님
     앱/토스페이먼츠 관리자)의 "항상 떠있는 진한 네이비 anchor" 톤을
     참고했다. 그 화면들은 상단 tab bar가 어두운데, WEB DOCTOR는 좌측
     Sidebar가 그 자리(항상 보이는 메인 네비게이션)를 맡고 있어 그대로
     옮겼다 — 본문/Header는 계속 밝은 톤을 유지한다(전체를 다크모드로
     바꾸는 것이 아니라 Sidebar 하나만의 accent). */
  --wd-sidebar-bg: #14161f;
  --wd-sidebar-bg-hover: #1c1f2b;
  --wd-sidebar-bg-active: #232738;
  --wd-sidebar-border: #262a38;
  --wd-sidebar-text: #9aa0ae;
  --wd-sidebar-text-hover: #e7e9ee;
  --wd-sidebar-text-active: #ffffff;
  --wd-sidebar-icon: #7a8093;
  --wd-sidebar-group-title: #676d7d;
  /* 어두운 배경에서는 기존 --wd-color-primary(#2454e6)가 채도/명도
     대비상 조금 죽어 보여, sidebar 전용으로 살짝 밝힌 accent를 쓴다. */
  --wd-sidebar-accent: #5b8bf7;
  --wd-sidebar-accent-bg: rgba(91, 139, 247, 0.16);

  /* ── 간격(spacing) — 4의 배수 스케일 ─────────────────────────────── */
  --wd-space-1: 4px;
  --wd-space-2: 8px;
  --wd-space-3: 12px;
  --wd-space-4: 16px;
  --wd-space-5: 20px;
  --wd-space-6: 24px;
  --wd-space-8: 32px;
  --wd-space-10: 40px;
  --wd-space-12: 48px;
  --wd-space-16: 64px;

  /* 페이지/카드 레이아웃 전용 spacing 별칭(요구사항: 페이지 padding
     24~32px, 카드 padding 20~24px, section gap 20~28px) */
  --wd-page-padding: var(--wd-space-8);
  --wd-card-padding: var(--wd-space-6);
  --wd-section-gap: var(--wd-space-6);

  /* ── 모서리(radius) ───────────────────────────────────────────────── */
  --wd-radius-sm: 6px;
  --wd-radius-md: 8px;
  --wd-radius-lg: 12px;
  --wd-radius-xl: 16px;
  --wd-radius-pill: 999px;

  /* ── 그림자(과도한 사용 금지 — surface 구분이 필요한 곳에만) ───────── */
  --wd-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --wd-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --wd-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --wd-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);

  /* ── 레이아웃 ─────────────────────────────────────────────────────── */
  /* 실사용자 지시(2026-08-29): "좌측사이드바를 지금보다 50% 더키워" —
     232px → 348px(1.5배). 아래 텍스트 크기 관련 sidebar 전용 값들도
     같이 키웠다(다른 화면 typography 토큰과는 별개로 사이드바만 조정). */
  --wd-sidebar-width: 348px;
  /* CONTROL CENTER VISUAL REDESIGN V2 — Header가 Main content와 더
     자연스럽게 이어지도록 76px → 68px로 축소. */
  --wd-header-height: 68px;
  --wd-content-max-width: 1600px;

  /* ── 폰트 ── Pretendard를 최우선으로 시도하되, 이 프로젝트는 폰트
     파일을 자체 호스팅하지 않고 외부 CDN도 쓰지 않는다("외부 웹폰트
     의존 없이" 원칙 유지). 다음으로 "Noto Sans KR"을 명시했다 —
     PowerShell로 이 PC의 설치 폰트 목록을 직접 확인한 결과 Noto Sans
     KR이 Thin~Black 전체 weight로 실제 설치돼 있다(Malgun Gothic보다
     기하학적이고 절제된 인상, 여러 모던 한국 SaaS가 쓰는 폰트와 같은
     계열) — CSS에 이름만 적어두고 "적용됨"이라 보고하지 않기로 한
     원칙에 따라 실제 확인 후 추가했다. Pretendard가 없으면 Noto Sans
     KR로, 그마저 없으면(다른 PC) Malgun Gothic으로 안전하게 폴백된다. */
  --wd-font-sans: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system,
    BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Segoe UI", sans-serif;

  /* Typography scale — CONTROL CENTER VISUAL REDESIGN V2 확정 기준
     (Page/Section/Panel/Metric/Body/Table/Secondary/Metadata). 11px
     미만 사용 금지 원칙에 따라 --wd-font-size-xs가 최소값이다.
     실사용자 지시(2026-08-29): "텍스트가 너무 작아... 공간도 엄청 많은데"
     — 디자인(레이아웃/색/컴포넌트 구조)은 그대로 두고 이 스케일 값만
     전체적으로 키운다(상대적 위계는 유지, 절대 크기만 확대). 이 토큰
     하나만 바꾸면 앱 전체 텍스트에 그대로 반영된다. */
  --wd-font-size-xs: 13px;      /* metadata */
  --wd-font-size-sm: 14px;      /* secondary */
  --wd-font-size-table: 15px;   /* table */
  --wd-font-size-base: 16px;    /* body / card title */
  --wd-font-size-md: 17.5px;    /* panel title / subsection */
  --wd-font-size-lg: 20px;      /* section title */
  --wd-font-size-xl: 26px;      /* (레거시 호환) */
  --wd-font-size-title: 31px;   /* page title */
  --wd-font-size-2xl: 31px;     /* (레거시 호환) */
  --wd-font-size-metric: 35px;  /* KPI/metric 강조 숫자(hero 강조) */
  --wd-font-size-3xl: 35px;     /* 대형 KPI(선택적으로 사용) */

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

  --wd-line-height-tight: 1.3;
  --wd-line-height-body: 1.5;
}