/* MCART(2026-10-29 · 2026-10-30 미니·가상 공용) · 모바일 하단 카트 — 기존 사이트(cs-105) 모바일 배치 이식.
   빈 카트 = 미렌더 · 담으면 하단 요약 카트 · 머리줄 누르면 담은 항목 펼침. 마크업 = Cart 시트 모드(스포츠) · Mini.razor · Virtual.razor(같은 클래스).
   ⚠️ 모든 규칙 = .mcart 안쪽 한정 — cart_list · cart_item · boost_list 는 스포츠 PC 카트(sports.css · boost.css)와 같은 이름이라 여기서 그 값을 되돌린다.
   색 = 원본 카트 축(#131313 · #202020 · #292828 · 금 #9c8555/#b2985f · 노랑 #fff04a) + 모바일 스크린샷. ≤1023.98(IsMobile 경계) 전용. */

.mcart { display: none; }

@media (max-width: 1023.98px) {
    /* 목록 마지막 경기가 접힌 카트(실측 166px · 아이템 사용 줄 포함 204px)에 가리지 않게 — 카트가 있을 때만 #app 아래 여백(+여유 16px).
       ⚠️ 구 여백 블록(mcart_spacer) 폐기(2026-10-30): sports_content_wrap(flex · gap 10px)의 항목이 하나 늘어 gap 만큼 목록 폭이 줄었다
       (카트를 담으면 오른쪽이 10px 비어 보이던 원인). app-mobile-menu.css 의 #app padding-bottom(!important)보다 우선. */
    body:has(.mcart) #app { padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px)) !important; }
    body:has(.mcart) .betting_main_layout { padding-bottom: 0; }
    /* 2026-10-30 · 카트가 뜰 때 화면이 살짝 축소돼 보이던 것(가로 넘침 시 모바일 브라우저가 줌아웃) — 카트 노출 중 가로 넘침 차단. ⚠️ 원인 요소 미특정(실 화면 확인 필요). */
    html:has(.mcart), body:has(.mcart) { overflow-x: clip; }
    /* UP/DOWN 플로팅(common.css .go-btn · z1200)이 카트 머리줄(전체삭제)을 덮던 것 — 카트가 있으면 접힌 카트 위로 올리고, 펼치면(어둡게) 숨김. */
    body:has(.mcart) .go-btn { bottom: calc(178px + env(safe-area-inset-bottom, 0px)); }
    body:has(.mcart .cart.open) .go-btn { display: none !important; }

    /* 화면 맨 아래에서 시작(하단 빠른메뉴 없음). 기기 하단 여백(safe-area)만 비운다.
       그림자 = 바탕과 같은 어두운 톤이라 카트가 떴는지 잘 안 보이던 것(지시 2026-10-30) → 위로 짙은 그림자 + 금 윗선. */
    .mcart { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; padding-bottom: env(safe-area-inset-bottom, 0px);
             background: #1c1c1c; border-top: 1px solid #9c8555;
             box-shadow: 0 -2px 0 rgba(156,133,85,.18), 0 -8px 22px rgba(0,0,0,.75), 0 -2px 6px rgba(0,0,0,.6);
             font-family: 'Noto Sans Korean', sans-serif; }

    /* 펼침 = 뒤 화면 어둡게(지시 2026-10-30 · 기존 cart_backdrop 재사용 — 누르면 접힘). mcart 스태킹 안에서 z -1 = 화면 위 · 카트 아래. */
    .mcart .cart_backdrop { position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.72); }

    .mcart .cart { color: #fff; }
    .mcart .cart_head { position: relative; display: flex; align-items: center; height: 38px; padding: 0 12px;
                        background: linear-gradient(to bottom, #4a4030 0%, #2e281d 100%); cursor: pointer; user-select: none; }
    .mcart .cart_tit { font-size: 14px; font-weight: 700; color: #b2985f; letter-spacing: -.3px; }
    .mcart .cart_arrow { position: absolute; left: 50%; top: 50%; width: 10px; height: 16px; transform: translate(-50%,-50%); }
    .mcart .cart_arrow::before, .mcart .cart_arrow::after { content: ""; position: absolute; left: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; }
    .mcart .cart_arrow::before { top: 0; border-bottom: 6px solid #e0393e; }
    .mcart .cart_arrow::after  { bottom: 0; border-top: 6px solid #e0393e; }
    .mcart .cart_clear { margin-left: auto; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; }

    /* 펼침 — 담은 경기(원본 cart_list li · #131313). sports.css 의 cart_list / cart_item 값(고정 높이·테두리·둥근 칸)을 되돌림. */
    .mcart .cart_list { min-height: 0; max-height: 46vh; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; background: #131313; }
    .mcart .cart_item { position: relative; margin: 0; padding: 12px 40px 12px 12px; border: 0; border-bottom: 1px solid #2a2b2e; border-radius: 0; background: transparent; }
    .mcart .ci_top { display: flex; align-items: center; gap: 8px; }
    .mcart .ci_pick { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
    .mcart .ci_odds { flex: 0 0 auto; min-width: 52px; height: 24px; padding: 0 6px; background: #292828; font-size: 14px; font-weight: 700; color: #fff; line-height: 24px; text-align: center; }
    .mcart .ci_del { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
    .mcart .ci_del::before, .mcart .ci_del::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 1.5px; background: #cfcfcf; }
    .mcart .ci_del::before { transform: translate(-50%,-50%) rotate(45deg); }
    .mcart .ci_del::after  { transform: translate(-50%,-50%) rotate(-45deg); }
    .mcart .ci_match { margin-top: 6px; font-size: 13px; color: #bdbdbd; }
    .mcart .ci_market { margin-top: 4px; font-size: 13px; font-weight: 700; color: #fff; }
    .mcart .ci_lock { margin-top: 4px; font-size: 12px; color: #ff6b6b; }
    .mcart .ci_bonus .ci_pick { font-size: 13px; color: #b2985f; }

    .mcart .cart_notice { padding: 6px 12px; background: #2a1d1d; font-size: 12px; color: #ffb4b4; }

    /* 아이템 사용(= 배당업 쿠폰) */
    .mcart .cart_row { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; border-bottom: 1px solid #2a2b2e; background: #1c1c1c; }
    .mcart .cart_row > span { font-size: 13px; color: #cfcfcf; }
    .mcart .cart_row > button { height: 26px; padding: 0 16px; border: 1px solid #3a3a3a; background: #2f2f2f; font-size: 12px; color: #fff; cursor: pointer; }
    .mcart .boost_list { max-height: 150px; margin: 0; padding: 0; overflow-y: auto; background: #131313; }
    .mcart .bc { padding: 8px 12px; border-bottom: 1px solid #2a2b2e; cursor: pointer; }
    .mcart .bc b { display: block; font-size: 13px; color: #fff; }
    .mcart .bc small { display: block; margin-top: 2px; font-size: 11px; color: #9b9b9b; }
    .mcart .bc.on { background: #2e281d; }
    .mcart .bc.on b { color: #f8c853; }
    .mcart .bc.off { opacity: .45; cursor: default; }

    /* 금액 2×2 — 보유금액·예상배당률 / 베팅금액·예상당첨금 */
    .mcart .cart_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #1c1c1c; }   /* minmax(0) = 긴 금액이 칸을 밀어 화면 폭을 넘기지 않게 */
    .mcart .cell { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; height: 40px; padding: 0 12px; border-bottom: 1px solid #2a2b2e; }
    .mcart .cell:nth-child(odd) { border-right: 1px solid #2a2b2e; }
    .mcart .cell > span { flex: 0 0 auto; font-size: 13px; color: #cfcfcf; white-space: nowrap; }
    .mcart .cell > b { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 700; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
    .mcart .cell > b.win { font-size: 17px; color: #fff; }
    .mcart .cell .q { display: inline-block; width: 15px; height: 15px; margin-left: 4px; border-radius: 50%; background: #9d8655; font-size: 11px; font-style: normal; font-weight: 700; color: #fff; line-height: 15px; text-align: center; vertical-align: 1px; }
    .mcart .cell_input .bet_amount_input { flex: 1 1 auto; width: 0; min-width: 60px; height: 28px; padding: 0 8px; border: 0; border-radius: 0; background: #333; font-size: 15px; font-weight: 700; color: #f8c853; text-align: right; -moz-appearance: textfield; }
    .mcart .cell_input .bet_amount_input::-webkit-outer-spin-button, .mcart .cell_input .bet_amount_input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    /* 버튼 — MAX · HALF · 정정 · 베팅하기(금) */
    .mcart .cart_btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.2fr); height: 44px; background: #1c1c1c; }
    .mcart .cart_btns button { height: 44px; border: 0; border-right: 1px solid #2a2b2e; background: #202020; font-size: 14px; font-weight: 700; color: #b2985f; cursor: pointer; }
    .mcart .cart_btns .submit { border-right: 0; background: linear-gradient(to bottom, #b39b67 0%, #8e7648 100%); color: #fff; font-size: 16px; }
    .mcart .cart_btns .submit:disabled { opacity: .55; cursor: default; }
}