/* ==========================================================================
   Mobile User Menu
   ========================================================================== */

@media screen and (max-width: 640px) {

    .mobile-user-menu {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;

        min-width: 0;
        max-width: 100%;
    }

    .mobile-user-menu *,
    .mobile-user-menu *::before,
    .mobile-user-menu *::after {
        box-sizing: border-box;
    }


    /* 프로필 / 닉네임 */
    .mobile-user-menu__profile {
        min-width: 0;
        max-width: 92px;

        min-height: 30px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 5px 8px;

        border: 1px solid #e5e7eb;
        border-radius: 7px;

        background: #ffffff;

        overflow: hidden;

        font-size: 8px;
        font-weight: 700;
        line-height: 1;

        color: #475569;

        text-decoration: none;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-user-menu__profile:hover {
        background: #f8fafc;
        color: #111827;
    }


    /* 로그아웃 form */
    .mobile-user-menu__logout-form {
        flex: 0 0 auto;
        margin: 0;
    }


    /* 로그아웃 */
    .mobile-user-menu__logout {
        min-height: 30px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 5px 8px;

        border: 1px solid #fecaca;
        border-radius: 7px;

        background: #fff;

        font-size: 8px;
        font-weight: 700;
        line-height: 1;

        color: #dc2626;

        white-space: nowrap;

        cursor: pointer;
    }

    .mobile-user-menu__logout:hover {
        background: #fef2f2;
    }

}


/* ==========================================================================
   Very Small Mobile
   ========================================================================== */

@media screen and (max-width: 350px) {

    .mobile-user-menu {
        gap: 4px !important;
    }

    .mobile-user-menu__profile {
        max-width: 72px;

        padding-left: 6px;
        padding-right: 6px;
    }

    .mobile-user-menu__logout {
        padding-left: 6px;
        padding-right: 6px;
    }

}
@media screen and (max-width: 640px) {

    .mobile-user-menu__login {
        min-height: 30px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 5px 9px;

        border: 1px solid #d1d5db;
        border-radius: 7px;

        background: #ffffff;

        font-size: 8px;
        font-weight: 700;
        line-height: 1;

        color: #374151;

        text-decoration: none;

        white-space: nowrap;
    }

    .mobile-user-menu__login:hover {
        background: #f8fafc;
        color: #111827;
    }

}
/* PC 메뉴 슬롯을 공유하여 역할별 모바일 메뉴의 누락을 방지합니다. */
@media (max-width: 1100px) {
    .haru-mobile-full-menu { width: 100%; min-width: 0; border-top: 1px solid #e5e7eb; }
    .haru-mobile-full-menu > summary { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; cursor: pointer; font-size: 14px; font-weight: 600; color: #1f2937; list-style: none; }
    .haru-mobile-full-menu > summary::-webkit-details-marker { display: none; }
    .haru-mobile-full-menu > summary::after { content: '+'; margin-left: auto; }
    .haru-mobile-full-menu[open] > summary::after { content: '−'; }
    .haru-mobile-full-menu__body {
        /* Reserve room for the brand, search, toggle and shortcut bar. */
        max-height: max(120px, calc(100vh - 240px));
        max-height: max(120px, calc(100dvh - 240px - env(safe-area-inset-bottom, 0px)));
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding: 4px 4px 20px;
        scroll-padding-block: 8px 20px;
        position: relative;
        isolation: isolate;
    }
    /* Desktop dropdown layers must not intercept drags over mobile links. */
    .haru-mobile-full-menu__section .invisible,
    .haru-mobile-full-menu__section .account-dropdown {
        pointer-events: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .haru-mobile-full-menu__section > div { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px !important; width: 100%; }
    .haru-mobile-full-menu__section .group,
    .haru-mobile-full-menu__section .haru-account-menu { display: block; grid-column: 1 / -1; min-width: 0; }
    .haru-mobile-full-menu__section .invisible,
    .haru-mobile-full-menu__section .account-dropdown { position: static !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); visibility: visible !important; opacity: 1 !important; transform: none !important; width: 100% !important; max-width: none; box-shadow: none !important; border: 0; padding: 2px 0 8px; gap: 6px; }
    .haru-mobile-full-menu__section a,
    .haru-mobile-full-menu__section button { display: flex; align-items: center; min-height: 44px; width: 100%; max-width: none; white-space: normal; overflow-wrap: anywhere; padding: 10px 12px; border-radius: 8px; font-size: 14px; text-align: left; }
    .haru-mobile-full-menu__section a { background: #f8fafc; }
    .haru-mobile-full-menu__section .group > button { font-weight: 600; }
    .haru-mobile-full-menu__section .group > button span { display: none; }
    .haru-mobile-full-menu__section a:focus-visible,
    .haru-mobile-full-menu > summary:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
    .haru-mobile-full-menu__account { margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e7eb; }
    .haru-mobile-full-menu__heading { margin: 0; padding: 8px 12px; font-weight: 600; font-size: 14px; }
}

@media (min-width: 640px) {
    .haru-navigation .nav-item,
    .haru-navigation .group > button,
    .haru-navigation .haru-account-trigger { white-space: nowrap; overflow-wrap: normal; flex-shrink: 0; }
    .haru-navigation__search { flex-shrink: 1; min-width: 100px; max-width: 260px; }
}
@media (min-width: 640px) and (max-width: 1100px) {
    .haru-navigation > div > div { flex-wrap: wrap; height: auto; }
    .haru-navigation > div > div > div:first-child { flex-wrap: wrap; }
}

/* 태블릿에서도 PC 메뉴가 화면을 밀지 않도록 전체 메뉴로 전환 */
.haru-navigation__desktop { min-width: 0; }
@media (max-width: 1100px) {
 .haru-navigation .haru-navigation__desktop, .haru-navigation .haru-navigation__desktop-account { display:none !important; }
 .haru-navigation > div > div, .haru-navigation > div > div > div:first-child { display:flex; flex-direction:column; align-items:stretch; width:100%; height:auto; min-width:0; gap:8px; }
 .haru-navigation .haru-mobile-full-menu { display:block !important; }
 .haru-navigation .mobile-user-menu { display:flex !important; max-width:100%; min-width:0; }
 .haru-navigation .haru-navigation__search { width:100%; max-width:none; min-width:0; }
 .haru-mobile-full-menu__section .account-dropdown { pointer-events:auto !important; }
}

/* Reserve account/menu space and let search shrink before navigation items overlap. */
@media (min-width: 1101px) {
    .haru-navigation > div > div { column-gap: 16px; }
    .haru-navigation .haru-navigation__primary { column-gap: 16px; }
    .haru-navigation .haru-navigation__brand,
    .haru-navigation .haru-navigation__desktop,
    .haru-navigation .haru-navigation__desktop-account { flex: 0 0 auto; }
    .haru-navigation .haru-navigation__search { flex: 0 1 260px; min-width: 100px; width: 260px; }
    .haru-navigation .haru-navigation__desktop-account { align-self: center; }
}

@media (max-width: 1100px) {
    .haru-navigation .mobile-nav-icons {
        display: none !important;
    }
}