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

  /* 면 */
  --chapter: #F2EEEF;       /* 부 첫 화면 카드, 열린 강의 카드 */
  --chapter-hover: #E9E3E5;
  --zone: #F6F4F5;          /* 카드·장표 등 묶음 면 */
  --head: #F0EDEE;          /* 코드, 버튼 hover */
  --panel: #FAFAFA;         /* 왼쪽 목차 배경 */
  --panel-on: #EFECED;      /* 목차 현재 위치 */

  /* 글자·선 */
  --fg: #1A1718;
  --fg-soft: #2E2A2B;       /* 부 첫 화면의 한 줄 메시지 */
  --sub: #636466;           /* 보조 글자 (로고 글자 회색) */
  --muted: #8E8A8C;         /* 화살표, 'vs', 빈 칸 안내 */
  --line: #E0DCDD;          /* 표·이미지 테두리 */
  --line-strong: #C2BCBE;   /* 점선 테두리 */
  --divider: #EAE6E7;       /* 절 사이 구분선 */
  --dot: #DCD6D8;           /* 도표의 기본 점 */

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

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