@charset "utf-8";

:root {
    --od-bg: #100c09;
    --od-panel: #201812;
    --od-panel-raised: #2c2118;
    --od-line: #806647;
    --od-line-soft: rgba(184, 148, 99, 0.24);
    --od-bronze: #aa7d43;
    --od-bronze-light: #d2af78;
    --od-steel: #d6c8b3;
    --od-muted: #a08e78;
    --od-danger: #a94c3d;
    --od-wine: #5b211f;
}

html,
body {
    background: var(--od-bg);
}

body {
    color: var(--od-steel);
    letter-spacing: -0.01em;
}

::selection {
    color: #160f09;
    background: var(--od-bronze-light);
}

::-webkit-scrollbar-track { background: #100c09; }
::-webkit-scrollbar-thumb { background: #806647; border-radius: 0; }

#wrap_content.main {
    background-color: var(--od-bg);
    background-image:
        linear-gradient(180deg, rgba(10, 7, 5, .08) 0, rgba(12, 8, 6, .16) 420px, #100c09 1010px, #100c09 100%),
        url('/assets/img/odyssey/bg/main_hero_v3.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 1180px, 100% auto;
}

#wrap_content.main .video-container {
    display: none;
}

#wrap_content.login {
    background-color: var(--od-bg);
    background-image:
        linear-gradient(90deg, rgba(8, 5, 3, .2), rgba(11, 8, 6, .36) 50%, rgba(8, 5, 3, .2)),
        url('/assets/img/odyssey/bg/login_hero_optimized.jpg');
    background-position: center;
    background-size: cover;
}

.header {
    border-bottom: 1px solid rgba(170, 125, 67, 0.78);
    background: linear-gradient(90deg, rgba(16, 11, 8, .97), rgba(49, 35, 25, .95) 48%, rgba(16, 11, 8, .97));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.header::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--od-bronze), transparent);
}

.logo img,
.login_logo {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

.gnb li {
    border-right-color: var(--od-line-soft);
}

.gnb li a,
.user_info p,
.message p {
    color: #ded2c1;
    font-weight: 500;
}

.gnb li a:hover,
.message p:hover,
.myinfo_btn:hover {
    color: var(--od-bronze-light);
}

.message span {
    color: #160f09;
    background: var(--od-bronze);
}

.money_box {
    border-left-color: var(--od-line-soft);
}

.money_box span { color: var(--od-muted); }
.money_box p { color: var(--od-bronze-light); }

.logout_btn {
    color: var(--od-steel);
    border-color: var(--od-line);
    background: #17100c;
}

.logout_box button::after {
    background: var(--od-wine);
}

.main_banner,
.main_visual {
    position: relative;
    min-height: clamp(240px, 17vw, 325px);
    padding-top: 46px;
}

.main_visual { padding-top: 0; }

.main_banner::before,
.main_visual::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 46%, rgba(196, 146, 84, .1), transparent 24%),
        linear-gradient(90deg, rgba(12, 8, 6, .08), transparent 38%, transparent 70%, rgba(12, 8, 6, .08));
}

.main_banner::after,
.main_visual::after {
    content: '';
    position: absolute;
    bottom: 34px;
    left: 50%;
    width: 240px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(210, 175, 120, .78), transparent);
    box-shadow: 0 0 18px rgba(170, 125, 67, .28);
}

.banner p,
.banner p span {
    color: #e2d8ca;
    font-weight: 500;
    text-shadow: 0 3px 18px #000;
}

.banner p span {
    color: var(--od-bronze-light);
}

.section_line { background: linear-gradient(90deg, transparent, var(--od-line)); }
.section_line_wrap .section_line:last-child { background: linear-gradient(90deg, var(--od-line), transparent); }
.section_line_wrap img { height: 56px; object-fit: contain; }

.tab_btn {
    border: 1px solid rgba(170, 125, 67, .45);
    background: linear-gradient(180deg, rgba(50, 37, 27, .95), rgba(18, 13, 10, .96));
    box-shadow: inset 0 0 0 4px rgba(7, 5, 4, .42), inset 0 1px rgba(232, 206, 166, .08);
}

.tab_btn p {
    color: var(--od-steel);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.tab_btn.active,
.tab_btn:hover {
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}

.tab_btn.active p,
.tab_btn:hover p {
    color: var(--od-bronze-light);
}

.card_box {
    background-image: url('/assets/img/odyssey/icon/card_frame.svg');
    border-radius: 10px;
    isolation: isolate;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .42));
    transform-style: preserve-3d;
    animation: odyssey-card-rise .72s cubic-bezier(.2, .7, .2, 1) backwards;
}

.card_box:nth-child(6n + 2) { animation-delay: .06s; }
.card_box:nth-child(6n + 3) { animation-delay: .12s; }
.card_box:nth-child(6n + 4) { animation-delay: .18s; }
.card_box:nth-child(6n + 5) { animation-delay: .24s; }
.card_box:nth-child(6n + 6) { animation-delay: .3s; }

.card_box::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 9px;
    border: 1px solid rgba(222, 194, 150, .2);
    border-radius: 5px;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 41%, rgba(170, 125, 67, .3), transparent 43%),
        linear-gradient(180deg, rgba(92, 33, 31, .32), rgba(22, 15, 11, .08) 48%, rgba(8, 5, 4, .48));
}

.card_box::after {
    z-index: 3;
    border-radius: 9px;
    opacity: .32;
    pointer-events: none;
    background: linear-gradient(108deg, transparent 34%, rgba(255, 231, 191, .36) 48%, transparent 62%);
    background-size: 260% 100%;
    animation: odyssey-card-sheen 5.4s ease-in-out infinite;
}

.card_box:hover {
    z-index: 10;
    scale: 1;
    filter: drop-shadow(0 14px 24px rgba(145, 98, 48, 0.32));
    transform: translateY(-12px) scale(1.055) rotateX(2deg);
}

.card_character {
    z-index: 1;
    top: 28%;
    left: 50%;
    width: 58%;
    height: 42%;
    transform: translateX(-50%);
    border: 2px solid rgba(170, 125, 67, 0.62);
    border-radius: 48% 48% 16px 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.62), 0 0 0 5px rgba(84, 57, 33, .34);
    transition: transform .45s ease, filter .45s ease, border-color .45s ease;
}

.card_box:hover .card_character {
    transform: translateX(-50%) scale(1.07);
    border-color: rgba(224, 186, 126, .92);
    filter: saturate(1.08) brightness(1.06);
}

.game_logo {
    z-index: 2;
    bottom: 14%;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .78));
    transition: transform .35s ease, filter .35s ease;
}

.card_box:hover .game_logo {
    transform: translateX(-50%) scale(1.08);
    filter: drop-shadow(0 4px 8px rgba(210, 166, 99, .4));
}

.card_box .start {
    z-index: 4;
    filter: sepia(.28) drop-shadow(0 4px 8px rgba(0, 0, 0, .55));
}

.card_box .name {
    position: relative;
    z-index: 2;
    color: #ddd0bd;
    font-weight: 600;
    letter-spacing: .02em;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .8);
    transition: color .3s ease, text-shadow .3s ease;
}

.card_box:hover .name {
    color: #f0d6a7;
    text-shadow: 0 0 12px rgba(183, 131, 67, .38);
}

@keyframes odyssey-card-rise {
    from { opacity: 0; transform: translateY(28px) rotateX(7deg); }
    to { opacity: 1; transform: translateY(0) rotateX(0); }
}

@keyframes odyssey-card-sheen {
    0%, 58% { background-position: 140% 0; }
    82%, 100% { background-position: -80% 0; }
}

.bank_inner,
.bank_menu_list {
    border: 1px solid var(--od-line);
    border-image: none;
    background: rgba(24, 17, 12, 0.86);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 16px 30px rgba(0, 0, 0, 0.24);
}

.bank_title {
    background: linear-gradient(90deg, #1b130e, #39281d, #1b130e);
    border-bottom: 1px solid rgba(170, 125, 67, 0.42);
}

.bank_title p,
.bank_title span,
.bank_title a,
.bank_list li b {
    color: var(--od-bronze-light);
}

.bank_list li:nth-child(2n) { background: rgba(131, 101, 65, 0.12); }
.bank_list li p,
.bank_list li span { color: #c7b9a5; }
.bank_menu_box { border-right-color: var(--od-line-soft); }
.bank_menu_box p,
.submenu_box p { color: var(--od-bronze-light); font-weight: 500; }

.footer {
    background: linear-gradient(180deg, transparent, rgba(8, 5, 3, 0.92));
}

.bt_game_list li { color: rgba(205, 188, 164, 0.48); border-right-color: var(--od-line); }
.bt_logo_list { border-top-color: var(--od-line-soft); }
.bt_logo_list img { filter: grayscale(.9) sepia(.45) opacity(.6); }

.login_wrap {
    filter: drop-shadow(0 26px 45px rgba(0, 0, 0, 0.48));
}

.login_bg {
    object-fit: fill;
    filter: sepia(.18) brightness(.55);
}

.login_bar_top,
.login_bar_bottom {
    height: 56px;
    object-fit: contain;
}

.login_input {
    border: 1px solid var(--od-line);
    border-image: none;
    background: rgba(19, 13, 9, 0.78);
    transition: border-color .2s, background .2s;
}

.login_input:focus-within {
    border-color: var(--od-bronze);
    background: rgba(42, 29, 20, 0.92);
}

.login_input label { color: var(--od-muted); font-weight: 600; }
.login_input input { color: #eee4d6; }
.login_btn { color: var(--od-bronze-light); font-weight: 600; letter-spacing: .12em; }
.login_box .btn_box li { color: #b8a892; }
.login_box .btn_box li::after { background: var(--od-line); }

.popup_blank { background: rgba(7, 4, 3, 0.88); backdrop-filter: blur(5px); }

.close_btn {
    top: 10px;
    right: 10px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 7px;
    border: 1px solid rgba(210, 175, 120, .72);
    border-radius: 50%;
    background: rgba(20, 13, 9, .92);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .035);
    transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.close_btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
}

.close_btn:hover {
    border-color: #e2bc82;
    background: #5b211f;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .58), 0 0 12px rgba(170, 125, 67, .28);
    transform: scale(1.06);
}

.close_btn:focus-visible {
    outline: 2px solid #f0d6a7;
    outline-offset: 3px;
}

.popup_inner,
.popup_signup .popup_inner,
.popup_complete .popup_inner,
.popup_err .popup_inner,
.popup_thumb .popup_inner,
.popup_bank .popup_inner,
.popup_mypage .popup_inner,
.popup_point .popup_inner,
.popup_message .popup_inner,
.popup_coupon .popup_inner,
.popup_game .popup_inner {
    color: var(--od-steel);
    border: 1px solid var(--od-line);
    border-radius: 0;
    background: #201812;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .66), inset 0 1px rgba(255, 255, 255, .04);
}

.popup_bar,
.popup_bank .popup_bar,
.popup_complete .popup_bar,
.popup_err .popup_bar,
.popup_thumb .popup_bar {
    background: linear-gradient(90deg, #140e0a, #4a3425 50%, #140e0a);
    border-bottom: 1px solid rgba(170, 125, 67, .48);
}

.signup_box input,
.popup_bank input,
.point_box input,
.signup_box select,
.signup_box textarea {
    color: #e3d7c6;
    border-color: var(--od-line);
    background: rgba(12, 8, 6, .56);
}

.price_btn button,
.mes_detail_btn_box button {
    color: var(--od-bronze-light);
    border-color: var(--od-line);
    background: #17100c;
    border-radius: 0;
}

.or_btn,
.inquiry_btn::before {
    color: #170f09 !important;
    border-color: var(--od-bronze) !important;
    background: linear-gradient(110deg, #8b5b29, #d8a35f, #7b4e24) !important;
}

.or_btn::before {
    background: linear-gradient(110deg, #8b5b29, #d8a35f, #7b4e24);
}

.gy_btn,
.gy_btn::before {
    color: #ddd0bd !important;
    border-color: var(--od-line) !important;
    background: #46372b !important;
}

.banklist_title p,
.mes_list_title p,
.mes_title.write p,
.popup_bank .row p,
.thumb_list p {
    color: var(--od-bronze-light);
}

.banklist_row,
.mes_row { background: #2c2119; }
.banklist_row:nth-child(2n),
.mes_row:nth-child(2n) { background: #1b140f; }
.mes_detail_box { background: #15100c; }
.err { color: var(--od-danger); }

@media screen and (max-width: 700px) {
    #wrap_content.main {
        background-image:
            linear-gradient(180deg, rgba(8, 5, 3, .08) 0, rgba(11, 8, 6, .12) 320px, #100c09 720px, #100c09 100%),
            url('/assets/img/odyssey/bg/mobile_hero_v3.jpg');
        background-position: top center;
        background-size: 100% 880px, 100% auto;
        background-repeat: no-repeat;
    }

    #wrap_content.login {
        background-image:
            linear-gradient(rgba(8, 5, 3, .28), rgba(8, 5, 3, .5)),
            url('/assets/img/odyssey/bg/mobile_hero_v3.jpg');
        background-position: 62% top;
        background-size: cover;
    }

    .header { background: rgba(18, 12, 9, .97); }
    .main_banner,
    .main_visual {
        min-height: 195px;
        padding-top: 10px;
    }
    .main_visual { padding-top: 0; }
    .main_banner::after,
    .main_visual::after { bottom: 12px; width: 150px; }
    .section_line_wrap img { height: 36px; }
    .login_bar_top,
    .login_bar_bottom { height: 40px; }
    .card_box:hover { scale: 1; transform: translateY(-3px) scale(1.02); }
    .card_box::before { inset: 5px; border-radius: 3px; }

    .card_list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 12px 10px;
    }

    .card_box {
        width: 100%;
        height: auto;
        aspect-ratio: 224 / 325;
    }

    .popup_thumb .thumb_box {
        padding-right: 20px;
        padding-left: 20px;
    }

    .popup_thumb .thumb_list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
    }

    .popup_thumb .thumb_list li {
        width: 100%;
        min-width: 0;
        margin-bottom: 0;
    }

    .popup_thumb .thumb_img {
        width: 100%;
        aspect-ratio: 216 / 158;
    }

    .popup_thumb .thumb_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .close_btn {
        top: 9px;
        right: 9px;
        width: 46px;
        height: 46px;
        padding: 8px;
    }

    .close_btn img {
        width: 26px;
        height: 26px;
    }

    .popup_mb_menu .close_btn {
        right: auto;
        left: 10px;
        width: 42px;
        height: 42px;
    }

    .popup_mb_menu .close_btn:hover {
        transform: translateY(-50%) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .card_box,
    .card_box::after,
    .card_box .start {
        animation: none !important;
    }

    .card_box,
    .card_character,
    .game_logo {
        transition: none !important;
    }
}