/* ==========================================================================
   스마트 웰페어 — 디자인 토큰  v2.0  (2026-09-10)
   위치: public/css/tokens.css   →   URL: /css/tokens.css

   [v1 에서 바뀐 점 — 반드시 읽어주세요]
   v1 은 --accent / --st-* 라는 새 이름을 도입했는데, index.html 에 이미
   --tenant-* / --status-* 16개가 깔끔하게(선언 16·사용 16·미정의 0) 살아
   있었습니다. 그래서 v2 는 기존 이름을 정본으로 두고 **덧붙이기만** 합니다.
   기존 var() 호출부는 한 곳도 고칠 필요가 없습니다.

   [로드 순서]
   <link rel="stylesheet" href="/css/tokens.css">   ← index.html 의 <style> 보다 먼저
   그 뒤에 기존 인라인 <style> 이 오면, 인라인이 이기므로 안전합니다.
   토큰을 실제로 쓰려면 인라인 <style> 의 :root 블록을 지우고 이 파일에 맡깁니다.

   [건드리지 않는 것]
   --tenant-primary / -secondary / -text : 기관 브랜드. DB(mod_sys_tenants)가 정본이고
     routes/tenantTheme.js 가 런타임 주입합니다. CSS 는 폴백만 제공합니다.
   --status-* : 상태 의미색. 기관 브랜드와 무관하게 고정 — 기존 코드 주석의 원칙 그대로.
   ========================================================================== */

/* ==========================================================================
   0. 기존 16개 토큰 — 값 보존 (pending 글자색 1개만 접근성 수정)
   ========================================================================== */
:root{
  /* 기관 브랜드 폴백. 실제 값은 GET /api/v1/tenant-theme → setProperty 로 주입되고,
     <head> 동기 스크립트가 localStorage 캐시로 첫 페인트 전에 먼저 반영합니다.
     여기 값은 "캐시도 없고 API 도 아직 안 온" 최초 방문 순간에만 보입니다.
     그래서 특정 기관 색이 아니라 중립 남색을 둡니다 — 어느 기관에서도 튀지 않습니다. */
  --tenant-primary:   #46508C;
  --tenant-secondary: #333A66;
  --tenant-text:      #222222;

  --text-subtle:   #666666;   /* 5.74:1 on 흰색 — AA */
  --surface-subtle:#F5F5F7;

  --z-modal: 1000;

  /* 상태 의미색 — 완료/오류/대기/비활성 */
  --status-success-bg:  #E8F5E9;  --status-success-text:  #1E4A1A;  /* 9.11:1 AAA */
  --status-danger-bg:   #FDECEA;  --status-danger-text:   #B00020;  /* 6.41:1 AA  */
  --status-pending-bg:  #FFF4E5;  --status-pending-text:  #9C5E00;  /* 4.81:1 AA  ← 수정 */
  --status-neutral-bg:  #EEEEEE;  --status-neutral-text:  #555555;  /* 6.43:1 AA  */
  /* ↑ pending 만 바뀜: #B06A00 은 3.94:1 로 AA 미달이었습니다.
        배경을 밝혀선 4.12 까지밖에 못 올라가 글자색을 낮췄습니다(색조 동일). */

  /* --link-blue / --focus-ring 은 아래 "사용자 UI 테마"가 구동합니다.
     이름은 그대로 두어 기존 호출부 호환을 유지합니다. */
  --link-blue:  var(--ui-accent);
  --focus-ring: var(--ui-accent);
}

/* ==========================================================================
   1. 신규 — 사용자 UI 테마 (파랑 / 보라)

   기관 브랜드(--tenant-*)와는 **다른 축**입니다.
     · --tenant-*  = 기관이 정함, DB 저장, 헤더 로고·브랜드 요소
     · --ui-accent = 사용자가 고름, localStorage, 링크·포커스·활성메뉴·선택행
   기존에도 --link-blue(#1967D2)가 --tenant-primary 와 별개로 존재했으므로,
   이 분리는 새로 만드는 개념이 아니라 이미 있던 구분을 이어받는 것입니다.

   전환: <html class="ui-theme-violet">  (없으면 파랑)
   ========================================================================== */
:root{                        /* 파랑 — 기본값 */
  --ui-accent:        #4067A9;   /* 5.63:1 on 흰색 · 4.77:1 on tint — AA */
  --ui-accent-hover:  #365895;
  --ui-accent-tint:   #E5EDF9;   /* 활성 메뉴·선택행 배경 */
  --ui-page:          #F4F7FC;
  --ui-header-fill:   #EAF0F8;
  --ui-border:        #D3DDEA;
  --ui-border-soft:   #E6ECF4;
  --ui-btn-primary:   #66758F;   /* 흰 글자 4.66:1 — AA */
  --ui-btn-primary-hover:#5A6880;
}

html.ui-theme-violet{         /* 보라 */
  --ui-accent:        #5C4AA5;   /* 7.05:1 on 흰색 · 5.74:1 on tint — AAA/AA */
  --ui-accent-hover:  #4E3E8E;
  --ui-accent-tint:   #EBE5F8;
  --ui-page:          #F7F5FC;
  --ui-header-fill:   #F0ECF8;
  --ui-border:        #DBD5EA;
  --ui-border-soft:   #EBE7F4;
  --ui-btn-primary:   #767093;   /* 흰 글자 4.66:1 — AA */
  --ui-btn-primary-hover:#6A6486;
}

/* ==========================================================================
   2. 신규 — 면·글자·회색 계열
   인라인 CSS 에 #F5F5F5 / #F0F0F0 / #FAFAFA / #F5F6F8 네 가지 회색이
   혼용되어 있었습니다. 앞으로는 아래 세 개로만 씁니다.
   ========================================================================== */
:root{
  --surface:      #FFFFFF;   /* 카드·표 본문 */
  --surface-alt:  #FAFBFC;   /* 행 hover·연한 구분 면 */
  /* --surface-subtle #F5F5F7 는 기존 값 유지 (세 번째 단계) */

  --ink:            var(--tenant-text);   /* 본문 글자 = 기관 글자색 */
  --ink-muted:      #56606E;   /* 6.38:1 on 흰색 — AA */
  --ink-placeholder:#6E7683;   /* 4.58:1 on 흰색 — AA (v1 #9AA0AC 는 2.63 로 미달) */
  --ink-on-accent:  #FFFFFF;

  --overlay: rgba(34,34,34,.38);
  --sh-card: 0 1px 2px rgba(34,34,34,.04);
  --sh-pop:  0 8px 24px rgba(34,34,34,.12);
  --sh-focus:0 0 0 3px var(--ui-accent-tint);
}

/* ==========================================================================
   3. 신규 — 글꼴·라운드
   ========================================================================== */
:root{
  --font: "Pretendard Variable","Pretendard","Noto Sans KR",
          system-ui,-apple-system,sans-serif;
  --font-mono: "D2Coding",ui-monospace,monospace;

  --r-card: 12px;
  --r-field: 6px;
  --r-chip: 999px;

  /* 지속시간만 담는다 (이징 없이) - dialog.css 가 "var(--t-base, 200ms) ease"
     형태로 이징을 직접 붙여 쓰므로, 여기 이징까지 넣으면 값이 겹쳐 애니메이션이
     통째로 무효화된다 */
  --t-fast: 120ms;
  --t-base: 200ms;

  /* 상단 sticky 헤더 높이. sw-table.js 의 syncStickyTop() 이 실측해서 덮어쓴다
     (로드·리사이즈·큰글씨/테마 전환 시 갱신). table.css 의 사이드바 고정이 참조. */
  --sticky-top: 0px;
}

/* ==========================================================================
   4. 신규 — 글자 밀도 (기본 / 큰글씨)

   기존에 이미 html.a11y-large-text 클래스와 <head> 동기 복원 스크립트가
   있으므로 그 클래스를 그대로 씁니다. data-ui-density 같은 새 속성은 만들지 않습니다.
   L4 이용자·L5 가족 화면은 큰글씨를 기본으로 켜는 것을 권장합니다.
   ========================================================================== */
:root{                        /* 기본 — 종사자(L1~L3) */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-lg:   16px;
  --fs-h3:   16px;
  --fs-h2:   18px;
  --fs-h1:   22px;
  --lh-base: 1.5;
  --row-h:   49px;
  --row-h-2l:67px;
  --h-btn:   36px;
  --h-field: 36px;
  --pad-cell:12px;
  --space:   4px;
  --icon:    18px;
}

html.a11y-large-text{         /* 큰글씨 — 이용자·가족(L4·L5) */
  --fs-xs:   15px;
  --fs-sm:   16px;
  --fs-base: 18px;
  --fs-lg:   20px;
  --fs-h3:   20px;
  --fs-h2:   24px;
  --fs-h1:   30px;
  --lh-base: 1.65;
  --row-h:   64px;
  --row-h-2l:88px;
  --h-btn:   48px;
  --h-field: 48px;
  --pad-cell:16px;
  --space:   6px;
  --icon:    24px;
}

/* ==========================================================================
   5. 인쇄 — 서식 출력물에는 테마색을 태우지 않습니다
   ========================================================================== */
@media print{
  :root{
    --ui-page:#FFFFFF; --surface:#FFFFFF; --ui-header-fill:#FFFFFF;
    --ui-border:#000000; --ui-accent:#000000; --ink:#000000;
  }
  .sw-no-print{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
