/* 공통 색상 토큰. inc/head.asp 에서 페이지 CSS 보다 먼저 로드. 레이아웃 값(--wrap, --radius)은 페이지 CSS 에 둔다 */
:root{
  /* 브랜드 파랑 */
  --blue:#155DFC;
  --blue-dark:#0B49D8;
  --blue-bright:#4E83FF;
  --blue-mid:#9BB9FF;
  --blue-light:#C7D8FF;
  --blue-line:#DCE7FF;
  --blue-pale:#EAF1FF;
  --blue-soft:#F5F8FF;
  /* 글자·선·면 (밝은 배경) */
  --ink:#17172B;
  --body:#56566B;
  --muted:#8C8CA0;
  --gray:#BFC9DA;
  --line:#E3E9F5;
  --surface:#F6F8FC;
  --white:#FFF;
  /* 상태 */
  --green:#1A9B68;
  --red:#D93838;
  /* 어두운 배경(남색) 면 */
  --navy:#111A35;
  --navy-raised:#2B2850;
  --navy-raised-hover:#292745;
  /* 남색 배경 위 글자·아이콘 (숫자가 클수록 어두움) */
  --on-dark-100:#D7D5E3;
  --on-dark-150:#D5D2E5;
  --on-dark-200:#D0CEE0;
  --on-dark-250:#C9CAD8;
  --on-dark-300:#C7C5D8;
  --on-dark-400:#BBB9CF;
  --on-dark-450:#B9B6CA;
  --on-dark-500:#A9A7BC;
  --on-dark-600:#9795AB;
  --on-dark-700:#8F8CA2;
  /* 남색 배경 위 파란 강조 */
  --on-dark-blue-300:#A9C3FF;
  --on-dark-blue-400:#9EB9FF;
  --on-dark-blue-500:#8FB0FF;
  /* 파란 배경 위 글자 */
  --on-blue-100:#EDF3FF;
  --on-blue-200:#E0EAFF;
  --on-blue-300:#D9E5FF;
  --on-blue-400:#C5D8FF;
  /* 체크 표시 모양. ✓ 글자는 Pretendard 조각 폰트에 없어 SVG 마스크로 그린다(mask + background 로 색 지정) */
  --check-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5l5.5 5.5L20.5 6.5'/%3E%3C/svg%3E");
}