/* ===============================
   Milseong Attendance V2
   Common CSS
================================ */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f5f6f8;
    color: #111827;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

.app-body {
    min-height: 100vh;
}


/* ===============================
   Loading
================================ */

.loading {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
}


/* ===============================
   Toast
================================ */

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    min-width: 220px;
    max-width: calc(100% - 40px);
    padding: 14px 18px;
    border-radius: 999px;
    background: #111827;
    color: white;
    font-size: 0.95rem;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease;
    z-index: 99999;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ===============================
   Login
================================ */

.login-page {
    min-height: 100vh;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 28px 22px;
    border-radius: 28px;
    background: white;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.app-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: white;
    font-weight: 900;
    font-size: 1rem;
}

.login-card h1 {
    margin: 0;
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: -0.04em;
}

.sub-text {
    margin: 10px 0 22px;
    text-align: center;
    color: #6b7280;
    font-size: 0.95rem;
}


/* ===============================
   Tabs
================================ */

.tab-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 999px;
    background: #eef2f7;
}

.tab {
    border: 0;
    padding: 12px;
    border-radius: 999px;
    background: transparent;
    color: #6b7280;
    font-weight: 800;
    font-size: 1rem;
}

.tab.active {
    background: white;
    color: #2563eb;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}


/* ===============================
   Forms
================================ */

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.9rem;
    font-weight: 800;
    color: #374151;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 16px;
    padding: 15px 14px;
    font-size: 1rem;
    background: white;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}


/* ===============================
   Buttons
================================ */

.primary-btn {
    width: 100%;
    border: 0;
    border-radius: 18px;
    padding: 16px;
    background: #2563eb;
    color: white;
    font-size: 1.05rem;
    font-weight: 900;
}

.primary-btn:active {
    transform: scale(0.98);
}

.secondary-btn {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 18px;
    padding: 15px;
    background: white;
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.danger-btn {
    width: 100%;
    border: 0;
    border-radius: 18px;
    padding: 15px;
    background: #ef4444;
    color: white;
    font-size: 1rem;
    font-weight: 900;
}


/* ===============================
   Mobile App Layout
================================ */

.mobile-app {
    max-width: 520px;
    min-height: 100vh;
    margin: 0 auto;
    background: #f5f6f8;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 18px 18px 12px;
    background: rgba(245, 246, 248, 0.92);
    backdrop-filter: blur(12px);
}

.app-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.app-subtitle {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.app-content {
    padding: 12px 18px 28px;
}

.card {
    padding: 18px;
    margin-bottom: 14px;
    border-radius: 24px;
    background: white;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.card-title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 900;
}

.muted {
    color: #6b7280;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #2563eb;
    font-size: 0.8rem;
    font-weight: 900;
}

.status-good {
    color: #2563eb;
    font-weight: 900;
}

.status-warn {
    color: #f59e0b;
    font-weight: 900;
}

.status-bad {
    color: #ef4444;
    font-weight: 900;
}


/* ===============================
   Lists
================================ */

.simple-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.list-item {
    padding: 14px;
    border-radius: 18px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.list-main {
    font-weight: 900;
}

.list-sub {
    margin-top: 4px;
    color: #6b7280;
    font-size: 0.9rem;
}


/* ===============================
   Admin Base
================================ */

.admin-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 240px 1fr;
    background: #f3f4f6;
}

.admin-sidebar {
    background: #111827;
    color: white;
    padding: 24px 18px;
}

.admin-main {
    padding: 28px;
}

.admin-card {
    padding: 22px;
    border-radius: 20px;
    background: white;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}


/* ===============================
   Responsive
================================ */

@media (max-width: 700px) {
    .admin-layout {
        display: block;
    }

    .admin-sidebar {
        border-radius: 0 0 24px 24px;
    }

    .admin-main {
        padding: 18px;
    }
}
/* ===============================
   RC3 Dashboard / Teacher UI
================================ */

.dashboard-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.dashboard-main-count {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: center;
    margin: 12px 0 14px;
}

.hero-rate,
.hero-total {
    margin-top: 3px;
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.06em;
}

.hero-rate {
    color: #2563eb;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.dash-box {
    padding: 12px 8px;
    border-radius: 18px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.dash-number {
    margin-top: 2px;
    font-size: 1.45rem;
    font-weight: 950;
}

.summary-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-class-card {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.summary-class-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.summary-class-title {
    font-weight: 950;
}

.summary-rate {
    min-width: 54px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #2563eb;
    text-align: center;
    font-weight: 950;
}

.progress-bar {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.progress-fill {
    height: 100%;
    border-radius: 999px;
    background: #2563eb;
    transition: width 0.2s ease;
}

.summary-mini-grid,
.teacher-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.teacher-summary-grid {
    grid-template-columns: repeat(4, 1fr);
}

.summary-mini-grid div,
.teacher-summary-grid div {
    padding: 10px 6px;
    border-radius: 14px;
    background: white;
    border: 1px solid #e5e7eb;
    text-align: center;
}

.summary-mini-grid span,
.teacher-summary-grid span {
    display: block;
    font-size: 0.78rem;
}

.summary-mini-grid strong,
.teacher-summary-grid strong {
    display: block;
    margin-top: 2px;
    font-size: 1.2rem;
    font-weight: 950;
}

.student-check-card {
    padding: 14px;
    border-radius: 20px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.student-check-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-dot {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: #9ca3af;
}

.dot-good { background: #2563eb; }
.dot-warn { background: #f59e0b; }
.dot-bad { background: #ef4444; }
.dot-pending { background: #9ca3af; }

.teacher-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.teacher-action-grid button {
    padding: 12px 8px;
    border-radius: 14px;
    font-size: 0.96rem;
}

@media (max-width: 380px) {
    .dashboard-grid,
    .summary-mini-grid,
    .teacher-summary-grid,
    .teacher-action-grid {
        gap: 6px;
    }

    .hero-rate,
    .hero-total {
        font-size: 1.8rem;
    }

    .teacher-action-grid button {
        padding: 11px 6px;
        font-size: 0.9rem;
    }
}

.menuGrid {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.portalMenuBtn {
    width: 100%;
    text-align: left;
    border: 1px solid #d9e2ef;
    background: #ffffff;
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.portalMenuBtn strong {
    display: block;
    font-size: 18px;
    margin-bottom: 6px;
    color: #1f2937;
}

.portalMenuBtn span {
    display: block;
    font-size: 14px;
    color: #6b7280;
}

.emptyBox {
    padding: 20px;
    text-align: center;
    color: #777;
    background: #f8fafc;
    border-radius: 14px;
}

.modalOverlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.modalCard {
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 20px;
    border-radius: 24px;
    background: white;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

.modalCard h2 {
    margin: 0 0 12px;
    font-size: 1.25rem;
}

.infoBox {
    padding: 12px;
    border-radius: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    margin-bottom: 10px;
}

.infoBox strong {
    display: block;
    margin-bottom: 5px;
}

.student-name-btn {
    border: 0;
    background: transparent;
    padding: 0;
    font-weight: 900;
    font-size: 1rem;
    color: #111827;
    text-align: left;
}
.portalSectionTitle {
    margin: 18px 4px 4px;
    font-size: 0.92rem;
    font-weight: 800;
    color: #475569;
}

.portalMenuBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

/* ===============================
   RC6 Teacher Portal UI
================================ */

.app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

.topHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.topHeader h1 {
  margin: 0;
  font-size: 26px;
}

.topHeader p {
  margin: 6px 0 0;
  color: #64748b;
}

.card {
  background: #fff;
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.subText {
  color: #64748b;
  margin-bottom: 20px;
}

.menuGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.portalSectionTitle {
  grid-column: 1 / -1;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  font-size: 15px;
  font-weight: 800;
  color: #334155;
}

.portalMenuBtn {
  width: 100%;
  min-height: 86px;
  padding: 18px;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: #ffffff;
  text-align: left;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  transition: 0.15s;
}

.portalMenuBtn:hover {
  background: #eff6ff;
  transform: translateY(-1px);
}

.portalMenuBtn strong {
  display: block;
  font-size: 17px;
  margin-bottom: 8px;
  color: #0f172a;
}

.portalMenuBtn span {
  display: block;
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}

.smallBtn {
  width: auto;
  padding: 9px 14px;
  border-radius: 10px;
}

@media (max-width: 700px) {
  .app {
    padding: 14px;
  }

  .topHeader {
    align-items: flex-start;
  }

  .topHeader h1 {
    font-size: 22px;
  }

  .card {
    padding: 18px;
    border-radius: 18px;
  }

  .menuGrid {
    grid-template-columns: 1fr;
  }

  .portalMenuBtn {
    min-height: 78px;
  }
}

/* ===============================
   RC6.2 화면 폭 통일
   - 학생/감독 핵심 화면은 모바일 폭 유지
   - 담임/학년부장/관리자/조회 화면은 PC 폭 사용
================================ */
body.pc-wide {
    width: min(1400px, calc(100% - 48px));
    margin: 28px auto;
    padding: 0;
}

body.pc-wide .tableWrap,
body.pc-wide .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.pc-wide table {
    width: 100%;
}

body.pc-wide .topBox,
body.pc-wide .box,
body.pc-wide .card {
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

@media (max-width: 768px) {
    body.pc-wide {
        width: 100%;
        max-width: none !important;
        margin: 0 !important;
        padding: 12px !important;
    }
}

/* ===============================
   RC6.3 Teacher Portal Readability
   - 메뉴 제목 가독성 강화
   - 아이콘/색상바로 권한별 메뉴 구분
================================ */
.portalMenuBtn {
    position: relative;
    min-height: 88px !important;
    padding: 16px 18px 15px 20px !important;
    border-radius: 18px !important;
    border-color: #dbeafe !important;
    overflow: hidden;
}

.portalMenuBtn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #94a3b8;
}

.portalMenuBtn.menu-common::before { background: #64748b; }
.portalMenuBtn.menu-supervisor::before { background: #2563eb; }
.portalMenuBtn.menu-homeroom::before { background: #16a34a; }
.portalMenuBtn.menu-grade::before { background: #f97316; }
.portalMenuBtn.menu-admin::before { background: #ef4444; }
.portalMenuBtn.menu-viewer::before { background: #7c3aed; }

.portalMenuTitleRow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.portalMenuIcon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eff6ff;
    font-size: 18px;
    flex: 0 0 auto;
}

.portalMenuBtn strong {
    display: block;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.25;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em;
}

.portalMenuBtn > span {
    display: block;
    padding-left: 40px;
    font-size: 14.5px !important;
    line-height: 1.45 !important;
    color: #475569 !important;
    font-weight: 600;
}

.portalSectionTitle {
    font-size: 16px !important;
    color: #1e293b !important;
}

@media (max-width: 700px) {
    .portalMenuBtn {
        min-height: 78px !important;
        padding: 14px 15px 13px 17px !important;
    }

    .portalMenuIcon {
        width: 28px;
        height: 28px;
        font-size: 17px;
    }

    .portalMenuBtn strong {
        font-size: 18px !important;
    }

    .portalMenuBtn > span {
        padding-left: 38px;
        font-size: 13.5px !important;
    }
}

/* ===============================
   Index Logo 변경
================================ */
.login-brand {
    text-align: center;
    margin-bottom: 22px;
}

.school-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    display: block;
    margin: 0 auto 12px;
}

.school-name {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.login-title {
    font-size: 28px;
    font-weight: 900;
    color: #020617;
    margin: 0 0 8px;
    letter-spacing: -0.04em;
}

/* ===============================
   RC8-5 관리자 대시보드 UX
================================ */
.form-grid.two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.button-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.button-row button {
    flex: 1 1 180px;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.small-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.hint-text {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.problem-only-active {
    background: #fff7ed !important;
    color: #9a3412 !important;
    border-color: #fed7aa !important;
}

@media (max-width: 700px) {
    .form-grid.two-columns {
        grid-template-columns: 1fr;
    }

    .section-title-row {
        align-items: flex-start;
    }
}


/* =========================================================
   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.33 TEMP DISABLE DARK / LOOPY MODES
   - 다크/루피 모드는 안정화 전까지 선택지에서 숨김
   - 저장값이 남아 있어도 기본 테마처럼 보이게 보정
   ========================================================= */

[data-theme-value="dark"],
[data-theme-value="special-loopy"],
[data-theme-value="loopy"],
.themeChip[data-theme="dark"],
.themeChip[data-theme="special-loopy"],
.themeChip[data-theme="loopy"],
button[data-theme-value="dark"],
button[data-theme-value="special-loopy"],
button[data-theme-value="loopy"]{
  display:none!important;
}

/* 루피 배지/스티커/장식 숨김 */
.loopySpecialBadge,
[data-theme-label="special-loopy"],
html[data-theme="special-loopy"] .loopySpecialBadge,
html[data-theme="special-loopy"] .seasonBadge{
  display:none!important;
}

/* 혹시 기존 저장값으로 dark/loopy class가 남아도 기본 화면처럼 강제 */
html[data-theme="dark"],
html[data-theme="special-loopy"]{
  color-scheme:light!important;
}

html[data-theme="dark"] body,
html[data-theme="special-loopy"] body{
  background:var(--ms-bg,#f8fafc)!important;
  color:var(--ms-text,#0f172a)!important;
}

html[data-theme="dark"] .portalHomeHeader,
html[data-theme="special-loopy"] .portalHomeHeader,
html[data-theme="dark"] header.portalHomeHeader.topHeader,
html[data-theme="special-loopy"] header.portalHomeHeader.topHeader{
  background:linear-gradient(135deg,#38bdf8,#2dd4bf)!important;
  color:#fff!important;
  background-image:linear-gradient(135deg,#38bdf8,#2dd4bf)!important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .sectionCard,
html[data-theme="dark"] .panel,
html[data-theme="special-loopy"] .card,
html[data-theme="special-loopy"] .sectionCard,
html[data-theme="special-loopy"] .panel{
  background:#fff!important;
  color:#0f172a!important;
}


/* =========================================================
   RC13.34 LOGIN SCREEN FIX
   - 자동 로그인 체크박스 정렬
   - 로그인 화면 테마 선택 추가
   - 여름 에디션 문구 숨김
   ========================================================= */

.login-card .autoLoginOption,
.autoLoginOption{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  width:100%!important;
  margin:4px 0 12px!important;
  padding:0!important;
  line-height:1.2!important;
  color:#0f172a!important;
  font-size:14px!important;
  font-weight:500!important;
}

.login-card .autoLoginOption input,
.autoLoginOption input,
#autoLoginCheck{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  margin:0!important;
  padding:0!important;
  flex:0 0 16px!important;
  vertical-align:middle!important;
  appearance:auto!important;
}

.login-card .autoLoginOption span,
.autoLoginOption span{
  display:inline-flex!important;
  align-items:center!important;
  line-height:1.2!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
}

.loginThemePicker{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  margin:14px auto 0!important;
  max-width:280px!important;
}

.loginThemePicker button{
  min-height:30px!important;
  padding:6px 8px!important;
  border-radius:999px!important;
  border:1px solid var(--ms-border,#bae6fd)!important;
  background:#fff!important;
  color:var(--ms-heading,#0369a1)!important;
  font-size:12px!important;
  font-weight:800!important;
  box-shadow:0 4px 12px rgba(15,23,42,.06)!important;
}

.loginThemePicker button.active{
  background:var(--ms-gradient,linear-gradient(135deg,#38bdf8,#2dd4bf))!important;
  color:#fff!important;
  border-color:transparent!important;
}

/* 로그인 화면에는 시즌/여름 에디션 문구를 표시하지 않음 */
.login-page .seasonBadge,
.login-page .loopySpecialBadge,
.login-page [data-season-label],
.login-page [data-season-badge],
.login-page [data-theme-label="default"],
.login-card .seasonBadge,
.login-card .loopySpecialBadge,
.login-card [data-theme-label="default"]{
  display:none!important;
}


/* ===============================
   RC13 v18 PC 반응형 폭 최적화
   - 모바일 폭은 기존 유지
   - PC에서는 업무포털/자습출결/월간/공지/관리자 하위 화면을 넓게 사용
================================ */
@media (min-width: 1024px) {
  body.pc-responsive,
  body.pc-wide.pc-responsive {
    width: min(1680px, calc(100vw - 64px)) !important;
    max-width: none !important;
    margin: 24px auto 96px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: visible !important;
  }

  body.pc-responsive .container,
  body.pc-responsive .wrap,
  body.pc-responsive .app,
  body.pc-responsive .mobile-app,
  body.pc-responsive .workPlanApp,
  body.pc-responsive .portalHomeApp,
  body.pc-responsive main {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body.pc-responsive .mobile-app {
    min-height: auto !important;
    background: transparent !important;
  }

  body.pc-responsive .app-content,
  body.pc-responsive .content,
  body.pc-responsive .pageContent,
  body.pc-responsive .mainContent {
    width: 100% !important;
    max-width: none !important;
  }

  body.pc-responsive .grid,
  body.pc-responsive .cardGrid,
  body.pc-responsive .menu-grid,
  body.pc-responsive .portalMenuGrid,
  body.pc-responsive .summary-grid,
  body.pc-responsive .dashboardGrid,
  body.pc-responsive .quickGrid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  }

  body.pc-responsive .tableWrap,
  body.pc-responsive .table-wrap,
  body.pc-responsive .tableBox,
  body.pc-responsive .scrollTable,
  body.pc-responsive .table-scroll {
    width: 100% !important;
    max-width: none !important;
    overflow-x: auto !important;
  }

  body.pc-responsive table {
    width: 100% !important;
  }

  body.pc-responsive .card,
  body.pc-responsive .box,
  body.pc-responsive .topBox,
  body.pc-responsive section {
    max-width: none !important;
  }
}

@media (min-width: 1440px) {
  body.pc-responsive,
  body.pc-wide.pc-responsive {
    width: min(1760px, calc(100vw - 96px)) !important;
  }
}

@media (max-width: 768px) {
  body.pc-responsive,
  body.pc-wide.pc-responsive {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  body.pc-responsive .mobile-app {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }
}