/**
 * V3 Mobile Navigation Styles (Responsive)
 * 메가존 LMS 모바일 네비게이션 (헤더, 사이드메뉴, 바텀탭바)
 * it-mobile의 navigation.css와 동일
 * 768px 이하에서만 적용
 */

/* 모바일 미지원 알림 - 기본 숨김 (768px 초과) */
.mobile-unsupported-notice {
    display: none;
}

/* ============================================================
 * 1) HEADER .mz-header
 * ============================================================ */
.mz-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--mz-header-height);
    display: none; /* 기본 숨김 */
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid var(--edu-neutral-200);
    font-family: var(--edu-font-sans);
}

.mz-header__menu {
    font-size: 24px;
    color: var(--edu-neutral-700);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    border-radius: var(--edu-radius-sm);
    transition: background-color 0.2s;
}

.mz-header__menu:hover,
.mz-header__menu:active {
    background-color: var(--edu-neutral-100);
}

.mz-header__back {
    font-size: 26px;
    color: var(--edu-neutral-700);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -8px;
    border-radius: var(--edu-radius-sm);
    transition: background-color 0.2s;
}

.mz-header__back:hover,
.mz-header__back:active {
    background-color: var(--edu-neutral-100);
}

.mz-header__back--hidden {
    visibility: hidden;
    pointer-events: none;
}

.mz-header__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.mz-header__logo {
    height: 28px;
    width: auto;
}

.mz-header__title {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: var(--edu-neutral-900);
    margin: 0;
    text-align: center;
    letter-spacing: -0.01em;
}

.mz-header__spacer {
    width: 40px;
    height: 40px;
}

/* ============================================================
 * 2) COUNSEL BAR .mz-counsel (숨김 처리)
 * ============================================================ */
.mz-counsel {
    display: none;
}

/* ============================================================
 * 3) BOTTOM TAB BAR .mz-tabbar
 * ============================================================ */
.mz-tabbar {
    display: flex;
    background: #fff;
    border-top: 1px solid var(--edu-neutral-200);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mz-tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 0 8px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--edu-neutral-500);
    text-decoration: none;
    transition: color 0.2s;
    font-family: var(--edu-font-sans);
}

.mz-tabbar__item i {
    font-size: 22px;
}

.mz-tabbar__item span {
    font-size: 11px;
    font-weight: 500;
}

.mz-tabbar__item.is-active {
    color: var(--edu-primary-600);
}

.mz-tabbar__item.is-active span {
    font-weight: 600;
}

.mz-tabbar__item:active {
    opacity: 0.7;
}

/* ============================================================
 * 4) BOTTOM NAVIGATION CONTAINER .mz-bottom-nav
 * ============================================================ */
.mz-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: none; /* 기본 숨김 */
}

/* ============================================================
 * 5) FULL SCREEN MENU .mz-fullmenu
 * ============================================================ */
.mz-fullmenu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mz-tabbar-height) !important;
    z-index: 9999 !important;
    background: #fff !important;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s ease;
    display: none; /* 기본 숨김 */
    flex-direction: column;
}

.mz-fullmenu.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
}

/* Header (modern gray style) */
.mz-head {
    background: #fff;
    padding: 12px 18px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--edu-neutral-200);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.mz-close {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--edu-neutral-600);
    cursor: pointer;
    border-radius: 9px;
    transition: background 0.15s;
}

.mz-close:hover,
.mz-close:active {
    background: var(--edu-neutral-100);
}

/* User Section */
.mz-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    background: var(--edu-neutral-100);
    border-bottom: 1px solid var(--edu-neutral-200);
    flex-shrink: 0;
}

.mz-user__l {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mz-ava {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--edu-neutral-200);
    color: var(--edu-neutral-600);
}

.mz-name {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--edu-neutral-900);
}

.mz-sub {
    font-size: 12px;
    color: var(--edu-neutral-500);
    margin-top: 2px;
}

/* 실명인증 배지 */
.mz-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 500;
}

.mz-badge--verified {
    color: var(--edu-primary-600, #0073E6);
}

.mz-badge--verified i {
    font-size: 13px;
}

.mz-badge--unverified {
    color: #dc2626;
    text-decoration: none;
    transition: color 0.15s ease;
}

.mz-badge--unverified:hover {
    color: #b91c1c;
    text-decoration: underline;
}

.mz-badge--unverified i {
    font-size: 13px;
}

.mz-mypage {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--edu-neutral-700);
    background: var(--edu-neutral-200);
    padding: 8px 10px 8px 13px;
    border-radius: 9px;
    transition: background 0.15s;
    text-decoration: none;
}

.mz-mypage:hover,
.mz-mypage:active {
    background: var(--edu-neutral-300);
}

/* Quick tiles */
.mz-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 16px 16px 6px;
}

.mz-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 13px 4px;
    border-radius: 13px;
    background: #F9FAFB;
    border: 1px solid var(--edu-neutral-100);
    transition: border-color 0.15s, background 0.15s;
    text-decoration: none;
}

.mz-tile:hover,
.mz-tile:active {
    border-color: #BBD8FF;
    background: #fff;
}

.mz-tile__ic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--edu-primary-50);
    color: var(--edu-primary-600);
}

.mz-tile__t {
    font-size: 11.5px;
    font-weight: 600;
    color: #374151;
}

/* Promo strip */
.mz-promo {
    margin: 10px 16px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--edu-primary-50);
    border: 1px solid #BBD8FF;
    border-radius: 11px;
    padding: 11px 13px;
}

.mz-promo__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--edu-primary-600);
    flex: none;
}

.mz-promo__t {
    flex: 1;
    font-size: 12.5px;
    font-weight: 600;
    color: #004D99;
}

.mz-dday {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: var(--edu-primary-600);
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

/* Nav grid */
.mz-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 22px;
    padding: 16px 20px 24px;
    flex: 1;
    overflow-y: auto;
}

.mz-g {
    display: flex;
    flex-direction: column;
}

.mz-g__head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--edu-neutral-100);
}

.mz-g__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--edu-primary-600);
    flex: none;
}

/* 섹션별 다양한 색상 적용 */
.mz-g:nth-child(1) .mz-g__dot { background: #0073E6; } /* 수강신청 - 파란색 */
.mz-g:nth-child(2) .mz-g__dot { background: #10B981; } /* 무료특강 - 초록색 */
.mz-g:nth-child(3) .mz-g__dot { background: #8B5CF6; } /* 학습지원센터 - 보라색 */
.mz-g:nth-child(4) .mz-g__dot { background: #F59E0B; } /* 커뮤니티 - 주황색 */
.mz-g:nth-child(5) .mz-g__dot { background: #EC4899; } /* 학위과정 - 핑크색 */
.mz-g:nth-child(6) .mz-g__dot { background: #06B6D4; } /* 전문자격 - 청록색 */
.mz-g:nth-child(7) .mz-g__dot { background: #84CC16; } /* 교육원 소개 - 라임색 */
.mz-g:nth-child(8) .mz-g__dot { background: #6366F1; } /* 기타 - 인디고 */

.mz-g__t {
    font-size: 14px;
    font-weight: 800;
    color: var(--edu-neutral-900);
}

.mz-g ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mz-g li {
    margin: 0;
}

.mz-g li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 13px;
    color: var(--edu-neutral-600);
    transition: color 0.15s;
    text-decoration: none;
}

.mz-g li a:hover,
.mz-g li a:active {
    color: var(--edu-primary-600);
}

.mz-g li a:hover .mz-chev,
.mz-g li a:active .mz-chev {
    stroke: var(--edu-primary-600);
}

.mz-chev {
    stroke: #D1D5DB;
    transition: stroke 0.15s;
}

/* Nav Footer (회사 정보 - nav 내부 스크롤 영역) */
.mz-nav-footer {
    grid-column: 1 / -1;
    margin-top: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--edu-neutral-200);
}

.mz-nav-footer__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.mz-nav-footer__links a,
.mz-nav-footer__links button {
    background: none;
    border: 0;
    padding: 0;
    font-size: 11px;
    color: var(--edu-neutral-500);
    cursor: pointer;
    font-family: var(--edu-font-sans);
    transition: color 0.15s;
}

.mz-nav-footer__links a:hover,
.mz-nav-footer__links button:hover {
    color: var(--edu-primary-600);
}

.mz-nav-footer__links a {
    text-decoration: none;
}

.mz-nav-footer__links span {
    color: var(--edu-neutral-300);
    font-size: 9px;
}

.mz-nav-footer__info {
    text-align: center;
}

.mz-nav-footer__info p {
    margin: 0;
    font-size: 10px;
    line-height: 1.7;
    color: var(--edu-neutral-400);
}

/* Footer (상담 버튼) - 숨김 처리 */
.mz-foot {
    display: none;
}

/* ============================================================
 * 6) 768px 이하 반응형
 * ============================================================ */

@media (max-width: 768px) {
    /* 모바일 헤더 표시 */
    .mz-header {
        display: flex;
    }

    /* 모바일 하단 네비게이션 표시 */
    .mz-bottom-nav {
        display: block;
    }

    /* 모바일 드로어 표시 가능 */
    .mz-fullmenu {
        display: flex;
    }

    /* 데스크톱 헤더 숨김 */
    #header-v2 {
        display: none !important;
    }

    /* 우측 퀵메뉴 숨김 */
    .right-navigation,
    #right_navigation,
    .nav-quick-v2 {
        display: none !important;
    }

    /* 챗봇 숨김 */
    #chatbot-container {
        display: none !important;
    }

    /* 띠배너 숨김 */
    .announcement-banner {
        display: none !important;
    }

    /* 컨테이너 풀폭 */
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 바디 패딩 조정 */
    body {
        padding-top: var(--mz-header-height) !important;
        padding-bottom: var(--mz-bottom-nav-height) !important;
    }

    /* Landing 페이지 하단 여백 확보 */
    main {
        min-height: calc(100vh - var(--mz-header-height) - var(--mz-bottom-nav-height));
        padding-bottom: var(--mz-bottom-nav-height);
        box-sizing: border-box;
    }

    /* document 섹션 조정 */
    #document.document {
        padding-top: 0;
    }

    /* 푸터 조정 (하단 탭바 공간 확보) */
    #footer-v2 {
        margin-bottom: var(--mz-bottom-nav-height);
    }

    /* 마이페이지 사이드바 수평 스크롤 전환 */
    .mypage-sidebar,
    .mz-sidenav {
        position: sticky;
        top: var(--mz-header-height);
        width: 100% !important;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        background: #fff;
        border-bottom: 1px solid var(--edu-neutral-200);
        padding: 0 16px;
        z-index: 100;
        -webkit-overflow-scrolling: touch;
    }

    .mypage-sidebar ul,
    .mz-sidenav__list {
        display: flex;
        flex-direction: row !important;
        gap: 0;
        padding: 0;
        margin: 0;
    }

    .mypage-sidebar li,
    .mz-sidenav__item {
        flex-shrink: 0;
    }

    .mypage-sidebar a,
    .mz-sidenav__link {
        display: block;
        padding: 12px 16px;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
    }

    .mypage-sidebar a.active,
    .mypage-sidebar li.active a,
    .mz-sidenav__link--active {
        border-bottom-color: var(--edu-primary-600);
        color: var(--edu-primary-600);
    }

    /* V3 마이페이지 레이아웃 조정 */
    .mz-mypage-layout {
        flex-direction: column;
    }

    .mz-mypage-layout__sidebar {
        width: 100% !important;
        min-width: 0 !important;
    }

    .mz-mypage-layout__content {
        width: 100% !important;
        padding: 16px 0 !important;
    }

    /* 카드 그리드 조정 */
    .mz-card-grid {
        grid-template-columns: 1fr !important;
    }

    /* 테이블 반응형 */
    .edu-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 폼 요소 조정 */
    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .form-inline .form-control {
        width: 100%;
        margin-bottom: 8px;
    }

    /* 버튼 그룹 조정 */
    .btn-group-responsive {
        flex-direction: column;
    }

    .btn-group-responsive .btn {
        width: 100%;
        margin-bottom: 8px;
    }

    /* 학습지원센터 탭 모바일에서 숨김 */
    .tabs-counsel {
        display: none !important;
    }

    /* 학습지원센터 헤더 모바일에서 숨김 */
    .mypage-header {
        display: none !important;
    }

    /* 푸터 모바일에서 숨김 */
    #footer-v2 {
        display: none !important;
    }

    /* ============================================================
     * 7) 모바일 미지원 알림
     * ============================================================ */
    .mobile-unsupported-notice {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 60vh;
        padding: 40px 20px;
        text-align: center;
        background: #fff;
    }

    .mobile-unsupported-notice__icon {
        font-size: 64px;
        color: #9ca3af;
        margin-bottom: 24px;
    }

    .mobile-unsupported-notice__title {
        font-size: 18px;
        font-weight: 600;
        color: #111827;
        margin: 0 0 8px 0;
    }

    .mobile-unsupported-notice__desc {
        font-size: 14px;
        color: #4b5563;
        margin: 0;
        line-height: 1.6;
    }

    /* 해당 페이지의 메인 컨텐츠 숨김 */
    .cert-standalone,
    .pc-management-contents,
    .download-wrapper {
        display: none !important;
    }
}