/* Gold surfaces for the existing reference shell. */
body.reference-body .top_info_box {
    background-color: rgba(8, 7, 6, .88);
}
@media (min-width: 768px) {
    body.reference-body .top_info_box { background-color: transparent; }
}

body.reference-body .top_right_box > a,
body.reference-body .top_right_box .reference-cookie-link {
    color: #fff;
}

body.reference-body .top_right_box a i,
body.reference-body .top_right_box span i,
body.reference-body .top_right_box .reference-cookie-link i {
    color: var(--gold-edge);
}

body.reference-body .top_right_box > a:hover,
body.reference-body .top_right_box .reference-cookie-link:hover {
    color: #ffe9a5;
}

body.reference-body .top_right_box button.btn_top_login {
    background: #090909;
    border-color: var(--gold-edge);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

body.reference-body .top_right_box .btn_top_logout {
    background: linear-gradient(to bottom, #2c2c2c, #070707);
    border-color: var(--gold-edge);
    color: #fff;
}

body.reference-body .top_right_box button.btn_top_login:hover,
body.reference-body .top_right_box .btn_top_logout:hover {
    background: #26211b;
    color: #ffe9a5;
}

body.reference-body .gnb_box {
    --gold-nav-art-tone: grayscale(1) sepia(1) saturate(1.5) brightness(.9);
    isolation: isolate;
    background: none;
    border-color: var(--gold-edge);
    box-shadow: inset 0 1px 0 rgba(255,240,196,.75), inset 0 -2px 3px #5a3716, 0 2px 5px rgba(0, 0, 0, .75);
}
/* Grade the decorative surfaces together; menu text stays outside the filter. */
body.reference-body .gnb_box::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--gold-menu-surface) center / 100% 100% no-repeat #EACD88;
    filter: var(--gold-nav-art-tone);
    pointer-events: none;
}
body.reference-body .gnb_box::before {
    content: "";
    position: absolute;
    inset: -3px -1px;
    border: 12px solid transparent;
    border-image: var(--gold-nav-frame) 40 / 12px stretch;
    filter: var(--gold-nav-art-tone);
    pointer-events: none;
}
body.reference-body .gnb_menu_box { position: relative; z-index: 1; }
body.reference-body .gnb_menu_box::before,
body.reference-body .gnb_menu_box::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 340px;
    height: 48px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
    filter: var(--gold-nav-art-tone);
}
body.reference-body .gnb_menu_box::before { left: -1px; background-image: var(--gold-menu-wing-left); mask-image: linear-gradient(to right, #000 60%, transparent); }
body.reference-body .gnb_menu_box::after { right: -1px; background-image: var(--gold-menu-wing-right); mask-image: linear-gradient(to left, #000 60%, transparent); }
body.reference-body .gnb_menu_box ul { position: relative; z-index: 1; }

body.reference-body .gnb_menu_box a,
body.reference-body .gnb_menu_box span {
    color: var(--gold-nav-ink);
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
    position: relative;
    isolation: isolate;
    border-radius: 999px;
}
body.reference-body .gnb_menu_box a::before,
body.reference-body .gnb_menu_box ul > li > span::before {
    content: "";
    position: absolute;
    inset: 3px -2px;
    z-index: -1;
    border-radius: 999px;
    background: var(--gold-small-surface) var(--gold-small-hover);
    box-shadow: inset 0 1px 0 rgba(255,247,224,.3), inset 0 0 0 1px rgba(135,99,48,.6);
    opacity: 0;
    transform: scale(.92,.8);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
body.reference-body .gnb_menu_box a:hover::before,
body.reference-body .gnb_menu_box a:focus-visible::before,
body.reference-body .gnb_menu_box ul > li > span:hover::before {
    opacity: 1;
    transform: scale(1);
}

body.reference-body .gnb_menu_box a:hover,
body.reference-body .gnb_menu_box a:focus-visible,
body.reference-body .gnb_menu_box span:hover {
    background: transparent;
    color: var(--gold-action-ink);
    border-radius: 999px;
    box-shadow: none;
    text-shadow: none;
}

body.reference-body .snb_left,
body.reference-body .bet_slip,
body.reference-body .bet_cart,
body.reference-body .out_login {
    background-color: var(--gold-panel);
}

body.reference-body .snb_left .reference-left-grid {
    background: #080706;
}

body.reference-body .snb_left .reference-left-grid li a {
    background: linear-gradient(to bottom, #2c2c2c, #070707);
    border-color: #49341f;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 233, 165, .18), inset 1px 0 0 rgba(165, 113, 56, .4);
}

body.reference-body .snb_left .reference-left-grid li a.btn_gray {
    height: 44px;
    line-height: 44px;
    background-image: var(--gold-button-frame), linear-gradient(135deg, #29251e, #080808);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #ede3aa;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    font-weight: 700;
    text-shadow: 0 1px 2px #000;
}

body.reference-body .snb_left .reference-left-grid li a.btn_gray i {
    color: #ede3aa;
}

body.reference-body .snb_left .reference-left-grid li a:hover,
body.reference-body .snb_left .reference-left-grid li a:focus-visible {
    background: var(--gold-control-dark-hover);
    color: var(--gold-control-light-ink);
    box-shadow: inset 0 1px 0 rgba(255,233,165,.12);
}

body.reference-body .snb_left .reference-left-grid li a.btn_gray:hover,
body.reference-body .snb_left .reference-left-grid li a.btn_gray:focus-visible {
    background-image: var(--gold-button-hover-frame), linear-gradient(135deg, #33291d, #080808);
    color: #ffe9a5;
    box-shadow: none;
}

body.reference-body .snb_left .left_ttl {
    background: var(--gold-metal);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .7);
}

body.reference-body .snb_left .btn_snb_sp {
    background: linear-gradient(to bottom, #151515 96%, #000);
    border-color: transparent;
    border-bottom-color: #000;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .1);
}

body.reference-body .snb_left .btn_snb_sp:hover,
body.reference-body .snb_left .btn_snb_sp:focus-visible {
    background: var(--gold-control-dark-hover);
    color: var(--gold-control-light-ink);
    border-color: var(--gold-control-dark-border);
}

body.reference-body.reference-home .mb_box {
    aspect-ratio: 625 / 269;
    border: 0;
    border-radius: 0;
    background-color: #080706;
    box-shadow: none;
}

body.reference-body.reference-home .mb_box .main_banner {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}

@media (min-width: 768px) {
    body.reference-body.reference-home .main_bbs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    body.reference-body.reference-home .main_bbs > section {
        float: none;
        width: auto;
        min-width: 0;
        border-radius: 0;
    }
}

body.reference-body.reference-home .main_bbs_ttl {
    border-radius: 0;
    background: var(--gold-metal);
    color: var(--gold-heading-ink);
    font-size: 16px;
    font-weight: 700;
    height: 43px;
    line-height: 43px;
    text-shadow: 0 1px 2px rgba(238, 214, 214, .84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 3px rgba(0, 0, 0, .3);
}

body.reference-body.reference-home .main_bbs_ttl .main_bbs_sub {
    color: #4c4c0a;
    font-size: 14px;
    font-weight: 700;
}

body.reference-body.reference-home .main_bbs_ttl .view_more {
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 3px rgba(0, 0, 0, .6);
}

body.reference-body.reference-home .main_bbs_ttl .view_more:hover {
    color: var(--gold-heading-ink);
    font-weight: 700;
    text-shadow: none;
}

body.reference-body.reference-home .main_bbs_list {
    background-color: var(--gold-panel);
}

body.reference-body.reference-home .main_bbs_list ul li a {
    background: linear-gradient(to bottom, #151515 96%, #000);
    border-bottom-color: #000;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .1);
}

body.reference-body.reference-home .main_bbs_list ul li a:hover,
body.reference-body.reference-home .main_bbs_list ul li a:focus-visible {
    background: linear-gradient(to left, #c49c5f 52.5%, #262626 30%, #181818 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}

body.reference-body.reference-home .main_bbs_list .no_data {
    color: var(--gold-muted);
}
body.reference-body.reference-home .main_bbs_list:has(.no_data:only-child) { height: 88px; min-height: 88px; box-shadow: inset 0 1px 0 rgba(255,233,165,.06); }
body.reference-body.reference-home .main_bbs_list .no_data:only-child { display: flex; align-items: center; justify-content: center; min-height: 86px; }
body.reference-body.reference-home .main_bbs:has(.notice_area .no_data:only-child):has(.event_area .no_data:only-child),
body.reference-body.reference-home .main_bbs:has(.notice_area .no_data:only-child):has(.event_area .no_data:only-child) > section {
    height: 141px;
}

body.reference-body.reference-home .main_middle_box > a {
    outline: none;
    border-radius: 11px 11px 0 0;
    background-color: #111;
}
body.reference-body.reference-home .main_middle_box > a::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 7px solid transparent;
    border-image: var(--gold-card-frame) 20 / 7px stretch;
    pointer-events: none;
    z-index: 2;
}
body.reference-body.reference-home .main_middle_box > a > .ho-motion-player > .ho135-motion-picture > img { clip-path: none; width: 100%; height: auto; aspect-ratio: 315 / 403; }

/* New GOLD BET cards include their own frame; captions remain accessible HTML. */
body.reference-body.reference-home .main_middle_box > a::after { content: none; }
body.reference-body.reference-home .main_middle_box > a > .hoverb { z-index: 3; }
body.reference-body.reference-home .gold-game-caption {
    position: absolute;
    inset: 75% 7% 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #FFE9A5;
    pointer-events: none;
    text-align: center;
    text-shadow: 0 2px 4px #000;
}
body.reference-body.reference-home .gold-game-caption strong {
    font-family: attgd, "Malgun Gothic", sans-serif;
    font-size: clamp(24px, 1.7vw, 34px);
    font-weight: 700;
    line-height: 1.1;
    background: linear-gradient(105deg, #E4C17D 8%, #FFF0BF 26%, #F2D697 40%, #FFFAE5 48%, #FFFFFF 51%, #FFF0BF 56%, #E4C17D 76%, #FFF0BF 94%);
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.9));
    animation: gold-card-title-sheen 2.7s linear infinite;
}
@keyframes gold-card-title-sheen {
    from { background-position: 150% 50%; }
    to { background-position: -100% 50%; }
}
body.reference-body.reference-home .gold-game-caption > span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #EED196;
}

body.reference-body.reference-home .main_middle_box > a > .ho-motion-player > .ho135-motion-picture > img,
body.reference-body.reference-home .main_middle_box > a > .hoverb {
    border-radius: 11px 11px 0 0;
}

body.reference-body.reference-home .main_middle_box .mmb_in_btn {
    background: var(--gold-small-surface) var(--gold-small-base);
    color: var(--gold-small-ink);
    font-size: 12px;
    font-weight: 700;
    text-shadow: none;
    box-shadow: var(--gold-small-shadow);
}

body.reference-body.reference-home .footer {
    background-color: var(--gold-panel);
    border-color: #382b1b;
}

body.reference-body .out_login_info_1 {
    background: linear-gradient(to bottom, #262626 0%, #191919 49%, #000 51%, #181818 100%);
}

body.reference-body .out_login_info_1 .reference-level-icon,
body.reference-body .out_login_info_1 a i,
body.reference-body .out_login .out_sub_ttl i {
    color: var(--gold-edge);
}

body.reference-body .out_login .out_nick,
body.reference-body .out_login .money {
    color: #ffe9a5;
}
body.reference-body .out_login .point,
body.reference-body .out_login .cmoney,
body.reference-body .mobile_user_info_box .money,
body.reference-body .mobile_user_info_box .point,
body.reference-body .mobile_user_info_box .cmoney {
    color: #ffe9a5;
}

body.reference-body .out_login_bar {
    border-color: #51402a;
    background-color: #51402a;
}

body.reference-body .out_login_info_2,
body.reference-body .out_login_info_4,
body.reference-body .out_login_info_5 {
    background: linear-gradient(to bottom, #151515 96%, #000);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

body.reference-body .out_login_info_3 a,
body.reference-body .out_login_info_3 button {
    background: linear-gradient(to bottom, #2c2c2c, #070707);
    border-color: #49341f;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 233, 165, .12);
}

body.reference-body .out_login_info_3 a i,
body.reference-body .out_login_info_3 button i {
    color: var(--gold-edge);
}

body.reference-body .out_login_info_3 a:hover,
body.reference-body .out_login_info_3 button:hover {
    background: var(--gold-control-dark-hover);
    color: var(--gold-control-light-ink);
    box-shadow: inset 0 1px 0 rgba(255,233,165,.12);
}

body.reference-body .reference-betslip .bc_ttl {
    background: var(--gold-metal);
    color: var(--gold-heading-ink);
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    text-shadow: none;
}

body.reference-body .reference-betslip .bc_ttl .bc_da {
    font-weight: 700;
    text-shadow: none;
}

body.reference-body .reference-betslip .bc_select {
    background: #000;
    color: #fff;
}

body.reference-body .reference-betslip .bc_select li.sel_item {
    border-color: #dbb879;
}

body.reference-body .reference-betslip .bc_select li.sel_item .select_info {
    background: var(--gold-metal);
    color: var(--gold-heading-ink);
    font-weight: 700;
    text-shadow: none;
}

body.reference-body .reference-betslip .bc_money_top,
body.reference-body .reference-betslip .bc_info_box,
body.reference-body .reference-betslip .bc_btn_box {
    background: #111;
    color: #fff;
}

body.reference-body .reference-betslip .money_box input {
    background: #262626;
    border-color: #000;
    color: #fff;
}

body.reference-body .reference-betslip .bc_btn_box .btn_bet {
    background: var(--gold-action-surface) var(--gold-action-base);
    border-color: var(--gold-action-border);
    color: var(--gold-action-ink);
    font-weight: 700;
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 3px rgba(0, 0, 0, .9);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.reference-body .reference-betslip .bc_btn_box .btn_bet:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
    background: var(--gold-action-surface) var(--gold-action-hover);
    border-color: var(--gold-action-hover-border);
    box-shadow: inset 0 1px 0 rgba(255,247,224,.3), 0 2px 6px rgba(0,0,0,.3);
}

/* Narrow amount keys use a quiet gold surface rather than a full-width metal band. */
body.reference-body .reference-betslip .money_btn_box .btn_money,
body.reference-body .top_right_box button.btn_top_join {
    background: var(--gold-small-surface) var(--gold-small-base);
    border-color: var(--gold-small-border);
    color: var(--gold-small-ink);
    font-weight: 700;
    text-shadow: none;
    box-shadow: var(--gold-small-shadow);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.reference-body .reference-betslip .money_btn_box .btn_money:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible),
body.reference-body .top_right_box button.btn_top_join:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
    background: var(--gold-small-surface) var(--gold-small-hover);
    border-color: var(--gold-small-hover-border);
    color: var(--gold-small-ink);
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255,247,224,.38), 0 2px 4px rgba(0,0,0,.25);
}

body.reference-body .reference-betslip .money_btn_box .btn_money:not(:disabled):not([aria-disabled="true"]):focus-visible,
body.reference-body .top_right_box button.btn_top_join:not(:disabled):not([aria-disabled="true"]):focus-visible {
    outline: 2px solid #ead3a8;
    outline-offset: 2px;
}

body.reference-body .reference-betslip .money_btn_box .btn_money:not(:disabled):not([aria-disabled="true"]):active,
body.reference-body .top_right_box button.btn_top_join:not(:disabled):not([aria-disabled="true"]):active {
    background: var(--gold-small-surface) var(--gold-small-active);
    border-color: #917447;
    color: var(--gold-small-ink);
    box-shadow: inset 0 2px 3px rgba(69,46,20,.22);
}

body.reference-body .reference-betslip .money_btn_box .btn_money:is(:disabled, [aria-disabled="true"]),
body.reference-body .top_right_box button.btn_top_join:is(:disabled, [aria-disabled="true"]) {
    background: var(--gold-small-surface) #897b61;
    border-color: #6e624e;
    color: #393126;
    text-shadow: none;
    box-shadow: none;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    body.reference-body .reference-betslip .money_btn_box .btn_money,
    body.reference-body .top_right_box button.btn_top_join,
    body.reference-body .reference-betslip .bc_btn_box .btn_bet {
        transition: none;
    }
}

body.reference-body .reference-betslip .bc_info_box ul li {
    background: linear-gradient(to bottom, #151515 96%, #000);
    border-color: #000;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .1);
}

body.reference-body .reference-betslip .bc_btn_box .btn_bet:disabled {
    background: linear-gradient(to right, #65503a, #a88e62 75%, #695139);
    color: #24201a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    text-shadow: none;
}

/* Fixed navigation sits above page effects and below blocking drawers. */
body.reference-body #quickFoot { z-index: 9995; }
@media (max-width: 768px) {
    body.reference-body #debug-icon:not(.fixed-top) { bottom: 60px; }
}

body.reference-body #quickFoot,
body.reference-body #quickFoot .q_bg {
    background: linear-gradient(to bottom, #262626 0%, #191919 49%, #000 51%, #181818 100%);
    box-shadow: inset 0 1px 0 rgba(254, 198, 94, .32), 0 -2px 8px rgba(0, 0, 0, .4);
}

body.reference-body #quickFoot a {
    color: #dfe5ff;
}

body.reference-body #quickFoot a:hover,
body.reference-body #quickFoot a:focus-visible {
    color: #ffe9a5;
}

body.reference-body #quickFoot a.home {
    background: linear-gradient(to bottom, #323232, #141414);
    box-shadow: inset 0 1px 0 rgba(254, 198, 94, .35);
    color: #fff;
}

@media screen and (max-width: 767px) {
    body.reference-body .top_info_box {
        background: #222;
        box-shadow: inset 0 -1px 0 rgba(254, 198, 94, .25);
    }

    body.reference-body .snb_btn,
    body.reference-body .mobile_btn_login,
    body.reference-body .refresh_btn {
        color: #fff;
    }

    body.reference-body .snb_btn:hover,
    body.reference-body .mobile_btn_login:hover,
    body.reference-body .refresh_btn:hover {
        color: var(--gold-edge);
    }

    /* Mobile header controls share the account icon's warm gold line style. */
    body.reference-body :is(.snb_btn.only_mobile[data-reference-left-toggle], .reference-cookie-button.only_mobile, .telegram_btn.only_mobile) {
        display: grid;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #efd49c;
        line-height: 0;
    }
    body.reference-body .snb_btn.only_mobile[data-reference-left-toggle] > .snb_in,
    body.reference-body .reference-cookie-button.only_mobile > i,
    body.reference-body .telegram_btn.only_mobile > img { display: none; }
    body.reference-body :is(.snb_btn.only_mobile[data-reference-left-toggle], .reference-cookie-button.only_mobile, .telegram_btn.only_mobile)::before {
        content: "";
        display: block;
        width: 27px;
        height: 27px;
        margin: 0;
        padding: 0;
        border: 0;
        background: currentColor;
        -webkit-mask: var(--ho-header-icon) center / contain no-repeat;
        mask: var(--ho-header-icon) center / contain no-repeat;
        pointer-events: none;
    }
    body.reference-body .snb_btn.only_mobile[data-reference-left-toggle] { --ho-header-icon: url('/ho135/img/ui/header-menu.svg'); }
    body.reference-body .reference-cookie-button.only_mobile { --ho-header-icon: url('/ho135/img/ui/header-cookie.svg'); }
    body.reference-body .telegram_btn.only_mobile { --ho-header-icon: url('/ho135/img/ui/auth-telegram.svg'); }
    body.reference-body .telegram_btn.only_mobile[aria-disabled="true"] { color: #b5a17c; }
    body.reference-body :is(.snb_btn.only_mobile[data-reference-left-toggle], .reference-cookie-button.only_mobile, .telegram_btn.only_mobile):is(:hover, :focus-visible):not([aria-disabled="true"]) {
        color: #fff0c9;
        background: rgba(191, 153, 85, .12);
    }
    body.reference-body :is(.snb_btn.only_mobile[data-reference-left-toggle], .reference-cookie-button.only_mobile, .telegram_btn.only_mobile):active:not([aria-disabled="true"]) { filter: brightness(.9); }

    body.reference-body .contents_join_box .btn_ct_login {
        background: linear-gradient(to bottom, #443333, #000);
        border-color: var(--gold-edge);
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    body.reference-body .contents_join_box .btn_ct_join {
        background: var(--gold-action-surface) var(--gold-action-base);
        border-color: var(--gold-action-border);
        color: var(--gold-action-ink);
        text-shadow: none;
    }

    body.reference-body.reference-home .main_btn_box a.wide {
        background: radial-gradient(ellipse at 50% 30%, #302820, #101010 70%);
        border-color: #dbb879;
        box-shadow: inset 0 0 0 1px #dbb879, inset 0 5px 8px rgba(30, 4, 4, .8), 0 0 8px rgba(51, 26, 26, .1);
        color: #fff;
        border-radius: 13px;
        overflow: hidden;
    }
    body.reference-body.reference-home .main_btn_box a.wide::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 7px solid transparent;
        border-image: var(--gold-card-frame) 20 / 7px stretch;
        pointer-events: none;
        z-index: 2;
    }
    body.reference-body.reference-home .main_btn_box a.wide > .ho-motion-player > .ho135-motion-picture > img { clip-path: none; aspect-ratio: 256 / 260; object-fit: contain; }
    body.reference-body.reference-home .main_btn_box a.wide::after { content: none; }
    body.reference-body.reference-home .main_btn_box a.wide { border: 0; background: none; box-shadow: none; }

    body.reference-body.reference-home [data-ho135-mobile-banner] {
        padding-bottom: 30px;
        background: #0B0906;
    }
    body.reference-body.reference-home .ho135-mobile-banner { bottom: 0; }
    body.reference-body.reference-home [data-banner-step] {
        display: grid;
        place-items: center;
        position: absolute;
        top: auto;
        bottom: 2px;
        left: calc(50% - 76px);
        right: auto;
        width: 28px;
        height: 26px;
        padding: 0;
        border: 1px solid #705333;
        border-radius: 999px;
        background: #20190F;
        color: #FFE9A5;
        font-size: 12px;
        opacity: 1;
        z-index: 3;
    }
    body.reference-body.reference-home [data-banner-step="1"] { left: auto; right: calc(50% - 76px); }
    body.reference-body.reference-home .mb_ctr_box {
        position: absolute;
        bottom: 2px;
        left: 50%;
        right: auto;
        width: auto;
        height: 26px;
        transform: translateX(-50%);
        z-index: 3;
    }
    body.reference-body.reference-home .mb_ctr_box ul { display: flex; align-items: center; gap: 4px; height: 26px; }
    body.reference-body.reference-home .mb_ctr_box li { display: block; float: none; width: 26px; height: 26px; margin: 0; }
    body.reference-body.reference-home .mb_ctr_box [data-banner-choice] { display: grid; place-items: center; width: 26px; height: 26px; margin: 0; background: transparent; }
    body.reference-body.reference-home .mb_ctr_box [data-banner-choice]::after { content: ""; display: block; width: 7px; height: 7px; border: 1px solid #BFA36A; border-radius: 50%; background: #332818; }
    body.reference-body.reference-home .mb_ctr_box .btn_mb_ctr_on::after { background: #FFE9A5; box-shadow: 0 0 5px #AC8447; }

    body.reference-body.reference-home .reference-mobile-menu-label {
        background: transparent;
        bottom: 6%;
        height: 21%;
        color: #ede3aa;
        font-family: attgd, sc-medium, "Malgun Gothic", sans-serif;
        font-size: clamp(12px,3.1vw,14px);
        font-weight: 600;
        line-height: 1.3;
        text-shadow: 0 1px 2px #000;
    }

    body.reference-body .mobile_user_nick_box,
    body.reference-body .mobile_user_info_box {
        background: #1a1917;
        color: #fff;
        box-shadow: inset 0 -1px 0 #342a1d;
    }

    body.reference-body .mobile_user_nick_box .muib_nick_left span,
    body.reference-body .mobile_user_info_box .money {
        color: #ffe9a5;
    }

    body.reference-body .pop_user_info,
    body.reference-body .pop_user_info.is-open {
        background: #111;
        color: #fff;
    }

    body.reference-body .pop_user_info .pui_top_box {
        background: linear-gradient(to bottom, #262626, #111);
        box-shadow: inset 0 -1px 0 rgba(254, 198, 94, .3);
    }

    body.reference-body .pop_user_info .pui_user_box {
        background: #171512;
        border-color: #463720;
    }

    body.reference-body .pop_user_info .pui_user_level {
        background: #27221a;
        box-shadow: inset 0 0 0 1px #51402a;
    }

    body.reference-body .pop_user_info .pui_user_name .t_orange,
    body.reference-body .pop_user_info .pui_premium_coupon {
        color: var(--gold-edge);
    }

    body.reference-body .pop_user_info .pui_btn_box a {
        background: linear-gradient(to bottom, #2c2c2c, #070707);
        color: #fff;
        box-shadow: inset 0 0 0 1px #49341f, inset 0 1px 0 rgba(255, 233, 165, .14);
    }

    body.reference-body .pop_user_info .pui_btn_box a .pui_btn_icon,
    body.reference-body .pop_user_info .pui_btn_arr {
        color: var(--gold-edge);
    }

    body.reference-body .pop_user_info .pui_btn_box a:hover {
        background: linear-gradient(to bottom, #41372a, #0c0b09);
        color: #ffe9a5;
        box-shadow: inset 0 0 0 1px #dbb879;
    }

    body.reference-body .pop_user_info .reference-account-banners {
        box-sizing: border-box;
        width: 100%;
        padding: 16px 16px 0;
    }

    body.reference-body .pop_user_info .reference-account-banners:not([hidden]) {
        display: grid;
        gap: 12px;
    }

    body.reference-body .pop_user_info .reference-account-banners > a {
        display: block;
        width: 100%;
    }

    body.reference-body .pop_user_info .reference-account-banners > a > .ho-motion-player > .ho135-motion-picture > img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 1;
        object-fit: contain;
    }

    body.reference-body .pop_user_info .pui_logout a {
        background: #0c0b09;
        border-color: var(--gold-edge);
        color: #ede3aa;
    }

    body.reference-body .pop_user_info button.close_user_info:hover {
        background: #44382a;
        color: #ffe9a5;
    }

    body.reference-body .reference-betslip-toggle .closed {
        background: var(--gold-metal);
        color: var(--gold-heading-ink);
        font-weight: 700;
        text-shadow: none;
        box-shadow: inset 0 0 0 1px #dbb879;
    }
}

/* Native WebP pixel sizes at the reviewed 1920px viewport. */
@media (width: 1920px) {
    body.reference-body { background-size: 1920px 1080px; }
    body.reference-body.reference-home .reference-banner-grid,
    body.reference-body.reference-home .main_bbs { column-gap: 15px; }
    body.reference-body.reference-home .reference-banner-grid > .mb_box { height: 269px; }
    body.reference-body.reference-home .main_middle_box { gap: 0; }
    body.reference-body.reference-home .main_middle_box > a {
        flex: 0 0 315px;
        width: 315px;
    }
    body.reference-body.reference-home .main_middle_box > a + a { margin-left: 2px; }
    body.reference-body.reference-home .main_middle_box > a:nth-child(3) { margin-left: 1px; }
    body.reference-body.reference-home .main_middle_box > a > .ho-motion-player > .ho135-motion-picture > img {
        width: 315px;
        height: 403px;
        aspect-ratio: auto;
    }
    body.reference-body .cs_img_box > img {
        width: 1275px;
        height: 228px;
    }
}

/* Shell controls share the same restrained state palette as page/dialog actions.
   Image-framed shortcuts and game artwork keep their existing image surfaces. */
body.reference-body :is(
    .top_right_box .btn_top_login, .top_right_box .btn_top_logout,
    .snb_left .reference-left-grid li a:not(.btn_gray), .snb_left .btn_snb_sp,
    .out_login_info_3 a, .out_login_info_3 button, .reference-point-button,
    .contents_join_box .btn_ct_login, .pop_user_info .pui_btn_box a, .pop_user_info .pui_logout a
) {
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.04)) var(--gold-control-dark);
    border-color: var(--gold-control-dark-border);
    color: var(--gold-control-light-ink);
    box-shadow: inset 0 1px 0 rgba(255,235,195,.08);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.reference-body :is(
    .top_right_box .btn_top_login, .top_right_box .btn_top_logout,
    .snb_left .reference-left-grid li a:not(.btn_gray), .snb_left .btn_snb_sp,
    .out_login_info_3 a, .out_login_info_3 button, .reference-point-button,
    .contents_join_box .btn_ct_login, .pop_user_info .pui_btn_box a, .pop_user_info .pui_logout a
):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.04)) var(--gold-control-dark-hover);
    border-color: #94794e;
    color: #fff0d3;
    box-shadow: inset 0 1px 0 rgba(255,235,195,.15);
}
body.reference-body :is(
    .top_right_box .btn_top_login, .top_right_box .btn_top_logout,
    .snb_left .reference-left-grid li a:not(.btn_gray), .snb_left .btn_snb_sp,
    .out_login_info_3 a, .out_login_info_3 button, .reference-point-button,
    .contents_join_box .btn_ct_login, .pop_user_info .pui_btn_box a, .pop_user_info .pui_logout a
):active:not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.04)) var(--gold-control-dark-active);
    border-color: #806844;
    color: var(--gold-control-light-ink);
    box-shadow: inset 0 2px 3px rgba(0,0,0,.3);
}

body.reference-body .contents_join_box .btn_ct_join {
    background: var(--gold-action-surface) var(--gold-action-base);
    border-color: var(--gold-action-border);
    color: var(--gold-action-ink);
    font-weight: 700;
    text-shadow: none;
    box-shadow: var(--gold-small-shadow);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.reference-body .contents_join_box .btn_ct_join:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
    background: var(--gold-action-surface) var(--gold-action-hover);
    border-color: var(--gold-action-hover-border);
    color: var(--gold-action-ink);
    box-shadow: inset 0 1px 0 rgba(255,247,224,.35), 0 2px 4px rgba(0,0,0,.25);
}
body.reference-body :is(.contents_join_box .btn_ct_join, .reference-betslip .bc_btn_box .btn_bet):active:not(:disabled):not([aria-disabled="true"]) {
    background: var(--gold-action-surface) var(--gold-action-active);
    border-color: #876638;
    color: var(--gold-action-ink);
    box-shadow: inset 0 2px 3px rgba(69,46,20,.25);
}

body.reference-body.reference-home .main_middle_box .mmb_in_btn {
    transition: background-color .18s ease, box-shadow .18s ease;
}
body.reference-body.reference-home .main_middle_box > a:is(:hover, :focus-visible) .mmb_in_btn {
    background: var(--gold-small-surface) var(--gold-small-hover);
    color: var(--gold-small-ink);
    box-shadow: inset 0 1px 0 rgba(255,247,224,.38), 0 2px 4px rgba(0,0,0,.25);
}
body.reference-body.reference-home .main_middle_box > a:active .mmb_in_btn {
    background: var(--gold-small-surface) var(--gold-small-active);
    box-shadow: inset 0 2px 3px rgba(69,46,20,.22);
}

body.reference-body :is(.reference-cookie-link, .reset_money, .snb_btn, .mobile_btn_login, .refresh_btn, .pop_user_info .close_user_info) {
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
body.reference-body :is(.reference-cookie-link, .reset_money, .snb_btn, .mobile_btn_login, .refresh_btn, .pop_user_info .close_user_info):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
    background-color: rgba(157,125,73,.18);
    color: var(--gold-control-light-ink);
}
body.reference-body :is(.reference-cookie-link, .reset_money, .snb_btn, .mobile_btn_login, .refresh_btn, .pop_user_info .close_user_info):active:not(:disabled):not([aria-disabled="true"]) {
    background-color: rgba(157,125,73,.28);
    color: #fff0d3;
}
body.reference-body .reference-betslip .bc_ttl .bc_da:is(:hover, :focus-visible) {
    background-color: rgba(54,35,15,.12);
    color: var(--gold-action-ink);
}
body.reference-body .reference-betslip .bc_ttl .bc_da:active {
    background-color: rgba(54,35,15,.22);
}
body.reference-body.reference-home [data-banner-step] {
    transition: background-color .18s ease, border-color .18s ease;
}
body.reference-body.reference-home [data-banner-step]:is(:hover, :focus-visible) {
    background: var(--gold-control-dark-hover);
    border-color: #a48856;
    color: #fff0d3;
}
body.reference-body.reference-home [data-banner-step]:active {
    background: var(--gold-control-dark-active);
}
body.reference-body.reference-home [data-banner-choice]:is(:hover, :focus-visible)::after {
    border-color: #eed6a1;
    box-shadow: 0 0 0 2px rgba(208,174,111,.2);
}
body.reference-body #quickFoot a:is(:hover, :focus-visible) {
    background-color: rgba(157,125,73,.12);
    color: #fff0d3;
}
body.reference-body #quickFoot a:active {
    background-color: rgba(157,125,73,.22);
}

body.reference-body .reference-betslip-toggle .closed {
    background: var(--gold-small-surface) var(--gold-small-base);
    color: var(--gold-small-ink);
}
body.reference-body .reference-betslip-toggle:is(:hover, :focus-visible) .closed {
    background: var(--gold-small-surface) var(--gold-small-hover);
}
body.reference-body .reference-betslip-toggle:active .closed {
    background: var(--gold-small-surface) var(--gold-small-active);
}
body.reference-body :is(.banner_box > a, .snb_left a:has(> img, > .ho-motion-player), .logo_gnb > a, .main_btn_box > a.wide) {
    transition: filter .18s ease;
}
body.reference-body :is(.banner_box > a, .snb_left a:has(> img, > .ho-motion-player), .logo_gnb > a, .main_btn_box > a.wide):is(:hover, :focus-visible) {
    filter: brightness(1.06);
}
body.reference-body :is(.banner_box > a, .snb_left a:has(> img, > .ho-motion-player), .logo_gnb > a, .main_btn_box > a.wide):active {
    filter: brightness(.94);
}

body.reference-body :is(
    .top_right_box .btn_top_login, .top_right_box .btn_top_logout,
    .snb_left .reference-left-grid li a, .snb_left .btn_snb_sp,
    .out_login_info_3 a, .out_login_info_3 button, .reference-point-button,
    .contents_join_box .btn_ct_login, .contents_join_box .btn_ct_join,
    .pop_user_info .pui_btn_box a, .pop_user_info .pui_logout a,
    .reference-cookie-link, .reset_money, .snb_btn, .mobile_btn_login, .refresh_btn,
    .pop_user_info .close_user_info, .reference-betslip .bc_ttl .bc_da,
    .reference-betslip .bc_btn_box .btn_bet, #quickFoot a,
    [data-banner-step], [data-banner-choice], .main_middle_box > a,
    .reference-betslip-toggle, .banner_box > a, .snb_left a:has(> img, > .ho-motion-player),
    .logo_gnb > a, .main_btn_box > a.wide
):focus-visible {
    outline: 2px solid #ead3a8;
    outline-offset: -2px;
}
body.reference-body :is(
    .top_right_box .btn_top_login, .top_right_box .btn_top_logout,
    .snb_left .reference-left-grid li a:not(.btn_gray), .snb_left .btn_snb_sp,
    .out_login_info_3 a, .out_login_info_3 button, .reference-point-button,
    .contents_join_box .btn_ct_login, .contents_join_box .btn_ct_join,
    .pop_user_info .pui_btn_box a, .pop_user_info .pui_logout a,
    .reference-cookie-link, .reset_money, .snb_btn, .mobile_btn_login, .refresh_btn,
    .pop_user_info .close_user_info, .reference-betslip .bc_ttl .bc_da,
    .reference-betslip .bc_btn_box .btn_bet, [data-banner-step], [data-banner-choice]
):is(:disabled, [aria-disabled="true"]) {
    background: #332e25;
    border-color: #5e5341;
    color: #aa9c84;
    text-shadow: none;
    box-shadow: none;
    cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
    body.reference-body :is(
        .top_right_box button, .top_right_box .btn_top_logout,
        .snb_left .reference-left-grid li a, .snb_left .btn_snb_sp,
        .out_login_info_3 a, .out_login_info_3 button, .reference-point-button,
        .contents_join_box a, .pop_user_info a, .pop_user_info button,
        .reset_money, .snb_btn, .mobile_btn_login, .refresh_btn,
        .reference-betslip .bc_da, [data-banner-step], [data-banner-choice],
        .main_middle_box .mmb_in_btn, .banner_box > a, .snb_left a:has(> img, > .ho-motion-player),
        .logo_gnb > a, .main_btn_box > a.wide
    ),
    body.reference-body .gnb_menu_box a::before,
    body.reference-body .gnb_menu_box ul > li > span::before {
        transition: none;
    }
}

/* Format wrappers keep the established image geometry and link controls. */
body.reference-body picture.ho135-motion-picture { display: block; width: 100%; }
body.reference-body.reference-home .mb_box picture.ho135-motion-picture { height: 100%; }

/* Native AVIF stays primary; WebM and then WebP are created only as needed. */
body.reference-body .ho-motion-player { position: relative; display: block; width: 100%; padding: 0; margin: 0; inset: auto; background: transparent; box-sizing: border-box; }
body.reference-body .ho-motion-player > picture > img { display: block; }
body.reference-body .ho-motion-player > :is(.ho-motion-video, .ho-motion-webp) { display: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: contain; pointer-events: none; }
body.reference-body .ho-motion-player:is(.is-video, .is-webp) > picture { visibility: hidden; }
body.reference-body .ho-motion-player.is-video > .ho-motion-video,
body.reference-body .ho-motion-player.is-webp > .ho-motion-webp { display: block; }
body.reference-body.reference-home .mb_box .ho-motion-player { height: 100%; }
body.reference-body .ho-slot-vendor-motion > picture > img { display: block; width: 100%; height: auto; }

/* The banner glyph masks use the same moving gold finish as the home cards. */
body.reference-body .ho-banner-text-host { position: relative; isolation: isolate; line-height: 0; }
body.reference-body .ho-banner-direct-image > img { display: block; width: 100%; height: auto; }
body.reference-body .ho-banner-text-overlay {
    display: block;
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 1;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9));
}
body.reference-body .ho-banner-text-ink {
    display: block;
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(105deg, #E4C17D 8%, #FFF0BF 26%, #F2D697 40%, #FFFAE5 48%, #FFFFFF 51%, #FFF0BF 56%, #E4C17D 76%, #FFF0BF 94%);
    background-size: 250% 100%;
    opacity: 1;
    -webkit-mask-image: var(--ho-banner-glyph-mask);
    mask-image: var(--ho-banner-glyph-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-mode: alpha;
    animation: gold-card-title-sheen 2.7s linear infinite;
}

/* The A1 logo keeps the original placements across all format fallbacks. */
body.reference-body .ho-brand-logo {
    display: inline-block;
    width: 600px;
    max-width: 100%;
    aspect-ratio: 600 / 130;
    vertical-align: middle;
    line-height: 0;
}
body.reference-body .ho-brand-logo > picture { height: 100%; }
body.reference-body .ho-brand-logo > picture > img,
body.reference-body .ho-brand-logo > :is(.ho-motion-video, .ho-motion-webp) {
    width: 100% !important;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: contain;
    border-radius: 0;
}
body.reference-body .logo_gnb .ho-brand-logo { width: calc(70px * 600 / 130); height: 70px; }
body.reference-body .logo_gnb a:hover .ho-brand-logo { opacity: .8; }
body.reference-body .logo_gnb a:hover .ho-brand-logo img { opacity: 1; }
body.reference-body .pui_logo .ho-brand-logo { width: 100%; }
body.reference-body .pop_login_ttl .ho-brand-logo { width: 60%; margin-top: 40px; }
body.reference-body .pop_join_ttl .ho-brand-logo { width: 50%; margin-top: 40px; }
body.reference-body .logo-section .ho-brand-logo { width: 215px; height: 65px; }
body.reference-body .hoverb .ho-brand-logo { width: 50%; margin-top: 70px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .85)); }
body.reference-body .ho-brand-logo--customer { width: 13%; margin: 10px; }
@media (max-width: 767px) {
    body.reference-body .logo_gnb .ho-brand-logo { width: calc(40px * 600 / 130); height: 40px; }
}

/* The square A1 symbol shares the fallback player without inheriting logo sizing. */
body.reference-body .ho-brand-symbol {
    display: inline-block;
    width: 140px;
    max-width: 100%;
    aspect-ratio: 1;
    vertical-align: middle;
    line-height: 0;
}
body.reference-body .ho-brand-symbol > picture { height: 100%; }
body.reference-body .ho-brand-symbol > picture > img,
body.reference-body .ho-brand-symbol > :is(.ho-motion-video, .ho-motion-webp) {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: contain;
}
body.reference-body .pui_user_level .ho-brand-symbol { width: 25px; height: 25px; margin-right: 5px; }