/* ===========================
   Header - 새 디자인 2026
   Breakpoints: 1920, 1440, 1024, 768, 375
   =========================== */

/* === 모바일 로고 영역 === */
.header_MO {
    display: none;
    background: #fff;
    padding: 0;
    justify-content: center;
    align-items: center;
}

.header_MO .logoCont {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.header_MO .logoCont img {
    width: 84px !important;
    height: 56px;
    object-fit: contain;
}

/* === 메인 네비게이션 === */
#mainNav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
    transition: 0.3s;
}

#mainNav img {
    height: auto;
}

/* === navList 영역 === */
#mainNav .navList {
    position: relative;
    display: block;
    background: #fff;
    padding: 4px 80px;
    box-shadow: 0px 1px 20px -7px rgba(0, 0, 0, 0.1);
}

/* navList_ul: 로고(좌) + nav_right(우) */
.navList_ul {
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: space-between;
}

/* === 로고 (PC) === */
.nav_logo {
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.nav_logo img {
    max-width: 104px;
    height: 69px;
    object-fit: contain;
}

/* === nav_right: 메뉴 + 버튼 묶음 (우측 정렬) === */
.nav_right {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* === nav_menu (메뉴 항목 리스트) === */
.nav_menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav_menu_inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 네비 항목 기본 */
.nav_menu_inner li {
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.nav_menu_inner li .navDiv {
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.nav_menu_inner li .navDiv a {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: #5A636F;
    text-decoration: none;
    letter-spacing: -0.5px;
    white-space: nowrap;
    padding: 14px 16px;
}

.nav_menu_inner li .navDiv.active a {
    color: #3CCBDB;
}

.nav_menu_inner li:hover .navDiv a {
    color: #3CCBDB;
}

/* 네비 항목 패딩 */
.navListSecond .navDiv {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === nav_btn: 회원가입/로그인 버튼 (PC) === */
.nav_btn {
    display: flex;
    align-items: center;
    gap: 24px;
    line-height: 1;
}

.nav_btn .btn_signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 12px 16px;
    background: #3CCBDB;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: -0.5px;
    white-space: nowrap;
    transition: background 0.2s;
}

.nav_btn .btn_signup:hover {
    background: #2fb5c4;
}

.nav_btn .btn_login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 12px 16px;
    background: #EEF0F8;
    color: #10A6B7;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: -0.5px;
    white-space: nowrap;
    transition: background 0.2s;
}

.nav_btn .btn_login:hover {
    background: #dfe2ee;
}

/* === 모바일 전용 항목 (MO) - PC에서 숨김 === */
.nav_menu_inner .navListSecond.MO {
    display: none;
}

/* === nav_btn PC에서만 표시 === */
.nav_btn.PC {
    display: flex;
}

/* === 서브메뉴 (레거시 지원) === */
.navList .navList2_submenu {
    display: none;
    position: absolute;
    text-align: initial;
    top: calc(100% + -4px);
    left: 50%;
    transform: translate(-50%, 0%);
    width: 210px;
    box-shadow: 5px 5px 10px -3px #dddddd, -5px 5px 10px -3px #dddddd;
    border-radius: 15px;
    z-index: 99;
    color: #666;
    background-color: #ffffff;
}

.navList .navList2_submenu p {
    margin: 25px !important;
}

.navListSecond {
    position: relative;
}

.nav_menu_inner li:nth-child(1):hover .navList2_submenu {
    display: block;
}


/* =============================================
   태블릿/모바일 (max-width: 1024px)
   ============================================= */
@media (max-width: 1024px) {
    #mainNav {
        top: 0;
    }

    /* 모바일 로고 표시 */
    .header_MO {
        display: flex;
        height: 56px;
    }

    /* PC 로고 숨기기 */
    .nav_logo {
        display: none;
    }

    /* navList: frosted glass 스타일 */
    #mainNav .navList {
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    .navList_ul {
        justify-content: center;
    }

    /* nav_right: 전체 너비 */
    .nav_right {
        width: 100%;
        gap: 0;
        background: rgba(184, 183, 201, 0.3);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    /* nav_menu: 전체 너비 */
    .nav_menu {
        width: 100%;
    }

    /* 메뉴 가로 스크롤 (4.2개 보이기) */
    .nav_menu_inner {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0px;
        /* padding: 0 16px; */
        align-items: center;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Firefox */
    }

    .nav_menu_inner::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    /* 네비 항목 스타일 - 4.2개 보이기 */
    .nav_menu_inner .navListSecond {
        /* flex: 0 0 calc((100vw - 32px) / 4.3); */
        /* scroll-snap-align: start; */
    }

    .nav_menu_inner li .navDiv a {
        font-size: 16px;
        font-weight: 600;
    }

    .nav_menu_inner li .navDiv.active a {
        font-size: 16px;
    }

    /* MO 항목 표시 */
    .nav_menu_inner .navListSecond.MO {
        display:block;
    }

    /* PC 버튼 숨기기 */
    .nav_btn.PC {
        display: none;
    }

    /* 서브메뉴 숨기기 */
    .navList .navList2_submenu {
        display: none !important;
    }
}

/* =============================================
   모바일 (max-width: 767px)
   ============================================= */
@media (max-width: 767px) {
    .nav_menu_inner li .navDiv a {
        font-size: 16px;
    }
    
    .header_MO .logoCont img {
        width: 84px !important;
        height: 56px;
    }
    .nav_menu_inner li:hover .navDiv a{
        color: #5A636F;
    }
}

@media (max-width: 700px) {
    .nav_menu_inner {
        justify-content: flex-start;
    }
}

/* =============================================
   스피너
   ============================================= */
.spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 80px);
}

.spinner img {
    width: 100px;
}

/* 유틸리티 */
.m_show {
    display: none;
}

.displaynone {
    display: none !important;
}

.visibility {
    visibility: hidden;
}