/* ==========================================================
   TOV LMS 공용 테마  (2026-08-15)
   ----------------------------------------------------------
   · 밝게(파스텔) / 어둡게 두 가지
   · 포인트 컬러는 --tv-accent 하나로 전 페이지 통일
   · 실제 값은 tov_theme.js 가 사용자 설정에 따라 바꿉니다
   ========================================================== */

/* ---------- 밝게 (기본) ---------- */
:root{
  --tv-bg:#faf7f4;
  --tv-surface:#ffffff;
  --tv-surface-2:#f8f3ef;
  --tv-bar:#f2edf8;
  --tv-bar-ink:#574d85;
  --tv-line:#f0e8e1;
  --tv-line-2:#ece5f3;
  --tv-ink:#413c4b;
  --tv-ink-2:#6c6479;
  --tv-ink-3:#9a92a6;
  --tv-soft:#f0eaf8;
  --tv-soft-ink:#584e7e;
  --tv-hover:#faf5f1;
  --tv-mint:#e0f3e9;  --tv-mint-ink:#2f7f63;
  --tv-peach:#fdeade; --tv-peach-ink:#a15c3b;
  --tv-rose:#fdeaef;  --tv-rose-ink:#9c4761;
  --tv-thumb:#ece5f4;
  --tv-grad:linear-gradient(100deg,#e8ddf7 0%,#f3e2ef 55%,#fce4d9 100%);
  --tv-grad-ink:#4f4468;
  --tv-shadow:0 2px 12px rgba(165,145,135,.10);
  --tv-shadow-lg:0 10px 30px rgba(150,130,180,.18);
  --tv-overlay:rgba(92,80,110,.30);
  --tv-accent:#6d6ae8;
  --tv-accent-ink:#ffffff;
  --tv-accent-soft:rgba(109,106,232,.13);
}

/* ---------- 어둡게 ---------- */
html[data-tov-theme="dark"]{
  --tv-bg:#16151f;
  --tv-surface:#1f1e2b;
  --tv-surface-2:#272636;
  --tv-bar:#1b1a26;
  --tv-bar-ink:#cdc7e2;
  --tv-line:#2f2d40;
  --tv-line-2:#35334a;
  --tv-ink:#eae7f3;
  --tv-ink-2:#b5afc8;
  --tv-ink-3:#8c85a2;
  --tv-soft:#2c2a3f;
  --tv-soft-ink:#cac4e0;
  --tv-hover:#282639;
  --tv-mint:#1d3a30;  --tv-mint-ink:#84d8b4;
  --tv-peach:#3a2a1f; --tv-peach-ink:#eab892;
  --tv-rose:#3a222c;  --tv-rose-ink:#eda5b9;
  --tv-thumb:#2b2940;
  --tv-grad:linear-gradient(100deg,#2c2544 0%,#352740 55%,#3d2b35 100%);
  --tv-grad-ink:#e9e4f6;
  --tv-shadow:0 2px 14px rgba(0,0,0,.38);
  --tv-shadow-lg:0 12px 34px rgba(0,0,0,.5);
  --tv-overlay:rgba(6,5,12,.64);
  --tv-accent-soft:rgba(255,255,255,.10);
}

html{ background:var(--tv-bg); }
body{ background:var(--tv-bg) !important; color:var(--tv-ink) !important; }
body.bg-slate-50, body.bg-gray-50{ background:var(--tv-bg) !important; }

/* ---------- 상단바 / 사이드바 ---------- */
nav.bg-slate-900, header.bg-slate-900, footer.bg-slate-900,
aside.bg-slate-900, .bg-slate-900, .bg-slate-800{ background:var(--tv-bar) !important; }
nav.bg-slate-900{ box-shadow:0 1px 0 var(--tv-line-2) !important; }

.bg-slate-900.text-white, .bg-slate-900.text-white *,
.bg-slate-800.text-white, .bg-slate-800.text-white *,
aside.bg-slate-900 *{ color:var(--tv-bar-ink) !important; }

.bg-slate-900 .text-slate-300, .bg-slate-800 .text-slate-300,
.bg-slate-900 .text-slate-400, .bg-slate-800 .text-slate-400{ color:var(--tv-ink-2) !important; }

footer.bg-slate-900, footer.bg-slate-900 *{ color:var(--tv-ink-3) !important; }
footer.bg-slate-900{ border-color:var(--tv-line-2) !important; }

/* ---------- 면 / 글자 ---------- */
.bg-white{ background:var(--tv-surface) !important; }
.bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100{ background:var(--tv-surface-2) !important; }
.text-slate-900, .text-slate-800, .text-slate-700,
.text-gray-900, .text-gray-800, .text-gray-700{ color:var(--tv-ink) !important; }
.text-slate-600, .text-slate-500, .text-gray-600, .text-gray-500{ color:var(--tv-ink-2) !important; }
.text-slate-400, .text-slate-300, .text-gray-400, .text-gray-300{ color:var(--tv-ink-3) !important; }
.border-slate-100, .border-gray-100, .border-slate-200, .border-gray-200,
.border-b, .border-t, .border{ border-color:var(--tv-line) !important; }
.border-slate-800, .border-slate-700{ border-color:var(--tv-line-2) !important; }
.divide-y > * + *{ border-color:var(--tv-line) !important; }

input, select, textarea{
  background:var(--tv-surface) !important;
  color:var(--tv-ink) !important;
  border-color:var(--tv-line) !important;
}
input::placeholder, textarea::placeholder{ color:var(--tv-ink-3) !important; }

/* ---------- 영상 썸네일 ---------- */
.aspect-video.bg-black{ background:var(--tv-surface-2) !important; }
.aspect-video .bg-slate-900{ background:var(--tv-thumb) !important; }
.aspect-video i, .aspect-video svg{ color:var(--tv-ink-3) !important; }
[class*="bg-black/"]{ background:var(--tv-soft) !important; }
[class*="bg-black/"], [class*="bg-black/"] *{ color:var(--tv-soft-ink) !important; }
.bg-black{ background:var(--tv-surface-2) !important; }

/* ---------- 그라데이션 배너 ---------- */
[class*="bg-gradient-to"]{ background-image:var(--tv-grad) !important; }
[class*="bg-gradient-to"], [class*="bg-gradient-to"] *{ color:var(--tv-grad-ink) !important; }
[class*="bg-gradient-to"] button{ background:var(--tv-accent) !important; color:var(--tv-accent-ink) !important; }
.notice-hero{ background:var(--tv-grad) !important; }
.notice-hero, .notice-hero *{ color:var(--tv-grad-ink) !important; }

/* ==========================================================
   포인트 컬러 - 누르는 것은 전부 이 색
   ========================================================== */
.bg-indigo-600, .bg-indigo-500, .bg-violet-600, .bg-blue-600,
.bg-emerald-600, .bg-emerald-500, button.bg-black,
.tv-acl-save, .tv-btn-accent{
  background:var(--tv-accent) !important;
  border-color:var(--tv-accent) !important;
}
.bg-indigo-600, .bg-indigo-600 *, .bg-indigo-500, .bg-indigo-500 *,
.bg-violet-600, .bg-violet-600 *, .bg-blue-600, .bg-blue-600 *,
.bg-emerald-600, .bg-emerald-600 *, .bg-emerald-500, .bg-emerald-500 *,
button.bg-black, button.bg-black *, .tv-acl-save, .tv-btn-accent{
  color:var(--tv-accent-ink) !important;
}
.bg-indigo-600:hover, .bg-indigo-500:hover, .bg-emerald-600:hover,
.bg-emerald-500:hover, .tv-acl-save:hover, .tv-btn-accent:hover{ filter:brightness(1.08); }

.text-emerald-400, .text-emerald-500, .text-emerald-600,
.text-indigo-600, .text-indigo-500, .text-blue-600, .brand-text{ color:var(--tv-accent) !important; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--tv-accent) !important; outline-offset:2px;
}

/* 중립 버튼 */
.bg-slate-700, .bg-gray-700, .bg-slate-600, .bg-gray-600{ background:var(--tv-soft) !important; }
.bg-slate-700, .bg-slate-700 *, .bg-gray-700, .bg-gray-700 *,
.bg-slate-600, .bg-slate-600 *, .bg-gray-600, .bg-gray-600 *{ color:var(--tv-soft-ink) !important; }
.bg-rose-600, .bg-red-600, .bg-rose-500, .bg-red-500{ background:var(--tv-rose) !important; }
.bg-rose-600 *, .bg-red-600 *, .bg-rose-500 *, .bg-red-500 *,
.bg-rose-600, .bg-red-600, .bg-rose-500, .bg-red-500{ color:var(--tv-rose-ink) !important; }
.text-rose-500, .text-red-500{ color:var(--tv-rose-ink) !important; }

/* ==========================================================
   관리자 화면
   ========================================================== */
aside .sidebar-link{ color:var(--tv-bar-ink) !important; }
aside .sidebar-link:hover{ background:var(--tv-hover) !important; }
aside .sidebar-link.active{ background:var(--tv-accent) !important; box-shadow:none !important; }
aside .sidebar-link.active, aside .sidebar-link.active *{ color:var(--tv-accent-ink) !important; }
aside h1, aside .text-xl, aside .text-2xl{ color:var(--tv-accent) !important; }

.ios-card, .glass-card{
  background:var(--tv-surface) !important;
  border:1px solid var(--tv-line) !important;
  box-shadow:var(--tv-shadow) !important;
}
thead, thead tr, thead.bg-slate-50{ background:var(--tv-surface-2) !important; }
thead th{ color:var(--tv-ink-2) !important; border-color:var(--tv-line) !important; }
tbody tr{ border-color:var(--tv-line) !important; }
tbody tr:hover{ background:var(--tv-hover) !important; }

.tv-tab{ background:var(--tv-surface) !important; color:var(--tv-ink-2) !important; border:1px solid var(--tv-line) !important; }
.tv-tab:hover{ background:var(--tv-hover) !important; }
.tv-tab.on{ background:var(--tv-accent) !important; color:var(--tv-accent-ink) !important; border-color:var(--tv-accent) !important; }
.tv-tab-wd{ background:var(--tv-rose) !important; color:var(--tv-rose-ink) !important; border-color:var(--tv-rose) !important; }
.tv-tab-wd.on{ background:var(--tv-rose-ink) !important; color:var(--tv-surface) !important; border-color:var(--tv-rose-ink) !important; }

.tv-mini{ background:var(--tv-soft) !important; color:var(--tv-soft-ink) !important; border:1px solid var(--tv-line-2) !important; }
.tv-mini:hover{ background:var(--tv-hover) !important; }
.tv-mini.warn{ background:var(--tv-peach) !important; color:var(--tv-peach-ink) !important; border-color:var(--tv-peach) !important; }
.tv-mini.danger{ background:var(--tv-rose) !important; color:var(--tv-rose-ink) !important; border-color:var(--tv-rose) !important; }

.tv-acl-btn{ background:var(--tv-soft) !important; color:var(--tv-soft-ink) !important; box-shadow:none !important; }
.tv-acl-btn:hover{ background:var(--tv-hover) !important; }
.tv-del-cancel{ background:var(--tv-surface-2) !important; color:var(--tv-ink-2) !important; }

.ios-badge{ background:var(--tv-soft) !important; color:var(--tv-soft-ink) !important; }
.ios-badge.bg-emerald-100{ background:var(--tv-mint) !important; color:var(--tv-mint-ink) !important; }

.tv-wd-warn{ background:var(--tv-rose) !important; border-color:var(--tv-rose) !important; color:var(--tv-rose-ink) !important; }
.tv-wd-warn b{ color:var(--tv-rose-ink) !important; }
.tv-wd-sub, .tv-wd-empty{ color:var(--tv-ink-2) !important; }

#floating-action-bar{
  background:var(--tv-surface) !important;
  border:1px solid var(--tv-line) !important;
  box-shadow:var(--tv-shadow-lg) !important;
}
#floating-action-bar, #floating-action-bar span, #floating-action-bar div{ color:var(--tv-ink) !important; }
#floating-action-bar button{ color:var(--tv-accent-ink) !important; }

.modal{ background:var(--tv-overlay) !important; }
.tv-acl-modal, .tv-del-modal{ background:var(--tv-overlay) !important; }
.tv-acl-box, .tv-del-box{ background:var(--tv-surface) !important; }
.tv-acl-head{ color:var(--tv-ink) !important; }
.tv-acl-desc{ color:var(--tv-ink-2) !important; }
.tv-acl-item{ border-color:var(--tv-line) !important; }
.tv-acl-item:hover{ background:var(--tv-hover) !important; }
.tv-del-msg{ color:var(--tv-ink) !important; }
.tv-del-target{ background:var(--tv-surface-2) !important; color:var(--tv-ink) !important; }
.tv-del-input{ background:var(--tv-surface) !important; color:var(--tv-ink) !important; }

/* ==========================================================
   나의 강의실
   ========================================================== */
.menu-item{ color:var(--tv-ink-2) !important; }
.menu-item:hover{ background:var(--tv-hover) !important; color:var(--tv-ink) !important; }
.menu-item.active{ background:var(--tv-accent-soft) !important; color:var(--tv-accent) !important; }

/* ==========================================================
   첫 화면 - 디자인 편집 버튼 / 패널
   ========================================================== */
#cms-btn{ background:var(--tv-accent) !important; color:var(--tv-accent-ink) !important; box-shadow:var(--tv-shadow-lg) !important; }
#cms-panel{ background:var(--tv-surface) !important; color:var(--tv-ink) !important; box-shadow:var(--tv-shadow-lg) !important; }
.auth-tab.active{ border-bottom-color:var(--tv-accent) !important; color:var(--tv-accent) !important; }

/* ==========================================================
   하드코딩된 색 보정 (우선순위 높게)
   ========================================================== */
main[class*="f2f2f7"], [class*="bg-[#f2f2f7]"]{ background:var(--tv-bg) !important; }
html .ios-card, html .glass-card, .modal .ios-card, .modal .glass-card,
.modal > div, .tv-acl-box, .tv-del-box{
  background:var(--tv-surface) !important;
  color:var(--tv-ink) !important;
  border-color:var(--tv-line) !important;
}
th{ background:var(--tv-surface-2) !important; color:var(--tv-ink-2) !important; }
.tv-branch-item, .tv-class-item, label.tv-branch-item{
  background:var(--tv-surface) !important; color:var(--tv-ink) !important;
  border-color:var(--tv-line) !important;
}
html a.bg-slate-900.text-white, html button.bg-slate-900.text-white,
html a.bg-slate-800.text-white, html button.bg-slate-800.text-white{ background:var(--tv-accent) !important; }
html a.bg-slate-900.text-white, html a.bg-slate-900.text-white *,
html button.bg-slate-900.text-white, html button.bg-slate-900.text-white *,
html a.bg-slate-800.text-white, html a.bg-slate-800.text-white *,
html button.bg-slate-800.text-white, html button.bg-slate-800.text-white *{ color:var(--tv-accent-ink) !important; }
html nav.bg-slate-900, html nav.bg-slate-900.text-white,
html aside.bg-slate-900, html aside.bg-slate-900.text-white,
html footer.bg-slate-900, html footer.bg-slate-900.text-white{ background:var(--tv-bar) !important; }
html nav.bg-slate-900.text-white *, html aside.bg-slate-900.text-white *,
html footer.bg-slate-900.text-white *{ color:var(--tv-bar-ink) !important; }
html aside .sidebar-link.active, html aside .sidebar-link.active *{ color:var(--tv-accent-ink) !important; }
html footer.bg-slate-900 *{ color:var(--tv-ink-3) !important; }

/* 제목·본문 기본 글자색 */
h1, h2, h3, h4, .font-black, .font-extrabold, .font-bold{ color:inherit; }
main, main *{ border-color:var(--tv-line); }
.text-white{ color:var(--tv-accent-ink); }
html .bg-slate-900 .text-white, html .bg-slate-800 .text-white{ color:var(--tv-bar-ink) !important; }

/* 지점 배정 박스 */
.tv-branch-pick{ background:var(--tv-surface-2) !important; border-color:var(--tv-line) !important; }
.tv-branch-pick, .tv-branch-pick *{ color:var(--tv-ink) !important; }
.tv-branch-pick .tv-branch-hint, .tv-branch-pick small{ color:var(--tv-ink-2) !important; }

/* 헤로·섹션 띄 */
div.bg-slate-800, section.bg-slate-800, div.bg-slate-900, section.bg-slate-900{ background:var(--tv-bar) !important; }
div.bg-slate-800.text-white *, section.bg-slate-800.text-white *,
div.bg-slate-900.text-white *, section.bg-slate-900.text-white *{ color:var(--tv-bar-ink) !important; }

/* ==========================================================
   TOV_LOGO_ACCENT - 로고도 포인트 컬러를 따른다
   ========================================================== */
html nav.bg-slate-900.text-white a.text-emerald-400,
html nav.bg-slate-900.text-white a.text-emerald-400 *,
html header.bg-slate-900.text-white a.text-emerald-400,
html header.bg-slate-900.text-white a.text-emerald-400 *,
html nav.bg-slate-900.text-white a.brand-text,
html nav.bg-slate-900.text-white a.brand-text *,
html aside.bg-slate-900.text-white > div.font-black,
html aside.bg-slate-900.text-white > div.font-black *,
html aside.bg-slate-900.text-white h1,
html aside.bg-slate-900.text-white h1 *{
  color:var(--tv-accent) !important;
}

/* 검색으로 드러난 퇴원 줄 */
tr.member-row.tv-wd-row{ background:var(--tv-surface-2) !important; }
tr.member-row.tv-wd-row td{ color:var(--tv-ink-3) !important; }
tr.member-row.tv-wd-row td b, tr.member-row.tv-wd-row td .font-bold{ color:var(--tv-ink-2) !important; }
.ios-badge.tv-badge-wd{ background:var(--tv-rose) !important; color:var(--tv-rose-ink) !important; }
.ios-badge.tv-badge-pending{ background:var(--tv-peach) !important; color:var(--tv-peach-ink) !important; }

/* ==========================================================
   목록 페이지 나눔
   ========================================================== */
.tv-pager{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 12px; }
.tv-pg-left{ display:flex; align-items:center; gap:6px; }
.tv-pg-label{ font-size:11px; font-weight:700; color:var(--tv-ink-2); }
.tv-pg-size{ min-width:34px; padding:5px 9px; border-radius:9px; cursor:pointer; font-size:12px; font-weight:800;
  background:var(--tv-surface); color:var(--tv-ink-2); border:1px solid var(--tv-line); }
.tv-pg-size:hover{ background:var(--tv-hover); }
.tv-pg-size.on{ background:var(--tv-accent); color:var(--tv-accent-ink); border-color:var(--tv-accent); }
.tv-pg-info{ font-size:11px; font-weight:700; color:var(--tv-ink-3); margin-left:auto; }
.tv-pg-nav{ display:flex; align-items:center; gap:4px; }
.tv-pg-btn{ min-width:30px; height:30px; padding:0 8px; border-radius:9px; cursor:pointer; font-size:12px; font-weight:800;
  background:var(--tv-surface); color:var(--tv-ink-2); border:1px solid var(--tv-line); }
.tv-pg-btn:hover:not(:disabled){ background:var(--tv-hover); }
.tv-pg-btn.on{ background:var(--tv-accent); color:var(--tv-accent-ink); border-color:var(--tv-accent); }
.tv-pg-btn:disabled{ opacity:.35; cursor:default; }
.tv-pg-dots{ color:var(--tv-ink-3); padding:0 2px; }

/* 수강 반 접기/폼치기 */
.tv-class-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:12px; cursor:pointer; text-align:left;
  background:var(--tv-surface); border:1px solid var(--tv-line); color:var(--tv-ink-2);
  font-size:13px; font-weight:700; }
.tv-class-toggle:hover{ background:var(--tv-hover); }
.tv-class-toggle.has{ color:var(--tv-ink); border-color:var(--tv-accent); }
.tv-class-toggle i{ font-size:11px; flex:none; transition:transform .18s; }
.tv-class-toggle.on i{ transform:rotate(180deg); }
.tv-class-toggle .tv-ct-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tv-class-wrap{ position:relative; }
#class_selection_area.tv-class-list{
  position:fixed; z-index:10070; right:auto;
  height:auto !important; overflow-y:auto;
  grid-template-columns:1fr !important; gap:4px !important;
  margin:0 !important; padding:8px !important;
  background:var(--tv-surface) !important;
  border:1px solid var(--tv-line) !important; border-radius:12px;
  box-shadow:var(--tv-shadow-lg);
}

/* ==========================================================
   정보 수정 팝업 배치
   ========================================================== */
#memberModal .ios-card{ max-width:920px !important; width:calc(100vw - 40px) !important; }
#memberModal form .tv-field{ min-width:0; }
#memberModal form .tv-field > label{ display:block; font-size:11px; font-weight:800; color:var(--tv-ink-2); margin:0 0 6px; }
#memberModal form .tv-field > input, #memberModal form .tv-field > select,
#memberModal form .tv-class-toggle{
  width:100%; height:44px; padding:0 13px; border-radius:11px; box-sizing:border-box;
  border:1px solid var(--tv-line); background:var(--tv-surface); color:var(--tv-ink);
  font-size:14px; font-weight:700;
}
#memberModal form .tv-field > select{ padding-right:34px; }
.tv-grid4{ grid-column:1 / -1; display:grid; grid-template-columns:1.25fr 1fr .95fr 1.55fr; gap:14px; align-items:end; }
.tv-grid3{ grid-column:1 / -1; display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:14px; align-items:end; }
.tv-phone{ display:flex; align-items:center; gap:5px; height:44px; }
.tv-phone-fix{ flex:none; height:44px; display:flex; align-items:center; padding:0 11px; border-radius:11px;
  background:var(--tv-surface-2); border:1px solid var(--tv-line); color:var(--tv-ink-2);
  font-weight:800; font-size:14px; }
.tv-phone-dash{ flex:none; color:var(--tv-ink-3); font-weight:800; }
.tv-phone input{ min-width:0; flex:1 1 0; height:44px !important; padding:0 6px !important;
  text-align:center; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
@media (max-width:900px){ .tv-grid4{ grid-template-columns:1fr 1fr; } .tv-grid3{ grid-template-columns:1fr; } }

/* 수강 반 드롭다운 항목은 원래 모양 유지 */
#class_selection_area label{ display:flex !important; align-items:center; gap:8px; margin:0 !important;
  padding:8px 10px !important; font-size:13px; font-weight:700; color:var(--tv-ink) !important; cursor:pointer; }
#class_selection_area input[type=checkbox]{ width:auto !important; height:auto !important; flex:none; margin:0; }

/* 반 설정 — 저장 / 삭제 */
.tv-class-actions{ display:flex; gap:10px; }
.tv-cls-save, .tv-cls-del{ height:46px; border-radius:12px; font-weight:800; font-size:14px; cursor:pointer; border:1px solid transparent; }
.tv-cls-save{ flex:1 1 auto; background:var(--tv-accent) !important; color:var(--tv-accent-ink) !important; }
.tv-cls-save:hover{ filter:brightness(1.08); }
.tv-cls-del{ flex:0 0 96px; background:#e0455f !important; color:#ffffff !important; }
.tv-cls-del:hover{ background:#cf3a53 !important; }
html[data-tov-theme="dark"] .tv-cls-del{ background:#d94a63 !important; }

/* 반 삭제 안내 문구 */
.tv-cls-note{ font-size:12px; font-weight:700; line-height:1.65; padding:11px 13px; border-radius:11px;
  background:var(--tv-surface-2); color:var(--tv-ink-2); border:1px solid var(--tv-line); }
.tv-cls-note b{ color:inherit; }
.tv-cls-note.warn{ background:var(--tv-rose) !important; color:var(--tv-rose-ink) !important; border-color:var(--tv-rose) !important; }
.tv-cls-note.ok{ background:var(--tv-mint) !important; color:var(--tv-mint-ink) !important; border-color:var(--tv-mint) !important; }
.tv-cls-del:disabled{ opacity:.38; cursor:not-allowed; }
.tv-cls-del:disabled:hover{ background:#e0455f !important; }