@charset "utf-8";

/* ===========================================================================
 * 다크모드 토큰 (docs/DARKMODE_DESIGN.md) — 단일 진실원본.
 * :root = 라이트, html[data-theme="dark"] = 다크 재정의. JS 주입 CSS(mw_help/
 * dialog/layout/window/util-tabs/calendar)도 var() 로 이 토큰을 cascade 추종한다.
 * 상태색(danger/success/info/warning)은 다크에서 밝은 톤(어두운 배경 대비), 의미 유지.
 * ========================================================================= */
:root {
    color-scheme: light;   /* UA 캔버스/폼컨트롤/스크롤바를 라이트로(기본값 명시) */
    --mw-bg: #f1f5f9;
    --mw-surface: #ffffff;
    --mw-surface-2: #f8fafc;
    --mw-surface-muted: #f1f5f9;
    --mw-text: #1e293b;
    --mw-text-body: #475569;
    --mw-text-muted: #64748b;
    --mw-border: #e5e9f0;
    --mw-border-strong: #cbd5e1;
    --mw-brand: #4f46e5;
    --mw-brand-2: #6366f1;
    --mw-brand-strong: #4338ca;
    --mw-brand-grad-a: #4f46e5;
    --mw-brand-grad-b: #6d28d9;
    --mw-brand-soft: #eef2ff;
    --mw-brand-soft-border: #c7d2fe;
    --mw-focus-ring: rgba(79,70,229,.30);
    --mw-danger: #dc2626;
    --mw-success: #10b981;
    --mw-info: #2563eb;
    --mw-warning: #f59e0b;
    --mw-diff-add: #ecfdf5;
    --mw-diff-del: #fef2f2;
    --mw-shadow: rgba(15,23,42,.10);
    --mw-shadow-strong: rgba(15,23,42,.30);
    --mw-overlay: rgba(15,23,42,.45);
    --mw-scrollbar: #cbd5e1;
    --mw-scrollbar-hover: #64748b;
    --mw-grid-hover: #f8fafc;          /* 그리드 행 hover (다크에서 재정의) */
    --mw-btn-hover: #e0e7ff;           /* 버튼 hover 면 */
    --mw-banner-grad-b: #f5f3ff;       /* 헤더 배너 그라데 종점 */
}
html[data-theme="dark"] {
    color-scheme: dark;    /* ⭐ UA 캔버스(문서 로드/ iframe 교체 공백의 기본 배경)·폼컨트롤·스크롤바를 다크로.
                              background CSS 로는 못 덮는 UA 페인트라, 이게 빠지면 문서 골격 페인트 이전·
                              iframe src 교체 공백에서 브라우저가 흰 캔버스를 칠해 번쩍였다(잔여 원인). */
    --mw-bg: #0f172a;
    --mw-surface: #1e293b;
    --mw-surface-2: #243349;
    --mw-surface-muted: #334155;
    --mw-text: #e2e8f0;
    --mw-text-body: #cbd5e1;
    --mw-text-muted: #94a3b8;
    --mw-border: #334155;
    --mw-border-strong: #475569;
    --mw-brand: #818cf8;
    --mw-brand-2: #818cf8;
    --mw-brand-strong: #a5b4fc;
    --mw-brand-grad-a: #6d28d9;
    --mw-brand-grad-b: #4f46e5;
    --mw-brand-soft: #312e81;
    --mw-brand-soft-border: #4338ca;
    --mw-focus-ring: rgba(129,140,248,.45);
    --mw-danger: #f87171;
    --mw-success: #34d399;
    --mw-info: #60a5fa;
    --mw-warning: #fbbf24;
    --mw-diff-add: rgba(52,211,153,.14);
    --mw-diff-del: rgba(248,113,113,.14);
    --mw-shadow: rgba(0,0,0,.45);
    --mw-shadow-strong: rgba(0,0,0,.6);
    --mw-overlay: rgba(0,0,0,.62);
    --mw-scrollbar: #475569;
    --mw-scrollbar-hover: #94a3b8;
    --mw-grid-hover: #2a3950;          /* 그리드 행 hover — 선택(인디고)과 구분되는 틴트 */
    --mw-btn-hover: #3730a3;           /* 버튼 hover 면(다크) */
    --mw-banner-grad-b: #1e293b;       /* 헤더 배너 그라데 종점(다크) */
}

html {
    .overflow: scroll;
    .overflow-x: auto;
}

html, body {
    margin: 0px;
    padding: 0px;
    font-family: "굴림", "Verdana", "Arial";
    font-size: 9pt;
}

body {
    font-size: 9pt;
    font-family: "굴림", "Verdana", "Arial";
    -webkit-text-size-adjust: none;
}

textarea {
    font-family: "굴림", "Verdana", "Arial";
    font-size: 9pt;
    color: #333333;
    text-decoration: none;
}

table {
    /* border-collapse: collapse;
    border-spacing: 0px; */
}

.hyperlink {
    font-family: "돋움", "Verdana", "Arial";
    font-size: 9pt;
    height: 10px;
    line-height: 15px;
    color: #333333;
    border-collapse: collapse;
    border-color: #cbd5e1;
    text-decoration: none;
}

.grid_column_name {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: "돋움", "Verdana", "Arial";
    font-size: 11px;
    height: 10px;
    line-height: 20px;
    color: #333333;
    border-collapse: collapse;
    border-color: #cbd5e1;
    text-decoration: none;
}

.grid_column_select_button_name {
    margin: 0px 0px 0px 0px;
    padding: 0px 3px;
    font-family: "돋움", "Verdana", "Arial";
    font-size: 11px;
    color: #333333;
    border-collapse: collapse;
    border-color: #cbd5e1;
    text-decoration: none;
}

.grid_column_data {
    margin: 0px;
    padding: 0px;
    font-family: "MS Reference Sans Serif";
    font-size: 8pt;
    height: 10px;
    line-height: 15px;
    color: #333333;
    border-collapse: collapse;
    border-color: #cbd5e1;
    text-decoration: none
}

.grid_column_numeric_data {
    margin: 0px;
    padding: 0px;
    font-family: "MS Reference Sans Serif";
    font-size: 8pt;
    height: 10px;
    line-height: 15px;
    color: #333333;
    border-collapse: collapse;
    border-color: #cbd5e1;
    text-decoration: none;
}

.font_basic {
    font-family: "돋움", "Verdana", "Arial";
    font-size: 9pt;
    line-height: 16px;
    color: #333333;
    border-collapse: collapse;
    border-color: #cbd5e1;
    text-decoration: none;
}

.font_basic_8pt {
    font-family: "돋움", "Verdana", "Arial";
    font-size: 8pt;
    line-height: 16px;
    color: #333333;
    border-collapse: collapse;
    border-color: #cbd5e1;
    text-decoration: none;
}

/* ===== 2026 통일 폼 컴포넌트 (버튼·입력·드롭박스) ===== */
/* 전역 버튼 통일(2026-06-12 다크 감수): 그레이(#f3f4f6) → brand-soft 배색(감사로그 원형)으로
   라이트/다크 모두 토큰화 + 은은한 베벨(입체감 일관성). 컴포넌트 버튼(mw-btn 계열,
   mw-login-btn, mw-theme-toggle, mw-ctab-btn)은 자체 스타일이 동일 계층에서 덮는다.
   [주의] CSS 주석 안에 별표+슬래시 문자열을 쓰면 주석이 조기 종료되어 다음 룰이 파서에서
   통째로 드롭된다(실제 발생 — 버튼 base 룰 소실). 클래스 글롭 표기 금지. */
.input_button,
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
    font-family: "맑은 고딕", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    font-size: 8.5pt;
    font-weight: 600;
    min-height: 24px;
    padding: 3px 12px;
    color: var(--mw-brand-strong, #4338ca);
    background: var(--mw-brand-soft, #eef2ff);
    border: 1px solid var(--mw-brand-soft-border, #c7d2fe);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.55);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
    letter-spacing: 0;
    box-sizing: border-box;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.input_button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
    background: var(--mw-btn-hover, #e0e7ff);
    border-color: var(--mw-brand-2, #6366F1);
    color: var(--mw-brand-strong, #4338ca);
}
.input_button:active,
input[type="button"]:active,
input[type="submit"]:active,
button:active { background: #c7d2fe; transform: translateY(1px); box-shadow: 0 0 1px rgba(15,23,42,.15); }
.input_button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
button:disabled { opacity: .55; cursor: default; }
/* 다크: 토큰 + 다크 톤 베벨(흰 인셋 대신 미광).
   :not([class*="mw-"]) — 컴포넌트 버튼(mw-btn/mw-login-btn/mw-theme-toggle/mw-ctab 등)은
   자체 스타일 유지(다크 접두 룰의 specificity 가 컴포넌트 룰을 이기는 것을 차단). */
html[data-theme="dark"] .input_button,
html[data-theme="dark"] input[type="button"]:not([class*="mw-"]),
html[data-theme="dark"] input[type="submit"]:not([class*="mw-"]),
html[data-theme="dark"] input[type="reset"]:not([class*="mw-"]),
html[data-theme="dark"] button:not([class*="mw-"]) {
    box-shadow: 0 1px 2px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.06);
    /* 테두리는 회색 계통으로 주변(표/카드 보더)과 조화 — 사용자 검수 의견(2026-06-12).
       !important: tpl 로컬 .input_button(brand-soft-border !important)보다 우선해야 함. */
    border-color: var(--mw-border-strong) !important;
}
html[data-theme="dark"] .input_button:hover,
html[data-theme="dark"] input[type="button"]:not([class*="mw-"]):hover,
html[data-theme="dark"] input[type="submit"]:not([class*="mw-"]):hover,
html[data-theme="dark"] button:not([class*="mw-"]):hover { background: var(--mw-btn-hover); border-color: var(--mw-brand); color: #c7d2fe; }
html[data-theme="dark"] .input_button:active,
html[data-theme="dark"] input[type="button"]:not([class*="mw-"]):active,
html[data-theme="dark"] button:not([class*="mw-"]):active { background: #312e81; }

/* 통일 버튼(전역): 주동작=primary(인디고 그라데), 보조=ghost(화이트 아웃라인), 위험=danger(레드).
   기존 화면들이 인라인/스코프로 중복 정의하던 것을 전역화 — 신규/교체 버튼은 이 클래스를 쓴다. */
.mw-btn,
.mw-btn-primary,
.mw-btn-ghost,
.mw-btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 13px; font-weight: 700;
    border-radius: 9px; padding: 8px 16px; cursor: pointer; border: 1px solid transparent;
    line-height: 1.2; box-sizing: border-box; text-decoration: none;
    transition: filter .15s, box-shadow .15s, background .15s;
}
.mw-btn-primary { background: linear-gradient(135deg,#4f46e5,#6d28d9); color: #fff; border: 0; box-shadow: 0 4px 12px rgba(79,70,229,.28); }
.mw-btn-primary:hover { filter: brightness(1.05); }
.mw-btn-primary:active { transform: translateY(1px); }
.mw-btn-ghost { background: #fff; color: #475569; border: 1px solid #cbd5e1; }
.mw-btn-ghost:hover { background: #f8fafc; border-color: #6366F1; color: #4338ca; }
.mw-btn-danger { background: #fff; color: #dc2626; border: 1px solid #fecaca; }
.mw-btn-danger:hover { background: #fef2f2; }
.mw-btn svg, .mw-btn-primary svg, .mw-btn-ghost svg, .mw-btn-danger svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .mw-btn, .mw-btn-primary, .mw-btn-ghost, .mw-btn-danger { transition: none; } }

.input_text,
input[type="text"],
input[type="password"],
textarea {
    font-family: "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 9pt;
    min-height: 24px;
    padding: 3px 8px;
    color: #1f2937;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

/* 네이티브 체크박스/라디오 — 앱 전역 인디고 테마로 통일(2026) */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #4f46e5;
    width: 15px;
    height: 15px;
    vertical-align: -3px;
    margin: 0 4px 0 2px;
    cursor: pointer;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

select,
.select_button {
    font-family: "맑은 고딕", "Malgun Gothic", sans-serif;
    font-size: 9pt;
    min-height: 24px;
    margin: 2px 0;
    padding: 3px 26px 3px 8px;
    color: #1f2937;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.input_text:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.select_button:focus {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}


.basic_text {
    font-family: "굴림", "Verdana", "Arial";
    font-size: 9pt;
    color: #333333;
    border-collapse: collapse;
    border-color: #cbd5e1;
    text-decoration: none;
}


.basic_text_8pt {
    font-family: "굴림", "Verdana", "Arial";
    font-size: 8pt;
    color: #333333;
    border-collapse: collapse;
    border-color: #cbd5e1;
    text-decoration: none;
}



/* 테이블 관련 */

.table_border {
    font-family: "굴림", "Verdana", "Arial";
    font-size: 9pt;
    color: #333333;
    border: 1px solid #cbd5e1;
    border-collapse: collapse;
    border-color: #cbd5e1;
    text-decoration: none;
}


.tbl_main, .tbl_row, .tbl_data {
    font-family: "돋움", "굴림", "Verdana", "Arial";
    font-size: 9pt;
    line-height: 16px;
    color: #333333;
    border: 1px solid #cbd5e1;
    border-collapse: collapse;
    border-color: #cbd5e1;
    text-decoration: none;
}

.tbl_col_header {
    font-family: "돋움", "굴림", "Verdana", "Arial";
    font-size: 9pt;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 7px;
    padding-bottom: 5px;
    color: #666666;
    border: 1px solid #cccccc;
    border-color: #cbd5e1;
    border-collapse: collapse;
}

.tbl_col_name {
    font-family: "돋움", "굴림", "Verdana", "Arial";
    font-size: 9pt;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 7px;
    padding-bottom: 5px;
    color: #303030;
    border: 1px solid #cccccc;
    border-collapse: collapse;
}

.tbl_col_data {
    font-family: "돋움", "굴림", "Verdana", "Arial";
    font-size: 9pt;
    padding-left: 5px;
    padding-right: 4px;
    padding-top: 3px;
    padding-bottom: 2px;
    color: #666666;
    border: 1px solid #cccccc;
    border-collapse: collapse;
}

.tbl_col_data_without_border {
    font-family: "돋움", "굴림", "Verdana", "Arial";
    font-size: 9pt;
    padding-left: 5px;
    padding-right: 4px;
    padding-top: 3px;
    padding-bottom: 2px;
    color: #666666;
    border-collapse: collapse;
}

.tbl_normal, .link_normal {
    font-family: "돋움", "굴림", "Verdana", "Arial";
    font-size: 9pt;
    padding-left: 5px;
    padding-right: 4px;
    padding-top: 3px;
    padding-bottom: 2px;
    color: #666666;
    border-collapse: collapse;
    text-decoration: none;
}


/* 페이징 관련 */

.paging_item {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    display: block;
    position: relative;
    clear: both;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
}

.paging_item a, .paging_item strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 26px;
    height: 24px;
    line-height: 1;
    margin: 0 2px;
    padding: 0 7px;
    box-sizing: border-box;
    font-family: "맑은 고딕", "Malgun Gothic", "Verdana", sans-serif;
    font-size: 8.5pt;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 0px;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.paging_item strong {
    color: #ffffff;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    border: 1px solid #6366F1;
}

.paging_item a:hover {
    background: #eef2ff;
    border-color: #6366F1;
    color: #4338ca;
}
.paging_item .paging_cur_item {
    color: #ffffff;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    border-color: #6366F1;
}

.paging_item .prev_item, .paging_item .next_item, .paging_item .top_item, .paging_item .bottom_item {
    color: #475569;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
}
.paging_item .prev_item:hover, .paging_item .next_item:hover, .paging_item .top_item:hover, .paging_item .bottom_item:hover {
    background: #eef2ff;
    border-color: #6366F1;
    color: #4338ca;
}

/* ===== 2026 dhtmlx 그리드 헤더 모던화 (배경/텍스트만 — 정렬·리사이즈 등 레이아웃 불변) ===== */
.gridbox_dhx_skyblue .xhdr {
    background-image: none !important;
    background-color: #f1f5f9 !important;
}
.gridbox_dhx_skyblue .xhdr table td,
.gridbox_dhx_skyblue .xhdr td {
    background-image: none !important;
    background-color: transparent !important;
    border-right: 1px solid #e2e8f0;
}
.gridbox_dhx_skyblue .hdrcell {
    color: #334155 !important;
    font-weight: 600 !important;
}

/* dhtmlx 그리드 행: 선택 하이라이트(크림→모던 인디고) + 옅은 짝수행 줄무늬 (배경색만) */
.gridbox_dhx_skyblue .ev_dhx_skyblue td {
    background-color: #f8fafc;
}
/* 그리드 타이포 정합: 구 dhtmlxgrid 기본 Tahoma → Malgun(디자인시스템 명세, 크기 불변) */
.gridbox table.obj td, .gridbox table.hdr td, .gridbox .hdrcell {
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif !important;
}
/* 그리드 체크박스 비트맵(item_chk*, 11px) → 인디고 SVG 13px (content 치환 — 클릭 핸들러·
   상태 전환(JS 가 src 를 chk0↔chk1 로 교체) 그대로, 외형만 교체. _dis 변형은 회색 톤. */
.gridbox img[src$="item_chk0.gif"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24'><rect x='2.5' y='2.5' width='19' height='19' rx='5' fill='white' stroke='%2394a3b8' stroke-width='2.2'/></svg>");
}
.gridbox img[src$="item_chk1.gif"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24'><rect x='2.5' y='2.5' width='19' height='19' rx='5' fill='%234f46e5' stroke='%234f46e5' stroke-width='2.2'/><polyline points='7.5 12.5 10.5 15.5 16.5 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.gridbox img[src$="item_chk0_dis.gif"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24'><rect x='2.5' y='2.5' width='19' height='19' rx='5' fill='%23f1f5f9' stroke='%23cbd5e1' stroke-width='2.2'/></svg>");
}
.gridbox img[src$="item_chk1_dis.gif"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24'><rect x='2.5' y='2.5' width='19' height='19' rx='5' fill='%23cbd5e1' stroke='%23cbd5e1' stroke-width='2.2'/><polyline points='7.5 12.5 10.5 15.5 16.5 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* 그리드 정렬 화살표 비트맵 → 슬레이트 셰브론 SVG */
.gridbox img[src$="sort_asc.gif"], .gridbox img[src$="dyn_up.gif"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>");
}
.gridbox img[src$="sort_desc.gif"], .gridbox img[src$="dyn_down.gif"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
/* 구 skyblue 블루 톤 잔재 정합(2026-06-10): 홀수행 파랑(#E3EFFF)→흰색(슬레이트 교차 줄무늬만 남김),
   헤더 셀 경계선(#A4BED4 블루그레이)→연슬레이트. */
.gridbox_dhx_skyblue .odd_dhx_skyblue,
.gridbox_dhx_skyblue .odd_dhx_skyblue td {
    background-color: #ffffff !important;
}
.gridbox_dhx_skyblue table.hdr td {
    border-color: #e5e9f0 !important;
}
.gridbox_dhx_skyblue tr.rowselected td,
.gridbox_dhx_skyblue .rowselected td,
.gridbox_dhx_skyblue td.cellselected {
    background-image: none !important;
    background-color: #4f46e5 !important;   /* 선택: 인디고(앱 주색과 통일) */
    color: #ffffff !important;              /* 선택: 흰색 글자 */
}
.gridbox_dhx_skyblue tr.rowselected td a,
.gridbox_dhx_skyblue .rowselected td a,
.gridbox_dhx_skyblue td.cellselected a {
    color: #ffffff !important;             /* 선택 행 내부 링크도 흰색 */
}
/* 선택 행: 셀 내부 텍스트가 <font color="#333">/<b>/<i> 등으로 자체 색을 가지면
   td 의 흰색이 덮여 인디고 배경에서 글자가 검게 보인다(키워드/IP 필터의 조건 강조 렌더).
   자손 텍스트 요소를 흰색으로 정규화한다(CSS 가 HTML color 속성·기존 색을 이김). */
.gridbox_dhx_skyblue tr.rowselected td font,
.gridbox_dhx_skyblue .rowselected td font,
.gridbox_dhx_skyblue td.cellselected font,
.gridbox_dhx_skyblue tr.rowselected td b,
.gridbox_dhx_skyblue .rowselected td b,
.gridbox_dhx_skyblue td.cellselected b,
.gridbox_dhx_skyblue tr.rowselected td i,
.gridbox_dhx_skyblue .rowselected td i,
.gridbox_dhx_skyblue td.cellselected i,
.gridbox_dhx_skyblue tr.rowselected td u,
.gridbox_dhx_skyblue .rowselected td u,
.gridbox_dhx_skyblue td.cellselected u,
.gridbox_dhx_skyblue tr.rowselected td span,
.gridbox_dhx_skyblue .rowselected td span,
.gridbox_dhx_skyblue td.cellselected span {
    color: #ffffff !important;
}
/* 선택 행: 인라인 SVG 아이콘(필터 유형 IP/키워드/AI/이미지 등)을 흰색으로 정규화.
   아이콘 고정색(파랑/바이올렛 등)이 인디고 선택 배경에 묻혀 서로 구분이 안 되던 문제 해소
   — 흰색 단색 + 각기 다른 도형(지구/태그/봇/이미지)으로 명확히 구분된다. */
.gridbox_dhx_skyblue tr.rowselected td svg,
.gridbox_dhx_skyblue .rowselected td svg,
.gridbox_dhx_skyblue td.cellselected svg {
    stroke: #ffffff !important;
}


/* ===== 일괄 처리 진행률(Progress Bar) — util.js mw_batch_post (2026 통일 테마) ===== */
.mw-prog-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--mw-overlay, rgba(15, 23, 42, 0.45));    /* 반투명 — 클릭 차단 */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mw-prog-panel {
    width: 420px;
    max-width: 86%;
    background: var(--mw-surface, #ffffff);   /* 다크: 표면 토큰(흰 패널 잔존 결함 수정) */
    border-radius: 14px;
    box-shadow: 0 18px 48px var(--mw-shadow-strong, rgba(15, 23, 42, 0.32));
    padding: 26px 28px 22px;
    font-family: "Malgun Gothic", "맑은 고딕", sans-serif;
}
.mw-prog-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--mw-text, #1e293b);
    margin-bottom: 14px;
    text-align: center;
    letter-spacing: -0.2px;
}
.mw-prog-track {
    height: 14px;
    background: var(--mw-surface-muted, #e2e8f0);
    border-radius: 999px;
    overflow: hidden;
}
.mw-prog-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1, #4f46e5);  /* indigo */
    transition: width 0.18s ease;
}
.mw-prog-count {
    margin-top: 12px;
    font-size: 12px;
    color: var(--mw-text-body, #475569);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.mw-prog-error .mw-prog-fill {
    background: linear-gradient(90deg, #f87171, #dc2626);  /* red — 오류 */
}
.mw-prog-error .mw-prog-label {
    color: var(--mw-danger, #dc2626);
}


/* ===== 토글 스위치(Google Material 스타일) — filter_config On/Off ===== */
.mw-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
}
/* 토글 숨김 체크박스: 전역 input[type=checkbox] 규칙(동일 specificity)을 소스순서와
   무관하게 확실히 이기도록 속성 선택자로 specificity 를 높인다(견고). */
.mw-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    min-height: 0;
}
.mw-switch .mw-switch-track {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #c4c9d2;                    /* off: 회색 */
    border-radius: 999px;
    transition: background 0.22s ease;
    flex: 0 0 auto;
}
.mw-switch .mw-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
    transition: transform 0.22s ease;
}
.mw-switch input:checked + .mw-switch-track {
    background: #4f46e5;                    /* on: 인디고 */
}
.mw-switch input:checked + .mw-switch-track .mw-switch-thumb {
    transform: translateX(18px);
}
.mw-switch input:focus + .mw-switch-track {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
.mw-switch input:disabled + .mw-switch-track {
    opacity: 0.5;
    cursor: not-allowed;
}
.mw-switch .mw-switch-text {
    margin-left: 9px;
    font-size: 12px;
    color: #334155;
    min-width: 56px;
}
/* on/off 상태 텍스트(스위치 옆) */
.mw-switch input:checked ~ .mw-switch-text .mw-on  { display: inline; }
.mw-switch input:checked ~ .mw-switch-text .mw-off { display: none; }
.mw-switch input:not(:checked) ~ .mw-switch-text .mw-on  { display: none; }
.mw-switch input:not(:checked) ~ .mw-switch-text .mw-off { display: inline; }
.mw-switch .mw-on  { color: #4f46e5; font-weight: 700; }
.mw-switch .mw-off { color: #64748b; }
.mw-switch-group { display: inline-flex; gap: 26px; flex-wrap: wrap; }


/* ===== 저장 토스트 ===== */
.mw-toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%) translateY(16px);
    background: #1e293b;                    /* slate-800 */
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 20px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.28s ease;
    z-index: 100000;
    pointer-events: none;
    white-space: nowrap;
}
.mw-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.mw-toast-err {
    background: #dc2626;                    /* red */
}


/* ===== 라이선스 정보 현대화: 활성 기능 쇼케이스 카드 (2026, 디지털 감성) ===== */
.mw-feat {
    display: flex; align-items: center; gap: 11px;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 13px 14px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mw-feat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(79, 70, 229, .18);
    border-color: #c7d2fe;
}
.mw-feat-ic {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
}
.mw-feat-name { font-weight: 700; font-size: 13px; color: #1e293b; letter-spacing: -.2px; }
.mw-feat-state { font-size: 11px; font-weight: 700; color: #047857; display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; }
.mw-feat-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.22); display: inline-block; }
.mw-feat.off { opacity: .5; }
.mw-feat.off .mw-feat-state { color: #94a3b8; }
.mw-feat.off .mw-feat-dot { background: #94a3b8; box-shadow: none; }
.mw-feat.off .mw-feat-ic { background: #f1f5f9; }
.mw-lic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

/* =====================================================================
 * 상단 로고 박스 완전 고정(2026-06-08)
 *   문제: 로고는 logo TD(ROWSPAN=3)가 감싸는 행들(탭메뉴/검색바/페이지네이션)의
 *   합산 높이를 따라가, 화면마다 테두리 박스 높이가 121~150px 로 들쭉날쭉했다
 *   (IMG 자체는 항상 99px). 메뉴 전환 시 "로고가 늘었다 줄었다" 보이는 원인.
 *   해결: 테두리를 TD 에서 떼어 IMG 자체에 고정 크기(메시지 분류 기준 224x121)로
 *   부여한다. 그러면 ROWSPAN 셀 높이가 어떻든 로고 박스는 절대 변하지 않는다.
 *   (logo_image_view.php 가 서빙하는 상단 로고에만 적용 — 다른 이미지 무영향.)
 * ===================================================================== */
/* 재설계(2026-06-08): 화면마다 헤더(로고 ROWSPAN 셀이 감싸는 우측 컨트롤 영역) 높이가 다르다
 *   — 목록화면은 검색 컨트롤이 많아 ~142px, 메인은 121px. 로고 박스를 고정 121 로 두면 큰 헤더에서
 *   가운데로 "떠 보이고" 좌측 트리메뉴와 분리된다. 모든 화면에서 들뜸 없이 트리와 정확히 결합되도록:
 *   ─ 테두리(프레임)는 셀(TD)에 둔다 → 프레임이 항상 셀(헤더) 높이라 트리 시작점과 flush 결합.
 *   ─ 로고 이미지는 220x99 native 로 셀 안에서 중앙 정렬(이미지 그래픽은 전 화면 동일).
 *   (logo_image_view.php 서빙 상단 로고에만 적용 — 다른 이미지 무영향.) */
/* ⚠️ :not(:has(td)) 필수 — :has(img) 만 쓰면 로고를 "자손으로" 포함하는 바깥 스캐폴드 TD 전부에
   매칭된다. 데스크톱(table-cell)은 height 가 min-height 처럼 동작해 잠복했지만, 모바일 선형화
   (display:block)에서는 156px 가 하드 높이가 되어 본문 전체가 가려졌다(모바일 빈 화면의 원인). */
td:not(:has(td)):has(img[src*="logo_image_view"]) {
    border: 1px solid #cbd5e1 !important;   /* 프레임을 셀에 — 항상 셀 높이라 트리와 flush 결합 */
    padding: 0 !important;
    vertical-align: middle !important;      /* 로고 세로 중앙 */
    background: #ffffff !important;
    width: 224px !important;                /* 아래 트리 컬럼(224)과 동일 폭으로 정렬 */
    height: 156px !important;               /* 전 화면 통일 높이(최대 헤더 ≥154 를 덮어 어디서도 로고가 헤더를 지배) */
    box-sizing: border-box !important;
}
#divLogoImage { line-height: 0; }
img[src*="logo_image_view"] {
    width: 220px !important;
    height: 99px !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
    margin: 0 auto !important;              /* 가로 중앙(세로는 TD vertical-align:middle) */
}

/* ===== 모션 민감성(WCAG 2.3.3) — 전역 reduced-motion 가드 =====
   사용자가 OS 에서 '동작 줄이기'를 켜면 전 화면의 트랜지션/애니메이션을 사실상 즉시(0.01ms)로 만든다.
   - 끝 상태(transform 위치·opacity)는 보존 → 토글 thumb 위치, 토스트 표시, hover 리프트의 최종 모습은 그대로(애니메이션만 제거).
   - 0(완전 0) 대신 0.01ms 라서 transitionend 이벤트는 정상 발화(JS 동작 호환). 스크롤 스무딩도 해제.
   주의: !important 로 인라인/스코프 트랜지션까지 덮어 전 화면 일관 적용(벤더 dhtmlx 포함, 환경설정 존중). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== 2026 라운드 외곽 프레임 (dhtmlx 레이아웃 셀 = 화면 외곽 사각 박스) =====
   dhtmlx 레이아웃 셀의 외곽 테두리(.dhxcont_global_content_area, 기본 #a4bed4 직각)를
   디자인 시스템에 맞춰 연한 슬레이트 라운드 박스로 통일한다. overflow:hidden 으로
   내부 직각 모서리가 라운드 밖으로 삐져나오지 않게 클리핑(내부 스크롤은 셀 자식이
   별도로 처리하므로 무영향). 전 화면(메시지/필터/통계/시스템관리) 일관 적용. */
.dhxcont_global_content_area {
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    /* 라운드 모서리는 클리핑하되(둘 다 non-visible → border-radius 클립), 콘텐츠가 셀보다
       길면 잘리지 않고 세로 스크롤되게 한다. 가로는 그리드 1px 오버플로 spurious 스크롤바
       방지 위해 hidden. (필터 공통 관리 등 긴 폼이 라운드 박스에 가려지던 문제 해소) */
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

/* ===== 2026 라운드 폼 박스 (레거시 tbl_main 표 폼 = 탭 내부 사각 박스) =====
   설정/관리 폼의 최외곽 tbl_main 표를 라운드 카드로 통일한다. border-radius 는
   border-collapse:collapse 에서 무시되므로 separate+spacing0 로 전환하고, overflow:hidden
   으로 내부 직각 모서리를 클리핑한다. 중첩된 안쪽 tbl_main(필드 그리드)은 이중 라운드를
   막기 위해 직각 유지. 전 화면(메시지/필터/통계/시스템관리)의 tbl_main 폼에 일관 적용. */
table.tbl_main {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px;
    overflow: hidden;
}
table.tbl_main table.tbl_main {
    border-radius: 0;
    overflow: visible;
}

/* ===== 앱 전역 스크롤바 통일 (2026-06-10) =====
   화면마다 기본 스크롤바(▲▼ 화살표·사각 트랙)와 페이지 스코프 얇은 막대가 혼재 → 전역 통일.
   외형만 바꾸고 스크롤 동작/기하는 불변(웹킷 전용 의사요소). 페이지 스코프 규칙(필터 설정 3종의
   track margin 인셋 등)은 이 위에 그대로 얹힌다. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #64748b; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ===== 좌측 트리 메뉴 현대화 (2026-06-10) =====
   Vista 풍 노란 폴더 GIF + 네이비 선택 박스 + Verdana 타이포가 인디고 디자인시스템과 충돌했다.
   폴더 아이콘은 treemenu_*.tpl 4종의 im1/im2(= csh_vista/folder_open|closed.svg, 인디고 stroke)가
   담당하고, 여기서는 행 타이포(Malgun)·hover 슬레이트·선택 인디고 칩(인셋 링 = 입체 경계)을 준다.
   (셀 헤더바는 v3.20.0 부터 mw_layout.js 셰임이 자체 모던 스타일로 렌더 — 구 .dhtmlxPolyInfoBar 없음.) */
/* 트리 개폐 마커: 구 [+]/[-] 비트맵(plus*.gif/minus*.gif) → 슬레이트 셰브론 SVG 로 content 치환
   (클릭 영역·18px 기하·개폐 핸들러 그대로). [src$=".gif"] 한정 — 리프 아이콘 plus.svg 는 보존. */
img[src*="csh_vista/plus"][src$=".gif"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
}
img[src*="csh_vista/minus"][src$=".gif"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
/* 점선 연결선(line*.gif)은 미니멀하게 제거 — 들여쓰기 공백(기하)은 유지 */
img[src*="csh_vista/line"][src$=".gif"] { visibility: hidden; }
/* 트리 패널 내부 소여백 — 행/칩이 패널 좌측 모서리에 밀착하지 않게(스크롤 컨테이너 내부 패딩이라 안전) */
.mw-lyt-ca > div > .containerTableStyle { padding: 4px 2px 4px 4px; box-sizing: border-box; }
.standartTreeRow, .standartTreeRow_lor,
.dhxtree_dhx_skyblue .standartTreeRow, .dhxtree_dhx_skyblue .standartTreeRow_lor {
    font-family: 'Malgun Gothic','맑은 고딕',sans-serif !important;
    font-size: 12.5px !important;
    color: #334155 !important;
    text-decoration: none !important;
    background: none !important;
    border-radius: 6px;
    padding: 1px 5px !important;
}
.standartTreeRow:hover, .standartTreeRow_lor:hover { background: #f1f5f9 !important; }
.selectedTreeRow, .selectedTreeRow_lor,
.dhxtree_dhx_skyblue .selectedTreeRow, .dhxtree_dhx_skyblue .selectedTreeRow_lor {
    font-family: 'Malgun Gothic','맑은 고딕',sans-serif !important;
    font-size: 12.5px !important;
    background: #eef2ff !important;
    color: #4338ca !important;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 6px;
    padding: 1px 5px !important;
    box-shadow: inset 0 0 0 1px #c7d2fe, 0 1px 2px rgba(79,70,229,.12);
}

/* ===== dhtmlx 슬라이더 디자인시스템 정합(인디고) — 필터 공통/AI/이미지 설정의 이동 바 =====
   구 dhtmlxSlider 는 이미지 기반 핸들/트랙이라 인디고 디자인과 따로 놀았다(혼자 튐). 이미지 슬라이스를
   숨기고 트랙=연슬레이트 라인, 채워진 영역=인디고, 핸들=인디고 테두리 흰 원으로 통일한다. 위치 계산은
   dhtmlx JS 가 그대로 처리하므로 외형만 덮어쓴다.
   세로 슬라이더(vertical:true, AI/이미지 설정)는 JS 가 핸들을 top 으로 움직이므로 가로용 height/top
   강제가 닿으면 트랙이 6x6 으로 붕괴하고 핸들이 고정된다 → tpl 이 init() 직후 con 에 mw-vert 를
   부여하고, 축에 닿는 규칙(height/top ↔ width/left)만 방향별로 분리한다. */
.dhtmlxSlider, .dhtmlxSlider_ball {
    border-radius: 999px; background: #e5e9f0 !important; overflow: visible !important;
}
.dhtmlxSlider:not(.mw-vert), .dhtmlxSlider_ball:not(.mw-vert) { height: 6px !important; }
.dhtmlxSlider.mw-vert, .dhtmlxSlider_ball.mw-vert { width: 6px !important; }
.dhtmlxSlider .leftSide, .dhtmlxSlider .rightSide,
.dhtmlxSlider_ball .leftSide, .dhtmlxSlider_ball .rightSide { background: none !important; width: 0 !important; }
.dhtmlxSlider .leftZone, .dhtmlxSlider_ball .leftZone { background: #4f46e5 !important; border-radius: 999px; }
.dhtmlxSlider.mw-vert .leftZone, .dhtmlxSlider_ball.mw-vert .leftZone { width: 6px !important; }
.dhtmlxSlider .rightZone, .dhtmlxSlider_ball .rightZone { background: transparent !important; }
.dhtmlxSlider .selector, .dhtmlxSlider_ball .selector {
    width: 18px !important; height: 18px !important;
    border-radius: 50% !important; background: #fff !important; border: 2px solid #4f46e5 !important;
    box-shadow: 0 2px 6px rgba(79,70,229,.35) !important; overflow: visible !important;
}
.dhtmlxSlider:not(.mw-vert) .selector, .dhtmlxSlider_ball:not(.mw-vert) .selector { top: -8px !important; }  /* (6-22)/2 — 정중앙 */
.dhtmlxSlider.mw-vert .selector, .dhtmlxSlider_ball.mw-vert .selector { left: -8px !important; }  /* (6-22)/2 — 정중앙 */
.dhtmlxSlider .selector *, .dhtmlxSlider_ball .selector * { background: none !important; display: none !important; }

/* ===== 로그인(첫인상) 화면 — split 히어로 (스코프: #mw_login_*, login.tpl 한정) ===== */
body.mw-login-page {
   margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
   font-family: 'Malgun Gothic','맑은 고딕',AppleSDGothicNeo-Regular,sans-serif;
   color: #1e293b; padding: 24px; line-height: 1.5; position: relative; overflow: hidden;
   background: radial-gradient(1200px 620px at 12% -12%, #dfe4ff 0%, transparent 55%),
               radial-gradient(1100px 600px at 100% 112%, #ece7fe 0%, transparent 55%),
               linear-gradient(135deg, #eef1fb 0%, #f7f8fc 48%, #eef1fb 100%);
}
.mw-login-blob { position: fixed; border-radius: 50%; filter: blur(70px); opacity: .45; z-index: 0; }
.mw-login-blob.a { width: 360px; height: 360px; left: -100px; top: -90px; background: #c7d2fe; }
.mw-login-blob.b { width: 320px; height: 320px; right: -90px; bottom: -100px; background: #ddd6fe; }
#mw_login_card {
   position: relative; z-index: 1; width: 100%; max-width: 820px; display: flex;
   border-radius: 26px; overflow: hidden; background: #fff;
   box-shadow: 0 40px 90px -28px rgba(79,70,229,.42), 0 12px 30px -14px rgba(30,41,59,.18);
   animation: mw-login-rise .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes mw-login-rise { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } }
/* 좌측 브랜드 히어로 패널 */
#mw_login_card .mw-login-hero { flex: 0 0 330px; position: relative; padding: 44px 38px; color: #fff; overflow: hidden;
   background: linear-gradient(155deg, #5b54e8 0%, #4f46e5 42%, #6d28d9 100%); }
#mw_login_card .mw-login-hblob { position: absolute; border-radius: 50%; background: rgba(255,255,255,.10); }
#mw_login_card .mw-login-hblob.x { width: 200px; height: 200px; right: -60px; top: -70px; }
#mw_login_card .mw-login-hblob.y { width: 150px; height: 150px; left: -50px; bottom: -50px; background: rgba(255,255,255,.07); }
#mw_login_card .mw-login-lock { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
#mw_login_card .mw-login-badge { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 17px; background: rgba(255,255,255,.16);
   display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
#mw_login_card .mw-login-wm { font-style: italic; font-weight: 800; font-size: 21px; letter-spacing: .3px; line-height: 1; }
#mw_login_card .mw-login-wm b { font-size: 1.18em; font-weight: 900; }
#mw_login_card .mw-login-htag { font-size: 12px; opacity: .85; margin-top: 5px; font-weight: 600; }
#mw_login_card .mw-login-lead { position: relative; font-size: 15px; font-weight: 700; line-height: 1.5; opacity: .96; margin-bottom: 22px; }
#mw_login_card .mw-login-feat { position: relative; display: flex; align-items: center; gap: 10px; font-size: 12.5px; opacity: .92; padding: 6px 0; font-weight: 600; }
#mw_login_card .mw-login-feat svg { flex: 0 0 auto; width: 17px; height: 17px; }
/* 우측 폼 패널 */
#mw_login_card .mw-login-panel { flex: 1; padding: 42px 40px 36px; display: flex; flex-direction: column; justify-content: center; }
#mw_login_card .mw-login-h2 { font-size: 22px; font-weight: 800; color: #1e293b; letter-spacing: -.2px; }
#mw_login_card .mw-login-sub { font-size: 12.5px; color: #64748b; margin: 5px 0 22px; font-weight: 600; }
#mw_login_card .mw-login-field { margin-bottom: 14px; }
#mw_login_card .mw-login-field > label { display: block; font-size: 12px; font-weight: 700; color: #475569; margin: 0 2px 6px; letter-spacing: .2px; }
#mw_login_card .mw-login-inp { position: relative; display: flex; align-items: center; }
#mw_login_card .mw-login-inp > svg { position: absolute; left: 13px; width: 18px; height: 18px; stroke: #64748b; pointer-events: none; }
#mw_login_card .mw-login-inp > input { width: 100%; height: 46px; border: 1px solid #d8dee9; border-radius: 12px;
   padding: 0 14px 0 40px; font-family: inherit; font-size: 15px; font-weight: 600; color: #1f2937;
   background: #fbfcfe; transition: border-color .15s, box-shadow .15s, background .15s; box-sizing: border-box; }
#mw_login_card .mw-login-inp > input::placeholder { color: #aab4c5; font-weight: 500; }
#mw_login_card .mw-login-inp > input:focus { outline: none; border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
#mw_login_card .mw-login-inp:focus-within > svg { stroke: #4f46e5; }
#mw_login_card .mw-login-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 18px; font-size: 12.5px; color: #475569; }
#mw_login_card .mw-login-row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
#mw_login_card .mw-login-row input[type=checkbox] { accent-color: #4f46e5; width: 15px; height: 15px; cursor: pointer; }
#mw_login_card .mw-login-btn { width: 100%; height: 48px; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700;
   cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
   transition: filter .15s, box-shadow .15s, transform .05s, background .15s; }
#mw_login_card .mw-login-btn > svg { width: 18px; height: 18px; }
#mw_login_card .mw-login-btn.primary { color: #fff; border: 0; background: linear-gradient(135deg, #4f46e5, #6d28d9); box-shadow: 0 8px 20px -4px rgba(79,70,229,.45); letter-spacing: 1px; }
#mw_login_card .mw-login-btn.primary:hover { filter: brightness(1.06); box-shadow: 0 10px 26px -4px rgba(79,70,229,.55); }
#mw_login_card .mw-login-btn.primary:active { transform: translateY(1px); }
#mw_login_card .mw-login-btn.primary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(79,70,229,.30); }
#mw_login_card .mw-login-or { display: flex; align-items: center; gap: 12px; margin: 15px 0; color: #64748b; font-size: 11.5px; font-weight: 600; }
#mw_login_card .mw-login-or::before, #mw_login_card .mw-login-or::after { content: ""; flex: 1; height: 1px; background: #e9edf5; }
#mw_login_card .mw-login-btn.ghost { color: #4338ca; background: #fff; border: 1.5px solid #c7d2fe; }
#mw_login_card .mw-login-btn.ghost:hover { background: #eef2ff; border-color: #a5b4fc; }
#mw_login_card .mw-login-btn.ghost:active { transform: translateY(1px); }
#mw_login_card .mw-login-btn.ghost:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(79,70,229,.20); }
/* 좁은 화면: 히어로 패널 숨김(폼만) */
@media (max-width: 680px) { #mw_login_card .mw-login-hero { display: none; } #mw_login_card { max-width: 430px; } }
@media (prefers-reduced-motion: reduce) { #mw_login_card { animation: none; } #mw_login_card .mw-login-btn { transition: none; } }

/* 로그인 페이지 다크 정합(히어로 인디고 그라데는 유지 — 카드/패널/입력/버튼/배경만 다크).
   입력 기본 배경/색/테두리는 전역 input 오버라이드(!important)가 처리, 여기선 포커스·패널·버튼·배경. */
html[data-theme="dark"] body.mw-login-page {
   color: var(--mw-text);
   background: radial-gradient(1200px 620px at 12% -12%, #1e1b4b 0%, transparent 55%),
               radial-gradient(1100px 600px at 100% 112%, #2e1065 0%, transparent 55%),
               linear-gradient(135deg, #0f172a 0%, #131c30 48%, #0f172a 100%);
}
html[data-theme="dark"] .mw-login-blob.a { background: #312e81; }
html[data-theme="dark"] .mw-login-blob.b { background: #4c1d95; }
html[data-theme="dark"] #mw_login_card { background: var(--mw-surface); box-shadow: 0 40px 90px -28px rgba(0,0,0,.62), 0 12px 30px -14px rgba(0,0,0,.5); }
html[data-theme="dark"] #mw_login_card .mw-login-h2 { color: var(--mw-text); }
html[data-theme="dark"] #mw_login_card .mw-login-sub { color: var(--mw-text-muted); }
html[data-theme="dark"] #mw_login_card .mw-login-field > label { color: var(--mw-text-body); }
html[data-theme="dark"] #mw_login_card .mw-login-inp > svg { stroke: var(--mw-text-muted); }
html[data-theme="dark"] #mw_login_card .mw-login-inp > input:focus { background: var(--mw-surface) !important; border-color: var(--mw-brand) !important; }
html[data-theme="dark"] #mw_login_card .mw-login-row { color: var(--mw-text-body); }
html[data-theme="dark"] #mw_login_card .mw-login-or { color: var(--mw-text-muted); }
html[data-theme="dark"] #mw_login_card .mw-login-or::before, html[data-theme="dark"] #mw_login_card .mw-login-or::after { background: var(--mw-border); }
html[data-theme="dark"] #mw_login_card .mw-login-btn.ghost { color: var(--mw-brand-strong); background: var(--mw-surface); border-color: var(--mw-brand-soft-border); }
html[data-theme="dark"] #mw_login_card .mw-login-btn.ghost:hover { background: var(--mw-brand-soft); border-color: var(--mw-brand); }

/* ===== 라이선스 증서(Certificate) — v3.26.x (스코프: #mw_cert, license_mgt.tpl 라이선스 정보 탭) ===== */
#mw_cert { position: relative; max-width: 760px; margin: 4px auto 0; background:
   radial-gradient(900px 420px at 50% -8%, #f5f3ff 0%, transparent 60%),
   linear-gradient(180deg, #fffefb 0%, #fdfcff 100%);
   border-radius: 14px; padding: 26px; overflow: hidden;
   box-shadow: 0 20px 50px -18px rgba(79,70,229,.30), 0 6px 18px -10px rgba(30,41,59,.16); }
#mw_cert .mw-cert-wm { position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%); width: 380px; height: 380px; opacity: .04; z-index: 0; pointer-events: none; }
#mw_cert .mw-cert-frame { position: relative; z-index: 1; border: 2px solid #4f46e5; border-radius: 8px; padding: 3px; }
#mw_cert .mw-cert-frame::before { content: ""; position: absolute; inset: 4px; border: 1px solid #c7a44a; border-radius: 5px; pointer-events: none; }
#mw_cert .mw-cert-inner { position: relative; padding: 30px 38px 26px; text-align: center; }
#mw_cert .mw-cert-corner { position: absolute; width: 24px; height: 24px; border: 2px solid #c7a44a; z-index: 2; }
#mw_cert .mw-cert-corner.tl { left: 8px; top: 8px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
#mw_cert .mw-cert-corner.tr { right: 8px; top: 8px; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
#mw_cert .mw-cert-corner.bl { left: 8px; bottom: 8px; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }
#mw_cert .mw-cert-corner.br { right: 8px; bottom: 8px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }
#mw_cert .mw-cert-eyebrow { font-size: 11px; letter-spacing: 5px; color: #8b8568; font-weight: 700; font-family: 'Times New Roman',serif; }
#mw_cert .mw-cert-title { font-size: 29px; font-weight: 800; letter-spacing: 8px; color: #312e81; margin-top: 8px; }
#mw_cert .mw-cert-subtitle { font-family: 'Times New Roman',serif; font-style: italic; font-size: 14px; letter-spacing: 2px; color: #6d28d9; margin-top: 3px; }
#mw_cert .mw-cert-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px auto 4px; width: 240px; }
#mw_cert .mw-cert-divider .ln { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #c7a44a, transparent); }
#mw_cert .mw-cert-divider .dm { width: 7px; height: 7px; background: #c7a44a; transform: rotate(45deg); }
#mw_cert .mw-cert-statement { font-size: 13.5px; color: #475569; line-height: 1.7; margin: 18px auto 6px; max-width: 540px; }
#mw_cert .mw-cert-statement b { color: #4338ca; }
#mw_cert .mw-cert-product { margin: 14px 0 6px; }
#mw_cert .mw-cert-product .name { font-size: 25px; font-weight: 800; color: #1e1b4b; letter-spacing: -.3px; }
#mw_cert .mw-cert-product .ver { display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 700; color: #4338ca; background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 999px; padding: 4px 14px; }
#mw_cert .mw-cert-rows { max-width: 540px; margin: 20px auto 6px; text-align: left; }
#mw_cert .mw-cert-row { display: flex; align-items: baseline; gap: 8px; padding: 9px 4px; font-size: 14px; }
#mw_cert .mw-cert-row + .mw-cert-row { border-top: 1px dashed #e7e3d6; }
#mw_cert .mw-cert-row .k { flex: 0 0 130px; color: #7c7860; font-weight: 700; font-size: 12.5px; letter-spacing: .3px; }
#mw_cert .mw-cert-row .lead { flex: 1; border-bottom: 1px dotted #d8d3c2; transform: translateY(-3px); }
#mw_cert .mw-cert-row .v { font-weight: 700; color: #1e293b; }
#mw_cert .mw-cert-row .v.mono { font-family: 'D2Coding','Consolas',monospace; }
#mw_cert .mw-cert-foot { display: flex; align-items: flex-end; justify-content: space-between; max-width: 560px; margin: 26px auto 0; padding-top: 6px; }
#mw_cert .mw-cert-sign { text-align: left; }
#mw_cert .mw-cert-sign .by { font-size: 11px; color: #64748b; font-weight: 700; letter-spacing: .5px; }
#mw_cert .mw-cert-sign .auth { font-family: 'Times New Roman',serif; font-style: italic; font-size: 22px; color: #312e81; margin-top: 2px; }
#mw_cert .mw-cert-sign .ln2 { width: 200px; border-bottom: 1.5px solid #cbd5e1; margin-top: 4px; }
#mw_cert .mw-cert-sign .role { font-size: 11.5px; color: #64748b; margin-top: 5px; font-weight: 600; }
#mw_cert .mw-cert-seal { flex: 0 0 auto; width: 116px; height: 116px; filter: drop-shadow(0 6px 10px rgba(79,70,229,.28)); }
#mw_cert .mw-cert-stamp { position: absolute; right: 30px; top: 116px; z-index: 3; border: 3px solid #10b981; color: #10b981; border-radius: 10px; padding: 6px 14px; font-weight: 900; font-size: 18px; letter-spacing: 3px; transform: rotate(-13deg); font-family: 'Times New Roman',serif; opacity: .92; background: rgba(16,185,129,.05); text-align: center; }
#mw_cert .mw-cert-stamp.bad { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.05); }
#mw_cert .mw-cert-stamp small { display: block; font-size: 8px; letter-spacing: 2px; margin-top: 1px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { #mw_cert { } }

/* ===========================================================================
 * 다크 오버라이드 레이어 (docs/DARKMODE_DESIGN.md §2) — html[data-theme="dark"] 한정.
 * 라이트 본문은 불변(무회귀), 다크에서만 셸 셀렉터를 토큰으로 재정의.
 * 그리드/로고 등 !important 선언에는 오버라이드도 !important 동반.
 * 로그인 히어로(.mw-login-page)·라이선스 증서(#mw_cert)는 스큐어모픽이라 1차 제외.
 * ========================================================================= */
html[data-theme="dark"] body { background: var(--mw-bg); color: var(--mw-text); }
/* 흰/연회색 BGCOLOR 속성(레거시 흰 섬) 무력화 — 대소문자 무시(i), 전 요소(tr/td/table/div…).
   흰색 셀=표면(surface), 연회색 헤더=표면-muted 로 계층화. body 만 페이지 배경(bg, 더 높은 specificity 로 우선). */
html[data-theme="dark"] [bgcolor="#ffffff" i],
html[data-theme="dark"] [bgcolor="#fff" i],
html[data-theme="dark"] [bgcolor="white" i] { background-color: var(--mw-surface) !important; }
html[data-theme="dark"] [bgcolor="#ebebeb" i],
html[data-theme="dark"] [bgcolor="#eeeeee" i],
html[data-theme="dark"] [bgcolor="#f5f5f5" i],
html[data-theme="dark"] [bgcolor="#fafafa" i],
html[data-theme="dark"] [bgcolor="#f0f0f0" i] { background-color: var(--mw-surface-muted) !important; }
html[data-theme="dark"] body[bgcolor] { background-color: var(--mw-bg) !important; }

/* 표면: 입력·텍스트영역·select·카드 */
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"], html[data-theme="dark"] .input_text,
html[data-theme="dark"] select {
    background: var(--mw-surface) !important; color: var(--mw-text) !important;
    border-color: var(--mw-border-strong) !important;
}
html[data-theme="dark"] textarea, html[data-theme="dark"] .basic_text,
html[data-theme="dark"] .basic_text_8pt, html[data-theme="dark"] .font_basic,
html[data-theme="dark"] .font_basic_8pt { color: var(--mw-text); }
html[data-theme="dark"] .hyperlink { color: var(--mw-brand-2); }

/* 레거시 표(tbl_main/#ebebeb 어트리뷰트셀렉터는 키 보존, 선언값만) */
html[data-theme="dark"] .tbl_main,
html[data-theme="dark"] .table_border { background: var(--mw-surface); color: var(--mw-text); border-color: var(--mw-border); }
html[data-theme="dark"] table[bgcolor="#ebebeb"],
html[data-theme="dark"] td[bgcolor="#ebebeb"] { background-color: var(--mw-surface-muted) !important; }
/* 페이지 스캐폴드(BODY 직하 최상위 레이아웃 테이블) 셀의 레거시 흰 배경 무력화.
 * 상단 헤더 띠(탭/도움말/사용자칩 영역)가 다크에서 흰색으로 남던 원인 — 토큰 배경 강제.
 * 최상위 스캐폴드 셀에만 한정(:not 제외 불필요 — 내부 컴포넌트는 자체 배경을 덧칠). */
html[data-theme="dark"] body > table > tbody > tr > td,
html[data-theme="dark"] body > table > tbody > tr > td > table > tbody > tr > td {
    background-color: var(--mw-bg) !important;
}
/* 상단 로고 카드(다크): 다크 전용 로고(logo_dark.svg, ?theme=dark 서빙)로 교체하고
 * 카드도 다크 표면 토큰으로. content:url 교체는 Chrome(운영 표준) 동작 —
 * 미지원 브라우저는 라이트 로고가 남으므로 카드 배경으로 시인성 유지. */
html[data-theme="dark"] td:not(:has(td)):has(img[src*="logo_image_view"]) {
    background: var(--mw-surface) !important;
    border-color: var(--mw-border) !important;
}
html[data-theme="dark"] img[src*="logo_image_view"] {
    content: url("/apps/logo_image_view.php?theme=dark");
}
html[data-theme="dark"] .grid_column_name,
html[data-theme="dark"] .grid_column_data,
html[data-theme="dark"] .grid_column_numeric_data { color: var(--mw-text); }

/* dhtmlx 그리드 — 표면/행/헤더/테두리(!important 동반). 선택행 인디고+흰글자는 의도 유지. */
html[data-theme="dark"] .mw-grd { background: var(--mw-surface); }
html[data-theme="dark"] .mw-grd .xhdr { border-bottom-color: var(--mw-border-strong); }
html[data-theme="dark"] .mw-grd table.obj td { border-bottom-color: var(--mw-border); }
html[data-theme="dark"] .gridbox, html[data-theme="dark"] .gridbox_dhx_skyblue { background: var(--mw-surface) !important; border-color: var(--mw-border) !important; }
html[data-theme="dark"] .gridbox table.obj td { background: var(--mw-surface); color: var(--mw-text); border-color: var(--mw-border) !important; }
html[data-theme="dark"] .gridbox_dhx_skyblue .odd_dhx_skyblue,
html[data-theme="dark"] .gridbox_dhx_skyblue .odd_dhx_skyblue td { background: var(--mw-surface-2) !important; color: var(--mw-text) !important; }
html[data-theme="dark"] .gridbox_dhx_skyblue .ev_dhx_skyblue td { background: var(--mw-surface) !important; color: var(--mw-text) !important; }
html[data-theme="dark"] .gridbox_dhx_skyblue .xhdr,
html[data-theme="dark"] .gridbox_dhx_skyblue .xhdr table td,
html[data-theme="dark"] .gridbox_dhx_skyblue .xhdr td,
html[data-theme="dark"] .gridbox_dhx_skyblue .hdrcell,
html[data-theme="dark"] .gridbox_dhx_skyblue table.hdr td { background: var(--mw-surface-muted) !important; color: var(--mw-text) !important; border-color: var(--mw-border) !important; }
/* ⚠️ 선택/hover 는 위 행 배경 룰(!important, 특이도 0,3,2)보다 "뒤+높은 특이도"로 둬야 한다.
   라이트 선택 룰(.gridbox… tr.rowselected td, 0,2,2)은 다크 짝수행 룰에 져서 짝수행만 선택색이
   안 입혀졌다(= 선택이 한 칸씩 건너뛰어 보이는 결함). hover 도 같은 메커니즘으로 짝수행에서 죽었다. */
html[data-theme="dark"] .gridbox_dhx_skyblue tr.rowselected td,
html[data-theme="dark"] .gridbox_dhx_skyblue tr.rowselected.ev_dhx_skyblue td,
html[data-theme="dark"] .gridbox_dhx_skyblue td.cellselected {
    background: #4f46e5 !important; color: #ffffff !important;
}
html[data-theme="dark"] .mw-grd table.obj tr.grid_hover:not(.rowselected) td {
    background-color: var(--mw-grid-hover) !important;
}

/* 버튼·푸터·카드·기능칩 */
html[data-theme="dark"] .mw-btn-ghost { background: var(--mw-surface); color: var(--mw-text-body); border-color: var(--mw-border-strong); }
html[data-theme="dark"] .mw-btn-ghost:hover { background: var(--mw-surface-2); border-color: var(--mw-brand-2); color: var(--mw-brand-strong); }
html[data-theme="dark"] .mw-btn-danger { background: var(--mw-surface); color: var(--mw-danger); border-color: rgba(248,113,113,.38); }
html[data-theme="dark"] .mw-footer, html[data-theme="dark"] .mw-card { background: var(--mw-surface); color: var(--mw-text-body); border-color: var(--mw-border); }
/* 헤더/푸터 핍 테두리: 회색 계통으로 주변과 조화(사용자 검수 의견) */
html[data-theme="dark"] .mw-help, html[data-theme="dark"] .mw-footer .v { border-color: var(--mw-border-strong); }
html[data-theme="dark"] .mw-feat-name { color: var(--mw-text); }
html[data-theme="dark"] .mw-feat.off .mw-feat-ic { background: var(--mw-surface-muted); }


/* 다크: SVG UI 아이콘 잉크 리맵(전수검사) — 고정 슬레이트600 stroke 는 다크 표면에서 침침(약 2:1).
   도움말 매뉴얼 다이어그램(#mwHelpRoot — 라이트 도형 위 잉크가 의도)은 제외. */
html[data-theme="dark"] svg[stroke="#475569"]:not(#mwHelpRoot *),
html[data-theme="dark"] svg :is([stroke="#475569"]):not(#mwHelpRoot *) { stroke: var(--mw-text-muted) !important; }

/* ===== 다크 색상 감수 — 25화면 전수 색상 감사(WCAG 4.5:1, 그라데이션 배경 인지) 잔여 해소 =====
   증서(#mw_cert) 종이 위 잉크색·파스텔 KPI 칩 위 진한 글자는 의도된 디자인이라 유지. */
/* 레거시 회색(#666) 표 셀: 본문 토큰으로 */
html[data-theme="dark"] .tbl_col_header,
html[data-theme="dark"] .tbl_col_name,
html[data-theme="dark"] .tbl_col_data,
html[data-theme="dark"] .tbl_col_data_without_border { color: var(--mw-text-body); }
/* 스위치 라벨/상태 텍스트 */
html[data-theme="dark"] .mw-switch .mw-switch-text { color: var(--mw-text-body); }
html[data-theme="dark"] .mw-switch .mw-on { color: var(--mw-brand-strong); }
html[data-theme="dark"] .mw-switch .mw-off { color: var(--mw-text-muted); }
/* 라이선스 기능 쇼케이스 칩(다크 페이지 위 흰 칩 잔존 — 유일한 라이트 패치) */
html[data-theme="dark"] .mw-feat { background: var(--mw-surface); border-color: var(--mw-border); }
html[data-theme="dark"] .mw-feat-state { color: #34d399; }
html[data-theme="dark"] .mw-feat.off .mw-feat-state { color: var(--mw-text-muted); }
html[data-theme="dark"] .mw-switch .mw-off { color: var(--mw-text-muted); }

/* 페이지네이션(util.js Get_PageInfo_Str — 네비 SVG 는 currentColor 로 색 추종) */
html[data-theme="dark"] .paging_item a,
html[data-theme="dark"] .paging_item .prev_item, html[data-theme="dark"] .paging_item .next_item,
html[data-theme="dark"] .paging_item .top_item, html[data-theme="dark"] .paging_item .bottom_item {
    color: var(--mw-text-body); background: var(--mw-surface); border-color: var(--mw-border-strong);
}
html[data-theme="dark"] .paging_item a:hover,
html[data-theme="dark"] .paging_item .prev_item:hover, html[data-theme="dark"] .paging_item .next_item:hover,
html[data-theme="dark"] .paging_item .top_item:hover, html[data-theme="dark"] .paging_item .bottom_item:hover {
    background: var(--mw-brand-soft); border-color: var(--mw-brand-2); color: var(--mw-brand-strong);
}

/* 커스텀 탭바(util.js mw_custom_tabs — 시스템/필터 설정). 주입 CSS 는 라이트 스큐어모픽 유지, 다크만 오버라이드 */
html[data-theme="dark"] .mw-ctabs-hdr { background: linear-gradient(180deg,var(--mw-surface-muted),var(--mw-surface-2)); border-bottom-color: var(--mw-border-strong);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); } /* base 의 흰 인셋(.8) 무력화 — 탭 아래 흰 라인 결함 */
html[data-theme="dark"] .mw-ctab-btn { color: var(--mw-text-body); background: linear-gradient(180deg,var(--mw-surface-2),var(--mw-surface-muted)); border-color: var(--mw-border-strong);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } /* 라이트와 같은 구조의 상단 미광(입체감 일관) */
html[data-theme="dark"] .mw-ctab-btn:hover { background: var(--mw-surface); color: var(--mw-text); }
html[data-theme="dark"] .mw-ctab-btn.mw-ctab-on { background: linear-gradient(180deg,var(--mw-surface),var(--mw-surface-2)); color: var(--mw-text); border-color: var(--mw-border-strong); border-bottom-color: var(--mw-surface); box-shadow: 0 -3px 9px var(--mw-shadow), inset 0 1px 0 rgba(255,255,255,.09); }
html[data-theme="dark"] .mw-ctabs-body { background: var(--mw-surface); border-top-color: var(--mw-border-strong); }

/* JS 주입 컴포넌트 미매핑 소프트틴트(워크플로 보고분) 다크 재정의 — var() 불가/전용토큰 없는 알파·틴트 */
/* 윈도우(mw_window) 헤더·닫기 hover */
html[data-theme="dark"] .mw-win-hdr { background: linear-gradient(180deg,var(--mw-surface),var(--mw-surface-muted)); }
html[data-theme="dark"] .mw-win-close:hover { background: rgba(248,113,113,.18); }
/* 레이아웃(mw_layout) 구분자 hover */
html[data-theme="dark"] .mw-lyt-sep:hover { background: rgba(129,140,248,.28); }
/* 캘린더(mw_calendar) 인접월 주말 흐린색·hover·푸터버튼 */
html[data-theme="dark"] .mwcal-day.oth.sun { color: #c97b7b; }
html[data-theme="dark"] .mwcal-day.oth.sat { color: #7b9bc9; }
html[data-theme="dark"] .mwcal-nav-lt:hover, html[data-theme="dark"] .mwcal-mon:hover, html[data-theme="dark"] .mwcal-trigger:active { background: var(--mw-surface-muted); }
html[data-theme="dark"] .mwcal-btn { background: linear-gradient(180deg,var(--mw-surface-2),var(--mw-surface-muted)); }
/* 도움말(mw_help, #mwHelpRoot 스코프) 콜아웃·배지·하이라이트·인라인코드·히어로 태그라인 */
html[data-theme="dark"] #mwHelpRoot .um-doc code { color: #fda4af; }
html[data-theme="dark"] #mwHelpRoot .um-hero p { color: #c7d2fe; }
html[data-theme="dark"] #mwHelpRoot .um-note.tip { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.4); color: #6ee7b7; }
html[data-theme="dark"] #mwHelpRoot .um-note.warn { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.4); color: #fca5a5; }
html[data-theme="dark"] #mwHelpRoot .um-note.info { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.4); color: #93c5fd; }
html[data-theme="dark"] #mwHelpRoot .um-b-spam { background: rgba(248,113,113,.15); color: #fca5a5; border-color: rgba(248,113,113,.4); }
html[data-theme="dark"] #mwHelpRoot .um-b-ham { background: rgba(52,211,153,.15); color: #6ee7b7; border-color: rgba(52,211,153,.4); }
html[data-theme="dark"] #mwHelpRoot .mwh-hit { background: #b45309; color: #fde68a; }
html[data-theme="dark"] #mwHelpRoot .mwh-hit.cur { color: #fff7ed; }

/* 점수 배지(설정 슬라이더 현재값 라운드 박스 — AI 등록 기준·이미지 해상도 등 공용 컴포넌트).
   라이트=연인디고 필, 다크=짙은 인디고 필(전 화면 일관). */
.mw-score-badge {
    display: inline-block; min-width: 48px; text-align: center; padding: 3px 14px;
    border: 1.5px solid var(--mw-brand-soft-border, #c7d2fe); border-radius: 999px;
    background: linear-gradient(180deg, var(--mw-brand-soft, #eef2ff), #e0e7ff);
    color: var(--mw-brand-strong, #4338ca); font-weight: 800; font-size: 13px;
    letter-spacing: .3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
html[data-theme="dark"] .mw-score-badge {
    background: linear-gradient(180deg, #312e81, #1e1b4b);
    border-color: #4338ca; color: #c7d2fe;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* 기간 프리셋 칩 버튼(키워드 필터별/국가별 통계 헤더 — 전체·오늘·주간·월간).
   텍스트 링크 → 버튼 컴포넌트(다크 시인성·사용자 요청). 활성=.mw-pd-on(인디고 필). */
.mw-pd-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 0; margin: 0 2px; padding: 2px 10px;
    font: 700 11px "Malgun Gothic", "맑은 고딕", sans-serif;
    color: var(--mw-text-body, #475569);
    background: var(--mw-surface, #fff);
    border: 1px solid var(--mw-border-strong, #cbd5e1);
    border-radius: 999px; cursor: pointer; box-shadow: none;
    transition: background .15s, border-color .15s, color .15s;
}
.mw-pd-btn:hover { background: var(--mw-brand-soft, #eef2ff); border-color: var(--mw-brand-2, #6366F1); color: var(--mw-brand-strong, #4338ca); }
.mw-pd-btn.mw-pd-on { background: linear-gradient(135deg, #6366F1, #8B5CF6); border-color: var(--mw-brand-2, #6366F1); color: #fff; }
html[data-theme="dark"] .mw-pd-btn { background: var(--mw-surface-2); }
html[data-theme="dark"] .mw-pd-btn.mw-pd-on { color: #fff; }

/* 다크: 네이티브 체크박스/라디오 accent 를 밝은 인디고로(어두운 표면 위 시인성).
   그리드 행 체크박스(.mw-grd-ch)는 mw_grid.js 주입 룰(특이도 0,2,1)이 전역(0,1,1)을 이기므로 별도 명시. */
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"],
html[data-theme="dark"] .mw-grd input.mw-grd-ch { accent-color: var(--mw-brand); }

/* 상태 KPI 틴트 칩(세션 '오늘 접속', 감사 '오늘 기록'/'실패/거부' 등) — 라이트는 인라인 파스텔
   유지, 다크에서만 어두운 반투명 틴트 + 밝은 잉크로 재정의(인라인 스타일을 !important 로 이김). */
html[data-theme="dark"] .mw-kpi-tint-good {
    background: rgba(52,211,153,.13) !important;
    border-color: rgba(52,211,153,.38) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .mw-kpi-tint-good div div { color: #6ee7b7 !important; }
html[data-theme="dark"] .mw-kpi-tint-bad {
    background: rgba(248,113,113,.13) !important;
    border-color: rgba(248,113,113,.38) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .mw-kpi-tint-bad div div { color: #fca5a5 !important; }

/* 라운드 외곽 프레임(트리/그리드/콘텐츠 셀 공통) — 라이트 #cbd5e1 이 다크에서 흰 테두리로 떠 보임 */
html[data-theme="dark"] .dhxcont_global_content_area {
    border-color: var(--mw-border-strong) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
/* 다크: iframe 문서 교체(attachURL) 공백의 흰색 번쩍임 차단 — 잔여 결함 마무리.
   미리보기 셀은 행 클릭마다 iframe.src 만 교체(재사용)되는데, iframe 엘리먼트는 배경이
   투명/흰색이라 "옛 문서 파기 → 새 문서 첫 페인트(외부 style.css 는 render-blocking 이라
   로드 완료까지 페인트 보류)" 사이 공백에 흰색이 비친다(선주입은 새 문서 "내부" 첫 페인트만
   다크화 — 페인트 이전 엘리먼트 배경은 별개). iframe 엘리먼트와 그 컨테이너(.mw-lyt-ca)·
   레이아웃 셀 배경을 다크로 못박아 공백 구간을 흰색이 아닌 다크로 만든다. 앱 내 모든 iframe
   (미리보기·모달 폼)은 다크 페이지를 싣으므로 일괄 적용해도 안전(라이트는 [data-theme=dark] 한정 무영향). */
html[data-theme="dark"] iframe,
html[data-theme="dark"] .mw-lyt-ca,
html[data-theme="dark"] .mw-lyt-cell { background-color: var(--mw-bg) !important; }
/* ⭐ 진행 스피너 오버레이(.mw-lyt-prog) 흰색 워시 차단 — "전체 등록 메시지 > 스팸 등록 > 전체" 처럼
   트리 클릭으로 그리드 reload 시 dhxLayout.progressOn() 이 레이아웃 전체에 띄우는 오버레이의 배경이
   mw_layout.js 인라인 cssText 에 rgba(255,255,255,.55)(반투명 흰색)로 박혀 있어, 다크 화면 위에 흰색이
   번쩍였다(미리보기 iframe 이 아니라 "그리드 reload 진행 오버레이"가 실제 원인). 다크 반투명으로 덮는다
   (html[data-theme=dark] + 클래스라 JS 인라인 .mw-lyt-prog 보다 특이도 우위 → 소스 순서 무관 승리). */
html[data-theme="dark"] .mw-lyt-prog { background: rgba(15,23,42,.55) !important; }

/* 스크롤바 */
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--mw-scrollbar); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--mw-scrollbar-hover); }

/* SVG data:URI 내부색(currentColor 불가) — 다크 전용 재정의.
 * 주의: 위 입력류 다크 룰의 background '축약형'이 repeat/position 을 초기값으로
 * 리셋하므로(전면 반복 = 노이즈), 여기서 라이트 기본(.select_button)과 동일하게
 * no-repeat/우측 중앙을 함께 복원해야 한다. */
html[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
}
/* 좌측 트리 토글(±) 아이콘 data:URI — 다크 밝은 슬레이트 stroke 재정의 */
html[data-theme="dark"] img[src*="csh_vista/plus"][src$=".gif"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
}
html[data-theme="dark"] img[src*="csh_vista/minus"][src$=".gif"] {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* 좌측 트리(dhtmlXTree) — 행/hover/선택 다크 재정의(라이트는 line 868~890 보존) */
html[data-theme="dark"] .standartTreeRow, html[data-theme="dark"] .standartTreeRow_lor,
html[data-theme="dark"] .dhxtree_dhx_skyblue .standartTreeRow, html[data-theme="dark"] .dhxtree_dhx_skyblue .standartTreeRow_lor {
    color: var(--mw-text-body) !important;
}
html[data-theme="dark"] .standartTreeRow:hover, html[data-theme="dark"] .standartTreeRow_lor:hover { background: var(--mw-surface-muted) !important; }
html[data-theme="dark"] .selectedTreeRow, html[data-theme="dark"] .selectedTreeRow_lor,
html[data-theme="dark"] .dhxtree_dhx_skyblue .selectedTreeRow, html[data-theme="dark"] .dhxtree_dhx_skyblue .selectedTreeRow_lor {
    background: var(--mw-brand-soft) !important; color: var(--mw-brand-strong) !important;
    box-shadow: inset 0 0 0 1px var(--mw-brand-soft-border), 0 1px 2px rgba(0,0,0,.3);
}

/* dhtmlxSlider(필터 설정 이동 바) — 트랙만 다크(채움=인디고·흰 노브는 양 테마 OK) */
html[data-theme="dark"] .dhtmlxSlider, html[data-theme="dark"] .dhtmlxSlider_ball { background: var(--mw-border-strong) !important; }
html[data-theme="dark"] .dhtmlxSlider .selector, html[data-theme="dark"] .dhtmlxSlider_ball .selector { background: var(--mw-surface) !important; }

/* 페이지 전환 부드러움(토글 시 일시 적용 클래스) */
html.mw-theme-anim, html.mw-theme-anim body,
html.mw-theme-anim .gridbox td, html.mw-theme-anim .tbl_main,
html.mw-theme-anim textarea, html.mw-theme-anim input, html.mw-theme-anim select {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
@media (prefers-reduced-motion: reduce) {
    html.mw-theme-anim, html.mw-theme-anim * { transition: none !important; }
}

/* =====================================================================
 * 모바일 반응형 (2026-06-12) — 셸 선형화: 좁은 화면에서 레이아웃이 깨지지
 * 않고 세로 스택으로 흐르는 것이 목표. 핵심 원리:
 *   "셸" = mw-lyt(콘텐츠 영역)·gridbox(데이터 그리드)·도움말 모달 '밖'의
 *   모든 레거시 표 — 깊이와 무관하게 블록 선형화한다(범위 기반).
 *   콘텐츠 표/그리드는 자동 보호되며 필요한 경우 가로 스크롤로 접근.
 * 데스크톱 무영향(미디어쿼리 한정).
 * ===================================================================== */
@media (max-width: 768px) {
    /* 셸 표 전부 블록 선형화 (범위 기반 — 페이지별 중첩 깊이 차이에 무관) */
    /* html[data-mwin="pc"] = PC 화면의 모달 iframe(mw_window.js 가 표식) — 폭 660~770px 라
       이 미디어쿼리가 발동하지만 모바일이 아니므로 선형화를 건너뛴다(폼 깨짐 회귀 방지). */
    html:not([data-mwin="pc"]) body :is(table, tbody, tr, td):not(.mw-lyt *):not(.gridbox *):not(#mwHelpRoot *) {
        display: block !important;
        box-sizing: border-box;
        margin: 0 !important;
        width: auto !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        /* 고정높이 행(STYLE height:30px 등)이 블록화 후에도 높이를 유지해 다음 줄(날짜 네비)과
           겹치던 결함 — 선형화 시 높이도 자연 높이로 푼다(메시지 분류 상단 버튼/날짜 겹침 해소) */
        height: auto !important;
    }

    /* NOWRAP 검색줄 셀 줄바꿈 허용 */
    html:not([data-mwin="pc"]) body td[nowrap] { white-space: normal !important; }

    /* 로고: 중앙 + 축소(고정 220x99 해제), 좌우 테두리 제거 */
    td:not(:has(td)):has(img[src*="logo_image_view"]) {
        display: flex !important; justify-content: center !important;
        border-left: 0 !important; border-right: 0 !important;
        padding: 6px 0 !important;
    }
    img[src*="logo_image_view"] { width: 176px !important; height: 79px !important; }

    /* 상단 탭: 2x2 그리드 전폭 */
    #ddtabmenu { width: 100% !important; }
    .ddcolortabs { width: 100% !important; }
    .ddcolortabs ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
    .ddcolortabs a { width: auto !important; }

    /* 우측 유틸(토글/도움말/사용자칩) 여백 */
    .mw-userchip { margin-top: 4px; }
    .mw-theme-toggle { margin: 4px 6px 0 0; }

    /* 트리/본문(mw-lyt): 가로 분할 -> 세로 스택. 본문 셀은 자연 높이(페이지 스크롤).
       (구 45vh 캡은 트리가 화면 절반을 차지하던 원인 — 트리는 아래 드로어로 분리) */
    .mw-lyt { flex-direction: column !important; position: static !important; width: 100% !important; }
    .mw-lyt-cell { width: 100% !important; min-width: 0 !important; height: auto !important;
                   overflow: auto !important; position: static !important; }
    .mw-lyt-sep { display: none !important; }
    #parentId { height: auto !important; width: 100% !important; }

    /* ── 모바일 셸 현대화: 트리 = 오프캔버스 드로어 + FAB (util.js mw_mobile_init 이
       모바일에서만 클래스를 부여 — PC 는 클래스가 없어 어떤 규칙도 매칭되지 않음) ── */
    .mw-m-shell .mw-m-drawer {
        position: fixed !important; left: 0; top: 0; bottom: 0;
        width: 282px !important; max-width: 84vw; height: auto !important;
        z-index: 100001; overflow-y: auto !important;
        background: var(--mw-surface, #fff);
        box-shadow: 8px 0 30px rgba(0,0,0,.28);
        border-right: 1px solid var(--mw-border-strong, #cbd5e1);
        transform: translateX(-105%);
        transition: transform .26s cubic-bezier(.16,1,.3,1);
        padding: 10px 8px calc(14px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }
    .mw-m-shell.mw-m-open .mw-m-drawer { transform: none; }
    .mw-m-shell .mw-m-overlay {
        position: fixed; inset: 0; z-index: 100000;
        background: var(--mw-overlay, rgba(15,23,42,.45));
        opacity: 0; pointer-events: none; transition: opacity .22s ease;
    }
    .mw-m-shell.mw-m-open .mw-m-overlay { opacity: 1; pointer-events: auto; }
    .mw-m-shell .mw-m-fab {
        position: fixed; right: 14px; bottom: calc(34px + env(safe-area-inset-bottom, 0px));
        width: 52px; height: 52px; border-radius: 50%; z-index: 100002;
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--mw-brand-grad-a, #4f46e5), var(--mw-brand-grad-b, #6d28d9));
        color: #fff; border: 0 !important; padding: 0; min-height: 0;
        box-shadow: 0 8px 22px rgba(79,70,229,.45), 0 2px 6px rgba(0,0,0,.25);
        cursor: pointer;
    }
    .mw-m-shell .mw-m-fab:active { transform: scale(.94); }
    @media (prefers-reduced-motion: reduce) {
        .mw-m-shell .mw-m-drawer, .mw-m-shell .mw-m-overlay { transition: none; }
    }
    /* 커스텀 탭(util.js mw-ctabs)은 전부 absolute(부모 픽셀 높이 의존)라 모바일 자동 높이에서
       콘텐츠 셀이 0 으로 붕괴(시스템/사용자/에이전트 설정 본문 실종) — 모바일에서만 정적 흐름으로. */
    .mw-m-shell .mw-ctabs { position: static !important; height: auto !important; overflow: visible !important; }
    .mw-m-shell .mw-ctabs-body { position: static !important; overflow: visible !important; }

    /* 페이지 여백/푸터. 가로 스크롤은 html 에만 — body 에 주면 body 가 자기(축소된) 높이의
       스크롤 컨테이너가 되어 본문을 클리핑한다(모바일 빈 화면 공범). */
    body { padding-bottom: 26px; }
    html { overflow-x: auto; }
    .mw-footer { font-size: 7pt; }

    /* 목록 검색/등록 폼 레이어: 인라인 460px 고정 해제(전수검사: 6개 목록 화면 돌출) */
    #input_form_obj { width: auto !important; max-width: 100% !important; box-sizing: border-box; }

    /* KPI 카드 행(감사로그/세션): nowrap 해제해 줄바꿈 */
    .mw-kpi-bar, .mw-kpi-row { flex-wrap: wrap !important; white-space: normal !important; }

    /* 카드 내 커스텀 데이터 표(DB관리 619px/패스키 461px): 표 구조 유지 + 카드 가로 스크롤 */
    .mw-db-card-bd, .wa-card { overflow-x: auto !important; }

    /* 콘텐츠 폼 표(tbl_main) 선형화: 라벨 위/값 아래 — 영역 내 가로 스크롤 제거.
       중첩 tbl_main(필드 그리드)도 같은 룰에 매칭되어 재귀 선형화된다.
       데이터 그리드(.gridbox)와 통계 데이터 표(tbl_data)는 표 구조 유지(가로 스크롤). */
    .mw-lyt table.tbl_main,
    .mw-lyt table.tbl_main > tbody,
    .mw-lyt table.tbl_main > tbody > tr,
    .mw-lyt table.tbl_main > tbody > tr > td {
        display: block !important; box-sizing: border-box;
        width: auto !important; max-width: 100% !important; min-width: 0 !important;
        height: auto !important;
    }
    .mw-lyt table.tbl_main td.tbl_col_name { text-align: left !important; white-space: normal !important; }

    /* 콘텐츠 폼 내부의 클래스 없는 래퍼 표도 선형화 — dhxcont(overflow:hidden)가
       넘친 폼(526px>376px)을 잘라 입력칸이 스크롤조차 불가한 접근 불가 상태가 됨
       (전수검사 정밀 프로브에서 발견; 클립은 scrollWidth 를 늘리지 않아 자동 검출도 회피).
       트리(dhtmlx)는 form 밖이므로 안전, 그리드/통계 데이터 표는 제외. */
    .mw-lyt form :is(table, tbody, tr, td, th):not(.gridbox *):not(table.tbl_data):not(.tbl_data *) {
        display: block !important; box-sizing: border-box;
        width: auto !important; max-width: 100% !important; min-width: 0 !important;
        height: auto !important;
    }
    /* TYPE 속성 없는 레거시 <INPUT SIZE=60> 포함 전 입력류 폭 클램프 — 모달 iframe 의
       독립 폼 페이지(insert_modify_form 등, .mw-lyt 밖)까지 커버하도록 전역 적용 */
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    select, textarea {
        max-width: 100% !important; box-sizing: border-box;
    }
}