/* MMENU(2026-10-29) · 모바일 메뉴 2종 — 기존 사이트(cs-105) 모바일 common.css 의 #slideMenu · #slideMyInfo · .icon_list · .ico_list_popup 값 이식.
   ≤1024 전용. 일반 이름(left · right · money · btn …)은 전부 .slide / .icon_list / .pop 안쪽 한정으로만 쓴다(다른 화면 같은 이름과 충돌 0).
   아이콘 = images/castle/ui/*.svg(원본 png 근사 SVG). 열림/닫힘 상태 축 = MainLayout IsMenuOpen(왼쪽) · IsUserInfoOpen(오른쪽) 그대로. */

.slide, .slide_dim, .slide + .close { display: none; }

@media (max-width: 1024px) {
    /* 헤더(sticky · --sk-mhdr-h · z1210) 아래 ~ 화면 맨 아래 사이에서 열림 — 헤더 버튼(☰·👤)은 열린 채로도 눌림.
       z = 구 드로어 축(app-skin: 사이드바 1150 · 내정보 1205)과 같은 대역. */

    /* 하단 메뉴 없음(C2BottomNav 삭제 · 지시) — app-skin 이 하단 메뉴 몫으로 잡던 64px 여백 해제(본문 · 라우트 모달). */
    #app { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
    .sk_modal { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
    .sk_modal_bd { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
    .sk_bnav { display: none !important; }
    .slide_dim { display: block; position: fixed; left: 0; right: 0; top: var(--sk-mhdr-h, 56px); bottom: 0; z-index: 1200; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .3s; }
    .slide_dim.open { opacity: 1; pointer-events: auto; }

    .slide { display: block; overflow-y: auto; overscroll-behavior: contain; position: fixed; top: var(--sk-mhdr-h, 56px); bottom: 0; z-index: 1205;
             width: 303px; max-width: 86vw; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
             background: #1c1d1f; font-family: 'Noto Sans Korean', sans-serif; transition: transform .4s ease; -webkit-overflow-scrolling: touch; }
    .slide.left  { left: 0;  transform: translateX(-100%); }
    .slide.right { right: 0; transform: translateX(100%); }
    .slide.open { transform: translateX(0); }

    /* 닫기(X) — 원본 btn_close 59x57 · 25px 선. 패널 밖 어두운 영역(지시 2026-10-30): 왼쪽 메뉴 = 패널 오른쪽 바깥 / 내정보 = 패널 왼쪽 바깥.
       패널 바로 뒤 형제 버튼 · 열림(.open) 때만 나타남(패널 슬라이드가 끝날 즈음 페이드인). */
    .slide + .close { display: block; position: fixed; top: var(--sk-mhdr-h, 56px); z-index: 1206; width: 59px; height: 57px; padding: 0; border: 0; background: transparent;
                      opacity: 0; pointer-events: none; transition: opacity .2s ease; cursor: pointer; }
    .slide.left + .close  { left: min(303px, 86vw); }
    .slide.right + .close { right: min(303px, 86vw); }
    .slide + .close.open { opacity: 1; pointer-events: auto; transition-delay: .2s; }
    .slide + .close::before, .slide + .close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 2px; background: #d8d8d8; }
    .slide + .close::before { transform: translate(-50%,-50%) rotate(45deg); }
    .slide + .close::after  { transform: translate(-50%,-50%) rotate(-45deg); }

    /* 아이콘 목록 — 원본 4열(49px · 가로 간격 24px · 세로 20px) */
    .icon_list { display: grid; grid-template-columns: repeat(4, 49px); gap: 20px 24px; justify-content: center; margin: 0; padding: 0; list-style: none; }
    .icon_list li { width: 49px; margin: 0; list-style: none; }
    .icon_list .ico { display: block; position: relative; width: 49px; padding-top: 54px; border: 0; background: url('/images/castle/ui/ico_menu.svg') no-repeat 0 0 / 49px 49px; text-align: center; text-decoration: none; cursor: pointer; }
    .icon_list .ico::before { content: ""; position: absolute; top: 0; left: 0; width: 49px; height: 49px; background: var(--ico) no-repeat 50% 50% / 27px auto; }
    .icon_list .ico > span.lbl { display: block; height: 10px; margin: 0 -14px; font-size: 10px; font-weight: 500; color: #9b9b9b; line-height: 10px; white-space: nowrap; }
    .icon_list .ico .count { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: #d9c499; font-size: 10px; font-weight: 500; color: #1c1d1f; line-height: 20px; text-align: center; }
    .icon_list .ico.roll > span.lbl span { display: inline-block; animation: rainbow 1.5s steps(1) infinite; }
    .icon_list .ico.roll > span.lbl span:nth-child(2) { animation-delay: .3s; }
    .icon_list .ico.roll > span.lbl span:nth-child(3) { animation-delay: .6s; }
    .icon_list .ico.roll > span.lbl span:nth-child(4) { animation-delay: .9s; }
    @keyframes rainbow { 0% { color: #FFE400; } 20% { color: #F2CB61; } 40% { color: #CCA63D; } 60% { color: #FAED7D; } 80% { color: #FFE400; } }

    .slide.left .menu_wrap { padding-top: 0; }
    .slide.left .icon_list { margin-top: 20px; }

    /* 묶음 팝업(게임존 등) — 원본 .ico_list_popup */
    .pop { position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,.75); }
    .pop .pop_wrap { position: absolute; top: 50%; left: 50%; width: 263px; margin-top: -23px; transform: translate(-50%,-50%); }
    .pop .pop_tit { margin: 0; font-size: 25px; font-weight: 500; color: #fff; line-height: 25px; text-align: center; }
    .pop .pop_box { margin-top: 22px; padding: 20px 0; border-radius: 25px; background: #2a2a2a; }
    .pop .icon_list { grid-template-columns: repeat(3, 49px); }
    /* 2026-10-30 · 발매 게임 팝업(GamePopup) — 아이콘 = 게임 아이콘·게임사 이미지(칸 안 맞춤) · 이름 = 게임명(길면 2줄). */
    .pop .pop_box { max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; }
    .pop .pop_empty { margin: 0; padding: 18px 12px; font-size: 13px; color: #9b9b9b; text-align: center; }
    .icon_list .ico.game::before { top: 9px; left: 9px; width: 31px; height: 31px; background: var(--ico) no-repeat 50% 50% / contain; border-radius: 4px; }
    .icon_list .ico.game > span.lbl { height: auto; margin: 0 -12px; font-size: 10.5px; line-height: 12px; color: #d8d8d8; white-space: normal; word-break: keep-all; overflow-wrap: break-word; }   /* 줄바꿈 = <wbr> 우선(GameMenuCatalog.Breakable) */
    .icon_list .ico.game.is_lock { opacity: .45; }   /* 점검 게임사 — 누르면 「점검중입니다」 */
    .icon_list .ico.game.is_new::after { content: ''; position: absolute; z-index: 1; top: -4px; left: -6px; width: 29px; height: 14px; background: url('/images/castle/gnb2/ico_new.png') no-repeat; }   /* NEW(카지노·슬롯 'new' 태그) */
    .icon_list .ico.game.gold > span.lbl { background: linear-gradient(180deg, #f29a2e 0%, #fff15a 50%, #f29a2e 100%) 0 0 / 100% 12px repeat-y;
                                          -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
                                          text-shadow: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.75)); }   /* 금색 이름(하드코딩 게임사) — 그림자 = drop-shadow(흐릿함 방지) */

    /* 오른쪽 — 회원 정보(원본 .user_info_box) */
    .slide.right .user_box { padding: 15px 18px 5px 30px; }
    .slide.right .inner_top { position: relative; padding-bottom: 15px; border-bottom: 2px solid #fff; }
    .slide.right .user_name { margin: 0; padding-left: 2px; font-size: 14px; font-weight: 500; color: #fff; line-height: 24px; }
    .slide.right .user_name img { display: inline-block; height: 22px; margin-right: 3px; vertical-align: middle; }
    .slide.right .btn_logout { position: absolute; top: 0; right: 0; width: 70px; height: 24px; border: 0; background: linear-gradient(to bottom, #555556 0%, #28282a 100%); font-size: 10px; font-weight: 500; color: #b2b2b2; line-height: 24px; cursor: pointer; }
    .slide.right .btn_logout i { margin-right: 4px; font-size: 11px; }
    .slide.right .money { display: flex; width: 250px; margin: 10px 0 0; }
    .slide.right .money ~ .money { margin-top: 6px; }
    .slide.right .money .tit { flex: 0 0 48px; height: 27px; font-size: 10px; font-weight: 500; color: #fff; line-height: 27px; }
    .slide.right .money .val { flex: 1 1 auto; min-width: 0; height: 27px; padding-right: 7px; overflow: hidden; background: #0b0b0d; font-size: 10px; font-weight: 500; color: #fff04a; line-height: 27px; text-align: right; white-space: nowrap; }
    .slide.right .money .val small { margin-left: 2px; color: #fff04a; font-size: 10px; }
    .slide.right .money .val select { height: 21px; border: 1px solid #333; background: #0b0b0d; color: #fff04a; font-size: 10px; }
    .slide.right .money .btn { flex: 0 0 30px; width: 30px; height: 27px; margin: 0 0 0 1px; padding: 0; border: 0; background: #0b0b0d; font-size: 10px; font-weight: 500; color: #fff; line-height: 27px; cursor: pointer; }
    .slide.right .money .btn_refresh { color: #b2b2b2; font-size: 11px; }
    .slide.right .money .btn_wide { flex-basis: 34px; width: 34px; }

    .slide.right .menu_wrap { margin-top: 20px; }
    .slide.right .icon_list { gap: 10px 16px; padding-top: 10px; }

    /* 배너 — 원본 .banner_r_menu(246px) · 복권/출석 이미지 버튼 */
    /* 복권·출석 배너 = 원본 이미지 크기 그대로(209×35) — 늘리면 흐려진다. */
    .slide.right .evt_btn { display: block; width: 209px; max-width: 100%; margin: 20px auto 0; padding: 0; border: 0; background: none; cursor: pointer; }
    .slide.right .evt_btn + .evt_btn { margin-top: 10px; }
    .slide.right .evt_btn img { display: block; width: 209px; max-width: 100%; height: auto; margin: 0 auto; }
    .slide.right .banners { width: 246px; margin: 30px auto 0; }
    .slide.right .banners a { display: block; margin-top: 8px; }
    .slide.right .banners img { display: block; width: 100%; }
    .slide.right .banner_txt { position: relative; display: block; height: 61px; margin-top: 8px; border-radius: 2px; text-decoration: none; overflow: hidden; }
    .slide.right .banner_txt.tg { background: linear-gradient(120deg, #1c9ad6 0%, #36b5ec 55%, #1a86c4 100%); }
    .slide.right .banner_txt.kt { background: linear-gradient(120deg, #f5d000 0%, #ffe43a 60%, #f1c400 100%); }
    .slide.right .banner_txt b { position: absolute; top: 10px; left: 13px; font-size: 13px; font-weight: 700; color: #fff; }
    .slide.right .banner_txt span { position: absolute; top: 32px; left: 13px; font-size: 18px; font-weight: 900; color: #fff; line-height: 18px; }
    .slide.right .banner_txt.kt b, .slide.right .banner_txt.kt span { color: #3b2a12; text-shadow: none; }
    .slide.right .banner_txt i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 34px; color: rgba(255,255,255,.9); }
    .slide.right .banner_txt.kt i { color: rgba(59,42,18,.75); }

    /* 구 드로어(오른쪽 내정보 · 왼쪽 사이드바)는 ≤1024 에서 새 메뉴로 대체 */
    .sk_app .mobile_user_drawer { display: none !important; }
}