/*
 * Lion2 Signal system — foundations.
 *
 * New production rules live in small ordered modules after the historical
 * brutallist-signal compatibility layer.  Keep design tokens, typography,
 * focus and primitive controls in this file.
 */

body.lion2-skin {
    --signal-font-body: 'ChosunGu', 'Malgun Gothic', sans-serif;
    --signal-font-display: 'SEBANG_Gothic_Bold', 'ChosunGu', 'Malgun Gothic', sans-serif;
    --signal-font-numeric: Arial, 'Malgun Gothic', sans-serif;
    --signal-type-caption: 12px;
    --signal-type-body: 14px;
    --signal-type-body-mobile: 15px;
    --signal-type-label: 13px;
    --signal-type-title-sm: 18px;
    --signal-type-title-md: clamp(22px, 2vw, 30px);
    --signal-leading-body: 1.55;
    --signal-control-inline: 32px;
    --signal-control-utility: 36px;
    --signal-control-icon: 40px;
    --signal-control-primary: 46px;
    font-family: var(--signal-font-body) !important;
    font-size: var(--signal-type-body) !important;
    line-height: var(--signal-leading-body) !important;
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
}

body.lion2-skin #ajax-content :where(
    p,
    li,
    dd,
    dt,
    td,
    th,
    label,
    input,
    select,
    textarea,
    .board-detail-body,
    .notice_content,
    .event_content,
    .free_content,
    .customer_content,
    .memo-message-body
) {
    font-family: var(--signal-font-body);
    line-height: var(--signal-leading-body);
}

body.lion2-skin :where(
    h1,
    h2,
    h3,
    .page_ttl,
    .lion-page-title-copy,
    .section-title,
    .panel-title,
    .modal-title
) {
    font-family: var(--signal-font-display);
    letter-spacing: -.02em;
    line-height: 1.18;
    text-wrap: balance;
}

body.lion2-skin :where(
    [class*='money'],
    [class*='point'],
    [class*='amount'],
    [class*='price'],
    [class*='odds'],
    [class*='rate'],
    [class*='score'],
    [class*='time'],
    [id*='money'],
    [id*='point'],
    [id*='amount'],
    [id*='price'],
    [id*='odds'],
    [id*='score'],
    [id='todaynowtime']
) {
    font-family: var(--signal-font-numeric);
    font-variant-numeric: tabular-nums lining-nums;
}

body.lion2-skin #ajax-content :where(
    .board-detail-body,
    .notice_content,
    .event_content,
    .free_content,
    .customer_content,
    .memo-message-body,
    .rule_content,
    .terms-content
) {
    font-size: var(--signal-type-body);
    line-height: 1.7;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

body.lion2-skin :where(
    button,
    input[type='button'],
    input[type='submit'],
    [role='button'],
    .btn,
    [class*='-button']
) {
    min-height: var(--signal-control-utility);
    touch-action: manipulation;
}

body.lion2-skin :where(
    .btn_login,
    .betbtn,
    .submitBtn,
    .btn_submit,
    .btnRed,
    .finance-action-button,
    .myinfo-primary-button,
    .slip-submit-green,
    #deposit_proc,
    #withdraw_proc,
    #point_proc,
    #modal-login-button
) {
    min-height: var(--signal-control-primary);
    padding-block: 10px;
    padding-inline: 18px;
    font-family: var(--signal-font-display);
    font-size: var(--signal-type-label);
    line-height: 1.15;
}

body.lion2-skin :where(
    .modal_close,
    .close_login,
    .lion-rolling-modal__close,
    .lion-rules-modal__close,
    #chat-close-btn,
    #close_cart,
    #init_bettingprice,
    .slip-refresh-btn,
    .m_menu_expand_btn,
    .m_menu_pc_btn
) {
    display: inline-flex;
    width: var(--signal-control-icon);
    min-width: var(--signal-control-icon);
    height: var(--signal-control-icon);
    min-height: var(--signal-control-icon);
    align-items: center;
    justify-content: center;
    padding: 0;
}

body.lion2-skin :where(button, input, select, textarea, a, [role='button']):focus-visible {
    position: relative;
    z-index: 2;
    outline: 3px solid var(--signal-yellow-hot);
    outline-offset: 3px;
    scroll-margin: 12px;
}

body.lion2-skin :where(button, .btn, [role='button']):disabled,
body.lion2-skin :where(button, .btn, [role='button']).disabled,
body.lion2-skin :where([aria-disabled='true']) {
    color: #b8bab7;
    cursor: not-allowed;
    opacity: .66;
}

body.lion2-skin .sr-only,
body.lion2-skin .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (width <= 980px) {
    body.lion2-skin {
        --signal-control-inline: 44px;
        --signal-control-utility: 44px;
        --signal-control-icon: 44px;
        --signal-control-primary: 50px;
        font-size: var(--signal-type-body-mobile) !important;
    }

    body.lion2-skin :where(
        button,
        input[type='button'],
        input[type='submit'],
        [role='button'],
        .btn,
        [class*='-button']
    ) {
        min-height: 44px;
    }

    body.lion2-skin #ajax-content :where(
        .board-detail-body,
        .notice_content,
        .event_content,
        .free_content,
        .customer_content,
        .memo-message-body,
        .rule_content,
        .terms-content
    ) {
        font-size: var(--signal-type-body-mobile);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.lion2-skin,
    body.lion2-skin *,
    body.lion2-skin *::before,
    body.lion2-skin *::after {
        scroll-behavior: auto !important;
        transition-delay: 0s !important;
        transition-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    body.lion2-skin :where(button, input, select, textarea, a, [role='button']):focus-visible {
        outline-color: Highlight;
    }
}