/* 차세대 안전교육시스템 화면디자인 — 디자인 토큰 v0.2 (KRDS 구성요소·접근성 기준 + 어린이집안전공제회 브랜드 색 — 2026-10-27 공제회 디자인 샘플·지식샘터 참고)
   출처: krds.go.kr 스타일(색상·타이포그래피·레이아웃). 공제회 확장 토큰은 --csia- 접두어. */
@font-face{font-family:"Pretendard GOV";font-weight:400;src:url(../main/fonts/PretendardGOV-Regular.woff2) format("woff2")}
@font-face{font-family:"Pretendard GOV";font-weight:500;src:url(../main/fonts/PretendardGOV-Medium.woff2) format("woff2")}
@font-face{font-family:"Pretendard GOV";font-weight:600;src:url(../main/fonts/PretendardGOV-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Pretendard GOV";font-weight:700;src:url(../main/fonts/PretendardGOV-Bold.woff2) format("woff2")}
:root{
  /* 색상 — Primary / Secondary / Gray / System */
  --krds-primary-5:#F3FAEE; --krds-primary-10:#E6F3DC; --krds-primary-20:#C5DFB4;
  --krds-primary-50:#3F7D4C; --krds-primary-60:#275F3B; --krds-primary-70:#1D4A2D;
  --krds-secondary-5:#EDF2EF; --krds-secondary-50:#346FB2; --krds-secondary-70:#234A3C; --krds-secondary-80:#18332C;
  --krds-gray-0:#FFFFFF; --krds-gray-5:#F5F8F6; --krds-gray-10:#E2EAE5; --krds-gray-20:#CDD9D2;
  --krds-gray-50:#5E6E68; --krds-gray-70:#3E4F49; --krds-gray-90:#18332C;
  --krds-point-50:#D63D4A; --krds-danger-50:#DE3412; --krds-warning-50:#9E6A00; --krds-success-50:#228738; --krds-info-50:#0B78CB;
  /* 공제회 확장 — 이용 주체 색 (UI·UX 설계서 v0.7) */
  --csia-user:#1D4A2D; --csia-user-light:#EEF7E8; --csia-staff:#1F5C8C; --csia-staff-light:#E8F4FF;
  /* 타이포그래피 — PC (모바일은 @media 에서 재정의), 행간 150% */
  --font:"Pretendard GOV","Pretendard","Noto Sans CJK KR",sans-serif;
  --fs-display-m:44px; --fs-display-s:36px;
  --fs-h-xl:40px; --fs-h-l:32px; --fs-h-m:24px; --fs-h-s:19px; --fs-h-xs:17px; --fs-h-xxs:15px;
  --fs-b-l:19px; --fs-b-m:17px; --fs-b-s:15px; --fs-b-xs:13px; --lh:1.5;
  /* 간격 — 8pt 그리드 */
  --gap-1:4px; --gap-2:8px; --gap-3:12px; --gap-4:16px; --gap-5:24px; --gap-6:32px; --gap-7:40px; --gap-8:64px;
  --radius-s:8px; --radius-m:14px; --radius-l:22px; --radius-pill:999px;
  --shadow-1:0 8px 24px rgba(29,66,50,.08);
  --csia-yellow:#FFC84E; --csia-yellow-soft:#FFF5CF; --csia-sky:#2F77B8; --csia-sky-soft:#E8F4FF; --csia-coral:#F47F6B; --csia-coral-soft:#FFF0EC; --csia-mint:#E9F6DF; --csia-canvas:#F7FAF8;
  /* 레이아웃 */
  --content-max:1200px; --margin-pc:24px; --margin-m:16px;
}
@media (max-width:767px){
  :root{ --fs-display-m:32px; --fs-display-s:28px; --fs-h-xl:28px; --fs-h-l:24px; --fs-h-m:22px; }
}