/* 클라우드러닝 리디자인 2차 · 디자인 토큰
   적용 범위: .cl-scope (기존 CSS와 섞이지 않게 별도 범위)
   학원 색 교체: --cl-primary 계열 4개만 바꾸면 됩니다. */

.cl-scope {
  /* 학원별로 바꾸는 4개 */
  --cl-primary: #904AE8;          /* 주 버튼 · 흰 배경 링크 · 선택 · 포커스 (흰 배경 4.85:1) */
  --cl-primary-pressed: #7A35D0;  /* 눌림 · 회백색/연보라 위 링크 · 활성 메뉴 글자 (6.47:1) */
  --cl-primary-on-dark: #B78AF7;  /* 어두운 배경 위 링크 · 강조 (5.67:1 on #272729) */
  --cl-primary-tint: #F3ECFD;     /* 선택된 행 · 정보 배지 배경 */

  /* 중립 */
  --cl-ink: #1D1D1F;
  --cl-ink-2: #3A3A3F;            /* 메뉴 기본 글자 */
  --cl-ink-muted: #6E6E73;        /* 보조 텍스트 (흰 배경 5.07:1) */
  --cl-ink-faint: #AEAEB2;        /* 비활성 · 빈 값 표시 (글자 본문 금지) */
  --cl-control-border: #D2D2D7;
  --cl-hairline: #E0E0E3;
  --cl-grid-head: #EDEDF0;        /* 표 머리 · 툴바 구분선 */
  --cl-grid-row: #F0F0F2;         /* 표 행 · 열 구분선 */
  --cl-canvas: #FFFFFF;
  --cl-parchment: #F5F5F7;
  --cl-sidebar: #F7F7F8;
  --cl-sidebar-border: #E6E6E9;
  --cl-hover: #F4F4F6;
  --cl-surface-dark: #1D1D1F;

  /* 의미 색 — 배지 · 상태 · 진도에만 */
  --cl-success: #137333;  --cl-success-bg: #E6F4EA;
  --cl-warning: #9A5200;  --cl-warning-bg: #FEF3E0;
  --cl-danger:  #C5221F;  --cl-danger-bg:  #FCE8E6;

  /* 진도 · 히트맵 단계 */
  --cl-heat-0: #F4F4F6;   /* 시작 전 */
  --cl-heat-1: #E2D3FB;   /* 1~49% */
  --cl-heat-2: #B78AF7;   /* 50~99% */
  --cl-heat-3: #7A35D0;   /* 완료 */

  /* 타이포 — Pretendard 하나 */
  --cl-font: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  /* 공개 영역 (2a 에디토리얼) */
  --cl-fs-hero: 104px;          /* 700 / 1.02 / -0.045em · 모바일 40px */
  --cl-fs-page-title-pub: 56px; /* 700 / 1.1 / -0.04em · 모바일 36px */
  --cl-fs-display: 40px;        /* 700 / 1.2 / -0.03em */
  --cl-fs-list-title: 26px;     /* 목차형 강좌명 600 / -0.02em */
  --cl-fs-lead: 19px;
  --cl-fs-body-public: 17px;    /* 400 / 1.6 / -0.01em */
  /* 작업공간 (1a 조밀한 그리드) */
  --cl-fs-page-title: 22px;     /* 700 / 1.35 / -0.025em */
  --cl-fs-section-title: 15px;  /* 700 */
  --cl-fs-ui: 13.5px;           /* 본문 · 메뉴 · 표 */
  --cl-fs-table-head: 12.5px;   /* 500 */
  --cl-fs-caption: 12.5px;
  --cl-fs-micro: 12px;          /* 배지 500 */

  /* 크기 */
  --cl-h-public-header: 72px;
  --cl-h-ws-topbar: 56px;
  --cl-w-ws-sidebar: 240px;
  --cl-h-nav-item: 30px;
  --cl-h-table-head: 36px;
  --cl-h-table-row: 40px;
  --cl-h-toolbar: 44px;
  --cl-h-control: 32px;         /* 작업공간 버튼 · 입력 */
  --cl-h-control-lg: 40px;
  --cl-h-cta: 52px;             /* 공개 주 행동 */
  --cl-touch: 44px;             /* 모바일 최소 */

  /* 간격 */
  --cl-space-1: 4px;  --cl-space-2: 8px;  --cl-space-3: 12px;
  --cl-space-4: 16px; --cl-space-5: 24px; --cl-space-6: 32px;
  --cl-space-7: 48px; --cl-space-8: 80px;
  --cl-ws-gutter: clamp(16px, 2.8cqw, 40px);
  --cl-pub-gutter: max(20px, calc((100cqw - 1200px) / 2));

  /* 반경 */
  --cl-radius-xs: 4px;    /* 체크박스 · 히트맵 칸 */
  --cl-radius-sm: 8px;    /* 작업공간 버튼 · 입력 · 배지(6) */
  --cl-radius-md: 10px;   /* 작업공간 카드 */
  --cl-radius-lg: 12px;   /* 공개 썸네일 · 떠 있는 바 */
  --cl-radius-pill: 999px;

  /* 깊이 · 움직임 */
  --cl-ring: 0 0 0 1px var(--cl-sidebar-border);
  --cl-ring-active: 0 0 0 1px #E0E0E3, 0 1px 2px rgba(0,0,0,.04);
  --cl-shadow-float: 0 8px 24px rgba(0,0,0,.12);
  --cl-shadow-bulkbar: 0 8px 24px rgba(0,0,0,.18);
  --cl-glass: rgba(255,255,255,.85);
  --cl-glass-filter: saturate(180%) blur(20px);
  --cl-press: scale(0.97);
  --cl-dur: 150ms;
  --cl-ease: ease-out;
  --cl-focus: 2px solid var(--cl-primary);
  --cl-focus-offset: 2px;
}

/* 작업공간(학원 관리 · 선생님 · 학생 작업공간) 가독성 보정 — WorkspaceHeader 의 body.cl-ws-body 에만 적용 (공개 화면 · 포털은 그대로)
   기준: 데이터 화면 본문 14px 이상, 표 행 44px, 보조 글자 대비 흰 배경 6:1 이상, 숫자는 고정폭(표 전체 tabular-nums) */
.cl-scope.cl-ws-body {
  --cl-ink-muted: #5E5E63;        /* 보조 텍스트 (흰 배경 6.45:1, 회백색 5.92:1) — 이전 #6E6E73 5.07:1 */
  --cl-fs-page-title: 24px;       /* 이전 22px */
  --cl-fs-section-title: 16px;    /* 이전 15px */
  --cl-fs-ui: 14px;               /* 본문 · 메뉴 · 표 — 이전 13.5px */
  --cl-fs-table-head: 13px;       /* 이전 12.5px */
  --cl-fs-caption: 13px;          /* 이전 12.5px */
  --cl-h-nav-item: 34px;          /* 이전 30px */
  --cl-h-table-head: 40px;        /* 이전 36px */
  --cl-h-table-row: 44px;         /* 이전 40px */
}

/* 학원 색 예시 */
.cl-scope[data-academy-color="blue"]  { --cl-primary:#2F6BDE; --cl-primary-pressed:#1F55BD; --cl-primary-on-dark:#8DB5FF; --cl-primary-tint:#EAF1FD; }
.cl-scope[data-academy-color="green"] { --cl-primary:#1E7F54; --cl-primary-pressed:#156442; --cl-primary-on-dark:#6FD3A0; --cl-primary-tint:#E6F4EC; }

/* 공통 동작 */
.cl-scope :is(button, a, [role="button"]):focus-visible { outline: var(--cl-focus); outline-offset: var(--cl-focus-offset); }
.cl-scope :is(button, [role="button"]):active { transform: var(--cl-press); }
.cl-scope :is(button, a) { transition: background var(--cl-dur) var(--cl-ease), color var(--cl-dur) var(--cl-ease), transform var(--cl-dur) var(--cl-ease); }
.cl-scope .cl-num { font-variant-numeric: tabular-nums; }

/* 반응형 기준 (디자인 기준폭 1440 / 1024 / 390, 기존 분기 1280 / 900 / 500 대응) */
@media (max-width: 900px) {
  .cl-scope { --cl-fs-hero: 40px; --cl-fs-page-title-pub: 36px; --cl-fs-display: 28px; }
  /* 작업공간 사이드바 → 햄버거 서랍, 표 → 카드형 행, 일괄 작업 바 → 하단 sticky */
}