@charset "UTF-8";

/* H2수학 업무 화면 토큰 — 정본. 브랜드 네이비·초점색·글꼴은 brand.css에서 오고 여기서 다시 선언하지 않는다. 정책: docs/design-app.md */
:root {
  color-scheme: light;

  /* 틀과 종이: 옅은 회청 바탕 위의 흰 면. 네이비(brand.css)는 주요 버튼과 선택 상태에만 쓴다. */
  --app-ground: #f4f6f9;
  --app-surface: #ffffff;
  --app-border: #e3e7ed;
  --app-rule: #eef1f4;
  --app-control: #cfd6df;
  /* 입력란은 테두리로만 칸이 보이므로 흰 바탕과 3:1을 넘긴다. 버튼은 글자로 알아보므로 --app-control. */
  --app-field: #848d99;
  --app-text: #141a22;
  --app-muted: #5d6673;
  --app-inverse: #ffffff;
  --app-inverse-muted: #c3cee0;
  --app-primary: var(--navy-900);
  --app-primary-hover: var(--navy-800);
  --app-selected: var(--navy-100);
  --app-selection-overlay: rgb(11 32 68 / 8%);
  /* 강의 썸네일 위 재생 단추처럼 사진 위에 얹는 어두운 면. 흰 글자·아이콘을 올린다. */
  --app-scrim: rgb(0 0 0 / 60%);
  /* 역량 레이더의 학년 목표 점선. 원장님 리포트 양식의 파란 점선. */
  --app-chart-target: #386dcc;

  /* 상태색은 뜻이 있을 때만, 언제나 글자와 함께. 완료 녹색, 채점 대기·기한 경과 황갈색, 미등원·오류 적색, 미제출 회색. */
  --app-ok: #1f7a4d;
  --app-ok-bg: #e3f5ea;
  --app-warn: #8a4b08;
  --app-warn-bg: #fff4dc;
  --app-bad: #b4232c;
  --app-bad-bg: #ffecec;
  --app-neutral-bg: #eef0f3;

  /* 반 색: 반을 구별하는 데만 쓴다(출결 관리의 반 칩). 반 id % 12 + 1로 고정해 날이 바뀌어도 같은 반은 같은 색이다.
     글자(fg)와 바탕(bg)의 대비는 모두 5.3:1 이상(design-tokens.md). 상태를 뜻하지 않으므로 상태색과 함께 쓰지 않는다. */
  --app-class-1: #1d4ed8;
  --app-class-1-bg: #e8effd;
  --app-class-2: #0f6e66;
  --app-class-2-bg: #e2f4f1;
  --app-class-3: #2f6b1f;
  --app-class-3-bg: #eaf4e3;
  --app-class-4: #87470a;
  --app-class-4-bg: #fbf0e1;
  --app-class-5: #b0223a;
  --app-class-5-bg: #fbe9ec;
  --app-class-6: #6a31b5;
  --app-class-6-bg: #f1eafb;
  --app-class-7: #3a3fb0;
  --app-class-7-bg: #ecedfb;
  --app-class-8: #0d6680;
  --app-class-8-bg: #e1f1f7;
  --app-class-9: #575d10;
  --app-class-9-bg: #f1f2dd;
  --app-class-10: #991d74;
  --app-class-10-bg: #f9e7f3;
  --app-class-11: #9e3c0b;
  --app-class-11-bg: #fdede4;
  --app-class-12: #3d5266;
  --app-class-12-bg: #e8edf2;

  /* 테스트 종류 색 라벨(일일·월간). 상태가 아닌 분류라 상태색과 겹치지 않는 색이고, 반 색 칩과는 점이 없는 배지 모양으로 다르다.
     글자/바탕 대비는 6.0:1 이상(design-tokens.md). 언제나 '일일'·'월간' 글자와 함께 쓴다. */
  --app-kind-daily: #0b5f86;
  --app-kind-daily-bg: #e2f0f7;
  --app-kind-monthly: #6b2fa6;
  --app-kind-monthly-bg: #f1e9fa;
  /* 학부모 카톡 알림의 종류 색 라벨: 등하원 파랑 · 숙제·복습 과제 보라 · 알림장 자주. 상태색과 겹치지 않고, 배지 모양(점 없음)이라
     반 색 칩과 다르다. 값은 반 색 1·6·10과 같은 쌍(대비 5.8:1 이상, design-tokens.md). 언제나 등원·하원 같은 종류 글자와 함께 쓴다. */
  --app-notify-attendance: #1d4ed8;
  --app-notify-attendance-bg: #e8effd;
  --app-notify-homework: #6a31b5;
  --app-notify-homework-bg: #f1eafb;
  --app-notify-note: #991d74;
  --app-notify-note-bg: #f9e7f3;

  /* 문제 은행의 과정 색 라벨: 학교급마다 한 색(초등 청록 · 중등 파랑 · 고등 보라 · 수리논술 올리브). 상태색과 겹치지 않고,
     배지 모양(점 없음)이라 반 색 칩과 다르다. 글자/바탕 대비 5.3:1 이상(design-tokens.md). 언제나 과정 이름과 함께 쓴다. */
  --app-course-elementary: #0f6e66;
  --app-course-elementary-bg: #e2f4f1;
  --app-course-middle: #1d4ed8;
  --app-course-middle-bg: #e8effd;
  --app-course-high: #6a31b5;
  --app-course-high-bg: #f1eafb;
  --app-course-essay: #575d10;
  --app-course-essay-bg: #f1f2dd;
  /* 문제 은행의 난이도 단계: 순서가 있는 값이라 한 색(회청색)의 짙기로 하 → 중 → 상을 나타내고 막대 1~3칸을 함께 둔다.
     상태색(녹색·황갈색·적색)을 쓰지 않아 '상'이 오류로 읽히지 않는다. 언제나 '상'·'중'·'하' 글자와 함께 쓴다. */
  --app-level-low: #5d6673;
  --app-level-low-bg: #eef0f3;
  --app-level-mid: #2f3b4a;
  --app-level-mid-bg: #dde2e9;
  --app-level-high: #ffffff;
  --app-level-high-bg: #3d4a5c;

  /* 역할 색 라벨(학생·학부모·선생님·원장). 상태가 아닌 분류라 상태색과 겹치지 않고, 반 색 칩과는 점이 없는 배지 모양으로 다르다.
     글자/바탕 대비는 5.5:1 이상(design-tokens.md). 언제나 역할 글자와 함께 쓴다. */
  --app-role-student: #1d4ed8;
  --app-role-student-bg: #e8effd;
  --app-role-parent: #8c2a6c;
  --app-role-parent-bg: #f8e8f2;
  --app-role-teacher: #0b6b63;
  --app-role-teacher-bg: #e0f3f0;
  --app-role-admin: #344456;
  --app-role-admin-bg: #e5eaf0;

  /* 밀도: 직원 화면 기준. 학생·학부모의 덜 촘촘한 단계는 아래 .density-comfortable이 덮어 쓴다. */
  --app-body: 0.84375rem;
  --app-title: 1.25rem;
  --app-row: 2.5rem;
  --app-control-height: 2rem;
  /* 입력란 높이. 직원은 버튼과 같고, 학생·학부모는 버튼보다 한 단계 높다. */
  --app-input-height: 2rem;
  --app-radius-control: 6px;
  --app-radius-panel: 8px;
  --app-radius-sheet: 12px;
  --app-radius-round: 999px;
  /* 그림자는 화면 위에 떠 있는 알림에만. 패널과 종이는 1px 테두리로 나눈다. */
  --app-shadow-float: 0 8px 24px rgb(20 26 34 / 12%);

  /* Type: Pretendard via brand.css. */
  --font-sans: var(--font-brand);
  --font-editorial: Georgia, "Times New Roman", serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --leading-tight: 1.25;
  --leading-heading: 1.4;
  --leading-body: 1.7;
  --tracking-heading: -0.035em;
  --tracking-label: 0.12em;

  /* 4px spacing grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --border-width: 1px;
  --layout-sidebar: 12.5rem;
  /* 학생·학부모 휴대폰 아래 탭 한 칸의 최소 높이. 본문 아래 여백과 키보드 초점용 스크롤 여백도 이 값에서 잡는다. */
  --app-tabbar: 3.5rem;
  --layout-content: 90rem;
  --layout-public: 75rem;
  --layout-form: 49rem;
  --layout-aside: 20rem;
  --duration-fast: 180ms;
  --ease-standard: ease-out;
  --z-navigation: 10;
  --z-alerts: 20;
  --z-skip: 100;
}

/* 휴대폰에서는 버튼·입력란·누르는 곳을 손가락 크기로 키운다. */
@media (max-width: 760px) {
  :root { --app-control-height: 2.75rem; --app-input-height: 2.75rem; }
}

/* 학생·학부모(와 가입 회원)는 덜 촘촘한 단계다. 하루에 몇 번 휴대폰으로 열어 보는 화면이라 직원 화면보다 크게 읽고 크게 누른다.
   본문 15px, 제목 18px, 목록 한 줄 52px 이상, 버튼 44px, 입력란 48px. 넓은 화면과 휴대폰이 같다. */
.density-comfortable {
  --app-body: 0.9375rem;
  --app-title: 1.125rem;
  --app-row: 3.25rem;
  --app-control-height: 2.75rem;
  --app-input-height: 3rem;
}