/* ===== 뉴렉처 브랜드 테마 =====
 * newtil 컴포넌트 위에 얹는 "브랜드가 정한 값" 한 벌. 페이지는 이 파일을 링크만 하고 컴포넌트 변수를 직접 덮지 않는다.
 * 형식 설명: themes/README.md. 값의 출처: newlecture-app frontend/app/globals.css 와 module.css 최빈값 (2026-09-17).
 * 순서: design-tokens → materials → 이 파일 → 페이지 CSS(레이아웃만).
 *
 * ── 사용 규약 (마크업에서 고를 옵션) ─────────────────────────────────────
 *  버튼   기본  : <button class="m3-btn">                     (filled 인디고, 40px)
 *         보조  : <button class="m3-btn btn:outlined">
 *         조용  : <button class="m3-btn btn:text">             (툴바·카드 안 링크성 동작)
 *         위험  : <button class="m3-btn btn:outlined btn-color:danger">
 *         작게  : + btn-size:xs  (표 안·칩 옆, 32px)
 *         크게  : + btn-size:md  (폼 제출·CTA, 44px)
 *         알약/각진 모서리 옵션(btn-shape)은 쓰지 않는다 — 모서리는 이 테마가 정한다.
 *  카드   <div class="m3-card card:outlined card-padding:self">   (슬롯 구조를 쓸 때는 card-padding:self 생략)
 *  입력   <div class="m3-text-field field:outlined field-label:top"> <label>…</label> <input> </div>
 *         레이블 없는 검색·필터: field-label:none.  select 도 같은 래퍼 안에.
 *  배지   <span class="m3-badge badge:inline badge-color:…">   (상태 표시. 개수는 badge 기본)
 *  ─────────────────────────────────────────────────────────────────────── */

/* 브랜드 씨앗 — 램프(--_hue-green-*)와 on-primary 는 design-tokens 0.2.3 이 이 값에서 계산한다. 단계를 손으로 정하려면 --_hue-green-N 을 hex 로 덮는다 */
:root {
  --brand: #4f46e5;   /* 인디고 */

  /* 슬레이트 회색 — 표면·글자·테두리 (앱 globals 의 bg-page/bg-card/text-*/border 값) */
  --_hue-gray-50:  #f8fafc;
  --_hue-gray-100: #f1f5f9;
  --_hue-gray-200: #e2e8f0;
  --_hue-gray-300: #cbd5e1;
  --_hue-gray-400: #94a3b8;
  --_hue-gray-500: #64748b;
  --_hue-gray-600: #475569;
  --_hue-gray-700: #334155;
  --_hue-gray-800: #1e293b;
  --_hue-gray-900: #0f172a;
  --_hue-gray-950: #020617;

  --font-family-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Segoe UI", "Malgun Gothic", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── 버튼: 8px 모서리(앱 최빈 0.5rem), 단계별 높이 40/32/44, 글꼴 14/13/15 ── */
.m3-btn {
  --btn-border-radius: var(--radius-3);
  --btn-font-weight: var(--font-weight-semibold);
  --btn-gap: 0.375rem;
  --btn-height-sm: 2.5rem;  --btn-padding-sm: 0 1rem;     --btn-font-size-sm: 0.875rem;
  --btn-height-xs: 2rem;    --btn-padding-xs: 0 0.75rem;  --btn-font-size-xs: 0.8125rem;
  --btn-height-md: 2.75rem; --btn-padding-md: 0 1.25rem;  --btn-font-size-md: 0.9375rem;
  --btn-height: var(--btn-height-sm); --btn-padding: var(--btn-padding-sm); --btn-font-size: var(--btn-font-size-sm);
}
.m3-btn.btn\:outlined { --btn-background-color: var(--color-surface); }
.m3-btn.btn\:outlined.btn-color\:danger { --btn-border-color: var(--color-danger-subtle); }

/* ── 카드: 12px 모서리(앱 카드 0.75rem), 24px 여백, 제목은 본문보다 한 단계 큰 굵은 글씨 ── */
.m3-card {
  --card-border-radius: var(--radius-4);
  --card-padding-x: 1.5rem;
  --card-padding-y: 1.5rem;
  --card-headline-size: var(--font-size-body-lg);
  --card-headline-weight: var(--font-weight-bold);
}

/* ── 텍스트 필드(외부 레이블·테두리형): 40px, 8px 모서리, 카드와 같은 테두리색 ── */
.m3-text-field.field\:outlined.field-label\:top,
.m3-text-field.field\:outlined.field-label\:none {
  --field-border-radius: var(--radius-3);
  --field-input-box-border-radius: var(--radius-3);
  --field-background: var(--color-surface);
  --field-padding-top: 0;
  --field-outline-color: var(--color-border);
  --field-label-weight: var(--font-weight-semibold);
  --field-font-size: 0.875rem;
  --field-outline-color-focus: var(--color-primary);
}
/* 높이 40px — 외부 레이블 모드는 안쪽 상자가, 레이블 없는 모드는 컨테이너가 상자다 */
.m3-text-field.field\:outlined.field-label\:top  { --field-input-box-min-height: 2.5rem; }
.m3-text-field.field\:outlined.field-label\:none { --field-min-height: 2.5rem; }