@charset "utf-8";

/****************************************************************************************************************************************
카지노 타이틀
*****************************************************************************************************************************************/
.casino-tit {position: relative; margin:10px auto 15px auto; padding:0 20px; width: 100%; height: 60px; display: flex; justify-content: space-between; background: var(--bg-layer3);}
.casino-tit > h3 {position: relative; margin:0; padding:0; line-height: 60px; font-size:18px; font-weight: 600; color: var(--color);}

/****************************************************************************************************************************************
카지노 필터
*****************************************************************************************************************************************/
/* filter-order */
.filter-order {position: relative; margin:0 0 20px 0; padding: 0; width: 100%; display: flex; justify-content: space-between; align-items: center;}

.left-filter,
.right-filter {position: relative; width: calc(100% / 2); display: flex; align-items: center; gap:10px;}
.left-filter {justify-content: flex-start;}
.right-filter {justify-content:flex-end;}

.fliter-tit {position: relative; font-size:16px; font-weight: 600; color:var(--color);}
.fliter-tit > svg {font-size:16px; font-weight: 600; color:var(--secondary);}

/* left-filter */
.filter-game {position: relative;}
.filter-btnAll {position: relative; margin:0; padding:10px 10px; min-width: 130px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; background: var(--bg-layer1); border:1px var(--board-1) solid; border-radius: 10px; cursor: pointer;}
.filter-btnAll > svg {font-size: 15px; font-weight: 600; color:var(--secondary); transition: 0.2s;}
.filter-btnAll.active > svg {transform: rotate(180deg);}

.filterGame-list {display: none; position: absolute; top:41px; left: 0; z-index: 10; width: 200px;}
.filterGame-list::before {content: " "; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; margin-left:-30px; width: 0; height: 0; background-color: transparent;  border-right: 8px solid transparent; border-left: 8px solid transparent; border-bottom: 8px solid #fff; border-top: 8px solid transparent;}
.filterGame-list.active {display: block;}

.filter-inner {position: relative; margin:16px 0 0 0; padding:15px 15px; width: 100%; height: 250px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; background:var(--bg-white); border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); overflow-y: auto;}
.filter-inner > label {line-height: 38px; font-weight:600; color:var(--black-color);}
.filter-inner > label > input[type="checkbox"] {width:20px; height:20px; border: 2px solid #2f4553; accent-color: #2f4553;}

/* right-filter */
.filter-array {position: relative;}
.fliter-btnArray {position: relative; margin:0; padding:10px 10px; min-width: 130px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; background: var(--bg-layer1); border:1px var(--board-1) solid; border-radius: 10px; cursor: pointer;}
.fliter-btnArray > svg {font-size: 15px; font-weight: 600; color:var(--secondary); transition: 0.2s;}
.fliter-btnArray.active > svg {transform: rotate(180deg);}

.filter-popular {display: none; position: absolute; top:41px; left: 0; z-index: 10; width: 200px;}
.filter-popular::before {content: " "; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; margin-left:-30px; width: 0; height: 0; background-color: transparent;  border-right: 8px solid transparent; border-left: 8px solid transparent; border-bottom: 8px solid #fff; border-top: 8px solid transparent;}
.filter-popular.active {display: block;}

/* filter-view */
.filter-view {position: relative; margin:0 auto 30px auto; padding:0; width: 100%; display: flex; flex-wrap: wrap; gap: 15px; justify-content:flex-start;}
.filter-img {position: relative; margin:0; padding:0; width: calc(100% / 8 - 15px); height: 192px; border-radius: 5px; overflow: hidden; cursor: pointer;}
.filter-img > img {position: relative; margin:0; padding:0; width: 100%; height: 100%; object-fit: cover;}

.filter-hover {display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top:0; left:0; right:0; bottom:0; z-index: 3; padding:18px 10px; width: 100%; background: rgba(0,0,0,0.6); opacity: 0; visibility: hidden;}
.filter-hover > .play-icon {margin:0; padding:30px 30px; width:40px; height:40px; display:flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.3); border-radius: 50%; opacity: 0; transform: scale(0.85); transition: transform 0.3s ease;}
.filter-hover > .play-icon > svg {color:var(--color); opacity: 0.8; font-size: 32px;}


@media (hover: hover) and (pointer: fine) {
    .filter-img:hover .filter-hover {opacity: 1; visibility: visible; transition:0.3 ease-in;} 
    .filter-img:hover .filter-hover > .play-icon {transform: scale(1); opacity: 1;}

}
/****************************************************************************************************************************************
카지노 리스트
*****************************************************************************************************************************************/
ul.casino-list {position: relative; margin:0 auto 30px auto; padding:0; width: 100%; display: flex; gap: 15px; justify-content:space-between; align-items: center; flex-wrap: wrap;}
ul.casino-list > li {position: relative; margin:0; padding:0; display: flex; background:url('/img/common/casino/casino-bg.jpg') center no-repeat; background-size: cover; 
    border:2px #2e4a82 solid; overflow: hidden; cursor: pointer;
    transition: 0.6s;
    width: calc(100% / 5 - 15px); height: 210px;
}

.game-logo {position:absolute; top:40px; left:15px; z-index: 1; margin:0; text-align: left; opacity: 0; animation: gameLogo 0.5s ease 0.3s 1 forwards;
    transition: 0.6s;
}
.game-logo > img {margin:0 0 2px 0;}
.game-logo > .game-tit {font-size: 18px; font-weight: 500; color:#fff; text-shadow:#000 1px 1px 1px;}
@keyframes gameLogo {
    0% {opacity: 0; transform: scale(0.5);}
    100% {opacity: 1;transform: scale(1.0);}
}

.game-item {position: absolute; top:2px; bottom:2px; right:0; opacity: 0; margin: 2px 0; animation: 1s ease 0s 1 normal forwards running gameItem; overflow: hidden;
    transition: 0.6s;
}


@keyframes gameItem {
    0% {opacity: 0;transform: translateX(10%);}
    100% {opacity: 1; transform: translateX(0);}
}

@media (hover: hover) and (pointer: fine) {
    ul.casino-list > li:hover > .game-logo  {top:60px; transition: 0.6s;}
    ul.casino-list > li:hover > .game-item {right:-25px; transition: 0.6s;}
}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1600px) {
	.game-item {top:0; bottom:0; margin:0; height: 100%;}
    .filter-img {width: calc(100% / 7 - 15px);}
}/* 미디어쿼리문 끝 */


@media (max-width:1200px) {
	ul.casino-list > li {width: calc(100% / 4 - 15px);}
    .filter-img {width: calc(100% / 6 - 15px);}
}/* 미디어쿼리문 끝 */


@media (max-width:992px) {
    .casino-tit {margin:0 auto 10px auto; padding:0 15px; height: 50px;}
    .casino-tit > h3 {line-height: 50px;}
    .casino-tit > img {margin-top:5px; height: 40px;}

    ul.casino-list {gap:10px;}
    ul.casino-list > li {width: calc(100% / 3 - 10px);}

   .filter-img {width: calc(100% / 5 - 15px);}
}/* 미디어쿼리문 끝 */

@media (max-width:767px) {
    .filter-img {width: calc(100% / 4 - 15px);}
}/* 미디어쿼리문 끝 */


@media (max-width:639px) {
    ul.casino-list {justify-content: center;}
    ul.casino-list > li {width: calc(100% / 2 - 10px); height: 160px;}
    .game-logo {top: unset; bottom:10px; left:0; right:0; margin:0 auto; padding:0 10px; text-align: center;}
    .game-logo > img {margin:0 auto; text-align: center;}
    .game-logo > .game-tit {margin:0 auto; text-align: center;}

    .fliter-btnArray {min-width: 110px; font-size: 14px;}

    .filterGame-list {width: 140px;}
    .filter-popular {left:-20px; width: 130px;}
    .filter-popular::before {margin-left: 0;}

    .filter-inner {padding: 10px 10px; height: 200px;}
    .filter-inner > label > input[type="checkbox"] {width: 16px; height: 16px;}
    .filter-inner > label {line-height: 37px; font-size: 13px;}

    .fliter-tit {display:none;}
    .filter-view {gap:10px; justify-content: center;}
    .filter-img {width: calc(100% / 3 - 10px); height: 140px;}
}/* 미디어쿼리문 끝 */

/****************************************************************************************************************************************
게임 팝업 (인라인)
*****************************************************************************************************************************************/
.game-popup {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: var(--z-game-popup);
    background: rgba(0, 0, 0, 0.7);
    overflow-y: auto;
}
.game-popup.active { display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px; }

.game-popup-inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    max-height: calc(100vh - 80px);
    background: var(--bg-layer2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.game-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--bg-layer3);
    border-bottom: 1px solid var(--board-1);
}
.game-popup-title { font-size: 18px; font-weight: 600; margin: 0; }
.game-popup-close {
    width: 36px; height: 36px;
    display: flex; justify-content: center; align-items: center;
    background: var(--bg-layer4);
    border-radius: 50%;
    color: var(--color);
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s;
}
.game-popup-close:hover { background: var(--bg-layer4-hover); }

.game-popup-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.game-popup-loading {
    display: none;
    text-align: center;
    padding: 40px;
    color: var(--secondary);
}
.game-popup-loading.active { display: block; }

.game-popup-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 0;
    padding: 0;
}
.game-popup-list > li {
    position: relative;
    width: calc(100% / 6 - 12.5px);
    aspect-ratio: 3/4;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-layer3);
}
.game-popup-list > li > img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; 제거 — 썸네일 잘림 방지 (디자인팀 요청) */
}
.game-popup-list > li > .game-name {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 10px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-popup-list > li.no-games {
    width: 100%;
    text-align: center;
    padding: 40px;
    color: var(--secondary);
    background: transparent;
    cursor: default;
}

/* 호버 효과 */
.game-popup-list > li .game-hover {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: 0.2s;
}
.game-popup-list > li .game-hover .play-icon {
    width: 50px; height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    font-size: 20px;
    transform: scale(0.8);
    transition: 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    .game-popup-list > li:hover .game-hover { opacity: 1; }
    .game-popup-list > li:hover .game-hover .play-icon { transform: scale(1); }
}

/* 게임 팝업 반응형 */
@media (max-width: 1200px) {
    .game-popup-list > li { width: calc(100% / 5 - 12px); }
}
@media (max-width: 992px) {
    .game-popup-list > li { width: calc(100% / 4 - 11.25px); }
    .game-popup-list { gap: 12px; }
}
@media (max-width: 767px) {
    .game-popup-list > li { width: calc(100% / 3 - 6.67px); }
    .game-popup-list { gap: 10px; }
    .game-popup.active { padding: 20px 10px; }
}
@media (max-width: 480px) {
    .game-popup-list > li { width: calc(100% / 2 - 5px); }
}
/****************************************************************************************************************************************
게임명 검색 — 스킨 톤 오버라이드 (공용 기본: css/business/game-popup-search.css)
*****************************************************************************************************************************************/
.game-popup .game-popup-search-input { background: var(--bg-layer4); border-color: var(--board-1); color: var(--color); }
.game-popup .game-popup-search-input:focus { border-color: var(--secondary); }
.game-popup .game-popup-search-clear { background: var(--board-1); color: var(--color); }
.game-popup .game-popup-search-count { color: var(--secondary); }