@charset "utf-8";
/* ============================================================================
   in-erp Design Tokens  v1.0
   출처: docs/round1/08_디자인.md §2.7 (값은 그대로, 접두사만 --in-* → --ie-* : ADR D-01)
   ============================================================================
   2계층 구조 (08 §2.6 · D-76)
     [1계층] primitive : --ie-brand-600, --ie-gray-800 …   실제 HEX. 색 그 자체
                ↓ 참조
     [2계층] semantic  : --ie-c-text-body, --ie-c-surface-card …  역할 이름
                ↓ 참조
     [컴포넌트 CSS]     semantic 만 사용. primitive 직접 참조 금지, 리터럴 HEX 절대 금지

   다크 모드는 하지 않는다(D-76). 단 나중에 `:root[data-theme="dark"]` 에서 **2계층만**
   재정의하면 컴포넌트 CSS 를 한 줄도 안 고치고 추가할 수 있게 이 구조를 유지한다.

   ⚠ `ie-` 는 "in-erp" 의 약자다. Internet Explorer 가 아니다 (D-03).
   ============================================================================ */

:root {
  /* ── 1계층: 브랜드 (딥 틸) (08 §2.2) ─────────────────────────────────── */
  --ie-brand-50:  #E8F5F4;
  --ie-brand-100: #CDE9E7;
  --ie-brand-200: #9FD5D1;
  --ie-brand-300: #6BBDB8;
  --ie-brand-400: #38A19C;
  --ie-brand-500: #16867F;   /* 흰 글자 배경 금지: 4.42:1 (AA 미달) */
  --ie-brand-600: #0F6E6A;   /* ★ 기본 브랜드. 흰 글자 6.07:1 ✅ */
  --ie-brand-700: #0B5754;   /* 흰 배경 위 8.38:1 ✅ */
  --ie-brand-800: #094442;
  --ie-brand-900: #06302F;

  /* ── 1계층: 중립 (색상각 205° 로 미세하게 기운 쿨 그레이) (08 §2.3) ──── */
  --ie-gray-50:  #F6F8F9;
  --ie-gray-100: #EDF1F3;
  --ie-gray-200: #DFE5E9;   /* 기본 경계선(장식) */
  --ie-gray-300: #C8D1D7;
  --ie-gray-400: #9FACB5;   /* 비활성 텍스트 */
  --ie-gray-500: #78868F;   /* 입력 테두리 3.75:1 ✅ / 텍스트 금지 */
  --ie-gray-600: #5A6771;   /* 보조 텍스트 5.81:1 ✅ */
  --ie-gray-700: #3F4B54;   /* 표 헤더·라벨 8.95:1 ✅ */
  --ie-gray-800: #2A343B;   /* 본문 12.71:1 ✅ */
  --ie-gray-900: #12222A;   /* 제목 · 사이드바 배경 16.30:1 ✅ */
  --ie-white:    #FFFFFF;

  /* ── 1계층: 시맨틱 4종 × 4토큰 (08 §2.4) ─────────────────────────────── */
  --ie-success:        #1E7A45;
  --ie-success-tint:   #E8F4EC;
  --ie-success-ink:    #146034;
  --ie-success-border: #B8DCC6;

  --ie-warning:        #9A6512;   /* 앰버-브라운. 순수 노랑은 흰 배경 2.1:1 이라 AA 불가 */
  --ie-warning-tint:   #FBF2E3;
  --ie-warning-ink:    #7A4E08;
  --ie-warning-border: #E8D2A6;

  --ie-danger:         #B4241C;
  --ie-danger-tint:    #FBEAE8;
  --ie-danger-ink:     #8F1B15;
  --ie-danger-border:  #EFC3BF;

  --ie-info:           #14618F;
  --ie-info-tint:      #E7F1F8;
  --ie-info-ink:       #0F4E73;
  --ie-info-border:    #B9D6EA;

  /* ── 1계층: 일정 유형 7종 (명도 사다리 ΔL* ≥ 7.5) (08 §2.5.3) ────────── */
  --ie-cal-release:     #4E2878;  --ie-cal-release-on:  #FFFFFF;   /* L* 25.24 */
  --ie-cal-meeting:     #29509C;  --ie-cal-meeting-on:  #FFFFFF;   /* L* 35.22 */
  --ie-cal-project:     #0F716D;  --ie-cal-project-on:  #FFFFFF;   /* L* 42.79 */
  --ie-cal-leave:       #41A666;  --ie-cal-leave-on:    #04290D;   /* L* 61.09 */
  --ie-cal-etc:         #A7B2BB;  --ie-cal-etc-on:      #21333F;   /* L* 71.99 */
  --ie-cal-field:       #F0CA7C;  --ie-cal-field-on:    #412D05;   /* L* 83.03 */
  /* 마감은 아웃라인 칩: 사다리 밖으로 뺀다(형태로 구분) */
  --ie-cal-due-bg:      #FEF1F0;
  --ie-cal-due-border:  #DD2E21;
  --ie-cal-due-on:      #8F1B15;
  --ie-cal-due-fill:    #DD2E21;  /* 지연 시 채움 승격 */
  --ie-cal-due-fill-on: #FFFFFF;
  --ie-cal-holiday:     #B4241C;
  --ie-cal-holiday-bg:  #FDF6F5;

  /* ── 2계층: 표면 / 텍스트 / 경계 ──────────────────────────────────────── */
  --ie-c-surface-page:     var(--ie-gray-50);
  --ie-c-surface-card:     var(--ie-white);
  --ie-c-surface-sunken:   var(--ie-gray-100);
  --ie-c-surface-hover:    var(--ie-gray-100);
  --ie-c-surface-selected: var(--ie-brand-50);
  --ie-c-surface-header:   var(--ie-gray-50);

  --ie-c-text-title:       var(--ie-gray-900);
  --ie-c-text-body:        var(--ie-gray-800);
  --ie-c-text-label:       var(--ie-gray-700);
  --ie-c-text-muted:       var(--ie-gray-600);
  --ie-c-text-placeholder: var(--ie-gray-600);   /* 4.5:1 확보 위해 600 (500 아님) */
  --ie-c-text-disabled:    var(--ie-gray-400);
  --ie-c-text-inverse:     var(--ie-white);
  --ie-c-text-link:        var(--ie-brand-700);

  --ie-c-border:           var(--ie-gray-200);   /* 장식 구분선 (WCAG 1.4.11 대상 아님) */
  --ie-c-border-strong:    var(--ie-gray-300);
  --ie-c-border-field:     var(--ie-gray-500);   /* UI 컴포넌트 경계 3:1 필수 */
  --ie-c-border-brand:     var(--ie-brand-600);

  /* ── 2계층: 액션 ──────────────────────────────────────────────────────── */
  --ie-c-action:           var(--ie-brand-600);
  --ie-c-action-hover:     var(--ie-brand-700);
  --ie-c-action-pressed:   var(--ie-brand-800);
  --ie-c-action-on:        var(--ie-white);
  --ie-c-action-subtle-bg: var(--ie-brand-50);

  /* ── 2계층: 포커스 (흰/회색 배경 모두 3:1 이상) ───────────────────────── */
  --ie-c-focus:            #17908A;              /* white 3.89:1 · gray-50 3.66:1 */
  --ie-c-focus-on-dark:    var(--ie-brand-300);  /* 사이드바 위 7.45:1 */

  /* ── 2계층: 사이드바, 08 §5.2 (전부 실측 대비) ───────────────────────── */
  --ie-c-sb-bg:            var(--ie-gray-900);   /* #12222A */
  --ie-c-sb-hover:         #1C2F39;
  --ie-c-sb-active-bg:     #0E4A4C;
  --ie-c-sb-active-bar:    #35B3AC;              /* bg 대비 6.36:1 ✅ */
  --ie-c-sb-text:          #AFBEC6;              /* bg 대비 8.54:1 ✅ */
  --ie-c-sb-text-muted:    #8496A0;              /* bg 대비 5.32:1 ✅ */
  --ie-c-sb-text-active:   #E8F5F4;              /* active-bg 대비 8.94:1 ✅ */
  --ie-c-sb-divider:       #24343E;

  /* ── 타이포 (08 §3) ──────────────────────────────────────────────────── */
  /* Pretendard 셀프호스팅(D-77). 웹폰트 파일이 없으면 아래 시스템 스택으로 자연 폴백된다.
     외부 CDN 은 금지다(사내망). base.css 의 @font-face 주석 참조. */
  --ie-font-sans: "Pretendard Variable", Pretendard, -apple-system,
                  BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI",
                  "Malgun Gothic", "맑은 고딕", "Noto Sans KR", sans-serif;
  --ie-font-mono: "D2Coding", "Cascadia Mono", Consolas, "Courier New", monospace;

  --ie-fs-11: 11px;  --ie-fs-12: 12px;  --ie-fs-13: 13px;  --ie-fs-14: 14px;
  --ie-fs-15: 15px;  --ie-fs-16: 16px;  --ie-fs-18: 18px;  --ie-fs-20: 20px;
  --ie-fs-24: 24px;  --ie-fs-30: 30px;

  --ie-lh-tight: 1.35;
  --ie-lh-ui:    1.5;
  --ie-lh-read:  1.7;

  --ie-fw-regular: 400;
  --ie-fw-semi:    600;
  --ie-fw-bold:    700;

  /* ── 간격 (4px 베이스). 스케일 밖 임의 값 금지 (08 §4.3) ─────────────── */
  --ie-sp-1: 4px;   --ie-sp-2: 8px;   --ie-sp-3: 12px;  --ie-sp-4: 16px;
  --ie-sp-5: 20px;  --ie-sp-6: 24px;  --ie-sp-8: 32px;  --ie-sp-10: 40px;
  --ie-sp-12: 48px; --ie-sp-16: 64px;

  /* ── 치수 (08 §4.2) ──────────────────────────────────────────────────── */
  --ie-sb-w:            240px;   /* 사이드바 펼침 */
  --ie-sb-w-collapsed:   60px;   /* 사이드바 접힘 */
  --ie-topbar-h:         56px;
  --ie-content-pad:      24px;
  --ie-content-max-form: 880px;
  --ie-content-max-read: 720px;
  --ie-row-h:            44px;   /* 표 행: 보통 */
  --ie-row-h-compact:    34px;   /* 표 행: 좁게 */
  --ie-thead-h:          40px;
  --ie-control-h:        36px;
  --ie-control-h-sm:     30px;
  --ie-tap-min:          44px;

  /* ── 라운드 / 그림자 (ERP: 낮게, 2단계만) ─────────────────────────────── */
  --ie-r-sm:   4px;
  --ie-r-md:   6px;
  --ie-r-lg:   8px;
  --ie-r-full: 999px;

  --ie-shadow-pop:   0 4px 12px rgba(18, 34, 42, .12), 0 1px 3px rgba(18, 34, 42, .08);
  --ie-shadow-modal: 0 16px 40px rgba(18, 34, 42, .20), 0 4px 10px rgba(18, 34, 42, .10);

  /* ── 모션 (08 원칙 3: 모션은 위치 설명에만) ───────────────────────────── */
  --ie-dur-fast: 120ms;
  --ie-dur-base: 180ms;
  --ie-ease:     cubic-bezier(0.2, 0, 0.2, 1);

  /* ── z-index ─────────────────────────────────────────────────────────── */
  --ie-z-sidebar: 100;
  --ie-z-topbar:  110;
  --ie-z-drawer:  200;
  --ie-z-popover: 300;
  --ie-z-modal:   400;
  --ie-z-toast:   500;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ie-dur-fast: 1ms; --ie-dur-base: 1ms; }
}