/*
 * Lion2 Signal system — final responsive shell corrections.
 * This module closes viewport edges; route composition stays in 40-pages.css.
 */

@layer lion2-signal-shell {
    @media screen and (max-width: 980px) {
        body.lion2-skin {
            --signal-mobile-bar-height: clamp(50px, 13.85vw, 54px);
            --signal-mobile-safe-top: env(safe-area-inset-top, 0px);
            --signal-mobile-safe-right: env(safe-area-inset-right, 0px);
            --signal-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
            --signal-mobile-safe-left: env(safe-area-inset-left, 0px);
            --signal-mobile-header-height:
                calc(var(--signal-mobile-bar-height) + var(--signal-mobile-safe-top));
            --lion-mobile-header-height: var(--signal-mobile-header-height) !important;
            min-width: 0 !important;
            max-width: 100vw !important;
            overflow-x: clip !important;
            background-attachment: scroll !important;
        }

        body.lion2-skin .top_wrap {
            box-sizing: border-box !important;
            height: var(--signal-mobile-header-height) !important;
            min-height: var(--signal-mobile-header-height) !important;
            padding-top: var(--signal-mobile-safe-top) !important;
            overflow: hidden !important;
            border: 0 !important;
            border-bottom: 3px solid var(--signal-yellow) !important;
            background:
                linear-gradient(
                    90deg,
                    rgb(242 196 0 / 18%),
                    transparent 22% 78%,
                    rgb(242 196 0 / 18%)
                ),
                repeating-linear-gradient(
                    90deg,
                    transparent 0 23px,
                    rgb(255 255 255 / 3%) 23px 24px
                ),
                linear-gradient(180deg, #656968 0%, #292c2d 18%, #111415 72%, #070809 100%) !important;
            box-shadow:
                inset 0 1px rgb(255 255 255 / 32%),
                inset 0 -1px #050606,
                0 5px 14px rgb(0 0 0 / 62%) !important;
        }

        body.lion2-skin .top_wrap .userm_wrap {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-sizing: border-box !important;
            width: 100% !important;
            height: var(--signal-mobile-bar-height) !important;
            min-height: var(--signal-mobile-bar-height) !important;
            padding: 1px 58px 2px !important;
            background: transparent !important;
        }

        body.lion2-skin .top_wrap .userm_wrap .logo {
            position: relative !important;
            z-index: 1802 !important;
            inset: auto !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: min(100%, 188px) !important;
            max-width: 188px !important;
            height: 100% !important;
            min-height: 0 !important;
            margin: 0 !important;
            border: 0 !important;
            background: transparent !important;
            filter: none !important;
            transform: none !important;
            pointer-events: auto !important;
        }

        body.lion2-skin .top_wrap .userm_wrap .logo img {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            height: 100% !important;
            max-height: 44px !important;
            margin: 0 !important;
            object-fit: contain !important;
            object-position: center !important;
            opacity: 1 !important;
            filter: drop-shadow(0 2px 2px #000) !important;
        }

        body.lion2-skin .top_wrap :is(.m_menu_expand_btn, .m_menu_pc_btn) {
            position: absolute !important;
            z-index: 1803 !important;
            top: calc(var(--signal-mobile-safe-top) + (var(--signal-mobile-bar-height) - 44px) / 2) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-sizing: border-box !important;
            width: 44px !important;
            min-width: 44px !important;
            height: 44px !important;
            min-height: 44px !important;
            padding: 0 !important;
            border: 1px solid var(--signal-yellow) !important;
            border-radius: 0 !important;
            background:
                linear-gradient(135deg, rgb(242 196 0 / 16%), transparent 48%),
                #151819 !important;
            color: var(--signal-yellow) !important;
            box-shadow:
                inset 0 0 0 2px #070809,
                inset 0 1px rgb(255 255 255 / 16%) !important;
            clip-path: var(--signal-cut) !important;
            filter: none !important;
        }

        body.lion2-skin .top_wrap .m_menu_expand_btn {
            right: auto !important;
            left: calc(var(--signal-mobile-safe-left) + 6px) !important;
        }

        body.lion2-skin .top_wrap .m_menu_pc_btn {
            right: calc(var(--signal-mobile-safe-right) + 6px) !important;
            left: auto !important;
        }

        body.lion2-skin .top_wrap :is(.m_menu_expand_btn, .m_menu_pc_btn) > span {
            display: block !important;
            width: auto !important;
            height: auto !important;
            color: var(--signal-yellow) !important;
            font-size: 0 !important;
            line-height: 1 !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        body.lion2-skin #crossScroll1.container_wrap {
            display: block !important;
            box-sizing: border-box !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            margin-top: var(--signal-mobile-header-height) !important;
            padding: 0 !important;
            overflow-x: clip !important;
        }

        body.lion2-skin #ajax-content.contents {
            box-sizing: border-box !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            min-height: calc(100dvh - var(--signal-mobile-header-height)) !important;
            margin: 0 !important;
            overflow-x: clip !important;
        }

        body.lion2-skin :is(.left_content, .right_content).active {
            top: var(--signal-mobile-header-height) !important;
            bottom: auto !important;
            box-sizing: border-box !important;
            height: calc(100dvh - var(--signal-mobile-header-height)) !important;
            max-height: calc(100dvh - var(--signal-mobile-header-height)) !important;
            padding-bottom: calc(18px + var(--signal-mobile-safe-bottom)) !important;
            overflow: hidden !important;
            overscroll-behavior: contain;
        }

        body.lion2-skin .left_content.active {
            right: auto !important;
            left: var(--signal-mobile-safe-left) !important;
            width: min(88vw, 370px) !important;
            max-width:
                calc(100vw - var(--signal-mobile-safe-left) - var(--signal-mobile-safe-right)) !important;
        }

        body.lion2-skin .right_content.active {
            right: var(--signal-mobile-safe-right) !important;
            left: auto !important;
            width: min(92vw, 390px) !important;
            max-width:
                calc(100vw - var(--signal-mobile-safe-left) - var(--signal-mobile-safe-right)) !important;
        }

        body.lion2-skin :is(.left_content, .right_content).active > .scrollFrame {
            box-sizing: border-box !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            height: 100% !important;
            max-height: 100% !important;
            padding: 0 !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            overscroll-behavior: contain;
            scrollbar-color: #6c7070 #171a1b;
            scrollbar-width: thin;
        }

        body.lion2-skin .right_content.active .rightMenu,
        body.lion2-skin .right_content.active .rightMenu > :is(.login_box, .user_body, .r_banner) {
            box-sizing: border-box !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }

        body.lion2-skin .right_content.active .rmenu {
            grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            margin-inline: 0 !important;
        }

        body.lion2-skin #main-mobile-links.mobilelink {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            box-sizing: border-box !important;
            gap: 3px !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            margin-right: 0 !important;
            margin-left: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
        }

        body.lion2-skin #main-mobile-links.mobilelink > a {
            box-sizing: border-box !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }

        body.lion2-skin #main-mobile-links.mobilelink > a:focus-visible {
            outline-offset: -3px !important;
        }

        body.lion2-skin #main-mobile-mosaic.mobile-main-mosaic {
            box-sizing: border-box !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        body.lion2-skin #main-mobile-mosaic.mobile-main-mosaic > * {
            box-sizing: border-box !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        body.lion2-skin :is(.left_content, .right_content) {
            transition: none !important;
        }
    }
}