/* Page header as fixed sidebar (non-scrollable) */
.page-header {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--nav-height));
    z-index: 900; /* Below nav (1000) but above content */
    background-color: var(--color-white);
    /* border-bottom: 1px solid var(--border-color); */
    border-right: 1px solid var(--border-color);
    padding: 1.5rem 1.75rem;
}

/* Center align on very large screens */
@media (min-width: 1400px) {
    .page-header {
        left: calc((100vw - 1400px) / 2);
    }
}

.page-header h2 {
    margin-bottom: 1.5rem;
}

/* Tablet */
@media (max-width: 1023px) and (min-width: 768px) {
    .page-header {
        border-right: none;  
        top: var(--nav-height);
        height: auto;
        box-sizing: border-box;
        width: 100%;        padding: 1rem 1.75rem;
        padding: 1rem 1.75rem;
    }

    .page-header h2 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 500;
    }
}

/* Mobile (≤767px): 모바일 S/M 통합 */
@media (max-width: 767px) {
    .page-header h2 {
        font-size: 1.5rem;
        margin : 0;
    }

    .page-header {
        border-right: none;
        width: 100%;
        top: var(--nav-height);
        border-right: none;  
        height: auto;
        box-sizing: border-box;
        width: 100%;        
        padding: 1rem 1.75rem;
    }
    
    body.detail-view-open .page-header {
        transform: translateY(-110%);
    }
}