/* ===================================
   masanggames 공통 Top Menu
   =================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

/* Animation Keyframes */
@keyframes appear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nav Background Overlay */
div.nav-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10001;
    width: 100%;
    height: 500vh;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

div.nav-background.active {
    display: block;
}

/* Top Menu Base */
nav#top_menu {
    position: absolute;
    top: 0;
    z-index: 99999;
    width: 100%;
    height: 50px;
    background: black !important;
    border-radius: 0;
    min-width: 1280px;
}

nav#top_menu div.nav-in {
    position: relative;
    margin: 0 35px;
}

nav#top_menu a.logo {
    display: block;
    margin-top: 11px;
    width: 105px;
    height: 28px;
    background: url('/common/images/menu/msg_01.png') no-repeat;
    font-size: 0;
    background-size: contain;
}

/* Nav Items */
nav#top_menu div.nav-in ul li.nav-item {
    position: absolute;
    top: 2px;
}

nav#top_menu div.nav-in ul li.nav-item:nth-child(1) {
    left: 160px;
}

nav#top_menu div.nav-in ul li.nav-item:nth-child(2) {
    right: 120px;
}

nav#top_menu div.nav-in ul li.nav-item:nth-child(3) {
    right: 28px;
}

nav#top_menu div.nav-in ul li.nav-item a.nav-text {
    position: relative;
    display: block;
    margin-top: 0px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Noto Sans KR', sans-serif !important;
    line-height: initial !important;
}

nav#top_menu div.nav-in ul li.nav-item a.nav-text:after {
    display: block;
    content: '';
    clear: both;
    width: 15px;
    height: 15px;
    background: url('/common/images/menu/arrow_open.png') no-repeat;
    background-size: contain;
    position: absolute;
    top: 4px;
    right: -20px;
    opacity: 0.7;
    transform: scale(0.8);
}

nav#top_menu div.nav-in ul li.nav-item.active a.nav-text:after {
    display: block;
    content: '';
    clear: both;
    width: 15px;
    height: 15px;
    background: url('/common/images/menu/arrow_close.png') no-repeat;
    background-size: contain;
    position: absolute;
    top: 4px;
    right: -20px;
    opacity: 0.7;
    transform: scale(0.8);
}

nav#top_menu div.nav-in ul li.nav-item a.nav-text:hover {
    color: #fff !important;
    text-decoration: none !important;
}

nav#top_menu div.nav-in ul li.nav-item a.nav-text:focus,
nav#top_menu div.nav-in ul li.nav-item a.nav-text:active {
    text-decoration: none !important;
}

nav#top_menu div.nav-in ul li.nav-item a.nav-text:hover:after,
nav#top_menu div.nav-in ul li.nav-item.active a.nav-text:hover:after {
    opacity: 1;
}

nav#top_menu div.nav-in ul li.nav-item:nth-child(2) a.nav-text:after {
    display: none;
}

/* Game Dropdown */
nav#top_menu > div.dropdown {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 342px;
    background: rgba(29, 31, 35, 0.95);
    border-radius: 0;
}

nav#top_menu > div.dropdown.active {
    display: block;
}

div.dropdown div.game_in {
    width: 1240px;
    margin: 0 auto;
    margin-top: 30px;
}

div.dropdown div.game_in div.game_center {
    margin: 0 auto;
    width: 888px;
}

div.dropdown div.game_in div.game {
    float: left;
    width: 120px;
    height: 80px;
    margin: 20px 14px;
    opacity: 0;
    transform: translateY(20px);
    position: relative;
}

div.dropdown div.game_in div.game a.game_text {
    display: block;
    margin-top: -25px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    color: #797a80 !important;
    text-decoration: none;
    font-family: 'Noto Sans KR', sans-serif !important;
    line-height: initial !important;
}

div.dropdown div.game_in div.game:hover a.game_text {
    color: #ced0d9 !important;
}

/* Game Logos */
div.dropdown div.game_in div.game1 a.dropdown-item {
    display: block;
    width: 120px;
    height: 80px;
    margin: auto;
    background: url('/common/images/menu/dk_logo.png') center 15px no-repeat;
}

div.dropdown div.game_in div.game1 a.dropdown-item:before {
    display: block;
    clear: both;
    content: '';
    width: 120px;
    height: 80px;
    background: url('/common/images/menu/dk_logo_on.png') center 15px no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

div.dropdown div.game_in div.game1:hover a.dropdown-item:before {
    opacity: 1;
}

div.dropdown div.game_in div.game1 {
    animation: appear 1s 0.1s forwards;
}

div.dropdown div.game_in div.game2 a.dropdown-item {
    display: block;
    width: 120px;
    height: 80px;
    margin: auto;
    background: url('/common/images/menu/pt_logo.png') center 10px no-repeat;
}

div.dropdown div.game_in div.game2 a.dropdown-item:before {
    display: block;
    clear: both;
    content: '';
    width: 120px;
    height: 80px;
    background: url('/common/images/menu/pt_logo_on.png') center 10px no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

div.dropdown div.game_in div.game2:hover a.dropdown-item:before {
    opacity: 1;
}

div.dropdown div.game_in div.game2 {
    animation: appear 1s 0.2s forwards;
}

div.dropdown div.game_in div.game3 a.dropdown-item {
    display: block;
    width: 120px;
    height: 80px;
    margin: auto;
    background: url('/common/images/menu/cc_logo.png') center 6px no-repeat;
}

div.dropdown div.game_in div.game3 a.dropdown-item:before {
    display: block;
    clear: both;
    content: '';
    width: 120px;
    height: 80px;
    background: url('/common/images/menu/cc_logo_on.png') center 6px no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

div.dropdown div.game_in div.game3:hover a.dropdown-item:before {
    opacity: 1;
}

div.dropdown div.game_in div.game3 {
    animation: appear 1s 0.3s forwards;
}

div.dropdown div.game_in div.game4 a.dropdown-item {
    display: block;
    width: 120px;
    height: 80px;
    margin: auto;
    background: url('/common/images/menu/lh_logo.png') center 6px no-repeat;
}

div.dropdown div.game_in div.game4 a.dropdown-item:before {
    display: block;
    clear: both;
    content: '';
    width: 120px;
    height: 80px;
    background: url('/common/images/menu/lh_logo_on.png') center 6px no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

div.dropdown div.game_in div.game4:hover a.dropdown-item:before {
    opacity: 1;
}

div.dropdown div.game_in div.game4 {
    animation: appear 1s 0.4s forwards;
}

div.dropdown div.game_in div.game5 a.dropdown-item {
    display: block;
    width: 120px;
    height: 80px;
    margin: auto;
    background: url('/common/images/menu/gz_logo1.png') center 9px no-repeat;
}

div.dropdown div.game_in div.game5 a.dropdown-item:before {
    display: block;
    clear: both;
    content: '';
    width: 120px;
    height: 80px;
    background: url('/common/images/menu/gz_logo_on.png') center 9px no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

div.dropdown div.game_in div.game5:hover a.dropdown-item:before {
    opacity: 1;
}

div.dropdown div.game_in div.game5 {
    animation: appear 1s 0.5s forwards;
}

div.dropdown div.game_in div.game6 a.dropdown-item {
    display: block;
    width: 120px;
    height: 80px;
    margin: auto;
    background: url('/common/images/menu/ao_logo.png') center 3px no-repeat;
}

div.dropdown div.game_in div.game6 a.dropdown-item:before {
    display: block;
    clear: both;
    content: '';
    width: 120px;
    height: 80px;
    background: url('/common/images/menu/ao_logo_on.png') center 3px no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

div.dropdown div.game_in div.game6:hover a.dropdown-item:before {
    opacity: 1;
}

div.dropdown div.game_in div.game6 {
    animation: appear 1s 0.6s forwards;
}

div.dropdown div.game_in div.game7 a.dropdown-item {
    display: block;
    width: 120px;
    height: 80px;
    margin: auto;
    background: url('/common/images/menu/fh_logo.png') center 3px no-repeat;
}

div.dropdown div.game_in div.game7 a.dropdown-item:before {
    display: block;
    clear: both;
    content: '';
    width: 120px;
    height: 80px;
    background: url('/common/images/menu/fh_logo_on.png') center 3px no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

div.dropdown div.game_in div.game7:hover a.dropdown-item:before {
    opacity: 1;
}

div.dropdown div.game_in div.game7 {
    animation: appear 1s 0.7s forwards;
}

div.dropdown div.game_in div.game8 a.dropdown-item {
    display: block;
    width: 120px;
    height: 80px;
    margin: auto;
    background: url('/common/images/menu/sr_logo.png') center 3px no-repeat;
}

div.dropdown div.game_in div.game8 a.dropdown-item:before {
    display: block;
    clear: both;
    content: '';
    width: 120px;
    height: 80px;
    background: url('/common/images/menu/sr_logo_on.png') center 3px no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

div.dropdown div.game_in div.game8:hover a.dropdown-item:before {
    opacity: 1;
}

div.dropdown div.game_in div.game8 {
    animation: appear 1s 0.8s forwards;
}

div.dropdown div.game_in div.game9 a.dropdown-item {
    display: block;
    width: 120px;
    height: 80px;
    margin: auto;
    background: url('/common/images/menu/nx_logo.png') center 3px no-repeat;
}

div.dropdown div.game_in div.game9 a.dropdown-item:before {
    display: block;
    clear: both;
    content: '';
    width: 120px;
    height: 80px;
    background: url('/common/images/menu/nx_logo_on.png') center 3px no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

div.dropdown div.game_in div.game9:hover a.dropdown-item:before {
    opacity: 1;
}

div.dropdown div.game_in div.game9 {
    animation: appear 1s 0.9s forwards;
}

div.dropdown div.game_in div.game10 {
    animation: appear 1s 1.0s forwards;
}

/* Launcher Box */
a.masang_launcher {
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    margin-top: 20px;
    display: block;
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #797a80;
    font-size: 16px;
    text-decoration: none;
    font-family: 'Noto Sans KR', sans-serif;
    background: #1d1f23;
    border-top: 1px solid #25282d;
}

a.masang_launcher:hover {
    background: #1d1f23;
    color: #ced0d9 !important;
    text-decoration: none !important;
}

div.masang_launcher_box p {
    position: absolute;
    bottom: 15.5px;
    left: 50%;
    margin-left: -91px;
    z-index: 5;
    display: block;
    width: 18px;
    height: 16px;
    background: url('/common/images/menu/masang_logo_on.png') 0 0 no-repeat;
}

/* Account Dropdown - Logged Out */
nav#top_menu div.nav-in ul li.nav-item03 div.dropdown {
    display: none;
    position: absolute;
    top: 25px;
    left: -230px;
    width: 304px;
    height: 134px;
    background: url('/common/images/menu/logout_bg.png') no-repeat;
}

nav#top_menu div.nav-in ul li.nav-item03.active div.dropdown {
    display: block;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown a.dropdown-item.logout_box {
    position: absolute;
    top: 27px;
    left: 50%;
    margin-left: -131px;
    display: block;
    width: 262px;
    height: 42px;
    background: url('/common/images/menu/logout_btn.png') no-repeat;
    cursor: pointer;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown a.dropdown-item.logout_box:hover {
    background: url('/common/images/menu/logout_btn_on.png') no-repeat;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown div.join a {
    position: absolute;
    top: 95px;
    left: 23px;
    display: block;
    width: 120px;
    height: 30px;
    background: url('/common/images/menu/icon_join.png') 0 7px no-repeat;
    font-size: 16px;
    color: #cccccc;
    font-family: 'Noto Sans KR', sans-serif;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown div.join a:hover {
    background: url('/common/images/menu/icon_join_on.png') 0 7px no-repeat;
    color: #fff;
}

/* Account Dropdown - Logged In */
nav#top_menu div.nav-in ul li.nav-item03 div.dropdown.login_box {
    display: none;
    position: absolute;
    top: 25px;
    right: -5px;
    left: auto;
    width: 304px;
    height: 178px;
    background: url('/common/images/menu/login_bg.png') no-repeat;
}

nav#top_menu div.nav-in ul li.nav-item03.active div.dropdown.login_box {
    display: block;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown.login_box div.user {
    position: absolute;
    top: 28px;
    left: 20px;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown.login_box div.user p {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: bold;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown.login_box div.user p.name {
    color: #00aeff;
    font-size: 17px;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown.login_box div.user p.account {
    color: #808080;
    font-size: 13px;
    margin-top: 5px;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown.login_box div.icon_management {
    position: absolute;
    top: 94px;
    left: 20px;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown.login_box div.icon_management a {
    display: block;
    width: 120px;
    height: 30px;
    background: url('/common/images/menu/icon_account.png') 0 7px no-repeat;
    font-size: 16px;
    color: #cccccc;
    font-family: 'Noto Sans KR', sans-serif;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown.login_box div.icon_management a:hover {
    background: url('/common/images/menu/icon_account_on.png') 0 7px no-repeat;
    color: #fff;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown.login_box div.icon_logout {
    position: absolute;
    top: 138px;
    left: 20px;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown.login_box div.icon_logout a {
    display: block;
    width: 120px;
    height: 30px;
    background: url('/common/images/menu/icon_logout.png') 0 7px no-repeat;
    font-size: 16px;
    color: #cccccc;
    font-family: 'Noto Sans KR', sans-serif;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
}

nav#top_menu div.nav-in ul li.nav-item03 div.dropdown.login_box div.icon_logout a:hover {
    background: url('/common/images/menu/icon_logout_on.png') 0 7px no-repeat;
    color: #fff;
}

/* Product-specific styles */
nav#top_menu.top-menu-ao {
    top: -50px;
}

nav#top_menu.top-menu-lh {
    z-index: 100001;
}

nav#top_menu.top-menu-pt,
nav#top_menu.top-menu-gz,
nav#top_menu.top-menu-fh,
nav#top_menu.top-menu-sr,
nav#top_menu.top-menu-nx {
    top: 0;
    z-index: 999999;
}

nav#top_menu.top-menu-cc {
    position: fixed;
    z-index: 999999;
    min-width: 0;
}

/* ND: PC는 타 상품과 동일(절대배치·텍스트 링크). 모바일만 고정바·가운데 로고·좌 햄버거·우 계정 아이콘 */
nav#top_menu.top-menu-nd .top-menu-nd-only-mobile {
    display: none !important;
}

/* ND PC: 스크롤 시 상단 고정 유지 */
@media (min-width: 1280px) {
    nav#top_menu.top-menu-nd {
        position: fixed;
        top: 0;
    }
}

/* DK: ND와 동일 — 스크롤 시 공통 탑메뉴 고정 */
@media (min-width: 1280px) {
    nav#top_menu.top-menu-dk {
        position: fixed;
        top: 0;
    }
}

/* 1280 미만: 레거시 min-width(1280) 바가 깨지므로 ND 반응형 탑바 규칙 적용 */
@media (max-width: 1279px) {
    nav#top_menu.top-menu-nd,
    nav#top_menu.top-menu-dk {
        position: fixed;
        z-index: 100001;
        border-bottom: 1px solid #333333;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    nav#top_menu.top-menu-nd li.nav-item02 {
        display: none !important;
    }

    nav#top_menu.top-menu-nd .top-menu-nd-only-mobile {
        display: flex !important;
    }

    nav#top_menu.top-menu-nd div.nav-in {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 50px;
        margin: 0 16px;
        box-sizing: border-box;
    }

    nav#top_menu.top-menu-nd div.nav-in a.logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-top: 0;
        z-index: 1;
    }

    nav#top_menu.top-menu-nd div.nav-in ul {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    nav#top_menu.top-menu-nd div.nav-in ul li.nav-item {
        position: relative;
        top: auto;
        left: auto !important;
        right: auto !important;
    }

    nav#top_menu.top-menu-nd div.nav-in ul li.nav-item:nth-child(3) {
        margin-left: auto;
    }

    /* 우측 계정: 사람 아이콘 */
    nav#top_menu.top-menu-nd li.nav-item03 a.nav-text {
        display: block;
        width: 24px;
        height: 24px;
        font-size: 0 !important;
        color: transparent !important;
        line-height: 0;
        padding: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23e8e8e8%22 stroke-width=%221.75%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%223.5%22/%3E%3Cpath d=%22M5.2%2020.5c.9-3.6%205.4-5.5%206.8-5.5h.2c1.4%200%205.9%201.9%206.8%205.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E")
            center / contain no-repeat;
    }

    nav#top_menu.top-menu-nd li.nav-item03 a.nav-text::after,
    nav#top_menu.top-menu-nd li.nav-item03.active a.nav-text::after,
    nav#top_menu.top-menu-nd li.nav-item03 a.nav-text:hover::after,
    nav#top_menu.top-menu-nd li.nav-item03.active a.nav-text:hover::after {
        display: none !important;
        content: none !important;
    }

    nav#top_menu.top-menu-nd li.nav-item03 a.nav-text:hover,
    nav#top_menu.top-menu-nd li.nav-item03 a.nav-text:focus-visible {
        filter: brightness(1.15);
    }

    nav#top_menu.top-menu-nd li.nav-item03.active a.nav-text {
        filter: brightness(1.2);
    }

    nav#top_menu.top-menu-nd li.nav-item03 div.dropdown {
        left: auto !important;
        right: 0;
    }

    nav#top_menu.top-menu-nd li.nav-item03 .top-menu-nd-faq-row {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        box-sizing: border-box;
    }

    nav#top_menu.top-menu-nd li.nav-item03 .top-menu-nd-faq-row a {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.88);
        font-family: 'Noto Sans KR', sans-serif;
        text-decoration: none;
    }

    nav#top_menu.top-menu-nd li.nav-item03 .top-menu-nd-faq-row a:hover {
        color: #ffffff;
    }

    nav#top_menu.top-menu-nd li.nav-item03 div.dropdown:not(.login_box) {
        height: auto;
        min-height: 170px;
    }

    nav#top_menu.top-menu-nd li.nav-item03 div.dropdown:not(.login_box) a.dropdown-item.logout_box {
        top: 63px;
    }

    nav#top_menu.top-menu-nd li.nav-item03 div.dropdown:not(.login_box) div.join a {
        top: 131px;
    }

    nav#top_menu.top-menu-nd li.nav-item03 div.dropdown.login_box {
        height: auto;
        min-height: 214px;
    }

    nav#top_menu.top-menu-nd li.nav-item03 div.dropdown.login_box div.user {
        top: 64px;
    }

    nav#top_menu.top-menu-nd li.nav-item03 div.dropdown.login_box div.icon_management {
        top: 130px;
    }

    nav#top_menu.top-menu-nd li.nav-item03 div.dropdown.login_box div.icon_logout {
        top: 174px;
    }

    /* 좌측 게임: 햄버거 */
    nav#top_menu.top-menu-nd li.nav-item01 a.nav-text {
        display: block;
        width: 22px;
        height: 16px;
        font-size: 0 !important;
        color: transparent !important;
        line-height: 0;
        position: relative;
        padding: 0;
    }

    nav#top_menu.top-menu-nd li.nav-item01 a.nav-text::after,
    nav#top_menu.top-menu-nd li.nav-item01.active a.nav-text::after,
    nav#top_menu.top-menu-nd li.nav-item01 a.nav-text:hover::after,
    nav#top_menu.top-menu-nd li.nav-item01.active a.nav-text:hover::after {
        display: none !important;
        content: none !important;
    }

    nav#top_menu.top-menu-nd li.nav-item01 a.nav-text::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 22px;
        height: 2px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow:
            0 7px 0 rgba(255, 255, 255, 0.9),
            0 14px 0 rgba(255, 255, 255, 0.9);
    }

    nav#top_menu.top-menu-nd li.nav-item01 a.nav-text:hover::before,
    nav#top_menu.top-menu-nd li.nav-item01 a.nav-text:focus-visible::before {
        background: #ffffff;
        box-shadow:
            0 7px 0 #ffffff,
            0 14px 0 #ffffff;
    }

    nav#top_menu.top-menu-nd li.nav-item01.active a.nav-text::before {
        background: #ffffff;
        box-shadow:
            0 7px 0 #ffffff,
            0 14px 0 #ffffff;
    }
}

/* ND 모바일: masang 공통 탑 메뉴 비표시(게임 헤더만 사용). 데스크톱(769px+)은 유지 */
@media (max-width: 768px) {
    .nav-background,
    nav#top_menu.top-menu-nd {
        display: none !important;
    }
}