/* M2M UI skin: dark(default) / white — html[data-skin] 기준 */

html[data-skin="white"] {
  --navy-deep: #d7e0ee;
  --navy-mid: #e4ebf5;
  --navy-light: #eef3f9;
  --surface: rgba(15, 23, 42, 0.045);
  --surface-hover: rgba(15, 23, 42, 0.08);
  --border: rgba(15, 23, 42, 0.14);
  --border-hover: rgba(15, 23, 42, 0.22);
  --primary: #c2410c;
  --primary-glow: rgba(211, 84, 0, 0.18);
  --accent: #d35400;
  --text-primary: #0f172a;
  --text-secondary: rgba(15, 23, 42, 0.72);
  --text-muted: rgba(15, 23, 42, 0.5);
  --sa-bg: #eef2f7;
  --sa-surface: #ffffff;
  --sa-surface-2: #f8fafc;
  --sa-border: rgba(15, 23, 42, 0.12);
  --sa-text: #0f172a;
  --sa-muted: rgba(15, 23, 42, 0.58);
  --page-bg: linear-gradient(170deg, #f8fafc 0%, #eef2f7 35%, #e8eef6 70%, #f1f5f9 100%);
  color-scheme: light;
}

/* ---------- 페이지 바탕·본문 글자 ---------- */
html[data-skin="white"] body:not(:has(.login-card)) {
  background: var(--page-bg) !important;
  color: #0f172a !important;
}

html[data-skin="white"] .page,
html[data-skin="white"] .sa-main,
html[data-skin="white"] .sa-shell,
html[data-skin="white"] .sa-side,
html[data-skin="white"] main {
  color: #0f172a !important;
}

/* ---------- 패널·검색·카드 밝은 배경 + 어두운 글자 ---------- */
html[data-skin="white"] .panel,
html[data-skin="white"] .search-bar,
html[data-skin="white"] .search-grid,
html[data-skin="white"] .table-wrap,
html[data-skin="white"] .home-hub,
html[data-skin="white"] .home-fixed-notice,
html[data-skin="white"] .mcard,
html[data-skin="white"] .sa-nav-card,
html[data-skin="white"] .notice-panel,
html[data-skin="white"] .chart-card,
html[data-skin="white"] .chart-wrap,
html[data-skin="white"] .card,
html[data-skin="white"] .err-box {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

html[data-skin="white"] .page-header h1,
html[data-skin="white"] .page h1,
html[data-skin="white"] .panel .title,
html[data-skin="white"] .subtitle,
html[data-skin="white"] .page-header .subtitle,
html[data-skin="white"] label,
html[data-skin="white"] .search-bar label,
html[data-skin="white"] .search-grid label,
html[data-skin="white"] .text-muted,
html[data-skin="white"] .no-data,
html[data-skin="white"] .empty-state,
html[data-skin="white"] .err,
html[data-skin="white"] th,
html[data-skin="white"] td,
html[data-skin="white"] .name,
html[data-skin="white"] .sa-nav-t,
html[data-skin="white"] .mcard-head .mt,
html[data-skin="white"] .mcard-desc,
html[data-skin="white"] .slist a,
html[data-skin="white"] .home-fixed-notice-head,
html[data-skin="white"] .home-fixed-notice-title,
html[data-skin="white"] .home-fixed-notice-date,
html[data-skin="white"] .home-fixed-notice-empty {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
  text-shadow: none !important;
}

html[data-skin="white"] .subtitle,
html[data-skin="white"] .page-header .subtitle,
html[data-skin="white"] .search-bar label,
html[data-skin="white"] .search-grid label,
html[data-skin="white"] .text-muted,
html[data-skin="white"] .no-data,
html[data-skin="white"] .empty-state,
html[data-skin="white"] .mcard-desc,
html[data-skin="white"] .home-fixed-notice-date,
html[data-skin="white"] .home-fixed-notice-empty {
  color: rgba(15, 23, 42, 0.58) !important;
  -webkit-text-fill-color: rgba(15, 23, 42, 0.58) !important;
}

html[data-skin="white"] thead th,
html[data-skin="white"] .table-wrap th {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

html[data-skin="white"] tbody td,
html[data-skin="white"] .table-wrap td,
html[data-skin="white"] .home-fixed-notice-row {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-skin="white"] tr.total-row td {
  color: #0f172a !important;
  border-top-color: rgba(15, 23, 42, 0.2) !important;
  background: rgba(15, 23, 42, 0.04) !important;
}

html[data-skin="white"] body:not(:has(.login-card)) input,
html[data-skin="white"] body:not(:has(.login-card)) select,
html[data-skin="white"] body:not(:has(.login-card)) textarea {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

html[data-skin="white"] body:not(:has(.login-card)) input::placeholder,
html[data-skin="white"] body:not(:has(.login-card)) textarea::placeholder {
  color: rgba(15, 23, 42, 0.4) !important;
}

html[data-skin="white"] select option {
  color: #0f172a !important;
  background: #ffffff !important;
}

/* ---------- 팝업 공통 (통계/정산) ---------- */
html[data-skin="white"] .popup-overlay {
  background: rgba(15, 23, 42, 0.35) !important;
}

html[data-skin="white"] .popup-box,
html[data-skin="white"] .home-notice-pop,
html[data-skin="white"] .home-notice-tip,
html[data-skin="white"] .ssmng-modal,
html[data-skin="white"] .img-popup,
html[data-skin="white"] .right-popup-box {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16) !important;
}

html[data-skin="white"] .popup-header,
html[data-skin="white"] .popup-head,
html[data-skin="white"] .popup-body,
html[data-skin="white"] .popup-search,
html[data-skin="white"] .popup-list,
html[data-skin="white"] .right-popup-head,
html[data-skin="white"] .right-popup-body,
html[data-skin="white"] .right-popup-search,
html[data-skin="white"] .right-popup-list,
html[data-skin="white"] .ssmng-modal-head,
html[data-skin="white"] .img-popup-head,
html[data-skin="white"] .img-popup-body {
  background: transparent !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

html[data-skin="white"] .popup-header h3,
html[data-skin="white"] .popup-head h3,
html[data-skin="white"] .popup-box h3,
html[data-skin="white"] .right-popup-head b,
html[data-skin="white"] .ssmng-modal-head,
html[data-skin="white"] .img-popup-head {
  color: #0f172a !important;
}

html[data-skin="white"] .popup-search input,
html[data-skin="white"] .popup-box .popup-search input,
html[data-skin="white"] .right-popup-search input {
  color: #0f172a !important;
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

html[data-skin="white"] .popup-close,
html[data-skin="white"] .popup-head .btn-tb,
html[data-skin="white"] .ssmng-modal-close,
html[data-skin="white"] .img-popup-close,
html[data-skin="white"] .right-popup-box .icon-btn {
  color: #0f172a !important;
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

html[data-skin="white"] .right-item,
html[data-skin="white"] .right-item-row,
html[data-skin="white"] .popup-list .right-item,
html[data-skin="white"] .popup-list .right-item .ri-nm,
html[data-skin="white"] .popup-list .right-item .ri-cd,
html[data-skin="white"] .popup-list .right-item .nm,
html[data-skin="white"] .popup-list .right-item .cd,
html[data-skin="white"] .right-item-row .cd,
html[data-skin="white"] .popup-list .no-data,
html[data-skin="white"] .popup-list .loading,
html[data-skin="white"] .right-empty,
html[data-skin="white"] .right-err {
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-skin="white"] .right-item:hover,
html[data-skin="white"] .right-item.highlight,
html[data-skin="white"] .right-item-row:hover,
html[data-skin="white"] .popup-list .right-item:hover,
html[data-skin="white"] .popup-list .right-item.highlight {
  background: rgba(211, 84, 0, 0.1) !important;
  color: #0f172a !important;
}

/* ---------- 상단 주황 바: 흰 글자 유지 ---------- */
html[data-skin="white"] .qm-topbar,
html[data-skin="white"] .qm-topbar *,
html[data-skin="white"] .sa-top,
html[data-skin="white"] .sa-top *,
html[data-skin="white"] .topbar,
html[data-skin="white"] .topbar * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html[data-skin="white"] .qm-topbar .qm-logo-text,
html[data-skin="white"] .sa-top .sa-wordmark {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
html[data-skin="white"] .qm-topbar .qm-svc-cap,
html[data-skin="white"] .sa-top .cap,
html[data-skin="white"] .topbar .cap {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}
html[data-skin="white"] .qm-comp-select,
html[data-skin="white"] .sa-sel,
html[data-skin="white"] .home-comp-select {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
html[data-skin="white"] .qm-comp-select option,
html[data-skin="white"] .sa-sel option,
html[data-skin="white"] .home-comp-select option {
  color: #0f172a !important;
  background: #ffffff !important;
}

/* 주황/녹색 액션 버튼은 흰 글자 유지 */
html[data-skin="white"] .btn-search,
html[data-skin="white"] .btn.search,
html[data-skin="white"] .popup-search button,
html[data-skin="white"] .btn-download,
html[data-skin="white"] .btn-login,
html[data-skin="white"] .right-popup-search .btn.search {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 본문 쪽 보조 버튼(어두운 테마용 흰 글자) → 어두운 글자 */
html[data-skin="white"] .btn-tb,
html[data-skin="white"] .btn.csv,
html[data-skin="white"] .btn.detail,
html[data-skin="white"] .btn.download,
html[data-skin="white"] .btn.reset,
html[data-skin="white"] .icon-btn,
html[data-skin="white"] .btn-contractor-reset {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
}
/* 주황 상단바 안 버튼/배지는 다시 흰 글자 */
html[data-skin="white"] .topbar .btn-tb,
html[data-skin="white"] .qm-topbar .btn-tb,
html[data-skin="white"] .qm-topbar .qm-btn,
html[data-skin="white"] .sa-top .sa-logout,
html[data-skin="white"] .sa-top .sa-backup-btn,
html[data-skin="white"] .sa-top .sa-chip,
html[data-skin="white"] .topbar .ubadge,
html[data-skin="white"] .topbar .uav {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-skin="white"] .qm-footer-service,
html[data-skin="white"] .sa-bottom-sub {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}
html[data-skin="white"] .qm-footer-service .qm-svc-cap,
html[data-skin="white"] .sa-bottom-sub .cap {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  text-shadow: none !important;
}

/* ---------- 플로팅/홈 펼침 메뉴 ---------- */
html[data-skin="white"] .floating-menu,
html[data-skin="white"] .fm-tab {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
html[data-skin="white"] .fm-title,
html[data-skin="white"] .fm-submenu-item,
html[data-skin="white"] .fm-submenu-link {
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}
html[data-skin="white"] .fm-submenu-item:hover,
html[data-skin="white"] .fm-submenu-link:hover,
html[data-skin="white"] .fm-submenu-item.active,
html[data-skin="white"] .fm-submenu-link.active {
  background: rgba(211, 84, 0, 0.1) !important;
}

html[data-skin="white"] .home-right-col.menu-section .slist {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14) !important;
}
html[data-skin="white"] .home-right-col.menu-section .slist a,
html[data-skin="white"] .home-right-col.menu-section .slist a .ar {
  color: #0f172a !important;
}
html[data-skin="white"] .slist a:hover,
html[data-skin="white"] .home-right-col.menu-section .slist a:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

html[data-skin="white"] .logo-text-lg-label,
html[data-skin="white"] .logo-ring {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-skin="white"] .bg-glow { opacity: 0.04 !important; }

/* 로그인 화면은 login.html 자체 토큰 사용 */
html:has(.login-card) body {
  background: transparent !important;
}