@charset "utf-8";

/****************************************************************************************************************************************
커스텀 Input 스타일
*****************************************************************************************************************************************/
/* 베팅 금액 입력 박스 - 배경과 자연스럽게 */
ul.cart-info > li > input.bet-amount {
    margin: 0;
    padding: 5px 10px;
    width: 100%;
    max-width: 150px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-align: right;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    outline: none;
}

/* 포커스 시 강조 */
ul.cart-info > li > input.bet-amount:focus {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #16bdf9;
    box-shadow: 0 0 5px rgba(22, 189, 249, 0.3);
}

/* Placeholder 색상 */
ul.cart-info > li > input.bet-amount::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/****************************************************************************************************************************************
모바일 대응
*****************************************************************************************************************************************/
@media (max-width: 800px) {
    ul.cart-info > li > input.bet-amount {
        max-width: 100px;
        font-size: 12px;
        padding: 3px 5px;
    }
}

/****************************************************************************************************************************************
모바일 스크롤 처리
*****************************************************************************************************************************************/
/* PC - 스크롤 영역 설정 */
@media (min-width: 801px) {
    .left-pan,
    .right-pan {
        overflow-y: auto !important;
        overflow-x: hidden;
    }
    
    .left-inplay,
    .right-inplay {
        overflow-y: auto !important;
        overflow-x: hidden;
    }
    
    /* 스크롤바 스타일 */
    .left-pan::-webkit-scrollbar,
    .right-pan::-webkit-scrollbar,
    .left-inplay::-webkit-scrollbar,
    .right-inplay::-webkit-scrollbar {
        width: 5px;
    }
    
    .left-pan::-webkit-scrollbar-track,
    .right-pan::-webkit-scrollbar-track,
    .left-inplay::-webkit-scrollbar-track,
    .right-inplay::-webkit-scrollbar-track {
        background-color: #222a33;
        border-radius: 3px;
    }
    
    .left-pan::-webkit-scrollbar-thumb,
    .right-pan::-webkit-scrollbar-thumb,
    .left-inplay::-webkit-scrollbar-thumb,
    .right-inplay::-webkit-scrollbar-thumb {
        background-color: #53647a;
        border-radius: 3px;
    }
}

/* 모바일 - 스크롤 및 오버레이 처리 */
@media (max-width: 800px) {
    /* 프리매치 - right-pan (디테일 뷰) */
    .right-pan {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 9999 !important;
        width: 100% !important;
        height: 100vh !important;
        padding: 85px 5px 80px 5px !important;
        background: #0b0e18 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    .right-pan.active {
        display: block !important;
    }
    
    /* left-pan 스크롤 */
    .left-pan {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 250px);
    }
    
    /* 인플레이 - right-inplay (디테일 뷰) */
    .right-inplay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 9999 !important;
        width: 100% !important;
        height: 100vh !important;
        padding: 85px 5px 80px 5px !important;
        background: #0b0e18 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: none;
    }
    
    .right-inplay.selected {
        display: block !important;
    }
    
    /* left-inplay 스크롤 */
    .left-inplay {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: calc(100vh - 200px);
    }
    
    /* 디테일 뷰 열릴 때 body 스크롤 막기 */
    body.detail-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* sport-cart 오버레이 */
    .sport-cart {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 10000 !important;
        width: 100% !important;
        height: 100vh !important;
        padding: 85px 5px 80px 5px !important;
        background: #0b0e18 !important;
        overflow-y: auto !important;
        display: none;
    }
    
    .sport-cart.active {
        display: block !important;
    }
    
    /* 모바일 스크롤바 스타일 */
    .left-pan::-webkit-scrollbar,
    .right-pan::-webkit-scrollbar,
    .left-inplay::-webkit-scrollbar,
    .right-inplay::-webkit-scrollbar,
    .sport-cart::-webkit-scrollbar {
        width: 3px;
    }
    
    .left-pan::-webkit-scrollbar-track,
    .right-pan::-webkit-scrollbar-track,
    .left-inplay::-webkit-scrollbar-track,
    .right-inplay::-webkit-scrollbar-track,
    .sport-cart::-webkit-scrollbar-track {
        background-color: rgba(34, 42, 51, 0.5);
    }
    
    .left-pan::-webkit-scrollbar-thumb,
    .right-pan::-webkit-scrollbar-thumb,
    .left-inplay::-webkit-scrollbar-thumb,
    .right-inplay::-webkit-scrollbar-thumb,
    .sport-cart::-webkit-scrollbar-thumb {
        background-color: #53647a;
        border-radius: 3px;
    }
}

/* 스크롤 영역 공통 설정 */
.left-pan,
.right-pan,
.left-inplay,
.right-inplay {
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
}

/* 스크롤 방지 (모달/오버레이 열릴 때) */
.no-scroll {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}





.sport-inner {
    max-width: none !important;
}

.scroll-box {
    overflow-y: auto;
    height: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(86, 184, 245, 0.5) transparent;
}

/* 크롬, 엣지, 사파리 */
.scroll-box::-webkit-scrollbar {
    width: 2px;
    /* 기본 8~12px 정도, 이걸 줄이기 */
}

.scroll-box::-webkit-scrollbar-track {
    background: transparent;
    /* 배경 투명하게 */
}

.scroll-box::-webkit-scrollbar-thumb {
    background-color: rgba(100, 100, 100, 0.5);
    /* 손잡이 색 */
    border-radius: 2px;
}

.scroll-box::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 100, 100, 0.8);
}

.scroll-box::-webkit-scrollbar-button {
    height: 0px;
    /* 높이를 0으로 만들어 완전 제거 */
    width: 0;
}

.inplay-list-empty {
    font-size: 20px;
    margin: 50px;
}

.right-inplay .inplay-detail-empty {
    font-size: 20px;
    margin: 95px;
}

.right-inplay.selected {
    display: block !important;
}

/* prematch content custom css, start */
.prematch-container {
    width: 100%;
}
.prematch-container .sport-game {
    width: 100%;
}

.sport-top {
    width: 100%;
}

.left-wrapper {
    display: flex;
    width: 100%;
}

.list-wrapper {
    width: 50%;
    height: 700px;
    overflow-y: scroll;
    padding: 0 10px 0 0;
}

.detail-wrapper {
    width: 50%;
    height: 700px;
    overflow-y: scroll;
    padding: 0 0 0 10px;
}

@media (max-width: 800px) {
    .prematch-container {
        display: flex;
        flex-direction: column;
    }

    .list-wrapper {
        width: 100%;
        padding: 10px;
    }

    .detail-wrapper {
        width: 100%;
        padding: 10px;
    }
}

/* prematch content custom css, end */
/****************************************************************************************************************************************
채팅 전용 레이어 팝업 (layerPopup과 동일한 클래스 사용)
*****************************************************************************************************************************************/
#chatPopup {display: none; position: fixed; left: 0; right:0; top: 0; bottom:0; z-index: 1000001; width: 100%; height: 100%;}
#root {
    width: 100%;
    position: relative;
    height: 100%;
    overflow: auto;
    z-index: 0;
}