/* GAIFAS 디자인 토큰
 *
 * 색은 참고 화면(SmartHR IT Admin Dashboard)의 PNG 픽셀에서 직접 뽑은 값이다.
 * 눈으로 짐작한 값은 하나도 없다. 측정 방법과 좌표는 docs/10-디자인시스템.md 에 적어 두었다.
 *
 * 단 하나 예외: --cell-* 세 가지는 참고 화면이 아니라 컨설팅사가 준 원본 엑셀에서
 * 뽑은 값이다. 그 색은 우리가 정한 것이 아니라 고객이 이미 쓰고 있는 약속이므로
 * 화면이 어떻게 바뀌든 이 값은 건드리지 않는다.
 */

/* Pretendard 가변 글꼴 — 파일 하나로 굵기 45~920 전 구간을 쓴다.
 * 맑은 고딕은 Regular/Bold 둘뿐이라 500·600·700·800 을 써도 두 단계로 뭉갠다.
 * 화면이 촌스러워 보이던 첫 번째 원인이 이것이었다.
 * 라이선스 SIL OFL 1.1. CDN 이 아니라 직접 담아 둔다 -- 고객사 망에서 막히면 글자가 깨진다.
 */
@font-face {
  font-family: "Pretendard";
  src: url("/static/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── 뼈대 색 ────────────────────────────────────────────── */
  --bg:            #f8f9fb;   /* 본문 바탕 (측정) */
  --panel:         #ffffff;   /* 판·사이드바 (측정) */
  --line:          #ebedf1;   /* 판 테두리 — 측정 #f3f4f6 보다 살짝 진하게, 표가 많아서 */
  --line-strong:   #dfe2e8;   /* 표 안 칸 경계 */
  --track:         #e7e6eb;   /* 막대 뒤 바탕 (측정) */

  /* ── 글자 색 ────────────────────────────────────────────── */
  --ink:           #212429;   /* 본문 (측정) */
  --ink-2:         #4a4f57;   /* 보조 */
  --muted:         #7b818b;   /* 설명·라벨 */
  --on-accent:     #ffffff;

  /* ── 강조 ──────────────────────────────────────────────── */
  --accent:        #f36523;   /* 주황 (측정 군집 #f16622~#f46525) */
  --accent-ink:    #c94d12;   /* 주황 글자 — 흰 바탕에서 대비 확보용 */
  --accent-soft:   #fdece3;   /* 주황 10% 바탕 */
  --accent-line:   #f9c6ab;

  --deep:          #0c4b5c;   /* 짙은 청록 — 막대·그래프 주색 (측정) */
  --deep-soft:     #e4eef1;

  /* ── 뜻이 있는 색 ──────────────────────────────────────── */
  --ok:            #16a35a;   /* 측정 #22c86d 를 글자로도 읽히게 낮춤 */
  --ok-soft:       #e8f8ef;
  --ok-line:       #b6e8cd;
  --warn:          #c08a02;   /* 측정 #fbbd05 를 글자로도 읽히게 낮춤 */
  --warn-soft:     #fff8e2;
  --warn-line:     #f4dc93;
  --bad:           #d82829;   /* 측정 군집 #cc3435~#df2426 */
  --bad-soft:      #fdecec;
  --bad-line:      #f6b9b9;

  /* ── 칸 색 — 원본 엑셀 값. 바꾸지 말 것 ────────────────── */
  --cell-gpt:      #d9e2f3;   /* GPT 로 넘어가는 표 */
  --cell-formula:  #e2efda;   /* 산식으로 나온 칸 ('녹색, 강조 6, 80% 더 밝게') */
  --cell-suspect:  #fde68a;   /* 확인이 필요한 칸 */

  /* ── 글자 ──────────────────────────────────────────────── */
  --font: "Pretendard", -apple-system, "Segoe UI Variable Text", "Segoe UI",
          "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;

  --t-11: 11px;  /* 꼬리표 */
  --t-12: 12px;  /* 설명 */
  --t-13: 13px;  /* 표 안 */
  --t-14: 14px;  /* 본문 */
  --t-16: 16px;  /* 작은 제목 */
  --t-20: 20px;  /* 화면 제목 */
  --t-26: 26px;  /* 큰 숫자 */
  --t-32: 32px;

  /* ── 간격 (4의 배수) ───────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* ── 모서리 ────────────────────────────────────────────── */
  --r-sm: 6px;
  --r:    10px;   /* 판·카드 (측정 약 8px) */
  --r-lg: 14px;
  --r-pill: 999px;

  /* ── 그림자 — 참고 화면은 그림자를 거의 쓰지 않는다 ────── */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(16, 24, 40, .04);
  --sh-2: 0 8px 24px rgba(16, 24, 40, .10);
  --sh-3: 0 16px 48px rgba(16, 24, 40, .18);

  /* ── 뼈대 치수 ─────────────────────────────────────────── */
  --sidebar:   248px;   /* 측정 비율 18.2% 를 1360px 기준으로 옮긴 값 */
  --topbar:    56px;
  --gutter:    24px;    /* 카드 사이 여백 (측정 23~24px) */
  --pad-card:  18px;
  --content-max: 1560px;

  --z-head: 40; --z-side: 45; --z-modal: 60; --z-toast: 70;
}