/* 사이트 색·글꼴. 브랜드를 바꿀 때 고치는 CSS는 이 파일 하나다.
   강의 목록(index.html), 강의 페이지(lecture.css), 로그인 화면(functions/_middleware.js)이 모두 이 값을 쓴다.
   로그인 전에도 열리는 파일이라 색 말고 다른 것은 넣지 않는다. */
:root {
  /* 주색(key): 따라 할 것, 번호, 링크, 버튼 */
  --key: #0055A7;
  --key-deep: #003F7D;      /* 버튼 hover */
  --key-tint: #F2F7FD;      /* 프롬프트 박스·메시지 박스 면 */
  --key-line: #C5D8EF;      /* 프롬프트 박스 테두리 */
  --key-soft: #9CC0E8;      /* 도표의 연한 주색 */
  --on-key-sub: #E7EEF8;    /* 주색 면 위의 보조 글자 (과제 카드) */

  /* 면 */
  --chapter: #E3E9F1;       /* 부 첫 화면 카드, 열린 강의 카드 */
  --chapter-hover: #D7E0EB;
  --zone: #F4F6F9;          /* 카드·장표 등 묶음 면 */
  --head: #EEF2F7;          /* 코드, 버튼 hover */
  --panel: #fafafa;         /* 왼쪽 목차 배경 */
  --panel-on: #ececec;      /* 목차 현재 위치 */

  /* 글자·선 */
  --fg: #111418;
  --fg-soft: #2A3038;       /* 부 첫 화면의 한 줄 메시지 */
  --sub: #5F6670;           /* 보조 글자 */
  --muted: #8A94A3;         /* 화살표, 'vs', 빈 칸 안내 */
  --line: #DDE1E6;          /* 표·이미지 테두리 */
  --line-strong: #B9C3CF;   /* 점선 테두리 */
  --divider: #E6E9EE;       /* 절 사이 구분선 */
  --dot: #D3D9E1;           /* 도표의 기본 점 */

  /* 상태 */
  --ok: #157347;            /* '확인' 표시 */
  --ok-tint: #E6F4EC;

  --font: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
}