/* 라이트 모드 오버라이드 — 기본은 다크 테마(Tailwind 클래스 그대로), <html data-theme="light">일 때만
   슬레이트 계열 배경/텍스트/테두리 클래스를 밝은 값으로 강제 치환한다.
   accent 텍스트 색(emerald/blue/purple 등 200~500번대)은 다크 배경 전용으로 고른 밝은 색이라
   흰 배경에서는 안 보이므로, 파일 하단의 "accent 텍스트" 섹션에서 코드 블록 밖에 한해 짙은 색으로
   따로 치환한다(코드 블록 안은 항상 다크 배경이라 원래 색 그대로 유지). */

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="light"] body {
  background-color: #ffffff !important;
}

/* public/index.html 히어로 섹션 — Tailwind 유틸리티가 아니라 커스텀 그라디언트라 별도 오버라이드 필요 */
:root[data-theme="light"] .gradient-hero {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 40%, #dbeafe 100%) !important;
}

/* study/learn.html .md-body — 학습 콘텐츠 본문(h1/h2/h3/p/li/a/strong/em/표/인용구)이
   Tailwind 클래스가 아니라 <style> 안에 color: white 등으로 직접 박혀있어서, 위의 클래스
   리매핑으로는 전혀 안 잡히던 부분. "흰 글씨가 통째로 안 보인다"는 제보의 실제 원인이 이거였음 —
   실제 학습 페이지 본문 텍스트 대부분이 여기 걸려있으므로 최우선으로 고쳐야 한다. */
:root[data-theme="light"] .md-body h1,
:root[data-theme="light"] .md-body h2,
:root[data-theme="light"] .md-body strong { color: #111827 !important; }
:root[data-theme="light"] .md-body h3 { color: #1e293b !important; }
:root[data-theme="light"] .md-body p,
:root[data-theme="light"] .md-body li,
:root[data-theme="light"] .md-body td { color: #374151 !important; }
:root[data-theme="light"] .md-body em { color: #4338ca !important; }
:root[data-theme="light"] .md-body a { color: #1d4ed8 !important; }
:root[data-theme="light"] .md-body blockquote p { color: #1d4ed8 !important; }
/* 인라인 코드(` `)는 배경도 어두운 고정값이라 텍스트만 바꾸면 다크온다크가 되므로 배경도 같이 변경 */
:root[data-theme="light"] .md-body :not(pre) > code {
  background: #eef2ff !important;
  color: #1d4ed8 !important;
}
/* 표 헤더도 배경이 어두운 고정값이라 같이 밝게 */
:root[data-theme="light"] .md-body th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
/* .md-body pre code(마크다운 코드펜스)와 .code-block은 항상 다크 배경 그대로 유지 — 손대지 않음 */

/* 사이드바(회차 목록) — 배경이 zinc 계열 고정 그라디언트라 슬레이트 클래스 오버라이드로는 안 잡힘.
   Figma 목업 기준으로 솔리드 화이트 사이드바 + #E4E8EF 테두리로 교체 */
:root[data-theme="light"] #sidebar {
  background: #ffffff !important;
  border-right-color: #e4e8ef !important;
}
:root[data-theme="light"] .page-item:not(.active) { color: #6b7280 !important; }
:root[data-theme="light"] .page-item:not(.active):hover { color: #111827 !important; background: #f1f3f7 !important; }
:root[data-theme="light"] .page-item .p-idx { color: #9ca3af !important; }
:root[data-theme="light"] .page-item.active { color: #1d4ed8 !important; background: #eff6ff !important; border-left-color: #1d4ed8 !important; }
:root[data-theme="light"] .page-item.active .p-idx { color: #1d4ed8 !important; }
:root[data-theme="light"] .page-item .p-dot { background: #ffffff !important; border-color: #d1d5db !important; }
:root[data-theme="light"] .page-item .p-dot.p-done { background: #047857 !important; border-color: #047857 !important; opacity: 1 !important; }
:root[data-theme="light"] .page-item.active .p-dot { background: #1d4ed8 !important; border-color: #1d4ed8 !important; box-shadow: 0 0 0 3px rgba(29,78,216,.14) !important; }

/* 사이드바 과목 배지 + 진도 바 — 다크 전용 하드코딩 그라디언트 교체 */
:root[data-theme="light"] .course-badge {
  background: #f8fafc !important;
  border-color: #e4e8ef !important;
}
:root[data-theme="light"] .session-progress-track { background: #e4e8ef !important; }
:root[data-theme="light"] .session-progress-fill { background: #1d4ed8 !important; }
:root[data-theme="light"] .bottom-progress-track { background: #e4e8ef !important; }
:root[data-theme="light"] .bottom-progress-fill { background: #1d4ed8 !important; }
:root[data-theme="light"] .session-active { background: #eff6ff !important; border-left-color: #1d4ed8 !important; }
:root[data-theme="light"] .session-done .session-num { background: #047857 !important; color: #ffffff !important; }

/* 브랜드 마크 / primary 버튼 — Figma는 그라디언트 대신 솔리드 블루 */
:root[data-theme="light"] .brand-mark {
  background: #1d4ed8 !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .btn-primary {
  background: #1d4ed8 !important;
}
:root[data-theme="light"] .btn-primary:hover {
  background: #1e40af !important;
  opacity: 1 !important;
}

/* 유저 칩 / 아바타 / 역할 뱃지 */
:root[data-theme="light"] .user-chip {
  background: #ffffff !important;
  border-color: #e4e8ef !important;
}
:root[data-theme="light"] .user-avatar {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}
:root[data-theme="light"] .role-pill {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}

/* 파이썬 실행 준비 상태 뱃지(#pyodideStatus) — 다크 전용 저알파 rgba라 라이트 배경에서 흐릿함 */
:root[data-theme="light"] #pyodideStatus.text-emerald-400 { background: #ecfdf5 !important; border-color: #a7f3d0 !important; }
:root[data-theme="light"] #pyodideStatus.text-yellow-400  { background: #fffbeb !important; border-color: #fde68a !important; }
:root[data-theme="light"] #pyodideStatus.text-red-400     { background: #fef2f2 !important; border-color: #fecaca !important; }
:root[data-theme="light"] #pyodideStatus.text-blue-400    { background: #eff6ff !important; border-color: #bfdbfe !important; }

/* 실행 결과 상태 라벨 / 메모 저장 상태 칩 */
:root[data-theme="light"] #outputStatus.st-ok  { background: #ecfdf5 !important; color: #047857 !important; }
:root[data-theme="light"] #outputStatus.st-err { background: #fef2f2 !important; color: #b91c1c !important; }
:root[data-theme="light"] #memoStatus:not(:empty) { background: #ecfdf5 !important; color: #047857 !important; }

/* 퀴즈/채점 결과 상태 박스 — bg-{color}-{600~950}(/opacity), border-{color}-{600~900}(/opacity)는
   기존 slate/zinc 리매핑 대상에 없어서 라이트 모드에서 진한 반투명 다크 박스로 떠 있던 것을
   Figma의 "파스텔 배경 + 진한 테두리" 배지 패턴으로 교체(퀴즈 정답/오답, 채점 결과, 프로젝트 뱃지 등) */
:root[data-theme="light"] .bg-emerald-950,
:root[data-theme="light"] .bg-emerald-950\/40,
:root[data-theme="light"] .bg-emerald-900,
:root[data-theme="light"] .bg-emerald-900\/50,
:root[data-theme="light"] .bg-emerald-950\/30 { background-color: #ecfdf5 !important; }
:root[data-theme="light"] .border-emerald-700\/50,
:root[data-theme="light"] .border-emerald-800\/50,
:root[data-theme="light"] .border-emerald-500 { border-color: #a7f3d0 !important; }

:root[data-theme="light"] .bg-red-950,
:root[data-theme="light"] .bg-red-950\/40,
:root[data-theme="light"] .bg-red-950\/30,
:root[data-theme="light"] .bg-red-900,
:root[data-theme="light"] .bg-red-900\/60 { background-color: #fef2f2 !important; }
:root[data-theme="light"] .border-red-800\/50,
:root[data-theme="light"] .border-red-500 { border-color: #fecaca !important; }

:root[data-theme="light"] .bg-amber-950,
:root[data-theme="light"] .bg-amber-950\/40,
:root[data-theme="light"] .bg-amber-900,
:root[data-theme="light"] .bg-amber-900\/50 { background-color: #fffbeb !important; }
:root[data-theme="light"] .border-amber-700\/50,
:root[data-theme="light"] .border-amber-800\/50 { border-color: #fde68a !important; }

:root[data-theme="light"] .bg-blue-950,
:root[data-theme="light"] .bg-blue-950\/30,
:root[data-theme="light"] .bg-blue-900 { background-color: #eff6ff !important; }
:root[data-theme="light"] .border-blue-700 { border-color: #bfdbfe !important; }

:root[data-theme="light"] .bg-purple-900 { background-color: #f5f3ff !important; }
:root[data-theme="light"] .border-purple-700 { border-color: #ddd6fe !important; }

:root[data-theme="light"] .bg-indigo-600 { background-color: #4338ca !important; }

:root[data-theme="light"] .bg-sky-950,
:root[data-theme="light"] .bg-sky-900 { background-color: #f0f9ff !important; }
:root[data-theme="light"] .border-sky-700 { border-color: #bae6fd !important; }

:root[data-theme="light"] .bg-rose-950,
:root[data-theme="light"] .bg-rose-900 { background-color: #fff1f2 !important; }
:root[data-theme="light"] .border-rose-700 { border-color: #fecdd3 !important; }

/* 솔리드 체크마크/버튼 배지(파스텔이 아니라 진한 솔리드 유지) */
:root[data-theme="light"] .bg-emerald-600 { background-color: #047857 !important; }
:root[data-theme="light"] .bg-purple-600  { background-color: #7c3aed !important; }
:root[data-theme="light"] .bg-blue-600    { background-color: #1d4ed8 !important; }

/* 위 솔리드 배지/버튼은 흰 글씨를 유지해야 하는데, 전역 .text-white → #0f172a 규칙(다크 패널 텍스트용)이
   그대로 적용되면 색상 버튼 위 글씨까지 어두워져 버림 — 컴파운드 셀렉터로 specificity를 높여 우선시킴 */
:root[data-theme="light"] .bg-emerald-600.text-white,
:root[data-theme="light"] .bg-purple-600.text-white,
:root[data-theme="light"] .bg-blue-600.text-white,
:root[data-theme="light"] .bg-indigo-600.text-white,
:root[data-theme="light"] .hover\:bg-purple-500.text-white:hover { color: #ffffff !important; }

/* 로그인 페이지 탭(로그인/회원가입) 활성 상태 */
:root[data-theme="light"] .tab-btn.active { color: #0f172a !important; }

/* 배경 */
:root[data-theme="light"] .bg-slate-950  { background-color: #ffffff !important; }
:root[data-theme="light"] .bg-slate-900  { background-color: #f8fafc !important; }
:root[data-theme="light"] .bg-slate-800  { background-color: #e2e8f0 !important; }
:root[data-theme="light"] .bg-slate-750  { background-color: #e2e8f0 !important; }
:root[data-theme="light"] .bg-slate-700  { background-color: #cbd5e1 !important; }
:root[data-theme="light"] .bg-slate-600  { background-color: #94a3b8 !important; }
:root[data-theme="light"] .bg-zinc-700   { background-color: #d4d4d8 !important; }
:root[data-theme="light"] .bg-zinc-700\/40 { background-color: rgba(212,212,216,.4) !important; }

/* 반투명 배경(네비바 backdrop-blur 등) */
:root[data-theme="light"] .bg-slate-950\/95 { background-color: rgba(255,255,255,.95) !important; }
:root[data-theme="light"] .bg-slate-950\/90 { background-color: rgba(255,255,255,.9)  !important; }
:root[data-theme="light"] .bg-slate-950\/80 { background-color: rgba(255,255,255,.85) !important; }
:root[data-theme="light"] .bg-slate-950\/60 { background-color: rgba(255,255,255,.75) !important; }
:root[data-theme="light"] .bg-slate-900\/95 { background-color: rgba(248,250,252,.95) !important; }
:root[data-theme="light"] .bg-slate-800\/60 { background-color: rgba(226,232,240,.6)  !important; }
:root[data-theme="light"] .bg-slate-800\/50 { background-color: rgba(226,232,240,.5)  !important; }
:root[data-theme="light"] .bg-slate-800\/40 { background-color: rgba(226,232,240,.4)  !important; }
:root[data-theme="light"] .bg-slate-800\/30 { background-color: rgba(226,232,240,.3)  !important; }

/* 텍스트 */
:root[data-theme="light"] .text-white    { color: #0f172a !important; }
:root[data-theme="light"] .text-slate-200 { color: #1e293b !important; }
:root[data-theme="light"] .text-slate-300 { color: #334155 !important; }
:root[data-theme="light"] .text-slate-400 { color: #52606d !important; }
:root[data-theme="light"] .text-slate-500 { color: #64748b !important; }
:root[data-theme="light"] .text-slate-600 { color: #64748b !important; }
:root[data-theme="light"] .text-slate-700 { color: #334155 !important; }
:root[data-theme="light"] .text-zinc-300  { color: #3f3f46 !important; }
:root[data-theme="light"] .text-zinc-400  { color: #52525b !important; }
:root[data-theme="light"] .text-zinc-500  { color: #71717a !important; }

/* 테두리 */
:root[data-theme="light"] .border-slate-800     { border-color: #e2e8f0 !important; }
:root[data-theme="light"] .border-slate-800\/60 { border-color: rgba(226,232,240,.6) !important; }
:root[data-theme="light"] .border-slate-700     { border-color: #cbd5e1 !important; }
:root[data-theme="light"] .border-slate-700\/50 { border-color: rgba(203,213,225,.5) !important; }
:root[data-theme="light"] .border-slate-600     { border-color: #94a3b8 !important; }
:root[data-theme="light"] .border-slate-500     { border-color: #64748b !important; }
:root[data-theme="light"] .border-slate-400     { border-color: #475569 !important; }

/* hover 변형 */
:root[data-theme="light"] .hover\:bg-slate-800:hover     { background-color: #e2e8f0 !important; }
:root[data-theme="light"] .hover\:bg-slate-750:hover     { background-color: #e2e8f0 !important; }
:root[data-theme="light"] .hover\:bg-slate-700:hover     { background-color: #cbd5e1 !important; }
:root[data-theme="light"] .hover\:bg-zinc-700:hover      { background-color: #d4d4d8 !important; }
:root[data-theme="light"] .hover\:border-slate-700:hover { border-color: #cbd5e1 !important; }
:root[data-theme="light"] .hover\:border-slate-600:hover { border-color: #94a3b8 !important; }
:root[data-theme="light"] .hover\:border-slate-500:hover { border-color: #64748b !important; }
:root[data-theme="light"] .hover\:border-slate-400:hover { border-color: #475569 !important; }
:root[data-theme="light"] .hover\:text-slate-200:hover   { color: #1e293b !important; }
:root[data-theme="light"] .hover\:text-slate-300:hover   { color: #334155 !important; }
:root[data-theme="light"] .hover\:text-slate-400:hover   { color: #52606d !important; }
:root[data-theme="light"] .hover\:text-white:hover       { color: #0f172a !important; }

/* 코드 에디터/코드 블록은 다크 그대로 유지(가독성) — CodeMirror, .code-block, pre code는 오버라이드 대상에서 제외 */

/* 테마 토글 버튼 */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 1px solid #334155;
  background: #1e293b;
  color: #cbd5e1;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.theme-toggle-btn:hover { background: #334155; }
:root[data-theme="light"] .theme-toggle-btn {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #334155;
}
:root[data-theme="light"] .theme-toggle-btn:hover { background: #e2e8f0; }

/* 라이트 모드에서 다크 배경 전용으로 골라둔 밝은 accent 텍스트 색(200~500번대)이
   흰 배경 위에서 안 보이는 문제 — 코드 블록(.code-block, .md-body pre, 에디터) 안은
   원래 색 그대로 두고(항상 다크 배경이라 문제 없음), 그 밖의 본문/배지 텍스트만
   읽을 수 있는 짙은 색으로 강제 치환한다. */
:root[data-theme="light"] .text-red-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #b91c1c !important; }
:root[data-theme="light"] .text-red-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #b91c1c !important; }
:root[data-theme="light"] .text-red-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #b91c1c !important; }
:root[data-theme="light"] .text-red-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #b91c1c !important; }
:root[data-theme="light"] .text-orange-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #c2410c !important; }
:root[data-theme="light"] .text-orange-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #c2410c !important; }
:root[data-theme="light"] .text-orange-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #c2410c !important; }
:root[data-theme="light"] .text-orange-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #c2410c !important; }
:root[data-theme="light"] .text-amber-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #b45309 !important; }
:root[data-theme="light"] .text-amber-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #b45309 !important; }
:root[data-theme="light"] .text-amber-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #b45309 !important; }
:root[data-theme="light"] .text-amber-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #b45309 !important; }
:root[data-theme="light"] .text-yellow-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #a16207 !important; }
:root[data-theme="light"] .text-yellow-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #a16207 !important; }
:root[data-theme="light"] .text-yellow-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #a16207 !important; }
:root[data-theme="light"] .text-yellow-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #a16207 !important; }
:root[data-theme="light"] .text-lime-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #4d7c0f !important; }
:root[data-theme="light"] .text-lime-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #4d7c0f !important; }
:root[data-theme="light"] .text-lime-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #4d7c0f !important; }
:root[data-theme="light"] .text-lime-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #4d7c0f !important; }
:root[data-theme="light"] .text-green-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #15803d !important; }
:root[data-theme="light"] .text-green-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #15803d !important; }
:root[data-theme="light"] .text-green-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #15803d !important; }
:root[data-theme="light"] .text-green-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #15803d !important; }
:root[data-theme="light"] .text-emerald-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #047857 !important; }
:root[data-theme="light"] .text-emerald-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #047857 !important; }
:root[data-theme="light"] .text-emerald-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #047857 !important; }
:root[data-theme="light"] .text-emerald-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #047857 !important; }
:root[data-theme="light"] .text-teal-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #0f766e !important; }
:root[data-theme="light"] .text-teal-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #0f766e !important; }
:root[data-theme="light"] .text-teal-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #0f766e !important; }
:root[data-theme="light"] .text-teal-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #0f766e !important; }
:root[data-theme="light"] .text-cyan-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #0e7490 !important; }
:root[data-theme="light"] .text-cyan-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #0e7490 !important; }
:root[data-theme="light"] .text-cyan-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #0e7490 !important; }
:root[data-theme="light"] .text-cyan-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #0e7490 !important; }
:root[data-theme="light"] .text-sky-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #0369a1 !important; }
:root[data-theme="light"] .text-sky-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #0369a1 !important; }
:root[data-theme="light"] .text-sky-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #0369a1 !important; }
:root[data-theme="light"] .text-sky-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #0369a1 !important; }
:root[data-theme="light"] .text-blue-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #1d4ed8 !important; }
:root[data-theme="light"] .text-blue-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #1d4ed8 !important; }
:root[data-theme="light"] .text-blue-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #1d4ed8 !important; }
:root[data-theme="light"] .text-blue-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #1d4ed8 !important; }
:root[data-theme="light"] .text-indigo-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #4338ca !important; }
:root[data-theme="light"] .text-indigo-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #4338ca !important; }
:root[data-theme="light"] .text-indigo-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #4338ca !important; }
:root[data-theme="light"] .text-indigo-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #4338ca !important; }
:root[data-theme="light"] .text-violet-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #6d28d9 !important; }
:root[data-theme="light"] .text-violet-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #6d28d9 !important; }
:root[data-theme="light"] .text-violet-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #6d28d9 !important; }
:root[data-theme="light"] .text-violet-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #6d28d9 !important; }
:root[data-theme="light"] .text-purple-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #7e22ce !important; }
:root[data-theme="light"] .text-purple-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #7e22ce !important; }
:root[data-theme="light"] .text-purple-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #7e22ce !important; }
:root[data-theme="light"] .text-purple-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #7e22ce !important; }
:root[data-theme="light"] .text-fuchsia-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #a21caf !important; }
:root[data-theme="light"] .text-fuchsia-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #a21caf !important; }
:root[data-theme="light"] .text-fuchsia-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #a21caf !important; }
:root[data-theme="light"] .text-fuchsia-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #a21caf !important; }
:root[data-theme="light"] .text-pink-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #be185d !important; }
:root[data-theme="light"] .text-pink-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #be185d !important; }
:root[data-theme="light"] .text-pink-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #be185d !important; }
:root[data-theme="light"] .text-pink-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #be185d !important; }
:root[data-theme="light"] .text-rose-200:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #be123c !important; }
:root[data-theme="light"] .text-rose-300:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #be123c !important; }
:root[data-theme="light"] .text-rose-400:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #be123c !important; }
:root[data-theme="light"] .text-rose-500:not(.code-block, .code-block *, .md-body pre, .md-body pre *, .CodeMirror, .CodeMirror *) { color: #be123c !important; }


/* 콘텐츠(.md) 전역 스캔 기반 추가 — 아래는 사람이 손으로 짠 게 아니라
   study/courses/**/*.md 전체에서 실사용 중인 dark 전용 색 클래스를 grep으로 추출해 생성함 */
/* study/courses/**/*.md 콘텐츠(문제 설명/팁/경고 등 콜아웃 박스, 뱃지)에서 광범위하게 쓰이는
   bg-{color}-{600~950}(/opacity) · border-{color}-{700~900}(/opacity) 조합 — 다크 배경 전용 저채도
   반투명 색이라 라이트 모드에서 전혀 매핑이 안 되어 있었음. 색상군별 파스텔 bg/진한 border로 통일 */
:root[data-theme="light"] .bg-amber-900\/20,
:root[data-theme="light"] .bg-amber-900\/40,
:root[data-theme="light"] .bg-amber-900\/50 { background-color: #fffbeb !important; }
:root[data-theme="light"] .bg-blue-900\/20,
:root[data-theme="light"] .bg-blue-900\/30,
:root[data-theme="light"] .bg-blue-900\/40,
:root[data-theme="light"] .bg-blue-900\/50,
:root[data-theme="light"] .bg-blue-900\/60,
:root[data-theme="light"] .bg-blue-950\/30,
:root[data-theme="light"] .bg-blue-950\/40 { background-color: #eff6ff !important; }
:root[data-theme="light"] .bg-cyan-900\/50 { background-color: #ecfeff !important; }
:root[data-theme="light"] .bg-emerald-900\/20,
:root[data-theme="light"] .bg-emerald-900\/30,
:root[data-theme="light"] .bg-emerald-900\/40,
:root[data-theme="light"] .bg-emerald-900\/50,
:root[data-theme="light"] .bg-emerald-950\/30,
:root[data-theme="light"] .bg-emerald-950\/40,
:root[data-theme="light"] .bg-emerald-950\/50 { background-color: #ecfdf5 !important; }
:root[data-theme="light"] .bg-fuchsia-900\/20,
:root[data-theme="light"] .bg-fuchsia-900\/50 { background-color: #fdf4ff !important; }
:root[data-theme="light"] .bg-green-900\/20,
:root[data-theme="light"] .bg-green-900\/30,
:root[data-theme="light"] .bg-green-900\/40,
:root[data-theme="light"] .bg-green-900\/50,
:root[data-theme="light"] .bg-green-950\/30,
:root[data-theme="light"] .bg-green-950\/40 { background-color: #f0fdf4 !important; }
:root[data-theme="light"] .bg-indigo-900\/20,
:root[data-theme="light"] .bg-indigo-900\/30,
:root[data-theme="light"] .bg-indigo-900\/40,
:root[data-theme="light"] .bg-indigo-900\/50 { background-color: #eef2ff !important; }
:root[data-theme="light"] .bg-purple-900\/40,
:root[data-theme="light"] .bg-purple-900\/50,
:root[data-theme="light"] .bg-purple-950\/30,
:root[data-theme="light"] .bg-purple-950\/40 { background-color: #f5f3ff !important; }
:root[data-theme="light"] .bg-red-900\/20,
:root[data-theme="light"] .bg-red-900\/30,
:root[data-theme="light"] .bg-red-900\/40,
:root[data-theme="light"] .bg-red-950\/30,
:root[data-theme="light"] .bg-red-950\/40 { background-color: #fef2f2 !important; }
:root[data-theme="light"] .bg-rose-900\/40,
:root[data-theme="light"] .bg-rose-900\/50 { background-color: #fff1f2 !important; }
:root[data-theme="light"] .bg-sky-900\/20,
:root[data-theme="light"] .bg-sky-900\/50 { background-color: #f0f9ff !important; }
:root[data-theme="light"] .bg-teal-900\/50 { background-color: #f0fdfa !important; }
:root[data-theme="light"] .bg-yellow-900\/20,
:root[data-theme="light"] .bg-yellow-900\/30,
:root[data-theme="light"] .bg-yellow-900\/40,
:root[data-theme="light"] .bg-yellow-900\/50,
:root[data-theme="light"] .bg-yellow-950\/30,
:root[data-theme="light"] .bg-yellow-950\/40 { background-color: #fefce8 !important; }

:root[data-theme="light"] .border-amber-700,
:root[data-theme="light"] .border-amber-700\/50,
:root[data-theme="light"] .border-amber-800\/30,
:root[data-theme="light"] .border-amber-800\/40 { border-color: #fde68a !important; }
:root[data-theme="light"] .border-blue-700,
:root[data-theme="light"] .border-blue-700\/30,
:root[data-theme="light"] .border-blue-700\/40,
:root[data-theme="light"] .border-blue-700\/50,
:root[data-theme="light"] .border-blue-800\/30,
:root[data-theme="light"] .border-blue-800\/40,
:root[data-theme="light"] .border-blue-800\/50,
:root[data-theme="light"] .border-blue-900\/50 { border-color: #bfdbfe !important; }
:root[data-theme="light"] .border-cyan-700,
:root[data-theme="light"] .border-cyan-700\/50,
:root[data-theme="light"] .border-cyan-800\/40 { border-color: #a5f3fc !important; }
:root[data-theme="light"] .border-emerald-700,
:root[data-theme="light"] .border-emerald-700\/30,
:root[data-theme="light"] .border-emerald-700\/50,
:root[data-theme="light"] .border-emerald-800\/40,
:root[data-theme="light"] .border-emerald-800\/50,
:root[data-theme="light"] .border-emerald-900\/50 { border-color: #a7f3d0 !important; }
:root[data-theme="light"] .border-fuchsia-700\/50,
:root[data-theme="light"] .border-fuchsia-800\/40,
:root[data-theme="light"] .border-fuchsia-800\/50 { border-color: #f5d0fe !important; }
:root[data-theme="light"] .border-green-700,
:root[data-theme="light"] .border-green-700\/40,
:root[data-theme="light"] .border-green-700\/50,
:root[data-theme="light"] .border-green-800\/30,
:root[data-theme="light"] .border-green-800\/40,
:root[data-theme="light"] .border-green-800\/50,
:root[data-theme="light"] .border-green-900\/50 { border-color: #bbf7d0 !important; }
:root[data-theme="light"] .border-indigo-700,
:root[data-theme="light"] .border-indigo-700\/50,
:root[data-theme="light"] .border-indigo-800\/40,
:root[data-theme="light"] .border-indigo-800\/50,
:root[data-theme="light"] .border-indigo-900\/50 { border-color: #c7d2fe !important; }
:root[data-theme="light"] .border-pink-700 { border-color: #fbcfe8 !important; }
:root[data-theme="light"] .border-purple-700,
:root[data-theme="light"] .border-purple-700\/40,
:root[data-theme="light"] .border-purple-700\/50,
:root[data-theme="light"] .border-purple-800\/30,
:root[data-theme="light"] .border-purple-800\/40 { border-color: #ddd6fe !important; }
:root[data-theme="light"] .border-red-600\/60,
:root[data-theme="light"] .border-red-700,
:root[data-theme="light"] .border-red-700\/30,
:root[data-theme="light"] .border-red-800\/40,
:root[data-theme="light"] .border-red-800\/50,
:root[data-theme="light"] .border-red-900\/50 { border-color: #fecaca !important; }
:root[data-theme="light"] .border-rose-700,
:root[data-theme="light"] .border-rose-700\/50,
:root[data-theme="light"] .border-rose-800\/30,
:root[data-theme="light"] .border-rose-800\/40 { border-color: #fecdd3 !important; }
:root[data-theme="light"] .border-sky-700\/50,
:root[data-theme="light"] .border-sky-800\/40,
:root[data-theme="light"] .border-sky-800\/50 { border-color: #bae6fd !important; }
:root[data-theme="light"] .border-teal-700,
:root[data-theme="light"] .border-teal-700\/50,
:root[data-theme="light"] .border-teal-800\/40 { border-color: #99f6e4 !important; }
:root[data-theme="light"] .border-yellow-700,
:root[data-theme="light"] .border-yellow-700\/30,
:root[data-theme="light"] .border-yellow-700\/40,
:root[data-theme="light"] .border-yellow-700\/50,
:root[data-theme="light"] .border-yellow-800\/30,
:root[data-theme="light"] .border-yellow-800\/40 { border-color: #fde047 !important; }/* 문제/힌트 헤더 박스에 쓰이는 bg-gradient-to-* + from-*/to-* 그라디언트 조합 —
   Tailwind 그라디언트는 --tw-gradient-from/--tw-gradient-to 커스텀 프로퍼티로 동작하므로
   그 값 자체를 오버라이드해야 실제로 라이트 그라디언트가 적용됨(배경색 프로퍼티 직접 지정은 무효) */
:root[data-theme="light"] .from-amber-900\/30 { --tw-gradient-from: #fffbeb !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-amber-950\/40 { --tw-gradient-from: #fffbeb !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-blue-600 { --tw-gradient-from: #1d4ed8 !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-blue-900\/30 { --tw-gradient-from: #eff6ff !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-blue-950\/40 { --tw-gradient-from: #eff6ff !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-blue-950\/50 { --tw-gradient-from: #eff6ff !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-cyan-600 { --tw-gradient-from: #0e7490 !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-cyan-900\/30 { --tw-gradient-from: #ecfeff !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-cyan-950\/50 { --tw-gradient-from: #ecfeff !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-emerald-600 { --tw-gradient-from: #047857 !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-emerald-900\/30 { --tw-gradient-from: #ecfdf5 !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-emerald-950\/40 { --tw-gradient-from: #ecfdf5 !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-emerald-950\/50 { --tw-gradient-from: #ecfdf5 !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-fuchsia-600 { --tw-gradient-from: #a21caf !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-fuchsia-900\/30 { --tw-gradient-from: #fdf4ff !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-purple-900\/30 { --tw-gradient-from: #f5f3ff !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-purple-950\/50 { --tw-gradient-from: #f5f3ff !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-rose-950\/40 { --tw-gradient-from: #fff1f2 !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-sky-600 { --tw-gradient-from: #0369a1 !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-sky-900\/30 { --tw-gradient-from: #f0f9ff !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-slate-700 { --tw-gradient-from: #f8fafc !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-slate-800\/60 { --tw-gradient-from: #f8fafc !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-teal-600 { --tw-gradient-from: #0f766e !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-teal-900\/30 { --tw-gradient-from: #f0fdfa !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .from-teal-950\/50 { --tw-gradient-from: #f0fdfa !important; --tw-gradient-to: rgb(255 255 255 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
:root[data-theme="light"] .to-blue-600 { --tw-gradient-to: #1d4ed8 !important; }
:root[data-theme="light"] .to-blue-900\/20 { --tw-gradient-to: #eff6ff !important; }
:root[data-theme="light"] .to-cyan-600 { --tw-gradient-to: #0e7490 !important; }
:root[data-theme="light"] .to-cyan-900\/20 { --tw-gradient-to: #ecfeff !important; }
:root[data-theme="light"] .to-indigo-600 { --tw-gradient-to: #4338ca !important; }
:root[data-theme="light"] .to-indigo-700 { --tw-gradient-to: #4338ca !important; }
:root[data-theme="light"] .to-indigo-900\/20 { --tw-gradient-to: #eef2ff !important; }
:root[data-theme="light"] .to-orange-900\/20 { --tw-gradient-to: #fff7ed !important; }
:root[data-theme="light"] .to-purple-600 { --tw-gradient-to: #7e22ce !important; }
:root[data-theme="light"] .to-purple-900\/20 { --tw-gradient-to: #f5f3ff !important; }
:root[data-theme="light"] .to-slate-900 { --tw-gradient-to: #f8fafc !important; }
:root[data-theme="light"] .to-teal-600 { --tw-gradient-to: #0f766e !important; }
:root[data-theme="light"] .to-teal-900\/20 { --tw-gradient-to: #f0fdfa !important; }
:root[data-theme="light"] .bg-slate-900\/30 { background-color: rgba(248,250,252,.5) !important; }
:root[data-theme="light"] .border-slate-950 { border-color: #e4e8ef !important; }
