/* ============================================
   HCMS 3.0 Modern Override
   - style.css의 레거시 클래스를 모던 스타일로 오버라이드
   - style.css는 변경하지 않음 (Shadow Override 패턴)
   - Phase 1~8에서 점진적으로 추가
   ============================================ */


/* === Header Modern Override === */

#header {
  background: var(--hcms-bg);
  border-bottom: 1px solid var(--hcms-border-light);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* === Sidebar (GNB) Modern Override === */

#gnb {
  background: var(--hcms-bg);
  border-right: 1px solid var(--hcms-border-light);
  color: var(--hcms-text-body);
}

#gnb ul li {
  border-radius: 8px;
  margin: 2px 6px;
}

#gnb ul li:hover {
  background-color: var(--hcms-surface);
}

#gnb ul li a {
  color: var(--hcms-text-body);
  font-size: 15px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}

#gnb ul li a:hover {
  color: var(--hcms-text-heading);
  font-weight: 600;
}

/* selected / active: primary tint background */
#gnb ul li.selected > a,
#gnb ul li a.active {
  color: var(--hcms-primary) !important;
  background: rgba(13, 116, 206, 0.08) !important;
  font-weight: 700;
}

#gnb ul li.selected::before,
#gnb ul li a.active::before {
  background-color: var(--hcms-primary) !important;
}

/* collapsed hover */
#gnb.collapsed ul li:hover,
#gnb.collapsed ul li a:hover {
  background-color: var(--hcms-surface) !important;
}

#gnb.collapsed ul li.selected > a,
#gnb.collapsed ul li > a.active {
  color: var(--hcms-primary) !important;
  background: rgba(13, 116, 206, 0.08) !important;
}

#gnb.collapsed ul li.selected::before,
#gnb.collapsed ul li > a.active::before {
  background-color: var(--hcms-primary) !important;
}

/* menu open button: remove red hover */
#menuButton:hover {
  background-color: var(--hcms-surface) !important;
}

/* charge person modal */
.chargePerson_info .modal-title {
  color: var(--hcms-text-heading);
}

.chargePerson_cards .card {
  background-color: var(--hcms-surface);
  border: 1px solid var(--hcms-border-light);
}

.chargePerson_cards .card h3 {
  color: var(--hcms-text-heading);
}

/* === Table Row Hover Animation === */

.lboardL tr:hover td,
.lboardW tr:hover td,
.lboardD tr:hover td,
.lboardLNew tr:hover td,
table.table-bordered tbody tr:hover td,
table.table-sm tbody tr:hover td {
  background-color: var(--hcms-surface);
  transition: background-color 0.15s ease;
}

/* === Empty State Pattern === */

.porting-empty-row td,
.index-empty,
.empty-row td {
  color: var(--hcms-text-placeholder) !important;
  font-style: normal;
  padding: 40px 16px !important;
}

/* === Logo === */

.hcms-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  user-select: none;
  line-height: 1;
}

.hcms-logo-mark {
  font-family: "Inter", "Noto Sans KR", -apple-system, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--hcms-text-heading);
  line-height: 1;
}

.hcms-logo-text {
  font-family: "Inter", "Noto Sans KR", -apple-system, sans-serif;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -0.5px;
  color: var(--hcms-text-heading);
  line-height: 1;
}

.hcms-logo:hover .hcms-logo-mark,
.hcms-logo:hover .hcms-logo-text {
  color: var(--hcms-primary);
}

/* === Phase 1: 타이포그래피 + 기본 리셋 === */

body {
  color: var(--hcms-text-body);
  line-height: 1.5;
}

body, th, td, input, select, textarea {
  font-family: var(--hcms-font);
  font-size: 14px;
}

a:link, a:visited {
  color: var(--hcms-text-body);
  text-decoration: none;
}
a:hover, a:active {
  color: var(--hcms-primary);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--hcms-text-heading);
}

input, select, textarea {
  color: var(--hcms-text-body);
  line-height: 1.5;
}

select, textarea {
  border: 1px solid var(--hcms-border);
  border-radius: var(--hcms-radius-input);
}

textarea {
  padding: 8px 12px;
}

.txtPoint {
  color: var(--hcms-danger);
}
.txtPointB {
  color: var(--hcms-danger);
  font-weight: 600;
}


/* === Phase 2: 테이블 시스템 === */

/* === List Page Global Standards ===
   - 간격: th 12px 14px / td 11px 14px (Notion/Linear 참고)
   - 폰트: th 12px uppercase 700 / td 13px 400
   - 행 높이: 최소 44px (터치 기준)
   ================================== */

.lboard {
  font-size: 13px;
  color: var(--hcms-text-body);
}
.lboard p {
  font-size: 13px;
  letter-spacing: normal;
}

/* 기본 게시판 (lboardL) */
.lboardL {
  border-top: none;
  border-collapse: separate;
  border-spacing: 0;
}
.lboardL th {
  background-color: var(--hcms-surface);
  border-bottom: 1px solid var(--hcms-border-light);
  padding: 12px 14px;
  color: var(--hcms-text-muted);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.lboardL td {
  border-bottom: 1px solid var(--hcms-border-subtle);
  padding: 11px 14px;
  font-size: 13px;
  color: var(--hcms-text-body);
  line-height: 1.5;
}
.lboardL td.stit {
  background-color: var(--hcms-surface);
  font-weight: 600;
}
.lboardL tfoot {
  background-color: var(--hcms-surface);
}
.lboardL th.row {
  background-color: var(--hcms-surface);
}
.lboardL td.con {
  text-align: left;
}

/* 작성/편집 폼 테이블 (lboardW) */
.lboardW {
  border-top: none;
}
.lboardW th {
  background-color: var(--hcms-surface);
  border-bottom: 1px solid var(--hcms-border-light);
  padding: 12px 16px 10px 14px;
  color: var(--hcms-text-muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.lboardW td {
  border-bottom: 1px solid var(--hcms-border-light);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--hcms-text-body);
}

/* lboardW 내부 중첩 lboardL */
.lboardW td .lboardL th {
  background-color: var(--hcms-surface);
  border-top: 1px solid var(--hcms-border);
  border-bottom: 1px solid var(--hcms-border-light);
  color: var(--hcms-text-body);
  font-size: 12px;
  font-weight: 600;
}
.lboardW td .lboardL td {
  border-bottom: 1px solid var(--hcms-border-subtle);
}

/* 상세 테이블 (lboardD) */
.lboardD {
  border-top: none;
}
.lboardD th {
  background-color: var(--hcms-surface);
  border-bottom: 1px solid var(--hcms-border-light);
  padding: 12px 14px;
  color: var(--hcms-text-muted);
  font-weight: 700;
}
.lboardD td {
  border-bottom: 1px solid var(--hcms-border-light);
  padding: 6px 8px 4px 15px;
  color: var(--hcms-text-body);
}

/* 댓글 테이블 (lboardR) */
.lboardR {
  border-top: none;
}
.lboardR th {
  color: var(--hcms-primary);
}
.lboardR td {
  border-bottom: 1px solid var(--hcms-border-subtle);
  padding: 11px 14px;
}
.lboardR td.reply {
  background-color: var(--hcms-surface);
}

/* === 페이지네이션 — 전체 중앙 정렬 통일 === */
.pageView {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 0 10px;
  width: 100%;
}

.pageView span {
  color: var(--hcms-text-muted);
  font-size: 13px;
}

.pageView .form-select-page,
.pageView select {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: var(--hcms-radius-input);
  border: 1px solid var(--hcms-border);
}

.paginate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
}
.paginate .num strong {
  color: var(--hcms-primary) !important;
  font-weight: 700;
}
.paginate a,
.paginate span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 4px;
  border-radius: 6px;
  color: var(--hcms-text-muted);
  text-decoration: none;
  font-size: 13px;
  transition: background-color 0.15s ease;
}
.paginate a:hover {
  background-color: var(--hcms-surface) !important;
  color: var(--hcms-text-heading);
}

/* === 리스트 페이지 제목 영역 통일 === */
.titleNew {
  margin-bottom: 16px;
}
.titleNew h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--hcms-text-heading);
  letter-spacing: -0.3px;
  margin: 0;
}

/* === lboard 래퍼 === */
.lboard {
  border-radius: var(--hcms-radius-card);
  overflow: hidden;
}

/* === 리스트 테이블 상단 border 제거 === */
.lboardL:first-child,
.lboardLNew:first-child {
  border-top: none;
}

/* === 검색 영역 하단 간격 통일 === */
.container-fluid.py-3 {
  padding-bottom: 0 !important;
  margin-bottom: 16px;
}

/* === 버튼 행(row-flex) 간격 통일 === */
.row-flex {
  margin-bottom: 14px;
  gap: 8px;
}

/* === 구 스타일 검색 영역(SearchBox) 간격 === */
.SearchBox {
  margin-bottom: 16px;
}


/* === Phase 3: 버튼 시스템 === */

/* --- 패턴 A: div.left + a > span 이미지 버튼 --- */

.btnSGrey .left,
.btnSViolet .left,
.btnBlack .left,
.btnViolet .left,
.btnBlue .left,
.btnRed .left,
.btnNavy .left,
.btnGrey .left {
  display: none !important;
}

.btnSGrey span,
.btnSViolet span,
.btnBlack span,
.btnViolet span,
.btnBlue span,
.btnRed span,
.btnNavy span,
.btnGrey span {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-image: none !important;
  border-radius: var(--hcms-radius-btn);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--hcms-font);
  padding: 6px 14px !important;
  height: auto !important;
  line-height: 1.4 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--hcms-transition);
  margin-bottom: 0;
}

.btnSGrey span {
  background-color: var(--hcms-surface) !important;
  color: var(--hcms-text-body) !important;
  border: 1px solid var(--hcms-border);
}
.btnSGrey span:hover { background-color: var(--hcms-border-light) !important; }

.btnSViolet span {
  background-color: var(--hcms-primary) !important;
  color: #fff !important;
  border: 1px solid var(--hcms-primary);
}
.btnSViolet span:hover { background-color: var(--hcms-primary-hover) !important; }

.btnBlack span {
  background-color: var(--hcms-bg) !important;
  color: var(--hcms-text-body) !important;
  border: 1px solid var(--hcms-border);
}
.btnBlack span:hover { background-color: var(--hcms-surface) !important; border-color: var(--hcms-neutral); }

.btnViolet span,
.btnRed span {
  background-color: var(--hcms-danger) !important;
  color: #fff !important;
}
.btnViolet span:hover,
.btnRed span:hover { background-color: var(--hcms-danger-hover) !important; }

.btnBlue span {
  background-color: var(--hcms-primary) !important;
  color: #fff !important;
}
.btnBlue span:hover { background-color: var(--hcms-primary-hover) !important; }

.btnNavy span {
  background-color: var(--hcms-bg) !important;
  color: var(--hcms-text-body) !important;
  border: 1px solid var(--hcms-border);
}
.btnNavy span:hover { background-color: var(--hcms-surface) !important; border-color: var(--hcms-neutral); }

.btnGrey span {
  background-color: var(--hcms-bg) !important;
  color: var(--hcms-text-body) !important;
  border: 1px solid var(--hcms-border);
}
.btnGrey span:hover { background-color: var(--hcms-surface) !important; border-color: var(--hcms-neutral); }

.btnSGrey a:link, .btnSGrey a:visited, .btnSGrey a:hover, .btnSGrey a:active { color: var(--hcms-text-body); text-decoration: none; }
.btnSViolet a, .btnBlack a, .btnViolet a, .btnBlue a, .btnRed a, .btnNavy a, .btnGrey a { color: #fff !important; text-decoration: none !important; }

/* --- 패턴 B: inline-block 이미지 버튼 --- */

.button-black,
.button-black *,
.button-violet,
.button-violet *,
.button-violet-s,
.button-violet-s *,
.button-gray-s,
.button-gray-s *,
.button-blue,
.button-blue * {
  background-image: none !important;
  height: auto !important;
  line-height: 1.4 !important;
}

.button-black,
.button-violet,
.button-blue {
  display: inline-flex !important;
  align-items: center;
  padding: 6px 14px !important;
  border-radius: var(--hcms-radius-btn);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--hcms-transition);
}

.button-black * { padding-left: 0 !important; }
.button-violet * { padding-left: 0 !important; }
.button-blue * { padding-left: 0 !important; }

/* 어두운/파란 배경 → 흰 글자. color 미지정 시 <span> 자식이 본문 색(--hcms-text-body,
   #63635e)을 상속해 배경과 거의 같은 색이 됨(특히 button-black 은 배경=글자색으로 완전 비가시).
   button-violet-s 와 동일하게 부모에 흰 글자 강제 → <a><span>/<input> 모두 커버. */
.button-black { background-color: var(--hcms-neutral) !important; color: #fff !important; }
.button-black:hover { background-color: var(--hcms-neutral-hover) !important; }

.button-violet { background-color: var(--hcms-primary) !important; color: #fff !important; }
.button-violet:hover { background-color: var(--hcms-primary-hover) !important; }

.button-blue { background-color: var(--hcms-primary) !important; color: #fff !important; }
.button-blue:hover { background-color: var(--hcms-primary-hover) !important; }

.button-gray-s,
.button-violet-s {
  display: inline-flex !important;
  align-items: center;
  padding: 4px 10px !important;
  border-radius: var(--hcms-radius-btn);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--hcms-transition);
}

.button-gray-s * { padding-left: 0 !important; padding-right: 0 !important; }
.button-violet-s * { padding-left: 0 !important; padding-right: 0 !important; }

.button-gray-s {
  background-color: var(--hcms-surface) !important;
  color: var(--hcms-text-body) !important;
  border: 1px solid var(--hcms-border);
}
.button-gray-s:hover { background-color: var(--hcms-border-light) !important; }

.button-violet-s {
  background-color: var(--hcms-primary) !important;
  color: #fff !important;
}
.button-violet-s:hover { background-color: var(--hcms-primary-hover) !important; }

.style-btn {
  border-radius: var(--hcms-radius-btn);
  border-color: var(--hcms-border);
  font-size: 13px;
  transition: all var(--hcms-transition);
}
.style-btn:hover {
  border-color: var(--hcms-primary);
  color: var(--hcms-primary);
}

.lboard .btnCenter {
  display: flex;
  justify-content: center;
  gap: 8px;
}


/* === Phase 4: SearchBox + 폼 컨트롤 === */

.SearchBox .topLeft,
.SearchBox .top,
.SearchBox .bgLeft {
  background-image: none !important;
  height: 0 !important;
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.SearchBox .bg {
  background-image: none !important;
  padding: 16px 20px 16px 16px !important;
}
.SearchBox {
  border: 1px solid var(--hcms-border-light);
  border-radius: var(--hcms-radius-card);
  background-color: var(--hcms-bg);
  margin-bottom: 20px;
}

input.input_txt {
  height: auto;
  padding: 4px 8px;
  border: 1px solid var(--hcms-border);
  border-radius: var(--hcms-radius-input);
  font-size: 14px;
  color: var(--hcms-text-body);
  transition: border-color var(--hcms-transition);
}
input.input_txt:focus {
  border-color: var(--hcms-primary);
  outline: none;
  box-shadow: var(--hcms-shadow-focus);
}

select.select_txt {
  height: auto;
  padding: 4px 8px;
  border: 1px solid var(--hcms-border);
  border-radius: var(--hcms-radius-input);
  font-size: 14px;
  color: var(--hcms-text-body);
}

input.input_file {
  border: 1px solid var(--hcms-border);
  border-radius: var(--hcms-radius-input);
  padding: 4px 8px;
}


/* === Phase 5: 팝업 + 탭 + 기타 === */

#popup .title {
  background-image: none !important;
  border-bottom: 2px solid var(--hcms-border-light);
  margin-bottom: 16px;
  height: auto;
  padding-bottom: 12px;
}
#popup .title h3 {
  font-family: var(--hcms-font) !important;
  font-size: 18px;
  color: var(--hcms-text-heading);
  font-weight: 600;
  letter-spacing: normal;
}
#popup .title h4 {
  font-family: var(--hcms-font) !important;
  font-size: 16px;
  color: var(--hcms-text-body);
  background-image: none !important;
  letter-spacing: normal;
}

#popup .titleS h5 {
  font-family: var(--hcms-font) !important;
  font-size: 14px;
  color: var(--hcms-primary);
  background-image: none !important;
  padding-left: 0;
  font-weight: 600;
  letter-spacing: normal;
}
#popup .titleS h6 {
  font-family: var(--hcms-font) !important;
  color: var(--hcms-text-muted);
  font-size: 13px;
  letter-spacing: normal;
}

.tab {
  background-image: none !important;
  border-bottom: 2px solid var(--hcms-border-light);
}
.tab li a {
  background: var(--hcms-bg) !important;
  border: 1px solid var(--hcms-border-light);
  border-bottom: none;
  color: var(--hcms-text-muted);
  font-size: 14px;
  border-radius: var(--hcms-radius-btn) var(--hcms-radius-btn) 0 0;
  transition: all var(--hcms-transition);
}
.tab li.current a {
  color: var(--hcms-primary) !important;
  border-color: var(--hcms-primary);
  font-weight: 600;
  background: var(--hcms-bg) !important;
}

.color-violet {
  color: var(--hcms-primary);
}
.color-blue {
  color: var(--hcms-primary);
}

.top-info {
  border: 1px solid var(--hcms-border-light);
  border-left: none;
  border-right: none;
  background: #fffbeb;
  border-radius: 0;
  color: var(--hcms-text-body);
}

.inner-nav {
  background: var(--hcms-surface);
  border-radius: var(--hcms-radius-btn);
}
.inner-nav li a {
  background-image: none !important;
  color: var(--hcms-text-body);
}
.inner-nav li.current a {
  color: var(--hcms-primary);
  font-weight: 600;
}

.search-form {
  border: 1px solid var(--hcms-border-light);
  border-radius: var(--hcms-radius-card);
}

.ListIcon li {
  background-image: none !important;
  padding-left: 12px;
  position: relative;
}
.ListIcon li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  background: var(--hcms-border);
  border-radius: 50%;
}

.file-stat {
  border-color: var(--hcms-border-light);
  border-radius: var(--hcms-radius-card);
}


/* ============================================
   Dark Mode Overrides
   - CommonLayout.css hardcoded colors
   - Bootstrap / legacy elements
   - body, header, sidebar, modal
   ============================================ */

/* --- Body & Global --- */
[data-theme="dark"] body {
  background-color: var(--hcms-bg);
  color: var(--hcms-text-body);
}

[data-theme="dark"] #wrap,
[data-theme="dark"] #popup {
  background-color: var(--hcms-bg);
}

/* --- Header area --- */
[data-theme="dark"] .header,
[data-theme="dark"] #header {
  background-color: var(--hcms-surface) !important;
  border-bottom-color: var(--hcms-border) !important;
}

/* --- Left menu / sidebar --- */
[data-theme="dark"] .lnb,
[data-theme="dark"] .aside,
[data-theme="dark"] #aside,
[data-theme="dark"] .sidebar {
  background-color: var(--hcms-surface);
  border-right-color: var(--hcms-border);
}

[data-theme="dark"] .lnb a,
[data-theme="dark"] .aside a {
  color: var(--hcms-text-body);
}

[data-theme="dark"] .lnb li.selected > a,
[data-theme="dark"] .lnb li.current > a {
  color: var(--hcms-primary);
  background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .submenu a {
  background-color: transparent;
}

/* --- Content area --- */
[data-theme="dark"] .content,
[data-theme="dark"] #content,
[data-theme="dark"] .container {
  background-color: var(--hcms-bg);
}

/* --- CommonLayout: containers --- */
[data-theme="dark"] .chapter-list,
[data-theme="dark"] .menu-addition,
[data-theme="dark"] .menu-details {
  background-color: var(--hcms-surface);
  border-color: var(--hcms-border);
  color: var(--hcms-text-body);
}

/* --- CommonLayout: Bootstrap table overrides --- */
[data-theme="dark"] .table-bordered th {
  background-color: var(--hcms-surface);
  color: var(--hcms-text-heading);
  border-color: var(--hcms-border);
}

[data-theme="dark"] .table-bordered td {
  color: var(--hcms-text-body);
  border-color: var(--hcms-border);
}

[data-theme="dark"] .table-sm {
  background-color: var(--hcms-bg);
  border-color: var(--hcms-border);
}

[data-theme="dark"] .table-sm thead th {
  background-color: var(--hcms-surface);
}

/* --- CommonLayout: lboardNew / lboardLNew --- */
[data-theme="dark"] .lboardNew {
  border-color: var(--hcms-border);
}

[data-theme="dark"] .lboardLNew th {
  background-color: var(--hcms-surface);
  color: var(--hcms-text-body);
  border-bottom-color: var(--hcms-border);
}

[data-theme="dark"] .lboardLNew td {
  color: var(--hcms-text-body);
  border-bottom-color: var(--hcms-border);
}

[data-theme="dark"] .lboardLNew tr:hover td {
  background-color: var(--hcms-surface);
}

/* --- CommonLayout: legacy lboard overrides (hardcoded in CommonLayout) --- */
[data-theme="dark"] .lboardL th {
  background-color: var(--hcms-surface) !important;
  border-bottom-color: var(--hcms-border) !important;
}

[data-theme="dark"] .lboardL td {
  border-bottom-color: var(--hcms-border) !important;
}

[data-theme="dark"] .lboardD th {
  background-color: var(--hcms-surface) !important;
  border-bottom-color: var(--hcms-border) !important;
}

[data-theme="dark"] .lboardD td {
  border-bottom-color: var(--hcms-border) !important;
}

/* --- CommonLayout: Nav tabs --- */
[data-theme="dark"] .nav-tabs .nav-link {
  background-color: var(--hcms-surface);
  color: var(--hcms-text-muted);
  border-color: var(--hcms-border);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--hcms-primary);
  color: #fff;
}

/* --- CommonLayout: Form controls --- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--hcms-surface);
  color: var(--hcms-text-body);
  border-color: var(--hcms-border);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  border-color: var(--hcms-primary);
  box-shadow: var(--hcms-shadow-focus);
}

[data-theme="dark"] .floating-label {
  background-color: var(--hcms-bg);
  color: var(--hcms-text-muted);
}

[data-theme="dark"] .position-relative:focus-within label {
  color: var(--hcms-primary);
}

/* --- CommonLayout: Buttons --- */
[data-theme="dark"] .btn-white,
[data-theme="dark"] .btn-white-md {
  background-color: var(--hcms-surface);
  color: var(--hcms-text-body) !important;
  border-color: var(--hcms-border);
}

[data-theme="dark"] .btn-white:hover {
  background-color: var(--hcms-border);
}

[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-outline {
  background-color: var(--hcms-surface);
  color: var(--hcms-text-body) !important;
  border-color: var(--hcms-border);
}

[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-outline:hover {
  background-color: var(--hcms-border);
}

[data-theme="dark"] .btn-detail {
  color: var(--hcms-text-muted) !important;
}

/* --- CommonLayout: Cards --- */
[data-theme="dark"] .card,
[data-theme="dark"] .card.team-card {
  background-color: var(--hcms-surface);
  border-color: var(--hcms-border);
  color: var(--hcms-text-body);
}

[data-theme="dark"] .team-header {
  border-bottom-color: var(--hcms-border);
}

[data-theme="dark"] .team-name-col,
[data-theme="dark"] .member-name-col {
  color: var(--hcms-text-heading);
}

[data-theme="dark"] .team-email-col,
[data-theme="dark"] .member-email-col {
  color: var(--hcms-primary);
}

[data-theme="dark"] .member-phone-col {
  color: var(--hcms-text-muted);
}

/* --- CommonLayout: Selected/clicked states --- */
[data-theme="dark"] .selected-chapter {
  background-color: var(--hcms-primary);
  color: #fff;
}

[data-theme="dark"] .clicked {
  background-color: #b45309;
  color: #fff;
}

/* --- CommonLayout: Messages / progress --- */
[data-theme="dark"] .message-status {
  background-color: var(--hcms-primary);
}

[data-theme="dark"] #progress-wrp {
  border-color: var(--hcms-primary);
  background: var(--hcms-surface);
}

[data-theme="dark"] #progress-wrp .progress-bar {
  background-color: var(--hcms-primary);
}

[data-theme="dark"] #progress-wrp .status {
  color: var(--hcms-text-body);
}

/* --- CommonLayout: Autocomplete --- */
[data-theme="dark"] .autocomplete-suggestions {
  background: var(--hcms-surface);
  border-color: var(--hcms-border);
  color: var(--hcms-text-body);
}

[data-theme="dark"] .autocomplete-suggestions .suggestion-item {
  color: var(--hcms-text-body);
}

[data-theme="dark"] .autocomplete-suggestions .suggestion-item:hover {
  background-color: var(--hcms-border);
}

[data-theme="dark"] .content-item-code {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--hcms-primary);
}

[data-theme="dark"] .content-item-name {
  color: var(--hcms-text-body);
}

/* --- CommonLayout: Upload area --- */
[data-theme="dark"] #dropArea {
  border-color: var(--hcms-border);
  background-color: var(--hcms-surface);
  color: var(--hcms-text-muted);
}

/* --- CommonLayout: Block section --- */
[data-theme="dark"] .block-section {
  border-color: var(--hcms-border);
  background-color: var(--hcms-surface);
}

[data-theme="dark"] .block-section h5 {
  color: var(--hcms-text-heading);
}

/* --- CommonLayout: Links --- */
[data-theme="dark"] .animated-underline-link {
  color: var(--hcms-primary) !important;
}

[data-theme="dark"] .animated-underline-link:hover {
  color: var(--hcms-primary-hover) !important;
}

/* --- CommonLayout: titleNew --- */
[data-theme="dark"] .titleNew h3 {
  color: var(--hcms-text-heading);
}

/* --- CommonLayout: Text colors --- */
[data-theme="dark"] .txt-grey {
  color: var(--hcms-text-muted);
}

/* --- CommonLayout: Table popup --- */
[data-theme="dark"] .table-popup .txtPoint {
  color: var(--hcms-danger);
}

[data-theme="dark"] .table-popup .txtPointBg {
  background-color: rgba(234, 179, 8, 0.15);
  color: #fbbf24;
}

/* --- Bootstrap Modal --- */
[data-theme="dark"] .modal-content {
  background-color: var(--hcms-surface);
  border-color: var(--hcms-border);
  color: var(--hcms-text-body);
}

[data-theme="dark"] .modal-header {
  border-bottom-color: var(--hcms-border);
}

[data-theme="dark"] .modal-footer {
  border-top-color: var(--hcms-border);
}

[data-theme="dark"] .modal-title {
  color: var(--hcms-text-heading);
}

/* --- Bootstrap Alert / Badge --- */
[data-theme="dark"] .alert {
  border-color: var(--hcms-border);
}

/* --- top-info banner --- */
[data-theme="dark"] .top-info {
  background: rgba(234, 179, 8, 0.1);
  border-color: var(--hcms-border);
  color: var(--hcms-text-body);
}

/* --- Legacy style.css img buttons: hide bg image in dark --- */
[data-theme="dark"] .SearchBox .bg {
  background-color: var(--hcms-surface);
}

/* --- SVG 아이콘 (하드코딩 fill="#20222D" → 다크모드 반전) --- */
[data-theme="dark"] #gnb svg,
[data-theme="dark"] #menuOpen svg,
[data-theme="dark"] #chargePersonsButton svg {
  filter: invert(0.85);
}

/* --- Scrollbar (Webkit) --- */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--hcms-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--hcms-border);
  border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* ============================================
   Dark Mode: Broad Element Overrides
   - ASPX 페이지별 <style> 블록의 하드코딩 색상을 커버
   - HTML 요소 레벨에서 광범위하게 적용
   ============================================ */

/* --- All text elements: force light text --- */
[data-theme="dark"] body,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] li,
[data-theme="dark"] label,
[data-theme="dark"] legend {
  color: var(--hcms-text-body);
}

[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] strong, [data-theme="dark"] b {
  color: var(--hcms-text-heading);
}

/* --- All inputs: dark surface --- */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="file"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--hcms-surface) !important;
  color: var(--hcms-text-body) !important;
  border-color: var(--hcms-border) !important;
}

/* --- All tables: force dark colors --- */
[data-theme="dark"] table th {
  background-color: var(--hcms-surface) !important;
  color: var(--hcms-text-muted) !important;
  border-color: var(--hcms-border) !important;
}

[data-theme="dark"] table td {
  color: var(--hcms-text-body) !important;
  border-color: var(--hcms-border) !important;
}

[data-theme="dark"] table tbody tr:hover td {
  background-color: rgba(59, 130, 246, 0.08) !important;
}

/* --- Links: ensure visibility --- */
[data-theme="dark"] a:link,
[data-theme="dark"] a:visited {
  color: var(--hcms-primary);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:active {
  color: var(--hcms-primary-hover);
}

/* white-text buttons: keep white */
[data-theme="dark"] .btn-red, [data-theme="dark"] .btn-blue,
[data-theme="dark"] .btn-green, [data-theme="dark"] .btn-grey,
[data-theme="dark"] .btn-red-md, [data-theme="dark"] .btn-blue-md,
[data-theme="dark"] .btn-green-md, [data-theme="dark"] .btn-grey-md,
[data-theme="dark"] .btn-red-lg, [data-theme="dark"] .btn-blue-lg,
[data-theme="dark"] .btn-green-lg, [data-theme="dark"] .btn-grey-lg {
  color: #fff !important;
}

/* --- Pill/chip badges: soften for dark bg --- */
[data-theme="dark"] [class*="meta-chip"],
[data-theme="dark"] [class*="status-chip"] {
  border-color: var(--hcms-border);
  opacity: 0.9;
}

/* --- Page-level light backgrounds → dark --- */
[data-theme="dark"] [style*="background-color: #f"],
[data-theme="dark"] [style*="background-color:#f"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:white"] {
  background-color: var(--hcms-surface) !important;
}

/* --- Pagination / page controls --- */
[data-theme="dark"] .pageView,
[data-theme="dark"] [class*="page-controls"],
[data-theme="dark"] [class*="page-size"],
[data-theme="dark"] [class*="pager"] {
  background-color: var(--hcms-surface);
  border-color: var(--hcms-border);
  color: var(--hcms-text-body);
}

[data-theme="dark"] [class*="pager"] a,
[data-theme="dark"] [class*="pager"] span {
  color: var(--hcms-text-body);
}

[data-theme="dark"] [class*="pager"] a:hover {
  background-color: var(--hcms-border);
}

/* --- Search buttons with dark bg: keep as-is, just adjust --- */
[data-theme="dark"] [class*="search-btn"] {
  background-color: var(--hcms-primary) !important;
  color: #fff !important;
}

[data-theme="dark"] [class*="search-btn"]:hover {
  background-color: var(--hcms-primary-hover) !important;
}

/* --- Gradient backgrounds → flat dark --- */
[data-theme="dark"] [style*="linear-gradient"] {
  background: var(--hcms-surface) !important;
}

/* --- box-shadow with light colors → dark --- */
[data-theme="dark"] .lboardNew,
[data-theme="dark"] [class*="card"] {
  box-shadow: 0 4px 18px rgba(0,0,0,0.3), 0 0.8px 2.93px rgba(0,0,0,0.15);
}

/* ============================================
   Dark Mode: Page-specific pattern overrides
   - ASPX <style> 블록의 공통 패턴을 일괄 처리
   - detail-index-page, porting-*, 기타 페이지 공용
   ============================================ */

/* --- White-background containers/cards/boards → dark --- */
[data-theme="dark"] [class*="index-board"],
[data-theme="dark"] [class*="index-modal"] {
  background-color: var(--hcms-surface) !important;
  border-color: var(--hcms-border) !important;
  color: var(--hcms-text-body);
}

/* --- Action/utility buttons with white bg → dark --- */
[data-theme="dark"] [class*="index-action-btn"],
[data-theme="dark"] [class*="index-utility-btn"],
[data-theme="dark"] [class*="index-inline-btn"] {
  background-color: var(--hcms-surface) !important;
  background-image: none !important;
  border-color: var(--hcms-border) !important;
  color: var(--hcms-text-body) !important;
}

[data-theme="dark"] [class*="index-action-btn"].is-primary,
[data-theme="dark"] [class*="index-inline-btn"].is-primary {
  color: var(--hcms-primary) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  background-color: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] [class*="index-utility-btn"].is-danger {
  color: var(--hcms-danger) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  background-color: rgba(239, 68, 68, 0.1) !important;
}

[data-theme="dark"] [class*="index-utility-btn"].is-ghost {
  background-color: var(--hcms-surface) !important;
  color: var(--hcms-text-muted) !important;
}

[data-theme="dark"] [class*="index-inline-btn"].is-secondary {
  background-color: var(--hcms-surface) !important;
  border-color: var(--hcms-border) !important;
  color: var(--hcms-text-muted) !important;
}

[data-theme="dark"] [class*="index-inline-btn"].is-disabled,
[data-theme="dark"] [class*="index-inline-btn"]:disabled,
[data-theme="dark"] [class*="index-inline-placeholder"] {
  background-color: var(--hcms-bg) !important;
  border-color: var(--hcms-border) !important;
  color: var(--hcms-text-placeholder) !important;
}

/* --- Table cells with light surfaces → dark --- */
[data-theme="dark"] [class*="index-group-cell"] {
  background-color: rgba(59, 130, 246, 0.05) !important;
  border-color: var(--hcms-border) !important;
}

/* --- Text colors: near-black → light --- */
[data-theme="dark"] [class*="index-group-name"],
[data-theme="dark"] [class*="index-group-code"],
[data-theme="dark"] [class*="index-group-title"],
[data-theme="dark"] [class*="index-title-text"],
[data-theme="dark"] [class*="index-modal-title"] {
  color: var(--hcms-text-heading) !important;
}

[data-theme="dark"] [class*="index-meta-line"],
[data-theme="dark"] [class*="index-row-cue"],
[data-theme="dark"] [class*="index-modal-copy"] {
  color: var(--hcms-text-muted) !important;
}

[data-theme="dark"] [class*="index-meta-line"] strong,
[data-theme="dark"] [class*="index-row-cue"] strong,
[data-theme="dark"] [class*="index-type-item"] strong {
  color: var(--hcms-text-heading) !important;
}

[data-theme="dark"] [class*="index-title-link"] {
  color: var(--hcms-primary) !important;
}

/* --- Status chips: soften backgrounds for dark --- */
[data-theme="dark"] [class*="index-status-chip"] {
  background-color: var(--hcms-surface) !important;
  border-color: var(--hcms-border) !important;
}

[data-theme="dark"] [class*="index-status-chip"].is-ok {
  color: var(--hcms-success) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  background-color: rgba(34, 197, 94, 0.1) !important;
}

[data-theme="dark"] [class*="index-status-chip"].is-warn {
  color: #fb923c !important;
  border-color: rgba(251, 146, 60, 0.3) !important;
  background-color: rgba(251, 146, 60, 0.1) !important;
}

[data-theme="dark"] [class*="index-status-chip"].is-alert {
  color: var(--hcms-danger) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  background-color: rgba(239, 68, 68, 0.1) !important;
}

[data-theme="dark"] [class*="index-study-value"],
[data-theme="dark"] [class*="index-study-empty"] {
  color: var(--hcms-text-muted) !important;
}

[data-theme="dark"] [class*="index-empty"] {
  color: var(--hcms-text-placeholder) !important;
}

/* --- Modal backdrop: darker overlay --- */
[data-theme="dark"] [class*="index-modal-backdrop"] {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* --- Porting pages: toolbar, table, chips --- */
[data-theme="dark"] [class*="porting-toolbar-input"],
[data-theme="dark"] [class*="porting-toolbar-select"] {
  background-color: var(--hcms-surface) !important;
  color: var(--hcms-text-body) !important;
  border-color: var(--hcms-border) !important;
}

[data-theme="dark"] [class*="porting-course-code"],
[data-theme="dark"] [class*="porting-course-link"],
[data-theme="dark"] [class*="porting-partner-primary"] {
  color: var(--hcms-text-heading) !important;
}

[data-theme="dark"] [class*="porting-course-meta"],
[data-theme="dark"] [class*="porting-partner-secondary"],
[data-theme="dark"] [class*="porting-empty-row"] td {
  color: var(--hcms-text-muted) !important;
}

[data-theme="dark"] [class*="porting-meta-chip"] {
  opacity: 0.85;
}

[data-theme="dark"] [class*="porting-status-chip"] {
  border-color: var(--hcms-border) !important;
  color: var(--hcms-text-muted) !important;
}

[data-theme="dark"] [class*="porting-status-chip"].is-done {
  color: var(--hcms-danger) !important;
}

[data-theme="dark"] [class*="porting-page-controls"] {
  background: var(--hcms-surface) !important;
  border-color: var(--hcms-border) !important;
  box-shadow: none !important;
}

[data-theme="dark"] [class*="porting-page-size"],
[data-theme="dark"] [class*="porting-pager"] {
  background-color: var(--hcms-bg) !important;
  box-shadow: inset 0 0 0 1px var(--hcms-border) !important;
  color: var(--hcms-text-body) !important;
}

[data-theme="dark"] [class*="porting-pager"] a {
  color: var(--hcms-text-body) !important;
}

[data-theme="dark"] [class*="porting-pager"] a:hover {
  background-color: var(--hcms-border) !important;
}

/* --- Porting: sticky table header --- */
[data-theme="dark"] .portingListWrap {
  border-color: var(--hcms-border) !important;
}

[data-theme="dark"] .portingListWrap .table thead th {
  background-color: var(--hcms-surface) !important;
}

/* --- Separator colors --- */
[data-theme="dark"] [class*="-sep"],
[data-theme="dark"] [class*="-divider"] {
  color: var(--hcms-border) !important;
}

/* ============================================
   Dark Mode: Dashboard
   ============================================ */

/* cards, table-card */
[data-theme="dark"] .dash-card,
[data-theme="dark"] .dash-table-card {
  background-color: var(--hcms-surface) !important;
  border-color: var(--hcms-border) !important;
  box-shadow: var(--hcms-shadow-card) !important;
}

/* header */
[data-theme="dark"] .dash-header h3 {
  color: var(--hcms-text-heading) !important;
}

[data-theme="dark"] .dash-subtitle {
  color: var(--hcms-text-muted) !important;
}

/* month nav */
[data-theme="dark"] .month-nav {
  background-color: var(--hcms-bg) !important;
  border-color: var(--hcms-border) !important;
}

[data-theme="dark"] .month-nav-btn {
  color: var(--hcms-text-muted) !important;
}

[data-theme="dark"] .month-nav-btn:hover {
  background-color: var(--hcms-border) !important;
  color: var(--hcms-text-heading) !important;
}

[data-theme="dark"] .month-label {
  color: var(--hcms-text-heading) !important;
}

/* card titles */
[data-theme="dark"] .dash-card-title {
  color: var(--hcms-text-muted) !important;
}

/* top list */
[data-theme="dark"] .top-list {
  background-color: var(--hcms-bg) !important;
}

[data-theme="dark"] .top-list-title {
  color: var(--hcms-text-placeholder) !important;
}

[data-theme="dark"] .top-item {
  color: var(--hcms-text-body) !important;
}

[data-theme="dark"] .top-item + .top-item {
  border-top-color: var(--hcms-border) !important;
}

[data-theme="dark"] .top-item-rank.rank-1 {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: var(--hcms-primary) !important;
}

[data-theme="dark"] .top-item-rank.rank-2 {
  background-color: rgba(156, 163, 175, 0.15) !important;
  color: var(--hcms-text-muted) !important;
}

[data-theme="dark"] .top-item-rank.rank-3 {
  background-color: rgba(107, 114, 128, 0.1) !important;
  color: var(--hcms-text-placeholder) !important;
}

[data-theme="dark"] .top-item-count {
  color: var(--hcms-primary) !important;
}

/* table header */
[data-theme="dark"] .dash-table-header h4 {
  color: var(--hcms-text-heading) !important;
}

[data-theme="dark"] .badge-count {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: var(--hcms-primary) !important;
}

/* monthly data table */
[data-theme="dark"] #tblMonthlyData thead th {
  background-color: var(--hcms-bg) !important;
  color: var(--hcms-text-muted) !important;
  border-bottom-color: var(--hcms-border) !important;
}

[data-theme="dark"] #tblMonthlyData tbody td {
  color: var(--hcms-text-body) !important;
  border-bottom-color: var(--hcms-border) !important;
}

[data-theme="dark"] #tblMonthlyData tbody tr:hover td {
  background-color: rgba(59, 130, 246, 0.05) !important;
}

/* JS-generated selected row override */
[data-theme="dark"] #tblMonthlyData tbody tr[style*="background:#eff6ff"] td,
[data-theme="dark"] #tblMonthlyData tbody tr[style*="background: #eff6ff"] td {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

/* stair list */
[data-theme="dark"] .stair-list li {
  color: var(--hcms-text-body) !important;
}

[data-theme="dark"] .stair-list li:before {
  color: var(--hcms-text-placeholder) !important;
}

/* Chart.js legend/tooltip — handled via JS, but canvas bg */
[data-theme="dark"] .chart-container canvas {
  filter: none;
}

/* --- Theme toggle button --- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--hcms-border);
  background: var(--hcms-bg);
  cursor: pointer;
  transition: all var(--hcms-transition);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  color: var(--hcms-text-body);
}

.theme-toggle:hover {
  border-color: var(--hcms-primary);
  background: var(--hcms-surface);
}

/* sun/moon icon swap */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }

[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* === Toast Notification System === */

.hcms-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

.hcms-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  max-width: 420px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--hcms-text-heading);
  color: var(--hcms-bg);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  pointer-events: auto;
  animation: hcmsToastIn 0.3s ease;
}

.hcms-toast.is-success {
  background: var(--hcms-success);
  color: #fff;
}

.hcms-toast.is-danger {
  background: var(--hcms-danger);
  color: #fff;
}

.hcms-toast.is-warning {
  background: #ad5700;
  color: #fff;
}

.hcms-toast.is-removing {
  animation: hcmsToastOut 0.25s ease forwards;
}

@keyframes hcmsToastIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hcmsToastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(16px); }
}