/* ==========================================================================
   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;
    }

}