/* 헤더 반응형 — 분기: 1300 → 1024 → 768 → 480 → 345 (max-width) */

/* ========== 1300px 이하 ========== */
@media (max-width: 1300px) {
    /* 상단 메뉴 숨김·헤더 축소 (구 480px 구간 규칙) */
    .topMenu {
        display: none;
    }

    .bottomMenu {
        max-width: 1024px;
    }

    .navMenu {
        gap: 24px;
    }

    .pc {
        display: none;
    }

    .mobile {
        display: flex;
    }

    .hamburgerMenu {
        display: flex;
        flex-direction: column;
        width: 32px;
        gap: 6px;
        cursor: pointer;
    }

    .hamburgerMenu>span {
        width: 100%;
        height: 3px;
        border-radius: 2px;
        background: #643FCE;
    }

    .topHeader {
        height: 10px;
    }

    .leftMenu>a>img {
        width: 120px;
    }

    body.sub-body {
        padding-top: 80px;
    }

    .top_box {
        display: none;
    }

    .footerWrap {
        max-width: 1024px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .footerInfo {
        gap: 8px 16px !important;
    }

    .copyrightBottom {
        align-items: center !important;
        gap: 16px !important;
    }
}

/* ========== 1024px 이하 ========== */
@media (max-width: 1024px) {
    * {
        letter-spacing: 0;
    }

    .bottomMenu {
        max-width: 768px;
    }

    .footerInfo .info-text {
        font-size: 13px !important;
    }

    .copyrightBottom > p {
        font-size: 14px !important;
    }
}

/* ========== 768px 이하 ========== */
@media (max-width: 768px) {
    /* .topHeader 높이는 상단 1300px 블록(10px)과 일치 */

    .bottomHeader {
        height: 80px;
    }

    .topMenu {
        max-width: 100%;
        padding: 0 20px;
    }

    .topMenu>a {
        right: 20px;
    }

    .bottomMenu {
        max-width: 100%;
        padding: 0 20px;
    }

    body.sub-body {
        padding-top: 132px;
        margin-top: 0;
    }

    body.sub-body.hide-top-header {
        padding-top: 80px;
        margin-top: 0;
    }

    .h-join-content-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .join-header-wrapper,
    .h-join-detail-header-fixed,
    .h-join-detail-scroll-area {
        padding-left: 20px;
        padding-right: 20px;
    }

    .join-modal-scroll-body {
        padding-left: 0;
        padding-right: 0;
    }

    .join-user-info,
    .h-join-content-header,
    .h-join-class-list-scroll {
        padding-left: 20px;
        padding-right: 20px;
        margin-left: 0;
        margin-right: 0;
    }

    .h-join-content-header {
        padding: 0 20px 20px 20px;
        margin-bottom: 20px;
    }

    .join-header-wrapper {
        padding-top: 30px;
    }

    .join-user-info {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .h-join-search-box {
        width: 100%;
    }

    .h-join-detail-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .h-join-qr-section {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .h-join-qr-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .join-modal-container {
        height: 95vh;
    }

    .btn-close-modal {
        top: 15px;
        right: 15px;
    }

    .h-join-qr-item {
        padding: 20px 15px;
    }

    .footerWrap {
        padding-top: 52px !important;
        padding-bottom: 60px !important;
    }

    .footerInfo {
        justify-content: center !important;
        text-align: center !important;
        gap: 6px 12px !important;
    }

    .copyrightBottom {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 14px !important;
    }

    .copyList {
        width: 100% !important;
        max-width: 340px !important;
        justify-content: center !important;
    }

    .newsletter-box {
        align-items: center !important;
    }

    .newsletter-form {
        max-width: 340px !important;
    }
}

/* ========== 480px 이하 ========== */
@media (max-width: 480px) {
    /* 헤더·상단 메뉴: 1300px 블록. 480 이하만 덮어쓸 규칙은 여기에 */
    .footerWrap {
        padding: 42px 16px 50px !important;
    }

    .footerInfo .info-text {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .copyrightBottom > p {
        font-size: 12px !important;
    }

    .copyList {
        max-width: 100% !important;
    }

    .newsletter-title {
        font-size: 14px !important;
    }

    .newsletter-input {
        min-width: 0 !important;
        font-size: 14px !important;
        height: 40px !important;
    }

    .newsletter-btn {
        height: 40px !important;
        font-size: 14px !important;
    }
}

/* ========== 345px 이하 ========== */
@media (max-width: 345px) {
    /* 초좁은 뷰포트 전용 조정이 필요하면 추가 */
    .footerWrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .footerInfo {
        gap: 4px 8px !important;
    }

    .footerInfo .info-text {
        font-size: 11px !important;
    }

    .newsletter-title {
        font-size: 13px !important;
    }

    .newsletter-input {
        padding: 0 10px !important;
        font-size: 13px !important;
    }

    .newsletter-btn {
        padding: 0 10px !important;
        font-size: 13px !important;
    }
}