.content {
    position: relative;
    display: flex;
    margin: 5.7rem auto 0;
    padding: 0 0 17rem 0; /* 모바일: 푸터 7rem + 플로팅 여유 + safe-area */
    max-width: 1080px;
    align-content: center;
    justify-content: flex-start;
    flex-direction: column;
}

/* 좌(콘텐츠) + 우(카테고리) 2단 레이아웃 */
.page-layout {
    display: flex;
    flex: 1;
    width: 100%;
    min-width: 0;
    flex-direction: column;
}

.layout-main {
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* 데스크톱: 우측에 카테고리 고정 폭 */
@media (min-width: 1024px) {
    .page-layout {
        flex-direction: row;
        gap: 2rem;
        align-items: flex-start;
    }
    .layout-nav-wrapper {
        flex-shrink: 0;
        width: 16rem;
        position: static;
    }
}

/* 모바일: 카테고리는 오버레이로만 표시(헤더 버튼으로 열기) */
@media (max-width: 1023px) {
    .layout-nav-wrapper {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 0;
        overflow: hidden;
        z-index: 100;
        transition: width 0.2s ease;
        box-shadow: none;
    }
    .layout-nav-wrapper.is-open {
        width: 80%;
        max-width: 20rem;
        overflow: auto;
    }
    .layout-nav-wrapper.is-open #category-box {
        display: block;
        min-height: 100%;
    }
}

.items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 100%;
    height: auto;
    margin: 0 0 10rem;
}

/* 데스크톱: 푸터·플로팅 높이에 맞춰 하단 여백 축소 */
@media (min-width: 1024px) {
    .content {
        padding-bottom: 8rem; /* 푸터 5rem + 여유 */
    }
    .items {
        margin-bottom: 8rem;
    }
}

@media (min-width: 1440px) {
    .content {
        padding-bottom: 10rem; /* 푸터 8rem + 여유 */
    }
}