/* ═══════════════════════════════════════════════════════════════
   iamz.common.css  —  IAMZ 디자인 시스템 (통합)
   CSS 변수 · DevExtreme 컴포넌트 오버라이드 · 공통 유틸리티
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS 변수 (통합) ─────────────────────────────────────────── */
:root {
    /* 주 색상 */
    --color-iz-main: #1A6FDB;
    --color-iz-main-rgb: 26, 111, 219;
    --color-accent: #1A6FDB;
    --color-default: #000000;
    --color-zero: #CCCCCC;

    /* 배경 */
    --color-bg-body: #F8F9FC;
    --color-bg-layout-header: #ffffff;
    --color-bg-layout-toolbar: #ffffff;
    --color-bg-darkgray: #1E2840;
    --color-bg-drawer: #ffffff;
    --color-bg-tab-search: #EEF2F9;
    --color-bg-tab-selected: #ffffff;
    --color-bg-submenu: #ffffff;
    --color-bg-edit-basic: #FFF4ED;
    --color-bg-edit-readonly: #E2E5EE;
    --color-bg-edit-editable: #FFFFFF;
    --color-bg-edit: #EFEFEF;
    --color-bg-panel: #ffffff;
    --color-bg-panel-content: #F3F3F3;
    --color-bg-panel-boxshadow: #dddddd;
    --color-bg-form-label: #F0F4FA;
    --color-bg-form: transparent;
    --color-bg-grid-header: var(--color-iz-main);
    --color-bg-card: #ffffff;
    --color-bg-popup-title: linear-gradient(135deg, #1A2A4A 0%, #1E3A6E 100%);

    /* 폼 모던 스타일 */
    --form-field-radius: 6px;
    --form-field-focus-shadow: 0 0 0 2px rgba(26,111,219,.15);
    --form-field-transition: border-color .2s ease, box-shadow .2s ease;
    --form-required-accent: #E8734A;
    --form-label-weight: 600;
    --form-row-gap: 0px;

    /* 테두리 */
    --color-common-border: #E2E6EF;
    --color-common-header-border: #E2E6EF;
    --color-footer: #676767;
    --color-footer-border: #E5E5E5;
    --color-submenu-border: #CCCCCC;
    --color-grid-header-border: rgba(255,255,255,.18);
    --color-card-border: rgba(0,0,0,.06);
    --color-card-header-border: #E4E7F0;
    --color-formfield-border: #DDE1EE;

    /* 텍스트 */
    --color-top-logo-txt: #0C147E;
    --color-readonly-text: rgba(0,0,0,.8);
    --color-graph-label: rgba(0,0,0,.87);
    --color-group-caption: #1A6FDB;
    --color-submenu-bg: #2D76CC;
    --color-current-form-bg: white;
    --color-current-form-bd: black;

    /* 기타 */
    --color-banner: saturate(1) sepia(0) grayscale(0) brightness(1);
    --color-tab-icon: invert(1);
    --color-tab-icon-selected: invert(0);
    --color-header-required: orange;
    --iz-font-size: 13px;

    /* 데이터그리드 */
    --color-datagrid-background-color-red: #FFC6C6;
    --color-datagrid-background-color-yellow: #FFBB00;
    --color-datagrid-background-color-ac3000-1: #FFC19E;
    --color-datagrid-background-color-ac3000-2: #B2CCFF;

    /* 사이드바 메뉴 */
    --menu-icon-w: 16px;
    --menu-icon-gap: 6px;
    --menu-vpad: 2px;
    --indent-l2: 8px;
    --indent-l3: 20px;
    --indent-l4: 32px;
    --section-bg: #2D3A52;
    --section-border: #1A2235;
    --hover-bg: rgba(255,255,255,.10);
    --selected-fg: #FF7043;
}

/* ── 기본 리셋 + 폰트 ───────────────────────────────────────── */
body, html {
    margin: 0;
    min-height: 100%;
    height: 100% !important;
    background-color: var(--color-bg-body);
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

g.dxc-arg-elements text,
g.dxc-val-elements text,
g.dxc-item,
g.dxl-marker text {
    fill: var(--color-graph-label) !important;
}

/* ── 그리드 ──────────────────────────────────────────────────── */

.dx-datagrid-headers .dx-datagrid-table .dx-row:not(.dx-datagrid-filter-row) > td {
    padding: 10px 3px !important;
    vertical-align: middle;
    text-align: center !important;
    background-color: var(--color-bg-grid-header) !important;
    color: #FFF !important;
    border-right: 1px solid var(--color-grid-header-border);
    font-weight: 600;
    letter-spacing: .2px;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-sort,
.dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-sort-indicator,
.dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover .dx-datagrid-text-content {
    color: rgba(255,255,255,.9);
}

.dx-datagrid .dx-header-filter {
    position: relative;
    color: white;
    font: 14px/1 DXIcons;
}

/* datagrid height 수정 */
.dx-datagrid .dx-editor-with-menu,
.dx-datagrid-container .dx-editor-with-menu {
    height: 32px;
}

/* td padding 조절로 datagrid height 조절 */
.dx-datagrid .dx-row > td {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* datagrid 선택했을 때 색상변경 */
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td {
    background-color: rgba(var(--color-iz-main-rgb), .12) !important;
}

/* 행 호버 효과 */
.dx-datagrid-rowsview .dx-data-row.dx-state-hover > td {
    background-color: rgba(var(--color-iz-main-rgb), .04) !important;
}

/* 그리드 내 체크박스가 들어 갈 경우 padding 조절 */
.dx-editor-cell.dx-editor-inline-block:not(.dx-command-select)::before {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ── 탭패널 ──────────────────────────────────────────────────── */

/* 탭 메뉴 배경색 - 네이비 그라디언트 */
.dx-tabpanel .dx-tabs-wrapper {
    background: linear-gradient(90deg, var(--color-bg-darkgray) 0%, #263550 100%);
}

.dx-tabpanel .dx-tab:not(.dx-tab-selected):not(.dx-state-hover) {
    background-color: transparent;
    color: rgba(255,255,255,.75);
}

.dx-tabpanel-tabs .dx-item.dx-tab.dx-state-hover img.icon {
    filter: invert(0);
}

.dx-tabpanel-tabs .dx-item.dx-tab img.icon {
    filter: var(--color-tab-icon);
}

.dx-tabpanel-tabs .dx-item.dx-tab.dx-tab-selected img.icon {
    filter: var(--color-tab-icon-selected);
}

.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* 탭 네비게이션 버튼 (좌/우 화살표) 스타일 */
.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-nav-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);
    border: none;
    cursor: pointer;
    min-width: 28px;
    transition: background .15s ease;
    z-index: 1;
}
.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-nav-button:hover {
    background: rgba(255,255,255,.22);
}
.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-nav-button .dx-icon {
    color: rgba(255,255,255,.85);
}
.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs-nav-button.dx-state-disabled {
    opacity: .3;
    cursor: default;
}

.dx-tabs-wrapper .dx-tab {
    width: auto;
    padding: 6px;
    padding-left: 12px;
    flex-shrink: 0;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dx-tabpanel .dx-tab {
    min-width: 72px;
}

.dx-tabs-wrapper .dx-tab span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 140px;
    vertical-align: middle;
}

.dx-tab {
    background-color: white;
}

/* 탭 닫기 아이콘 */
.dx-tab-content .dx-icon-close {
    display: inline-block;
    opacity: 0.4;
    margin-right: 0;
    margin-left: 7px;
    transition: opacity .15s ease;
}

.dx-tab:hover .dx-tab-content .dx-icon-close,
.dx-tab.dx-tab-selected .dx-tab-content .dx-icon-close {
    opacity: 1;
}

.dx-tab-content span {
    vertical-align: middle;
}

.dx-tab .dx-icon {
    color: inherit;
}

/* 탭 호버 */
.dx-tab.dx-state-hover {
    background-color: #f5f5f5;
    color: black;
}

.dx-tab.dx-state-hover img {
    filter: invert(0);
}

/* 선택된 탭 */
.dx-tab.dx-tab-selected {
    background-color: var(--color-bg-tab-selected);
    color: var(--color-iz-main);
    font-weight: 600;
    position: relative;
}

.dx-tab.dx-tab-selected::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-iz-main);
}

.dx-tab.dx-tab-selected .dx-icon {
    color: var(--color-iz-main);
}

.dx-tab.dx-tab-selected.dx-state-hover {
    color: inherit;
}

.dx-tab.dx-tab-selected.dx-state-hover img {
    filter: var(--color-tab-icon-selected);
}

.dx-tab.dx-tab-selected::before {
    background-color: var(--color-bg-tab-selected);
    color: var(--color-iz-main);
}

/* ── 사이드바 ────────────────────────────────────────────────── */

/* 좌측 메뉴 배경색 지정 */
.dx-drawer-panel-content {
    min-width: 250px;
    background-color: var(--color-bg-darkgray);
    box-shadow: 2px 0 12px rgba(0,0,0,.18);
}

/* ===== 좌측 메뉴 색상 (어두운 사이드바) ===== */

/* 기본 폰트색상 */
.dx-drawer-panel-content .dx-treeview-item,
.dx-drawer-panel-content .dx-treeview-item-content,
.dx-drawer-panel-content .dx-treeview-item-content span,
.dx-drawer-panel-content .dx-treeview-item-content i {
    color: #cbd5e1 !important;
}

/* 호버: .dx-treeview-item 자체에 dx-state-hover가 붙음 */
.dx-drawer-panel-content .dx-treeview-item.dx-state-hover,
.dx-drawer-panel-content .dx-treeview-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
.dx-drawer-panel-content .dx-treeview-item.dx-state-hover,
.dx-drawer-panel-content .dx-treeview-item.dx-state-hover .dx-treeview-item-content,
.dx-drawer-panel-content .dx-treeview-item.dx-state-hover .dx-treeview-item-content span,
.dx-drawer-panel-content .dx-treeview-item.dx-state-hover .dx-treeview-item-content i,
.dx-drawer-panel-content .dx-treeview-item:hover,
.dx-drawer-panel-content .dx-treeview-item:hover .dx-treeview-item-content,
.dx-drawer-panel-content .dx-treeview-item:hover .dx-treeview-item-content span,
.dx-drawer-panel-content .dx-treeview-item:hover .dx-treeview-item-content i {
    color: #ffffff !important;
}

/* 선택(활성) */
.dx-drawer-panel-content .dx-treeview-item.dx-state-focused {
    background-color: rgba(26, 111, 219, 0.3) !important;
}
.dx-drawer-panel-content .dx-treeview-item.dx-state-focused,
.dx-drawer-panel-content .dx-treeview-item.dx-state-focused .dx-treeview-item-content,
.dx-drawer-panel-content .dx-treeview-item.dx-state-focused .dx-treeview-item-content span,
.dx-drawer-panel-content .dx-treeview-item.dx-state-focused .dx-treeview-item-content i,
.dx-drawer-panel-content .dx-state-focused > .dx-treeview-item,
.dx-drawer-panel-content .dx-state-focused > .dx-treeview-item .dx-treeview-item-content,
.dx-drawer-panel-content .dx-state-focused > .dx-treeview-item .dx-treeview-item-content span,
.dx-drawer-panel-content .dx-state-focused > .dx-treeview-item .dx-treeview-item-content i {
    color: #ffffff !important;
}

/* 다크모드 기본 */
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item-content,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item-content span,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item-content i {
    color: #94a3b8 !important;
}
/* 다크모드 호버 */
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item.dx-state-hover,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item.dx-state-hover .dx-treeview-item-content,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item.dx-state-hover .dx-treeview-item-content span,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item.dx-state-hover .dx-treeview-item-content i,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item:hover,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item:hover .dx-treeview-item-content,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item:hover .dx-treeview-item-content span,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item:hover .dx-treeview-item-content i {
    color: #e2e8f0 !important;
}
/* 다크모드 선택 */
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item.dx-state-focused,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item.dx-state-focused .dx-treeview-item-content,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item.dx-state-focused .dx-treeview-item-content span,
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item.dx-state-focused .dx-treeview-item-content i {
    color: #ffffff !important;
}
body.dx-swatch-dark .dx-drawer-panel-content .dx-treeview-item.dx-state-focused {
    background-color: rgba(96, 165, 250, 0.2) !important;
}

/* ===== sysmenu 드롭다운 (예지보전/품질예측/시스템 전환) ===== */
.sysmenu .dx-dropdownbutton .dx-button-text {
    color: #ffffff !important;
}
.sysmenu .dx-dropdownbutton .dx-icon-spindown {
    color: #ffffff !important;
}
/* 드롭다운 팝업 목록 아이템 */
.sysmenu .dx-list-item,
.sysmenu .dx-list-item .dx-list-item-content,
.sysmenu .dx-list-item .dx-list-item-content div {
    color: #1e293b !important;
}
.sysmenu .dx-list-item.dx-state-hover,
.sysmenu .dx-list-item.dx-state-hover .dx-list-item-content,
.sysmenu .dx-list-item.dx-state-hover .dx-list-item-content div {
    color: #ffffff !important;
    background-color: var(--color-iz-main, #1a6fdb) !important;
}
.sysmenu .dx-list-item.dx-list-item-selected,
.sysmenu .dx-list-item.dx-list-item-selected .dx-list-item-content,
.sysmenu .dx-list-item.dx-list-item-selected .dx-list-item-content div {
    color: var(--color-iz-main, #1a6fdb) !important;
    font-weight: 600 !important;
}
.sysmenu .dx-list-item.dx-list-item-selected.dx-state-hover,
.sysmenu .dx-list-item.dx-list-item-selected.dx-state-hover .dx-list-item-content,
.sysmenu .dx-list-item.dx-list-item-selected.dx-state-hover .dx-list-item-content div {
    color: #ffffff !important;
}
/* 다크모드 드롭다운 */
body.dx-swatch-dark .sysmenu .dx-list-item,
body.dx-swatch-dark .sysmenu .dx-list-item .dx-list-item-content,
body.dx-swatch-dark .sysmenu .dx-list-item .dx-list-item-content div {
    color: #e2e8f0 !important;
}
body.dx-swatch-dark .sysmenu .dx-list-item.dx-state-hover,
body.dx-swatch-dark .sysmenu .dx-list-item.dx-state-hover .dx-list-item-content,
body.dx-swatch-dark .sysmenu .dx-list-item.dx-state-hover .dx-list-item-content div {
    color: #ffffff !important;
    background-color: rgba(96, 165, 250, 0.3) !important;
}

/* 사이드바 아코디언 그룹 제목 색상 */
.dx-drawer-panel-content .dx-accordion-item-title,
.dx-drawer-panel-content .dx-accordion-item-title span,
.dx-drawer-panel-content .dx-accordion-item-title i {
    color: #e2e8f0 !important;
}
.dx-drawer-panel-content .dx-accordion-item.dx-state-hover > .dx-accordion-item-title,
.dx-drawer-panel-content .dx-accordion-item.dx-state-hover > .dx-accordion-item-title span,
.dx-drawer-panel-content .dx-accordion-item.dx-state-hover > .dx-accordion-item-title i {
    color: #ffffff !important;
}
.dx-drawer-panel-content .dx-accordion-item.dx-state-hover > .dx-accordion-item-title {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* 컨텐츠 영역(탭 컨텐츠) */
.dx-drawer-content {
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: var(--color-bg-drawer);
    /* drawer 토글 시 깜빡임 방지: 하드웨어 가속 + 부드러운 전환 */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.dx-item-content.dx-multiview-item-content {
    padding: 0 10px;
}

/* ── 아이콘 ──────────────────────────────────────────────────── */

.dx-toolbar-button .dx-button-has-text .dx-button-content .dx-icon {
    width: 18px;
    height: 18px;
    background-position: 0 0;
    background-size: 18px 18px;
    padding: 0;
    font-size: 18px;
    text-align: center;
    line-height: 18px;
    margin-left: 0;
}

.dx-button.dx-button-has-icon:not(.dx-button-has-text):not(.dx-shape-standard) {
    border-radius: 0;
    box-shadow: none;
    display: inline-flex;
}

.dx-button-has-icon.dx-button-has-text .dx-button-content {
    padding: 5px;
}

/* ══════════════════════════════════════════════════════════════
   Toast / Notify – Glassmorphism Premium Style
   ══════════════════════════════════════════════════════════════ */

/* ── Slide-in 키프레임 ── */
@keyframes iamzToastIn {
    0%   { opacity: 0; transform: translateX(40px) scale(0.95); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes iamzToastOut {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(60px); }
}
@keyframes iamzToastShine {
    0%   { left: -100%; }
    100% { left: 200%; }
}
@keyframes iamzToastPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.3); }
    50%      { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
}

/* ── 공통 토스트 래퍼 (하단 오른쪽 고정) ── */
.dx-toast-wrapper {
    pointer-events: none;
}
/* 알림 고정 컨테이너 → 하단 오른쪽 */
#iamz-notify-stack {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 99999 !important;
}
#iamz-notify-stack .dx-toast-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}
#iamz-notify-stack .dx-overlay-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
}
/* ── 토스트 닫기(X) 버튼 ── */
.iamz-toast-close {
    cursor: pointer;
    font-weight: 700;
    font-size: 18px;
    opacity: 0.5;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}
.iamz-toast-close:hover { opacity: 1; }

/* ── 토스트 클릭/닫기 ── */
.dx-toast-wrapper .dx-overlay-content {
    cursor: pointer;
    pointer-events: auto;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.12),
        0 2px 8px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.15) !important;
    padding: 14px 20px 14px 16px !important;
    min-width: 280px;
    max-width: 440px;
    animation: iamzToastIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    position: relative;
    overflow: hidden;
}
.dx-toast-wrapper .dx-overlay-content::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: iamzToastShine 1.2s 0.3s ease-out both;
    pointer-events: none;
}

/* ── 아이콘 영역 ── */
.dx-toast-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    border-radius: 10px;
    margin-right: 14px !important;
    background-size: 20px 20px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: transform 0.3s;
    position: relative;
    z-index: 1;
}

/* ── 메시지 텍스트 ── */
.dx-toast-message {
    display: flex !important;
    align-items: center;
    padding-left: 0 !important;
    line-height: 1.45 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

/* ── 좌측 컬러 액센트 바 ── */
.dx-toast-wrapper .dx-overlay-content::after {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3.5px;
    border-radius: 0 3px 3px 0;
    z-index: 2;
}

/* ═══ INFO ═══ */
.dx-toast-info {
    background: linear-gradient(135deg, rgba(59,130,246,0.12) 0%, rgba(37,99,235,0.06) 100%) !important;
    background-color: rgba(255,255,255,0.85) !important;
    color: #1e40af !important;
}
.dx-toast-info .dx-toast-icon {
    background-color: rgba(59,130,246,0.15) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") !important;
}
.dx-toast-info .dx-toast-message { color: #1e40af !important; }
.dx-toast-info::after { background: #3b82f6; }

/* ═══ SUCCESS ═══ */
.dx-toast-success {
    background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(5,150,105,0.06) 100%) !important;
    background-color: rgba(255,255,255,0.85) !important;
    color: #065f46 !important;
}
.dx-toast-success .dx-toast-icon {
    background-color: rgba(16,185,129,0.15) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='M22 4 12 14.01l-3-3'/%3E%3C/svg%3E") !important;
}
.dx-toast-success .dx-toast-message { color: #065f46 !important; }
.dx-toast-success::after { background: #10b981; }

/* ═══ WARNING ═══ */
.dx-toast-warning {
    background: linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(217,119,6,0.06) 100%) !important;
    background-color: rgba(255,255,255,0.85) !important;
    color: #92400e !important;
}
.dx-toast-warning .dx-toast-icon {
    background-color: rgba(245,158,11,0.15) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") !important;
}
.dx-toast-warning .dx-toast-message { color: #92400e !important; }
.dx-toast-warning::after { background: #f59e0b; }

/* ═══ ERROR ═══ */
.dx-toast-error {
    background: linear-gradient(135deg, rgba(239,68,68,0.12) 0%, rgba(220,38,38,0.06) 100%) !important;
    background-color: rgba(255,255,255,0.85) !important;
    color: #991b1b !important;
}
.dx-toast-error .dx-toast-icon {
    background-color: rgba(239,68,68,0.15) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E") !important;
    animation: iamzToastPulse 1.5s ease-in-out 2;
}
.dx-toast-error .dx-toast-message { color: #991b1b !important; }
.dx-toast-error::after { background: #ef4444; }

/* ═══ RTL 지원 ═══ */
.dx-rtl .dx-toast-message {
    padding-left: 0;
    padding-right: 0;
}
.dx-rtl .dx-toast-icon {
    margin-right: 0 !important;
    margin-left: 14px;
}

/* ══════════════════════════════════════════════════════════════
   Dark Mode – Toast
   ══════════════════════════════════════════════════════════════ */
body.dx-swatch-dark .dx-toast-wrapper .dx-overlay-content {
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.4),
        0 2px 8px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
body.dx-swatch-dark .dx-toast-wrapper .dx-overlay-content::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
}
body.dx-swatch-dark .dx-toast-info {
    background: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(37,99,235,0.08) 100%) !important;
    background-color: rgba(15,23,42,0.92) !important;
}
body.dx-swatch-dark .dx-toast-info .dx-toast-icon { background-color: rgba(59,130,246,0.2) !important; }
body.dx-swatch-dark .dx-toast-info .dx-toast-message { color: #93c5fd !important; }

body.dx-swatch-dark .dx-toast-success {
    background: linear-gradient(135deg, rgba(16,185,129,0.18) 0%, rgba(5,150,105,0.08) 100%) !important;
    background-color: rgba(15,23,42,0.92) !important;
}
body.dx-swatch-dark .dx-toast-success .dx-toast-icon { background-color: rgba(16,185,129,0.2) !important; }
body.dx-swatch-dark .dx-toast-success .dx-toast-message { color: #6ee7b7 !important; }

body.dx-swatch-dark .dx-toast-warning {
    background: linear-gradient(135deg, rgba(245,158,11,0.18) 0%, rgba(217,119,6,0.08) 100%) !important;
    background-color: rgba(15,23,42,0.92) !important;
}
body.dx-swatch-dark .dx-toast-warning .dx-toast-icon { background-color: rgba(245,158,11,0.2) !important; }
body.dx-swatch-dark .dx-toast-warning .dx-toast-message { color: #fcd34d !important; }

body.dx-swatch-dark .dx-toast-error {
    background: linear-gradient(135deg, rgba(239,68,68,0.18) 0%, rgba(220,38,38,0.08) 100%) !important;
    background-color: rgba(15,23,42,0.92) !important;
}
body.dx-swatch-dark .dx-toast-error .dx-toast-icon { background-color: rgba(239,68,68,0.2) !important; }
body.dx-swatch-dark .dx-toast-error .dx-toast-message { color: #fca5a5 !important; }

/* ══════════════════════════════════════════════════════════════
   DevExpress Dialog (confirm / alert) 디자인 정리
   ══════════════════════════════════════════════════════════════ */
.dx-dialog-wrapper .dx-overlay-content {
    border-radius: 14px !important;
    border: 1px solid rgba(226,230,239,0.6) !important;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.12),
        0 4px 12px rgba(0,0,0,0.06) !important;
    overflow: hidden;
    min-width: 320px;
    max-width: 480px;
}
.dx-dialog-wrapper .dx-popup-title {
    background: linear-gradient(135deg, #1A2A4A 0%, #1E3A6E 100%) !important;
    border-bottom: none !important;
    padding: 14px 20px !important;
}
.dx-dialog-wrapper .dx-popup-title .dx-toolbar-label {
    font-size: 0;
}
.dx-dialog-wrapper .dx-popup-title .dx-toolbar-label .dx-toolbar-item-content > div {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: .3px;
}
.dx-dialog-wrapper .dx-dialog-message {
    padding: 22px 24px 18px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #334155;
}
.dx-dialog-wrapper .dx-popup-bottom {
    padding: 10px 20px 16px !important;
    border-top: 1px solid rgba(226,230,239,0.5) !important;
    background: #f8f9fc !important;
}
.dx-dialog-wrapper .dx-popup-bottom .dx-button {
    min-width: 80px;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 0 !important;
    margin: 0 4px !important;
    transition: all 0.2s ease;
}
.dx-dialog-wrapper .dx-popup-bottom .dx-button .dx-button-content {
    padding: 8px 18px !important;
}
/* 확인(Yes) 버튼 – 첫번째 버튼 */
.dx-dialog-wrapper .dx-popup-bottom .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-item:first-child .dx-button {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(37,99,235,0.3);
}
.dx-dialog-wrapper .dx-popup-bottom .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-item:first-child .dx-button.dx-state-hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    box-shadow: 0 4px 12px rgba(37,99,235,0.25);
    transform: translateY(-1px);
}
/* 취소(No) 버튼 – 두번째 버튼 */
.dx-dialog-wrapper .dx-popup-bottom .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-item:last-child .dx-button {
    background: #fff !important;
    color: #475569 !important;
    border: 1px solid #e2e6ef !important;
}
.dx-dialog-wrapper .dx-popup-bottom .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-item:last-child .dx-button.dx-state-hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

/* ── Dialog Dark Mode ── */
body.dx-swatch-dark .dx-dialog-wrapper .dx-overlay-content {
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.4),
        0 4px 12px rgba(0,0,0,0.2) !important;
}
body.dx-swatch-dark .dx-dialog-wrapper .dx-dialog-message {
    color: #e2e8f0;
}
body.dx-swatch-dark .dx-dialog-wrapper .dx-popup-bottom {
    background: #0f172a !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}
body.dx-swatch-dark .dx-dialog-wrapper .dx-popup-bottom .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-item:last-child .dx-button {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border: 1px solid #334155 !important;
}
body.dx-swatch-dark .dx-dialog-wrapper .dx-popup-bottom .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-item:last-child .dx-button.dx-state-hover {
    background: #334155 !important;
    border-color: #475569 !important;
}

/* ── 폼 필드 ─────────────────────────────────────────────────── */

.dx-field-item:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) {
    padding-top: 4px;
    padding-bottom: 4px;
}

.dx-layout-manager .dx-field-item {
    font-size: 13px;
    padding-bottom: 0;
}

    .dx-layout-manager .dx-field-item:not(.dx-first-row) {
        padding-top: 0px;
    }

    .dx-layout-manager .dx-field-item:not(.dx-first-col) {
        padding-left: 0;
    }

    .dx-layout-manager .dx-field-item:not(.dx-last-col) {
        padding-right: 0;
    }

    .dx-layout-manager .dx-field-item:has(.dx-field-item-label):not(.dx-first-col) {
    }

.dx-layout-manager .dx-label-h-align.dx-flex-layout {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

/* 팝업 내 폼 간격 미세 조정 */
.dx-popup-content .dx-layout-manager .dx-field-item {
    padding-bottom: 2px;
}

.dx-popup-content .dx-layout-manager .dx-field-item:not(.dx-first-row) {
    padding-top: 2px;
}

/* ── 폼 필드 라벨 모던 스타일 ─────────────────────────────────── */
.dx-field-item-label .dx-field-item-label-content .dx-field-item-label-text {
    font-weight: var(--form-label-weight);
    font-size: 12.5px;
    letter-spacing: .1px;
    color: var(--color-default);
    opacity: .72;
}

.iz_widget-value > .dx-state-readonly {
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   에디터 상태 구분 시스템
   입력가능(흰색) / 읽기전용(회색+점선) / 필수값(주황)
   ★ 폼 필드(.dx-field-item-content) 내부에만 적용 – 메뉴검색·로그인·조회조건 미영향
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. 입력 가능한 필드: 흰색 배경 (폼 필드 내부만) ──────── */
.dx-field-item-content .dx-texteditor:not(.dx-state-readonly):not(.dx-state-disabled) .dx-texteditor-container {
    background-color: var(--color-bg-edit-editable);
}

/* ── 2. 읽기전용 필드: 회색 배경 + 점선 테두리 (폼 필드 내부만) ── */
.dx-field-item-content .dx-state-readonly {
    background-color: var(--color-bg-edit-readonly) !important;
    color: var(--color-readonly-text) !important;
}

.dx-field-item-content .dx-state-readonly .dx-texteditor-container {
    border-style: dashed !important;
    border-color: var(--color-formfield-border) !important;
    background-color: var(--color-bg-edit-readonly);
}

.dx-field-item-content .dx-state-readonly .dx-texteditor-input {
    cursor: default !important;
}

/* 읽기전용 드롭다운: 아이콘 흐리게 */
.dx-field-item-content .dx-state-readonly .dx-dropdowneditor-icon::before {
    opacity: .35;
}

/* 읽기전용 라디오그룹 */
.dx-field-item-content .dx-state-readonly[role=radiogroup] {
    background-color: transparent !important;
}

.dx-field-item-content .dx-state-readonly[role=radiogroup] .dx-radiobutton-icon::before {
    opacity: .45;
}

/* 읽기전용 체크박스 */
.dx-field-item-content .dx-checkbox.dx-state-readonly .dx-checkbox-icon {
    border-style: dashed;
    background-color: var(--color-bg-edit-readonly);
    opacity: .65;
}

/* ── 3. 비활성 필드: 읽기전용 + 커서 변경 (폼 필드 내부만) ── */
.dx-field-item-content .dx-state-disabled .dx-texteditor-container {
    border-style: dashed !important;
    border-color: var(--color-formfield-border) !important;
    background-color: var(--color-bg-edit-readonly);
}

.dx-field-item-content .dx-state-disabled .dx-texteditor-input {
    cursor: not-allowed !important;
}

/* ── 4. 필수 필드: 따뜻한 주황 배경 + 왼쪽 강조선 ─────────── */
.dx-field-item.dx-field-item-required > .dx-field-item-content > .dx-show-invalid-badge:not(.dx-htmleditor) {
    background-color: var(--color-bg-edit-basic);
}

.dx-field-item.dx-field-item-required > .dx-field-item-content > .dx-show-invalid-badge:not(.dx-htmleditor) .dx-texteditor-container {
    border-color: var(--form-required-accent) !important;
    border-style: solid !important;
    border-width: 1px;
    border-left-width: 3px;
    background-color: var(--color-bg-edit-basic);
}

/* ── 5. 데이터그리드 편집 셀 구분 ──────────────────────────── */

/* 그리드 편집 가능 셀 (배치 모드): 흰색 배경 + 연한 좌측 강조선 */
.dx-datagrid-rowsview .dx-editor-cell .dx-texteditor:not(.dx-state-readonly) .dx-texteditor-container {
    background-color: #FFFFFF;
    border-left: 2px solid var(--color-iz-main);
}

/* 그리드 편집 불가능 셀 (allowEditing: false) */
.dx-datagrid-rowsview .dx-editor-cell .dx-texteditor.dx-state-readonly .dx-texteditor-container {
    background-color: var(--color-bg-edit-readonly);
    border-style: none;
}

/* 그리드 수정된 셀 강조 */
.dx-datagrid .dx-row > td.dx-cell-modified:not(.dx-field-item-content) {
    background-color: rgba(255, 152, 0, .08) !important;
}

/* 그리드 신규 행 배경 */
.dx-datagrid-rowsview .dx-row-inserted > td {
    background-color: rgba(26, 111, 219, .06) !important;
}

/* ── 6. 필수값 헤더 표시 (공통) ─────────────────────────────── */

/* 그리드 헤더에 필수 표시 마커 */
.dx-datagrid-headers td.iz-required-col .dx-datagrid-text-content::after {
    content: " *";
    color: var(--form-required-accent);
    font-weight: 700;
}

/* 폼 필드 필수 라벨 표시 */
.dx-field-item.dx-field-item-required .dx-field-item-label-text::after {
    content: " *";
    color: var(--form-required-accent);
    font-weight: 700;
}

/* 일반 label 태그 필수 표시 (.iz-required 클래스 사용) */
label.iz-required::after {
    content: " *";
    color: var(--form-required-accent);
    font-weight: 700;
}

/* 읽기전용 필드 배경 구분 */
.dx-texteditor.dx-state-readonly .dx-texteditor-container,
.dx-texteditor[readonly] .dx-texteditor-container {
    background-color: var(--color-bg-edit-readonly) !important;
}

/* ── outlined 에디터: 둥근 모서리 + 전환 효과 ────────────── */
.dx-texteditor.dx-editor-outlined .dx-texteditor-container {
    transition: var(--form-field-transition);
    border-radius: var(--form-field-radius) !important;
}

/* ── 포커스 효과: 파란 테두리 + 그림자 (outlined만) ────────── */
.dx-texteditor.dx-editor-outlined.dx-state-focused .dx-texteditor-container {
    border-color: var(--color-iz-main) !important;
    box-shadow: var(--form-field-focus-shadow);
}

.dx-dropdowneditor.dx-editor-outlined.dx-state-focused .dx-texteditor-container {
    border-color: var(--color-iz-main) !important;
    box-shadow: var(--form-field-focus-shadow);
}

/* ── 셀렉트박스/드롭다운: 버튼 영역 구분 (폼 내부만) ────── */
.dx-field-item-content .dx-dropdowneditor .dx-dropdowneditor-button {
    border-left: 1px solid var(--color-formfield-border);
    border-radius: 0 var(--form-field-radius) var(--form-field-radius) 0;
}

/* ── 체크박스: 모서리 둥글게 ──────────────────────────────── */
.dx-checkbox .dx-checkbox-icon {
    border-radius: 4px;
}

.dx-radiogroup-horizontal .dx-collection {
    height: 25px;
    padding: 2px 4px;
}

/* 아이엠지 폼 필드 */
.iz-form {
    padding: 0;
    border-radius: 8px;
    background-color: var(--color-bg-form);
}

.iz-form-none-border {
    padding: 0;
    border-radius: 8px;
    background-color: var(--color-bg-form);
}

/* TextEditor padding 수정 */
.dx-rtl .dx-texteditor.dx-editor-filled.dx-show-clear-button .dx-texteditor-input,
.dx-rtl .dx-texteditor.dx-editor-outlined.dx-show-clear-button .dx-texteditor-input,
.dx-rtl.dx-texteditor.dx-editor-filled.dx-show-clear-button .dx-texteditor-input,
.dx-rtl.dx-texteditor.dx-editor-outlined.dx-show-clear-button .dx-texteditor-input,
.dx-texteditor.dx-editor-filled .dx-placeholder:before,
.dx-texteditor.dx-editor-filled .dx-texteditor-input,
.dx-texteditor.dx-editor-outlined .dx-placeholder:before,
.dx-texteditor.dx-editor-outlined .dx-texteditor-input {
    padding: 6px 8px;
}

/* TextBox Readonly 투명도 수정 */
.dx-texteditor.dx-editor-outlined.dx-state-disabled .dx-texteditor-input,
.dx-texteditor.dx-editor-outlined.dx-state-readonly .dx-texteditor-input,
.dx-texteditor.dx-editor-outlined.dx-state-readonly.dx-state-hover .dx-texteditor-input {
    color: var(--color-readonly-text);
}

/* ── 팝업 ────────────────────────────────────────────────────── */

.dx-popup-wrapper > .dx-popup-fullscreen {
    border-radius: 0;
    position: relative;
}

    .dx-popup-wrapper > .dx-popup-fullscreen .dx-popup-bottom.dx-toolbar {
        padding: 0 8px 0 16px;
        overflow: visible;
        position: absolute;
        bottom: 0;
    }

/* 팝업 타이틀 배경 색상 */
.dx-toolbar.dx-widget.dx-visibility-change-handler.dx-collection.dx-popup-title {
    background: var(--color-bg-popup-title);
    color: white;
}

.dx-popup-title.dx-toolbar .dx-toolbar-items-container {
    height: 30px;
}

.dx-toolbar-label .dx-toolbar-item-content > div::before {
    content: url("/image/title_icon.png");
    margin-right: 5px;
    font-size: 14px;
}

/* 팝업 모서리 둥글게 (비-풀스크린) */
.dx-overlay-content.dx-popup-normal {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08) !important;
}

    .dx-overlay-content.dx-popup-normal .dx-popup-title {
        border-radius: 14px 14px 0 0;
    }

/* ── 폼 기타 ─────────────────────────────────────────────────── */

.dx-dropdownlist-popup-wrapper .dx-toolbar.dx-widget.dx-visibility-change-handler.dx-collection.dx-popup-bottom {
    border-top: 1px solid #eeeeee;
}

.dx-datagrid-headers .dx-checkbox-icon {
    border: 2px solid #FFFFFF;
}

.dx-datagrid-headers .dx-checkbox-checked .dx-checkbox-icon,
.dx-datagrid-headers .dx-checkbox-indeterminate .dx-checkbox-icon {
    border: 1px solid #FFFFFF;
}

.dx-theme-material-typography a {
    color: var(--color-accent);
    text-decoration: none;
}

    .dx-theme-material-typography a:hover {
        text-decoration: underline;
    }

.iz-panel-right .dx-list .dx-list-item {
    border-top: 1px solid #ddd;
    color: #333;
}

    .iz-panel-right .dx-list .dx-list-item:first-of-type {
        border-top: 1px solid #ddd;
        color: #333;
    }

    .iz-panel-right .dx-list .dx-list-item:last-of-type {
        border-bottom: 1px solid #ddd;
        color: #333;
    }

/* form numberbox 오른쪽정렬 */
.dx-form .dx-numberbox input {
    text-align: right;
}

.dx-accordion-item {
    margin: 8px 0;
    overflow: hidden;
    border: 1px solid var(--color-common-border);
    box-shadow: none;
    -webkit-box-shadow: none;
}

.dx-accordion-item-title {
    padding: 8px;
    word-break: keep-all;
    white-space: normal;
}

.dx-accordion-item-opened.dx-state-hover > .dx-accordion-item-title,
.dx-accordion-item-opened > .dx-accordion-item-title {
    background-color: transparent;
    border-top: 1px solid var(--color-common-border);
    border-bottom: 1px solid var(--color-common-border);
}

.dx-accordion-item-closed.dx-state-hover > .dx-accordion-item-title,
.dx-accordion-item-closed > .dx-accordion-item-title {
    background-color: transparent;
    border-top: 1px solid var(--color-common-border);
}

.dx-accordion-item-title::before {
    background-position: center;
    float: right;
    font-weight: 400;
    color: #99a1a8;
    content: "\f016";
    font-family: DXIcons;
    font-size: 18px;
    margin-left: 9px;
    margin-right: 0;
    line-height: 24px;
}

.tab-container-search {
    min-height: 36px;
}

    /* 조회조건 버튼 스타일 */
    .tab-container-search .dx-editor-filled .dx-texteditor-buttons-container:last-child > .dx-button:last-child,
    .tab-container-search .dx-editor-filled .dx-texteditor-buttons-container:last-child > .dx-clear-button-area:last-child,
    .tab-container-search .dx-editor-outlined .dx-texteditor-buttons-container:last-child > .dx-button:last-child,
    .tab-container-search .dx-editor-outlined .dx-texteditor-buttons-container:last-child > .dx-clear-button-area:last-child,
    .tab-container-search .dx-editor-underlined .dx-texteditor-buttons-container:last-child > .dx-button:last-child,
    .tab-container-search .dx-editor-underlined .dx-texteditor-buttons-container:last-child > .dx-clear-button-area:last-child {
        margin-right: 0px;
    }

.dx-form-group-caption, .dx-form-group-custom-caption {
    color: var(--color-group-caption);
    font-weight: 700;
    font-size: 14px;
    padding-top: 8px;
    margin-bottom: 0px;
    display: flex;
    flex-basis: 100%;
    align-items: center;
    padding-bottom: 6px;
    letter-spacing: .2px;
}

    .dx-form-group-caption::after, .dx-form-group-custom-caption::after {
        content: "";
        flex-grow: 1;
        background: var(--color-common-border);
        height: 1px;
        font-size: 0px;
        line-height: 0px;
        margin-left: 12px;
    }

    .dx-form-group-caption::before, .dx-form-group-custom-caption::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 14px;
        background: var(--color-iz-main);
        border-radius: 2px;
        margin-right: 8px;
    }

.dx-form-group-with-caption > .dx-form-group-content,
.dx-form-group-with-caption > .dx-form-group-custom-content {
    border-top: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    margin-top: 0px;
}

.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-edit.dx-command-edit-with-icons .dx-link,
.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-datagrid-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-datagrid-select-all).dx-command-edit.dx-command-edit-with-icons .dx-link,
.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td:not(.dx-validation-pending):not(.dx-datagrid-select-all).dx-command-edit.dx-command-edit-with-icons .dx-link {
    width: 16px;
    height: 16px;
    background-position: 0px 0px;
    background-size: 16px 16px;
    padding: 0px;
    font-size: var(--iz-font-size);
    text-align: center;
    line-height: var(--iz-font-size);
    margin: 0px 2px;
    vertical-align: middle;
}

/* ── 카드 ────────────────────────────────────────────────────── */

.card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-card-border);
}

.card-header {
    border-bottom: 1px solid var(--color-card-header-border);
}

.card .nav.flex-column:not(.nav-sidebar) > li {
    border-bottom: 1px solid var(--color-card-header-border);
}

.flex-column {
    margin-top: 0;
}

/* ── 버튼 ────────────────────────────────────────────────────── */

/* contained 모드: 흰색 텍스트 */
.dx-button-mode-contained.dx-button-danger,
.dx-button-mode-contained.dx-button-default {
    color: #fff;
}
.dx-button-mode-contained.dx-button-danger .dx-icon,
.dx-button-mode-contained.dx-button-default .dx-icon {
    color: #fff;
}

/* outlined 모드: 테마 색상 텍스트 + 테두리 */
.dx-button-mode-outlined.dx-button-default {
    color: rgb(255, 87, 34);
    border-color: rgba(255, 87, 34, 0.5);
}
.dx-button-mode-outlined.dx-button-default .dx-icon {
    color: rgb(255, 87, 34);
}
.dx-button-mode-outlined.dx-button-default.dx-state-hover {
    background-color: rgba(255, 87, 34, 0.08);
    border-color: rgb(255, 87, 34);
}
.dx-button-mode-outlined.dx-button-danger {
    color: #ea4335;
    border-color: rgba(234, 67, 53, 0.5);
}
.dx-button-mode-outlined.dx-button-danger .dx-icon {
    color: #ea4335;
}
.dx-button-mode-outlined.dx-button-danger.dx-state-hover {
    background-color: rgba(234, 67, 53, 0.08);
    border-color: #ea4335;
}

/* text 모드: 행삭제 등 (기존 호환) */
.dx-button-mode-text.dx-button-default {
    background-color: rgb(255, 87, 34);
    color: #fff;
    box-shadow: none;
}
.dx-button-mode-text.dx-button-default .dx-icon {
    color: #fff;
}
.dx-button-mode-text.dx-button-default.dx-state-focused,
.dx-button-mode-text.dx-button-default.dx-state-hover {
    background-color: rgba(255, 87, 34, 0.8);
    box-shadow: none;
}

/* 그리드 아래 Data grid 글씨 숨김 */
.dx-gridbase-a11y-status-container {
    width: 0;
    height: 0;
    overflow: hidden;
}

.iz-form-group-caption-grid {
    color: var(--color-group-caption);
    font-weight: 700;
    font-size: 14px;
    padding-top: 10px;
    margin-bottom: 0px;
    display: flex;
    flex-basis: 100%;
    align-items: center;
    padding-bottom: 6px;
    letter-spacing: .2px;
}

    .iz-form-group-caption-grid::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 14px;
        background: var(--color-iz-main);
        border-radius: 2px;
        margin-right: 8px;
    }

    .iz-form-group-caption-grid::after {
        content: "";
        flex-grow: 1;
        background: var(--color-common-border);
        height: 1px;
        font-size: 0px;
        line-height: 0px;
        margin-left: 12px;
    }

.iz-grid .dx-row > td {
    font-family: "맑은고딕" !important;
}

/* ── 스크롤바 ────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #C8CDD9;
    border-radius: 999px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #9CA6BF;
    }

/* 사이드바 전용 스크롤바 */
.menu-container ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
}

    .menu-container ::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,.35);
    }

/* ── 다크모드 그룹캡션 그리드 ─────────────────────────────────── */
body.dx-swatch-dark .iz-form-group-caption-grid::before {
    background: #5B9EF4;
}

body.dx-swatch-dark .iz-form-group-caption-grid::after {
    background: var(--color-common-border);
}

/* ── 다크모드 QA/DP 화면 공통 ──────────────────────────────────── */

/* 다크모드 outlined 버튼 보정 */
body.dx-swatch-dark .dx-button-mode-outlined.dx-button-default {
    color: #ff9800;
    border-color: rgba(255, 152, 0, 0.5);
}
body.dx-swatch-dark .dx-button-mode-outlined.dx-button-default .dx-icon {
    color: #ff9800;
}
body.dx-swatch-dark .dx-button-mode-outlined.dx-button-danger {
    color: #ef5350;
    border-color: rgba(239, 83, 80, 0.5);
}
body.dx-swatch-dark .dx-button-mode-outlined.dx-button-danger .dx-icon {
    color: #ef5350;
}

/* QA 화면 공통 다크모드 */
body.dx-swatch-dark .qa-split-lower,
body.dx-swatch-dark .qa-ca-detail {
    background: var(--color-bg-panel);
}
body.dx-swatch-dark .qa-split-upper {
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .qa-detail-title,
body.dx-swatch-dark .qa-ca-panel-header {
    color: var(--color-default);
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .qa-detail-form .qa-field label,
body.dx-swatch-dark .qa-ca-field label {
    color: rgba(255,255,255,.6);
}
body.dx-swatch-dark .qa-ca-left,
body.dx-swatch-dark .qa-ca-right {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .qa-ca-linked-info {
    background: #1C2A3F;
    color: #B0C4E8;
}
body.dx-swatch-dark .qa-ca-linked-info strong {
    color: #5B9EF4;
}
body.dx-swatch-dark .qa-ca-cause-section {
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .qa-ca-cause-header {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
    color: rgba(255,255,255,.7);
}

/* DP 화면 공통 다크모드 */
body.dx-swatch-dark .dp-panel-left,
body.dx-swatch-dark .dp-panel-right,
body.dx-swatch-dark .dp-panel {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-panel-header {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
    color: var(--color-default);
}
body.dx-swatch-dark .dp-meta-bar,
body.dx-swatch-dark .dp-info-bar {
    background: #1C2A3F;
    border-color: var(--color-common-border);
    color: #B0C4E8;
}
body.dx-swatch-dark .dp-meta-item label,
body.dx-swatch-dark .dp-info-item label {
    color: rgba(255,255,255,.5);
}
body.dx-swatch-dark .dp-meta-item span,
body.dx-swatch-dark .dp-info-item span {
    color: var(--color-default);
}
body.dx-swatch-dark .dp-kpi-card {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-kpi-card .kpi-label {
    color: rgba(255,255,255,.5);
}
body.dx-swatch-dark .dp-kpi-card .kpi-value {
    color: var(--color-default);
}
body.dx-swatch-dark .dp-filter-section {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
}

/* 레시피 분석 다크모드 */
body.dx-swatch-dark .recipe-card {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .recipe-card-header {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
    color: var(--color-default);
}
body.dx-swatch-dark .recipe-param-row {
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .recipe-param-name {
    color: rgba(255,255,255,.6);
}
body.dx-swatch-dark .recipe-param-value {
    color: var(--color-default);
}
body.dx-swatch-dark .recipe-summary-box {
    background: #1C2A3F;
    border-color: var(--color-common-border);
    color: #B0C4E8;
}

/* T_DP0001UF 데이터연결 다크모드 */
body.dx-swatch-dark .dp-conn-left,
body.dx-swatch-dark .dp-conn-right {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-conn-panel-header {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
    color: var(--color-default);
}
body.dx-swatch-dark .dp-conn-meta {
    background: #1C2A3F;
    border-color: var(--color-common-border);
    color: #B0C4E8;
}
body.dx-swatch-dark .dp-conn-meta-label {
    color: rgba(255,255,255,.6);
}
body.dx-swatch-dark .dp-conn-meta-value {
    color: #5B9EF4;
}

/* T_DP0002UF 데이터 ASSET 다크모드 */
body.dx-swatch-dark .dp-asset-panel {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-asset-panel-header {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
    color: var(--color-default);
}
body.dx-swatch-dark .dp-col-item {
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-col-item:hover,
body.dx-swatch-dark .dp-selected-item:hover {
    background: rgba(91,158,244,.08);
}
body.dx-swatch-dark .dp-col-item .col-name,
body.dx-swatch-dark .dp-selected-item .sel-name {
    color: var(--color-default);
}
body.dx-swatch-dark .dp-col-item .col-type {
    background: #2A3242;
    color: rgba(255,255,255,.5);
}
body.dx-swatch-dark .dp-selected-item {
    border-color: var(--color-common-border);
}

/* T_DP0003UF Dataset Mapping 다크모드 */
body.dx-swatch-dark .dp-mapping-left,
body.dx-swatch-dark .dp-mapping-right {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-mapping-conditions {
    background: #1C2A3F;
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-mapping-actions {
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-mapping-btn-del {
    background: transparent;
    border-color: #ea4335;
}
body.dx-swatch-dark .dp-detail-search {
    background: #1C2A3F;
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-rule-nm-input {
    border-color: var(--color-common-border);
}

/* T_CP0004UF 데이터전처리 다크모드 */
body.dx-swatch-dark .cp-filter-area {
    background: #1C2A3F;
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .cp-filter-grid-wrap {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .cp-action-bar {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
}

/* T_DP0005UF Data Quality 다크모드 */
body.dx-swatch-dark .dp-quality-split-upper {
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-quality-chart-area {
    background: var(--color-bg-panel-content);
}

/* T_DP0006UF Live Monitoring 다크모드 */
body.dx-swatch-dark .dp-monitor-cards {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-monitor-card {
    background: var(--color-bg-panel);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
body.dx-swatch-dark .dp-monitor-card .card-value {
    color: var(--color-default);
}
body.dx-swatch-dark .dp-monitor-status .status-dot {
    background: #555;
}

/* T_QA0002UF 레시피분석 다크모드 추가 */
body.dx-swatch-dark .ra-filter-bar {
    background: #1C2A3F;
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .ra-panel-left,
body.dx-swatch-dark .ra-panel-right {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .ra-panel-header {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
    color: var(--color-default);
}
body.dx-swatch-dark .ra-chart-toolbar {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}

/* T_DP0003UF 추가 (용도/SQL섹션) 다크모드 */
body.dx-swatch-dark .dp-purpose-bar {
    background: #1C2A3F;
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-equip-bar {
    background: rgba(91,158,244,.08);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-sql-section {
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-sql-header {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-sql-body pre {
    background: #1C2A3F;
    border-color: var(--color-common-border);
    color: #B0C4E8;
}
body.dx-swatch-dark .dp-panel-header {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
    color: var(--color-default);
}

/* T_QA0000UF 품질현상분석+DB모니터링 다크모드 */
body.dx-swatch-dark .qa-tab-wrap,
body.dx-swatch-dark .qa-tab-panel {
    background: var(--color-bg-panel);
}
body.dx-swatch-dark .qa-phen-grid-wrap,
body.dx-swatch-dark .qa-phen-detail-form {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .qa-detail-form {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .qa-detail-field label {
    color: rgba(255,255,255,.6);
}
body.dx-swatch-dark .qa-monitor-summary {
    background: #1C2A3F;
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .qa-monitor-card {
    background: var(--color-bg-panel);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* T_QA0001UF AI Management 다크모드 */
body.dx-swatch-dark .qa-ca-left,
body.dx-swatch-dark .qa-ca-right {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .qa-ca-panel-header {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
    color: var(--color-default);
}
body.dx-swatch-dark .qa-purpose-info {
    background: #1C2A3F;
    border-color: var(--color-common-border);
}

/* T_EN1000UF 이상현상리스트 다크모드 */
body.dx-swatch-dark .en-anom-filter {
    background: #1C2A3F;
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .en-anom-card {
    background: var(--color-bg-panel);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* T_EN2000UF 알람이력 다크모드 */
body.dx-swatch-dark .en-alarm-card {
    background: var(--color-bg-panel);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
body.dx-swatch-dark .en-alarm-filter {
    background: #1C2A3F;
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .en-alarm-left,
body.dx-swatch-dark .en-alarm-right {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .en-alarm-detail {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}

/* T_EN3000UF 알람설정 다크모드 */
body.dx-swatch-dark .en-setting-panel {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .en-setting-header {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
    color: var(--color-default);
}
body.dx-swatch-dark .en-setting-form {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .en-smtp-info {
    background: #1C2A3F;
    border-color: var(--color-common-border);
    color: #B0C4E8;
}

/* T_QP1000UF 품목별스펙 다크모드 */
body.dx-swatch-dark .qp-spec-left,
body.dx-swatch-dark .qp-spec-right {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .qp-panel-header {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
    color: var(--color-default);
}
body.dx-swatch-dark .qp-detail-header {
    background: #1C2A3F;
    border-color: var(--color-common-border);
}

/* T_QP2000UF 레시피관리 다크모드 */
body.dx-swatch-dark .qp-recipe-left,
body.dx-swatch-dark .qp-recipe-right {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .qp-recipe-header {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
    color: var(--color-default);
}
body.dx-swatch-dark .qp-recipe-summary {
    background: #1C2A3F;
    border-color: var(--color-common-border);
    color: #B0C4E8;
}

/* T_QP2000UF 설비 설정값 모니터링 다크모드 (타임라인) */
body.dx-swatch-dark .qp-monitor-left,
body.dx-swatch-dark .qp-monitor-right {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .qp2000-filter-bar {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .qp2000-filter-btn {
    color: #94a3b8;
}
body.dx-swatch-dark .qp2000-filter-btn:hover {
    background: #243352;
    color: #e2e8f0;
}
body.dx-swatch-dark .qp2000-filter-btn.active {
    background: #3b82f6;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   AI 솔루션 공통 디자인 시스템 (iz-ai-*)
   버튼 · 카드 · 뱃지 · 패널 · 반응형 · 애니메이션
   ═══════════════════════════════════════════════════════════════ */

/* ── AI 변수 추가 ──────────────────────────────────────────── */
:root {
    --iz-ai-primary: #2563eb;
    --iz-ai-primary-dark: #1d4ed8;
    --iz-ai-success: #059669;
    --iz-ai-success-dark: #047857;
    --iz-ai-warning: #d97706;
    --iz-ai-danger: #dc2626;
    --iz-ai-purple: #7c3aed;
    --iz-ai-purple-dark: #6d28d9;
    --iz-ai-slate-50: #f8fafc;
    --iz-ai-slate-100: #f1f5f9;
    --iz-ai-slate-200: #e2e8f0;
    --iz-ai-slate-300: #cbd5e1;
    --iz-ai-slate-500: #64748b;
    --iz-ai-slate-700: #334155;
    --iz-ai-slate-800: #1e293b;
    --iz-ai-slate-900: #0f172a;
    --iz-ai-radius: 8px;
    --iz-ai-radius-sm: 6px;
    --iz-ai-radius-lg: 12px;
    --iz-ai-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --iz-ai-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --iz-ai-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --iz-ai-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    --iz-ai-transition: all .2s cubic-bezier(.4,0,.2,1);
}

/* ── AI 버튼 시스템 ────────────────────────────────────────── */
.iz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    border: none;
    border-radius: var(--iz-ai-radius-sm);
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: .2px;
    transition: var(--iz-ai-transition);
    white-space: nowrap;
    line-height: 1.4;
    text-decoration: none;
}
.iz-btn:active { transform: scale(.97); }
.iz-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.iz-btn .dx-icon, .iz-btn i { font-size: 14px; }

/* Primary (파란) */
.iz-btn-primary {
    background: linear-gradient(135deg, var(--iz-ai-primary), var(--iz-ai-primary-dark));
    color: #fff;
    box-shadow: 0 1px 3px rgba(37,99,235,.3);
}
.iz-btn-primary:hover {
    background: linear-gradient(135deg, var(--iz-ai-primary-dark), #1e40af);
    box-shadow: 0 4px 12px rgba(37,99,235,.25);
    transform: translateY(-1px);
}

/* Success (초록) */
.iz-btn-success {
    background: linear-gradient(135deg, var(--iz-ai-success), var(--iz-ai-success-dark));
    color: #fff;
    box-shadow: 0 1px 3px rgba(5,150,105,.3);
}
.iz-btn-success:hover {
    background: linear-gradient(135deg, var(--iz-ai-success-dark), #065f46);
    box-shadow: 0 4px 12px rgba(5,150,105,.25);
    transform: translateY(-1px);
}

/* Purple (보라) */
.iz-btn-purple {
    background: linear-gradient(135deg, var(--iz-ai-purple), var(--iz-ai-purple-dark));
    color: #fff;
    box-shadow: 0 1px 3px rgba(124,58,237,.3);
}
.iz-btn-purple:hover {
    background: linear-gradient(135deg, var(--iz-ai-purple-dark), #5b21b6);
    box-shadow: 0 4px 12px rgba(124,58,237,.25);
    transform: translateY(-1px);
}

/* Warning (주황) */
.iz-btn-warning {
    background: linear-gradient(135deg, var(--iz-ai-warning), #b45309);
    color: #fff;
    box-shadow: 0 1px 3px rgba(217,119,6,.3);
}
.iz-btn-warning:hover {
    background: linear-gradient(135deg, #b45309, #92400e);
    transform: translateY(-1px);
}

/* Danger (빨강) */
.iz-btn-danger {
    background: #fff;
    color: var(--iz-ai-danger);
    border: 1px solid #fca5a5;
}
.iz-btn-danger:hover {
    background: #fef2f2;
    border-color: var(--iz-ai-danger);
}

/* Outline (흰 배경) */
.iz-btn-outline {
    background: #fff;
    color: var(--iz-ai-slate-700);
    border: 1px solid var(--iz-ai-slate-300);
}
.iz-btn-outline:hover {
    background: var(--iz-ai-slate-100);
    border-color: var(--iz-ai-slate-500);
}

/* Ghost (테두리 없음) */
.iz-btn-ghost {
    background: transparent;
    color: var(--iz-ai-slate-500);
    border: none;
}
.iz-btn-ghost:hover { background: var(--iz-ai-slate-100); color: var(--iz-ai-slate-700); }

/* 사이즈 */
.iz-btn-xs { padding: 3px 8px; font-size: 10px; border-radius: 4px; gap: 3px; }
.iz-btn-xs .dx-icon, .iz-btn-xs i { font-size: 11px; }
.iz-btn-sm { padding: 5px 12px; font-size: 11px; gap: 4px; }
.iz-btn-sm .dx-icon, .iz-btn-sm i { font-size: 12px; }
.iz-btn-lg { padding: 10px 24px; font-size: 14px; border-radius: var(--iz-ai-radius); }

/* 아이콘 전용 (원형) */
.iz-btn-icon { padding: 7px; border-radius: 50%; }
.iz-btn-icon.iz-btn-sm { padding: 5px; }

/* ── AI 뱃지 시스템 ────────────────────────────────────────── */
.iz-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.iz-badge-blue { background: rgba(37,99,235,.1); color: var(--iz-ai-primary); }
.iz-badge-green { background: rgba(5,150,105,.1); color: var(--iz-ai-success); }
.iz-badge-purple { background: rgba(124,58,237,.1); color: var(--iz-ai-purple); }
.iz-badge-orange { background: rgba(217,119,6,.1); color: var(--iz-ai-warning); }
.iz-badge-red { background: rgba(220,38,38,.1); color: var(--iz-ai-danger); }
.iz-badge-slate { background: var(--iz-ai-slate-100); color: var(--iz-ai-slate-500); }

/* ── AI 카드 시스템 ────────────────────────────────────────── */
.iz-card {
    background: #fff;
    border: 1px solid var(--iz-ai-slate-200);
    border-radius: var(--iz-ai-radius-lg);
    box-shadow: var(--iz-ai-shadow-sm);
    overflow: hidden;
    transition: var(--iz-ai-transition);
}
.iz-card:hover { box-shadow: var(--iz-ai-shadow-md); }
.iz-card-header {
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--iz-ai-slate-900), var(--iz-ai-slate-800));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.iz-card-body { padding: 16px 20px; }
.iz-card-footer {
    padding: 10px 20px;
    background: var(--iz-ai-slate-50);
    border-top: 1px solid var(--iz-ai-slate-200);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── AI 패널 헤더 (다크) ───────────────────────────────────── */
.iz-panel-dark {
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--iz-ai-slate-900) 0%, var(--iz-ai-slate-800) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 16px;
}
.iz-panel-dark .iz-panel-title { font-weight: 700; font-size: 14px; flex: 1; }

/* ── AI KPI 카드 ───────────────────────────────────────────── */
.iz-kpi {
    text-align: center;
    min-width: 80px;
}
.iz-kpi-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.2;
}
.iz-kpi-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .7;
    margin-top: 2px;
}

/* ── AI 폼 행 ──────────────────────────────────────────────── */
.iz-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--iz-ai-slate-50);
    border-bottom: 1px solid var(--iz-ai-slate-200);
    flex-wrap: wrap;
}
.iz-form-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--iz-ai-slate-700);
    white-space: nowrap;
}
.iz-form-label .req { color: var(--iz-ai-danger); margin-left: 2px; }
.iz-form-sep {
    width: 1px;
    height: 28px;
    background: var(--iz-ai-slate-300);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── AI 프로그레스바 ───────────────────────────────────────── */
.iz-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.iz-progress-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,.12);
    border-radius: 3px;
    overflow: hidden;
}
.iz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--iz-ai-primary), #60a5fa);
    border-radius: 3px;
    transition: width .4s ease;
}
.iz-progress-pct {
    font-size: 12px;
    font-weight: 600;
    color: #60a5fa;
    min-width: 40px;
    text-align: right;
}

/* ── AI 힌트/배너 ──────────────────────────────────────────── */
.iz-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 500;
    border-bottom: 1px solid transparent;
}
.iz-hint-blue { background: linear-gradient(90deg,#eff6ff,#dbeafe); border-color: #bfdbfe; color: #1e40af; }
.iz-hint-green { background: linear-gradient(90deg,#f0fdf4,#dcfce7); border-color: #bbf7d0; color: #166534; }
.iz-hint-purple { background: linear-gradient(90deg,#faf5ff,#f3e8ff); border-color: #e9d5ff; color: #6b21a8; }
.iz-hint-orange { background: linear-gradient(90deg,#fffbeb,#fef3c7); border-color: #fde68a; color: #92400e; }
.iz-hint .iz-hint-icon { font-size: 16px; flex-shrink: 0; }
.iz-hint .iz-hint-text { flex: 1; }

/* ── AI 알림 도트 ──────────────────────────────────────────── */
.iz-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.iz-dot-green { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.2); }
.iz-dot-red { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.2); }
.iz-dot-orange { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.2); }
.iz-dot-blue { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }

/* ── AI 스켈레톤 로딩 ──────────────────────────────────────── */
@keyframes iz-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.iz-skeleton {
    background: linear-gradient(90deg, var(--iz-ai-slate-100) 25%, var(--iz-ai-slate-200) 50%, var(--iz-ai-slate-100) 75%);
    background-size: 200% 100%;
    animation: iz-shimmer 1.5s infinite;
    border-radius: 4px;
}

/* ── DevExtreme 버튼 AI 오버라이드 ──────────────────────────── */
/* contained default → AI primary gradient */
.dx-button-mode-contained.dx-button-default {
    background: linear-gradient(135deg, var(--iz-ai-primary), var(--iz-ai-primary-dark)) !important;
    border: none !important;
    border-radius: var(--iz-ai-radius-sm) !important;
    box-shadow: 0 1px 3px rgba(37,99,235,.25);
    transition: var(--iz-ai-transition);
}
.dx-button-mode-contained.dx-button-default.dx-state-hover {
    background: linear-gradient(135deg, var(--iz-ai-primary-dark), #1e40af) !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.2);
    transform: translateY(-1px);
}
.dx-button-mode-contained.dx-button-default.dx-state-active {
    transform: scale(.97);
}

/* contained success → AI success gradient */
.dx-button-mode-contained.dx-button-success {
    background: linear-gradient(135deg, var(--iz-ai-success), var(--iz-ai-success-dark)) !important;
    border: none !important;
    border-radius: var(--iz-ai-radius-sm) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(5,150,105,.25);
    transition: var(--iz-ai-transition);
}
.dx-button-mode-contained.dx-button-success .dx-icon { color: #fff !important; }
.dx-button-mode-contained.dx-button-success.dx-state-hover {
    background: linear-gradient(135deg, var(--iz-ai-success-dark), #065f46) !important;
    box-shadow: 0 4px 12px rgba(5,150,105,.2);
    transform: translateY(-1px);
}

/* contained danger → AI danger */
.dx-button-mode-contained.dx-button-danger {
    background: linear-gradient(135deg, var(--iz-ai-danger), #b91c1c) !important;
    border: none !important;
    border-radius: var(--iz-ai-radius-sm) !important;
    box-shadow: 0 1px 3px rgba(220,38,38,.25);
    transition: var(--iz-ai-transition);
}
.dx-button-mode-contained.dx-button-danger.dx-state-hover {
    background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
    transform: translateY(-1px);
}

/* outlined default → 깔끔한 테두리 + AI 색상 */
.dx-button-mode-outlined.dx-button-default {
    color: var(--iz-ai-primary) !important;
    border-color: rgba(37,99,235,.35) !important;
    border-radius: var(--iz-ai-radius-sm) !important;
    transition: var(--iz-ai-transition);
}
.dx-button-mode-outlined.dx-button-default .dx-icon {
    color: var(--iz-ai-primary) !important;
}
.dx-button-mode-outlined.dx-button-default.dx-state-hover {
    background-color: rgba(37,99,235,.06) !important;
    border-color: var(--iz-ai-primary) !important;
}

/* outlined normal → 회색 테두리 */
.dx-button-mode-outlined.dx-button-normal {
    border-radius: var(--iz-ai-radius-sm) !important;
    border-color: var(--iz-ai-slate-300) !important;
    transition: var(--iz-ai-transition);
}
.dx-button-mode-outlined.dx-button-normal.dx-state-hover {
    background-color: var(--iz-ai-slate-50) !important;
    border-color: var(--iz-ai-slate-500) !important;
}

/* ── 모든 dxButton 공통: 둥근 모서리 + 부드러운 전환 ──────── */
.dx-button {
    border-radius: var(--iz-ai-radius-sm) !important;
    transition: var(--iz-ai-transition);
}
.dx-button .dx-button-content {
    padding: 5px 12px;
    font-weight: 600;
    letter-spacing: .1px;
}
.dx-button.dx-button-has-icon:not(.dx-button-has-text) .dx-button-content {
    padding: 5px 8px;
}

/* ── 팝업 AI 개선 ──────────────────────────────────────────── */
.dx-popup-title .dx-toolbar-label .dx-toolbar-item-content > div {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
}

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .iz-form-row { padding: 8px 14px; gap: 8px; }
    .iz-form-sep { display: none; }
    .iz-card-header { padding: 10px 14px; font-size: 13px; }
    .iz-card-body { padding: 12px 14px; }
}

@media (max-width: 768px) {
    .iz-form-row { flex-direction: column; align-items: flex-start; }
    .iz-form-sep { display: none; }
    .iz-panel-dark { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
    .iz-kpi { min-width: 60px; }
    .iz-kpi-value { font-size: 18px; }
    .iz-btn { padding: 6px 12px; font-size: 11px; }
    .iz-card-header { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 480px) {
    .iz-btn-lg { padding: 8px 16px; font-size: 12px; }
    .iz-hint { flex-wrap: wrap; padding: 8px 12px; }
}

/* ── AI 다크모드 ───────────────────────────────────────────── */
body.dx-swatch-dark {
    --iz-ai-slate-50: #1e293b;
    --iz-ai-slate-100: #1e293b;
    --iz-ai-slate-200: #334155;
    --iz-ai-slate-300: #475569;
    --iz-ai-slate-500: #94a3b8;
    --iz-ai-slate-700: #e2e8f0;
    --iz-ai-slate-800: #0f172a;
    --iz-ai-slate-900: #020617;
}

body.dx-swatch-dark .iz-card {
    background: var(--color-bg-panel);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .iz-card-header {
    background: linear-gradient(135deg, #020617, #0f172a);
}
body.dx-swatch-dark .iz-card-footer {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .iz-form-row {
    background: #1C2A3F;
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .iz-hint-blue { background: linear-gradient(90deg,#1C2A3F,#1e3a5f); border-color: #1e3a5f; color: #93c5fd; }
body.dx-swatch-dark .iz-hint-green { background: linear-gradient(90deg,#1C2A3F,#14332a); border-color: #14532d; color: #86efac; }
body.dx-swatch-dark .iz-hint-purple { background: linear-gradient(90deg,#1C2A3F,#2e1065); border-color: #3b0764; color: #c4b5fd; }
body.dx-swatch-dark .iz-btn-outline {
    background: transparent;
    border-color: var(--color-common-border);
    color: var(--color-default);
}
body.dx-swatch-dark .iz-btn-danger {
    background: transparent;
    border-color: #f87171;
    color: #f87171;
}

/* ── T_DP0003UF 다크모드 신규 클래스 ──────────────────────── */
body.dx-swatch-dark .dp-form-row {
    background: #1C2A3F;
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-join-suggest {
    background: linear-gradient(90deg,#1C2A3F,#1e3a5f);
    border-color: #1e3a5f;
}
body.dx-swatch-dark .dp-join-suggest .suggest-text { color: #93c5fd; }
body.dx-swatch-dark .dp-btn-primary {
    background: linear-gradient(135deg, var(--iz-ai-primary), var(--iz-ai-primary-dark));
}
body.dx-swatch-dark .dp-btn-outline {
    background: transparent;
    border-color: var(--color-common-border);
    color: var(--color-default);
}

/* ═══════════════════════════════════════════════════════════════
   데이터 플랫폼 공통 컴포넌트
   패널 · 뱃지 · 파이프라인 · 그리드 강화
   ═══════════════════════════════════════════════════════════════ */

/* ── 패널 공통 ── */
.dp-panel {
    display: flex; flex-direction: column;
    border: 1px solid var(--color-common-border, #e2e6ef);
    border-radius: 10px;
    background: var(--color-bg-panel, #fff);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.dp-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    font-weight: 600; font-size: 13px;
    flex-shrink: 0;
}
.dp-panel-header .dp-badge-count {
    background: rgba(255,255,255,.2); color: #fff;
    border-radius: 12px; padding: 2px 12px;
    font-size: 11px; font-weight: 600;
}
.dp-panel-body { flex: 1; min-height: 0; overflow: hidden; }

/* 패널 헤더 내 버튼 - 다크 배경에서 보이도록 */
.dp-panel-header .dx-button {
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 6px !important;
    color: #fff !important;
    transition: all .2s ease;
}
.dp-panel-header .dx-button:hover {
    background: rgba(255,255,255,.22) !important;
    border-color: rgba(255,255,255,.4) !important;
}
.dp-panel-header .dx-button .dx-button-text { color: #fff !important; font-weight: 600; font-size: 12px; }
.dp-panel-header .dx-button .dx-icon { color: #fff !important; }
.dp-panel-meta {
    padding: 10px 16px;
    background: var(--color-bg-panel-content, #f8fafc);
    border-bottom: 1px solid var(--color-common-border, #e2e6ef);
    font-size: 12px; color: #64748b;
    flex-shrink: 0;
}
.dp-panel-meta strong { color: var(--color-iz-main, #1A6FDB); font-weight: 600; }

/* ── 뱃지 공통 ── */
.dp-status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 20px;
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase;
}
.dp-status-badge.online  { background: #dcfce7; color: #15803d; }
.dp-status-badge.csv     { background: #e0f2fe; color: #0369a1; }
.dp-status-badge.setting { background: #dbeafe; color: #1d4ed8; }
.dp-status-badge.complete{ background: #dcfce7; color: #15803d; }
.dp-status-badge.error   { background: #fef2f2; color: #dc2626; }
.dp-status-badge.syncing { background: #fef9c3; color: #a16207; }
.dp-status-badge::before {
    content: ''; display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}

/* ── 타입 뱃지 ── */
.dp-type-pill {
    display: inline-block; padding: 2px 10px;
    border-radius: 12px; font-size: 10px; font-weight: 700;
    color: #fff; letter-spacing: .5px;
}
.dp-type-pill.db   { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.dp-type-pill.csv  { background: linear-gradient(135deg, #059669, #047857); }
.dp-type-pill.num  { background: #2563eb; }
.dp-type-pill.text { background: #475569; }
.dp-type-pill.date { background: #7c3aed; }

/* ── 파이프라인 (진행 상태) ── */
.dp-pipeline {
    display: inline-flex; align-items: center; gap: 0;
}
.dp-pipeline-step {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    position: relative;
}
.dp-pipeline-dot {
    width: 18px; height: 18px; border-radius: 50%;
    background: #e2e8f0; border: 2px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; color: #fff; font-weight: 700;
    transition: all .3s ease;
}
.dp-pipeline-dot.done {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #22c55e;
}
.dp-pipeline-dot.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #3b82f6;
    animation: dp-pulse 1.5s infinite;
}
.dp-pipeline-label {
    font-size: 9px; color: #94a3b8; font-weight: 500;
}
.dp-pipeline-label.done { color: #16a34a; font-weight: 600; }
.dp-pipeline-label.active { color: #2563eb; font-weight: 600; }
.dp-pipeline-line {
    width: 20px; height: 2px;
    background: #e2e8f0; margin: 0 2px;
    align-self: flex-start; margin-top: 8px;
    transition: background .3s ease;
}
.dp-pipeline-line.done { background: #22c55e; }
@keyframes dp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,.4); }
    50%      { box-shadow: 0 0 0 6px rgba(59,130,246,0); }
}

/* ── 그리드 행번호 컬럼 ── */
.dp-grid-rowno { color: #94a3b8; font-size: 11px; font-weight: 500; }

/* ── 그리드 숫자 포맷 ── */
.dp-grid-number { font-variant-numeric: tabular-nums; font-weight: 500; }
.dp-grid-number.highlight { color: var(--iz-ai-primary, #2563eb); font-weight: 700; }
.dp-grid-number.danger { color: #dc2626; font-weight: 700; }

/* ── 다크모드 ── */
body.dx-swatch-dark .dp-panel {
    border-color: var(--color-common-border);
    background: var(--color-bg-panel);
}
body.dx-swatch-dark .dp-panel-header {
    background: linear-gradient(135deg, #0c1425, #162032);
}
body.dx-swatch-dark .dp-panel-header .dx-button {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.2) !important;
}
body.dx-swatch-dark .dp-panel-header .dx-button:hover {
    background: rgba(255,255,255,.15) !important;
}
body.dx-swatch-dark .dp-panel-meta {
    background: var(--color-bg-panel-content);
    border-color: var(--color-common-border);
}
body.dx-swatch-dark .dp-status-badge.online  { background: #052e16; color: #4ade80; }
body.dx-swatch-dark .dp-status-badge.setting { background: #1e3a5f; color: #60a5fa; }
body.dx-swatch-dark .dp-status-badge.complete{ background: #052e16; color: #4ade80; }

.dp-form-label .req {
    color: #dc2626;
    margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════
   공통 탭 바 스타일 (QA/MPS 화면 공통 사용)
   ═══════════════════════════════════════════════════════════ */
.qa-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-common-border, #e0e0e0);
    flex-shrink: 0;
    background: var(--color-bg-panel-content, #f8f9fa);
    padding: 0 12px;
}
.qa-tab-item {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-readonly-text, #888);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    user-select: none;
}
.qa-tab-item:hover {
    color: var(--color-default, #333);
    background: rgba(26, 111, 219, 0.04);
}
.qa-tab-item.active {
    color: var(--color-iz-main, #1A6FDB);
    border-bottom-color: var(--color-iz-main, #1A6FDB);
    background: transparent;
}
.qa-tab-content {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
}
.qa-tab-content.active {
    display: flex;
}

/* 다크모드 탭 바 */
body.dx-swatch-dark .qa-tab-bar { background: #0f172a; border-color: #334155; }
body.dx-swatch-dark .qa-tab-item { color: #64748b; }
body.dx-swatch-dark .qa-tab-item:hover { color: #e2e8f0; background: rgba(96, 165, 250, 0.06); }
body.dx-swatch-dark .qa-tab-item.active { color: #60a5fa; border-bottom-color: #60a5fa; }

/* ═══════════════════════════════════════════════════════════
   3D 차트 컨테이너 기본 스타일
   ═══════════════════════════════════════════════════════════ */
.chart3d-container {
    width: 100%;
    min-height: 400px;
    border: 1px solid var(--color-common-border, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-panel, #fff);
}
body.dx-swatch-dark .chart3d-container {
    border-color: #334155;
    background: #1e293b;
}

/* ═══════════════════════════════════════════════════════════
   설비 구성품 가이드 공통 스타일
   ═══════════════════════════════════════════════════════════ */
.eq-comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    padding: 16px;
}
.eq-comp-card {
    border: 1px solid var(--color-common-border, #e0e0e0);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-panel, #fff);
    transition: all 0.3s ease;
    cursor: pointer;
}
.eq-comp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-color: var(--color-iz-main, #1A6FDB);
}
.eq-comp-card.active {
    border-color: var(--color-iz-main, #1A6FDB);
    box-shadow: 0 0 0 2px rgba(26, 111, 219, 0.2);
}
.eq-comp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-common-border, #e0e0e0);
}
.eq-comp-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.3s;
}
.eq-comp-card:hover .eq-comp-icon { transform: scale(1.1) rotate(5deg); }
.eq-comp-icon.mold { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.eq-comp-icon.injection { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.eq-comp-icon.clamping { background: linear-gradient(135deg, #059669, #047857); }
.eq-comp-icon.hydraulic { background: linear-gradient(135deg, #d97706, #b45309); }
.eq-comp-icon.electrical { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.eq-comp-icon.cooling { background: linear-gradient(135deg, #0891b2, #0e7490); }
.eq-comp-title { font-size: 15px; font-weight: 700; color: var(--color-default, #333); }
.eq-comp-subtitle { font-size: 11px; color: var(--color-readonly-text, #888); margin-top: 2px; }
.eq-comp-body {
    padding: 14px 16px;
    font-size: 12px;
    color: var(--color-default, #555);
    line-height: 1.7;
}
.eq-comp-parts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.eq-comp-parts-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: var(--color-bg-panel-content, #f0f0f0);
    color: var(--color-default, #555);
    border: 1px solid var(--color-common-border, #e0e0e0);
}
.eq-comp-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    border-top: 1px solid transparent;
}
.eq-comp-card.active .eq-comp-detail {
    max-height: 500px;
    border-top-color: var(--color-common-border, #e0e0e0);
}
.eq-comp-detail-inner {
    padding: 14px 16px;
    background: var(--color-bg-panel-content, #f8f9fa);
}

/* 다크모드 구성품 가이드 */
body.dx-swatch-dark .eq-comp-card { background: #1e293b; border-color: #334155; }
body.dx-swatch-dark .eq-comp-card:hover { border-color: #60a5fa; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
body.dx-swatch-dark .eq-comp-card.active { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96,165,250,0.3); }
body.dx-swatch-dark .eq-comp-header { border-color: #334155; }
body.dx-swatch-dark .eq-comp-title { color: #e2e8f0; }
body.dx-swatch-dark .eq-comp-subtitle { color: #64748b; }
body.dx-swatch-dark .eq-comp-body { color: #94a3b8; }
body.dx-swatch-dark .eq-comp-parts-chip { background: #334155; color: #94a3b8; border-color: #475569; }
body.dx-swatch-dark .eq-comp-detail-inner { background: #0f172a; }

/* ═══════════════════════════════════════════════════════════
   부품정보 팝업 스타일 (인터랙티브 상세)
   ═══════════════════════════════════════════════════════════ */
.eq-parts-popup-body {
    padding: 16px;
    overflow-y: auto;
    height: 100%;
}

/* 팝업 카드 그리드 */
.pp-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px;
}

/* 각 카드 */
.pp-card {
    border: 1px solid var(--color-common-border, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-bg-panel, #fff);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    animation: ppCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.pp-card:nth-child(1) { animation-delay: 0.05s; }
.pp-card:nth-child(2) { animation-delay: 0.12s; }
.pp-card:nth-child(3) { animation-delay: 0.19s; }
.pp-card:nth-child(4) { animation-delay: 0.26s; }
.pp-card:nth-child(5) { animation-delay: 0.33s; }
.pp-card:nth-child(6) { animation-delay: 0.40s; }

@keyframes ppCardIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.pp-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-4px) scale(1.01);
    border-color: var(--color-iz-main, #1A6FDB);
}
.pp-card.pp-expanded {
    box-shadow: 0 8px 32px rgba(26,111,219,0.18);
    border-color: var(--color-iz-main, #1A6FDB);
    grid-column: 1 / -1;
}

/* 카드 헤더 */
.pp-card-head {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.pp-card-head::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08;
    z-index: 0;
    transition: opacity 0.3s;
}
.pp-card:hover .pp-card-head::before { opacity: 0.14; }

/* 아이콘 */
.pp-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff;
    position: relative; z-index: 1;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.pp-card:hover .pp-icon { transform: scale(1.12) rotate(-5deg); }
.pp-icon.ic-mold     { background: linear-gradient(135deg, #e53935, #c62828); }
.pp-icon.ic-inject   { background: linear-gradient(135deg, #1e88e5, #1565c0); }
.pp-icon.ic-clamp    { background: linear-gradient(135deg, #43a047, #2e7d32); }
.pp-icon.ic-hydraulic{ background: linear-gradient(135deg, #fb8c00, #ef6c00); }
.pp-icon.ic-elec     { background: linear-gradient(135deg, #8e24aa, #6a1b9a); }
.pp-icon.ic-cool     { background: linear-gradient(135deg, #00acc1, #00838f); }

/* 타이틀 영역 */
.pp-title-wrap { position: relative; z-index: 1; flex: 1; }
.pp-title {
    font-weight: 700; font-size: 14px;
    color: var(--color-default, #1e293b);
    margin-bottom: 2px;
}
.pp-subtitle {
    font-size: 11px;
    color: var(--color-sub-text, #64748b);
}

/* 펼치기 화살표 */
.pp-arrow {
    position: relative; z-index: 1;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--color-bg-panel-content, #f1f5f9);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--color-sub-text, #64748b);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pp-card.pp-expanded .pp-arrow {
    transform: rotate(180deg);
    background: var(--color-iz-main, #1A6FDB);
    color: #fff;
}

/* 카드 요약 */
.pp-card-summary {
    padding: 0 18px 14px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-sub-text, #64748b);
}

/* 상세 펼침 영역 */
.pp-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.pp-card.pp-expanded .pp-detail {
    max-height: 800px;
}
.pp-detail-inner {
    padding: 0 18px 18px;
    border-top: 1px solid var(--color-common-border, #e2e8f0);
}

/* 부품 리스트 그리드 */
.pp-parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.pp-part-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--color-bg-panel-content, #f8fafc);
    border: 1px solid transparent;
    transition: all 0.25s;
    opacity: 0;
    transform: translateX(-12px);
}
.pp-card.pp-expanded .pp-part-item {
    animation: ppPartSlide 0.35s ease forwards;
}
.pp-card.pp-expanded .pp-part-item:nth-child(1)  { animation-delay: 0.05s; }
.pp-card.pp-expanded .pp-part-item:nth-child(2)  { animation-delay: 0.08s; }
.pp-card.pp-expanded .pp-part-item:nth-child(3)  { animation-delay: 0.11s; }
.pp-card.pp-expanded .pp-part-item:nth-child(4)  { animation-delay: 0.14s; }
.pp-card.pp-expanded .pp-part-item:nth-child(5)  { animation-delay: 0.17s; }
.pp-card.pp-expanded .pp-part-item:nth-child(6)  { animation-delay: 0.20s; }
.pp-card.pp-expanded .pp-part-item:nth-child(7)  { animation-delay: 0.23s; }
.pp-card.pp-expanded .pp-part-item:nth-child(8)  { animation-delay: 0.26s; }
.pp-card.pp-expanded .pp-part-item:nth-child(9)  { animation-delay: 0.29s; }
.pp-card.pp-expanded .pp-part-item:nth-child(10) { animation-delay: 0.32s; }

@keyframes ppPartSlide {
    to { opacity: 1; transform: translateX(0); }
}

.pp-part-item:hover {
    background: #eef2ff;
    border-color: var(--color-iz-main, #1A6FDB);
}
.pp-part-dot {
    width: 8px; height: 8px; border-radius: 50%;
    margin-top: 4px; flex-shrink: 0;
}
.pp-part-nm {
    font-size: 12px; font-weight: 600;
    color: var(--color-default, #334155);
    line-height: 1.3;
}
.pp-part-desc {
    font-size: 11px;
    color: var(--color-sub-text, #94a3b8);
    margin-top: 2px; line-height: 1.4;
}

/* 구성도 섹션 제목 */
.pp-section-label {
    font-size: 11px; font-weight: 700;
    color: var(--color-iz-main, #1A6FDB);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 14px; margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--color-iz-main, #1A6FDB);
    display: inline-block;
}

/* ── 부품 팝업 다크모드 ────────────────────────────────── */
body.dx-swatch-dark .pp-card {
    background: #1e293b;
    border-color: #334155;
}
body.dx-swatch-dark .pp-card:hover,
body.dx-swatch-dark .pp-card.pp-expanded {
    border-color: #60a5fa;
}
body.dx-swatch-dark .pp-title { color: #e2e8f0; }
body.dx-swatch-dark .pp-subtitle { color: #64748b; }
body.dx-swatch-dark .pp-card-summary { color: #94a3b8; }
body.dx-swatch-dark .pp-arrow { background: #334155; color: #94a3b8; }
body.dx-swatch-dark .pp-card.pp-expanded .pp-arrow { background: #3b82f6; color: #fff; }
body.dx-swatch-dark .pp-detail-inner { border-color: #334155; }
body.dx-swatch-dark .pp-part-item { background: #0f172a; }
body.dx-swatch-dark .pp-part-item:hover { background: #1e3a5f; border-color: #3b82f6; }
body.dx-swatch-dark .pp-part-nm { color: #e2e8f0; }
body.dx-swatch-dark .pp-part-desc { color: #64748b; }
body.dx-swatch-dark .pp-section-label { color: #60a5fa; border-color: #3b82f6; }
body.dx-swatch-dark .pp-card-grid { background: #0f172a; }

@media (max-width: 768px) {
    .eq-comp-grid { grid-template-columns: 1fr; padding: 10px; }
    .qa-tab-item { padding: 8px 14px; font-size: 12px; }
    .pp-card-grid { grid-template-columns: 1fr; padding: 12px; }
    .pp-parts-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   다크모드 CSS 변수 오버라이드
   body.dx-swatch-dark 일 때 :root 변수를 재정의
   ═══════════════════════════════════════════════════════════════ */
body.dx-swatch-dark {
    /* 배경 */
    --color-bg-body: #1a1f2e;
    --color-bg-layout-header: #1e2434;
    --color-bg-layout-toolbar: #1e2434;
    --color-bg-drawer: #1a1f2e;
    --color-bg-tab-search: #232a3c;
    --color-bg-tab-selected: #2a3148;
    --color-bg-submenu: #232a3c;
    --color-bg-edit-basic: #2a2230;
    --color-bg-edit-readonly: #2a2f3e;
    --color-bg-edit-editable: #232a3c;
    --color-bg-edit: #2a2f3e;
    --color-bg-panel: #1e2434;
    --color-bg-panel-content: #232a3c;
    --color-bg-panel-boxshadow: #0d1117;
    --color-bg-form-label: #232a3c;
    --color-bg-card: #1e2434;

    /* 테두리 */
    --color-common-border: #2e3650;
    --color-common-header-border: #2e3650;
    --color-footer-border: #2e3650;
    --color-submenu-border: #3a4260;
    --color-card-border: rgba(255,255,255,.08);
    --color-card-header-border: #2e3650;
    --color-formfield-border: #3a4260;

    /* 텍스트 */
    --color-default: #e0e4f0;
    --color-readonly-text: rgba(255,255,255,.75);
    --color-graph-label: rgba(255,255,255,.8);
    --color-footer: #8892aa;
}

/* ══════════════════════════════════════════════════════════════
   다크모드: CommonHeader 영역 (모든 화면 공통)
   ── 배경 · 제목 · 아이콘 · 구분선 ──
   ══════════════════════════════════════════════════════════════ */
body.dx-swatch-dark .tab-container-header {
    background: #191d2b !important;
    border-bottom: none;
}
body.dx-swatch-dark .tab-container-header .cmb {
    background: transparent !important;
}

/* 제목 아이콘 */
body.dx-swatch-dark .tab-container-header .cmb img[src*="title_icon"] {
    filter: brightness(1.8) saturate(.6) hue-rotate(180deg);
    opacity: .85;
}

/* 제목 텍스트 */
body.dx-swatch-dark .tab-container-header .cmb h6 {
    color: #d4dae8 !important;
    font-weight: 700;
    letter-spacing: .2px;
}

/* 구분선 - 미묘한 그라데이션 */
body.dx-swatch-dark .common-header-border {
    border-bottom: none !important;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(91,158,244,.3) 20%,
        rgba(91,158,244,.15) 80%,
        transparent 100%
    ) !important;
}

/* ── 헤더 toolbar 버튼 (조회/저장/닫기 등) ── */
body.dx-swatch-dark .tab-container-header .dx-button-mode-outlined {
    color: #8b9ab8;
    border-color: rgba(255,255,255,.1);
    background: transparent;
    border-radius: 6px;
    transition: all .2s ease;
}
body.dx-swatch-dark .tab-container-header .dx-button-mode-outlined:hover {
    background: rgba(91,158,244,.12);
    border-color: rgba(91,158,244,.4);
    color: #c0d4f0;
}
body.dx-swatch-dark .tab-container-header .dx-button-mode-outlined:active {
    background: rgba(91,158,244,.2);
    transform: scale(.97);
}
body.dx-swatch-dark .tab-container-header .dx-button-mode-outlined .dx-icon {
    color: #6b7fa0;
    transition: color .2s ease;
}
body.dx-swatch-dark .tab-container-header .dx-button-mode-outlined:hover .dx-icon {
    color: #5B9EF4;
}
body.dx-swatch-dark .tab-container-header .dx-button-text {
    color: inherit;
}
/* 조회 버튼 강조 */
body.dx-swatch-dark .tab-container-header .dx-button-mode-outlined .dx-icon-search {
    color: #5B9EF4;
}

/* ── 다크 DevExtreme Toolbar 내부 보정 ── */
body.dx-swatch-dark .tab-container-header .dx-toolbar {
    background: transparent !important;
}
body.dx-swatch-dark .tab-container-header .dx-toolbar-items-container {
    background: transparent !important;
}
body.dx-swatch-dark .tab-container-header .dx-toolbar-before,
body.dx-swatch-dark .tab-container-header .dx-toolbar-after {
    background: transparent !important;
}