/*
 * Lion2 Signal — Wave 2 strict-audit final, immutable public revision 2.
 *
 * This byte-complete public alias moves the approved strict-audit layer to a
 * fresh URL after the CDN retained an older zstd representation of revision 1.
 *
 * The account shortcuts are owned by the named shell cascade layer. Important
 * declarations inside that layer outrank unlayered closeout rules, so this
 * immutable CDN-safe revision deliberately rejoins the same layer. The card
 * action selector mirrors the higher-specificity v99 rule and wins by source
 * order, closing the remaining target-size and nested-label audit findings.
 */

@layer lion2-signal-shell {
    @media screen and (min-width: 981px) {
        body.lion2-skin .right_content .rmenu {
            grid-template-columns: repeat(5, minmax(32px, 1fr)) !important;
            column-gap: 2px !important;
            row-gap: 2px !important;
            gap: 2px !important;
        }

        body.lion2-skin .right_content .rmenu a {
            min-width: 32px !important;
        }
    }
}

/* 배팅내역 상단·하위 활성 탭은 완성된 yellow key 파츠 전체를 표시한다.
 * 95-interaction-polish의 background shorthand가 남긴 0% 0% / auto / repeat를
 * 같은 shell layer의 longhand 묶음으로 원자적으로 덮어쓴다. */
@layer lion2-signal-shell {
    body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content
        .page.w_mybet :is(.mybet-category-tabs, .mybet-subtabs)
        > a:is(.on, .active, [aria-selected='true']) {
        background-color: var(--signal-yellow, #ffd400) !important;
        background-image: var(--signal-part-key-yellow) !important;
        background-position: center !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        color: #080a0b !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * V2-P1-02 · 홈 공지·이벤트 장비 패널의 4행 수용 프레임
 *
 * final v37의 desktop 214px box는 8px heavy frame 안에 46px heading과
 * 168px table을 배치해 실제 table이 panel 아래로 빠졌다. mobile은 frame을
 * 1px/4px line으로 되돌리고 4×45px 행을 168px에 가둬 마지막 행이 잘렸다.
 * 실제 #ajax-content를 반복한 동일 named layer에서 content-box 합을 닫고,
 * 기존 neutral artwork·DOM 행·6개 tile/30px CTA geometry는 그대로 둔다.
 * ───────────────────────────────────────────────────────────────────────── */

@layer lion2-signal-shell {
    body.lion2-skin.lion-skin[data-lion-page='home']
        #ajax-content#ajax-content#ajax-content#ajax-content
        .main_notice_area .notice_box {
        box-sizing: border-box !important;
        height: 216px !important;
        min-height: 216px !important;
        overflow: hidden !important;
        border: 0 !important;
        box-shadow: 0 9px 20px rgb(0 0 0 / 42%) !important;
    }

    body.lion2-skin.lion-skin[data-lion-page='home']
        #ajax-content#ajax-content#ajax-content#ajax-content
        .main_notice_area .notice_box::after {
        bottom: 7px !important;
    }

    body.lion2-skin.lion-skin[data-lion-page='home']
        #ajax-content#ajax-content#ajax-content#ajax-content
        .main_notice_area .notice_box .inn {
        box-sizing: border-box !important;
        width: 100% !important;
        height: 216px !important;
        min-height: 216px !important;
        grid-template-rows: 46px minmax(0, 1fr) !important;
        overflow: hidden !important;
        border: 8px solid transparent !important;
        border-image: var(--signal-part-frame-heavy) var(--signal-slice-frame-heavy) / 8px / 0 stretch !important;
        box-shadow:
            inset 0 0 0 1px rgb(255 255 255 / 8%),
            inset 0 -18px 28px rgb(0 0 0 / 24%) !important;
    }

    body.lion2-skin.lion-skin[data-lion-page='home']
        #ajax-content#ajax-content#ajax-content#ajax-content
        .main_notice_area .notice_box .table_wrap {
        box-sizing: border-box !important;
        height: 154px !important;
        min-height: 154px !important;
        overflow: hidden !important;
    }

    @media screen and (max-width: 980px) {
        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .main_notice_area .notice_box,
        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .main_notice_area .notice_box .inn {
            height: 244px !important;
            min-height: 244px !important;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .main_notice_area .notice_box .inn {
            grid-template-rows: 46px minmax(0, 1fr) !important;
            border: 8px solid transparent !important;
            border-image: var(--signal-part-frame-heavy) var(--signal-slice-frame-heavy) / 8px / 0 stretch !important;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .main_notice_area .notice_box .table_wrap {
            height: 182px !important;
            min-height: 182px !important;
        }
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * V2-P1-04 · 역할 기반 타이포그래피 폴리싱
 *
 * 마지막 artwork v37은 승인된 불변 아티팩트라 수정하지 않는다. 이 파일이 v37보다
 * 먼저 로드되므로 실제 #ajax-content ID를 반복해 특이도를 높이고, home hero부터
 * 상세 metadata/body/numeric까지 역할만 정밀하게 나눈다. 문구는 전부 DOM에 남고
 * 파츠 이미지에는 굽지 않는다. sports 기술 숫자·bet365 전용 서체·길이 대응 shell
 * 축소는 의도된 예외라 이 블록에서 건드리지 않는다.
 * ───────────────────────────────────────────────────────────────────────── */

body.lion2-skin {
    --signal-font-technical: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    --signal-type-hero-polish: clamp(44px, 3.35vw, 64px);
    --signal-type-section-polish: clamp(18px, 1.25vw, 21px);
    --signal-type-card-polish: 16px;
    --signal-type-meta-polish: 12px;
    --signal-leading-copy-polish: 1.55;
    --signal-tracking-meta-polish: .1em;
}

/* 상세 heading: route metadata와 본문 설명의 목소리를 분리한다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    .signal-page-heading :is(
        .signal-page-heading__meta,
        .signal-page-heading__family,
        .signal-page-heading__route
    ) {
    font-family: var(--signal-font-technical) !important;
    font-size: var(--signal-type-meta-polish) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: var(--signal-tracking-meta-polish) !important;
    text-transform: uppercase !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    .signal-page-heading .signal-page-heading__description {
    font-family: var(--signal-font-body) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* 홈: display title, instrument metadata, notice/event nameplate. */
@media screen and (min-width: 981px) {
    body.lion2-skin.lion-skin[data-lion-page='home']
        #ajax-content#ajax-content#ajax-content#ajax-content
        :is(.signal-main-slide-copy strong, .signal-hero-copy strong) {
        font-family: var(--signal-font-display) !important;
        font-size: var(--signal-type-hero-polish) !important;
        font-weight: 700 !important;
        line-height: 1.02 !important;
        letter-spacing: -.045em !important;
    }

    body.lion2-skin.lion-skin[data-lion-page='home']
        #ajax-content#ajax-content#ajax-content#ajax-content
        .signal-hero-market-panel > span > small {
        font-family: var(--signal-font-technical) !important;
        font-size: var(--signal-type-meta-polish) !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: .06em !important;
    }
}

body.lion2-skin.lion-skin[data-lion-page='home']
    #ajax-content#ajax-content#ajax-content#ajax-content
    .main_notice_area .notice_box h1 > span:first-child {
    font-family: var(--signal-font-display) !important;
    font-size: var(--signal-type-section-polish) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -.025em !important;
}

body.lion2-skin.lion-skin[data-lion-page='home']
    #ajax-content#ajax-content#ajax-content#ajax-content
    .main_notice_area .notice_box h1 > span:first-child > span {
    font-family: var(--signal-font-technical) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
}

body.lion2-skin.lion-skin[data-lion-page='home']
    #ajax-content#ajax-content#ajax-content#ajax-content
    .main_notice_area .notice_box h1 > a {
    font-family: var(--signal-font-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

/* 스포츠 종목명은 icon과 count 사이의 별도 UI label 역할이다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
    .spo_jong > .sports-type {
    grid-template-rows: 30px 17px 18px !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
    .spo_jong > .sports-type > div {
    font-family: var(--signal-font-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}

/* 관리자 rich text 규정 본문이 display headline을 상속하지 않게 한다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    :is(.w_europe, .w_inplay) .lion-bet-rules__body :is(p, p > span) {
    font-family: var(--signal-font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: var(--signal-leading-copy-polish) !important;
    letter-spacing: 0 !important;
}

/* section title, card title, compact table header 위계를 고정한다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    .minigame-section-head {
    min-height: 44px !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    .minigame-section-title {
    font-family: var(--signal-font-display) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -.025em !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    :is(
        .page.w_deposit,
        .page.w_withdraw,
        .page.w_point,
        .page.w_coupon,
        .page.w_notice,
        .page.w_event,
        .page.w_free,
        .page.w_customer,
        .page.w_questions,
        .page.w_result,
        .page.w_tournament_ranking,
        .page.w_honor_ranking
    ) table th {
    font-family: var(--signal-font-body) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: .02em !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    :is(.w_notice .notice-card-title, .w_event .event-title) {
    font-family: var(--signal-font-body) !important;
    font-size: var(--signal-type-card-polish) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -.01em !important;
}

/* 상태/차단 문구는 section heading이 아닌 본문 목소리로 읽힌다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    #board_mount .notice-empty--blocked {
    font-family: var(--signal-font-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
}

/* account label은 sans, live value는 tabular numeric으로 고정한다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    :is(
        .point-treasury__label,
        #myinfo_page .myinfo-asset-label,
        #myinfo_page .myinfo-field-label
    ) {
    font-family: var(--signal-font-body) !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    #myinfo_page .myinfo-guide-list li strong {
    font-family: var(--signal-font-body) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    #myinfo_page .myinfo-guide-list li small {
    font-family: var(--signal-font-body) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
    #myinfo_page :is(#myinfo_mb_emoney, #myinfo_mb_point, .myinfo-asset-value) {
    font-family: var(--signal-font-numeric) !important;
    font-variant-numeric: tabular-nums lining-nums !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

@media screen and (max-width: 980px) {
    body.lion2-skin.lion-skin[data-lion-page='home']
        #ajax-content#ajax-content#ajax-content#ajax-content
        :is(.signal-main-slide-copy > strong, .signal-hero-copy strong) {
        font-family: var(--signal-font-display) !important;
        font-size: clamp(22px, 6.15vw, 24px) !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        letter-spacing: -.035em !important;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
        :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
        .spo_jong > .sports-type > div {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    body.lion2-skin.lion-skin[data-lion-page='home']
        #ajax-content#ajax-content#ajax-content#ajax-content
        :is(
            .main_notice_area .notice_box h1 > span:first-child > span,
            .main_notice_area .notice_box h1 > a
        ) {
        font-size: 14px !important;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
        :is(
            .page.w_deposit,
            .page.w_withdraw,
            .page.w_point,
            .page.w_coupon,
            .page.w_notice,
            .page.w_event,
            .page.w_free,
            .page.w_customer,
            .page.w_questions,
            .page.w_result,
            .page.w_tournament_ranking,
            .page.w_honor_ranking
        ) table th {
        font-size: 14px !important;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
        .page:is(.w_deposit, .w_withdraw) .payment_method > .row > .l1 {
        font-family: var(--signal-font-body) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
        .page:is(.w_deposit, .w_withdraw) :is(.input-info, .info-txt) {
        font-family: var(--signal-font-body) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;
        letter-spacing: 0 !important;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
        #myinfo_page :is(.myinfo-asset-label, .myinfo-field-label) {
        font-family: var(--signal-font-body) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
        #myinfo_page :is(
            .myinfo-description,
            .myinfo-panel-heading p,
            .myinfo-guide-list small
        ) {
        font-family: var(--signal-font-body) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;
        letter-spacing: 0 !important;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content#ajax-content
        #myinfo_page .myinfo-asset-value {
        font-family: var(--signal-font-numeric) !important;
        font-size: clamp(20px, 5vw, 24px) !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
        font-variant-numeric: tabular-nums lining-nums !important;
    }
}

body.lion2-skin.lion-skin .signal-card-action,
body.lion2-skin.lion-skin .signal-card-action > span {
    font-size: 14px !important;
}

/* v20(second-polish)는 바이트·sha256 이 고정된 불변 아티팩트라 손대지 않는다.
 * 이 레이어는 v20 보다 먼저 로드되지만, 아래 규칙들은 뒤 레이어보다 특이도가 높아
 * (요소 하나가 더 붙는다) 순서와 무관하게 이긴다. */

/* 우측 프로필 빠른메뉴 — 비트맵은 글자 없는 기계식 판만 담당하고, 의미를 가진
 * 아이콘·라벨·안읽은 수는 실제 DOM 으로 그린다. 구운 글자를 확대 축소하던 방식보다
 * 좁은 데스크톱 레일과 모바일 drawer 모두에서 선명하고 접근 가능한 구조다. */
@layer lion2-signal-shell {
    body.lion2-skin.lion-skin .right_content .rmenu a,
    body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right .rmenu a {
        position: relative !important;
        isolation: isolate !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 24px minmax(11px, auto) !important;
        gap: 2px !important;
        align-content: center !important;
        justify-items: center !important;
        box-sizing: border-box !important;
        min-height: 46px !important;
        aspect-ratio: 1 !important;
        padding: 6px 2px 5px !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #111415 !important;
        text-decoration: none !important;
        transform: none !important;
    }

    body.lion2-skin.lion-skin .right_content .rmenu a > .signal-quick-plate,
    body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right
        .rmenu a > .signal-quick-plate {
        position: absolute !important;
        z-index: 0 !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: fill !important;
        filter: brightness(.94) contrast(1.04) !important;
        pointer-events: none !important;
        transition: filter 160ms ease, transform 160ms ease !important;
    }

    body.lion2-skin.lion-skin .right_content .rmenu a > i,
    body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right .rmenu a > i {
        position: relative !important;
        z-index: 1 !important;
        display: inline-flex !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        clip-path: none !important;
        color: var(--signal-yellow-hot, #ffd316) !important;
        -webkit-text-fill-color: var(--signal-yellow-hot, #ffd316) !important;
        font-size: 20px !important;
        line-height: 1 !important;
        filter: drop-shadow(0 2px 2px rgb(0 0 0 / 76%)) !important;
        transition: color 160ms ease, transform 160ms ease !important;
    }

    body.lion2-skin.lion-skin .right_content .rmenu a > i::before,
    body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right
        .rmenu a > i::before {
        line-height: 1 !important;
    }

    body.lion2-skin.lion-skin .right_content .rmenu a > .signal-quick-label,
    body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right
        .rmenu a > .signal-quick-label {
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        width: calc(100% - 4px) !important;
        max-width: calc(100% - 4px) !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        clip-path: none !important;
        color: #f0eee4 !important;
        -webkit-text-fill-color: #f0eee4 !important;
        font-family: var(--signal-font-body) !important;
        font-size: clamp(9.5px, .56vw, 10.5px) !important;
        font-weight: 800 !important;
        letter-spacing: -.06em !important;
        line-height: 1 !important;
        overflow-wrap: normal !important;
        text-align: center !important;
        text-overflow: clip !important;
        text-shadow: 0 1px 2px #000 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }

    body.lion2-skin.lion-skin .right_content .rmenu a:is(:hover, :focus-visible)
        > .signal-quick-plate,
    body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right
        .rmenu a:is(:hover, :focus-visible) > .signal-quick-plate {
        filter: brightness(1.13) contrast(1.08) !important;
        transform: scale(.985) !important;
    }

    body.lion2-skin.lion-skin .right_content .rmenu a:is(:hover, :focus-visible) > i,
    body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right
        .rmenu a:is(:hover, :focus-visible) > i {
        color: #fff3ad !important;
        -webkit-text-fill-color: #fff3ad !important;
        transform: translateY(-1px) !important;
    }

    body.lion2-skin.lion-skin .right_content .rmenu a:focus-visible,
    body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right
        .rmenu a:focus-visible {
        outline: 2px solid var(--signal-yellow-hot, #ffd316) !important;
        outline-offset: -3px !important;
    }

    body.lion2-skin.lion-skin .right_content .rmenu a > .lion-slip-memo-count,
    body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right
        .rmenu a > .lion-slip-memo-count {
        position: absolute !important;
        z-index: 3 !important;
        clip-path: none !important;
    }
}

@layer lion2-signal-shell {
    /* 1238px부터 우측 레일이 실제로 열리지만 1600px 직전까지는 계정 프레임의
     * 안쪽 폭이 5×44px보다 좁다. 메뉴만 224px로 레일 중앙까지 넓히고 세로
     * 스크롤 책임을 고정 레일로 옮겨, 계정·벳슬립의 박스와 y축 흐름은 그대로
     * 둔 채 양끝 버튼까지 온전한 hit area를 확보한다. 넓은 데스크톱에서는
     * max(100%, 224px)가 기존 유동 폭을 보존한다. */
    @media screen and (min-width: 981px) {
        body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right
            .lion-account-console {
            overflow: visible !important;
        }

        body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right .rmenu {
            position: relative !important;
            left: 50% !important;
            grid-template-columns: repeat(5, minmax(44px, 1fr)) !important;
            width: max(100%, 224px) !important;
            min-width: 224px !important;
            max-width: none !important;
            column-gap: 1px !important;
            row-gap: 1px !important;
            gap: 1px !important;
            transform: translateX(-50%) !important;
        }

        body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right .rmenu a {
            min-width: 44px !important;
            max-width: none !important;
        }
    }

    @media screen and (min-width: 1238px) and (max-width: 1599px) {
        body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right {
            overflow-x: hidden !important;
            overflow-y: auto !important;
            scrollbar-width: none !important;
        }

        body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right
            > .scrollFrame {
            overflow: visible !important;
        }
    }

    @media screen and (max-width: 360px) {
        body.lion2-skin.lion-skin .right_content .rmenu,
        body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right .rmenu {
            position: relative !important;
            left: 50% !important;
            grid-template-columns: repeat(5, 44px) !important;
            width: 220px !important;
            min-width: 220px !important;
            max-width: none !important;
            column-gap: 0 !important;
            row-gap: 0 !important;
            gap: 0 !important;
            transform: translateX(-50%) !important;
        }
    }
}

@layer lion2-signal-shell {
    @media (prefers-reduced-motion: reduce) {
        body.lion2-skin.lion-skin .right_content .rmenu a > :is(.signal-quick-plate, i),
        body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right
            .rmenu a > :is(.signal-quick-plate, i),
        body.lion2-skin.lion-skin .right_content .rmenu
            a:is(:hover, :focus-visible) > :is(.signal-quick-plate, i),
        body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right
            .rmenu a:is(:hover, :focus-visible) > :is(.signal-quick-plate, i) {
            animation: none !important;
            transform: none !important;
            transition: none !important;
        }
    }
}

/* 우측 서비스 배너 — 비트맵이 카피를 이미 갖고 있으면 DOM 카피를 겹쳐 그리지 않는다.
 * v4/v5 배너는 제목·부제·CTA 가 이미지 안에 구워져 있는데, 기존 규칙이 그 위에
 * 같은 문구를 한 번 더 얹어 두 겹으로 번져 읽을 수 없었다.
 * 비트맵 파일명으로 판별해, 글자 없는 판(v1~v3)으로 되돌리면 DOM 카피가 다시 보인다.
 * 감추더라도 DOM 에는 남겨 보조기기·검색이 계속 문구를 읽는다. */
body.lion2-skin.lion-skin .r_banner
    > .signal-service-banner:is(:has(> img[src*="-v4.webp"]), :has(> img[src*="-v5.webp"]))
    :is(.signal-banner-label, .signal-banner-cta),
body.lion2-skin.lion-skin .right_content#sidebar-right#sidebar-right .r_banner
    > .signal-service-banner:is(:has(> img[src*="-v4.webp"]), :has(> img[src*="-v5.webp"]))
    :is(.signal-banner-label, .signal-banner-cta) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 타이포 통일 (lion2 한정)
 *
 * 라이온2는 라이온1 시절 시트(css/pages/lion-theme.css)를 그대로 물려받았고,
 * body 에 lion-skin 과 lion2-skin 이 함께 붙어 있어 옛 규칙이 지금도 먹는다.
 * 그 결과 브루탈리스트 컨셉 한가운데에 명조/Georgia 가 섞여 "혼자 궁서체" 로 보였다.
 *
 * 두 가지를 바로잡는다.
 *   ① --lion-display 의 폴백이 serif 로 끝나 웹폰트가 뜨기 전이나 실패하면
 *      이 토큰을 쓰는 109개 규칙이 통째로 명조로 렌더된다. sans 로 끝내고
 *      signal 토큰과 같은 스택으로 수렴시킨다.
 *   ② 라틴 표제(NOTICE/EVENT ZONE/MINI GAME…)와 숫자에 박혀 있던 Georgia 를
 *      각각 display/numeric 토큰으로 되돌린다.
 *
 * 건드리지 않는 것:
 *   - 장식 글리프(?, ›, ◇, ⓘ, 배경 P, 유럽 화살표) — 타이포가 아니라 아이콘이라
 *     서체를 바꾸면 모양 자체가 달라진다.
 *   - 쪽지 페이지 명조(Lion Memo Myeongjo) — 편지 질감을 노린 의도된 예외.
 *   - 라이온1 스킨 — 스킨 폴더가 분리돼 있어 영향 없다. 이 레이어도
 *     전부 body.lion2-skin 으로 스코프된다.
 * ───────────────────────────────────────────────────────────────────────── */

body.lion2-skin {
    --lion-display: var(--signal-font-display, 'SEBANG_Gothic_Bold', 'ChosunGu', 'Malgun Gothic', sans-serif);
    --lion-body: var(--signal-font-body, 'ChosunGu', 'Malgun Gothic', sans-serif);
}

/* 라틴 표제 — 컨셉의 display 서체로 */
body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .main_notice_area .notice_box h1 span,
    .w_europe .europe-sports-hero > small,
    .w_honor_ranking .honor-hero-english
) {
    font-family: var(--signal-font-display) !important;
}

/* 의사요소는 :is() 안에 들어갈 수 없어 따로 쓴다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content .minigame-page-image::before,
body.lion2-skin.lion-skin #ajax-content#ajax-content .virtualgame-page-image::before {
    font-family: var(--signal-font-display) !important;
}

/* 숫자 — 컨셉의 numeric 서체로. Georgia 숫자가 가장 눈에 띄게 이질적이었다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_coupon .coupon-ticket__serial,
    .w_coupon .coupon-history-row__serial,
    .w_rule .bbsl_item_container .--num,
    .w_honor_ranking .honor-rank-cell--plain .honor-rank-number,
    .w_honor_ranking .honor-rank-badge,
    .w_honor_ranking .honor-champion-medal
) {
    font-family: var(--signal-font-numeric) !important;
}

/* 한글 본문/표제가 명조로 떨어지던 자리 — 토큰만으로도 대부분 해결되지만
 * "Nanum Myeongjo" 를 직접 들고 있는 규칙은 따로 덮는다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content .w_honor_ranking :is(
    .honor-empty-stage__copy h2,
    .honor-empty-stage__copy span,
    .honor-hero > .lion-page-title-copy
) {
    font-family: var(--signal-font-display) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 스포츠 배당판 hover 가독성
 *
 * 이 영역은 두 겹이다. 셀(li)은 hover/선택 시 시그널 옐로 판으로 바뀌고,
 * 배당 숫자는 그 위에 다시 자기 어두운 칩(#0a0604)을 깔고 앉는다.
 * 그래서 "글자색 하나로" 정리하면 반드시 한쪽이 깨진다.
 *   - 판 기준(잉크)으로 맞추면 어두운 칩 위 검정이 되고
 *   - 칩 기준(밝은 노랑)으로 두면 판 위 노랑이 된다
 * 두 겹을 각각 고정한다. 판에 직접 앉는 글자는 잉크로, 칩 안 숫자는
 * 칩 배경까지 같이 지정해 밝은 노랑으로. 어느 상태에서도 대비가 보장된다.
 * ───────────────────────────────────────────────────────────────────────── */

/* ① 판에 직접 앉는 글자 — 노란 판 위 잉크 (대비 11.9:1) */
body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list :is(li, .odd_info):is(.on, .active, .choice, :hover) :is(
    .home_nm, .away_nm, .bet_name, .game_type, .status
) {
    color: #090b0c !important;
    -webkit-text-fill-color: #090b0c !important;
}

/* ② 칩 안 배당 숫자 — 칩 배경을 함께 고정하고 밝은 노랑 (대비 11.6:1).
 *    ①의 잉크가 여기까지 내려오면 검정 칩 위 검정이 된다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list :is(li, .odd_info):is(.on, .active, .choice, :hover) :is(
    .home_odd, .away_odd, .draw_odd, .odd_price
) {
    border-color: rgb(255 218 49 / 42%) !important;
    background: #0d0f10 !important;
    color: #ffda31 !important;
    -webkit-text-fill-color: #ffda31 !important;
}

/* ③ 배당 등락 표시는 죽이지 않는다. 어두운 칩에서 읽히는 톤으로만 조정.
 *    상승 #ff7a6b 6.4:1, 하락 #7fc0ff 9.3:1
 *    ⚠️ 아래 두 규칙은 `.odd-up li` 형태라 실제로는 매칭되지 않는다.
 *       odds-engine.js 는 .odd-up 을 li 자신에게 붙인다(자손이 아니다).
 *       파일 끝 "배당 변동 신호" 블록에서 올바른 선택자로 다시 잡는다.
 *       (이 두 규칙은 무해해서 남겨 두되 근거만 남긴다.) */
body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list .odd-up :is(li, .odd_info):is(.on, .active, .choice, :hover) :is(
    .home_odd, .away_odd, .draw_odd, .odd_price
) {
    color: #ff7a6b !important;
    -webkit-text-fill-color: #ff7a6b !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list .odd-down :is(li, .odd_info):is(.on, .active, .choice, :hover) :is(
    .home_odd, .away_odd, .draw_odd, .odd_price
) {
    color: #7fc0ff !important;
    -webkit-text-fill-color: #7fc0ff !important;
}

/* ④ 1X2 배지 — 배지도 자기 어두운 칩을 갖는 세 번째 겹이다.
 * ①의 잉크는 -webkit-text-fill-color 로 상속돼 배지 안 글자까지 검게 칠해
 * 어두운 배지 위 검정이 됐다. 배지 subtree 만 칩 기준으로 되돌린다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list :is(li, .odd_info):is(.on, .active, .choice, :hover) :is(
    .signal-market-icon, .signal-market-icon > span
) {
    border-color: rgb(255 218 49 / 42%) !important;
    color: #ffda31 !important;
    -webkit-text-fill-color: #ffda31 !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list :is(li, .odd_info):is(.on, .active, .choice, :hover)
    .signal-market-icon {
    background: #0d0f10 !important;
}

/* ⑤ 1X2 배지가 배당칩에 가려지던 것.
 * .home_info/.away_info 는 폭이 내용보다 좁은데(47px) 배지 30px + 배당칩 44px 는
 * 둘 다 안 줄어드는 설정이라 서로 겹쳐 그려졌다. 실측 286~316 vs 291~335, 25px 중첩.
 * 배지·배당칩 묶음은 내용 폭을 갖게 두고, 대신 팀명이 줄어들며 말줄임하게 한다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list li :is(.home_info, .away_info) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    gap: 4px !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list li :is(.home_nm, .away_nm) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * 로딩 인디케이터 폴리싱
 *
 * ⚠️ 실제로 화면에 나오는 로더는 include/css/loader.css 가 아니라
 *    90-detail-visual-cleanup-v2.css 의 #ajax_loader 규칙이다(아이디 + !important).
 *    거기서는 112x86 각진 판에 빨강/노랑/시안 3색 스캔바와 네모 점 3개가
 *    steps() 로 끊겨 깜빡인다. 색이 셋이라 초점이 없고 모션도 거칠다.
 *
 * 라이온1·건담이 쓰는 원형 메달리온 패턴으로 맞추고 장식을 덜어낸다.
 *   - 각진 판 + 3색 스캔바 → 원형 메달리온 + 단일 시그널 옐로 아크
 *   - 네모 점 3개 → 스킨 현행 마크(signal-logo-v1) 를 가운데 배치
 *   - steps() 깜빡임 → 부드러운 회전 + 밝기 호흡
 *   - 프로그레스바 무지개(노랑+시안) → 단일 액센트, 두께 4px → 3px
 *
 * 90 레이어가 아이디+!important 로 못박아 둔 값들이라 여기서 하나씩 되돌린다.
 * loader.css 는 번들 대상이고 dist 해시가 핀으로 고정돼 있어 손대지 않는다.
 * ───────────────────────────────────────────────────────────────────────── */

body.lion2-skin #ajax_loader#ajax_loader.loader_overlay {
    width: 132px !important;
    height: 132px !important;
    overflow: visible !important;
    border: 1px solid rgb(255 211 22 / 34%) !important;
    border-bottom: 1px solid rgb(255 211 22 / 34%) !important;
    border-radius: 50% !important;
    background-color: #0f1213 !important;
    background-image:
        radial-gradient(circle at 50% 42%, rgb(255 211 22 / 10%), transparent 58%) !important;
    box-shadow:
        0 18px 40px rgb(0 0 0 / 52%),
        inset 0 0 0 1px rgb(255 255 255 / 5%) !important;
}

/* 3색 스캔바 → 단일 옐로 아크 링 */
body.lion2-skin #ajax_loader#ajax_loader.lds-dual-ring::before {
    top: 50% !important;
    left: 50% !important;
    width: 92px !important;
    height: 92px !important;
    margin: -46px 0 0 -46px !important;
    border: 2px solid rgb(255 255 255 / 9%) !important;
    border-top-color: var(--signal-yellow-hot, #ffd316) !important;
    border-right-color: rgb(255 211 22 / 32%) !important;
    border-radius: 50% !important;
    background: none !important;
    box-shadow: none !important;
    animation: signal-loader-spin 1s cubic-bezier(.55, .12, .35, .9) infinite !important;
}

/* 네모 점 3개 → 가운데 엠블럼 */
body.lion2-skin #ajax_loader#ajax_loader.lds-dual-ring::after {
    top: 50% !important;
    left: 50% !important;
    width: 74px !important;
    height: 44px !important;
    margin: -22px 0 0 -37px !important;
    border-radius: 0 !important;
    background:
        url('/skin/lion2_main/images/signal/signal-logo-v1.webp')
        no-repeat center / 62px auto !important;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 72%)) !important;
    box-shadow: none !important;
    animation: signal-loader-pulse 1.9s ease-in-out infinite !important;
}

@keyframes signal-loader-spin {
    to { transform: rotate(360deg); }
}

/* 크기를 흔들면 로고가 떨리는 것처럼 보인다. 밝기만 숨쉬게 둔다. */
@keyframes signal-loader-pulse {
    0%, 100% { opacity: .82; }
    50%      { opacity: 1; }
}

body.lion2-skin #page-loader#page-loader {
    height: 3px !important;
}

body.lion2-skin #page-loader#page-loader .page-loader-bar {
    border-radius: 0 !important;
    background-image: linear-gradient(
        90deg,
        rgb(255 211 22 / 0%),
        var(--signal-yellow, #f2c400) 38%,
        var(--signal-yellow-hot, #ffd316)
    ) !important;
    background-size: auto !important;
    box-shadow: 0 0 10px rgb(255 211 22 / 46%) !important;
    animation: page-loader-progress 1.5s ease-in-out infinite !important;
}

@media (max-width: 768px) {
    body.lion2-skin #ajax_loader#ajax_loader.loader_overlay {
        width: 112px !important;
        height: 112px !important;
    }

    body.lion2-skin #ajax_loader#ajax_loader.lds-dual-ring::before {
        width: 78px !important;
        height: 78px !important;
        margin: -39px 0 0 -39px !important;
    }

    body.lion2-skin #ajax_loader#ajax_loader.lds-dual-ring::after {
        width: 64px !important;
        height: 38px !important;
        margin: -19px 0 0 -32px !important;
        background-size: 56px auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.lion2-skin #ajax_loader#ajax_loader.lds-dual-ring::before {
        animation-duration: 2.6s !important;
        animation-timing-function: linear !important;
    }

    body.lion2-skin #ajax_loader#ajax_loader.lds-dual-ring::after {
        animation: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 좌측 카지노·슬롯 배너 — 글자를 이미지에 함께 굽는다
 *
 * 기존 아트는 글자 없는 판이라 그 위에 DOM 텍스트를 얹어 뒀는데,
 * 79x62 밖에 안 되는 타일에서 흰 글자 + 짙은 그림자가 금속 무늬 위에 떠 있어
 * 싸구려로 읽혔다. 게다가 아트가 2:1 인데 타일은 1.27:1 이라
 * background-size:100% 100% 로 세로가 눌려 있었다.
 * 라이온1의 btn_casino.gif 도 글자를 구워 쓰던 자리다.
 *
 * 판·아트·한글·영문을 한 장으로 구운 4:3 타일로 교체하고, 눌림 방지를 위해
 * cover 로 채운다. 라벨 span 은 보조기기·검색을 위해 DOM 에 남기고 감춘다.
 * 아트 정책의 baked-label 예외 조항과 같은 방식.
 *
 * ⚠️ [레이어] 좌측 프로모 규칙은 @layer lion2-signal-shell 안에 있다.
 *    important 선언은 레이어에 든 쪽이 무레이어보다 세므로 같은 레이어로 들어가고,
 *    같은 레이어 안에서는 뒤 파일이 이기므로 아이디 하나를 더 얹어 특이도로 이긴다.
 *
 * ⚠️ [자산 위치] images/campaign/left 는 캠페인 매니페스트가 파일 수 2개로
 *    고정해 둔 폴더라 건드리지 않고 images/signal/left 를 신설했다.
 * ───────────────────────────────────────────────────────────────────────── */

@layer lion2-signal-shell {
    body.lion2-skin #sidebar#sidebar#sidebar .leftMenu .lion-left-promos
        .lion-left-promo:is(.lion-left-promo--casino, .lion-left-promo--slot) {
        background-position: center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }

    body.lion2-skin #sidebar#sidebar#sidebar .leftMenu .lion-left-promos
        .lion-left-promo--casino {
        background-image:
            url('/skin/lion2_main/images/signal/left/signal-left-casino-v2.webp') !important;
    }

    body.lion2-skin #sidebar#sidebar#sidebar .leftMenu .lion-left-promos
        .lion-left-promo--slot {
        background-image:
            url('/skin/lion2_main/images/signal/left/signal-left-slot-v2.webp') !important;
    }

    /* 구운 타일이 문구를 갖고 있으므로 DOM 라벨은 화면에서만 뺀다.
     * display:none 이 아니라 clip 이라 보조기기에는 그대로 읽힌다. */
    body.lion2-skin #sidebar#sidebar#sidebar .leftMenu .lion-left-promos
        .lion-left-promo:is(.lion-left-promo--casino, .lion-left-promo--slot) > span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
    }
}

/* 좌측 프로모 글로시 스윕 — 지금은 아예 안 보인다.
 * v24 는 ::after 에 opacity:0 을 깔고 자기 키프레임(lion2-left-promo-gloss)이
 * 투명도를 올려주길 기대하는데, 정작 animation 은 라이온1 시절 lion-theme.css 의
 * lion-left-promo-shine 이 이긴다. 일반 선언은 무레이어가 레이어보다 세고,
 * v24 의 animation/opacity 에는 !important 가 없기 때문이다.
 * 그런데 그 옛 키프레임은 transform 만 움직이고 투명도는 건드리지 않는다.
 * → 투명도 0 에 고정된 채로 좌우로만 움직여 영원히 안 보인다.
 *
 * 투명도와 이동을 한 키프레임에서 같이 다루고, 둘 다 !important 로 못박아
 * 다시 쪼개지지 않게 한다. */
@layer lion2-signal-shell {
    body.lion2-skin #sidebar#sidebar#sidebar .leftMenu .lion-left-promos
        .lion-left-promo:is(.lion-left-promo--casino, .lion-left-promo--slot)::after {
        /* ⚠️ opacity 에 !important 를 붙이면 키프레임이 그걸 못 이겨 스윕이 멈춘
         * 채로 밝게 고정된다. 애니메이션은 !important 선언보다 약하다.
         * 여기서는 특이도(아이디 3개)만으로 v24 의 opacity:0 을 이기면 되고,
         * 실제 값은 키프레임이 굴린다. animation 은 무레이어인 라이온1 규칙을
         * 이겨야 해서 !important 가 필요하다(일반 선언은 무레이어가 더 세다). */
        opacity: 0;
        filter: blur(1px) !important;
        animation: signal-left-shine 4.6s cubic-bezier(.3, .6, .3, 1) infinite !important;
        will-change: transform, opacity !important;
    }

    body.lion2-skin #sidebar#sidebar#sidebar .leftMenu .lion-left-promos
        .lion-left-promo--slot::after {
        animation-delay: .7s !important;
    }
}

@keyframes signal-left-shine {
    0%, 26% {
        opacity: 0;
        transform: skewX(-18deg) translateX(-30%);
    }
    38% {
        opacity: .85;
    }
    62% {
        opacity: .55;
    }
    72%, 100% {
        opacity: 0;
        transform: skewX(-18deg) translateX(620%);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.lion2-skin #sidebar#sidebar#sidebar .leftMenu .lion-left-promos
        .lion-left-promo:is(.lion-left-promo--casino, .lion-left-promo--slot)::after {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 스포츠 페이지 우측 벳슬립 + 종목바 정리
 *
 * 레이어 주의: important 선언은 레이어에 든 쪽이 무레이어보다 세다.
 * 그래서 같은 레이어에 넣고, 같은 레이어의 뒤 파일도 이기도록 아이디를 더 얹는다.
 * ───────────────────────────────────────────────────────────────────────── */
@layer lion2-signal-shell {

    /* ① 벳슬립 최상단에 크게 뜨던 X.
     * 모바일 전용 장바구니 닫기 버튼(#close_cart.mobile)인데
     * 60-media-footer-v2 가 미디어쿼리 없이 display:inline-flex 를 줘서
     * 데스크톱에서도 떠 있었다. 데스크톱 우측바는 항상 열려 있어 쓸모가 없다. */
    @media screen and (min-width: 981px) {
        body.lion2-skin #sidebar-right#sidebar-right#sidebar-right
            #close_cart.signal-close-cart {
            display: none !important;
        }
    }

    /* ② 슬립 안 파란 글자 2곳 — 라이온1 시절 브랜드 블루(oklch .62 .18 250)가
     * 그대로 남아 옐로/그래파이트 팔레트에서 혼자 튄다. */
    body.lion2-skin #sidebar-right#sidebar-right#sidebar-right
        :is(.betlistcolor_b, #total_odd) {
        color: var(--signal-yellow-hot, #ffd316) !important;
        -webkit-text-fill-color: var(--signal-yellow-hot, #ffd316) !important;
    }

    /* ③ 하단 한도 안내 행 — 라벨만 nowrap 이고 값에는 규칙이 없어
     * "5,000 ~ 20,000,000 원" 이 "20,000," / "000 원" 으로 숫자 중간에서 끊겼다.
     * 좁은 레일에서 한 줄에 다 넣을 수 없으므로 라벨/값을 위아래로 쌓고
     * 값은 통째로 nowrap 해 숫자가 절대 쪼개지지 않게 한다. */
    /* 폭이 되면 한 줄, 모자라면 값만 아랫줄로 자동 내려간다.
     * 값 자체는 nowrap 이라 어느 쪽이든 숫자가 쪼개지지 않는다.
     * 중단점을 두지 않아 레일 폭이 바뀌어도 알아서 맞는다. */
    body.lion2-skin #sidebar-right#sidebar-right#sidebar-right
        .betinfo .betinput2 {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 1px 10px !important;
        min-height: 0 !important;
        padding: 7px 9px !important;
        text-align: left !important;
    }

    body.lion2-skin #sidebar-right#sidebar-right#sidebar-right
        .betinfo .betinput2 > span:first-child {
        color: var(--signal-copy-soft, #a9aaa5) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: -.02em !important;
    }

    body.lion2-skin #sidebar-right#sidebar-right#sidebar-right
        .betinfo .betinput2 > span:nth-child(2) {
        flex: 0 1 auto !important;
        margin-left: auto !important;
        overflow: hidden !important;
        color: #e6e4dc !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        font-variant-numeric: tabular-nums lining-nums !important;
        letter-spacing: -.02em !important;
        text-align: right !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* ④ BETSLIP 제목이 패널 프레임의 노란 장식탭에 물려 첫 글자가 가려지던 것.
     * 탭 폭을 재보니 14px 여백으로는 모자라 30px 로 밀어낸다. */
    body.lion2-skin #sidebar-right#sidebar-right#sidebar-right
        .lion-betslip-panel > .bgy.title {
        padding-left: 30px !important;
    }

    /* ⑤ 안읽은 쪽지 배지는 양수일 때만 PHP가 출력한다. 1~3자리 모두 라이브
     * 라벨을 가리지 않도록 상단 모서리의 고정 높이 상태 칩으로 제한한다. */
    body.lion2-skin #sidebar-right#sidebar-right#sidebar-right
        .rmenu a > .lion-slip-memo-count {
        inset: 2px 2px auto auto !important;
        display: inline-flex !important;
        min-width: 16px !important;
        max-width: 30px !important;
        height: 16px !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 0 4px !important;
        overflow: hidden !important;
        border: 1px solid #ff6a54 !important;
        border-radius: 8px !important;
        background: #a51e16 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        font-variant-numeric: tabular-nums lining-nums !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        box-shadow: 0 2px 5px rgb(0 0 0 / 72%) !important;
    }

    /* ⑥ 종목 선택 아이콘 — 선택되면 링·글리프가 판때기와 같은 노란색이라
     * 메달리온이 검은 구멍처럼 죽어 보였다. 미선택 쪽이 색색 링으로 더 화려해
     * 위계가 뒤집혀 있었다. 선택 시에는 글리프를 밝게 올리고 메달리온 둘레에
     * 짙은 링을 둘러 노란 판과 분리한다. */
    body.lion2-skin.lion-skin #ajax-content#ajax-content
        .spo_jong .sports-type:is(.on, [aria-selected='true']) .signal-sport-icon {
        color: #fffdf2 !important;
        -webkit-text-fill-color: #fffdf2 !important;
        box-shadow:
            inset 0 0 0 2px rgb(9 11 12 / 62%),
            0 0 0 2px rgb(9 11 12 / 42%),
            0 2px 6px rgb(0 0 0 / 45%) !important;
        filter: brightness(1.12) contrast(1.06) !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 쿠폰 페이지 폴리싱
 *
 * coupon-ledger.css 는 css.bundled 라 직접 고치면 dist 해시 핀이 깨진다.
 * 여기서 덮어쓴다.
 *
 * ① 사용내역 금액 칸이 90px 고정이라 "10,000개" 가 "10,0 / 00 개" 로 숫자
 *    중간에서 끊겼다(실측 셀 90x78, white-space:normal). 칸을 내용에 맞춰
 *    늘리고 값은 nowrap 으로 못박는다.
 * ② 일련번호가 rgba(...,.42) 라 대비가 거의 없어 읽히지 않았다.
 * ③ 와인/포레스트(적갈·심록) 팔레트는 시그널 이전 잔재다. 이 페이지만 혼자
 *    다른 세계처럼 보이던 가장 큰 이유라 그래파이트+안전황색으로 맞춘다.
 * ④ Georgia serif 로 찍히던 번호를 numeric 토큰으로.
 * ───────────────────────────────────────────────────────────────────────── */

/* ① 사용내역 행 — 금액 칸이 숫자를 쪼개지 않도록 */
body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon .coupon-history-row {
    grid-template-columns:
        64px
        minmax(150px, 1fr)
        minmax(160px, 1.6fr)
        max-content
        minmax(140px, auto) !important;
    min-height: 84px !important;
    column-gap: 12px !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon .coupon-history-row__amount {
    padding-right: 4px !important;
    font-variant-numeric: tabular-nums lining-nums !important;
    text-align: right !important;
    white-space: nowrap !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon .coupon-history-row__date {
    font-variant-numeric: tabular-nums lining-nums !important;
    white-space: nowrap !important;
}

/* ②④ 일련번호 — 대비 확보 + 컨셉 서체 */
body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon :is(.coupon-history-row__serial, .coupon-ticket__serial) {
    border-right-color: rgb(255 255 255 / 10%) !important;
    color: rgb(255 218 49 / 82%) !important;
    -webkit-text-fill-color: rgb(255 218 49 / 82%) !important;
    font-family: var(--signal-font-numeric) !important;
    font-variant-numeric: tabular-nums lining-nums !important;
    font-weight: 800 !important;
}

/* ③ 와인/포레스트 → 그래파이트 + 안전황색 */
body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon .coupon-history-row {
    border-color: rgb(255 211 22 / 24%) !important;
    background: linear-gradient(100deg, #1d2122, #131617) !important;
    color: #e6e4dc !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon .coupon-history-row:nth-child(even) {
    background: linear-gradient(100deg, #171b1c, #0e1112) !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon .coupon-ticket {
    border-color: rgb(255 211 22 / 30%) !important;
    background: linear-gradient(135deg, #1f2324, #101314) !important;
    box-shadow:
        inset 0 0 0 3px rgb(255 255 255 / 5%),
        0 12px 26px rgb(0 0 0 / 34%) !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon .coupon-ticket.is-used {
    border-color: rgb(255 255 255 / 12%) !important;
    background: linear-gradient(135deg, #171a1b, #0c0e0f) !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon .coupon-ticket.is-expired {
    border-color: rgb(207 60 50 / 34%) !important;
    background: linear-gradient(135deg, #1b1415, #0e0a0b) !important;
}

/* ⑤ "사용됨" 스탬프가 얇은 회색 회전 박스라 미완성처럼 보이던 것 */
body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon .is-used .coupon-status {
    border-color: rgb(255 255 255 / 34%) !important;
    background: rgb(9 11 12 / 62%) !important;
    color: #e6e4dc !important;
    -webkit-text-fill-color: #e6e4dc !important;
    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 28%) !important;
}

/* 일련번호 칸 배경도 적갈/올리브(rgb(145 26 30 /.24), rgb(88 112 31 /.24))라
 * 옐로/그래파이트 안에서 혼자 튄다. 홀짝 구분은 살리되 톤만 맞춘다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon .coupon-history-row__serial {
    border-color: rgb(255 211 22 / 20%) !important;
    background: rgb(255 211 22 / 7%) !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon .coupon-history-row:nth-child(even) .coupon-history-row__serial {
    background: rgb(255 255 255 / 5%) !important;
}

/* ------------------------------------------------------------------
 * 좌측 랙 타일 hover 가독성
 *
 * 92-wave1-image-parts-v1 / 90-detail-visual-cleanup-v2 가
 * `.leftMenu .menu a` 배경을 어두운 키플레이트로 !important 고정하면서,
 * 노란 플레이트 분기 :is(.ybg, .menu-active, .is-current, [aria-current])
 * 에 :hover 를 넣지 않았다. 그 결과 base(brutalist-signal-v2)의
 * "hover = 노란판 + 검정글씨" 중 color:#080909 만 살아남아
 * 어두운 판 위 검정 글씨(대비 1.06:1)가 된다.
 *
 * 노란 플레이트는 "현재 메뉴" 표시로 남겨야 하므로 배경은 건드리지 않고,
 * 좌측 랙의 기존 hover 언어(인기리그 a:hover = #ffd400)에 맞춰
 * 텍스트/보더만 옐로로 되돌린다.
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .menu a:not(.ybg):not(.menu-active):not(.is-current):not([aria-current='page']):is(:hover, :focus-visible),
body.lion2-skin.lion-skin .left_content.left_content .leftMenu .menu a:not(.ybg):not(.menu-active):not(.is-current):not([aria-current='page']):is(:hover, :focus-visible) {
    border-color: #ffd400 !important;
    color: #ffd400 !important;
    -webkit-text-fill-color: #ffd400 !important;
    text-shadow: none !important;
}

body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .menu a:not(.ybg):not(.menu-active):not(.is-current):not([aria-current='page']):is(:hover, :focus-visible) :is(i, span, em, b),
body.lion2-skin.lion-skin .left_content.left_content .leftMenu .menu a:not(.ybg):not(.menu-active):not(.is-current):not([aria-current='page']):is(:hover, :focus-visible) :is(i, span, em, b) {
    color: #ffd400 !important;
    -webkit-text-fill-color: #ffd400 !important;
    text-shadow: none !important;
}

/* ------------------------------------------------------------------
 * 스포츠 종목 탭(.sports-type) hover 가독성
 *
 * brutalist-signal-v2 의 `:is(.on, .active, :hover)` 규칙이
 * "노란 판 + 잉크 글씨"를 전제로 color/-webkit-text-fill-color 를 #090b0c 로 준다.
 * 그런데 60-media-footer-v2 가 hover 판을 어두운 회색으로 !important 덮으면서
 * color 만 #fff 로 되돌리고 -webkit-text-fill-color 는 그대로 뒀다.
 * -webkit-text-fill-color 는 color 보다 우선해서 칠하므로,
 * 어두운 판 위에 #090b0c 라벨/아이콘이 찍혀 대비 1.07:1 로 사라진다.
 * (.on 은 실제로 노란 판이라 잉크가 맞다 — 건드리지 않는다.)
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin #ajax-content#ajax-content
    :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
    .spo_jong .sports-type:not(.on):not([aria-selected='true']):is(:hover, :focus-visible),
body.lion2-skin.lion-skin #ajax-content#ajax-content
    :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
    .spo_jong .sports-type:not(.on):not([aria-selected='true']):is(:hover, :focus-visible) > div {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* 아이콘은 종목별 시맨틱 색(--sport-icon-color)을 그대로 쓰게 돌려준다.
 * 메달리온 배경이 그 색을 28%만 섞은 어두운 톤이라 대비가 충분하다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content
    :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
    .spo_jong .sports-type:not(.on):not([aria-selected='true']):is(:hover, :focus-visible) > .signal-sport-icon {
    -webkit-text-fill-color: currentcolor !important;
}

/* ------------------------------------------------------------------
 * "전체" 종목 아이콘 회전
 *
 * 라이온1 은 이 자리에 100프레임짜리 회전 GIF(총 3.8초)를 쓴다.
 * 라이온2 는 아이콘 폰트라 같은 파일을 못 쓰므로 CSS 로 재현한다.
 *
 * ⚠️ 요소 자체를 돌리면 안 된다. .signal-sport-icon 은 hover/.on 에서
 *    transform: translateY(-2px) scale(1.06) 를 쓰고 있어 서로 덮어쓴다.
 *    글리프(::before)만 돌려서 메달리온 판은 고정, 공 그림만 돌게 한다.
 * ⚠️ animation 이 다루는 속성에는 !important 를 붙이지 않는다(값이 고정됨).
 * ------------------------------------------------------------------ */
@keyframes signal-sport-all-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

body.lion2-skin.lion-skin #ajax-content#ajax-content
    :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
    .spo_jong .sports-type[data-sport-id='all'] > .signal-sport-icon::before {
    display: inline-block;
    transform-origin: 50% 50%;
    animation: signal-sport-all-spin 3.8s linear infinite !important;
}

@media (prefers-reduced-motion: reduce) {
    body.lion2-skin.lion-skin #ajax-content#ajax-content
        :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
        .spo_jong .sports-type[data-sport-id='all'] > .signal-sport-icon::before {
        animation: none !important;
    }
}

/* ==================================================================
 * 마이크로 애니메이션 라운드 (V2-P2-ANIM-01)
 *
 * 원칙
 *  - CSS 전용. JS 는 app.bundle 해시 핀에 막혀 있다.
 *  - 상시 도는 앰비언트는 최소로. 나머지는 hover/active 트리거라 idle 비용 0.
 *  - transform / opacity 만 건드려 레이아웃 리플로우를 만들지 않는다.
 *  - animation 이 다루는 속성에는 !important 를 붙이지 않는다(값이 고정돼 멈춘다).
 *  - 파일 맨 끝의 prefers-reduced-motion 블록에서 전량 정지시킨다.
 * ================================================================== */

@keyframes signal-micro-sweep {
    0% { transform: translate3d(-140%, 0, 0) skewX(-18deg); opacity: 0; }
    12% { opacity: 1; }
    52% { opacity: 1; }
    64%, 100% { transform: translate3d(240%, 0, 0) skewX(-18deg); opacity: 0; }
}

@keyframes signal-micro-blip {
    0%, 74%, 100% { opacity: .35; }
    82% { opacity: 1; }
}

@keyframes signal-micro-halo {
    0%, 100% { opacity: .28; transform: scale(1); }
    50% { opacity: .72; transform: scale(1.16); }
}

/* ------------------------------------------------------------------
 * A1. 히어로 마켓 패널 — 6행 순차 신호 점멸
 * aria-hidden 장식 요소라 상호작용을 방해하지 않는다.
 * 행마다 지연을 줘서 위에서 아래로 훑는 신호판처럼 보이게 한다.
 * ------------------------------------------------------------------ */
body.lion2-skin[data-lion-page='home'] #ajax-content
    .signal-hero-market-panel > span {
    position: relative;
}

body.lion2-skin[data-lion-page='home'] #ajax-content
    .signal-hero-market-panel > span > small {
    animation: signal-micro-blip 7.2s ease-in-out infinite;
}

body.lion2-skin[data-lion-page='home'] #ajax-content .signal-hero-market-panel > span:nth-child(1) > small { animation-delay: 0s; }
body.lion2-skin[data-lion-page='home'] #ajax-content .signal-hero-market-panel > span:nth-child(2) > small { animation-delay: .28s; }
body.lion2-skin[data-lion-page='home'] #ajax-content .signal-hero-market-panel > span:nth-child(3) > small { animation-delay: .56s; }
body.lion2-skin[data-lion-page='home'] #ajax-content .signal-hero-market-panel > span:nth-child(4) > small { animation-delay: .84s; }
body.lion2-skin[data-lion-page='home'] #ajax-content .signal-hero-market-panel > span:nth-child(5) > small { animation-delay: 1.12s; }
body.lion2-skin[data-lion-page='home'] #ajax-content .signal-hero-market-panel > span:nth-child(6) > small { animation-delay: 1.4s; }

/* ------------------------------------------------------------------
 * A2. 베팅하기 CTA — 주기적 sheen 스윕
 * 슬립에서 가장 중요한 버튼인데 완전히 정지해 있어 시선이 안 간다.
 * 5초에 한 번만 훑고 지나가도록 길게 잡아 소음이 되지 않게 한다.
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin .rightMenu .betbtn_wrap #bet_btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

body.lion2-skin.lion-skin .rightMenu .betbtn_wrap #bet_btn::after {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34%;
    content: '';
    background: linear-gradient(
        100deg,
        transparent,
        rgb(255 255 255 / 62%) 42%,
        rgb(255 255 255 / 78%) 50%,
        transparent
    );
    pointer-events: none;
    animation: signal-micro-sweep 5s cubic-bezier(.34, .1, .28, 1) infinite;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content
    .page.w_coupon .coupon-ticket__code {
    font-size: 12px !important;
    letter-spacing: .02em !important;
}

/* ------------------------------------------------------------------
 * A3. 헤더 로고 — 주기적 shine 스윕
 * 헤더에서 유일하게 움직이는 게 공지 마퀴뿐이라 로고가 죽어 보인다.
 * 9초 주기라 눈에 거슬리지 않으면서 브랜드가 살아 있게 만든다.
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin .top_wrap .userm_wrap .logo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

body.lion2-skin.lion-skin .top_wrap .userm_wrap .logo::after {
    position: absolute;
    z-index: 2;
    top: -40%;
    bottom: -40%;
    left: 0;
    width: 22%;
    content: '';
    background: linear-gradient(
        100deg,
        transparent,
        rgb(255 246 199 / 58%) 46%,
        rgb(255 255 255 / 72%) 52%,
        transparent
    );
    pointer-events: none;
    animation: signal-micro-sweep 9s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* ------------------------------------------------------------------
 * H1. 우측 퀵버튼 5종 — 호버 글로시 스윕 + 살짝 뜨기
 * 텍스트를 구워 넣은 비트맵 타일이라 상태 변화가 전혀 없었다.
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin .rightMenu .lion-account-console .rmenu > a {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .16s ease, filter .16s ease;
}

body.lion2-skin.lion-skin .rightMenu .lion-account-console .rmenu > a:is(:hover, :focus-visible) {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

body.lion2-skin.lion-skin .rightMenu .lion-account-console .rmenu > a:active {
    transform: translateY(0);
}

body.lion2-skin.lion-skin .rightMenu .lion-account-console .rmenu > a::after {
    position: absolute;
    z-index: 3;
    top: -50%;
    bottom: -50%;
    left: 0;
    width: 40%;
    content: '';
    background: linear-gradient(
        100deg,
        transparent,
        rgb(255 255 255 / 46%) 46%,
        rgb(255 255 255 / 66%) 52%,
        transparent
    );
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-140%, 0, 0) skewX(-18deg);
}

body.lion2-skin.lion-skin .rightMenu .lion-account-console .rmenu > a:is(:hover, :focus-visible)::after {
    animation: signal-micro-sweep .9s ease-out;
}

/* ------------------------------------------------------------------
 * H2. 메인 게임카드 5종 — 호버 글로시 스윕
 * ⚠️ 이 카드의 ::before 는 라벨(content: attr(data-label))로 이미 쓰이고,
 *    ::after 는 60-media-footer-v2 가 display:none/content:none 으로 꺼 뒀다.
 *    그 꺼진 ::after 를 되살려 쓴다(새 요소를 만들 수 없으므로).
 * hover 의 translateY(-2px)·brightness 는 이미 있으니 건드리지 않는다.
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content#ajax-content .mpmenu1 > a {
    overflow: hidden;
}

body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content#ajax-content .mpmenu1 > a:is(:hover, :focus-visible)::after {
    position: absolute !important;
    z-index: 2 !important;
    top: -40% !important;
    right: auto !important;
    bottom: -40% !important;
    left: 0 !important;
    display: block !important;
    width: 30% !important;
    content: '' !important;
    background: linear-gradient(
        100deg,
        transparent,
        rgb(255 255 255 / 40%) 46%,
        rgb(255 255 255 / 60%) 52%,
        transparent
    ) !important;
    pointer-events: none !important;
    animation: signal-micro-sweep 1.05s ease-out;
}

/* ------------------------------------------------------------------
 * H3. 우측 서비스 배너 4종 — 호버 시 뜨기 + 화살표 밀기
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin .rightMenu .r_banner .signal-service-banner {
    transition: transform .18s ease, filter .18s ease;
}

body.lion2-skin.lion-skin .rightMenu .r_banner .signal-service-banner:is(:hover, :focus-visible) {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

body.lion2-skin.lion-skin .rightMenu .r_banner .signal-service-banner :is(i, .fi) {
    transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}

body.lion2-skin.lion-skin .rightMenu .r_banner .signal-service-banner:is(:hover, :focus-visible) :is(i, .fi) {
    transform: translateX(3px);
}

/* ------------------------------------------------------------------
 * H4. 좌측 프리매치 종목 행 — 아이콘 pop + 카운트 칩 glow
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .freematch.w_sport_left_menu li > a {
    transition: transform .16s ease;
}

body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .freematch.w_sport_left_menu li > a:is(:hover, :focus-visible) {
    transform: translateX(2px);
}

body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .freematch.w_sport_left_menu li > a :is(i, .fi) {
    transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}

body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .freematch.w_sport_left_menu li > a:is(:hover, :focus-visible) :is(i, .fi) {
    transform: scale(1.18);
}

body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .freematch.w_sport_left_menu li > a :is(span, small, em, b) {
    transition: box-shadow .2s ease;
}

body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .freematch.w_sport_left_menu li > a:is(:hover, :focus-visible) :is(span, small, em, b) {
    box-shadow: 0 0 0 1px rgb(255 212 0 / 44%), 0 0 8px rgb(255 212 0 / 26%);
}

/* ------------------------------------------------------------------
 * H5·H6. 배당 버튼 / 금액 칩 — 누르는 감각
 * 클릭해도 아무 반응이 없어 눌렀는지 알기 어렵던 자리들이다.
 * hover 는 이미 색이 바뀌므로 :active 만 보탠다.
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin #ajax-content
    :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
    .glist li.btn-sports {
    transition: transform .1s ease;
}

body.lion2-skin.lion-skin #ajax-content
    :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
    .glist li.btn-sports:active {
    transform: scale(.976);
}

body.lion2-skin.lion-skin .rightMenu .betmoney :is(.amountBtn, .maxBtn) {
    transition: transform .1s ease, filter .16s ease;
}

body.lion2-skin.lion-skin .rightMenu .betmoney :is(.amountBtn, .maxBtn):is(:hover, :focus-visible) {
    filter: brightness(1.14);
}

body.lion2-skin.lion-skin .rightMenu .betmoney :is(.amountBtn, .maxBtn):active {
    transform: translateY(1px) scale(.97);
}

/* ------------------------------------------------------------------
 * H7. 푸터 프로바이더 로고 — 호버 시 살짝 뜨기
 * (색 처리는 파일 하단 "푸터 로고 롤링" 블록에서 다룬다.
 *  처음엔 모노크롬이 의도된 설계인 줄 알았으나, 스프라이트가 이미
 *  흑백 밴드를 갖고 있어 필터는 중복이었다.)
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin #ajax-content .footer .footer_logos li {
    transition: transform .2s ease;
}

body.lion2-skin.lion-skin #ajax-content .footer .footer_logos li:hover {
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------
 * S1. 선택된 종목 탭 — 메달리온 링 halo
 * .on 은 노란 판이므로 halo 도 잉크로 그려야 보인다.
 * ⚠️ ::before 는 아이콘 폰트 글리프가 쓰므로 ::after 만 쓴다.
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin #ajax-content#ajax-content
    :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
    .spo_jong .sports-type:is(.on, [aria-selected='true']) > .signal-sport-icon {
    position: relative;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content
    :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
    .spo_jong .sports-type:is(.on, [aria-selected='true']) > .signal-sport-icon::after {
    position: absolute;
    inset: -3px;
    content: '';
    border: 2px solid rgb(9 11 12 / 62%);
    border-radius: 50%;
    pointer-events: none;
    animation: signal-micro-halo 2.4s ease-in-out infinite;
}

/* ------------------------------------------------------------------
 * 모션 최소화 설정을 켠 사용자에게는 이 라운드의 모션을 전부 끈다.
 * (호버 transition 은 남겨도 무해하지만 상시 애니메이션은 정지시킨다.)
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    body.lion2-skin.lion-skin .rightMenu .betbtn_wrap #bet_btn::after,
    body.lion2-skin.lion-skin .top_wrap .userm_wrap .logo::after,
    body.lion2-skin.lion-skin .rightMenu .lion-account-console .rmenu > a:is(:hover, :focus-visible)::after,
    body.lion2-skin[data-lion-page='home'] #ajax-content .signal-hero-market-panel > span > small,
    body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content#ajax-content .mpmenu1 > a:is(:hover, :focus-visible)::after,
    body.lion2-skin.lion-skin #ajax-content#ajax-content
        :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
        .spo_jong .sports-type:is(.on, [aria-selected='true']) > .signal-sport-icon::after {
        animation: none !important;
    }
}

/* ==================================================================
 * 생동감 라운드 2 (V2-P2-ANIM-02)
 * ================================================================== */

/* ------------------------------------------------------------------
 * ① 배당 변동 신호 — 라이온2에서 완전히 안 보이던 것
 *
 * odds-engine.js 의 addOddChangeAnimation() 이 값이 바뀐 배당 버튼(li)에
 * .odd-up / .odd-down 을 3초간 붙여 준다. 배선은 살아 있다.
 * 그런데 sports-common.css 의 `.odd-up :is(.home_odd, ...) { color: ... !important }`
 * 가 라이온2에서는 지고 있었다. 대비 작업 때 배당 숫자에
 * `-webkit-text-fill-color: #ffda31 !important` 를 나중에 깔았기 때문이다.
 * 실측: li 에 .odd-up 을 붙여도 숫자가 rgb(255,218,49) 그대로였다.
 * 즉 실시간으로 배당이 오르내려도 화면에 아무 표시가 없었다.
 *
 * ⚠️ 예전에 배경 점멸 + 확대 애니메이션을 썼다가 "목록이 흔들려 보인다"고
 *    걷어낸 이력이 sports-common.css 주석에 남아 있다. 그래서 여기서도
 *    크기·위치는 절대 건드리지 않는다. 색과 칩 배경만 1회 반응하고 식는다.
 * ------------------------------------------------------------------ */
@keyframes signal-odd-up-flash {
    0% { border-color: rgb(255 122 107 / 82%); background-color: rgb(255 122 107 / 26%); }
    100% { border-color: rgb(255 218 49 / 42%); background-color: #0d0f10; }
}

@keyframes signal-odd-down-flash {
    0% { border-color: rgb(127 192 255 / 82%); background-color: rgb(127 192 255 / 26%); }
    100% { border-color: rgb(255 218 49 / 42%); background-color: #0d0f10; }
}

@keyframes signal-odd-arrow {
    0% { opacity: 0; transform: translateY(var(--signal-odd-arrow-from)); }
    18%, 62% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

/* 숫자 색 — 상승 #ff7a6b(6.4:1) / 하락 #7fc0ff(9.3:1). 3초 뒤 클래스가
 * 빠지면서 노랑으로 천천히 돌아온다.
 *
 * ⚠️ sports-common.css 가 배당 숫자에 `transition: color 1.2s` 를 깔아 둬서
 *    색이 1.2초에 걸쳐 스며든다. 들어올 때는 즉시 알아채야 하므로 켜져 있는
 *    동안만 .12s 로 줄인다. 클래스가 빠지면 다시 1.2s 규칙으로 돌아가므로
 *    "빠르게 켜지고 천천히 식는" 시세판 거동이 된다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list :is(li, .odd_info):is(.odd-up, .odd-down) :is(
    .home_odd, .away_odd, .draw_odd, .odd_price
) {
    transition: color .12s ease-out, -webkit-text-fill-color .12s ease-out !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list :is(li, .odd_info).odd-up :is(
    .home_odd, .away_odd, .draw_odd, .odd_price
) {
    color: #ff7a6b !important;
    -webkit-text-fill-color: #ff7a6b !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list :is(li, .odd_info).odd-down :is(
    .home_odd, .away_odd, .draw_odd, .odd_price
) {
    color: #7fc0ff !important;
    -webkit-text-fill-color: #7fc0ff !important;
}

/* 칩 1회 플래시 — 0.9초에 걸쳐 원래 칩 색으로 식는다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list :is(li, .odd_info).odd-up :is(
    .home_odd, .away_odd, .draw_odd, .odd_price
) {
    position: relative;
    animation: signal-odd-up-flash .9s ease-out;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list :is(li, .odd_info).odd-down :is(
    .home_odd, .away_odd, .draw_odd, .odd_price
) {
    position: relative;
    animation: signal-odd-down-flash .9s ease-out;
}

/* 방향 마커 — 색만으로는 색각 이상 사용자가 상승/하락을 구분하지 못한다.
 * 칩 오른쪽 위에 화살표를 잠깐 띄웠다 지운다. 칩 밖으로 나가므로
 * 레이아웃에 영향이 없다. */
body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list :is(li, .odd_info):is(.odd-up, .odd-down) :is(
    .home_odd, .away_odd, .draw_odd, .odd_price
)::after {
    position: absolute;
    z-index: 4;
    top: -7px;
    right: -3px;
    content: '';
    pointer-events: none;
    font: 900 10px/1 var(--signal-font-numeric, monospace);
    animation: signal-odd-arrow 2.4s ease-out forwards;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list :is(li, .odd_info).odd-up :is(
    .home_odd, .away_odd, .draw_odd, .odd_price
)::after {
    --signal-odd-arrow-from: 4px;
    content: '\25B2';
    color: #ff7a6b;
    -webkit-text-fill-color: #ff7a6b;
    text-shadow: 0 1px 2px #000;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
    .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
) .game_list :is(li, .odd_info).odd-down :is(
    .home_odd, .away_odd, .draw_odd, .odd_price
)::after {
    --signal-odd-arrow-from: -4px;
    content: '\25BC';
    color: #7fc0ff;
    -webkit-text-fill-color: #7fc0ff;
    text-shadow: 0 1px 2px #000;
}

/* ------------------------------------------------------------------
 * ② 화면 전환 stagger
 *
 * 지금은 95-interaction-polish 가 `#ajax-content > :first-child` 하나에만
 * lion2-route-enter 를 걸어서, 컨테이너가 통째로 한 번에 뜬다.
 * 같은 시간을 쓰면서 내부 블록이 위에서 아래로 차례로 들어오게 바꾼다.
 *
 * ⚠️ 목록이 100행씩 되므로 지연을 무한정 늘리면 아래쪽이 몇 초씩 늦게 뜬다.
 *    앞 10개만 계단으로 주고 나머지는 지연 0 으로 즉시 표시한다.
 * ⚠️ 배당 폴링(processOddsUpdates)은 셀 textContent 만 바꾸고 행을 다시
 *    만들지 않으므로, 이 애니메이션이 주기적으로 재생되지는 않는다.
 *    재생 시점은 페이지 진입과 종목/리그 필터 변경뿐이다.
 * ------------------------------------------------------------------ */
@keyframes signal-stagger-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes signal-board-panel-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.lion2-skin.lion-skin #ajax-content :is(
    #europe_list, #cross_list, #special_list, #realtime_list, #inplay_list
) > .game_pan,
body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content .mpmenu1 > a {
    animation: signal-stagger-in .34s cubic-bezier(.22, .8, .28, 1) both;
}

body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content .lion-main-board-panel {
    animation: signal-board-panel-in .34s cubic-bezier(.22, .8, .28, 1) both;
}

body.lion2-skin.lion-skin #ajax-content :is(
    #europe_list, #cross_list, #special_list, #realtime_list, #inplay_list
) > .game_pan:nth-child(1),
body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content .mpmenu1 > a:nth-child(1) { animation-delay: 0ms; }

body.lion2-skin.lion-skin #ajax-content :is(
    #europe_list, #cross_list, #special_list, #realtime_list, #inplay_list
) > .game_pan:nth-child(2),
body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content .mpmenu1 > a:nth-child(2) { animation-delay: 45ms; }

body.lion2-skin.lion-skin #ajax-content :is(
    #europe_list, #cross_list, #special_list, #realtime_list, #inplay_list
) > .game_pan:nth-child(3),
body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content .mpmenu1 > a:nth-child(3) { animation-delay: 90ms; }

body.lion2-skin.lion-skin #ajax-content :is(
    #europe_list, #cross_list, #special_list, #realtime_list, #inplay_list
) > .game_pan:nth-child(4),
body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content .mpmenu1 > a:nth-child(4) { animation-delay: 135ms; }

body.lion2-skin.lion-skin #ajax-content :is(
    #europe_list, #cross_list, #special_list, #realtime_list, #inplay_list
) > .game_pan:nth-child(5),
body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content .mpmenu1 > a:nth-child(5) { animation-delay: 180ms; }

body.lion2-skin.lion-skin #ajax-content :is(
    #europe_list, #cross_list, #special_list, #realtime_list, #inplay_list
) > .game_pan:nth-child(6) { animation-delay: 225ms; }

body.lion2-skin.lion-skin #ajax-content :is(
    #europe_list, #cross_list, #special_list, #realtime_list, #inplay_list
) > .game_pan:nth-child(7) { animation-delay: 270ms; }

body.lion2-skin.lion-skin #ajax-content :is(
    #europe_list, #cross_list, #special_list, #realtime_list, #inplay_list
) > .game_pan:nth-child(8) { animation-delay: 315ms; }

body.lion2-skin.lion-skin #ajax-content :is(
    #europe_list, #cross_list, #special_list, #realtime_list, #inplay_list
) > .game_pan:nth-child(n + 9) { animation-delay: 355ms; }

body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content
    .lion-main-board-panel:nth-of-type(2) { animation-delay: 70ms; }

/* ------------------------------------------------------------------
 * ③ 벳슬립 항목 반응
 *
 * europe.js 는 선택이 바뀔 때마다 카트를 비우고 .betlistbox 를 다시
 * insertAdjacentHTML 로 꽂는다. 새 요소가 삽입되면 CSS animation 은
 * JS 없이 자동 재생되므로, 삽입 애니메이션만으로 "방금 담겼다"가 보인다.
 *
 * ⚠️ 전체를 다시 그리므로 기존 항목도 같이 재생된다. 사용자가 직접
 *    누른 순간에만 일어나는 일이라 그대로 두되, 길이를 .22s 로 짧게 잡아
 *    슬립이 출렁이는 느낌이 되지 않게 한다.
 * ⚠️ 총배당률(#total_odd)은 innerHTML 만 갈아끼우고 요소는 그대로라
 *    CSS 로는 재생 지점을 못 잡는다. 숫자 pop 은 JS 라운드로 넘긴다.
 * ------------------------------------------------------------------ */
@keyframes signal-slip-in {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

body.lion2-skin.lion-skin .rightMenu .betlistbox {
    animation: signal-slip-in .22s cubic-bezier(.22, .8, .28, 1) both;
}

/* ------------------------------------------------------------------
 * ④ 상단 내비 — 가동 중 스캔 라인
 *
 * 원래 계획은 시그니처인 옐로 빗금 테이프를 천천히 흘리는 것이었는데,
 * 실측해 보니 그 빗금은 CSS 그라디언트가 아니라 프레임 비트맵
 * (signal-part-* border-image)에 구워져 있어 background-position 으로
 * 움직일 수 없었다. 구워진 아트를 다시 만들지 않고 같은 의도를 내려고,
 * 내비 바 위쪽 모서리를 훑고 지나가는 얇은 신호선으로 대체한다.
 * ------------------------------------------------------------------ */
@keyframes signal-nav-scan {
    0% { transform: translate3d(-100%, 0, 0); opacity: 0; }
    10%, 60% { opacity: 1; }
    100% { transform: translate3d(1100%, 0, 0); opacity: 0; }
}

/* ⚠️ .nav_wrap 에는 position 을 절대 주지 말 것.
 *    static 상태에서 무시되던 top 값이 살아나 내비 바가 91px 아래로
 *    떨어져 히어로 배너를 덮는다(실측: y 91.4 → 182.8).
 *    스캔선은 이미 positioned 인 안쪽 .navdiv 에 붙인다. */
body.lion2-skin.lion-skin .top_wrap .nav_wrap .navdiv {
    overflow: hidden;
}

body.lion2-skin.lion-skin .top_wrap .nav_wrap .navdiv::after {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 9%;
    height: 2px;
    content: '';
    background: linear-gradient(90deg, transparent, var(--signal-yellow-hot, #ffd316), transparent);
    pointer-events: none;
    animation: signal-nav-scan 6.5s linear infinite;
}

/* ------------------------------------------------------------------
 * ⑤ 마감 임박 경기 신호
 *
 * timer-manager.js 가 KST ptime 을 파싱해 시작까지 0초 초과·5분 이하인
 * 경기의 시간 플레이트에 .signal-closing-soon 을 붙인다. 경기판 전체를
 * 확대하거나 흔들지 않고 시간 아래의 얇은 신호광만 맥동시켜 목록의
 * x/y/width/height 는 유지한다. Europe 은 .teaminfo, 나머지 세 화면은
 * match 단위 .game_list 와 대응 모바일 행을 상태 carrier 로 사용한다.
 * ------------------------------------------------------------------ */
@keyframes signal-closing-soon-pulse {
    0%, 100% { opacity: .34; transform: scaleX(.38); }
    50% { opacity: 1; transform: scaleX(1); }
}

@layer lion2-signal-shell {
    body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
        .w_cross, .w_special, .w_realtime, .w_europe
    ) :is(
        .game_list.signal-closing-soon .l_time,
        .teaminfo.signal-closing-soon .l_time,
        .mobile_expbtn.signal-closing-soon .mobile_time
    ) {
        position: relative !important;
        color: #fff1a8 !important;
        -webkit-text-fill-color: #fff1a8 !important;
        text-shadow: 0 1px 2px #000, 0 0 10px rgb(255 211 22 / 34%) !important;
        box-shadow: inset 3px 0 var(--signal-yellow-hot, #ffd316) !important;
    }

    /* Mobile markup keeps the visible text in a child span. Pin its ink as
     * well so route-specific mobile typography cannot mute the warning. */
    body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
        .w_cross, .w_special, .w_realtime
    ) .mobile_expbtn.signal-closing-soon .mobile_time > span {
        color: #fff1a8 !important;
        -webkit-text-fill-color: #fff1a8 !important;
        text-shadow: 0 1px 2px #000, 0 0 10px rgb(255 211 22 / 34%) !important;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
        .w_cross, .w_special, .w_realtime, .w_europe
    ) :is(
        .game_list.signal-closing-soon .l_time,
        .teaminfo.signal-closing-soon .l_time,
        .mobile_expbtn.signal-closing-soon .mobile_time
    )::after {
        position: absolute;
        right: 5px;
        bottom: 2px;
        left: 5px;
        height: 2px;
        content: '';
        background: var(--signal-yellow-hot, #ffd316);
        box-shadow: 0 0 8px rgb(255 211 22 / 86%);
        transform-origin: center;
        pointer-events: none;
        animation: signal-closing-soon-pulse 1.35s ease-in-out infinite;
    }
}

/* ------------------------------------------------------------------
 * ⑥ 즐겨찾기 별 토글
 *
 * europe.js 가 fi-rr-star(빈 별) ↔ fi-sr-star(채운 별) 클래스를 갈아끼운다.
 * 클래스가 붙는 순간 animation 이 선언돼 있으면 그때 재생되므로,
 * 채워지는 쪽에만 pop 을 건다. 해제할 때는 조용히 돌아간다.
 * ------------------------------------------------------------------ */
@keyframes signal-fav-pop {
    0% { transform: scale(.6) rotate(-18deg); }
    55% { transform: scale(1.32) rotate(6deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes signal-fav-ring {
    0% { opacity: .85; transform: scale(.5); }
    100% { opacity: 0; transform: scale(2.1); }
}

body.lion2-skin.lion-skin #ajax-content .fav-toggle {
    position: relative;
}

body.lion2-skin.lion-skin #ajax-content .fav-toggle .fi-sr-star {
    display: inline-block;
    animation: signal-fav-pop .42s cubic-bezier(.34, 1.56, .5, 1);
}

body.lion2-skin.lion-skin #ajax-content .fav-toggle:has(.fi-sr-star)::after {
    position: absolute;
    inset: -2px;
    content: '';
    border: 2px solid var(--signal-yellow-hot, #ffd316);
    border-radius: 50%;
    pointer-events: none;
    animation: signal-fav-ring .52s ease-out forwards;
}

/* 이번 라운드 모션도 모션 최소화 설정에서는 전부 정지시킨다. */
@media (prefers-reduced-motion: reduce) {
    body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
        .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
    ) .game_list :is(li, .odd_info):is(.odd-up, .odd-down) :is(
        .home_odd, .away_odd, .draw_odd, .odd_price
    ),
    body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
        .w_cross, .w_special, .w_realtime, .w_inplay, .w_europe
    ) .game_list :is(li, .odd_info):is(.odd-up, .odd-down) :is(
        .home_odd, .away_odd, .draw_odd, .odd_price
    )::after,
    body.lion2-skin.lion-skin #ajax-content :is(
        #europe_list, #cross_list, #special_list, #realtime_list, #inplay_list
    ) > .game_pan,
    body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content .mpmenu1 > a,
    body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content .lion-main-board-panel,
    body.lion2-skin.lion-skin .rightMenu .betlistbox,
    body.lion2-skin.lion-skin .top_wrap .nav_wrap .navdiv::after,
    body.lion2-skin.lion-skin #ajax-content#ajax-content :is(
        .w_cross, .w_special, .w_realtime, .w_europe
    ) :is(
        .game_list.signal-closing-soon .l_time,
        .teaminfo.signal-closing-soon .l_time,
        .mobile_expbtn.signal-closing-soon .mobile_time
    )::after,
    body.lion2-skin.lion-skin #ajax-content .fav-toggle .fi-sr-star,
    body.lion2-skin.lion-skin #ajax-content .fav-toggle:has(.fi-sr-star)::after {
        animation: none !important;
    }
}

/* ------------------------------------------------------------------
 * 푸터 게임사 로고 롤링 — 다른 스킨과 동일한 거동으로 복원
 *
 * footer_logos.png 는 1100×400 스프라이트다. 10열 × 10행(셀 110×40)이고
 * 위쪽 4행이 컬러 밴드, -160px 아래 4행이 흑백 밴드다.
 * include/css/main.css 의 기본 규칙은 다른 스킨과 완전히 동일하게
 * 평소 흑백 밴드(-160px - row*40) → hover 컬러 밴드(row*-40) 로 굴린다.
 *
 * 문제는 그 위에 라이온2에만 덧씌워진 CSS 필터였다.
 *   평소 : filter: grayscale(1) contrast(1.08) brightness(1.55)
 *   hover: filter: grayscale(.82) sepia(.12) brightness(1.08)
 * 스프라이트가 이미 흑백 밴드를 갖고 있는데 그 위에 grayscale 을 또 씌운
 * 중복 처리라, hover 로 컬러 밴드를 불러와도 82% 다시 회색이 되어
 * 로고 색이 끝내 나타나지 않았다. 즉 롤링은 돌지만 결과가 안 보였다.
 *
 * 또 하나: 그리드가 repeat(10, minmax(72px, 110px)) 이라 폭이 좁아지면
 * 셀이 95px 로 줄어드는데 background-size 는 auto(110px 셀 기준)여서
 * 로고 오른쪽이 15px 씩 잘려 나갔다(Evolution → Evolutio).
 * 셀을 110px 로 고정하고 열 수가 알아서 접히게 바꾼다. 다른 스킨의
 * flex-wrap 거동과 같은 결과가 된다.
 * ------------------------------------------------------------------ */
/* ⚠️ 필터를 거는 97-wave2-shell-media-layer 규칙은
 *    `body.lion2-skin.lion-skin[data-lion-page='home'] #ajax-content×3
 *     .footer_logos ul li[class^='ft_logos_']` 라 클래스 항이 5개다.
 *    [data-lion-page] 를 빼먹으면 4개가 되어 진다(실측으로 확인).
 *    같은 항을 포함하고 .lion-skin 을 한 번 더 반복해 확실히 이긴다. */
/* ⚠️ 이 블록은 반드시 @layer lion2-signal-shell 안에 있어야 한다.
 *    필터를 거는 97-wave2-shell-media-layer 는 파일 전체가 이 레이어 안이고,
 *    !important 선언은 레이어에 든 쪽이 무레이어보다 강하다(일반 선언은 반대).
 *    무레이어로 두면 특이도를 아무리 올려도 지고, 실제로 그렇게 한 번 졌다.
 *    같은 레이어 안에서는 나중에 로드되는 99b 가 소스 순서로 이긴다. */
@layer lion2-signal-shell {
    body.lion2-skin.lion-skin.lion-skin[data-lion-page] #ajax-content#ajax-content#ajax-content .footer_logos,
    body.lion2-skin.lion-skin.lion-skin[data-lion-page] #ajax-content#ajax-content#ajax-content .footer_logos ul li,
    body.lion2-skin.lion-skin.lion-skin[data-lion-page] #ajax-content#ajax-content#ajax-content .footer_logos ul li[class^='ft_logos_'],
    body.lion2-skin.lion-skin.lion-skin[data-lion-page] #ajax-content#ajax-content#ajax-content .footer_logos ul li:is(:hover, :focus-visible),
    body.lion2-skin.lion-skin.lion-skin[data-lion-page] #ajax-content#ajax-content#ajax-content .footer_logos ul li[class^='ft_logos_']:is(:hover, :focus-visible) {
        filter: none !important;
        opacity: 1 !important;
    }

    body.lion2-skin.lion-skin.lion-skin[data-lion-page] #ajax-content#ajax-content#ajax-content .footer_logos ul {
        grid-template-columns: repeat(auto-fit, 110px) !important;
        justify-content: center !important;
        gap: 4px 6px !important;
    }

    body.lion2-skin.lion-skin.lion-skin[data-lion-page] #ajax-content#ajax-content#ajax-content .footer_logos ul li,
    body.lion2-skin.lion-skin.lion-skin[data-lion-page] #ajax-content#ajax-content#ajax-content .footer_logos ul li[class^='ft_logos_'] {
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        height: 40px !important;
        background-size: 1100px 400px !important;
    }
}

/* ------------------------------------------------------------------
 * V2-P1-06 · compact provider rack
 *
 * max-width:980px의 final artwork 규칙은 110px auto-fit grid를 3열로
 * 접어 34개 provider를 12행에 쌓았다. 원본 sprite cell과 브랜드 순서를
 * 그대로 유지하면서 17열×2행 horizontal rack으로 바꾸고, 사라지는
 * native scrollbar를 보완하는 작은 Signal 방향 plate를 footer에 둔다.
 * ------------------------------------------------------------------ */
@layer lion2-signal-shell {
    @media screen and (max-width: 980px) {
        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content .footer {
            position: relative !important;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content .footer_logos {
            scrollbar-color: var(--signal-yellow-hot, #ffd316) #07090a !important;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content .footer_logos ul {
            grid-template-columns: repeat(17, 110px) !important;
            grid-template-rows: repeat(2, 40px) !important;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .footer_logos::-webkit-scrollbar {
            height: 7px;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .footer_logos::-webkit-scrollbar-track {
            border-top: 1px solid #343839;
            background: #07090a;
            box-shadow: inset 0 1px 3px #000;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .footer_logos::-webkit-scrollbar-thumb {
            min-width: 44px;
            border: 1px solid #4a3b00;
            background: linear-gradient(90deg, #8c7300, #ffd316 50%, #8c7300);
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content .footer::after {
            position: absolute !important;
            z-index: 2 !important;
            right: 16px !important;
            bottom: 25px !important;
            display: flex !important;
            width: 32px !important;
            height: 18px !important;
            align-items: center !important;
            justify-content: center !important;
            border: 1px solid #5d4a00 !important;
            content: '\2194' !important;
            background: #101314 !important;
            color: var(--signal-yellow-hot, #ffd316) !important;
            font: 900 14px/1 var(--signal-font-numeric) !important;
            box-shadow: inset 0 0 0 1px rgb(255 211 22 / 12%) !important;
            pointer-events: none !important;
        }
    }

    @media screen and (max-width: 340px) {
        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content .footer::after {
            right: 6px !important;
            width: 22px !important;
        }
    }
}

/* ------------------------------------------------------------------
 * V2-P1-05 · icon material unification, stage A
 *
 * 좌측 sport tree는 실제 DOM이 .scrollFrame > .leftMenu인데 과거 규칙은
 * 반대 순서를 요구해 22px medallion이 한 번도 적용되지 않았다. 실제 root에
 * micro 22px housing을 연결하고, compact home의 primary live glyph에도 같은
 * medallion family를 조립한다. 링크·문구·아이콘 font와 44px target은 보존한다.
 * ------------------------------------------------------------------ */
@layer lion2-signal-shell {
    body.lion2-skin.lion-skin #sidebar#sidebar > .scrollFrame > .leftMenu
        .bg-category-orange1 > .signal-sport-icon {
        display: inline-flex !important;
        box-sizing: border-box !important;
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        flex: 0 0 22px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 6px 0 0 !important;
        background: var(--signal-part-medallion) center / contain no-repeat !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }

    /* 1366~1440px에서는 1000px 중앙 무대를 보존하느라 좌측 레일이
     * 128~202px까지 유동적으로 줄어든다. 기존 flex의 20px padding과 40px
     * count가 22px medallion의 공간을 빼앗지 않도록 네 역할을 명시적인
     * grid 열로 나눈다. label은 숨기지 않고 normal wrap으로 40px 행 안에
     * 실제 1~2행을 표시하며 count와 회전 화살표도 독립 열에 보존한다. */
    @media screen and (min-width: 1366px) and (max-width: 1440px) {
        body.lion2-skin.lion-skin #sidebar#sidebar > .scrollFrame > .leftMenu
            .freematch.w_sport_left_menu > ul > li > a.bg-category-orange1 {
            display: grid !important;
            box-sizing: border-box !important;
            grid-template-columns: 22px minmax(0, 1fr) minmax(18px, max-content) 7px !important;
            column-gap: 2px !important;
            align-items: center !important;
            width: 100% !important;
            height: 40px !important;
            padding: 0 2px !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar > .scrollFrame > .leftMenu
            .freematch.w_sport_left_menu > ul > li > a.bg-category-orange1
            > .signal-sport-icon {
            grid-column: 1 !important;
            margin: 0 !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar > .scrollFrame > .leftMenu
            .freematch.w_sport_left_menu > ul > li > a.bg-category-orange1 > span {
            grid-column: 2 !important;
            min-width: 0 !important;
            margin: 0 !important;
            overflow-wrap: anywhere !important;
            font-size: 12px !important;
            line-height: 12px !important;
            text-align: left !important;
            white-space: normal !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar > .scrollFrame > .leftMenu
            .freematch.w_sport_left_menu > ul > li > a.bg-category-orange1 > small {
            grid-column: 3 !important;
            box-sizing: border-box !important;
            width: auto !important;
            min-width: 18px !important;
            max-width: none !important;
            height: 20px !important;
            margin: 0 !important;
            padding: 1px !important;
            font-family: var(--signal-font-technical) !important;
            font-size: 10px !important;
            line-height: 1 !important;
            white-space: nowrap !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar > .scrollFrame > .leftMenu
            .freematch.w_sport_left_menu > ul > li > a.bg-category-orange1::after {
            grid-column: 4 !important;
            box-sizing: border-box !important;
            width: 7px !important;
            height: 7px !important;
            justify-self: center !important;
            margin: 0 !important;
        }
    }

    @media screen and (min-width: 1366px) and (max-width: 1413px) {
        body.lion2-skin.lion-skin #sidebar#sidebar > .scrollFrame > .leftMenu
            .freematch.w_sport_left_menu > ul > li > a.bg-category-orange1 > span {
            font-size: 10px !important;
            line-height: 10px !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar > .scrollFrame > .leftMenu
            .freematch.w_sport_left_menu > ul > li > a.bg-category-orange1 > small {
            font-size: 9px !important;
        }
    }

    @media screen and (max-width: 980px) {
        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content
            #main-mobile-links.mobilelink > a > i {
            display: inline-flex !important;
            box-sizing: border-box !important;
            width: 28px !important;
            min-width: 28px !important;
            height: 28px !important;
            min-height: 28px !important;
            flex: 0 0 28px !important;
            align-items: center !important;
            justify-content: center !important;
            background: var(--signal-part-medallion) center / contain no-repeat !important;
            color: var(--signal-yellow-hot, #ffd316) !important;
            font-size: 18px !important;
            line-height: 1 !important;
            filter: none !important;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content
            #main-mobile-mosaic.mobile-main-mosaic > .mobile-main-mosaic__tile > i {
            display: inline-flex !important;
            box-sizing: border-box !important;
            width: 36px !important;
            min-width: 36px !important;
            height: 36px !important;
            min-height: 36px !important;
            align-items: center !important;
            justify-content: center !important;
            background: var(--signal-part-medallion) center / contain no-repeat !important;
            color: var(--signal-yellow-hot, #ffd316) !important;
            font-size: 21px !important;
            line-height: 1 !important;
            filter: none !important;
        }
    }

    @media screen and (max-width: 520px) {
        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content
            #main-mobile-mosaic.mobile-main-mosaic > .mobile-main-mosaic__tile > i {
            width: 32px !important;
            min-width: 32px !important;
            height: 32px !important;
            min-height: 32px !important;
            font-size: 19px !important;
        }
    }
}

/* ==================================================================
 * 상단 보드 메뉴바(ul.submenu) — 메뉴 개수에 따라 크기가 따라오게
 *
 * 이 메뉴들(쿠폰·룰렛·포인트·쪽지·배팅내역·충전·환전·경기결과·이벤트·
 * 고객센터·공지사항·정보변경)은 어드민 설정으로 추가/제거되는 구조다.
 * 그런데 지금은 개수와 무관하게 항상 같은 크기였다.
 *
 * 실측(1600px, 12개 기준)
 *   .userm_wrap 은 3열 그리드이고 3열이 minmax(0, 1fr) → 894px 고정.
 *   ul.submenu 는 width:100% 라 그 894px 를 늘 다 채운다.
 *   ul 자체가 금속 바(배경 #aaa9a3 + 프레임)라 폭이 곧 눈에 보이는 크기다.
 *   → 메뉴가 적으면 오른쪽이 텅 빈 금속 바가 남고,
 *     19개쯤부터는 overflow-x 로 가로 스크롤이 생겨 메뉴가 잘린다.
 *
 * 고치는 방향
 *   1) 3열을 max-content 로 바꿔 바 폭이 메뉴 내용만큼만 잡히게 한다.
 *      남는 폭은 2열(한줄 공지)이 흡수한다.
 *   2) 개수가 많아 폭이 모자라면 스크롤 대신 항목 밀도를 단계적으로 줄인다.
 *      개수 판정은 수량 쿼리(:nth-last-child(n+N):first-child ~ li)로 한다.
 *      CSS 만으로 자식 개수를 세는 표준 기법이라 PHP/JS 수정이 필요 없다.
 *
 * ⚠️ @layer 필수. 20-shell-v2 와 100-artwork-second-polish 계열이 모두
 *    @layer lion2-signal-shell 안에서 !important 로 잡고 있다.
 *    특히 artwork 파일은 99b 보다 나중에 로드되므로 소스 순서로는 못 이긴다.
 *    .lion-skin 을 한 번 더 반복해 특이도로 이긴다.
 * ================================================================== */
@layer lion2-signal-shell {
    @media screen and (min-width: 981px) {
        body.lion2-skin.lion-skin.lion-skin .top_wrap .userm_wrap {
            grid-template-columns:
                clamp(176px, 14.35vw, 240px)
                minmax(clamp(220px, 29vw, 500px), 1fr)
                minmax(0, min(50vw, 790px)) !important;
        }

        body.lion2-skin.lion-skin.lion-skin[data-lion-page] .top_wrap .userm_wrap ul.submenu {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }

        body.lion2-skin.lion-skin.lion-skin .top_wrap .scrollNotice-copy {
            font-size: clamp(13px, .78vw, 14px) !important;
        }

        body.lion2-skin.lion-skin.lion-skin .top_wrap .userm_wrap ul.submenu :is(a, button) {
            font-size: clamp(13px, .78vw, 14px) !important;
        }

        /* 15개 이상 — 좌우 여백과 글자를 한 단계 줄인다 */
        body.lion2-skin.lion-skin.lion-skin .top_wrap .userm_wrap ul.submenu > li:nth-last-child(n + 15):first-child :is(a, button),
        body.lion2-skin.lion-skin.lion-skin .top_wrap .userm_wrap ul.submenu > li:nth-last-child(n + 15):first-child ~ li :is(a, button) {
            padding: 0 clamp(4px, .34vw, 8px) !important;
            font-size: clamp(11px, .6vw, 12px) !important;
        }

        /* 18개 이상 — 한 단계 더. 아이콘도 같이 줄인다 */
        body.lion2-skin.lion-skin.lion-skin .top_wrap .userm_wrap ul.submenu > li:nth-last-child(n + 18):first-child :is(a, button),
        body.lion2-skin.lion-skin.lion-skin .top_wrap .userm_wrap ul.submenu > li:nth-last-child(n + 18):first-child ~ li :is(a, button) {
            padding: 0 clamp(3px, .26vw, 6px) !important;
            font-size: clamp(10.5px, .54vw, 11.5px) !important;
        }

        /* 21개 이상 — 마지막 단계. 바 자체의 좌우 여백까지 줄인다.
         * (메뉴 앞 아이콘은 이 스킨에서 이미 display:none 이라
         *  접을 게 없다 — brutalist-signal-v2 L383)
         * 글자를 더 줄이면 읽히지 않으므로 여기서 멈추고,
         * 이보다 많아지면 기존대로 가로 스크롤로 넘어간다. */
        body.lion2-skin.lion-skin.lion-skin .top_wrap .userm_wrap ul.submenu > li:nth-last-child(n + 21):first-child :is(a, button),
        body.lion2-skin.lion-skin.lion-skin .top_wrap .userm_wrap ul.submenu > li:nth-last-child(n + 21):first-child ~ li :is(a, button) {
            padding: 0 clamp(2px, .2vw, 5px) !important;
            font-size: clamp(10px, .5vw, 11px) !important;
            letter-spacing: -.02em !important;
        }

        body.lion2-skin.lion-skin.lion-skin[data-lion-page] .top_wrap .userm_wrap ul.submenu:has(> li:nth-last-child(n + 21):first-child) {
            padding: 0 2px !important;
        }
    }
}

@layer lion2-signal-shell {
    /* 좁은 데스크톱(981~1200px)에서는 개수와 무관하게 한 단계 조인다.
     * 이 구간은 3열에 남는 폭 자체가 566px 남짓이라 기본 밀도로는
     * 12개만 되어도 가로 스크롤이 생긴다(내 변경 이전에도 그랬다). */
    @media screen and (min-width: 981px) and (max-width: 1200px) {
        body.lion2-skin.lion-skin.lion-skin .top_wrap .userm_wrap ul.submenu :is(a, button) {
            padding: 0 6px !important;
            font-size: 12px !important;
            letter-spacing: -.02em !important;
        }

        body.lion2-skin.lion-skin.lion-skin[data-lion-page] .top_wrap .userm_wrap ul.submenu {
            padding: 0 3px !important;
        }
    }
}

@layer lion2-signal-shell {
    @media screen and (min-width: 981px) {
        /* 21개 이상이면 한줄 공지 칸의 최소폭을 낮춰 메뉴바에 자리를 더 준다.
         * 어드민에서 켤 수 있는 보드 메뉴 정의는 26종이라 실제로 도달 가능한
         * 구성이고, 이걸 안 하면 1280px 에서 26개일 때 가로 스크롤이 남는다.
         * 공지는 마퀴로 흐르므로 폭이 줄어도 내용이 잘리지 않는다. */
        body.lion2-skin.lion-skin.lion-skin .top_wrap
            .userm_wrap:has(ul.submenu > li:nth-last-child(n + 21):first-child) {
            grid-template-columns:
                clamp(176px, 17vw, 292px)
                minmax(clamp(140px, 12vw, 440px), 1fr)
                minmax(0, max-content) !important;
        }
    }
}

/* ==================================================================
 * 헤더와 좌우 레일 경계의 "잘린 선"
 *
 * 실측(1600px)
 *   .top_wrap : 0~138px, position:fixed, z-index 120
 *   좌우 레일 : 91~1000px, position:fixed, z-index 105
 *   헤더 배경 : background-size: 100% var(--lion-main-art-height) = 91.4px
 *
 * 원래 brutalist-signal-v2 L234 는 background-size: 100% 170px + 불투명
 * 배경색이라 헤더 박스 전체가 아트로 채워졌고, 그 바닥에 붙은
 * border-bottom: 2px solid #060707 (L239) 이 아트의 끝선과 일치했다.
 * 그런데 뒤의 L5217 이 background-color 를 transparent 로 바꾸고
 * background-size 를 91.4px 로 줄이면서, 아트는 91px 에서 끝나는데
 * 테두리와 새로 붙은 box-shadow(0 5px 14px)는 여전히 박스 바닥 138px 에
 * 그려지게 됐다.
 *
 * 91~136px 구간은 배경이 투명해 레일이 그대로 비치는데, 그 위로
 * z-index 120 짜리 2px 검정선과 드롭섀도가 화면을 가로지른다.
 * 그래서 회원정보 바("1레벨 b015님")와 좌측 충전/환전 버튼 한가운데를
 * 잘라 놓은 것처럼 보인다. 패널 경계가 아니라 콘텐츠 한복판을 지나가서
 * 더 어색하다.
 *
 * 헤더 아트는 이미 자기 바닥 마감을 갖고 있으므로 이 선과 그림자를 뺀다.
 * 중앙 내비 바(.navdiv)는 자기 프레임 비트맵이 따로 있어 영향이 없다.
 * ================================================================== */
@layer lion2-signal-shell {
    @media screen and (min-width: 981px) {
        body.lion2-skin.lion-skin.lion-skin .top_wrap {
            border-bottom: 0 !important;
            box-shadow: none !important;
        }
    }
}

/* ==================================================================
 * 밍고 게임 썸네일 채도 — 다른 게임 목록과 동일하게
 *
 * 100-artwork-second-polish 계열은 게임 목록 썸네일 전부
 * (#provider_list, #favorite_list, #mini_game_list, #lotus_game_list,
 *  #tokengame_list, #mingo_list)에 filter: none 을 준다.
 * 그런데 그 뒤에 #mingo_list 만 따로 덮어쓰는 규칙이 하나 더 있었다.
 *   평소  grayscale(.58) sepia(.12) saturate(.62) contrast(1.16) brightness(.78)
 *   hover grayscale(.34) sepia(.08) saturate(.76) contrast(1.18) brightness(.9)
 * 그래서 밍고 카드만 회색빛으로 눌리고 어두워져, /minigame 등 다른 목록의
 * 선명한 썸네일과 나란히 놓으면 혼자 탁해 보였다.
 * 밍고 원본은 보라/자홍/적색이 강한 이미지라 손실이 특히 컸다.
 *
 * 다른 목록과 같은 filter: none 으로 되돌린다.
 * ⚠️ 이 규칙은 artwork 파일의 @layer 블록(1350행) 앞에 있는 무레이어
 *    !important 다. 무레이어끼리는 나중 파일이 이기는데 artwork 는 99b 보다
 *    뒤에 로드되므로, 레이어 안에 넣어 !important 우선순위로 이긴다.
 * ================================================================== */
@layer lion2-signal-shell {
    body.lion2-skin.lion-skin #ajax-content#ajax-content #mingo_list
        .live-game-cont > .el-row > img:first-child:not(.live-play),
    body.lion2-skin.lion-skin #ajax-content#ajax-content #mingo_list
        .live-game-cont:is(:hover, :focus-within) > .el-row > img:first-child:not(.live-play) {
        filter: none !important;
    }
}

/* --------------------------------------------------------------------------
 * V2-P0-04 · grouped rail racks.
 *
 * The reference uses one engineered bay around each logical instrument group.
 * Earlier layers repeated the generic heavy frame on every child card. These
 * route-neutral rack parts move that material hierarchy to the group parent;
 * child controls retain only a thin seam. Compact drawers keep their existing
 * outer chassis and deliberately suppress nested rack frames.
 * ----------------------------------------------------------------------- */

/* Cache-safe ownership mirrors the canonical registry in 35-image-parts.css.
 * The final immutable layer can therefore resolve the new parts even when a
 * client temporarily retains an older mutable registry response. */
body.lion2-skin {
    --signal-part-rail-rack-left: url('/skin/lion2_main/images/signal/parts-v6/rail/signal-part-rail-rack-left-9s-v1.webp');
    --signal-part-rail-rack-right: url('/skin/lion2_main/images/signal/parts-v6/rail/signal-part-rail-rack-right-9s-v1.webp');
    --signal-slice-rail-rack: 72;
}

@layer lion2-signal-shell {
    @media screen and (min-width: 1366px) {
        body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu > .menu,
        body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu > .sports-left-search,
        body.lion2-skin.lion-skin #sidebar#sidebar
            .leftMenu > .freematch.w_sport_left_menu {
            box-sizing: border-box !important;
            border: 6px solid transparent !important;
            border-image-source: var(--signal-part-rail-rack-left) !important;
            border-image-slice: var(--signal-slice-rail-rack) fill !important;
            border-image-width: 6px !important;
            border-image-outset: 0 !important;
            border-image-repeat: stretch !important;
            background-color: #090c0d !important;
            box-shadow:
                inset 0 0 16px rgb(0 0 0 / 42%),
                0 5px 12px rgb(0 0 0 / 48%) !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu > .menu {
            gap: 2px !important;
            padding: 2px !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu > .sports-left-search {
            gap: 4px !important;
            padding: 5px !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar
            .leftMenu > .freematch.w_sport_left_menu {
            padding: 2px !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar
            .leftMenu > .freematch.w_sport_left_menu > h4 {
            border: 0 !important;
            border-bottom: 3px solid var(--signal-yellow-hot, #ffd316) !important;
            border-image: none !important;
        }
    }

    @media screen and (min-width: 1238px) {
        body.lion2-skin.lion-skin #sidebar-right#sidebar-right
            .rightMenu > :is(.login_box, .lion-account-console),
        body.lion2-skin.lion-skin #sidebar-right#sidebar-right
            .rightMenu > :is(.lion-main-betslip, .lion-betslip-panel),
        body.lion2-skin.lion-skin #sidebar-right#sidebar-right .rightMenu > .r_banner {
            box-sizing: border-box !important;
            border: 6px solid transparent !important;
            border-image-source: var(--signal-part-rail-rack-right) !important;
            border-image-slice: var(--signal-slice-rail-rack) fill !important;
            border-image-width: 6px !important;
            border-image-outset: 0 !important;
            border-image-repeat: stretch !important;
            background-color: #090c0d !important;
            box-shadow:
                inset 0 0 16px rgb(0 0 0 / 42%),
                0 5px 12px rgb(0 0 0 / 48%) !important;
        }

        body.lion2-skin.lion-skin #sidebar-right#sidebar-right .rightMenu > .r_banner {
            gap: 5px !important;
            padding: 5px !important;
        }

        body.lion2-skin.lion-skin #sidebar-right#sidebar-right .rightMenu > .r_banner
            > :is(a, .banner-no-link, .banner-copy) {
            border: 1px solid #686d6d !important;
            border-bottom: 3px solid #c9a000 !important;
            border-image: none !important;
            border-image-source: none !important;
        }
    }

    @media screen and (min-width: 1238px) and (max-width: 1499px) {
        body.lion2-skin.lion-skin #sidebar-right#sidebar-right
            .rightMenu > .lion-account-console .lion-account-balance {
            gap: 4px !important;
            padding-right: 6px !important;
            padding-left: 6px !important;
        }
    }

    @media screen and (min-width: 1366px) {
        body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu > .menu {
            padding: 0 !important;
            border-width: 0 !important;
            border-image-width: 6px !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu > .menu > a {
            padding-right: 0 !important;
            padding-left: 0 !important;
            font-size: 11.5px !important;
            letter-spacing: -.04em !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu > .menu
            > a[data-menu-id='left_customer'] {
            padding-right: 6px !important;
            padding-left: 6px !important;
            overflow-wrap: anywhere !important;
            line-height: 1.05 !important;
            text-overflow: clip !important;
            white-space: normal !important;
            word-break: break-all !important;
        }
    }

    @media screen and (min-width: 1366px) and (max-width: 1440px) {
        body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu > .menu
            > a[data-menu-id='left_customer'] > i {
            display: none !important;
        }
    }

    @media screen and (max-width: 1237px) {
        body.lion2-skin.lion-skin #sidebar-right#sidebar-right
            .rightMenu > :is(.login_box, .lion-account-console),
        body.lion2-skin.lion-skin #sidebar-right#sidebar-right
            .rightMenu > :is(.lion-main-betslip, .lion-betslip-panel),
        body.lion2-skin.lion-skin #sidebar-right#sidebar-right .rightMenu > .r_banner,
        body.lion2-skin.lion-skin #sidebar-right#sidebar-right .rightMenu > .r_banner
            > :is(a, .banner-no-link, .banner-copy) {
            border-image: none !important;
            border-image-source: none !important;
        }

        body.lion2-skin.lion-skin #sidebar-right#sidebar-right
            .rightMenu > :is(.login_box, .lion-account-console),
        body.lion2-skin.lion-skin #sidebar-right#sidebar-right
            .rightMenu > :is(.lion-main-betslip, .lion-betslip-panel) {
            border: 1px solid #4d5252 !important;
            background-color: #0b0e0f !important;
        }

        body.lion2-skin.lion-skin #sidebar-right#sidebar-right .rightMenu > .r_banner {
            gap: 6px !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        body.lion2-skin.lion-skin #sidebar-right#sidebar-right .rightMenu > .r_banner
            > :is(a, .banner-no-link, .banner-copy) {
            border: 1px solid #686d6d !important;
            border-bottom: 3px solid #c9a000 !important;
        }
    }

    @media screen and (max-width: 980px) {
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu > :is(.menu, .sports-left-search, .freematch.w_sport_left_menu),
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu > .freematch.w_sport_left_menu > h4 {
            border-image: none !important;
            border-image-source: none !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu > :is(.menu, .sports-left-search, .freematch.w_sport_left_menu) {
            border: 1px solid #4d5252 !important;
            background-color: #0b0e0f !important;
            box-shadow: inset 0 0 14px rgb(0 0 0 / 40%) !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu > .freematch.w_sport_left_menu > h4 {
            border: 0 !important;
            border-bottom: 3px solid var(--signal-yellow-hot, #ffd316) !important;
        }
    }
}

/* --------------------------------------------------------------------------
 * V2-P1-01 · home hero instrument bay hierarchy.
 *
 * Keep the five admin-owned campaign slides and their copy/crop behaviour,
 * while giving the decorative six-channel instrument bay enough width and
 * type scale to read as an installed scoreboard module. No score, wager or
 * service data is introduced here: the panel remains an aria-hidden taxonomy
 * console owned by main.html.
 * ----------------------------------------------------------------------- */
@layer lion2-signal-shell {
    @media screen and (min-width: 981px) {
        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .mpslide.has-admin-slides .swiper-container {
            width: 70% !important;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .mpslide.has-admin-slides .signal-hero-market-panel {
            width: calc(30% - 12px) !important;
            gap: clamp(3px, .28vw, 5px) !important;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .signal-hero-market-panel > span {
            position: relative !important;
            display: grid !important;
            grid-template-rows: auto auto !important;
            align-content: center !important;
            justify-items: start !important;
            min-width: 0 !important;
            padding: 2px 30px 2px clamp(39px, 2.85vw, 54px) !important;
            overflow: hidden !important;
            border-color: #807650 !important;
            background-image:
                linear-gradient(90deg, rgb(255 208 0 / 9%), transparent 46%),
                var(--signal-part-key-dark) !important;
            background-position: center, center !important;
            background-size: 100% 100%, 100% 100% !important;
            background-repeat: no-repeat, no-repeat !important;
            box-shadow:
                inset 0 0 0 1px rgb(232 226 200 / 10%),
                inset 0 -8px 14px rgb(0 0 0 / 38%) !important;
            text-align: left !important;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .signal-hero-market-panel > span > b {
            max-width: 100% !important;
            overflow: hidden !important;
            color: #f2f1e9 !important;
            font-family: var(--signal-font-display) !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            letter-spacing: .015em !important;
            text-overflow: ellipsis !important;
            text-shadow: 0 1px 2px #000 !important;
            white-space: nowrap !important;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .signal-hero-market-panel > span > small {
            max-width: 100% !important;
            overflow: hidden !important;
            color: #d7c46c !important;
            -webkit-text-fill-color: #d7c46c !important;
            font-size: 12px !important;
            line-height: 1 !important;
            letter-spacing: .07em !important;
            opacity: 1 !important;
            text-overflow: ellipsis !important;
            text-shadow: 0 1px 2px #000 !important;
            white-space: nowrap !important;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .signal-hero-market-panel > span::before {
            top: 50% !important;
            left: clamp(5px, .48vw, 9px) !important;
            width: clamp(24px, 2vw, 34px) !important;
            height: clamp(24px, 2vw, 34px) !important;
            filter: brightness(1.1) contrast(1.08) !important;
            transform: translateY(-50%) !important;
        }

        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .signal-hero-market-panel > span::after {
            position: absolute !important;
            top: 50% !important;
            right: 6px !important;
            display: grid !important;
            width: 18px !important;
            height: 18px !important;
            place-items: center !important;
            border: 1px solid #786715 !important;
            border-radius: 50% !important;
            background: radial-gradient(circle at 40% 38%, #ffe45e 0 10%, #d3aa00 11% 28%, #292300 64%) !important;
            box-shadow: 0 0 5px rgb(255 207 0 / 16%) !important;
            color: #090b0c !important;
            content: attr(data-code) !important;
            font-family: var(--signal-font-technical) !important;
            font-size: 8px !important;
            font-weight: 900 !important;
            line-height: 1 !important;
            transform: translateY(-50%) !important;
        }
    }

    @media screen and (min-width: 1672px) {
        body.lion2-skin.lion-skin[data-lion-page='home']
            #ajax-content#ajax-content#ajax-content#ajax-content
            .signal-hero-market-panel > span::after {
            width: 20px !important;
            height: 20px !important;
        }
    }
}

/* ------------------------------------------------------------------
 * V2-P1-05 · icon material unification, stage B
 *
 * 경기결과의 OS 의존 emoji를 이미 self-host하는 Flaticon glyph로 바꾼다.
 * icon은 장식으로 숨기고 기존 live label/data와 control semantics를 유지한다.
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin #ajax-content#ajax-content .w_result .signal-result-icon {
    display: inline-flex;
    box-sizing: border-box;
    width: 1em;
    min-width: 1em;
    height: 1em;
    flex: 0 0 1em;
    align-items: center;
    justify-content: center;
    font-style: normal;
    line-height: 1;
    vertical-align: -.08em;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_result
    .sport-tab > .signal-result-icon--tab {
    margin-inline-end: 4px;
    font-size: 14px;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_result
    .stat-item > .signal-result-icon--quick,
body.lion2-skin.lion-skin #ajax-content#ajax-content .w_result
    .incident-group .signal-result-icon--incident {
    margin-inline-end: 3px;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_result
    .stat-icon > .signal-result-icon--stat {
    font-size: 14px;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_result
    .signal-result-icon.fi-br-triangle-warning {
    color: var(--color-warning, #f7c948);
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_result
    .signal-result-icon.fi-br-cards-blank {
    color: var(--color-danger, #ef4444);
}

/* ------------------------------------------------------------------
 * V2-P1-05 · icon material unification, stage C
 *
 * 슬롯/즐겨찾기의 OS 의존 emoji를 self-hosted Flaticon role glyph로
 * 교체한다. 글리프는 장식으로 숨기고 기존 control label,
 * aria-pressed, 클릭·키보드 흐름은 그대로 둔다.
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin #ajax-content#ajax-content .signal-slot-icon {
    display: inline-flex;
    box-sizing: border-box;
    width: 1em;
    min-width: 1em;
    height: 1em;
    flex: 0 0 1em;
    align-items: center;
    justify-content: center;
    font-style: normal;
    line-height: 1;
    vertical-align: -.08em;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .search-icon.signal-slot-icon--search {
    color: #d8c966;
    font-size: 18px;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .guide-icon.signal-slot-icon--guide {
    color: #ffd400;
    font-size: 17px;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .signal-slot-icon--guide-heart {
    margin-inline: 2px;
    color: #d9c75d;
    font-size: 14px;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .heart-filled.signal-slot-icon--guide-heart {
    color: #ffd400;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .favorite-header
    .signal-slot-icon--heading {
    margin-inline-end: 4px;
    color: #ffd400;
    font-size: .84em;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .favorite-icon
    > .signal-slot-icon--favorite {
    color: #d7d9d5;
    font-size: 21px;
    pointer-events: none;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .favorite-icon.active
    > .signal-slot-icon--favorite {
    color: #ffd400;
    filter: drop-shadow(0 0 5px rgb(255 212 0 / 34%));
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .no-favorites-message .icon {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    place-items: center;
    border: 1px solid #70631d;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #34331f 0, #171a19 62%, #090b0c 100%);
    box-shadow: inset 0 0 0 4px rgb(0 0 0 / 34%);
    color: #d8c966;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .no-favorites-message
    .signal-slot-icon--empty {
    font-size: 30px;
}

/* ------------------------------------------------------------------
 * V2-P1-05 · icon material unification, stage D
 *
 * 충전 유형의 돌발/보너스 제외 badge에서 OS 의존 emoji를 이미
 * self-host하는 Flaticon role glyph로 교체한다. badge 문구와
 * normal/special/blocked 데이터 분기, reason tag는 그대로 유지한다.
 * ------------------------------------------------------------------ */
body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit
    .signal-finance-badge-icon {
    display: inline-flex;
    box-sizing: border-box;
    width: 1em;
    min-width: 1em;
    height: 1em;
    flex: 0 0 1em;
    align-items: center;
    justify-content: center;
    font-style: normal;
    line-height: 1;
    pointer-events: none;
    vertical-align: -.08em;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit
    .receive-type-card .special-badge,
body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit
    .receive-type-card .bonus-blocked-badge .badge-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Child material only: keep button/card/badge position, padding and sizing
 * owned by the established finance layout. */
body.lion2-skin.lion-skin #ajax-content#ajax-content :is(.w_deposit, .w_withdraw)
    .finance-action-button .finance-action-icon {
    border-color: rgb(190 196 194 / 38%);
    background: linear-gradient(180deg, #515759 0%, #2b3032 48%, #15191a 100%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 20%),
        inset 0 0 0 1px rgb(0 0 0 / 34%);
    color: var(--signal-wave2-steel-copy, #f0f0e9);
    text-shadow: 0 1px 0 rgb(0 0 0 / 72%);
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit :is(
    .receive-type-card .special-badge,
    .receive-type-card .bonus-blocked-badge .badge-text
) {
    background: linear-gradient(180deg, #555b5c 0%, #292e30 46%, #121617 100%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 20%),
        inset 0 0 0 1px rgb(192 198 195 / 28%),
        0 2px 6px rgb(0 0 0 / 46%);
    color: var(--signal-wave2-steel-copy, #f0f0e9);
    text-shadow: 0 1px 0 rgb(0 0 0 / 74%);
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit :is(
    .receive-type-card .bonus-blocked-badge .reason-tag,
    .bonus-badge-info .info-badge,
    .bonus-badge-info-inline .info-badge-small
) {
    border-left: 3px solid var(--signal-line, #474c4e);
    background: linear-gradient(180deg, #414748 0%, #222729 52%, #111516 100%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 16%),
        inset 0 0 0 1px rgb(174 181 178 / 26%);
    color: #e2e4df;
    text-shadow: 0 1px 0 rgb(0 0 0 / 76%);
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit
    .receive-type-card .bonus-blocked-badge .reason-tag {
    padding-left: 4px;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit
    .bonus-badge-info .info-badge {
    padding-left: 5px;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit
    .bonus-badge-info-inline .info-badge-small {
    padding-left: 3px;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit :is(
    .receive-type-card .bonus-blocked-badge .reason-보,
    .bonus-badge-info dt:nth-child(1) .info-badge,
    .bonus-badge-info-inline > span:nth-child(1) .info-badge-small
) {
    border-left-color: var(--signal-success, #72a66f);
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit :is(
    .receive-type-card .bonus-blocked-badge .reason-환,
    .bonus-badge-info dt:nth-child(2) .info-badge,
    .bonus-badge-info-inline > span:nth-child(2) .info-badge-small
) {
    border-left-color: #a86b64;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit :is(
    .receive-type-card .bonus-blocked-badge .reason-베,
    .bonus-badge-info dt:nth-child(3) .info-badge,
    .bonus-badge-info-inline > span:nth-child(3) .info-badge-small
) {
    border-left-color: var(--signal-info, #85a8b5);
}

@media screen and (width <= 980px) {
    body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit
        .receive-type-card .bonus-blocked-badge .reason-tag {
        padding-left: 3px;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit
        .bonus-badge-info .info-badge {
        padding-left: 3px;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit
        .bonus-badge-info-inline .info-badge-small {
        padding-left: 2px;
    }
}

/* ------------------------------------------------------------------
 * V2-P2-01A · mobile semantic controls and 44px target closeout
 *
 * Guest left-menu commands are native buttons while authenticated routes
 * remain anchors. Reassemble the same key plates in the final named layer so
 * button defaults cannot change the approved drawer geometry or artwork.
 * ------------------------------------------------------------------ */
@layer lion2-signal-shell {
    body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .menu
        > button[data-login-required='1'] {
        display: flex !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 4px !important;
        border: 1px solid #4d5252 !important;
        border-radius: 0 !important;
        appearance: none !important;
        background:
            var(--signal-part-key-dark) center / 100% 100% no-repeat,
            #15191a !important;
        color: #e7e9e5 !important;
        font: inherit !important;
        font-size: clamp(12px, .68vw, 14px) !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        text-shadow: 0 1px 2px #000 !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    /* Casino/slot duplicate menu rows stay hidden; the approved promo plates remain. */
    body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .menu
        > button.left-menu-image-link[data-login-required='1'] {
        display: none !important;
    }

    body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .menu
        > button[data-login-required='1']:is(:first-child, .ybg) {
        border-color: #806800 !important;
        background:
            var(--signal-part-key-yellow) center / 100% 100% no-repeat,
            #d8ac00 !important;
        color: #090b0c !important;
        -webkit-text-fill-color: #090b0c !important;
        text-shadow: 0 1px rgb(255 255 255 / 34%) !important;
    }

    body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .menu
        > button[data-login-required='1']:not(.ybg):is(:hover, :focus-visible) {
        border-color: #ffd400 !important;
        color: #ffd400 !important;
        -webkit-text-fill-color: #ffd400 !important;
        outline: 2px solid rgb(255 212 0 / 54%) !important;
        outline-offset: -3px !important;
        text-shadow: none !important;
    }

    body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .menu
        > button[data-login-required='1'] i {
        color: var(--signal-wave2-yellow, #ffd316) !important;
    }

    body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .menu
        > button[data-login-required='1']:is(:first-child, .ybg) i {
        color: #090b0c !important;
    }

    body.lion2-skin.lion-skin #sidebar#sidebar .leftMenu .lion-left-promos
        > button.lion-left-promo[data-login-required='1'] {
        position: relative !important;
        display: flex !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: 60px !important;
        margin: 0 !important;
        padding: 5px !important;
        overflow: hidden !important;
        appearance: none !important;
        font: inherit !important;
        text-align: inherit !important;
        cursor: pointer !important;
    }

    @media screen and (width <= 980px) {
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-login-required='1'] {
            min-height: 48px !important;
            padding: 4px 3px !important;
            font-family: 'ChosunGu', 'Malgun Gothic', sans-serif !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            line-height: 1.4 !important;
            order: 40;
        }

        /* Keep the approved mobile sequence formerly assigned to anchor tags. */
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_deposit'] { order: 1; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_withdraw'] { order: 2; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_customer'] { order: 3; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_overseas'] { order: 4; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_cross'] { order: 5; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_special'] { order: 6; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_realtime'] { order: 7; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_inplay'] { order: 8; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_casino'] { order: 9; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_slot'] { order: 10; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_tournament'] { order: 11; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_ranking'] { order: 12; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_event'] { order: 13; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_notice'] { order: 14; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_coupon'] { order: 15; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_attendance'] { order: 16; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_result'] { order: 17; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_bet_history'] { order: 18; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_point'] { order: 19; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_roulette'] { order: 20; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_message'] { order: 21; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_minigame'] { order: 22; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_lotus'] { order: 23; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_token'] { order: 24; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_bet365'] { order: 25; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_rolling_king'] { order: 26; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_hall_of_fame'] { order: 27; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_esport'] { order: 28; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_holdem'] { order: 29; }
        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .leftMenu .menu > button[data-menu-id='left_quiz_event'] { order: 30; }

        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .sports-left-search__form {
            min-height: 44px !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .sports-left-search__input {
            min-height: 44px !important;
            height: 44px !important;
        }

        body.lion2-skin.lion-skin #sidebar#sidebar.left_content.active
            .sports-left-search__button {
            width: 44px !important;
            min-width: 44px !important;
            min-height: 44px !important;
            height: 44px !important;
        }

        body.lion2-skin.lion-skin #sidebar-right#sidebar-right.right_content.active
            .lion-account-balance .slip-panel-toggle {
            min-width: 44px !important;
            width: auto !important;
            min-height: 44px !important;
            height: 44px !important;
            line-height: 42px !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content .w_deposit
            :is(#deposit_amount, #deposit_del_btn) {
            min-height: 44px !important;
            height: auto !important;
        }

        body.lion2-skin.lion-skin :is(#login, #join, #join2).loginContainer
            .wrap2 .box :is(input, select) {
            min-height: 45px !important;
            height: 45px !important;
        }
    }
}

/* ------------------------------------------------------------------
 * V2-P2-01 · mobile sportsbook material cascade closeout, unit B
 *
 * lion-theme.css still reintroduced its old savanna/brown palette below
 * 980px after the generic mobile refresh had already moved these routes to
 * Signal. Keep every existing rail/grid dimension and betting handler, but
 * make the final named layer own the visible cstype, search, extra-odds,
 * league and market-row materials. The artwork registry is reused only for
 * the text-free dark key plate; no route image or data markup is replaced.
 *
 * Unit A overlap: its isolated candidate also raises `.cstype > a` to 44px.
 * Unit B owns that one declaration here because it is inseparable from the
 * cstype plate; remove the duplicate Unit A declaration during integration.
 * ------------------------------------------------------------------ */
@layer lion2-signal-shell {
    @media screen and (max-width: 980px) {
        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) {
            --cross-bg: #090c0d;
            --cross-panel: #111516;
            --cross-row: #171b1c;
            --cross-row-alt: #0d1011;
            --cross-line: rgb(174 181 178 / 34%);
            --cross-line-strong: rgb(216 221 218 / 62%);
            --cross-text: var(--signal-copy, #f2f0e9);
            --cross-muted: var(--signal-copy-soft, #a9aaa5);
            --cross-blue: var(--signal-yellow-hot, #ffd316);
            --cross-teal: #cdbb48;
            --cross-gold: var(--signal-yellow-hot, #ffd316);
            --sports-mobile-line: rgb(174 181 178 / 34%);
            --sports-mobile-line-strong: rgb(216 221 218 / 62%);
            --sports-mobile-panel: #101415;
            background-color: #090c0d !important;
            background-image: none !important;
            color: var(--signal-copy-soft, #a9aaa5) !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) :is(.cstype, .team_search, .sports-filter-search, .extraOdds) {
            border-color: rgb(174 181 178 / 38%) !important;
            background-color: #101415 !important;
            background-image:
                linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 46%),
                linear-gradient(90deg, #151a1b, #0b0f10) !important;
            box-shadow:
                inset 0 1px 0 rgb(255 255 255 / 7%),
                inset 0 0 0 1px rgb(0 0 0 / 44%) !important;
            color: var(--signal-copy-soft, #a9aaa5) !important;
            text-shadow: none !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .cstype > a {
            min-height: 44px !important;
            border-color: rgb(174 181 178 / 46%) !important;
            background-color: #202526 !important;
            background-image: var(--signal-part-key-dark) !important;
            background-position: center !important;
            background-size: 100% 100% !important;
            color: var(--signal-copy, #f2f0e9) !important;
            -webkit-text-fill-color: var(--signal-copy, #f2f0e9) !important;
            box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%) !important;
            text-shadow: 0 1px 1px #000 !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .cstype > a:is(.active, .on, [aria-selected='true']) {
            border-color: var(--signal-yellow-hot, #ffd316) !important;
            background-color: #252a2b !important;
            background-image:
                linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(0 0 0 / 18%)),
                var(--signal-part-key-dark) !important;
            color: var(--signal-yellow-hot, #ffd316) !important;
            -webkit-text-fill-color: var(--signal-yellow-hot, #ffd316) !important;
            box-shadow:
                inset 0 -3px var(--signal-yellow-hot, #ffd316),
                inset 0 1px 0 rgb(255 255 255 / 13%) !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .spnotice {
            border-color: rgb(174 181 178 / 34%) !important;
            border-left-color: var(--signal-yellow-hot, #ffd316) !important;
            background-color: #111516 !important;
            background-image: linear-gradient(90deg, rgb(255 211 22 / 7%), transparent 42%) !important;
            color: #d9dcd7 !important;
            -webkit-text-fill-color: #d9dcd7 !important;
            box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%) !important;
            text-shadow: none !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) :is(.team_search, .sports-filter-search) input {
            border-color: rgb(174 181 178 / 46%) !important;
            background-color: #0b0f10 !important;
            background-image: linear-gradient(180deg, #080b0c, #121718) !important;
            color: var(--signal-copy, #f2f0e9) !important;
            -webkit-text-fill-color: var(--signal-copy, #f2f0e9) !important;
            box-shadow: inset 0 2px 5px rgb(0 0 0 / 58%) !important;
            caret-color: var(--signal-yellow-hot, #ffd316) !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) :is(.team_search, .sports-filter-search) input::placeholder {
            color: #9fa5a2 !important;
            -webkit-text-fill-color: #9fa5a2 !important;
            opacity: 1 !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) :is(
            .team_search button,
            .sports-filter-search button,
            .sports-filter-submit,
            .sports-filter-rules
        ) {
            border-color: #8d812d !important;
            background-color: #202526 !important;
            background-image: var(--signal-part-key-dark) !important;
            background-position: center !important;
            background-size: 100% 100% !important;
            color: var(--signal-yellow-hot, #ffd316) !important;
            -webkit-text-fill-color: var(--signal-yellow-hot, #ffd316) !important;
            box-shadow:
                inset 0 1px 0 rgb(255 255 255 / 12%),
                inset 0 -2px 0 rgb(255 211 22 / 32%) !important;
            text-shadow: 0 1px 1px #000 !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) :is(
            .team_search button,
            .sports-filter-search button,
            .sports-filter-submit,
            .sports-filter-rules
        ):is(:hover, :focus-visible) {
            border-color: var(--signal-yellow-hot, #ffd316) !important;
            background-color: #323839 !important;
            color: #fff4aa !important;
            -webkit-text-fill-color: #fff4aa !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .extraOdds :is(.info, .betBox) {
            border-color: rgb(174 181 178 / 28%) !important;
            background-color: #111617 !important;
            background-image: none !important;
            color: #d7dbd6 !important;
            -webkit-text-fill-color: #d7dbd6 !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) :is(
            #cross_list,
            #special_list,
            #realtime_list,
            #europe_list,
            #inplay_list,
            .league-block,
            .game_pan
        ) {
            border-color: rgb(174 181 178 / 34%) !important;
            background-color: #090d0e !important;
            background-image: none !important;
            box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%) !important;
            color: var(--signal-copy-soft, #a9aaa5) !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) :is(.sports-list .league_info, .game_pan .teaminfo) {
            border-color: rgb(174 181 178 / 42%) !important;
            background-color: #272c2d !important;
            background-image:
                linear-gradient(90deg, rgb(255 211 22 / 7%), transparent 34%),
                linear-gradient(180deg, #3b4142, #202526) !important;
            color: var(--signal-copy, #f2f0e9) !important;
            -webkit-text-fill-color: var(--signal-copy, #f2f0e9) !important;
            box-shadow:
                inset 0 1px 0 rgb(255 255 255 / 13%),
                inset 4px 0 var(--signal-yellow-hot, #ffd316) !important;
            text-shadow: 0 1px 1px #000 !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) :is(.sports-list .league_info, .game_pan .teaminfo) :is(
            .float-left,
            .countryname,
            .teamname,
            .teamname > div
        ) {
            color: var(--signal-copy, #f2f0e9) !important;
            -webkit-text-fill-color: var(--signal-copy, #f2f0e9) !important;
            text-shadow: none !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) :is(.sports-list .league_info, .game_pan .teaminfo) :is(i, .fav-toggle) {
            color: var(--signal-yellow-hot, #ffd316) !important;
            -webkit-text-fill-color: var(--signal-yellow-hot, #ffd316) !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .sports-list .game_list :where(
            ul > li,
            .cross-time-row > *,
            .multi-way-wrapper > *,
            ul.multi-way-odds li.multi-odd
        ) {
            border-color: rgb(174 181 178 / 28%) !important;
            background-color: #151a1b !important;
            background-image: linear-gradient(180deg, #202526, #111516) !important;
            color: #dce0db !important;
            -webkit-text-fill-color: #dce0db !important;
            box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%) !important;
            text-shadow: none !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .sports-list .game_list ul:is(:hover, :focus-within) > li {
            background-color: #1d2223 !important;
            background-image: linear-gradient(180deg, #2b3031, #171b1c) !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .sports-list .game_list :is(
            li.home-t,
            li.away,
            li.multi-odd,
            .odd_info
        ):is(:hover, :focus-visible) {
            border-color: #8d812d !important;
            background-color: #252a2b !important;
            background-image: linear-gradient(180deg, #33393a, #1d2223) !important;
            box-shadow:
                inset 0 1px 0 rgb(255 255 255 / 9%),
                inset 0 -2px 0 rgb(255 211 22 / 24%) !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .sports-list .game_list :is(
            li.active,
            li.choice,
            li[aria-pressed='true'],
            .odd_info.active
        ) {
            border-color: var(--signal-yellow-hot, #ffd316) !important;
            background-color: #292d25 !important;
            background-image: linear-gradient(180deg, #3b3d2c, #1c211d) !important;
            color: var(--signal-copy, #f2f0e9) !important;
            -webkit-text-fill-color: var(--signal-copy, #f2f0e9) !important;
            box-shadow:
                inset 4px 0 var(--signal-yellow-hot, #ffd316),
                inset 0 1px 0 rgb(255 255 255 / 10%) !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .sports-list .game_list :is(.home_nm, .away_nm, .bet_name) {
            color: var(--signal-copy, #f2f0e9) !important;
            -webkit-text-fill-color: var(--signal-copy, #f2f0e9) !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .sports-list .game_list :is(li, .odd_info):not(.odd-up):not(.odd-down) :is(
            .home_odd,
            .away_odd,
            .draw_odd,
            .odd_price
        ) {
            border-color: rgb(205 187 72 / 44%) !important;
            background-color: #0b0f10 !important;
            background-image: linear-gradient(180deg, #151a1b, #080b0c) !important;
            color: #f2d95c !important;
            -webkit-text-fill-color: #f2d95c !important;
            box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%) !important;
            text-shadow: 0 1px 1px #000 !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .sports-list .game_list :is(
            li.l_time,
            li.l_n_time,
            .cross-time-row .l_time,
            .cross-time-row .l_n_time,
            .multi-way-wrapper > .l_n_time
        ) {
            border-color: rgb(174 181 178 / 26%) !important;
            background-color: #111617 !important;
            background-image: linear-gradient(180deg, #202526, #101415) !important;
            color: #b9bfbc !important;
            -webkit-text-fill-color: #b9bfbc !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .sports-list .game_list :is(
            li.draw.btn-sports-vs,
            li.btn-sports-vs,
            .cross-time-row .cross-teams
        ) {
            border-color: rgb(174 181 178 / 30%) !important;
            background-color: #181d1e !important;
            background-image: linear-gradient(180deg, #292e2f, #15191a) !important;
            color: #cbd0cc !important;
            -webkit-text-fill-color: #cbd0cc !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .sports-list .game_list :is(
            li.status,
            .cross-time-row .status,
            .multi-way-wrapper > .status-empty
        ) {
            border-color: rgb(174 181 178 / 28%) !important;
            border-left-color: #8d812d !important;
            background-color: #202526 !important;
            background-image: linear-gradient(180deg, #303637, #1a1f20) !important;
            color: #e3d47b !important;
            -webkit-text-fill-color: #e3d47b !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) :is(.mobile_expbtn, .add_cnt, .open_odd, .game_baedang_info) {
            border-color: rgb(205 187 72 / 42%) !important;
            background-color: #171c1d !important;
            background-image: linear-gradient(180deg, #292f30, #141819) !important;
            color: #e6d772 !important;
            -webkit-text-fill-color: #e6d772 !important;
            box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%) !important;
            text-shadow: none !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) :is(
            .mobile_expbtn,
            .mobile_expbtn .open_odd,
            .game_baedang_info,
            .add_cnt,
            .open_odd
        ) {
            min-height: 44px !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) :is(
            .cstype > a,
            .sports-filter-submit,
            .sports-filter-rules,
            .game_list li.btn-sports,
            .game_list li.multi-odd,
            .mobile_expbtn,
            .open_odd,
            .add_cnt,
            .game_baedang_info
        ):focus-visible {
            outline: 2px solid var(--signal-yellow-hot, #ffd316) !important;
            outline-offset: -3px !important;
        }

        /* Populated counts already pass contrast and geometry. Own that paint
         * in Unit B, and remove only a truly empty decorative plate. */
        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .spo_jong > .sports-type > small:not(:empty) {
            background: #080b0c !important;
            color: #ffe45c !important;
            -webkit-text-fill-color: #ffe45c !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .spo_jong > .sports-type:is(.on, [aria-selected='true']) > small:not(:empty) {
            background: #080b0c !important;
            color: #fff2a8 !important;
            -webkit-text-fill-color: #fff2a8 !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content#ajax-content :is(
            .w_cross,
            .w_special,
            .w_realtime,
            .w_europe,
            .w_inplay
        ) .spo_jong > .sports-type > small:empty {
            display: none !important;
        }
    }
}

/* ------------------------------------------------------------------
 * Wave 4 Unit C · compact shell material bridge
 *
 * Geometry and DOM semantics remain owned by the established mobile shell.
 * This final-layer bridge only connects the approved, text-free Signal
 * gantry/key parts to compact chrome that still resolved to flat gradients.
 * ------------------------------------------------------------------ */
@layer lion2-signal-shell {
    @media screen and (max-width: 980px) {
        body.lion2-skin.lion-skin .top_wrap {
            background:
                linear-gradient(90deg, rgb(5 8 9 / 14%), transparent 24% 76%, rgb(5 8 9 / 14%))
                    center / 100% 100% no-repeat,
                var(--signal-part-header-shell-gantry, var(--signal-part-header-shell))
                    center bottom / cover no-repeat,
                #0b0e0f !important;
        }

        body.lion2-skin.lion-skin .top_wrap
            :is(.m_menu_expand_btn, .m_menu_pc_btn) {
            background:
                #111516 var(--signal-part-key-dark) center / 100% 100% no-repeat !important;
            transition:
                border-color 120ms ease,
                color 120ms ease,
                box-shadow 120ms ease,
                filter 120ms ease !important;
        }

        body.lion2-skin.lion-skin .top_wrap
            :is(.m_menu_expand_btn, .m_menu_pc_btn):is(:hover, :focus-visible),
        body.lion2-skin.lion-skin .top_wrap
            :is(.m_menu_expand_btn, .m_menu_pc_btn)[aria-expanded='true'] {
            background:
                #d7ac00 var(--signal-part-key-yellow) center / 100% 100% no-repeat !important;
            color: #080a0b !important;
        }

        body.lion2-skin.lion-skin .top_wrap
            :is(.m_menu_expand_btn, .m_menu_pc_btn):is(:hover, :focus-visible, [aria-expanded='true'])
            > span,
        body.lion2-skin.lion-skin .top_wrap
            :is(.m_menu_expand_btn, .m_menu_pc_btn):is(:hover, :focus-visible, [aria-expanded='true'])
            > span::before {
            color: #080a0b !important;
        }

        body.lion2-skin.lion-skin .top_wrap
            :is(.m_menu_expand_btn, .m_menu_pc_btn):focus-visible {
            outline: 3px solid var(--signal-yellow-hot, #ffd316) !important;
            outline-offset: 0 !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content
            #betslip-icon.signal-betslip-launcher {
            grid-template-rows: 22px 18px !important;
            background:
                #111516 var(--signal-part-key-dark) center / 100% 100% no-repeat !important;
            transition:
                border-color 120ms ease,
                color 120ms ease,
                box-shadow 120ms ease,
                filter 120ms ease !important;
        }

        body.lion2-skin.lion-skin #ajax-content#ajax-content
            #betslip-icon.signal-betslip-launcher:focus-visible {
            outline: 3px solid var(--signal-yellow-hot, #ffd316) !important;
        }

        /* Keep the dynamic count in the launcher's second grid row. Earlier
         * absolute-position rules overlap the visible label on every route. */
        body.lion2-skin.lion-skin #ajax-content#ajax-content
            #betslip-icon.signal-betslip-launcher > #slip_cnt {
            position: static !important;
            grid-column: 2 !important;
            grid-row: 2 !important;
            justify-self: start !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            box-sizing: border-box !important;
            min-width: 24px !important;
            height: 18px !important;
            min-height: 18px !important;
            padding: 0 5px !important;
            line-height: 16px !important;
        }
    }

    @media screen and (max-width: 980px) and (prefers-reduced-motion: reduce) {
        body.lion2-skin.lion-skin .top_wrap
            :is(.m_menu_expand_btn, .m_menu_pc_btn),
        body.lion2-skin.lion-skin .top_wrap
            :is(.m_menu_expand_btn, .m_menu_pc_btn) > span,
        body.lion2-skin.lion-skin .top_wrap
            :is(.m_menu_expand_btn, .m_menu_pc_btn) > span::before,
        body.lion2-skin.lion-skin #ajax-content#ajax-content
            #betslip-icon.signal-betslip-launcher {
            transition: none !important;
        }
    }
}

/* ------------------------------------------------------------------
 * Admin sports catalog · registered color icon parity
 *
 * L_SPORT sport_image is the visual source of truth for every current
 * sports selector and label. Keep the existing Signal medallion geometry,
 * while preventing the small registered PNGs from stretching or blurring.
 * ------------------------------------------------------------------ */
@layer lion2-signal-shell {
    body.lion2-skin.lion-skin img.signal-admin-sport-image {
        box-sizing: border-box !important;
        object-fit: contain !important;
        object-position: center !important;
        image-rendering: auto !important;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content
        :is(.w_cross, .w_special, .w_realtime, .w_europe, .w_inplay)
        .spo_jong > .sports-type > img.signal-admin-sport-image {
        padding: 4px !important;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content .w_result
        .sport-tab > img.signal-result-icon--tab {
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        margin-inline-end: 5px !important;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content
        img.signal-live-sport-icon.signal-admin-sport-image,
    body.lion2-skin.lion-skin #mybetmodal#mybetmodal
        img.signal-live-sport-icon.signal-admin-sport-image {
        padding: 1px !important;
    }
}