/* ============================================================
   근태도장 디자인 토큰

   이 파일이 새 화면(/admin/home)과 v5 살갗이 같이 보는 하나뿐인 기준이다.
   색·크기·간격을 두 군데 적어 두면 한 쪽만 고치고 끝나는 날이 온다.

   값은 지어낸 것이 아니라 확정된 새 첫 화면에서 재서 옮긴 것이다.
   (2026-10-22, 1440px, Chrome. 아래 '잰 값' 주석이 그 숫자다)

   여기 없는 값은 화면에서 쓰지 않는다. 새로 필요하면 여기부터 늘린다.
   ============================================================ */
:root {
  /* ---------- 색: 면 ---------- */
  --bg:      #F2F4F7;   /* 페이지 바탕 */
  --surface: #FFFFFF;   /* 카드 */
  --sunk:    #F6F8FB;   /* 눌린 면, 표 머리 */
  --line:    #E1E6ED;   /* 테두리 */
  --line-2:  #EDF1F6;   /* 옅은 구분선 */
  --line-3:  #C4CAD4;   /* 진한 테두리, 비활성 */

  /* ---------- 색: 글자 ---------- */
  --ink:   #16202E;     /* 제목 */
  --ink-2: #39455A;     /* 본문 */
  --sub:   #6B7686;     /* 보조. 흰 바탕에서 4.9:1 */
  --sub-2: #99A2B0;     /* 흐린 글씨. 작은 본문에는 안 쓴다 */
  --sub-3: #6E7684;     /* 작은 본문에 써도 되는 흐린 글씨. 흰 바탕 4.58:1 */

  /* ---------- 색: 강조 ---------- */
  /* 짙은 코발트. 남들이 쓰는 밝은 하늘파랑보다 한참 내려와 있다 */
  --blue:    #1B4DA0;
  --blue-2:  #133A7C;   /* 손 올림 */
  --blue-3:  #2A5FB8;   /* 한 단 밝은 쪽 */
  --blue-a:  #11316B;   /* 누르는 중 */
  --blue-bg: #E8F0FB;
  --blue-ln: #D3E1F4;

  /* 머리 띠에 쓰는 옅은 파랑 */
  --seg-bg:  #E3E9F1;   /* 새 화면·기존 화면 토글의 홈 */

  --band:    #EDF4FD;
  --band-2:  #E2ECF9;
  --band-ln: #D5E2F3;

  /* 빨강. 급한 것, 미기록, 지우기에만. 넓이로 5%를 안 넘긴다 */
  --seal:    #C0392B;
  --seal-2:  #A02E22;   /* 손 올림 */
  --seal-bg: #FBEFED;
  --seal-ln: #F2D2CD;

  --amber:   #9A6410; --amber-bg:  #FBF1DF; --amber-ln: #F0DEBA;
  --green:   #1F6B52; --green-bg:  #E6F3EE; --green-ln: #C5E6D5;
  --violet:  #5B4A9E; --violet-bg: #EDEAF8;
  --grey:    #6B7686; --grey-bg:   #EDEFF3;

  /* ---------- 색: 근태 상태 ---------- */
  /* 색만으로 알리지 않는다. 점 옆에 늘 상태 문구가 같이 간다 */
  --st-in:    var(--green);  --st-in-bg:    var(--green-bg);
  --st-late:  var(--amber);  --st-late-bg:  var(--amber-bg);
  --st-none:  var(--grey);   --st-none-bg:  var(--grey-bg);
  --st-leave: var(--blue);   --st-leave-bg: var(--blue-bg);
  --st-field: var(--violet); --st-field-bg: var(--violet-bg);

  /* ---------- 색: 바로가기 타일 ---------- */
  /* 전부 파랑 계열이고 깊이만 다르다. 묶음이 눈으로 갈린다 */
  --i1: #1B4DA0; --i1b: #E7F0FD;   /* 근태 */
  --i2: #2A5FB8; --i2b: #E6EEFC;   /* 결재 */
  --i3: #15618F; --i3b: #E4F1F9;   /* 급여 */
  --i4: #3A4E9B; --i4b: #EAEDFA;   /* 인사 */
  --i5: #136C80; --i5b: #E2F0F3;   /* 안전·교육 */
  --i6: #51607A; --i6b: #ECEFF4;   /* 그 밖 */

  /* ---------- 글꼴 ---------- */
  --font: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Malgun Gothic", sans-serif;
  --fs-h1:   21px;   --fw-h1: 800; --ls-h1: -.035em;  /* 페이지 제목 */
  --fs-h2:   15.5px; --fw-h2: 800; --ls-h2: -.03em;   /* 카드 제목 */
  --fs-body: 14.5px; --lh-body: 1.6; --ls-body: -.012em;
  --fs-sub:  13px;                                    /* 보조 글자 */
  --fs-sm:   12.5px;                                  /* 작은 글자 */
  --fs-xs:   11.5px;                                  /* 배지, 라벨 */

  /* ---------- 간격 ---------- */
  --w:       1280px;   /* 컨테이너 max-width */
  --pad-x:   26px;     /* 머리줄과 본문이 같이 쓰는 좌우 여백 */
  --head-h:  64px;     /* 머리줄 높이 */
  --panel-w: 300px;    /* 왼쪽 직원 패널 */
  --gap:     18px;     /* 카드 사이, 열 사이 */
  --card-pad: 22px 24px 20px;   /* 카드 안쪽 */
  --card-pad-x: 24px;           /* 카드 안쪽 좌우. 목록을 가장자리까지 뺄 때 쓴다 */

  /* ---------- 형태 ---------- */
  --r:    20px;    /* 카드 바깥 */
  --r-in: 10px;    /* 카드 안쪽 칸 */
  --r-sm: 7px;     /* 작은 것 */
  --pill: 999px;   /* 알약 */
  --h-btn:   37px; /* 단추 높이 */
  --h-input: 30px; /* 입력칸 높이 (패널 안) */
  --ic:      38px; /* 아이콘 바탕 원 */
  --ic-r:    11px; /* 아이콘 바탕 모서리 */
  --ic-sv:   20px; /* 아이콘 그림 */
  --ic-sw:   1.7;  /* 아이콘 선 굵기 */
  --badge-h: 19px; /* 숫자 배지 */
  --r-mark:  9px;  /* 로고 네모 */
  --av:      44px; --r-av: 13px;  /* 회사 머리글자 칸 */
  --bar-h:   5px;  /* 진행 막대 */

  /* 좁은 화면용 한 벌 */
  --card-pad-sm: 18px 17px 16px;
  --r-sm2:   16px;
  --ic-sm:   34px;
  --ic-r-sm: 10px;

  /* ---------- 움직임 ---------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t:    .14s;    /* 손 올림, 색 바뀜 */
  --t-page: .18s;  /* 화면 바뀜 */
}