/* B2B 인쇄 플랫폼 - 통합관리 */
[x-cloak]{display:none!important}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
.dark ::-webkit-scrollbar-thumb{background:#475569}

/* ═══════════════════════════════════════════════
   좌측 사이드바 네비게이션 (DAdmin2 / Hope UI 스타일)
   ═══════════════════════════════════════════════ */
:root {
    --dp-active: #009793;          /* 메인색 */
    --dp-ink-2: #404969;           /* 메뉴 기본 글자 */
    --dp-ink-3: #8a92a6;           /* 보조 글자 / 아이콘 */
    --dp-line: #e9ecef;
    --dp-surface-soft: #f6f7f9;    /* 아이콘 뱃지 배경 */
    --dp-disabled: #adb5bd;
}
.dark {
    --dp-ink-2: #cbd5e1;
    --dp-ink-3: #94a3b8;
    --dp-line: #1f2937;
    --dp-surface-soft: #1e293b;
    --dp-disabled: #475569;
}

/* 섹션 라벨 */
.dp-side-group {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dp-ink-3);
    padding: 10px 12px 6px;
}

.dp-nav { display: block; }

/* 메뉴 항목 (부모/리프 공통) */
.dp-nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    margin: 2px 0;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    color: var(--dp-ink-2);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -.015em;
    text-align: left;
    transition: background .15s, color .15s;
}
.dp-nav-item:hover {
    background: color-mix(in srgb, var(--dp-active) 10%, transparent);
    color: var(--dp-active);
}

/* 아이콘 뱃지 — 원형 */
.dp-nav-ic {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dp-surface-soft);
    color: var(--dp-ink-3);
    transition: background .15s, color .15s;
}
.dp-nav-ic svg { width: 18px; height: 18px; }
.dp-nav-item:hover .dp-nav-ic { background: #fff; color: var(--dp-active); }
.dark .dp-nav-item:hover .dp-nav-ic { background: #0f172a; }

.dp-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 펼침 화살표 */
.dp-nav-chev {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--dp-ink-3);
    transition: transform .2s ease;
}
.dp-nav-chev.open { transform: rotate(90deg); }

/* 활성 리프 — 메인색 채움 */
.dp-nav-item.active {
    background: var(--dp-active);
    color: #fff;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--dp-active) 55%, transparent);
}
.dp-nav-item.active .dp-nav-ic { background: rgba(255,255,255,.22); color: #fff; }
.dp-nav-item.active .dp-nav-chev { color: rgba(255,255,255,.85); }

/* 자식이 활성인 부모 — 텍스트만 강조 */
.dp-nav-item.child-active { color: var(--dp-active); }
.dp-nav-item.child-active .dp-nav-ic {
    background: color-mix(in srgb, var(--dp-active) 12%, transparent);
    color: var(--dp-active);
}

/* 아코디언 하위 목록 */
.dp-nav-sub { padding: 2px 0 4px 22px; position: relative; }
.dp-nav-sub::before {
    content: '';
    position: absolute;
    left: 30px; top: 4px; bottom: 8px;
    width: 1.5px;
    background: var(--dp-line);
}

.dp-nav-subitem {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px 9px 18px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    color: var(--dp-ink-3);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -.015em;
    text-align: left;
    transition: background .12s, color .12s;
}
.dp-nav-subitem:hover { color: var(--dp-active); }
.dp-nav-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--dp-disabled);
    transition: border-color .12s, background .12s;
}
.dp-nav-subitem:hover .dp-nav-dot { border-color: var(--dp-active); }
.dp-nav-subitem.active { color: var(--dp-active); font-weight: 700; }
.dp-nav-subitem.active .dp-nav-dot { border-color: var(--dp-active); background: var(--dp-active); }

/* 하위 뱃지 (NEW / v1.4 등) */
.dp-nav-badge {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    background: color-mix(in srgb, var(--dp-active) 14%, transparent);
    color: var(--dp-active);
}