/* ==========================================================================
   dark-mode.css — 다크 모드 공통 보정 (관리자 · 이용자 공용)

   design-system.css의 [data-theme="dark"] 토큰 정의만으로는 커버되지 않는 곳,
   즉 레거시 style.css / DevExtreme / jQuery UI 가 색을 하드코딩한 지점을
   body[data-theme="dark"] 스코프에서 토큰 색으로 덮어쓴다.

   - 토큰 정의(값 자체)는 design-system.css 가 담당한다. 여기에는 넣지 않는다.
   - 이 파일은 design-system.css 보다 뒤에 로드되어야 한다 (덮어쓰기 순서).
   - 관리자 전용 보정은 tana/css/admin-dark.css, 이용자 전용은 tana/css/member-dark.css.
   - style.css 가 토큰 기반으로 정리되면 해당 규칙은 여기서 지운다.
   ========================================================================== */

/* ── 기본 글자색 ───────────────────────────────────────────────────────── */
/* design-system.css 의 body 는 배경만 토큰이고 글자색이 없어, 색을 따로 정하지 않은 텍스트는
   UA 기본(검정)으로 남는다. 다크에서는 본문 글자색을 토큰으로 상속시킨다. */
body[data-theme="dark"] {
    color: var(--ds-text-color, #e2e7ef);
}
/* button/input 은 color 를 상속하지 않고 UA 기본(검정)을 쓴다. :where() 로 특이도를 0으로 두어
   자체 색을 정한 버튼(.ds-btn--primary 등)은 그대로 두고, 색을 정하지 않은 아코디언 헤더 같은 버튼만
   본문 글자색을 따르게 한다. */
:where(body[data-theme="dark"]) :where(button, input, select, textarea) {
    color: inherit;
}

/* ── 디자인시스템 컴포넌트 ─────────────────────────────────────────────── */
body[data-theme="dark"] .ds-table tbody td {
    color: var(--ds-text-color, #e2e7ef);
}
/* 행 분리선 — design-system.css 가 td 하단선을 #F3F4F6 으로 하드코딩해 다크에서 흰 줄로 보인다 */
body[data-theme="dark"] .ds-table:not(.ds-table--kv) > tbody > tr > td,
body[data-theme="dark"] .ds-table--rows > tbody > tr > td {
    border-bottom-color: var(--ds-color-neutral-200, #2c3445);
}
/* 다크 모드에서는 모달 배경(--ds-color-bg)이 페이지 배경과 같은 값이라 경계가 사라진다.
   모달을 한 단계 밝은 면으로 올리고 테두리·그림자·오버레이를 강화해 구분한다. */
body[data-theme="dark"] .ds-modal-overlay {
    background: rgba(0, 0, 0, .65);
}
body[data-theme="dark"] .ds-modal {
    background-color: var(--ds-color-bg-secondary, #1b2130);
    border: 1px solid var(--ds-color-neutral-300, #3d4759);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .7);
}
/* 레거시 팝업(.pop_outer_wrap .pop_item > .pop_wrap)도 모달 면이 body 배경과 같아 경계가 사라지므로 .ds-modal 과 동일하게 보정 */
body[data-theme="dark"] .pop_outer_wrap .pop_item {
    background: rgba(0, 0, 0, .65);
}
body[data-theme="dark"] .pop_outer_wrap .pop_wrap {
    background-color: var(--ds-color-bg-secondary, #1b2130);
    border: 1px solid var(--ds-color-neutral-300, #3d4759);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .7);
}
body[data-theme="dark"] .ds-modal-header,
body[data-theme="dark"] .ds-modal-footer {
    border-color: var(--ds-color-neutral-300, #3d4759);
}
/* 음영 헤더(.ds-table--header-shaded)는 --ds-color-primary-soft(밝은 색)를 그대로 써서
   다크 배경에서 흰 띠로 튄다. */
body[data-theme="dark"] .ds-table--header-shaded thead th,
body[data-theme="dark"] .ds-table--header-shaded tbody tr:first-child th {
    background: var(--ds-color-neutral-100, #232a3a);
    color: var(--ds-text-color, #e2e7ef);
}
/* 비교표(.ds-compare-table)도 헤더가 primary-soft, 행 구분선·hover 가 밝은 색 하드코딩 */
body[data-theme="dark"] .ds-compare-table th {
    background: var(--ds-color-neutral-100, #232a3a);
    color: var(--ds-text-color, #e2e7ef);
}
body[data-theme="dark"] .ds-compare-table td {
    border-top-color: var(--ds-color-border, #2f3849);
}
body[data-theme="dark"] .ds-compare-table tbody tr:hover {
    background: var(--ds-color-neutral-100, #232a3a);
}
/* 정보 안내 박스(.ds-notice--info) — 밝은 민트 배경(#eaf3f2) 하드코딩 */
body[data-theme="dark"] .ds-notice--info {
    background: rgba(97, 173, 161, .12);
    border-color: rgba(97, 173, 161, .35);
    color: #9fd6cc;
}
/* 주의 안내 박스(.ds-notice--danger + 아이콘) — 연핑크 배경(#fdecec)·진홍 글자(#a12b2b) 하드코딩 */
body[data-theme="dark"] .ds-notice--danger:has(.ds-notice__icon) {
    background: rgba(226, 75, 74, .12);
    border-color: rgba(226, 75, 74, .35);
    color: #f0a3a3;
}

/* ── DevExtreme 그리드 ─────────────────────────────────────────────────── */
/* 그리드 행 hover — 레거시 style.css가 배경을 #e6f7ff로 하드코딩해 다크 번들의 밝은 글자가
   묻힌다. ds-datagrid 쪽 hover도 글자색이 neutral-900 기준이라 함께 맞춘다. */
body[data-theme="dark"] .dx-datagrid-rowsview .dx-row.dx-state-hover,
body[data-theme="dark"] .dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-focused) > td {
    background-color: rgba(255, 255, 255, .06);
    color: var(--ds-text-color, #e2e7ef);
}
/* 그리드 글자색 — 레거시 style.css가 헤더(#797979)·하단 보더 뷰 본문(#212121)을 하드코딩해
   다크 번들의 밝은 글자색을 덮는다. */
body[data-theme="dark"] .dx-datagrid-headers table {
    color: var(--ds-color-neutral-600, #b3bccd);
}
body[data-theme="dark"] .dx-datagrid .dx-bordered-bottom-view table {
    color: var(--ds-text-color, #e2e7ef);
}
/* 컨텍스트 메뉴(.css_context) — style.css가 배경을 #f9f9f9로 하드코딩 */
body[data-theme="dark"] .css_context.dx-context-menu .dx-menu-items-container {
    background: var(--ds-color-bg-secondary, #1b2130);
}

/* ── jQuery UI datepicker ──────────────────────────────────────────────── */
/* jquery-ui 기본 테마가 흰 배경/검은 글자를 그대로 그린다.
   #ui-datepicker-div는 body 직속에 붙으므로 body[data-theme]로 잡는다. */
body[data-theme="dark"] #ui-datepicker-div {
    background: var(--ds-color-bg-secondary, #1b2130);
    border: 1px solid var(--ds-color-neutral-300, #3d4759);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
    color: var(--ds-text-color, #e2e7ef);
}
body[data-theme="dark"] #ui-datepicker-div .ui-datepicker-calendar th,
body[data-theme="dark"] #ui-datepicker-div .ui-datepicker-title {
    color: var(--ds-text-color, #e2e7ef);
}
body[data-theme="dark"] #ui-datepicker-div .ui-datepicker-calendar .ui-state-default {
    color: var(--ds-text-color, #e2e7ef);
}
body[data-theme="dark"] #ui-datepicker-div .ui-datepicker-calendar .ui-state-active,
body[data-theme="dark"] #ui-datepicker-div .ui-datepicker-calendar .ui-state-hover {
    background: var(--ds-color-primary, #5B62F4);
    box-shadow: none;
    color: #fff;
}
body[data-theme="dark"] #ui-datepicker-div .ui-datepicker-calendar .ui-state-highlight {
    border-color: var(--ds-color-primary-light, #7A80F6);
}
body[data-theme="dark"] #ui-datepicker-div .ui-datepicker-prev span::after,
body[data-theme="dark"] #ui-datepicker-div .ui-datepicker-next span::after {
    color: var(--ds-color-primary-light, #7A80F6);
}
body[data-theme="dark"] #ui-datepicker-div select,
body[data-theme="dark"] #ui-datepicker-div .ui-datepicker-buttonpane button {
    background: var(--ds-color-bg, #131720);
    border: 1px solid var(--ds-color-neutral-300, #3d4759);
    color: var(--ds-text-color, #e2e7ef);
    opacity: 1;
}
body[data-theme="dark"] #ui-datepicker-div .ui-datepicker-buttonpane {
    background: none;
    border-top-color: var(--ds-color-neutral-300, #3d4759);
}

/* ── 레거시 style.css 하드코딩 보정 ────────────────────────────────────── */
/* 모달 제목(.pop_tit #2F2F2F), 해결 안내(#getSolutionMessage) */
body[data-theme="dark"] .pop_tit,
body[data-theme="dark"] #getSolutionMessage {
    color: var(--ds-text-color, #e2e7ef);
}
/* 레거시 폼 테이블(.th_colored_table) — th 배경 #EDEDED·글자 #797979, td 글자 #212121,
   보더 #C0C0C0 하드코딩. */
body[data-theme="dark"] .th_colored_table,
body[data-theme="dark"] .th_colored_table thead th,
body[data-theme="dark"] .th_colored_table tbody td,
body[data-theme="dark"] .th_colored_table tbody th {
    border-color: var(--ds-color-border, #2f3849);
}
body[data-theme="dark"] .th_colored_table th,
body[data-theme="dark"] .pop_table thead th {
    background: var(--ds-color-neutral-100, #232a3a);
    color: var(--ds-color-neutral-700, #cbd3e0);
}
body[data-theme="dark"] .th_colored_table td {
    color: var(--ds-text-color, #e2e7ef);
}
/* 안내 문구(.intro_info #2F2F2F) */
body[data-theme="dark"] .intro_info {
    color: var(--ds-color-muted, #9aa5b8);
}
/* 모달 본문 문구(.member_txt) — 글자 #212121 하드코딩 (쿠폰 발행 취소 등) */
body[data-theme="dark"] .member_txt {
    color: var(--ds-text-color, #e2e7ef);
}
/* 레거시 폼 라벨(.t_label) — 글자 #2F2F2F 하드코딩. 모달 섹션 제목·항목 라벨에 두루 쓰인다. */
body[data-theme="dark"] .t_label {
    color: var(--ds-text-color, #e2e7ef);
}
/* 회색 정보 박스(.info_box) — 배경 #EDEDED 하드코딩 (영수증/세금계산서 결과조회 등) */
body[data-theme="dark"] .info_box {
    background: var(--ds-color-bg-secondary, #1b2130);
}
body[data-theme="dark"] .info_box .half_list li {
    border-color: var(--ds-color-neutral-300, #3d4759);
}
/* 레거시 체크박스/라디오 라벨(#212121)과 흰 박스 */
body[data-theme="dark"] .chk_box input[type=checkbox] + label,
body[data-theme="dark"] .rad_box input[type=radio] + label {
    color: var(--ds-text-color, #e2e7ef);
}
body[data-theme="dark"] .chk_box input[type=checkbox]:not(:checked):not(:disabled) + label::before,
body[data-theme="dark"] .rad_box input[type=radio]:not(:checked) + label::before {
    background: var(--ds-color-bg, #131720);
    border-color: var(--ds-color-neutral-400, #8b96aa);
}
/* 네이티브 date/month 입력의 달력 아이콘이 어두운 색이라 다크 배경에서 안 보인다 */
body[data-theme="dark"] input[type="date"],
body[data-theme="dark"] input[type="month"] {
    color-scheme: dark;
}
/* 레거시 배경 이미지 아이콘 — 검정 선 아이콘이라 다크 배경에 묻힌다.
   검정 픽셀만 밝게 바꾼 *_dark.png 로 이미지만 교체한다(위치·반복은 원본 규칙 유지).
   jQuery UI datepicker 입력(.date_inp 달력), 셀렉트 화살표(.bkd_select), 새로고침(.ico_refresh) */
body[data-theme="dark"] input.date_inp {
    background-image: url('../../tana/images/ico_cal_dark.png');
}
body[data-theme="dark"] .balance_select,
body[data-theme="dark"] .bkd_select {
    background-image: url('../../tana/images/ico_select_dark.png');
}
/* 펼침 목록 버튼(.org_button, 매치작업 > 자동매치작업 내역 상세 등) — style.css 배경 #fff·글자 #212121 */
body[data-theme="dark"] .org_button {
    background: var(--ds-color-neutral-100, #232a3a);
    border-color: var(--ds-color-neutral-300, #3d4759);
    color: var(--ds-text-color, #e2e7ef);
}
body[data-theme="dark"] .org_button::after {
    background-image: url('../../tana/images/ico_select_dark.png');
}
body[data-theme="dark"] .hover_title.ico_refresh,
body[data-theme="dark"] .ico_refresh {
    background-image: url('../../tana/images/ico_ref_dark.png');
}
/* hover_title 툴팁(.memo_cont, common.js가 생성하는 전역 요소) — 배경 #EBEBEB·글자 #2F2F2F 하드코딩.
   Exception 로그의 쿼리/오류 메시지 툴팁 등. */
body[data-theme="dark"] .memo_cont {
    background: var(--ds-color-neutral-100, #232a3a);
    border: 1px solid var(--ds-color-neutral-300, #3d4759);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .6);
}
body[data-theme="dark"] .memo_cont p {
    color: var(--ds-text-color, #e2e7ef);
}
/* 은행/계좌 다중 선택 드롭다운(.acc_list) 및 계좌별 잔액 탭(.balance_list) — 버튼·목록 배경 #fff, 보더 #C0C0C0 하드코딩.
   라벨 글자는 위 .chk_box 보정으로 밝아지므로 배경을 어둡게 맞춘다. */
body[data-theme="dark"] .acc_list .acc_list_btn,
body[data-theme="dark"] .acc_list .all_acc_list,
body[data-theme="dark"] .balance_list .balance_list_btn,
body[data-theme="dark"] .balance_list .all_balance_list {
    background: var(--ds-color-bg-secondary, #1b2130);
    border-color: var(--ds-color-neutral-300, #3d4759);
    color: var(--ds-text-color, #e2e7ef);
}
body[data-theme="dark"] .acc_list .all_acc_list,
body[data-theme="dark"] .balance_list .all_balance_list {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
}
body[data-theme="dark"] .acc_list_btn::after,
body[data-theme="dark"] .balance_list_btn::after {
    filter: invert(1);
}

/* 상대 색상 문법을 지원하지 않는 브라우저는 아래 선언을 무시하고 기본 색상을 적용한다. */
/* 계좌 표시 색상(act_color, 기본 #000000) — 색조는 유지하고 명도만 0.75 이상으로 올린다 */
body[data-theme="dark"] .act-color,
body[data-theme="dark"] .act-color--important {
    color: oklch(from var(--act-color, currentColor) max(l, 0.75) c h) !important;
}

/* ── 헤더 다크모드 토글(.theme-toggle): 텍스트 대신 해·달 아이콘 (이용자·관리자 공용) ── */
.theme-toggle {
    width: 52px;
    height: 26px;
    vertical-align: middle;
}
.theme-toggle .toggle-slider {
    background: #e3ebe9;
}
.theme-toggle .theme-toggle__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle .theme-toggle__icon--sun {
    left: 7px;
    color: #e0a100;
}
.theme-toggle .theme-toggle__icon--moon {
    right: 7px;
    color: #6b7c93;
}
.theme-toggle .theme-toggle__icon svg {
    width: 100%;
    height: 100%;
}
.theme-toggle .toggle-slider::before {
    z-index: 1;
    width: 20px;
    height: 20px;
    left: 3px;
    bottom: 3px;
    box-shadow: 0 1px 3px rgba(31, 45, 61, .22);
}
.theme-toggle input[type="checkbox"]:checked + .toggle-slider {
    background: #2b3548;
}
.theme-toggle input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(26px);
}
.theme-toggle input[type="checkbox"]:checked + .toggle-slider .theme-toggle__icon--moon {
    color: #f5d76e;
}

/* design-system 기본 툴팁은 헤더에서 잘리고 과해 토글만 아래쪽·내용폭으로 보정 */
.theme-toggle[data-tooltip]:not(.hover_title):not(.tooltip_type_btn):not(.ds-tooltip)::after {
    top: calc(100% + 8px);
    bottom: auto;
    min-width: 0;
    max-width: none;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 8px;
    white-space: nowrap;
    transform: translateX(-50%) translateY(-4px);
}
.theme-toggle[data-tooltip]:not(.hover_title):not(.tooltip_type_btn):not(.ds-tooltip):hover::after {
    transform: translateX(-50%) translateY(0);
}
body[data-theme="dark"] .theme-toggle[data-tooltip]:not(.hover_title):not(.tooltip_type_btn):not(.ds-tooltip)::after {
    background: var(--ds-color-neutral-100, #232a3a);
    color: var(--ds-text-color, #e2e7ef);
    border: 1px solid var(--ds-color-neutral-300, #3d4759);
}
/* 값 표시용 입력(.notInput) — style.css 가 배경 #fff·글자 #212121 !important 고정이라 다크에서 흰 칸/안 보이는 값이 된다 */
body[data-theme="dark"] .notInput {
    background-color: transparent !important;
    color: var(--ds-text-color, #e2e7ef) !important;
}
/* 팝업 안내 문구(.pop_comm_txt #747474 / .pop_comm_txt2 #4A4A4A) — style.css 하드코딩 회색이 다크 배경에 묻힌다 (수기결제 요청취소 등) */
body[data-theme="dark"] .pop_comm_txt {
    color: var(--ds-color-muted, #9aa5b8);
}
body[data-theme="dark"] .pop_comm_txt2 {
    color: var(--ds-color-neutral-600, #b3bccd);
}