/* ===============================
   Casino.html 전용 강력한 CSS 
   =============================== */

/* 기본 모바일 설정 */
@media screen and (max-width: 768px) {
    
    /* contents_box 표시 강제 */
    html body div#wrap div.contents_right div.contents_box {
        display: block !important;
        width: 100vw !important;
        max-width: 100% !important;        
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding:0px 0px !important
    }
    
    /* 제목 중앙 정렬 */
    html body div#wrap div.contents_right div.contents_box div.title_wrap { 
        text-align: left !important; 
        width: 100%; 
        margin: 0px 0px 0px; 
        padding: 0px; 
        display: block; 
        position: relative; 
        z-index: 1;    
        height:50px !important;
    }
    
    html body div#wrap div.contents_right div.contents_box div.title_wrap div.title {
        font-size: 24px !important;
        color: #ffb476 !important;
        font-weight: 700 !important;
        text-align: center !important;
        display: block !important;
        line-height: 55px !important;
    }

    html body div#wrap div.contents_right div.contents_box div.title_wrap div.title img {
        display : block;
        margin : 10px auto 0 auto;        
        height : auto;
        position : relative;
        z-index: 2;
    }
    
    /* 게임 리스트 컨테이너 */
    html body div#wrap div.contents_right div.contents_box div.game_list {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;        
        margin-top:55px !important;
    }

    html body div#wrap div.contents_right div.contents_box div.game-list {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;        
        margin-top:10px !important;
    }
    
    /* 게임 리스트 UL - 2열 그리드 강제 적용 */
    html body div#wrap div.contents_right div.contents_box div.game_list ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
        gap: 8px !important;
        grid-gap: 8px !important;
        padding: 5px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        list-style: none !important;
        justify-items: center !important;
        align-items: start !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* 게임 아이템 LI */
    html body div#wrap div.contents_right div.contents_box div.game_list ul li {
        width: 100% !important;        
        height: auto !important;
        aspect-ratio: 446/160 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        background: #1a1a1a !important;
        transition: all 0.3s ease !important;
        flex: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
    
    /* 게임 이미지 */
    html body div#wrap div.contents_right div.contents_box div.game_list ul li a img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 5px !important;
        transition: transform 0.3s ease !important;
        max-width: none !important;
        max-height: none !important;
        min-width: auto !important;
        min-height: auto !important;
    }
    
    /* 호버 효과 */
    html body div#wrap div.contents_right div.contents_box div.game_list ul li:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    }
    
    html body div#wrap div.contents_right div.contents_box div.game_list ul li:hover a img {
        transform: scale(1.02) !important;
    }
}

/* 소형 모바일 최적화 */
@media screen and (max-width: 480px) {
    html body div#wrap div.contents_right div.contents_box div.game_list ul {
        gap: 6px !important;
        grid-gap: 6px !important;
        padding: 3px !important;
    }
}

/* 초소형 모바일 최적화 */
@media screen and (max-width: 360px) {
    html body div#wrap div.contents_right div.contents_box div.game_list ul {
        gap: 4px !important;
        grid-gap: 4px !important;
        padding: 2px !important;
    }
}


@media (max-width: 768px) {
    /* 팝업이 모바일에서 전체 가로 크기를 차지하고 상단에 위치 */
    #slot_pop1_wrapper {
        align-items: flex-start !important;
        padding: 20px 0 0 0 !important;
        box-sizing: border-box !important;
    }
    
    #slot_pop1 {
        max-width: 100% !important;
        max-height: 80vh !important;
        width: 100vw !important;
        min-width: 100vw !important;        
        overflow: hidden !important;
        margin: 0 !important;
        border-radius: 0 0 15px 15px !important;
    }
    
    .slot_box_wrap {
        padding: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .slot_box {
        width: 100% !important;
    }
    
    .slot_start {
        width: 100% !important;
    }
    
    .slot_title {
        font-size: 16px !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }
    
    fieldset {
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #gameSearch {
        width: 100% !important;
        padding: 8px !important;
        font-size: 14px !important;
        margin-bottom: 10px !important;
        border: 1px solid #ddd !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
    }
    
    .con_box10 {
        max-height: 45vh !important;
        overflow-y: auto !important;
        width: 100% !important;
    }
    .slot_start {
        float: left !important;
        width: 100% !important;
        padding: 35px 17px 43px 12px !important;
        background: #1d1d1d !important;
        border: 1px solid #4e433a !important;
        border-radius: 5px !important;
    }

    

    .slot_list_wrap {
        width: 100% !important;
    }
    
    .slot_list2 {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    .slot_list2 li {
        width: calc(33.33% - 10px) !important;
        display: inline-block !important;
        margin: 5px !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
    }
    
    .slot_list2 li a {
        display: block !important;
        text-align: center !important;
        padding: 5px !important;
        text-decoration: none !important;
        color: #333 !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    
    .slot_list2 li img {
        width: 100% !important;
        height: auto !important;
        max-width: 100px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        margin-bottom: 5px !important;
    }
    
    .slot_close_box {
        top: 20px !important;
        right: 20px !important;
        padding: 8px !important;
    }
    
    .slot_close_box img {
        width: 24px !important;
        height: 24px !important;
    }
    
    .slot_box_wrap {
        padding-top: 60px !important;
    }
}