/* 포인트 컬러 테마 토큰 by eric 2026-10-12
   application.service.zen.color → <html data-theme="…"> (HttpInterceptor.postHandle → applicationServiceTheme)
   :root = zen(현재 색). 테마 블록이 :root를 덮어씀.
   보조 토큰(--zen-point-alt-*, --zen-point-*-2)은 :root에 정의하지 않는다:
   zen에서는 var() fallback(원래 색)이 그대로 렌더링되고, black/red에서만 테마 색이 적용된다.
   그라데이션 토큰 값은 항상 이미지(linear-gradient)여야 한다 — background-image: 선언에도 쓰이므로
   단색 테마도 2-stop 동일색 linear-gradient 로 표현한다.
   컴포넌트 토큰(로그인 카드·공통버튼 disabled·info 토스트, 2026-10-15 by eric)도 :root에 정의하지 않는다.
   카드 이미지 토큰은 url() — 테마에서는 무채색 알파 텍스처(login_card_texture.png)를 카드색 위에 깐다. */
:root {
    --zen-point: #2378B9;
    --zen-point-rgb: 35,120,185;
    --zen-point-hover: #5496C9;
    --zen-point-text: #B5D2E8;
    --zen-point-dark: #1D649B;
    --zen-point-darker: #08548E;
    --zen-point-darkest: #034A81;
    --zen-point-border: #286FA5;
    --zen-point-light-bg: #DAEDFA;
    --zen-point-light-bg-2: #C0E4FC;
    --zen-point-accent: #00A0E9;
    --zen-point-accent-light: #32B3ED;
    --zen-point-accent-dark: #0080BA;
    --zen-point-soft: #76ABD3;
    --zen-point-soft-rgb: 153,217,246;
    --zen-point-grid-bg: #24A4F1;
    --zen-point-grid-sel: #0793F9;

    --zen-point-bg: linear-gradient(#4e93c7, #2378b9, #3885c0);
    --zen-point-bg-hover: linear-gradient(#76abd3, #5496c9, #65a0ce);
    --zen-point-bar-bg: linear-gradient(#378CCD, #2378B9);
    --zen-point-bar-bg-active: linear-gradient(#3074A8, #1C6094);
    --zen-point-bar-bg-hover: linear-gradient(#68AADD, #5496C9);
    --zen-point-label-bg: linear-gradient(#B5D2E8, #a2bdd0);
}

/* black — 기준색 #313D4D(슬레이트), 저대비 단색(그라데이션 없음). 2026-10-12 5차: 검정 계열 대비가 커서 교체 */
html[data-theme="black"] {
    --zen-point: #313D4D;
    --zen-point-rgb: 49,61,77;
    --zen-point-hover: #46546A;
    --zen-point-text: #D5DCE5;
    --zen-point-dark: #273140;
    --zen-point-darker: #1F2733;
    --zen-point-darkest: #171D26;
    --zen-point-border: #3B4859;
    --zen-point-light-bg: #E6EAF0;
    --zen-point-light-bg-2: #D9DFE7;
    --zen-point-accent: #8FA3BA;
    --zen-point-accent-light: #A9BACD;
    --zen-point-accent-dark: #6F86A0;
    --zen-point-soft: #7C8EA3;
    --zen-point-soft-rgb: 124,142,163;
    --zen-point-grid-bg: #8FA3BA;
    --zen-point-grid-sel: #6F86A0;

    --zen-point-bg: linear-gradient(var(--zen-point), var(--zen-point));
    --zen-point-bg-hover: linear-gradient(var(--zen-point-hover), var(--zen-point-hover));
    --zen-point-bar-bg: linear-gradient(var(--zen-point), var(--zen-point));
    --zen-point-bar-bg-active: linear-gradient(var(--zen-point-dark), var(--zen-point-dark));
    --zen-point-bar-bg-hover: linear-gradient(var(--zen-point-hover), var(--zen-point-hover));
    --zen-point-label-bg: linear-gradient(var(--zen-point-text), var(--zen-point-text));

    --zen-point-alt: #46546A;
    --zen-point-alt-text: #D5DCE5;
    --zen-point-alt-light: #E6EAF0;
    --zen-point-alt-dark: #273140;
    --zen-point-alt-accent: #8FA3BA;
    --zen-point-bar-bg-active-2: linear-gradient(var(--zen-point-dark), var(--zen-point-dark));
    --zen-point-bar-bg-hover-2: linear-gradient(var(--zen-point-hover), var(--zen-point-hover));

    --zen-point-login-card: #6F86A0;
    --zen-point-login-card-image: url(/images/MGR000010/login_card_texture.png);
    --zen-point-fg: var(--zen-point);   /* 밝은 면 위 포인트색 글자 — 다크 서피스에서는 E블록이 accent 로 덮음 (2026-10-16 by eric) */
    --zen-point-bar-bg-disable: linear-gradient(#4A5462, #4A5462);
    --zen-point-bar-text-disable: #8794A5;
    --zen-point-toast-info: #46546A;
}

/* red — 그라데이션 유지 */
html[data-theme="red"] {
    --zen-point: #C0392B;
    --zen-point-rgb: 192,57,43;
    --zen-point-hover: #D9534F;
    --zen-point-text: #F9D6D3;
    --zen-point-dark: #8E2A20;
    --zen-point-darker: #6E2019;
    --zen-point-darkest: #4F1712;
    --zen-point-border: #A83226;
    --zen-point-light-bg: #FBE9E7;
    --zen-point-light-bg-2: #F7D5D1;
    --zen-point-accent: #E74C3C;
    --zen-point-accent-light: #F07A6E;
    --zen-point-accent-dark: #B83A2D;
    --zen-point-soft: #E09A93;
    --zen-point-soft-rgb: 240,160,150;
    --zen-point-grid-bg: #E74C3C;
    --zen-point-grid-sel: #D9534F;

    --zen-point-bg: linear-gradient(#D9534F, #C0392B, #B4342A);
    --zen-point-bg-hover: linear-gradient(#E8857B, #D9534F, #D04A40);
    --zen-point-bar-bg: linear-gradient(#D9534F, #C0392B);
    --zen-point-bar-bg-active: linear-gradient(#A83226, #7A2419);
    --zen-point-bar-bg-hover: linear-gradient(#E8857B, #D9534F);
    --zen-point-label-bg: linear-gradient(#F9D6D3, #EBC0BB);

    --zen-point-alt: #D04A40;
    --zen-point-alt-text: #F9D6D3;
    --zen-point-alt-light: #FBE9E7;
    --zen-point-alt-dark: #6E2019;
    --zen-point-alt-accent: #E74C3C;
    --zen-point-bar-bg-active-2: linear-gradient(#A83226, #7A2419);
    --zen-point-bar-bg-hover-2: linear-gradient(#E8857B, #D9534F);

    --zen-point-login-card: #B83A2D;
    --zen-point-login-card-image: url(/images/MGR000010/login_card_texture.png);
    --zen-point-fg: var(--zen-point);   /* 밝은 면 위 포인트색 글자 — 다크 서피스에서는 E블록이 accent 로 덮음 (2026-10-16 by eric) */
    --zen-point-bar-bg-disable: linear-gradient(#B77371, #9A5850);
    --zen-point-bar-text-disable: #D39C97;
    /* --zen-point-toast-info 미정의: info 토스트가 error 토스트(빨강)와 섞이지 않도록 기본 청록 유지 */
}

/* gray — 중성 회색, 그라데이션 유지 (2026-10-12 4차, black·red 가 과하다는 피드백으로 추가. 제안값: 디자인 검수 대상) */
html[data-theme="gray"] {
    --zen-point: #6B7280;
    --zen-point-rgb: 107,114,128;
    --zen-point-hover: #8B93A1;
    --zen-point-text: #E5E7EB;
    --zen-point-dark: #4B5563;
    --zen-point-darker: #374151;
    --zen-point-darkest: #1F2937;
    --zen-point-border: #5B6573;
    --zen-point-light-bg: #F3F4F6;
    --zen-point-light-bg-2: #E5E7EB;
    --zen-point-accent: #9CA3AF;
    --zen-point-accent-light: #B7BDC7;
    --zen-point-accent-dark: #7B838F;
    --zen-point-soft: #AEB4BE;
    --zen-point-soft-rgb: 174,180,190;
    --zen-point-grid-bg: #9CA3AF;
    --zen-point-grid-sel: #7B838F;

    --zen-point-bg: linear-gradient(#8B93A1, #6B7280, #7A8291);
    --zen-point-bg-hover: linear-gradient(#A6ADB8, #8B93A1, #959CA8);
    --zen-point-bar-bg: linear-gradient(#8B93A1, #6B7280);
    --zen-point-bar-bg-active: linear-gradient(#5B6573, #3F4855);
    --zen-point-bar-bg-hover: linear-gradient(#A6ADB8, #8B93A1);
    --zen-point-label-bg: linear-gradient(#E5E7EB, #D1D5DB);

    --zen-point-alt: #7A8291;
    --zen-point-alt-text: #E5E7EB;
    --zen-point-alt-light: #F3F4F6;
    --zen-point-alt-dark: #374151;
    --zen-point-alt-accent: #9CA3AF;
    --zen-point-bar-bg-active-2: linear-gradient(#5B6573, #3F4855);
    --zen-point-bar-bg-hover-2: linear-gradient(#A6ADB8, #8B93A1);

    --zen-point-login-card: #5B6573;
    --zen-point-login-card-image: url(/images/MGR000010/login_card_texture.png);
    --zen-point-fg: var(--zen-point);   /* 밝은 면 위 포인트색 글자 — 다크 서피스에서는 E블록이 accent 로 덮음 (2026-10-16 by eric) */
    --zen-point-bar-bg-disable: linear-gradient(#A0A5AD, #959AA3);
    --zen-point-bar-text-disable: #C9CCD1;
    --zen-point-toast-info: #7A8291;
}

/* dark — 기준색 #313D4D(슬레이트) + 그라데이션 (2026-10-12 6차). black 과 같은 팔레트의 그라데이션 변형 */
html[data-theme="dark"] {
    --zen-point: #313D4D;
    --zen-point-rgb: 49,61,77;
    --zen-point-hover: #46546A;
    --zen-point-text: #D5DCE5;
    --zen-point-dark: #273140;
    --zen-point-darker: #1F2733;
    --zen-point-darkest: #171D26;
    --zen-point-border: #3B4859;
    --zen-point-light-bg: #E6EAF0;
    --zen-point-light-bg-2: #D9DFE7;
    --zen-point-accent: #8FA3BA;
    --zen-point-accent-light: #A9BACD;
    --zen-point-accent-dark: #6F86A0;
    --zen-point-soft: #7C8EA3;
    --zen-point-soft-rgb: 124,142,163;
    --zen-point-grid-bg: #8FA3BA;
    --zen-point-grid-sel: #6F86A0;

    --zen-point-bg: linear-gradient(#46546A, #313D4D, #3A4759);
    --zen-point-bg-hover: linear-gradient(#5B6A80, #46546A, #4F5E74);
    --zen-point-bar-bg: linear-gradient(#46546A, #313D4D);
    --zen-point-bar-bg-active: linear-gradient(#273140, #1F2733);
    --zen-point-bar-bg-hover: linear-gradient(#5B6A80, #46546A);
    --zen-point-label-bg: linear-gradient(#D5DCE5, #BFC9D6);

    --zen-point-alt: #46546A;
    --zen-point-alt-text: #D5DCE5;
    --zen-point-alt-light: #E6EAF0;
    --zen-point-alt-dark: #273140;
    --zen-point-alt-accent: #8FA3BA;
    --zen-point-bar-bg-active-2: linear-gradient(#273140, #1F2733);
    --zen-point-bar-bg-hover-2: linear-gradient(#5B6A80, #46546A);

    --zen-point-login-card: #6F86A0;
    --zen-point-login-card-image: url(/images/MGR000010/login_card_texture.png);
    --zen-point-fg: var(--zen-point);   /* 밝은 면 위 포인트색 글자 — 다크 서피스에서는 E블록이 accent 로 덮음 (2026-10-16 by eric) */
    --zen-point-bar-bg-disable: linear-gradient(#55606F, #4A5462);
    --zen-point-bar-text-disable: #8794A5;
    --zen-point-toast-info: #46546A;
}

/* ===== 로그인·회사선택 카드 — dark·black 보정 (레이아웃) 2026-10-15 by eric =====
   팔레트 블록의 카드색(#6F86A0)은 밝은 배경 기준이라 어두운 테마에서 튄다 → 카드를 패널 톤으로 낮추고
   밝은 발광 그림자·입력 아이콘 박스·입력란 테두리를 어둡게 맞춘다.
   메뉴 내부 다크모드(아래 E 다크 서피스)와 독립 — 팔레트 토큰만 참조하므로 이 절만으로 동작
   카드색은 흰 페이지(theme=light)·어두운 페이지(theme=dark) 공용 중간 톤 — #2A313B 는 흰 페이지에서 너무 어둡고
   #6F86A0 은 어두운 페이지에서 튀어서 #56677D (흰 글자 대비 5.8, 어두운 배경 대비 2.8) (2026-10-16 by eric) */
@media screen {
html[data-theme="dark"], html[data-theme="black"] {
    --zen-point-login-card: #56677D;
}
/* 밝은 발광(--zen-point-alt-accent) 대신 어두운 그림자. 회사선택 등은 inline style 이라 !important */
html[data-theme="dark"] .zen-card-login, html[data-theme="black"] .zen-card-login,
html[data-theme="dark"] .card[style*="box-shadow"], html[data-theme="black"] .card[style*="box-shadow"] {
    box-shadow: 0 0 12px rgba(0, 0, 0, .55) !important;
}
/* 카드 안 입력 아이콘 박스·입력란 테두리 — 밝은 사각형·밝은 테두리가 도드라지지 않게 (로그인 계열 카드 안으로 한정) */
html[data-theme="dark"] .card .input-group-prepend span, html[data-theme="black"] .card .input-group-prepend span {
    background-color: var(--zen-point-border);
}
html[data-theme="dark"] .card .form-control, html[data-theme="black"] .card .form-control {
    border-color: var(--zen-point-border);
}
}

/* ===== E. 다크 서피스 (메뉴 내부 다크모드) — 배경·패널·입력·테두리·글자·그리드를 어둡게. 2026-10-15 by eric =====
   - application.service.theme=dark → <html data-surface="dark"> (HttpInterceptor → applicationServiceSurface)
     레이아웃 포인트 컬러(application.service.zen.color → data-theme)와 독립이라 어느 포인트 컬러와도 조합된다
   - :root·light 에는 정의하지 않는다 → light(기본)는 var() fallback(원래 밝은 색) 그대로
   - --zen-surface: dark 가 JS 판단 기준(zen.theme.isDarkSurface → 그리드 색 자동 변환·jQuery cssHooks 설치)
   - @media screen: 인쇄는 밝게 유지
   - 값은 제안값(슬레이트 214°). 헤더(--zen-point-dark #273140)와 탭 스트립이 붙어 보이지 않게 조정할 것 */
@media screen {
html[data-surface="dark"] {
    --zen-surface: dark;
    color-scheme: dark;

    --zen-bg-page: #1B2028;             /* body, 메인 iframe holder */
    --zen-bg: #232A33;                  /* 팝업 내용, 코드도움말 등 기본 면 (#ffffff) */
    --zen-bg-panel: #2A313B;            /* 검색조건·탭 스트립·서브메뉴·form container (#F1F1F1·#F7F7F7) */
    --zen-bg-input: #1F252E;            /* 입력·조건 버튼 (#ffffff) */
    --zen-bg-readonly: #262C35;         /* 읽기전용·disabled (#FAFAFA) */
    --zen-bg-hover: #343C48;            /* hover (#f6f6f6·#efefef·#e0e0e0) */
    --zen-border: #3E4755;              /* #cccccc */
    --zen-border-light: #353D4A;        /* #e1e1e1·#efefef */
    --zen-border-strong: #4A5463;       /* #b1b1b1 */
    --zen-text: #D5DCE5;                /* #444·#212529·#000 */
    --zen-text-muted: #8D98A8;          /* #7C7C7C·#777·#a1a1a1 */
    --zen-text-placeholder: #5E6878;    /* placeholder #E1E1E1 */
    --zen-scrollbar: #4A5463;           /* #a9a9a9·#c0c0c0 */
    --zen-scrollbar-hover: #5D6878;     /* #A0A0A0·#808080 */

    /* RealGrid(canvas) 변환 앵커 — zen.theme.toDark 가 읽는다 */
    --zen-grid-bg: #283039;             /* #ffffffff (편집 가능 셀·기본) */
    --zen-grid-bg-readonly: #20262E;    /* #fffafafa·#fff7f7f7·#fff5f5f5 (읽기전용 셀) */
    --zen-grid-header-bg: #2E3540;      /* #fff1f1f1 (헤더) */
    --zen-grid-fg: #D5DCE5;             /* #ff000000·#ff111111 (글자) */
    --zen-grid-line: #3A4250;           /* #ffe1e1e1·#ffcccccc (선) */

    /* 즐겨찾기(탭의 마이메뉴 별) 활성 — 슬레이트 accent 는 비활성 회색 별과 구분되지 않아 금색 (4차) */
    --zen-favorite: #F2C14E;
    /* CKEditor 본문(매뉴얼·게시판·메일 등 '종이' 영역) 글자 — 배경은 CKEditor 기본 흰색 유지, 글자만 zen 본문색 (5차) */
    --zen-paper-text: #212529;
    /* 팝업 프레임 — 원래 테두리(--zen-point·--zen-point-darkest)가 어두운 면과 비슷한 톤이라 팝업 경계가 묻힘.
       팔레트 accent 를 따름(dark·black #8FA3BA, zen #00A0E9). 다른 색이 필요하면 이 값만 바꾼다 (2026-10-16 by eric) */
    --zen-popup-border: var(--zen-point-accent);
    --zen-popup-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 8px 28px rgba(0, 0, 0, .6);   /* 바깥 어두운 테 + 깊은 그림자 */
    /* 포인트색 글자 — 진한 포인트(dark·black #313D4D)는 어두운 면에서 안 보여 accent 로 (메뉴 CSS color: var(--zen-point-fg, 원값)) (2026-10-16 by eric) */
    --zen-point-fg: var(--zen-point-accent);

    /* 밝은 포인트 토큰 → 어두운 틴트 (선택·hover 배경) */
    --zen-point-light-bg: #34425A;
    --zen-point-light-bg-2: #2E3A4F;
    --zen-point-alt-light: #2C3746;
}

/* 보강 규칙 — 우리 CSS 에 선언이 없어 번들/브라우저 기본값(흰색)에 의존하던 곳 */
html[data-surface="dark"] body {
    background-color: var(--zen-bg-page);
    color: var(--zen-text);
}
/* 특이도 (0,1,2): 번들 .form-control 류(0,1,0)는 이기고, 우리 :read-only 규칙(0,2,0)에는 진다 */
html[data-surface="dark"] input:where(:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=image], [type=range], [type=color], [type=file])),
html[data-surface="dark"] select,
html[data-surface="dark"] textarea {
    background-color: var(--zen-bg-input);
    color: var(--zen-text);
}
html[data-surface="dark"] .ui-widget-content {
    background: var(--zen-bg);
    color: var(--zen-text);
    border-color: var(--zen-border);
}
/* 메뉴 안 탭 버튼(사원별/일자별 등) 비활성 글자 — 부트스트랩 .btn 기본 글자색(#212529)이 어두운 면에 묻힘 */
html[data-surface="dark"] .zen-tabbar-item:not(.active) {
    color: var(--zen-text);
}
/* 검색조건 불릿 — 기준 포인트(#313D4D)가 어두운 패널에 묻혀 accent 로 */
html[data-surface="dark"] .zen-menu-search-condition-cell:before {
    background: var(--zen-point-accent);
}
/* 검색조건 돋보기·달력·기간(~) 버튼 아이콘 — 원본 SVG(btn_search·btn_tilde)가 #444 고정이라 어두운 입력 배경(#1F252E)에 묻힘(대비 약 1.5:1).
   같은 모양의 밝은 아이콘(#B8C2CF, 8.5:1)으로. hover·disabled 는 배경색만 바뀌므로 그대로 (2026-10-16 by eric) */
html[data-surface="dark"] .zen-form-btn-search,
html[data-surface="dark"] .zen-condition-btn-search,
html[data-surface="dark"] .ui-datepicker-trigger,
html[data-surface="dark"] .zen-form-btn-asset-image-search,
html[data-surface="dark"] .zen-form-btn-employee-image-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23B8C2CF' d='M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z'/%3E%3C/svg%3E");
}
html[data-surface="dark"] .zen-input-type-date-from-to {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23B8C2CF' d='M416 168v71.85c0 35.91-23.16 69.16-58.01 77.84-31.8 7.91-64.07-4.93-81.96-30.74L200.75 178.4c-21.13-30.46-55.42-50.58-92.49-50.38C48.5 128.32 0 177.02 0 236.84V312c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-71.85c0-35.91 23.16-69.16 58.01-77.84 31.8-7.91 64.07 4.93 81.96 30.74l75.28 108.55c21.13 30.46 55.42 50.58 92.49 50.38 59.76-.3 108.26-49 108.26-108.82V168c0-4.42-3.58-8-8-8h-16c-4.42 0-8 3.58-8 8z'/%3E%3C/svg%3E");
}
/* RealGrid 캔버스 — RealGrid 가 그리드 캔버스에 inline background:#fff 를 넣어(realgridjs_eval 6823행) 첫 그리기 전·크기 변경 직후(캔버스가 비워짐)
   흰 사각형이 보임(ACC000600 등 메뉴를 열거나 탭을 새로고침할 때 그리드 영역 흰 깜빡임). 다크에서는 그리드 바탕색으로, inline 이라 !important (2026-10-18 by eric) */
html[data-surface="dark"] canvas[role="application"] {
    background: var(--zen-grid-bg-readonly) !important;
}

/* 번들 CSS(jQuery UI Layout·jQuery UI·jqx·bootstrap·contextMenu) 기본값 중 흰 배경·어두운 글자 — 2026-10-15 2차 by eric
   :where() 로 테마 선택자 특이도를 0 으로 해서 번들 규칙과 같은 특이도 + 뒤 순서로 이긴다(우리 CSS 의 더 구체적인 규칙에는 진다)
   목록은 하네스 탐침(후보 클래스의 계산된 배경색 측정)으로 확인한 것 */
:where(html[data-surface="dark"]) .ui-layout-pane {
    background: var(--zen-bg-page);       /* 분할 영역 흰 배경 — 사원정보등록 탭 줄 흰 띠, 서브메뉴 뒤 흰 면 */
    border-color: var(--zen-border);
}
:where(html[data-surface="dark"]) .ui-widget-header {
    background: var(--zen-bg-panel);
    color: var(--zen-text);
    border-color: var(--zen-border);
}
:where(html[data-surface="dark"]) .ui-state-default,
:where(html[data-surface="dark"]) .jqx-widget,
:where(html[data-surface="dark"]) .btn,
:where(html[data-surface="dark"]) .table,
:where(html[data-surface="dark"]) .dropdown-item {
    color: var(--zen-text);
}
:where(html[data-surface="dark"]) .jqx-widget-content,
:where(html[data-surface="dark"]) .card,
:where(html[data-surface="dark"]) .modal-content,
:where(html[data-surface="dark"]) .dropdown-menu,
:where(html[data-surface="dark"]) .list-group-item,
:where(html[data-surface="dark"]) .popover,
:where(html[data-surface="dark"]) .page-link,
:where(html[data-surface="dark"]) .context-menu-list,
:where(html[data-surface="dark"]) .context-menu-item {
    background-color: var(--zen-bg);
    color: var(--zen-text);
    border-color: var(--zen-border);
}
:where(html[data-surface="dark"]) .btn-light,
:where(html[data-surface="dark"]) .input-group-text,
:where(html[data-surface="dark"]) .custom-select {
    background-color: var(--zen-bg-panel);
    color: var(--zen-text);
    border-color: var(--zen-border);
}
:where(html[data-surface="dark"]) .dropdown-item:hover {
    background-color: var(--zen-bg-hover);
}
/* jqx 위젯 hover — styles.css 의 밝은 하늘색(#99d9f6) */
html[data-surface="dark"] .jqx-fill-state-hover-light {
    background: var(--zen-point-alt-light);
    border-color: var(--zen-border);
}
/* bootstrap-toggle '부/아니오' 쪽 — styles.css 의 밝은 하늘색(#b1daf5)을 어두운 면으로 (선택자는 styles.css 와 같은 특이도 + 테마 속성) */
html[data-surface="dark"] .toggle-off,
html[data-surface="dark"] .zen-menu-biz-btn-container .toggle-off {
    background: var(--zen-bg-hover);
    color: var(--zen-text-muted);
}
html[data-surface="dark"] .toggle-off:hover,
html[data-surface="dark"] .zen-menu-biz-btn-container .toggle-off:hover {
    background: var(--zen-border-strong);
    color: var(--zen-text);
}
/* 공통 팝업(서버 통신 체크·알림·확인·오류 등) 메시지는 <pre> — 부트스트랩 pre 의 어두운 글자색(#212529)을 팝업 본문 색으로 (4차) */
:where(html[data-surface="dark"]) pre {
    color: inherit;
}
:where(html[data-surface="dark"]) caption {
    color: var(--zen-text-muted);   /* 부트스트랩 #6c757d — 어두운 면에서 대비 부족 */
}
/* 부트스트랩 .text-muted(#6c757d !important) — 어두운 면에서 대비 부족 (4차) */
html[data-surface="dark"] .text-muted {
    color: var(--zen-text-muted) !important;
}
/* CKEditor 본문은 밝은 종이로 둔다(작성 문서의 인라인 색·캡처 이미지 보존). 색 없는 제목·본문이 body 의 밝은 글자를 물려받지 않게 (5차) */
html[data-surface="dark"] .ck-content,
html[data-surface="dark"] .ck-editor__editable {
    color: var(--zen-paper-text);
}
/* 탭의 즐겨찾기 별 — 활성은 금색으로 비활성(muted)과 구분 (4차) */
html[data-surface="dark"] .zen-btn-main-tabbar-item-mymenu.active {
    color: var(--zen-favorite);
}
/* 팝업 프레임 — 테두리 색·그림자만 바꾼다(두께·스타일은 원래 규칙). 특이도 (0,2,1)로 뒤에 로드되는 MGR000020*.css 의 (0,1,0) 규칙도 이긴다 (2026-10-16 by eric) */
html[data-surface="dark"] .popup-window-container,
html[data-surface="dark"] .radio-selection-window-container,
html[data-surface="dark"] .prompt-window-container,
html[data-surface="dark"] .passwd-window-container,
html[data-surface="dark"] .initCode-window-container,
html[data-surface="dark"] .alert-window-container,
html[data-surface="dark"] .confirm-window-container,
html[data-surface="dark"] .radio-window-container,
html[data-surface="dark"] .post-window-container,
html[data-surface="dark"] .manual-window-container,
html[data-surface="dark"] .error-window-container,
html[data-surface="dark"] .lock-window-container,
html[data-surface="dark"] .finder-window,
html[data-surface="dark"] .notification-center-window,
html[data-surface="dark"] .rg-popup-menu {
    border-color: var(--zen-popup-border);
    box-shadow: var(--zen-popup-shadow);
}
}