/* ============================================================================
 * theme-noti.css — 맑은노티 디자인 시스템 적용 (시안)
 *
 * 정본(SoT): 1. general/사이트_스타일가이드/맑은노티/design_handoff_malgn_noti/
 *            DESIGN_GUIDE.md(원칙) + README.md(토큰 상세) + main.css(실행 토큰)
 * 근거 표준: ~/.claude/knowledge/DESIGN-디자인시스템.md §0
 *            "콘솔·솔루션 성격 디자인은 미지정 시 맑은노티를 기본으로 한다"
 *
 * 시각언어 요약 — "Less chrome, more clarity."
 *   · 무채색 Ink 11단계 + 단일 그린 액센트 #00DC82 (페이지당 4~6회 이내)
 *   · 1px hairline #ececec 기본. 그림자는 floating UI(팝오버·모달)에만
 *   · 숫자는 mono + tabular-nums
 *   · 카드 그라데이션·다색 아이콘·12px 이상 라운드 금지
 *
 * ★ 적용 방식(시안 단계) — 원본 CSS를 수정하지 않는다.
 *   이 파일의 모든 규칙은 html[data-theme="noti"] 로 스코프된다.
 *   켜기: http://localhost:4500/?theme=noti#/student/dashboard
 *   끄기: 쿼리 없이 접속(기존 파란 테마 그대로)
 *   → DJ님 컨펌 후 최종 적용 시 스코프를 :root 로 승격하고 원본 토큰을 정리한다.
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * 1. 토큰 재정의 — 아하스쿨 변수를 맑은노티 값으로 매핑
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] {
  /* Ink 11단계 (맑은노티 main.css 원본 값) */
  --ink-900: #0a0a0a;
  --ink-800: #18181b;
  --ink-700: #27272a;
  --ink-600: #3f3f46;
  --ink-500: #52525b;
  --ink-400: #71717a;
  --ink-300: #a1a1aa;
  --ink-200: #d4d4d8;
  --ink-100: #e4e4e7;
  --ink-50: #f4f4f5;
  --paper: #fafaf9;
  --line: #ececec;

  /* 단일 액센트 — AI / Live / +delta / Primary CTA 에만 */
  --accent: #00dc82;
  --accent-soft: #e6fbf2;
  --accent-ink: #007a48;

  /* ── 아하스쿨 브랜드 토큰 → 맑은노티 매핑 ──
   * 핵심 전환: primary 가 "파랑"이 아니라 "먹(ink-900)"이다.
   * 맑은노티에서 주 CTA 는 검정 버튼이고, 그린은 액센트로만 아껴 쓴다. */
  --color-primary: var(--ink-900);
  --color-primary-active: var(--ink-800);
  --color-secondary: var(--ink-700);
  --color-on-primary: #ffffff;

  /* Surface — 배경은 paper, 표면은 white */
  --color-canvas: #ffffff;
  --color-canvas-soft: var(--paper);
  --color-surface: #ffffff;
  --color-hairline: var(--line);

  /* Text — 한 화면에 3단계만(Primary/Secondary/Muted) */
  --color-ink: var(--ink-900);
  --color-ink-secondary: var(--ink-700);
  --color-ink-muted: var(--ink-500);
  --color-ink-faint: var(--ink-400);

  /* 장식용 다색 액센트 전면 회수 — "컬러풀한 아이콘 금지"(Don't)
   * 전부 무채색으로 눕히고, 의미 있는 곳에서만 --accent 를 쓴다. */
  --color-accent-sky: var(--ink-400);
  --color-accent-purple: var(--ink-400);
  --color-accent-pink: var(--ink-400);
  --color-accent-orange: var(--ink-500);
  --color-accent-teal: var(--ink-500);
  --color-accent-green: var(--accent);

  /* 역할 색(학생/교사/관리자) — 무채색화.
   * 원칙 1 "Calm by default": 역할은 상태가 아니므로 색을 쓰지 않는다. */
  --color-student: var(--ink-900);
  --color-instructor: var(--ink-700);
  --color-admin: var(--ink-800);

  /* 상태색만 채도 유지 — "채도 높은 색은 상태(error/success)에만" */
  --color-success: var(--accent-ink);
  --color-warning: #b45309;
  --color-danger: #e11d48;

  /* Elevation — 평평하게. 그림자는 floating UI 에만 */
  --shadow-soft: none;
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Radius — "12px 이상 라운드 금지" */
  --rounded-xs: 2px;
  --rounded-sm: 4px;
  --rounded-md: 6px;
  --rounded-lg: 8px;
  --rounded-xl: 10px;

  /* Progress — 얇게 */
  --progress-height-sm: 3px;
  --progress-height-md: 4px;
  --progress-height-lg: 6px;

  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── 미정의 토큰 회수 ──
   * 레이아웃/컴포넌트가 var(--lms-*, #하드코딩) 형태로 쓰는데 정의가 어디에도 없어
   * 폴백 색(파랑 #0075de 등)이 그대로 나오고 있었다(실측 6종).
   * 여기서 정의해 주면 폴백이 발동하지 않는다 — 원본 소스를 고칠 필요가 없다. */
  --lms-primary: var(--ink-900);
  --lms-text: var(--ink-800);
  --lms-text-muted: var(--ink-400);
  --lms-border: var(--line);
  --lms-danger: var(--color-danger);
}

/* ---------------------------------------------------------------------------
 * 2. 표면 — hairline이 기본, 그림자 제거
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] body {
  background: var(--paper);
  color: var(--ink-700);
}

html[data-theme='noti'] .card,
html[data-theme='noti'] .lms-card,
html[data-theme='noti'] .lms-stat-card,
html[data-theme='noti'] .lms-panel,
html[data-theme='noti'] .list-group-item,
html[data-theme='noti'] .modal-content {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: var(--rounded-lg);
}

/* 카드 hover 로 떠오르는 연출 금지 — "카드 scale hover, 그림자 점프" 금지(Motion) */
html[data-theme='noti'] .card:hover,
html[data-theme='noti'] .lms-card:hover,
html[data-theme='noti'] .lms-stat-card:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--ink-200);
}

/* 팝오버·드롭다운·모달만 그림자 허용 */
html[data-theme='noti'] .dropdown-menu,
html[data-theme='noti'] .popover,
html[data-theme='noti'] .modal-content {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------------------------------------
 * 3. 그라데이션 회수 — "Information first, decoration last"
 *    수업 카드 썸네일 등 59곳의 linear-gradient 를 평면 톤으로 눕힌다.
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] [style*='linear-gradient'],
html[data-theme='noti'] [style*='gradient'] {
  background-image: none !important;
  background-color: var(--ink-50) !important;
}

/* 수업 썸네일 — 역할별 파랑/청록 그라데이션(base.css)을 무채색 면으로.
 * 인라인이 아니라 CSS 클래스라 위 [style*=] 셀렉터로는 안 잡힌다(실측 확인). */
html[data-theme='noti'] .lms-course-thumb,
html[data-theme='noti'] .lms-course-thumb-student,
html[data-theme='noti'] .lms-course-thumb-instructor {
  background: var(--ink-50) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--line);
}

/* CourseCover(.cc) — 위 그라데이션 회수 규칙이 인라인 gradient 를 벗겨 "빈 회색"이 되던 것을
 * "designed monochrome"으로 복원한다: 잉크 면 + 보이는 워터마크 글리프 + 흰 타일(먹 아이콘) + 먹 라벨.
 * 맑은노티 "Information first" 원칙(무채색)은 지키되 미완성 인상은 제거한다. */
html[data-theme='noti'] .cc {
  background: var(--ink-100) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--line);
}
html[data-theme='noti'] .cc-watermark {
  color: var(--ink-400) !important;
  opacity: 0.45 !important;
}
html[data-theme='noti'] .cc-tile {
  background: #ffffff !important;
  border: 1px solid var(--ink-200) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme='noti'] .cc-tile i,
html[data-theme='noti'] .cc-mini-icon {
  color: var(--ink-900) !important;
}
html[data-theme='noti'] .cc-label {
  background: var(--ink-900) !important;
  color: #ffffff !important;
}

/* 단, 진행바(progress)는 채움이 정보이므로 유지하되 단색 먹으로 */
html[data-theme='noti'] .progress-bar,
html[data-theme='noti'] .lms-progress-bar,
html[data-theme='noti'] .lms-progress > span {
  background-image: none !important;
  background-color: var(--ink-900) !important;
}

/* 완료(100%) 진행바만 액센트 — 의미 있는 액센트 사용처 */
html[data-theme='noti'] .lms-progress--done .lms-progress-bar,
html[data-theme='noti'] .progress-bar.bg-success {
  background-color: var(--accent) !important;
}

/* ---------------------------------------------------------------------------
 * 4. 타이포 — 숫자는 mono + tabular-nums (원칙 5)
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] .lms-stat-value,
html[data-theme='noti'] .lms-stat-card .h2,
html[data-theme='noti'] .lms-metric,
html[data-theme='noti'] .lms-kpi-value,
html[data-theme='noti'] td .num,
html[data-theme='noti'] .num,
html[data-theme='noti'] .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

/* 표의 수치 열 정렬 — 숫자는 항상 tabular */
html[data-theme='noti'] table td,
html[data-theme='noti'] table th {
  font-variant-numeric: tabular-nums;
}

/* 제목 위계는 박스가 아니라 폰트로(원칙 4) */
html[data-theme='noti'] h1,
html[data-theme='noti'] h2,
html[data-theme='noti'] h3,
html[data-theme='noti'] .h1,
html[data-theme='noti'] .h2,
html[data-theme='noti'] .h3 {
  color: var(--ink-900);
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 5. 버튼 — 주 CTA는 먹, 화면당 solid 1개 원칙
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] .btn {
  border-radius: var(--rounded-md);
  box-shadow: none;
  font-weight: 500;
}

html[data-theme='noti'] .btn-primary {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #ffffff;
}
html[data-theme='noti'] .btn-primary:hover,
html[data-theme='noti'] .btn-primary:focus {
  background: var(--ink-800);
  border-color: var(--ink-800);
}

html[data-theme='noti'] .btn-outline-secondary,
html[data-theme='noti'] .btn-outline-primary {
  border-color: var(--ink-200);
  color: var(--ink-700);
  background: #ffffff;
}
html[data-theme='noti'] .btn-outline-secondary:hover,
html[data-theme='noti'] .btn-outline-primary:hover {
  background: var(--ink-50);
  border-color: var(--ink-300);
  color: var(--ink-900);
}

/* ---------------------------------------------------------------------------
 * 6. 배지·상태 — 색만으로 의미 전달 금지(a11y). 도트 + 라벨.
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] .badge {
  border-radius: var(--rounded-sm);
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--ink-50);
  color: var(--ink-700);
}
html[data-theme='noti'] .badge.bg-primary,
html[data-theme='noti'] .badge.bg-info {
  background: var(--ink-50) !important;
  color: var(--ink-700) !important;
}
html[data-theme='noti'] .badge.bg-success {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  border-color: #b8f0d8;
}
html[data-theme='noti'] .badge.bg-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fde68a;
}
html[data-theme='noti'] .badge.bg-danger {
  background: #ffe4e6 !important;
  color: #9f1239 !important;
  border-color: #fecdd3;
}

/* ---------------------------------------------------------------------------
 * 7. 셸(사이드바·탑바) — 무채색, hairline 분리
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] .lms-sidebar {
  background: #ffffff;
  border-right: 1px solid var(--line);
  box-shadow: none;
}
html[data-theme='noti'] .lms-topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

/* 현재 메뉴 = 먹 배경(액센트 낭비 금지) */
html[data-theme='noti'] .lms-nav-item.active {
  background: var(--ink-900);
  color: #ffffff;
}
html[data-theme='noti'] .lms-nav-item:hover:not(.active) {
  background: var(--ink-50);
  color: var(--ink-900);
}
html[data-theme='noti'] .lms-sidebar-section {
  color: var(--ink-400);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

/* 알림 배지 — 숫자이므로 mono */
html[data-theme='noti'] .lms-nav-badge {
  background: var(--ink-900);
  color: #ffffff;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  border-radius: var(--rounded-full);
}

/* ---------------------------------------------------------------------------
 * 8. AI 표식 — "조용한 파트너". ✨ + 그린 하나로만, 보라·무지개 금지(원칙 7)
 *    현재 앱은 AI 패널 아이콘에 보라 그라데이션(#667eea→#764ba2)을 쓰고 있어
 *    맑은노티 금지사항에 정면으로 걸린다 → 먹 배경 + 그린 아이콘으로 교정.
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] .lms-ai-panel-header [style*='667eea'],
html[data-theme='noti'] .lms-ai-float-btn,
html[data-theme='noti'] .lms-ai-icon {
  background: var(--ink-900) !important;
  background-image: none !important;
  color: var(--accent) !important;
}
html[data-theme='noti'] .lms-ai-panel {
  border-left: 1px solid var(--line);
  box-shadow: none;
  background: #ffffff;
}
html[data-theme='noti'] .lms-ai-quick-btn {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink-700);
  border-radius: var(--rounded-full);
}
html[data-theme='noti'] .lms-ai-quick-btn:hover {
  background: var(--ink-50);
  border-color: var(--ink-300);
}
html[data-theme='noti'] .lms-ai-msg-bubble.ai {
  background: var(--ink-50);
  border: 1px solid var(--line);
  color: var(--ink-800);
}
html[data-theme='noti'] .lms-ai-msg-bubble.user {
  background: var(--ink-900);
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * 9. 폼 — ring 대신 hairline, 포커스는 먹 링
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] .form-control,
html[data-theme='noti'] .form-select,
html[data-theme='noti'] .input-group-text {
  border-color: var(--ink-200);
  border-radius: var(--rounded-md);
  box-shadow: none;
  color: var(--ink-800);
}
html[data-theme='noti'] .form-control:focus,
html[data-theme='noti'] .form-select:focus {
  border-color: var(--ink-900);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}

/* ---------------------------------------------------------------------------
 * 10. 표 — 저밀도, hairline, 헤더는 muted 소문자
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] table thead th {
  background: transparent;
  border-bottom: 1px solid var(--line);
  color: var(--ink-400);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
html[data-theme='noti'] table tbody td {
  border-bottom: 1px solid var(--line);
  color: var(--ink-700);
}
html[data-theme='noti'] table tbody tr:hover td {
  background: var(--paper);
}

/* ---------------------------------------------------------------------------
 * 11. 로그인 — 배경 장식 회수(원칙 2)
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] .lms-login-bg {
  background: var(--paper);
}
html[data-theme='noti'] .lms-login-deco {
  display: none; /* 장식 원형 블러 — decoration last */
}
html[data-theme='noti'] .lms-login-card {
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: var(--rounded-xl);
}
/* 활성 역할 탭 — 먹 배경 + 흰 글자.
 * ★ !important 가 필요한 이유(실측): base.css 의 역할별 규칙이 활성 탭 글자색을
 *   --color-primary 로 잡는데, 테마에서 --color-primary 를 ink-900 으로 바꾸는 순간
 *   "먹 글자 on 먹 배경"이 되어 대비 1:1 로 글자가 완전히 사라졌다.
 *   토큰만 갈아끼울 때 생기는 전형적인 사고라 여기서 못 박는다. */
html[data-theme='noti'] .lms-login-role-tab.active,
html[data-theme='noti'] .lms-login-role-tab.active[data-role='student'],
html[data-theme='noti'] .lms-login-role-tab.active[data-role='instructor'],
html[data-theme='noti'] .lms-login-role-tab.active[data-role='admin'] {
  background: var(--ink-900) !important;
  color: #ffffff !important;
  border-color: var(--ink-900) !important;
}
html[data-theme='noti'] .lms-login-role-tab.active .bi {
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
 * 13. 인라인 하드코딩 색 회수
 *   화면 곳곳에 브랜드 색이 인라인 style 로 직접 박혀 있다(실측: #0075de 25회,
 *   #213183 13회, #2a9d99 7회, #dd5b00 6회, 보라 #667eea/#764ba2 10회).
 *   토큰을 바꿔도 이건 안 따라오므로 값 단위로 회수한다.
 *   ※ 시안 단계라 페이지 소스를 고치지 않는다 — 최종 적용 시 소스에서 토큰으로 교체할 것.
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] [style*='#0075de'],
html[data-theme='noti'] [style*='#213183'],
html[data-theme='noti'] [style*='#2a9d99'],
html[data-theme='noti'] [style*='#1aae39'],
html[data-theme='noti'] [style*='#667eea'],
html[data-theme='noti'] [style*='#764ba2'] {
  color: var(--ink-900) !important;
}
/* 위 요소가 배경으로 쓰는 경우(아바타·아이콘 박스)는 먹 배경 + 흰 글자 */
html[data-theme='noti'] .lms-user-avatar,
html[data-theme='noti'] .lms-ai-panel-header > div > div:first-child {
  background: var(--ink-900) !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* KPI 4색 → 단일 먹. "3차 이상 시리즈에 새 컬러를 만들지 않는다"(Data viz) */
html[data-theme='noti'] .lms-ai-summary .fw-700,
html[data-theme='noti'] .lms-card .row .text-center .fw-700 {
  color: var(--ink-900) !important;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * 14. 액션 칩 — "AI 추천 액션은 칩 형태". 색으로 비명 지르지 않는다.
 *   현재 노랑 solid / 빨강 outline / 파랑 outline 3색이 섞여 있다 → hairline 중립으로.
 *   심각도는 색이 아니라 좌측 도트로 전달한다(a11y: 색만으로 의미 전달 금지).
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] .btn-warning,
html[data-theme='noti'] .btn-outline-danger,
html[data-theme='noti'] .btn-outline-warning {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-700) !important;
}
html[data-theme='noti'] .btn-warning:hover,
html[data-theme='noti'] .btn-outline-danger:hover,
html[data-theme='noti'] .btn-outline-warning:hover {
  background: var(--ink-50) !important;
  border-color: var(--ink-300) !important;
  color: var(--ink-900) !important;
}
/* 경고 아이콘만 상태색 유지 — 라벨+아이콘 병기로 의미 전달 */
html[data-theme='noti'] .btn-outline-danger .bi {
  color: var(--color-danger) !important;
}

/* AI 패널 전송 버튼 — 파랑 → 먹 */
html[data-theme='noti'] .lms-ai-panel-send {
  background: var(--ink-900) !important;
  border-color: var(--ink-900) !important;
  color: #ffffff !important;
  box-shadow: none;
}

/* 좌측 강조 바(border-left)도 액센트 낭비를 막고 먹으로 */
html[data-theme='noti'] [style*='border-left:4px solid'] {
  border-left-color: var(--ink-900) !important;
}

/* ---------------------------------------------------------------------------
 * 15. 부트스트랩 시맨틱 색 교정 (실측 결함)
 *   `.text-warning` 이 53곳에서 쓰이는데 부트스트랩 기본 amber(#ffc107)라
 *   흰 배경 대비가 **1.56:1** 로 WCAG AA(4.5:1) 에 한참 못 미친다.
 *   맑은노티 a11y 규칙("최소 ink-500 on white = 4.5:1")에 맞춰 어두운 앰버로 교체.
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] {
  --bs-warning: #b45309;
  --bs-warning-rgb: 180, 83, 9;
  --bs-danger: #e11d48;
  --bs-danger-rgb: 225, 29, 72;
  --bs-success: #007a48;
  --bs-success-rgb: 0, 122, 72;
  --bs-primary: #0a0a0a;
  --bs-primary-rgb: 10, 10, 10;
}
html[data-theme='noti'] .text-warning {
  color: #b45309 !important;
}
html[data-theme='noti'] .text-primary {
  color: var(--ink-900) !important;
}
html[data-theme='noti'] .text-success {
  color: var(--accent-ink) !important;
}

/* ---------------------------------------------------------------------------
 * 16. 시간표 — 채도 낮춘 회색 타일 + 좌측 4px 컬러 바 (DJ님 컨펌 ③, 2026-07-22)
 *
 *   맑은노티 "Calm by default"(무채색 기본)와, 시간표에서 과목을 한눈에 구분해야 하는
 *   정보 설계 요구가 충돌한다. 전면 무채색은 시연 가독성을 떨어뜨리고,
 *   색 타일 유지는 화면당 액센트 상한을 무너뜨린다 → 절충을 채택했다.
 *
 *   면(面)에서 색을 빼 화면을 조용하게 유지하되, 과목 식별은 얇은 컬러 바가 담당한다.
 *   같은 화면의 "오늘의 수업" 목록이 이미 좌측 3px 컬러 바를 쓰므로 시각 언어도 일치한다.
 *   과목명 텍스트를 함께 두어 색에만 의존하지 않는다(a11y: 색만으로 의미 전달 금지).
 * -------------------------------------------------------------------------*/
html[data-theme='noti'] .lms-tt-cell {
  background: var(--ink-50) !important;
  color: var(--ink-800) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--subject-color, var(--ink-300)) !important;
  border-radius: 0 var(--rounded-sm) var(--rounded-sm) 0 !important;
}
/* 강의실 보조 텍스트는 한 단계 옅게(텍스트 3단계 위계 유지) */
html[data-theme='noti'] .lms-tt-cell > div:last-child {
  color: var(--ink-400) !important;
}

/* ---------------------------------------------------------------------------
 * 12. 접근성 — 무한 애니메이션은 reduced-motion 에서 정지
 * -------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  html[data-theme='noti'] * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}