/* =========================================================
   HORSEAI MOBILE HEADER V2
   ========================================================= */

.horseai-mobile-head,
.horseai-mobile-drawer {
    display: none;
}


@media (max-width: 820px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }


    /* -----------------------------------------------------
       기존 PC 헤더 강제 정리
       ----------------------------------------------------- */

    .site-header {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        background: #080f1b !important;
        border-bottom: 1px solid #26394f !important;

        z-index: 9999 !important;
    }


    .site-header::before,
    .site-header::after,
    .site-header .nav-wrap::before,
    .site-header .nav-wrap::after {
        display: none !important;
        content: none !important;
    }


    .site-header .nav-wrap {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }


    /*
     * 기존 PC용 메뉴는 전부 숨긴다.
     */
    .site-header .brand,
    .site-header .brand-group,
    .site-header .main-nav,
    .site-header .horseai-primary-menu,
    .site-header .header-category,
    .site-header .horseai-login-user,
    .site-header .ai-header-logout-button,
    .site-header .nav-primary,
    .site-header .nav-member {
        display: none !important;
    }


    /*
     * nav-wrap 직계 요소도 모바일 전용 요소를 제외하고 숨김
     */
    .site-header
    .nav-wrap
    > *:not(.horseai-mobile-head):not(.horseai-mobile-drawer) {
        display: none !important;
    }


    /* -----------------------------------------------------
       모바일 상단
       ----------------------------------------------------- */

    .horseai-mobile-head {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        height: 64px !important;

        padding: 0 16px !important;

        background: #080f1b !important;
    }


    .horseai-mobile-brand {
        display: flex !important;

        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 23px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: -1px !important;

        text-decoration: none !important;

        white-space: nowrap !important;
    }


    .horseai-mobile-toggle {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 44px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid #3b526c !important;
        border-radius: 10px !important;

        background: #111f31 !important;

        cursor: pointer !important;

        appearance: none !important;
        -webkit-appearance: none !important;
    }


    .horseai-mobile-toggle-lines {
        position: relative !important;

        display: block !important;

        width: 22px !important;
        height: 16px !important;
    }


    .horseai-mobile-toggle-lines::before,
    .horseai-mobile-toggle-lines::after,
    .horseai-mobile-toggle-lines span {
        position: absolute !important;

        left: 0 !important;

        display: block !important;

        width: 22px !important;
        height: 2px !important;

        border-radius: 4px !important;

        background: #ffffff !important;

        transition:
            top .18s ease,
            transform .18s ease,
            opacity .18s ease !important;

        content: "" !important;
    }


    .horseai-mobile-toggle-lines::before {
        top: 0 !important;
    }


    .horseai-mobile-toggle-lines span {
        top: 7px !important;
    }


    .horseai-mobile-toggle-lines::after {
        top: 14px !important;
    }


    .horseai-mobile-toggle.is-open
    .horseai-mobile-toggle-lines::before {
        top: 7px !important;
        transform: rotate(45deg) !important;
    }


    .horseai-mobile-toggle.is-open
    .horseai-mobile-toggle-lines span {
        opacity: 0 !important;
    }


    .horseai-mobile-toggle.is-open
    .horseai-mobile-toggle-lines::after {
        top: 7px !important;
        transform: rotate(-45deg) !important;
    }


    /* -----------------------------------------------------
       펼쳐지는 메뉴
       ----------------------------------------------------- */

    .horseai-mobile-drawer {
        position: absolute !important;

        top: 64px !important;
        left: 0 !important;
        right: 0 !important;

        display: none !important;

        width: 100% !important;
        max-height: calc(100vh - 64px) !important;

        padding: 10px 14px 16px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: #0b1726 !important;

        border-top: 1px solid #21364c !important;
        border-bottom: 1px solid #304961 !important;

        box-shadow:
            0 18px 35px rgba(0, 0, 0, .5) !important;

        z-index: 10001 !important;
    }


    .horseai-mobile-drawer.is-open {
        display: block !important;
    }


    .horseai-mobile-menu {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .horseai-mobile-menu a {
        position: relative !important;

        display: flex !important;

        align-items: center !important;

        width: 100% !important;
        min-height: 49px !important;

        margin: 0 !important;
        padding: 0 15px !important;

        border: 0 !important;
        border-bottom: 1px solid #203349 !important;
        border-radius: 0 !important;

        background: transparent !important;

        color: #d5e0ec !important;

        font-size: 15px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;

        text-decoration: none !important;
        text-align: left !important;

        white-space: nowrap !important;
    }


    .horseai-mobile-menu a:hover,
    .horseai-mobile-menu a:focus {
        background: #14263b !important;
        color: #ffffff !important;
    }


    .horseai-mobile-menu a.is-current {
        color: #ff626d !important;
    }


    .horseai-mobile-menu a.is-current::before {
        position: absolute !important;

        top: 13px !important;
        bottom: 13px !important;
        left: 0 !important;

        width: 3px !important;

        border-radius: 5px !important;

        background: #ff4f5d !important;

        content: "" !important;
    }


    /*
     * 회원가입 / 마이페이지
     */
    .horseai-mobile-menu
    a[data-account="primary"] {
        margin-top: 8px !important;

        border: 1px solid #ff4f5d !important;
        border-radius: 9px !important;

        background: rgba(255, 79, 93, .12) !important;

        color: #ffffff !important;
    }


    /*
     * 로그아웃
     */
    .horseai-mobile-menu
    a[href="/logout"] {
        margin-top: 7px !important;

        border: 1px solid #3b526d !important;
        border-radius: 9px !important;

        color: #aebed0 !important;
    }


    body.horseai-mobile-menu-open {
        overflow: hidden !important;
    }
}


@media (max-width: 380px) {

    .horseai-mobile-head {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }


    .horseai-mobile-brand {
        font-size: 22px !important;
    }


    .horseai-mobile-drawer {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}



/* =========================================================
   HORSEAI_MOBILE_AI_MENU_FIX_V1
   PC AI분석 메뉴 효과가 모바일에 겹치는 문제 차단
   ========================================================= */

@media (max-width: 820px) {

    /*
     * 모바일 메뉴 내부에서는
     * PC 헤더의 AI 분석결과용
     * PREMIUM / underline / badge 가상요소 제거
     */
    .site-header
    .horseai-mobile-menu
    a[href="/ai-analysis"]::before,

    .site-header
    .horseai-mobile-menu
    a[href="/ai-analysis"]::after,

    .site-header
    .horseai-mobile-menu
    a[href^="/ai-analysis?"]::before,

    .site-header
    .horseai-mobile-menu
    a[href^="/ai-analysis?"]::after {
        display: none !important;
        content: none !important;

        width: 0 !important;
        height: 0 !important;

        position: static !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: none !important;

        transform: none !important;
    }


    /*
     * AI 분석결과 링크 본체도
     * 일반 모바일 메뉴와 동일하게 강제
     */
    .site-header
    .horseai-mobile-menu
    a[href="/ai-analysis"],

    .site-header
    .horseai-mobile-menu
    a[href^="/ai-analysis?"] {
        position: relative !important;

        display: flex !important;

        align-items: center !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;
        min-height: 49px !important;

        margin: 0 !important;
        padding: 0 15px !important;

        border: 0 !important;
        border-bottom: 1px solid #203349 !important;
        border-radius: 0 !important;

        background: transparent !important;

        color: #d5e0ec !important;

        font-size: 15px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;

        text-indent: 0 !important;
        text-transform: none !important;
        text-decoration: none !important;

        transform: none !important;

        white-space: nowrap !important;
        overflow: visible !important;
    }


    /*
     * 현재 선택 메뉴 표시는
     * pseudo 대신 왼쪽 inset 선 사용
     */
    .site-header
    .horseai-mobile-menu
    a[href="/ai-analysis"].is-current,

    .site-header
    .horseai-mobile-menu
    a[href^="/ai-analysis?"].is-current {
        color: #ff626d !important;

        box-shadow:
            inset 3px 0 0 #ff4f5d !important;
    }

}

/* HORSEAI_MOBILE_AI_MENU_FIX_V1_END */