/* ============================================================
   v2 디자인 토큰 (P0-d) — 설계 §3 · 계획서 Global Constraints
   - 색은 "의미 고정": 장비 navy · 노무 amber · 자재 green · 경비 gray · 외주 navy-2 · 우천 blue · 휴무/경고 red
   - 화면 CSS·JS는 리터럴 색 대신 이 토큰만 쓴다.
   - 다크 세트는 :root[data-theme="dark"]에 같은 이름으로 값만 바꾼다.
   - 아래쪽 "옛 토큰 별칭"은 재사용 JS(ui-dialog·row-sheet·daily-mobile 등)가 내는 var(--…)를 살리기 위한 것.
   ============================================================ */

:root {
  color-scheme: light;

  /* ── 의미 색 ── */
  --navy:   #1B2A41;
  --navy-2: #24364F;
  --amber:  #F5A524;
  --green:  #1F9D55;
  --gray:   #6B7585;
  --blue:   #2B5DAB;
  --red:    #D64545;

  --bg:   #F4F6F9;
  --card: #FFFFFF;
  --line: #E3E7EE;
  --ink:  #1C2430;
  --mute: #6B7585;

  /* 연한 면 */
  --navy-soft:  #E8EDF5;
  --amber-soft: #FFF3DC;
  --green-soft: #E3F5EA;
  --gray-soft:  #EEF1F5;
  --blue-soft:  #E3EDFB;
  --red-soft:   #FBE7E7;

  /* 연한 면 위 글자색 (칩·배지 가독) */
  --navy-ink:  var(--navy);
  --amber-ink: #9A6210;
  --green-ink: #166B3B;
  --gray-ink:  #4B5563;
  --blue-ink:  var(--blue);
  --red-ink:   var(--red);

  /* 보조 중립 */
  --ink-2:     #3C4756;   /* 표 본문·날짜 숫자 */
  --faint:     #C3CAD5;   /* 전월/다음달 칸 숫자 등 아주 흐린 글자 */
  --line-soft: #EEF1F5;   /* 달력 칸·행 구분처럼 약한 선 */
  --row-line:  #F3F5F8;   /* 패널/카드 안 행 구분 */
  --tab-ink:   #8B95A1;   /* 모바일 탭바 비활성 */

  /* 네이비 면 위 글자 */
  --on-navy:      #FFFFFF;
  --on-navy-mute: #B6C3D6;
  --on-amber:     var(--navy);

  /* 사이드바 */
  --side-bg:    var(--navy);
  --side-bg-2:  var(--navy-2);
  --side-ink:   #C9D3E3;
  --side-mute:  #8FA0B8;
  --side-grp:   #7F90A8;
  --side-hover: rgba(255,255,255,.06);
  --side-on:    rgba(255,255,255,.10);
  --side-on-ink:#FFFFFF;
  --side-line:  rgba(255,255,255,.08);
  --tab-on:     var(--navy);

  /* 카테고리 (앱 전체 고정) */
  --cat-eq:   var(--navy);
  --cat-lb:   var(--amber);
  --cat-mt:   var(--green);
  --cat-ex:   var(--gray);
  --cat-os:   var(--navy-2);
  --cat-rain: var(--blue);
  --cat-off:  var(--red);

  /* ── 타이포 ── */
  --ff-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --fs-2xs:  10.5px;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-tbl:  12.5px;  /* PC 표 */
  --fs-base: 13px;    /* PC 본문 (모바일은 mobile.css에서 14px) */
  --fs-md:   14px;
  --fs-lg:   15px;
  --fs-xl:   17px;
  --fs-2xl:  20px;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* ── 간격 ── */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── 반경 ── (카드 PC 12 · 모바일 16 / 버튼 8 / 칩 4) */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   10px;
  --r-2xl:  16px;
  --r-pill: 999px;
  --r-card: 12px;
  --r-btn:  8px;
  --r-chip: 4px;

  /* ── 그림자 (최소 — 구분은 선과 바탕색으로) ── */
  --sh-sm:    0 1px 2px rgba(16,24,40,.04);
  --sh-md:    0 4px 16px rgba(16,24,40,.08);
  --sh-lg:    0 8px 24px rgba(16,24,40,.12);
  --sh-modal: 0 24px 64px rgba(16,24,40,.24);
  --sh-fab:   0 8px 16px -6px rgba(245,165,36,.7);
  --focus-ring: 0 0 0 3px rgba(43,93,171,.28);

  /* ── 층 ── */
  --z-sticky:   10;
  --z-nav:      90;
  --z-header:  100;
  --z-dropdown: 300;
  --z-tabbar:  480;
  --z-modal:    500;
  --z-toast:   9000;
  --z-popover: 9999;

  /* ── 움직임 ── */
  --dur-fast: 100ms;
  --dur:      150ms;
  --dur-slow: 300ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);

  /* ── 크기 ── */
  --hit:      44px;   /* 모바일 탭 타겟 최소 */
  --side-w:   216px;
  --topbar-h: 48px;
  --tabbar-h: 64px;
  --btn-h:    30px;

  /* ============================================================
     옛 토큰 별칭 — 재사용 JS가 인라인 style로 내는 이름들 (삭제 금지)
     ============================================================ */
  --accent:        var(--navy);
  --accent-text:   #FFFFFF;
  --danger:        var(--red);
  --success:       var(--green);
  --warning:       var(--amber);
  --info:          var(--blue);
  --text:          var(--ink);
  --text-2:        #3C4756;
  --text-muted:    var(--mute);
  --surface:       var(--card);
  --surface-2:     #FAFBFC;
  --border:        var(--line);
  --border-strong: #C9D0DA;
  --overlay-bg:    rgba(27,42,65,.55);
  --accent-a03:    rgba(27,42,65,.03);
  --accent-a05:    rgba(27,42,65,.05);
  --accent-a06:    rgba(27,42,65,.06);
  --accent-a08:    rgba(27,42,65,.08);
  --accent-a15:    rgba(27,42,65,.15);
  --accent-a18:    rgba(27,42,65,.18);
  --accent-subtle-bg: var(--navy-soft);
  --danger-subtle-bg: var(--red-soft);
  --shadow-1:      var(--sh-sm);
  --surface2:      var(--surface-2);
  --text2:         var(--text-2);
}

/* ============================================================
   다크 — 같은 의미, 값만 교체. soft 계열은 각 색의 12% 알파.
   (T1에서 화면별로 다듬는다)
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --navy:   #2E4466;
  --navy-2: #34507A;
  --amber:  #F5A524;
  --green:  #3DBB75;
  --gray:   #8B96A6;
  --blue:   #5B8BD6;
  --red:    #E06060;

  --bg:   #121821;
  --card: #1A2230;
  --line: #27313F;
  --ink:  #E6EAF0;
  --mute: #8B96A6;

  /* navy는 어두운 색이라 12% 알파면 배경에 묻힌다 → 밝힌 네이비 계열의 알파로 둔다 */
  --navy-soft:  rgba(120,150,200,.16);
  --amber-soft: rgba(245,165,36,.12);
  --green-soft: rgba(61,187,117,.12);
  --gray-soft:  rgba(139,150,166,.12);
  --blue-soft:  rgba(91,139,214,.12);
  --red-soft:   rgba(224,96,96,.12);

  --navy-ink:  #AFC2DE;
  --amber-ink: #F5B84A;
  --green-ink: #5FD394;
  --gray-ink:  #B3BCC9;
  --blue-ink:  #8FB2EA;
  --red-ink:   #F08A8A;

  --ink-2:     #C5CDD8;
  --faint:     #5B677A;   /* T1: 1.9 → 3:1 근처로 */
  --line-soft: #222B38;
  --row-line:  #222B38;
  --tab-ink:   #7E8999;

  --on-navy:      #FFFFFF;
  --on-navy-mute: #A9B8CC;

  --side-bg:    #0F151E;
  --side-bg-2:  #1C2635;
  --side-ink:   #B9C4D4;
  --side-mute:  #7F8EA3;
  --side-grp:   #6C7B90;
  --tab-on:     #AFC2DE;

  --sh-sm:    0 1px 2px rgba(0,0,0,.20);
  --sh-md:    0 4px 16px rgba(0,0,0,.30);
  --sh-lg:    0 8px 24px rgba(0,0,0,.36);
  --sh-modal: 0 24px 64px rgba(0,0,0,.50);
  --focus-ring: 0 0 0 3px rgba(91,139,214,.35);

  /* T1: 옛 JS가 글자색·강조면으로 쓰는 --accent는 다크에서 밝은 네이비로 (어두운 #2E4466 글자가 카드에 묻히던 문제) */
  --accent:        var(--navy-ink);
  --accent-text:   var(--bg);
  --text-2:        #C5CDD8;
  --surface-2:     #202938;
  --border-strong: #3A4658;
  --overlay-bg:    rgba(0,0,0,.70);
  --accent-a03:    rgba(120,150,200,.05);
  --accent-a05:    rgba(120,150,200,.08);
  --accent-a06:    rgba(120,150,200,.10);
  --accent-a08:    rgba(120,150,200,.12);
  --accent-a15:    rgba(120,150,200,.20);
  --accent-a18:    rgba(120,150,200,.24);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur:      0ms;
    --dur-slow: 0ms;
  }
}