/* ===============================
   RC9-2.8 Theme Engine 2.0 Fix
   - Loaded AFTER page inline styles
   - Dark mode white-on-white fixes
   - Bigger app-style menu icons
================================ */

/* Load-order safety: this file overrides page-level <style> blocks. */

/* App menu icon: make the symbol fill the icon box more clearly */
.menuBtn::before,
.portalMenuIcon {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  min-height: 68px !important;
  border-radius: 22px !important;
  font-size: 46px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  text-align: center !important;
}
.menuBtn {
  grid-template-columns: 74px minmax(0,1fr) 20px !important;
  column-gap: 18px !important;
}
@media(max-width:640px){
  .menuBtn::before,
  .portalMenuIcon {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    font-size: 42px !important;
  }
  .menuBtn { grid-template-columns: 68px minmax(0,1fr) 18px !important; }
}

/* Dark mode: full-page base. Prevent centered white body/page backgrounds. */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .app-body,
html[data-theme="dark"] main,
html[data-theme="dark"] .app,
html[data-theme="dark"] .container,
html[data-theme="dark"] .pc-wide,
html[data-theme="dark"] #portal {
  background: var(--ms-bg-pattern) !important;
  color: #f8fafc !important;
}

/* Dark mode: direct page headers must remain readable even outside a card. */
html[data-theme="dark"] body > h1,
html[data-theme="dark"] body > h2,
html[data-theme="dark"] body > h3,
html[data-theme="dark"] body > p,
html[data-theme="dark"] body > div > h1,
html[data-theme="dark"] body > div > h2,
html[data-theme="dark"] body > div > h3,
html[data-theme="dark"] #studentInfo,
html[data-theme="dark"] #teacherInfo,
html[data-theme="dark"] #todayInfo,
html[data-theme="dark"] #dateInfo,
html[data-theme="dark"] #calendarTitle {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.45) !important;
}

/* Dark mode: cards/forms/white panels */
html[data-theme="dark"] .card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .section,
html[data-theme="dark"] .summaryBox,
html[data-theme="dark"] .tableBox,
html[data-theme="dark"] .emptyBox,
html[data-theme="dark"] .topBox,
html[data-theme="dark"] .filterBox,
html[data-theme="dark"] .controlBox,
html[data-theme="dark"] .formBox,
html[data-theme="dark"] .resultBox,
html[data-theme="dark"] .listBox,
html[data-theme="dark"] .contentBox,
html[data-theme="dark"] .dashboardCard,
html[data-theme="dark"] .statCard,
html[data-theme="dark"] div[style*="background:white"],
html[data-theme="dark"] div[style*="background: white"],
html[data-theme="dark"] section[style*="background:white"],
html[data-theme="dark"] section[style*="background: white"] {
  background: #121c2d !important;
  color: #f8fafc !important;
  border-color: #3a4a66 !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.34) !important;
}

html[data-theme="dark"] .card *,
html[data-theme="dark"] .box *,
html[data-theme="dark"] .panel *,
html[data-theme="dark"] .section *,
html[data-theme="dark"] .topBox *,
html[data-theme="dark"] .filterBox *,
html[data-theme="dark"] .controlBox *,
html[data-theme="dark"] .formBox *,
html[data-theme="dark"] .resultBox * {
  color: inherit;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] label,
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
  color: #ffffff !important;
}
html[data-theme="dark"] .hint,
html[data-theme="dark"] .subText,
html[data-theme="dark"] .sub-text,
html[data-theme="dark"] .muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .desc,
html[data-theme="dark"] .description,
html[data-theme="dark"] .help,
html[data-theme="dark"] .empty {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .ok { color: #86efac !important; }
html[data-theme="dark"] .err { color: #fca5a5 !important; }
html[data-theme="dark"] .memo { color: #fde68a !important; }

/* Dark mode: inputs/selects/buttons */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #52617c !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #94a3b8 !important; }
html[data-theme="dark"] option { background: #0f172a !important; color: #f8fafc !important; }
html[data-theme="dark"] button:disabled,
html[data-theme="dark"] .primary:disabled,
html[data-theme="dark"] .primary-btn:disabled {
  background: #334155 !important;
  color: #e5edf8 !important;
  border: 1px solid #52617c !important;
}

/* Dark mode: table/readout areas */
html[data-theme="dark"] table,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td {
  background: #101827 !important;
  color: #f8fafc !important;
  border-color: #3a4a66 !important;
}
html[data-theme="dark"] th {
  background: #172236 !important;
  color: #ffffff !important;
  border-color: #3a4a66 !important;
}

/* Dark mode: supervisor monthly calendar. Make cells dark instead of white. */
html[data-theme="dark"] .calendar {
  background: transparent !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] .dayHeader {
  background: #21304c !important;
  color: #eaf2ff !important;
  border: 1px solid #3a4a66 !important;
}
html[data-theme="dark"] .dayBox {
  background: #172236 !important;
  color: #f8fafc !important;
  border: 1px solid #3a4a66 !important;
}
html[data-theme="dark"] .dayBox.off {
  background: #101827 !important;
  color: #94a3b8 !important;
  border-color: #26364f !important;
}
html[data-theme="dark"] .dayBox.today {
  border: 2px solid #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96,165,250,.14) !important;
}
html[data-theme="dark"] .dateNum {
  color: #ffffff !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .slot,
html[data-theme="dark"] .teacher,
html[data-theme="dark"] .name,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .chip {
  background: #21304c !important;
  color: #ffffff !important;
  border-color: #52617c !important;
}
html[data-theme="dark"] .slot strong,
html[data-theme="dark"] .slot span,
html[data-theme="dark"] .dayBox span,
html[data-theme="dark"] .dayBox div {
  color: #ffffff !important;
}
html[data-theme="dark"] .dayBox.off .empty,
html[data-theme="dark"] .dayBox.off div,
html[data-theme="dark"] .dayBox.off span {
  color: #cbd5e1 !important;
}

/* Dark mode: generic calendar grids generated by other pages */
html[data-theme="dark"] [class*="calendar"] [class*="cell"],
html[data-theme="dark"] [class*="Calendar"] [class*="Cell"],
html[data-theme="dark"] [class*="month"] [class*="cell"],
html[data-theme="dark"] [class*="Month"] [class*="Cell"],
html[data-theme="dark"] [class*="day"] [class*="box"],
html[data-theme="dark"] [class*="Day"] [class*="Box"] {
  background: #172236 !important;
  color: #f8fafc !important;
  border-color: #3a4a66 !important;
}

/* Dark mode: badges/status blocks */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .b-ok,
html[data-theme="dark"] .b-gray,
html[data-theme="dark"] .status,
html[data-theme="dark"] #statusBox {
  background: #21304c !important;
  color: #ffffff !important;
  border-color: #52617c !important;
}
html[data-theme="dark"] .b-ok { background: #065f46 !important; color:#d1fae5 !important; }
html[data-theme="dark"] .b-gray { background: #334155 !important; color:#e5edf8 !important; }

/* Dark mode: warning/info boxes that remain pale */
html[data-theme="dark"] .notice,
html[data-theme="dark"] .info,
html[data-theme="dark"] .warning,
html[data-theme="dark"] .alert,
html[data-theme="dark"] [style*="background:#fff7ed"],
html[data-theme="dark"] [style*="background: #fff7ed"],
html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background: #fef3c7"] {
  background: #2b2330 !important;
  color: #fde68a !important;
  border-color: #92400e !important;
}

/* Preserve portal menu readability */
html[data-theme="dark"] .menuBtn,
html[data-theme="dark"] .portalMenuBtn {
  background: #121c2d !important;
  color: #f8fafc !important;
  border-color: #3a4a66 !important;
}
html[data-theme="dark"] .menuBtn strong,
html[data-theme="dark"] .portalMenuBtn strong { color: #ffffff !important; }
html[data-theme="dark"] .menuBtn span:not(.portalMenuIcon),
html[data-theme="dark"] .portalMenuBtn span:not(.portalMenuIcon) { color: #dbe7f7 !important; }

/* ===============================
   RC9-2.9 Final visible fixes
   - Supervisor dark header/background fill
   - White-on-white calendar/panel correction
   - Real large menu icons inserted in portal.html
================================ */

/* Use real icon span, not tiny pseudo emoji */
.menuBtn::before {
  content: none !important;
  display: none !important;
}
.menuBtn {
  grid-template-columns: 84px minmax(0,1fr) 22px !important;
  column-gap: 18px !important;
  align-items: center !important;
}
.portalMenuIcon {
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  min-height: 76px !important;
  border-radius: 24px !important;
  font-size: 58px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transform: none !important;
}
/* Emoji glyphs have internal padding, so scale the glyph visually inside the icon box. */
.portalMenuIcon::first-letter {
  font-size: 1.12em !important;
}
@media(max-width:640px){
  .menuBtn { grid-template-columns: 74px minmax(0,1fr) 18px !important; }
  .portalMenuIcon {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
    border-radius: 22px !important;
    font-size: 50px !important;
  }
}

/* Dark mode: mobile supervisor pages must not leave pale header/bottom gaps. */
html[data-theme="dark"] body.app-body,
html[data-theme="dark"] .mobile-app,
html[data-theme="dark"] .app-content {
  background: #0b1220 !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] .mobile-app {
  min-height: 100vh !important;
}
html[data-theme="dark"] .app-header {
  background: linear-gradient(135deg,#121c2d,#172236) !important;
  color: #f8fafc !important;
  border-bottom: 1px solid #334155 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24) !important;
}
html[data-theme="dark"] .app-header *,
html[data-theme="dark"] .app-title,
html[data-theme="dark"] .app-subtitle,
html[data-theme="dark"] .mobile-app > header *,
html[data-theme="dark"] header.app-header * {
  color: #f8fafc !important;
  opacity: 1 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .secondary-btn,
html[data-theme="dark"] button.secondary-btn {
  background: #121c2d !important;
  color: #ffffff !important;
  border: 1px solid #3a4a66 !important;
}

/* Dark mode: calendar cells currently remain white on some pages.
   Keep cells light if the page forces them light, but use dark readable text. */
html[data-theme="dark"] .calendar .dayBox,
html[data-theme="dark"] #calendarArea .dayBox,
html[data-theme="dark"] .calendar > .dayBox,
html[data-theme="dark"] div.dayBox {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #94a3b8 !important;
}
html[data-theme="dark"] .calendar .dayBox.off,
html[data-theme="dark"] #calendarArea .dayBox.off,
html[data-theme="dark"] div.dayBox.off {
  background: #e5e7eb !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="dark"] .calendar .dateNum,
html[data-theme="dark"] #calendarArea .dateNum,
html[data-theme="dark"] .dayBox .dateNum,
html[data-theme="dark"] .dayBox > div:not(.slot) {
  color: #0f172a !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .dayBox.off .dateNum,
html[data-theme="dark"] .dayBox.off .empty,
html[data-theme="dark"] .dayBox.off > div:not(.slot) {
  color: #475569 !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .calendar .dayHeader,
html[data-theme="dark"] #calendarArea .dayHeader {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #52617c !important;
}
html[data-theme="dark"] .calendar .slot,
html[data-theme="dark"] #calendarArea .slot,
html[data-theme="dark"] .dayBox .slot {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #1e3a8a !important;
}
html[data-theme="dark"] .calendar .slot *,
html[data-theme="dark"] #calendarArea .slot *,
html[data-theme="dark"] .dayBox .slot * {
  color: #ffffff !important;
}

/* Dark mode: any remaining pale forced panels should use dark text if they stay pale. */
html[data-theme="dark"] .whiteBox,
html[data-theme="dark"] .white-box,
html[data-theme="dark"] .paper,
html[data-theme="dark"] div[style*="background:#fff"],
html[data-theme="dark"] div[style*="background: #fff"],
html[data-theme="dark"] section[style*="background:#fff"],
html[data-theme="dark"] section[style*="background: #fff"] {
  background: #121c2d !important;
  color: #f8fafc !important;
  border-color: #3a4a66 !important;
}

/* ===============================
   RC9-2.10 Cute SVG Icon Upgrade
   - Replace tiny emoji feeling with large inline SVG icons
================================ */
.portalMenuIcon {
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;
  border-radius: 26px !important;
  padding: 9px !important;
  box-sizing: border-box !important;
  font-size: 0 !important;
  overflow: visible !important;
}
.portalMenuIcon .ms-menu-svg,
.portalMenuIcon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
  filter: drop-shadow(0 5px 6px rgba(15,23,42,.12));
}
.menuBtn {
  grid-template-columns: 88px minmax(0,1fr) 22px !important;
  min-height: 104px !important;
}
@media(max-width:640px){
  .portalMenuIcon {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    padding: 8px !important;
    border-radius: 24px !important;
  }
  .menuBtn {
    grid-template-columns: 78px minmax(0,1fr) 18px !important;
    min-height: 98px !important;
  }
}
html[data-theme="lovely"] .portalMenuIcon {
  border-radius: 28px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 12px 24px rgba(236,72,153,.16) !important;
}


/* ===============================
   RC9-2.11 Real Icon Visibility + Student History Fix
   - The icon artwork, not the square, must be visually dominant.
   - Also fixes dark mode recent attendance white-card text.
================================ */
.portalMenuIcon {
  width: 74px !important;
  height: 74px !important;
  min-width: 74px !important;
  min-height: 74px !important;
  padding: 0 !important;
  border-radius: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  font-size: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 22px color-mix(in srgb,var(--ms-primary) 17%,transparent) !important;
}
.portalMenuIcon .ms-menu-svg,
.portalMenuIcon svg {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  display: block !important;
  transform: scale(1.18) !important;
  transform-origin: center !important;
  overflow: visible !important;
  filter: drop-shadow(0 5px 7px rgba(15,23,42,.16)) !important;
}
/* Fallback for pages/browsers still showing legacy emoji icons */
.portalMenuIcon:not(:has(svg)) {
  font-size: 52px !important;
  line-height: 1 !important;
}
.menuBtn {
  grid-template-columns: 86px minmax(0,1fr) 22px !important;
  min-height: 104px !important;
  column-gap: 16px !important;
}
@media(max-width:640px){
  .portalMenuIcon {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    border-radius: 22px !important;
  }
  .portalMenuIcon .ms-menu-svg,
  .portalMenuIcon svg {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
    transform: scale(1.2) !important;
  }
  .portalMenuIcon:not(:has(svg)) { font-size: 48px !important; }
  .menuBtn {
    grid-template-columns: 78px minmax(0,1fr) 18px !important;
    min-height: 98px !important;
  }
}
/* Prevent old pseudo icon from competing with real icon */
.menuBtn::before { content: none !important; display: none !important; }

/* Dark mode: recent attendance cards/lists that intentionally stay light must use dark text. */
html[data-theme="dark"] #recentList,
html[data-theme="dark"] #recentList *,
html[data-theme="dark"] .simple-list,
html[data-theme="dark"] .simple-list *,
html[data-theme="dark"] .history-card,
html[data-theme="dark"] .history-card *,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .history-item *,
html[data-theme="dark"] .record-item,
html[data-theme="dark"] .record-item * {
  color: #0f172a !important;
  text-shadow: none !important;
}
html[data-theme="dark"] #recentList,
html[data-theme="dark"] .simple-list,
html[data-theme="dark"] .history-card,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .record-item {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="dark"] #recentList strong,
html[data-theme="dark"] .simple-list strong,
html[data-theme="dark"] .history-card strong,
html[data-theme="dark"] .history-item strong,
html[data-theme="dark"] .record-item strong {
  color: #020617 !important;
}
html[data-theme="dark"] #recentList small,
html[data-theme="dark"] .simple-list small,
html[data-theme="dark"] .history-card small,
html[data-theme="dark"] .history-item small,
html[data-theme="dark"] .record-item small,
html[data-theme="dark"] #recentList .muted,
html[data-theme="dark"] #recentList .hint {
  color: #475569 !important;
}

/* RC9-3 compatibility: special mode should not inherit dark overrides */
html[data-theme="special-loopy"] .themeChipSpecial.active{
  background:linear-gradient(135deg,#f06292,#ff8fab,#ffcc80)!important;
  color:#fff!important;
}

/* RC9-3 bigger artwork-first menu icons, repeated after dark-fix for cascade priority */
.portalMenuIcon{
  width:76px!important;
  height:76px!important;
  min-width:76px!important;
  min-height:76px!important;
  border-radius:24px!important;
  overflow:visible!important;
}
.portalMenuIcon .ms-menu-svg,
.portalMenuIcon svg{
  width:104px!important;
  height:104px!important;
  min-width:104px!important;
  min-height:104px!important;
  transform:scale(1.08)!important;
  transform-origin:center!important;
  filter:drop-shadow(0 6px 8px rgba(15,23,42,.22))!important;
}
.portalMenuIcon:not(:has(svg)){
  font-size:62px!important;
}
.menuBtn{
  grid-template-columns:92px minmax(0,1fr) 22px!important;
}
@media(max-width:640px){
  .portalMenuIcon{width:70px!important;height:70px!important;min-width:70px!important;min-height:70px!important;}
  .portalMenuIcon .ms-menu-svg,.portalMenuIcon svg{width:98px!important;height:98px!important;min-width:98px!important;min-height:98px!important;}
  .portalMenuIcon:not(:has(svg)){font-size:58px!important;}
  .menuBtn{grid-template-columns:84px minmax(0,1fr) 18px!important;}
}


/* =========================================================
   RC13.27 DARK READABILITY GLOBAL PATCH
   목적: 다크모드에서 회색/흰색 박스 안의 흰 글자 문제를 전역 보정
   적용 범위: 월간업무계획, 자습반 출석체크, 전달사항 등록, 관리자 대시보드,
             홈 대시보드 캐시관리, 메인 포털 버튼/카드
   ========================================================= */

/* 다크모드 기본 변수 대비 강화 */
html[data-theme="dark"],
body.theme-dark{
  --ms-bg:#07111f!important;
  --ms-surface:#0f1b2d!important;
  --ms-surface-2:#14243a!important;
  --ms-surface-3:#1d314c!important;
  --ms-text:#f8fafc!important;
  --ms-heading:#ffffff!important;
  --ms-muted:#d9e4f5!important;
  --ms-soft-text:#f1f5f9!important;
  --ms-border:#334155!important;
}

/* 다크 페이지의 일반 글자 */
html[data-theme="dark"] body,
body.theme-dark{
  color:#f8fafc!important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] label,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark label{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}

/* 입력창: 다크 배경에서는 흰 글자 유지 */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
  background:#0f172a!important;
  border-color:#475569!important;
  caret-color:#ffffff!important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder{
  color:#94a3b8!important;
  -webkit-text-fill-color:#94a3b8!important;
}

/* 밝은/회색 버튼: 글자는 검정, 배경은 밝게 고정 */
html[data-theme="dark"] button:not(.primaryBtn):not(.dangerBtn):not(.tabBtn):not(.tabBtn.active):not(.portalBottomNavBtn):not(.portalThemeToggle):not(.themeChip),
body.theme-dark button:not(.primaryBtn):not(.dangerBtn):not(.tabBtn):not(.tabBtn.active):not(.portalBottomNavBtn):not(.portalThemeToggle):not(.themeChip),
html[data-theme="dark"] .smallBtn,
html[data-theme="dark"] .ghostBtn,
html[data-theme="dark"] .grayBtn,
html[data-theme="dark"] .secondaryBtn,
html[data-theme="dark"] .outlineBtn,
html[data-theme="dark"] .backBtn,
body.theme-dark .smallBtn,
body.theme-dark .ghostBtn,
body.theme-dark .grayBtn,
body.theme-dark .secondaryBtn,
body.theme-dark .outlineBtn,
body.theme-dark .backBtn{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  background:#f8fafc!important;
  border-color:#cbd5e1!important;
  text-shadow:none!important;
  opacity:1!important;
}

/* 버튼 내부 span/strong까지 */
html[data-theme="dark"] button:not(.primaryBtn):not(.dangerBtn):not(.tabBtn):not(.tabBtn.active):not(.portalBottomNavBtn):not(.portalThemeToggle):not(.themeChip) *,
body.theme-dark button:not(.primaryBtn):not(.dangerBtn):not(.tabBtn):not(.tabBtn.active):not(.portalBottomNavBtn):not(.portalThemeToggle):not(.themeChip) *,
html[data-theme="dark"] .smallBtn *,
html[data-theme="dark"] .ghostBtn *,
html[data-theme="dark"] .grayBtn *,
html[data-theme="dark"] .secondaryBtn *,
html[data-theme="dark"] .outlineBtn *,
html[data-theme="dark"] .backBtn *,
body.theme-dark .smallBtn *,
body.theme-dark .ghostBtn *,
body.theme-dark .grayBtn *,
body.theme-dark .secondaryBtn *,
body.theme-dark .outlineBtn *,
body.theme-dark .backBtn *{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  text-shadow:none!important;
}

/* disabled도 글자 보이게 */
html[data-theme="dark"] button:disabled,
html[data-theme="dark"] button[disabled],
body.theme-dark button:disabled,
body.theme-dark button[disabled]{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  background:#f8fafc!important;
  border-color:#cbd5e1!important;
  opacity:.82!important;
  text-shadow:none!important;
}

/* 주요 액션 버튼은 흰 글자 유지 */
html[data-theme="dark"] .primaryBtn,
html[data-theme="dark"] button.primaryBtn,
html[data-theme="dark"] .gradientBtn,
html[data-theme="dark"] .savePrimaryBtn,
html[data-theme="dark"] .actionPrimary,
html[data-theme="dark"] .tabBtn.active,
body.theme-dark .primaryBtn,
body.theme-dark button.primaryBtn,
body.theme-dark .gradientBtn,
body.theme-dark .savePrimaryBtn,
body.theme-dark .actionPrimary,
body.theme-dark .tabBtn.active{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  text-shadow:none!important;
}

/* 특정 버튼: 월간업무계획 / 전달사항 / 포털 헤더 / 출석체크 */
html[data-theme="dark"] #backPortalBtn,
html[data-theme="dark"] #backBtn,
html[data-theme="dark"] #exitBtn,
html[data-theme="dark"] #logoutBtn,
html[data-theme="dark"] #todayBtn,
html[data-theme="dark"] #prevBtn,
html[data-theme="dark"] #nextBtn,
html[data-theme="dark"] #reloadBtn,
html[data-theme="dark"] #newBtn,
html[data-theme="dark"] #copyBtn,
html[data-theme="dark"] #deleteBtn,
html[data-theme="dark"] #saveBtn:disabled,
html[data-theme="dark"] #savedBtn,
html[data-theme="dark"] .monthNav button,
html[data-theme="dark"] .portalHeaderActions button,
html[data-theme="dark"] .noticeHeader button,
body.theme-dark #backPortalBtn,
body.theme-dark #backBtn,
body.theme-dark #exitBtn,
body.theme-dark #logoutBtn,
body.theme-dark #todayBtn,
body.theme-dark #prevBtn,
body.theme-dark #nextBtn,
body.theme-dark #reloadBtn,
body.theme-dark #newBtn,
body.theme-dark #copyBtn,
body.theme-dark #deleteBtn,
body.theme-dark #saveBtn:disabled,
body.theme-dark #savedBtn,
body.theme-dark .monthNav button,
body.theme-dark .portalHeaderActions button,
body.theme-dark .noticeHeader button{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  background:#ffffff!important;
  border-color:#cbd5e1!important;
  opacity:1!important;
}

/* 밝은 카드/요약 박스/학생 카드/관리자 통계 카드 내부는 검정 글자 */
html[data-theme="dark"] .studentCard,
html[data-theme="dark"] .studentRow,
html[data-theme="dark"] .attendanceStudentCard,
html[data-theme="dark"] .summaryItem,
html[data-theme="dark"] .summaryBox,
html[data-theme="dark"] .statBox,
html[data-theme="dark"] .statusBox,
html[data-theme="dark"] .classStatusCard,
html[data-theme="dark"] .classCard,
html[data-theme="dark"] .statCard,
html[data-theme="dark"] .dashboardCard.light,
html[data-theme="dark"] .dashboard-card.light,
html[data-theme="dark"] .lightCard,
html[data-theme="dark"] .whiteCard,
html[data-theme="dark"] .roomCard,
html[data-theme="dark"] .student-list,
body.theme-dark .studentCard,
body.theme-dark .studentRow,
body.theme-dark .attendanceStudentCard,
body.theme-dark .summaryItem,
body.theme-dark .summaryBox,
body.theme-dark .statBox,
body.theme-dark .statusBox,
body.theme-dark .classStatusCard,
body.theme-dark .classCard,
body.theme-dark .statCard,
body.theme-dark .dashboardCard.light,
body.theme-dark .dashboard-card.light,
body.theme-dark .lightCard,
body.theme-dark .whiteCard,
body.theme-dark .roomCard,
body.theme-dark .student-list{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  text-shadow:none!important;
}
html[data-theme="dark"] .studentCard *,
html[data-theme="dark"] .studentRow *,
html[data-theme="dark"] .attendanceStudentCard *,
html[data-theme="dark"] .summaryItem *,
html[data-theme="dark"] .summaryBox *,
html[data-theme="dark"] .statBox *,
html[data-theme="dark"] .statusBox *,
html[data-theme="dark"] .classStatusCard *,
html[data-theme="dark"] .classCard *,
html[data-theme="dark"] .statCard *,
html[data-theme="dark"] .lightCard *,
html[data-theme="dark"] .whiteCard *,
html[data-theme="dark"] .roomCard *,
body.theme-dark .studentCard *,
body.theme-dark .studentRow *,
body.theme-dark .attendanceStudentCard *,
body.theme-dark .summaryItem *,
body.theme-dark .summaryBox *,
body.theme-dark .statBox *,
body.theme-dark .statusBox *,
body.theme-dark .classStatusCard *,
body.theme-dark .classCard *,
body.theme-dark .statCard *,
body.theme-dark .lightCard *,
body.theme-dark .whiteCard *,
body.theme-dark .roomCard *{
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
  text-shadow:none!important;
}

/* 다크 카드 내부 글자 대비 강화 */
html[data-theme="dark"] .card:not(.studentCard):not(.statCard):not(.classCard):not(.lightCard):not(.whiteCard),
html[data-theme="dark"] .panel:not(.lightCard):not(.whiteCard),
html[data-theme="dark"] .sectionCard:not(.lightCard):not(.whiteCard),
body.theme-dark .card:not(.studentCard):not(.statCard):not(.classCard):not(.lightCard):not(.whiteCard),
body.theme-dark .panel:not(.lightCard):not(.whiteCard),
body.theme-dark .sectionCard:not(.lightCard):not(.whiteCard){
  color:#f8fafc!important;
}
html[data-theme="dark"] .card:not(.studentCard):not(.statCard):not(.classCard):not(.lightCard):not(.whiteCard) p,
html[data-theme="dark"] .card:not(.studentCard):not(.statCard):not(.classCard):not(.lightCard):not(.whiteCard) div,
html[data-theme="dark"] .panel p,
html[data-theme="dark"] .panel div,
html[data-theme="dark"] .sectionCard p,
html[data-theme="dark"] .sectionCard div,
body.theme-dark .card:not(.studentCard):not(.statCard):not(.classCard):not(.lightCard):not(.whiteCard) p,
body.theme-dark .card:not(.studentCard):not(.statCard):not(.classCard):not(.lightCard):not(.whiteCard) div,
body.theme-dark .panel p,
body.theme-dark .panel div,
body.theme-dark .sectionCard p,
body.theme-dark .sectionCard div{
  color:inherit!important;
  text-shadow:none!important;
}

/* 안내 박스: 다크에서도 읽히게 */
html[data-theme="dark"] .hint,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .infoBox,
html[data-theme="dark"] .helpBox,
html[data-theme="dark"] .descriptionBox,
body.theme-dark .hint,
body.theme-dark .notice,
body.theme-dark .infoBox,
body.theme-dark .helpBox,
body.theme-dark .descriptionBox{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  background:#eaf2ff!important;
  border-color:#93c5fd!important;
}
html[data-theme="dark"] .hint *,
html[data-theme="dark"] .notice *,
html[data-theme="dark"] .infoBox *,
html[data-theme="dark"] .helpBox *,
html[data-theme="dark"] .descriptionBox *,
body.theme-dark .hint *,
body.theme-dark .notice *,
body.theme-dark .infoBox *,
body.theme-dark .helpBox *,
body.theme-dark .descriptionBox *{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
}

/* 체크박스/라벨 */
html[data-theme="dark"] input[type="checkbox"],
body.theme-dark input[type="checkbox"]{
  background:#ffffff!important;
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
}
html[data-theme="dark"] .checkboxLabel,
html[data-theme="dark"] .formLabel,
body.theme-dark .checkboxLabel,
body.theme-dark .formLabel{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}

/* 하단 네비 */
html[data-theme="dark"] .portalMobileBottomNav,
html[data-theme="dark"] .portalBottomNav,
body.theme-dark .portalMobileBottomNav,
body.theme-dark .portalBottomNav{
  background:#0f172a!important;
  color:#f8fafc!important;
  border-color:#334155!important;
}
html[data-theme="dark"] .portalMobileBottomNav *,
html[data-theme="dark"] .portalBottomNav *,
body.theme-dark .portalMobileBottomNav *,
body.theme-dark .portalBottomNav *{
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
}

/* =========================================================
   RC13.28 DARK READABILITY STABILIZATION
   목적: v27의 과도한 전역 색상 충돌을 마지막 레이어에서 정리
   원칙: 다크 카드=밝은 글자 / 흰 카드=검정 글자 / 회색 버튼=검정 글자
   ========================================================= */

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .app-body,
html[data-theme="dark"] .pc-wide,
html[data-theme="dark"] .mobile-app,
html[data-theme="dark"] .app-container{
  background:#07111f!important;
  color:#f8fafc!important;
}

html[data-theme="dark"] .app-header,
html[data-theme="dark"] .topHeader,
html[data-theme="dark"] .portalHomeHeader{
  color:#ffffff!important;
}
html[data-theme="dark"] .app-header *,
html[data-theme="dark"] .topHeader *,
html[data-theme="dark"] .portalHomeHeader *{
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
  text-shadow:none!important;
}

/* 기본 카드/패널은 다크 카드로 통일 */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .sectionCard,
html[data-theme="dark"] .dashboardCard,
html[data-theme="dark"] .formBox,
html[data-theme="dark"] .contentBox,
html[data-theme="dark"] .listBox,
html[data-theme="dark"] .filterBox,
html[data-theme="dark"] .controlBox,
html[data-theme="dark"] .tableBox,
html[data-theme="dark"] .box{
  background:#111c2e!important;
  color:#f8fafc!important;
  border-color:#334155!important;
  box-shadow:0 14px 32px rgba(0,0,0,.28)!important;
}
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .card label,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .card div:not(.compact-student-card):not(.compact-student-card *):not(.studentCard):not(.studentCard *):not(.studentRow):not(.studentRow *):not(.attendanceStudentCard):not(.attendanceStudentCard *):not(.summaryBox):not(.summaryBox *):not(.roomBox):not(.roomBox *):not(.classCard):not(.classCard *),
html[data-theme="dark"] .panel *,
html[data-theme="dark"] .sectionCard *{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
  text-shadow:none!important;
}
html[data-theme="dark"] .hint,
html[data-theme="dark"] .hint-text,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .subText,
html[data-theme="dark"] .desc,
html[data-theme="dark"] small{
  color:#cbd5e1!important;
  -webkit-text-fill-color:#cbd5e1!important;
  opacity:1!important;
}

/* 입력창은 다크 배경 + 밝은 글자 */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#0b1424!important;
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
  border-color:#475569!important;
  caret-color:#ffffff!important;
  box-shadow:none!important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:#94a3b8!important;
  -webkit-text-fill-color:#94a3b8!important;
}
html[data-theme="dark"] option{
  background:#0b1424!important;
  color:#f8fafc!important;
}

/* 흰/회색 버튼은 무조건 검정 글자 */
html[data-theme="dark"] button:not(.primary-btn):not(.primaryBtn):not(.danger-btn):not(.dangerBtn):not(.portalBottomNavBtn):not(.portalThemeToggle):not(.themeChip):not(.tabBtn):not(.tabBtn.active),
html[data-theme="dark"] .secondary-btn,
html[data-theme="dark"] .secondaryBtn,
html[data-theme="dark"] .ghostBtn,
html[data-theme="dark"] .grayBtn,
html[data-theme="dark"] .outlineBtn,
html[data-theme="dark"] .smallBtn,
html[data-theme="dark"] .backBtn,
html[data-theme="dark"] #backPortalBtn,
html[data-theme="dark"] #backBtn,
html[data-theme="dark"] #exitBtn,
html[data-theme="dark"] #logoutBtn,
html[data-theme="dark"] #todayBtn,
html[data-theme="dark"] #prevBtn,
html[data-theme="dark"] #nextBtn,
html[data-theme="dark"] #reloadBtn,
html[data-theme="dark"] #newBtn,
html[data-theme="dark"] #copyBtn,
html[data-theme="dark"] #deleteBtn,
html[data-theme="dark"] #savedBtn,
html[data-theme="dark"] button:disabled,
html[data-theme="dark"] button[disabled]{
  background:#f8fafc!important;
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  border-color:#cbd5e1!important;
  opacity:1!important;
  text-shadow:none!important;
}
html[data-theme="dark"] button:not(.primary-btn):not(.primaryBtn):not(.danger-btn):not(.dangerBtn):not(.portalBottomNavBtn):not(.portalThemeToggle):not(.themeChip):not(.tabBtn):not(.tabBtn.active) *,
html[data-theme="dark"] .secondary-btn *,
html[data-theme="dark"] .secondaryBtn *,
html[data-theme="dark"] .ghostBtn *,
html[data-theme="dark"] .grayBtn *,
html[data-theme="dark"] .outlineBtn *,
html[data-theme="dark"] .smallBtn *,
html[data-theme="dark"] .backBtn *{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  text-shadow:none!important;
}

/* 주요 액션/그라데이션 버튼은 밝은 글자 */
html[data-theme="dark"] .primary-btn,
html[data-theme="dark"] .primaryBtn,
html[data-theme="dark"] button.primary-btn,
html[data-theme="dark"] button.primaryBtn,
html[data-theme="dark"] .gradientBtn,
html[data-theme="dark"] .savePrimaryBtn,
html[data-theme="dark"] .actionPrimary,
html[data-theme="dark"] .tabBtn.active{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  text-shadow:none!important;
}

/* 월간업무계획: 달력은 다크셀로 통일, 이벤트칩은 기존 색 유지 */
html[data-theme="dark"] body.monthlyWorkPlanPage .calendarDay,
html[data-theme="dark"] body.monthlyWorkPlanPage .dayCell,
html[data-theme="dark"] body.monthlyWorkPlanPage .calendar-cell{
  background:#172236!important;
  color:#f8fafc!important;
  border-color:#334155!important;
}
html[data-theme="dark"] body.monthlyWorkPlanPage .emptyMonthCell,
html[data-theme="dark"] body.monthlyWorkPlanPage .calendarDay.empty{
  background:#0f172a!important;
  color:#94a3b8!important;
}
html[data-theme="dark"] body.monthlyWorkPlanPage .calendarDay *,
html[data-theme="dark"] body.monthlyWorkPlanPage .dayCell *{
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
}
html[data-theme="dark"] body.monthlyWorkPlanPage .eventChip,
html[data-theme="dark"] body.monthlyWorkPlanPage .eventChip *{
  -webkit-text-fill-color:currentColor!important;
}

/* 자습반 출석체크: 학생카드는 흰 카드+검정 글자, 버튼도 검정 글자 */
html[data-theme="dark"] .compact-student-card,
html[data-theme="dark"] .studentCard,
html[data-theme="dark"] .studentRow,
html[data-theme="dark"] .attendanceStudentCard,
html[data-theme="dark"] .extra-student-card{
  background:#ffffff!important;
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  border-color:#e2e8f0!important;
}
html[data-theme="dark"] .compact-student-card *,
html[data-theme="dark"] .studentCard *,
html[data-theme="dark"] .studentRow *,
html[data-theme="dark"] .attendanceStudentCard *,
html[data-theme="dark"] .extra-student-card *{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  text-shadow:none!important;
}
html[data-theme="dark"] .compact-student-card select,
html[data-theme="dark"] .studentCard select,
html[data-theme="dark"] .attendanceStudentCard select,
html[data-theme="dark"] .status-select{
  background:#0f172a!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}
html[data-theme="dark"] .quick-status-btn{
  background:#f8fafc!important;
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  border-color:#e2e8f0!important;
}

/* 감독 출석 체크: 요약/자습반 현황 박스 가독성 */
html[data-theme="dark"] .supervisor-summary-box,
html[data-theme="dark"] .supervisor-room-card{
  background:#ffffff!important;
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
  border-color:#e2e8f0!important;
}
html[data-theme="dark"] .supervisor-summary-box *,
html[data-theme="dark"] .supervisor-room-card *{
  color:#111827!important;
  -webkit-text-fill-color:#111827!important;
}
html[data-theme="dark"] .room-card-icon,
html[data-theme="dark"] .room-card-icon *{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}

/* 실시간/관리자 대시보드: 요약 박스는 다크 박스로 통일 */
html[data-theme="dark"] .summaryBox,
html[data-theme="dark"] .statBox,
html[data-theme="dark"] .statusBox,
html[data-theme="dark"] .classStatusCard,
html[data-theme="dark"] .classCard,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .dashboardCard,
html[data-theme="dark"] .roomBox{
  background:#172236!important;
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
  border-color:#334155!important;
}
html[data-theme="dark"] .summaryBox *,
html[data-theme="dark"] .statBox *,
html[data-theme="dark"] .statusBox *,
html[data-theme="dark"] .classStatusCard *,
html[data-theme="dark"] .classCard *,
html[data-theme="dark"] .dashboard-card *,
html[data-theme="dark"] .dashboardCard *,
html[data-theme="dark"] .roomBox *{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
  text-shadow:none!important;
}

/* 실시간 자습 현황의 밝은 바/칸이 남는 경우 */
html[data-theme="dark"] .operationLine,
html[data-theme="dark"] .infoLine,
html[data-theme="dark"] .readout,
html[data-theme="dark"] .closedNotice{
  background:#172236!important;
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
  border-color:#334155!important;
}

/* 표 */
html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td{
  background:#0f172a!important;
  color:#f8fafc!important;
  border-color:#334155!important;
}
html[data-theme="dark"] th{
  background:#172236!important;
  color:#ffffff!important;
  border-color:#334155!important;
}

/* 하단 네비: 다크에서도 라벨 선명 */
html[data-theme="dark"] .portalMobileBottomNav,
html[data-theme="dark"] .portalBottomNav{
  background:#0f172a!important;
  color:#f8fafc!important;
  border-color:#334155!important;
}
html[data-theme="dark"] .portalMobileBottomNav *,
html[data-theme="dark"] .portalBottomNav *{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
}