@charset "UTF-8";
/**
 * 🎨 ZIEGG Platform - Core CSS (v3.0)
 * 프리미엄 UI 디자인 가이드라인 (단일 진실의 원천)
 */

:root {
    /* Color Palette */
    --z-primary: #4f46e5;
    --z-primary-dark: #4338ca;
    --z-primary-light: #e0e7ff;
    --z-danger: #ef4444;
    --z-danger-light: #fef2f2;
    --z-bg: #f8fafc;
    --z-surface: #ffffff;
    --z-bg-panel: #ffffff;
    --z-border: #e2e8f0;
    --z-text-main: #0f172a;
    --z-text-muted: #64748b;
    --z-overlay: rgba(15, 23, 42, 0.7);

    /* Semantic Color Tokens (v3.1) */
    --z-success: #10b981;
    --z-success-dark: #059669;
    --z-success-light: #ecfdf5;
    --z-warning: #f59e0b;
    --z-warning-dark: #d97706;
    --z-warning-light: #fffbeb;
    --z-info: #3b82f6;
    --z-info-dark: #2563eb;
    --z-info-light: #eff6ff;
    --z-danger-dark: #dc2626;

    /* Shadow & Radius */
    --z-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --z-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --z-radius-md: 12px;
    --z-radius-lg: 24px;

    /* Legacy Aliases (공개 페이지 CSS 호환용) */
    --primary: var(--z-primary);
    --primary-hover: var(--z-primary-dark);
    --bg-color: var(--z-bg);
    --text-main: var(--z-text-main);
    --text-muted: var(--z-text-muted);
    --border: var(--z-border);
    --error: var(--z-danger);

    /* Z-Data-Grid (통합 데이터 그리드 시스템) */
    --grid-font-size: 13px;             /* 기본 글자 크기 */
    --grid-header-font-size: 13px;      /* 헤더 글자 크기 */
    --grid-padding-x: 12px;             /* 좌우 여백 */
    --grid-padding-y: 8px;              /* 위아래 여백 (행 높이 조절) */
    --grid-gap: 6px;                    /* 행과 행 사이 간격 */
    
    --grid-border-radius: 10px;         /* 행 둥글기 */
    --grid-border-color: #e2e8f0;       /* 기본 테두리 색상 */
    --grid-border-bottom-color: #cbd5e1; /* 헤더 하단 굵은 테두리 */
    
    --grid-header-bg: #f8fafc;          /* 헤더 배경색 */
    --grid-row-bg: #ffffff;             /* 기본 행 배경색 */
    --grid-hover-bg: #ffffff;           /* 마우스 오버 시 행 배경색 (배경색 변경 원할시 사용) */
    --grid-hover-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 마우스 오버 시 그림자 */
    
    /* Z-Data-Grid 다크 모드용 변수 */
    --grid-dark-header-bg: #0f172a;
    --grid-dark-row-bg: #1e293b;
    --grid-dark-border: #334155;
    --grid-dark-hover-border: #64748b;
    --grid-dark-hover-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* =========================================
   🔄 Global Reset
========================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--z-bg);
    color: var(--z-text-main);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =========================================
   📊 Z-Data-Grid System (통합 데이터 그리드)
========================================= */
.z-data-grid-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.z-grid-header {
    display: grid;
    align-items: center;
    padding: var(--grid-padding-y) var(--grid-padding-x);
    min-height: 52px;
    background: var(--grid-header-bg);
    border-radius: var(--grid-border-radius) var(--grid-border-radius) 0 0;
    border: 1px solid var(--grid-border-color);
    border-bottom: 2px solid var(--grid-border-bottom-color);
    font-size: var(--grid-header-font-size);
    font-weight: 700;
    color: var(--z-text-muted);
    margin-bottom: var(--grid-gap);
}
.z-grid-row {
    display: grid;
    align-items: center;
    padding: var(--grid-padding-y) var(--grid-padding-x);
    min-height: 52px;
    background: var(--grid-row-bg);
    border: 1px solid var(--grid-border-color);
    border-radius: var(--grid-border-radius);
    margin-bottom: var(--grid-gap);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    font-size: var(--grid-font-size);
    transition: all 0.15s;
}
.z-grid-row:hover {
    background: var(--grid-hover-bg);
    border-color: var(--grid-border-bottom-color);
    box-shadow: var(--grid-hover-shadow);
    transform: translateY(-2px);
}
.z-grid-row.expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    border-bottom: none;
    background: #fafafa;
    transform: none;
    box-shadow: none;
}

.z-grid-detail {
    display: none;
    background: var(--grid-row-bg);
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    border-top: none;
    border: 1px solid var(--grid-border-color);
    border-top: none;
    border-radius: 0 0 var(--grid-border-radius) var(--grid-border-radius);
    margin-bottom: var(--grid-gap);
    overflow: hidden;
}
.z-grid-detail.expanded {
    display: flex;
    animation: slideDown 0.2s ease-out;
}

/* 유니버셜 아코디언 추가 클래스 */
.opt-row { display: none; }
.opt-row.expanded { display: block; animation: slideDown 0.2s ease-out; }

@keyframes slideDown { 
    from { opacity: 0; transform: translateY(-5px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* Z-Data-Grid Dark Theme */
[data-theme="dark"] .z-grid-header {
    background: var(--grid-dark-header-bg);
    border-color: var(--grid-dark-border);
    border-bottom-color: var(--grid-dark-hover-border);
    color: #94a3b8;
}
[data-theme="dark"] .z-grid-row {
    background: var(--grid-dark-row-bg);
    border-color: var(--grid-dark-border);
    color: #f8fafc;
}
[data-theme="dark"] .z-grid-row:hover {
    border-color: var(--grid-dark-hover-border);
    box-shadow: var(--grid-dark-hover-shadow);
}
[data-theme="dark"] .z-grid-row.expanded {
    background: var(--grid-dark-header-bg);
    border-color: var(--grid-dark-border);
}

/* =========================================
   🔘 Premium Buttons (z-btn)
========================================= */
.z-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--z-radius-md);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}
.z-btn-primary {
    background-color: var(--z-primary);
    color: #fff;
    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2);
}
.z-btn-primary:active, .z-btn-primary:hover {
    background-color: var(--z-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(79, 70, 229, 0.3);
}
.z-btn-secondary {
    background-color: #fff;
    color: var(--z-text-muted);
    border-color: var(--z-border);
}
.z-btn-secondary:hover {
    background-color: var(--z-bg);
    color: var(--z-text-main);
}

/* =========================================
   🪟 Modals & Overlays
========================================= */
.ziegg-modal-overlay,
.ziegg-panel-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--z-overlay);
    backdrop-filter: blur(4px);
    z-index: 11000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ziegg-panel-overlay {
    z-index: 9999; /* 패널 오버레이는 패널(10000)보다 아래 있어야 함 */
}
.ziegg-modal-overlay.active,
.ziegg-panel-overlay.active {
    opacity: 1; visibility: visible;
}

.ziegg-modal {
    background: var(--z-surface);
    width: 400px;
    border-radius: var(--z-radius-lg);
    box-shadow: var(--z-shadow-lg);
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ziegg-modal-overlay.active .ziegg-modal {
    transform: translateY(0) scale(1);
}

.ziegg-modal-title {
    padding: 24px 32px 16px;
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--z-text-main);
    border-bottom: 1px solid var(--z-border);
}
.ziegg-modal-content {
    padding: 32px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--z-text-muted);
}
.ziegg-modal-footer {
    padding: 16px 32px 24px;
    display: flex;
    gap: 12px;
    width: 100%;
}
.ziegg-modal-footer button {
    flex: 1;
}

/* =========================================
   🚪 Sliding Panels
========================================= */
.ziegg-side-panel {
    position: fixed;
    top: 0; right: -950px;
    width: 900px; max-width: 100vw;
    height: 100%;
    background: var(--z-surface);
    z-index: 10000;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.ziegg-side-panel.active { right: 0; }

.ziegg-panel-header {
    padding: 24px 32px;
    border-bottom: 1px solid var(--z-border);
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    align-items: center;
    background: var(--z-bg);
}
.ziegg-panel-title { margin: 0; font-size: 20px; font-weight: 800; }
.ziegg-panel-close {
    background: var(--z-border);
    border: none; width: 32px; height: 32px;
    border-radius: 50%; font-size: 20px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
    color: var(--z-text-main);
}
.ziegg-panel-close:hover { background: #cbd5e1; }
[data-theme="dark"] .ziegg-panel-close { background: rgba(255,255,255,0.1); color: #f8fafc; }
[data-theme="dark"] .ziegg-panel-close:hover { background: rgba(255,255,255,0.2); }
.ziegg-panel-body { padding: 32px; overflow-y: auto; flex: 1; }

/* =========================================
   🔘 Component: Action Buttons
========================================= */
.action-container {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}
.btn-mini-action {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-mini-action:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}
.btn-delete-action { color: #ef4444; border-color: #fecaca; }
.btn-delete-action:hover { background: #fef2f2; border-color: #ef4444; color: #ef4444; }

/* =========================================
   🔍 Component: Search & Filter
========================================= */
.search-filter-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}
.search-bar-wrap {
    position: relative;
    flex: 1;
}
.search-bar-wrap svg {
    position: absolute;
    left: 12px;
    top: 12px;
    stroke: #94a3b8;
}
.search-input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.search-input:focus {
    border-color: var(--z-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* =========================================
   📄 Component: Pagination
========================================= */
.z-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 24px;
}
.z-page-btn {
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.z-page-btn:hover:not(:disabled) {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}
.z-page-btn.active {
    background: var(--z-primary);
    color: #fff;
    border-color: var(--z-primary);
}
.z-page-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* =========================================
   📝 Component: Large Form Input
========================================= */
.z-form-control-l {
    box-sizing: border-box;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 14px;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
}
.z-form-control-l:focus {
    border-color: var(--z-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.05);
}

/* =========================================
   🍞 Component: Toast Notification (v3.1)
   비방해(Non-blocking) 경량 알림 시스템
   Z.Toast.success/error/warning/info()
========================================= */

/* Toast 컨테이너 — 우측 상단 고정, 스택형 */
.z-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}

/* 개별 Toast 아이템 */
.z-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 340px;
    max-width: 440px;
    padding: 16px 20px;
    border-radius: 14px;
    background: var(--z-surface);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    border-left: 4px solid transparent;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    cursor: default;
}
.z-toast.active {
    transform: translateX(0);
    opacity: 1;
}
.z-toast.exiting {
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
}

/* Toast 아이콘 영역 */
.z-toast-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    margin-top: 1px;
}

/* Toast 텍스트 영역 */
.z-toast-body {
    flex: 1;
    min-width: 0;
}
.z-toast-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--z-text-main);
    margin-bottom: 2px;
    line-height: 1.3;
}
.z-toast-message {
    font-size: 13px;
    color: var(--z-text-muted);
    line-height: 1.5;
    word-break: keep-all;
}

/* Toast 닫기 버튼 */
.z-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s;
    line-height: 1;
}
.z-toast-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--z-text-main);
}

/* 자동 소멸 프로그레스 바 */
.z-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 0 14px;
    opacity: 0.6;
    /* width와 transition은 JS에서 동적 제어 */
}

/* ── 타입별 스타일링 ── */

/* ✅ Success */
.z-toast.z-toast-success {
    border-left-color: var(--z-success);
    background: linear-gradient(135deg, var(--z-surface) 0%, var(--z-success-light) 100%);
}
.z-toast-success .z-toast-icon {
    background: var(--z-success-light);
    color: var(--z-success);
}
.z-toast-success .z-toast-progress {
    background: var(--z-success);
}

/* ❌ Error */
.z-toast.z-toast-error {
    border-left-color: var(--z-danger);
    background: linear-gradient(135deg, var(--z-surface) 0%, var(--z-danger-light) 100%);
}
.z-toast-error .z-toast-icon {
    background: var(--z-danger-light);
    color: var(--z-danger);
}
.z-toast-error .z-toast-progress {
    background: var(--z-danger);
}

/* ⚠️ Warning */
.z-toast.z-toast-warning {
    border-left-color: var(--z-warning);
    background: linear-gradient(135deg, var(--z-surface) 0%, var(--z-warning-light) 100%);
}
.z-toast-warning .z-toast-icon {
    background: var(--z-warning-light);
    color: var(--z-warning);
}
.z-toast-warning .z-toast-progress {
    background: var(--z-warning);
}

/* ℹ️ Info */
.z-toast.z-toast-info {
    border-left-color: var(--z-info);
    background: linear-gradient(135deg, var(--z-surface) 0%, var(--z-info-light) 100%);
}
.z-toast-info .z-toast-icon {
    background: var(--z-info-light);
    color: var(--z-info);
}
.z-toast-info .z-toast-progress {
    background: var(--z-info);
}

/* Toast 호버 시 프로그레스 바 일시정지 효과 */
.z-toast:hover .z-toast-progress {
    animation-play-state: paused !important;
}
/* ========================================================= */
/* Mockup Transferred Header CSS */
/* ========================================================= */
.hamburger{display:none;background:none;border:none;color:#f8fafc;font-size:24px;padding:4px 8px;cursor:pointer}
.header-log-box{display:flex;align-items:center;background:rgba(0,0,0,.2);border:1px solid #1e293b;border-radius:var(--z-radius-sm);padding:6px 12px;gap:8px;font-size:12px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-log-box .log-dot{width:6px;height:6px;border-radius:50%;background:var(--z-success);flex-shrink:0;animation:pulse-green 2s infinite}
@keyframes pulse-green{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.7)}70%{box-shadow:0 0 0 4px rgba(16,185,129,0)}}
.btn-header{background:#1e293b;border:1px solid #334155;color:#f8fafc;padding:7px 12px;border-radius:var(--z-radius-sm);font-size:13px;font-weight:600;display:flex;align-items:center;gap:5px;transition:var(--z-tr);white-space:nowrap}
.btn-header:hover{background:#334155}
.btn-header.active-sync{border-color:var(--z-warning);color:var(--z-warning)}
.btn-header .sync-dot{width:6px;height:6px;border-radius:50%;background:var(--z-warning);animation:pulse-red 1.5s infinite}
.user-badge{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;font-size:12px;font-weight:800;padding:2px 8px;border-radius:10px}
.user-id-btn{display:flex;align-items:center;gap:5px;color:#f8fafc;font-size:13px;font-weight:600;padding:5px 10px;border:1px solid #334155;border-radius:var(--z-radius-sm);transition:var(--z-tr);cursor:pointer;background:none;}
.user-id-btn:hover{background:rgba(255,255,255,.05)}
.theme-toggle{background:#1e293b;border:1px solid #334155;color:#f8fafc;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;transition:var(--z-tr);cursor:pointer}
.theme-toggle:hover{background:#334155}
@media(max-width:1100px){.header-log-box{display:none;}.header-center{display:none;}}
@media(max-width:768px){.hamburger{display:flex;}.user-badge{display:none;}}
/* ========================================================= */
/* FIX: Dark Mode & Layout Override */
/* ========================================================= */
[data-theme="dark"] {
  --z-bg:#0f172a; --z-surface:#1e293b; --z-bg-panel:#1e293b; --z-border:#334155;
  --z-text-main:#f1f5f9; --z-text-muted:#94a3b8; --z-text-light:#64748b;
  --z-primary-light:#312e81;
  --z-danger-light:#451a1a; --z-success-light:#052e16; --z-warning-light:#422006; --z-info-light:#172554;
}
[data-theme="dark"] .z-notice-middle,
[data-theme="dark"] .z-notice-action { border-color: var(--z-border) !important; }
[data-theme="dark"] body { background: var(--z-bg); color: var(--z-text-main); }
[data-theme="dark"] .top-header { background:#060a12 !important; border-color:#1e293b !important; }
[data-theme="dark"] .sidebar { background:#0a0f1a !important; }
[data-theme="dark"] .content-area { background:#0f172a !important; }
[data-theme="dark"] .page-main { background:#0f172a !important; }
[data-theme="dark"] .z-panel { background:#1e293b !important; border-color:#334155 !important; }
[data-theme="dark"] .stat-bar { background:#1e293b !important; border-color:#334155 !important; }

/* STRUCTURAL FIXES FOR HEADER */
.top-header { justify-content: unset !important; gap: 12px !important; }
.header-left { flex: 1 !important; display: flex !important; align-items: center !important; min-width: 0 !important; }
.header-center { display: flex !important; gap: 6px !important; }
.header-right { margin-left: auto !important; display: flex !important; align-items: center !important; gap: 10px !important; }
.btn-header { background:#1e293b !important; border:1px solid #334155 !important; color:#f8fafc !important; }
.btn-header.highlight { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; border:none !important; }
.btn-header.active-sync { border-color:var(--z-warning) !important; color:var(--z-warning) !important; background: transparent !important; }
/* Extra Content Modules Dark Mode */
[data-theme="dark"] .card { background:#1e293b !important; border-color:#334155 !important; color:#cbd5e1 !important; }
[data-theme="dark"] .card-title { color:#f1f5f9 !important; }
[data-theme="dark"] .z-table th, [data-theme="dark"] .ziegg-table th { background:#0f172a !important; color:#94a3b8 !important; border-color:#334155 !important; }
[data-theme="dark"] .z-table td, [data-theme="dark"] .ziegg-table td { border-color:#1e293b !important; color:#cbd5e1 !important; }
[data-theme="dark"] .z-table tr:hover td, [data-theme="dark"] .ziegg-table tr:hover td { background:#263043 !important; }
[data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea { background:#0f172a !important; color:#e2e8f0 !important; border-color:#334155 !important; }
[data-theme="dark"] .stat-num { color: #f1f5f9 !important; }
[data-theme="dark"] .stat-title { color: #94a3b8 !important; }
/* ========================================================= */
/* OMNI DARK MODE FOR ALL HARDCODED IN-PAGE MODULES */
/* ========================================================= */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .chart-container,
[data-theme="dark"] .timeline-container,
[data-theme="dark"] .ledger-row td,
[data-theme="dark"] .ledger-inner,
[data-theme="dark"] .page-wrapper,
[data-theme="dark"] .white-box,
[data-theme="dark"] .login-card,
[data-theme="dark"] .z-panel .panel-body,
[data-theme="dark"] .settings-card {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .stat-value,
[data-theme="dark"] .section-title,
[data-theme="dark"] .stat-label,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .timeline-item::before { background: #1e293b !important; border-color: #3b82f6 !important; }
[data-theme="dark"] .timeline-item { border-left-color: #334155 !important; }
[data-theme="dark"] .timeline-time { color: #94a3b8 !important; }
[data-theme="dark"] .timeline-desc { color: #e2e8f0 !important; }
[data-theme="dark"] .timeline-user { color: #60a5fa !important; }
[data-theme="dark"] .ledger-row td { background: #0f172a !important; }
[data-theme="dark"] td, [data-theme="dark"] th { border-color: #334155 !important; color: #cbd5e1 !important; }
[data-theme="dark"] tbody tr:hover td { background-color: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .z-panel { background: #0f172a !important; }
/* ========================================================= */
/* OMNI DARK MODE: ALL SUB-PAGES COMPONENTS MAPPING */
/* ========================================================= */
[data-theme="dark"] .filter-card,
[data-theme="dark"] .log-filter-box,
[data-theme="dark"] .cs-card,
[data-theme="dark"] .cs-header,
[data-theme="dark"] .m-card,
[data-theme="dark"] .chip,
[data-theme="dark"] .schedule-container,
[data-theme="dark"] .plan-summary-card,
[data-theme="dark"] .limit-alert-banner,
[data-theme="dark"] .auth-tabs,
[data-theme="dark"] .tab-btn.active,
[data-theme="dark"] .wizard-steps,
[data-theme="dark"] .search-filter-container,
[data-theme="dark"] .ex-item-row {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .cs-header { border-bottom-color: #334155 !important; }
[data-theme="dark"] .chip:hover, [data-theme="dark"] .m-card:hover { background: #263043 !important; border-color: #4f46e5 !important; }
[data-theme="dark"] .tab-btn { color: #94a3b8 !important; }
[data-theme="dark"] .tab-btn.active { color: #f1f5f9 !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3) !important; }

/* Text & Headings */
[data-theme="dark"] .plan-info h2,
[data-theme="dark"] .limit-alert-text {
    color: #f1f5f9 !important;
}

/* Badges */
[data-theme="dark"] .status-badge.ok { background: #052e16 !important; color: #6ee7b7 !important; border-color:#064e3b !important;}
[data-theme="dark"] .status-badge.err { background: #451a1a !important; color: #fca5a5 !important; border-color:#7f1d1d !important;}
[data-theme="dark"] .convert-badge.converted { background: #052e16 !important; color: #6ee7b7 !important; border-color:#064e3b !important;}
[data-theme="dark"] .convert-badge.not-converted { background: #422006 !important; color: #fcd34d !important; border-color:#78350f !important;}
/* ========================================================= */
/* OMNI DARK MODE: FORM INPUTS AND TABLE CONTAINERS */
/* ========================================================= */
[data-theme="dark"] .user-table-wrapper,
[data-theme="dark"] .opt-inner,
[data-theme="dark"] .o-table {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .search-input,
[data-theme="dark"] .z-form-control-l {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .search-input:focus,
[data-theme="dark"] .z-form-control-l:focus {
    background: #1e293b !important;
    border-color: #4f46e5 !important;
}

[data-theme="dark"] .o-table th {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}

[data-theme="dark"] .o-table td {
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
}

[data-theme="dark"] .bundle-list {
    background: #0f172a !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .bundle-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .log-msg-wrap { color: #f1f5f9 !important; }
[data-theme="dark"] .log-type { background: #334155 !important; color: #cbd5e1 !important; }

/* ========================================================= */
/* OMNI DARK MODE: BUTTONS & PAGINATION (CENTER CONTENT FIX) */
/* ========================================================= */
[data-theme="dark"] .z-btn-secondary,
[data-theme="dark"] .btn-mini-action,
[data-theme="dark"] .z-page-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .z-btn-secondary:hover,
[data-theme="dark"] .btn-mini-action:hover,
[data-theme="dark"] .z-page-btn:hover:not(:disabled) {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .z-page-btn.active {
    background: var(--z-primary) !important;
    color: #fff !important;
    border-color: var(--z-primary) !important;
}

[data-theme="dark"] .btn-delete-action {
    color: #fca5a5 !important;
    border-color: #7f1d1d !important;
}

[data-theme="dark"] .btn-delete-action:hover {
    background: #451a1a !important;
    color: #f87171 !important;
    border-color: #ef4444 !important;
}

/* ========================================================= */
/* OMNI DARK MODE: INLINE STYLES & TEXT COLOR OVERRIDES */
/* ========================================================= */
[data-theme="dark"] *[style*="color:#0f172a"],
[data-theme="dark"] *[style*="color: #0f172a"],
[data-theme="dark"] *[style*="color:#334155"],
[data-theme="dark"] *[style*="color: #334155"],
[data-theme="dark"] *[style*="color:#475569"],
[data-theme="dark"] *[style*="color: #475569"] {
    color: #f1f5f9 !important;
}

[data-theme="dark"] *[style*="color:#64748b"],
[data-theme="dark"] *[style*="color: #64748b"],
[data-theme="dark"] *[style*="color:#94a3b8"],
[data-theme="dark"] *[style*="color: #94a3b8"] {
    color: #94a3b8 !important;
}

[data-theme="dark"] *[style*="color:#2563eb"],
[data-theme="dark"] *[style*="color: #2563eb"],
[data-theme="dark"] *[style*="color:#1e3a8a"],
[data-theme="dark"] *[style*="color: #1e3a8a"] {
    color: #60a5fa !important;
}

[data-theme="dark"] *[style*="background:#fff"],
[data-theme="dark"] *[style*="background: #fff"],
[data-theme="dark"] *[style*="background:#ffffff"],
[data-theme="dark"] *[style*="background: #ffffff"],
[data-theme="dark"] *[style*="background:#f8fafc"],
[data-theme="dark"] *[style*="background: #f8fafc"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
}

[data-theme="dark"] *[style*="background:#eff6ff"],
[data-theme="dark"] *[style*="background: #eff6ff"] {
    background: #1e3a8a !important;
    color: #93c5fd !important;
}

[data-theme="dark"] *[style*="border:1px solid #e2e8f0"],
[data-theme="dark"] *[style*="border: 1px solid #e2e8f0"],
[data-theme="dark"] *[style*="border-bottom:1px solid #e2e8f0"],
[data-theme="dark"] *[style*="border-bottom: 1px solid #e2e8f0"],
[data-theme="dark"] *[style*="border-top:1px dashed #cbd5e1"],
[data-theme="dark"] *[style*="border:1px dashed #cbd5e1"],
[data-theme="dark"] *[style*="border:1px solid #bfdbfe"] {
    border-color: #334155 !important;
}

/* ========================================================= */
/* OMNI DARK MODE: BADGES & CHIPS CONSOLIDATION */
/* ========================================================= */
/* Blue/Primary Badges */
[data-theme="dark"] .plan-badge,
[data-theme="dark"] .role-master-badge,
[data-theme="dark"] .badge-trial {
    background: #1e3a8a !important;
    color: #93c5fd !important;
    border-color: #1e40af !important;
}

/* Gray/Secondary Badges */
[data-theme="dark"] .role-sub-badge,
[data-theme="dark"] .status-badge,
[data-theme="dark"] .tbl-status,
[data-theme="dark"] .log-status,
[data-theme="dark"] .cs-status,
[data-theme="dark"] .o-status,
[data-theme="dark"] .ex-status {
    background: #334155 !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}

/* Specific Status Modifiers */
[data-theme="dark"] .ok,
[data-theme="dark"] .status-badge.ok,
[data-theme="dark"] .convert-badge.converted,
[data-theme="dark"] .map-status.ok {
    background: #064e3b !important;
    color: #6ee7b7 !important;
    border-color: #065f46 !important;
}

[data-theme="dark"] .err,
[data-theme="dark"] .badge-suspended,
[data-theme="dark"] .row-suspended,
[data-theme="dark"] .status-badge.err,
[data-theme="dark"] .map-status.err {
    background: #451a1a !important;
    color: #fca5a5 !important;
    border-color: #7f1d1d !important;
}

[data-theme="dark"] .wait,
[data-theme="dark"] .badge-pending,
[data-theme="dark"] .status-badge.wait,
[data-theme="dark"] .map-status.wait,
[data-theme="dark"] .convert-badge.not-converted {
    background: #422006 !important;
    color: #fcd34d !important;
    border-color: #78350f !important;
}
[data-theme="dark"] .badge-pending[style] {
    background: #422006 !important;
    color: #fcd34d !important;
}

[data-theme="dark"] .map-badge.none {
    background: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .mapping-badge {
    background: #312e81 !important;
    color: #818cf8 !important;
}

/* Chips General */
[data-theme="dark"] .chip,
[data-theme="dark"] .log-chip,
[data-theme="dark"] .z-chip {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .chip:hover,
[data-theme="dark"] .log-chip:hover,
[data-theme="dark"] .z-chip:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .chip.active,
[data-theme="dark"] .log-chip.active,
[data-theme="dark"] .z-chip.active {
    background: var(--z-primary) !important;
    color: #fff !important;
    border-color: var(--z-primary) !important;
}

/* ========================================================= */
/* OMNI DARK MODE: WIZARD, INPUTS, AND QUILL EDITOR (PUBLISH PAGE) */
/* ========================================================= */
[data-theme="dark"] .wizard-content {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .wizard-step {
    border-bottom-color: #334155 !important;
    color: #64748b !important;
}
[data-theme="dark"] .wizard-step.active {
    color: #60a5fa !important;
    border-bottom-color: #60a5fa !important;
}
[data-theme="dark"] .wizard-step.completed {
    color: #34d399 !important;
    border-bottom-color: #34d399 !important;
}

[data-theme="dark"] .z-form-group label {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .z-input-text {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .z-input-text:focus {
    background: #1e293b !important;
    border-color: #4f46e5 !important;
}

/* Quill Editor Dark Mode */
[data-theme="dark"] .ql-toolbar.ql-snow,
[data-theme="dark"] .ql-container.ql-snow {
    border-color: #334155 !important;
    background: #0f172a !important;
}
[data-theme="dark"] .ql-editor {
    color: #e2e8f0 !important;
}
[data-theme="dark"] .ql-snow .ql-stroke {
    stroke: #94a3b8 !important;
}
[data-theme="dark"] .ql-snow .ql-fill {
    fill: #94a3b8 !important;
}
[data-theme="dark"] .ql-snow .ql-picker {
    color: #94a3b8 !important;
}

[data-theme="dark"] .wizard-footer {
    border-top-color: #334155 !important;
}

/* ========================================================= */
/* OMNI DARK MODE: SLIDING PANEL MODIFICATIONS */
/* ========================================================= */
[data-theme="dark"] .ziegg-panel-header {
    background: #334155 !important;
    border-bottom: 1px solid #1e293b !important;
}

/* Badge Styles */
.macro-product-badge {
    background: var(--z-info-light);
    color: var(--z-info-dark);
    padding: 14px 20px;
    border-radius: 8px;
    font-weight: 800;
    margin-bottom: 20px;
    font-size: 18px; /* Matching the title font size */
    border: 1px solid #bfdbfe;
    letter-spacing: -0.3px;
}
[data-theme="dark"] .macro-product-badge {
    background: #1e3a8a !important; 
    color: #eff6ff !important; /* Brighter blue for dark mode */
    border-color: #1d4ed8 !important;
}

/* Global Standard Scrollbar (Theme Aware) */
:root {
    --scrollbar-track-bg: transparent;
    --scrollbar-thumb-bg: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;
}
[data-theme="dark"] {
    --scrollbar-track-bg: transparent;
    --scrollbar-thumb-bg: #475569;
    --scrollbar-thumb-hover: #64748b;
    color-scheme: dark;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg) !important;
}
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-bg) !important;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover) !important;
}

/* =========================================
   📊 Component: Summary Cards (settings 공통)
========================================= */
.summary-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.s-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.s-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.s-title { font-size: 13px; color: #64748b; font-weight: 600; }
.s-val { font-size: 24px; font-weight: 800; color: #0f172a; }
[data-theme="dark"] .s-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .s-val { color: #f1f5f9 !important; }
[data-theme="dark"] .s-title { color: #94a3b8 !important; }

/* =========================================
   🏷️ Component: Table Status Badges (공통)
========================================= */
.tbl-status {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 800; white-space: nowrap;
}
.tbl-status.active { background: #ecfdf5; color: #059669; border: 1px solid #d1fae5; }
.tbl-status.error { background: #fef2f2; color: #dc2626; border: 1px solid #fee2e2; }

/* =========================================
   📝 Component: Form Group (패널 내부 폼, 공통)
========================================= */
.z-form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.z-form-control {
    padding: 14px 16px; border-radius: 12px; border: 1px solid #e2e8f0;
    background: var(--z-bg); font-size: 14px; outline: none;
}
.z-form-control:focus { border-color: #4f46e5; }
.z-form-control[readonly] { background: #f1f5f9; color: #94a3b8; }
.z-msg { font-size: 12px; font-weight: 700; margin-top: 4px; display: none; }
.z-msg-ok { color: #10B981; }
.z-msg-err { color: #EF4444; }
[data-theme="dark"] .z-form-control { background: #0f172a !important; color: #f8fafc !important; border-color: #334155 !important; }
[data-theme="dark"] .z-form-control:focus { background: #1e293b !important; border-color: #4f46e5 !important; }

/* =========================================
   🔤 Semantic Utility Classes (인라인 스타일 대체)
========================================= */
.z-heading { font-weight: 800; color: var(--z-text-main); letter-spacing: -0.5px; }
.z-heading-lg { font-size: 26px; }
.z-heading-xl { font-size: 28px; letter-spacing: -1px; }
.z-subtext { font-size: 13px; color: var(--z-text-muted); margin-top: 8px; }
.z-mono { font-family: monospace; font-weight: 600; color: var(--z-text-muted); }
.z-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }

/* 전시관에서 먼저 선보이는 임시(또는 확정될) CSS 유틸리티 클래스 모음 */
/* 컨펌되면 ziegg-core.css 로 모두 이관됩니다. */

/* 상태 뱃지류 */
.z-badge-success { display:inline-block; padding:4px 10px; font-size:12px; font-weight:700; border-radius:6px; background:rgba(16,185,129,0.1); color:#10b981; border:1px solid rgba(16,185,129,0.2); }
.z-badge-danger { display:inline-block; padding:4px 10px; font-size:12px; font-weight:700; border-radius:6px; background:rgba(239,68,68,0.1); color:#ef4444; border:1px solid rgba(239,68,68,0.2); }
.z-badge-warning { display:inline-block; padding:4px 10px; font-size:12px; font-weight:700; border-radius:6px; background:rgba(245,158,11,0.1); color:#f59e0b; border:1px solid rgba(245,158,11,0.2); }
.z-badge-neutral { display:inline-block; padding:4px 10px; font-size:12px; font-weight:600; border-radius:6px; background:var(--z-bg); color:var(--z-text-light); border:1px solid var(--z-border); }

/* 배경 유틸리티 (Row 용) */
.z-bg-danger-soft { background-color: rgba(239,68,68,0.03) !important; }
.z-bg-success-soft { background-color: rgba(16,185,129,0.03) !important; }

/* 텍스트 유틸리티 */
.z-text-danger { color: #ef4444 !important; }
.z-text-success { color: #10b981 !important; }
.z-text-warning { color: #f59e0b !important; }
.z-text-primary { color: var(--z-primary) !important; }
.z-text-muted { color: var(--z-text-muted) !important; }
.z-font-bold { font-weight: 800 !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }

/* 확장된 버튼 사이즈 */
.z-btn-lg { padding: 12px 24px; font-size: 16px; font-weight: 800; }
.z-btn-sm { padding: 4px 10px; font-size: 12px; }

/* Danger 및 Success 전용 버튼 */
.z-btn-danger { background:#ef4444; color:#fff; border:1px solid #dc2626; }
.z-btn-danger:hover { background:#dc2626; }
.z-btn-success { background:#10b981; color:#fff; border:1px solid #059669; }
.z-btn-success:hover { background:#059669; }

/* 통합 검색 모듈 */
.z-search-bar { position:relative; width:100%; display:flex; align-items:center; }
.z-search-bar svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); stroke:var(--z-text-light); }
.z-search-bar .search-input { width:100%; height:44px; padding:0 16px 0 42px; border:1px solid var(--z-border); border-radius:8px; font-size:14px; background:var(--z-bg-panel); color:var(--z-text-main); transition:all 0.2s; outline:none; }
.z-search-bar .search-input:focus { border-color:var(--z-primary); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }

/* 컨텐츠 헤더 알림창 */
.z-page-notice { background:var(--z-bg-panel); padding:20px 24px; border-radius:12px; border:1px solid var(--z-border); box-shadow:0 2px 10px rgba(0,0,0,0.02); }
.z-page-notice .notice-title { margin:0 0 10px 0; font-size:26px; font-weight:800; color:var(--z-text-main); letter-spacing:-0.5px; }
.z-page-notice .notice-desc { margin:0; font-size:14px; color:var(--z-text-muted); line-height:1.6; }

/* 컨텐츠 헤더 알림창 내부 분할 레이아웃 (좌/중/우/액션) */
.z-notice-flex { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.z-notice-left { flex: 1; min-width: 0; }
.z-notice-middle { flex: 0 0 auto; text-align: center; padding: 0 32px; border-left: 1px solid var(--z-border); border-right: 1px solid var(--z-border); }
.z-notice-right { flex: 0 0 320px; }
.z-notice-action { flex: 0 0 auto; padding-left: 32px; border-left: 1px solid var(--z-border); display: flex; align-items: center; justify-content: center; }

/* 플로팅 액션 바 (Floating Action Bar) - 꽉 찬 레이아웃 */
.floating-action-bar { position: fixed; bottom: -100px; left: 280px; width: calc(100% - 280px); background: var(--z-bg-panel); border-top: 1px solid var(--z-border); box-shadow: 0 -5px 25px rgba(0,0,0,0.1); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; z-index: 9999; transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; visibility: hidden; }
.floating-action-bar.show { bottom: 0; opacity: 1; visibility: visible; }
.floating-action-bar .fab-content { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 32px; }
.floating-action-bar .fab-text { font-size: 16px; font-weight: 700; color: var(--z-text-main); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.floating-action-bar .fab-text span { color: var(--z-primary); font-size: 20px; }
.floating-action-bar .fab-actions { display: flex; gap: 12px; }
@media (max-width: 1100px) { .floating-action-bar { left: 240px; width: calc(100% - 240px); } }
@media (max-width: 768px) { .floating-action-bar { left: 0; width: 100%; padding: 12px 20px; } }