/* =========================
   Umbreon v2 Navbar
========================= */


.navbar {

    width:100%;

    background:var(--bg-card);

    border-bottom:
    1px solid var(--border);

    position:sticky;

    top:0;

    z-index:1000;

}



.navbar-inner {

    max-width:var(--container);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:14px 24px;

}





/* logo */

.logo a {

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--text-main);

    text-decoration:none;

    font-size:24px;

    font-weight:700;

}


.logo-icon {

    font-size:30px;

}





/* search */

.search-area {

    flex:1;

    max-width:650px;

}



.search-area form {

    display:flex;

    gap:8px;

}



.search-area input {

    width:100%;

    background:#090910;

    color:var(--text-main);

    border:

    1px solid var(--border);

    border-radius:

    var(--radius-md);

    padding:12px 16px;

    outline:none;

}



.search-area input:focus {

    border-color:

    var(--accent);

}



.search-area button {

    background:

    var(--accent);

    color:white;

    border:none;

    border-radius:

    var(--radius-md);

    padding:0 20px;

    cursor:pointer;

}


.search-area button:hover {

    background:

    var(--accent-light);

}





/* 오른쪽 메뉴 */

.nav-actions {

    display:flex;

    align-items:center;

    gap:15px;

}





/* user menu */

.user-menu {

    display:flex;

    align-items:center;

    gap:10px;

}



.user-menu a {

    color:

    var(--text-main);

    text-decoration:none;

    padding:8px 12px;

    border-radius:10px;

}



.user-menu a:hover {

    background:

    var(--bg-hover);

}





/* profile */

.profile-button {

    display:flex;

    align-items:center;

    gap:8px;

    background:none;

    border:none;

    color:white;

    cursor:pointer;

}



.header-profile-image {

    width:32px;

    height:32px;

    border-radius:50%;

    object-fit:cover;

}





.profile-dropdown {

    display:none;

    position:absolute;

    background:

    var(--bg-card);

    border:

    1px solid var(--border);

    border-radius:

    var(--radius-md);

    padding:10px;

}






/* NSFW */

.nsfw-switch {

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--text-main);

}





/* mobile */

@media(max-width:768px){


    .navbar-inner {

        flex-direction:column;

        padding:12px;

    }



    .search-area {

        width:100%;

    }



    .nav-actions {

        width:100%;

        justify-content:center;

    }


}


/* =========================
   Dropdown visibility fix
========================= */


.navbar,
.navbar * {

    overflow:visible;

}



.navbar {

    overflow:visible !important;

}



.search-area {

    position:relative;

    overflow:visible !important;

}



#tagSuggestions {

    position:fixed !important;

    z-index:99999 !important;

}



.profile-menu {

    position:relative;

}



.profile-dropdown {

    z-index:99999 !important;

}



@media(max-width:768px){

    .navbar {

        overflow:visible !important;

    }


    .search-area {

        overflow:visible !important;

    }

}




/* =========================
   Final Profile Dropdown
========================= */

.profile-menu {

    position:relative;

}


.profile-dropdown {

    display:none !important;

    position:absolute !important;

    right:0;

    top:45px;

    flex-direction:column;

    background:var(--bg-card);

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    min-width:160px;

    padding:10px;

    z-index:999999;

}


.profile-dropdown.show {

    display:flex !important;

}


.profile-dropdown a {

    display:block;

    width:100%;

    padding:10px;

    white-space:nowrap;

    color:var(--text-main);

    text-decoration:none;

}


.profile-dropdown a:hover {

    background:var(--bg-hover);

}


@media(max-width:768px){

    .profile-dropdown {

        right:auto;

        left:50%;

        transform:translateX(-50%);

    }

}