/**
 * v7/css/responsive.css - Bootstrap 대체 반응형 유틸리티
 *
 * Bootstrap의 d-none, d-lg-block, d-xl-block 등을 대체하는 커스텀 CSS.
 * v6 → v7 클래스 매핑:
 *   d-none d-lg-block → v7-lg
 *   d-none d-lg-flex  → v7-lg-flex
 *   d-none d-xl-block → v7-xl
 *   d-lg-none         → v7-mobile-only
 *
 * @see tmp/v7-layout-plan.md 섹션 8.2
 */

/* ===== 기본 상태: 숨김 ===== */
.v7-hide {
    display: none !important;
}

/* ===== 모바일에서만 표시 (< 992px) ===== */
.v7-mobile-only {
    display: block !important;
}

/* ===== lg 이상에서만 표시 (>= 992px), 기본: 숨김 ===== */
.v7-lg {
    display: none !important;
}

.v7-lg-flex {
    display: none !important;
}

/* ===== xl 이상에서만 표시 (>= 1200px), 기본: 숨김 ===== */
.v7-xl {
    display: none !important;
}

/* ===== lg breakpoint (992px) ===== */
@media (min-width: 992px) {
    .v7-mobile-only {
        display: none !important;
    }

    .v7-lg {
        display: block !important;
    }

    /* 탑바는 flex 유지 (v7-lg의 block !important를 오버라이드) */
    .v7-topbar.v7-lg {
        display: flex !important;
    }

    .v7-lg-flex {
        display: flex !important;
    }

    /* 본문 영역: lg 이상에서만 gap 적용 */
    .v7-body {
        gap: var(--v7-gap);
    }
}

/* ===== xl breakpoint (1200px) ===== */
@media (min-width: 1200px) {
    .v7-xl {
        display: block !important;
    }

    /* 탑바 wing-spacer: xl 이상에서 표시 (v6의 d-none d-xl-block wing-banner 동일) */
    .v7-topbar-spacer {
        display: block !important;
    }

    /* 탑바 외부 컨테이너: xl 이상에서 좌우 패딩 추가 (v6의 .container.px-xl-3 동일) */
    .v7-topbar-outer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ===== 모바일 전용 레이아웃 조정 (< 992px) ===== */
@media (max-width: 991.98px) {
    .v7-header {
        padding-top: 0;
    }

    /* 모바일에서 5-column 레이아웃을 1-column으로 */
    .v7-layout {
        flex-direction: column;
        gap: 0;
    }

    /* 본문 영역도 1-column */
    .v7-body {
        flex-direction: column;
        gap: 0;
        margin-top: 0;
    }

    /* 모바일에서 콘텐츠 패딩 */
    .v7-main {
        padding: 0 8px;
    }
}