/* HD.LAB 디자인 기준 — "담백한 화면"(2026-11, 사용자 결정: 실제 화면 중심·장식 없음)
   '출석부'(종이·명조·손글씨·도장·괘선) 장식을 걷어 내고, 화면에 실제 기능과 내용만 남긴다.
   - 바탕은 거의 흰 회색, 면은 흰색, 구분은 얇은 회색 선. 글자는 Pretendard 한 가지(명조·손글씨 없음).
   - 색은 주 버튼·링크(파랑 하나)와 상태(빨강·초록·주황)에만 쓴다. 기울임·겹친 그림자·형광펜·도장 없음.
   - 변수 이름은 그대로 두고 값만 바꿨다 — 화면 곳곳의 인라인 스타일이 이 이름을 쓴다.
     (--serif·--hand도 이름만 남기고 같은 글꼴을 가리킨다. 글꼴 파일은 assets/fonts에 그대로 있지만 더는 불러오지 않는다.) */
:root {
  /* 칠판 초록 — 칠판지기(칠판 앱 화면·로고 색) */
  --board-950: #10221C;
  --board-900: #1D3B33;   /* 브랜드 */
  --board-800: #24483E;
  --board-700: #2E5A4D;
  --board-100: #DCE5DF;
  --board-50:  #EDF2EE;

  /* 면·바탕·선 — 이름은 예전 '분필' 단계 그대로 */
  --chalk-0:   #FFFFFF;   /* 면(카드·표) */
  --chalk-50:  #F6F6F4;   /* 페이지 바탕 */
  --chalk-100: #EEEFF1;   /* 눌림·선택된 줄·바닥글 */
  --chalk-200: #DADCE0;   /* 구분선 */
  --chalk-300: #C7CAD0;   /* 입력칸·보조 버튼 테두리 */

  /* 글자 — 흰 바탕에서 모두 4.5:1 이상 */
  --ink-900: #15171C;
  --ink-600: #4A4F59;
  --ink-400: #6B707A;

  /* 앰버 — 칠판지기 '지금 선택된 것'·주의 */
  --amber-500: #F2B63C;
  --amber-600: #A0660A;
  --amber-50:  #FBF1D6;

  /* 상태 */
  --red-600:   #B8322A;
  --red-50:    #F7E6E1;
  --green-600: #2F6B4F;
  --green-50:  #E4EFE8;
  --blue-600:  #1D4ED8;

  /* 예전 출석부 이름 — 값만 담백하게 */
  --paper: var(--chalk-50);
  --sheet: var(--chalk-0);
  --rule: var(--chalk-200);
  --rule-strong: var(--chalk-300);   /* 표 머리·구역 위 선 — 굵은 먹선 대신 조금 진한 회색 */
  --hl: #FFF4C2;                     /* 선택 강조 바탕(문장 형광펜은 쓰지 않는다) */

  /* 수업지기 바이올렛 — 로고 색(로고·아이콘에만) */
  --sj-950: #221C4A;
  --sj-900: #2F2867;
  --sj-700: #4B3FB0;
  --sj-600: #4B3FB0;
  --sj-100: #E3E0F5;
  --sj-50:  #F0EEFA;

  /* 역할 — 학원 브랜딩(L1)은 --accent만 바꾼다. 그 위 글자색(--on-accent)은 스크립트가 명도로 정한다.
     포털(t/*)의 주 버튼은 글자색 면 하나(색 글자·제목이 --accent를 같이 써서 그대로 둔다).
     소개·판매 페이지는 site.css가 --accent를 파랑으로 바꾼다. 선택 표시(--mark)는 파랑으로 고정 */
  --accent: var(--ink-900);
  --mark: var(--blue-600);           /* 선택된 탭 밑줄·현재 위치 — 학원 색(--accent)이 옅어도 보이게 고정 */
  --on-accent: #FFFFFF;
  --focus-ring: rgba(29, 78, 216, .25);

  /* 모서리 4 / 6 / 8 */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  /* 떠 있는 것(메뉴·대화상자)만 — 옅은 그림자 */
  --shadow-float: 0 8px 24px rgba(21, 23, 28, .12);

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Noto Sans KR", "Malgun Gothic", sans-serif;
  --serif: var(--font);   /* 예전 명조 자리 — 같은 글꼴 */
  --hand: var(--font);    /* 예전 손글씨 자리 — 같은 글꼴 */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "D2Coding", monospace; /* 출석 코드 같은 영문·숫자 코드에만 */
  --fs-12: 12px; --fs-13: 13px; --fs-15: 15px; --fs-17: 17px;
  --fs-20: 20px; --fs-24: 24px; --fs-30: 30px;
}

/* 수업지기 포털(t/console·student·parent·academy — <html data-brand="sueobjigi">).
   공용 CSS가 칠판 초록 단계(--board-*)를 진한 면·선택 표시로 쓰는 곳이 많아 바꿔 끼운다.
   진한 단계는 글자색, 선택 표시는 주 색(파랑)과 그 옅은 단계. */
:root[data-brand="sueobjigi"] {
  --board-950: #0E1014;
  --board-900: var(--ink-900);
  --board-800: #2A2D34;
  --board-700: var(--blue-600);
  --board-100: #DBE4FF;
  --board-50:  #EEF2FF;
  --mark: var(--blue-600);
  --focus-ring: rgba(29, 78, 216, .25);
}

/* ── 공통 부품 — 어느 페이지에서나 쓴다(예전 출석부 부품 이름을 그대로 받는다) ── */
.serif { font-family: var(--font); }
.hand { font-family: var(--font); font-size: 1em; line-height: inherit; color: var(--ink-600); }
.num { font-variant-numeric: tabular-nums; }
/* 예전 형광펜 — 굵은 글자로만 */
.hl { background: none; padding: 0; font-weight: 700; }
/* 상태 표시 — 예전 도장. 기울이지 않은 작은 테두리 표시, 기본 빨강·.ok 초록 */
.stamp { display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: auto; height: auto; padding: 2px 8px;
  border: 1px solid currentColor; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; letter-spacing: 0; transform: none;
  color: var(--red-600); line-height: 1.5; flex: none; white-space: nowrap; }
.stamp.ok { color: var(--green-600); }
.stamp.sm { width: auto; height: auto; padding: 1px 6px; font-size: 11px; border-width: 1px; }
/* 표 */
.ledger { width: 100%; border-collapse: collapse; background: var(--sheet); }
.ledger th { font-size: 12px; font-weight: 600; color: var(--ink-600); text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.ledger td { padding: 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.ledger tr:last-child td { border-bottom: 1px solid var(--rule); }
.ledger .r { text-align: right; }
/* 글자 버튼 — 밑줄 링크 */
.act { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-900); background: none; border: none;
  text-decoration: underline; text-underline-offset: 3px; padding: 1px 0; cursor: pointer; border-radius: 0; }
.act:hover { color: var(--mark); }