@charset "utf-8";

/****************************************************************************************************************************************
레이어 팝업 공통
*****************************************************************************************************************************************/
#layerPopup {display: none; position: fixed; left: 0; right:0; top: 0; bottom:0; z-index: 9999; width: 100%; height: 100%;}
.layer-bg {position:relative; padding:30px 0; width:100%; height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background:rgba(0,0,0,0.7); overflow-y: auto;}

.layer-bg::-webkit-scrollbar {width:0; height:0; background:transparent;}
.layer-bg::-webkit-scrollbar-track {background:transparent;}
.layer-bg::-webkit-scrollbar-thumb {background:transparent;}

.layer-wrap {position: relative; animation: popup_style 0.4s ease;}
@keyframes popup_style {
	0% {transform: translateY(-500%);}			
	100% {transform: translateY(0%);}		
}

.layer-close {position: relative; margin:0 auto; padding:20px 0; width: 100%; text-align: center; cursor: pointer;}
.layer-con {position: relative;}

/****************************************************************************************************************************************
팝업 공통
*****************************************************************************************************************************************/
.popup-wrap {position: relative; margin:0 auto; padding: 30px 30px; width: 1000px; min-height: 400px; background: url('../img/bg2.jpg') center top repeat; border-radius: 10px; box-shadow: 50px 50px 50px rgba(0, 0, 0, 0.8);}

/* popup-hd */
.popup-hd {position: relative;}
.popup-tit {position: relative; margin:0; padding:5px 15px 0 15px; width: 100%; height: 50px; line-height: 50px; font-size: 25px; font-weight: 500; letter-spacing: -1px; text-align: center; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); background: url('../img/bg_top1.jpg') center top no-repeat; box-shadow: rgba(0,0,0,0.5) 2px 2px 5px -1px;}
.intro-tit {margin:0 0 15px 0; padding:0; background: unset;}
.intro-txt {margin: 0 auto; padding:0; width: 100%; text-align: center; font-size: 13px; font-weight: 500; color:#fff; font-family: "Noto Sans KR", serif;}

/* popup-body */
.popup-body {position: relative; margin: 10px 0 0 0; padding:0; width: 100%; text-align: center;}

/* tb-write */
.tb-write {border-top:1px solid rgba(255,255,255,0.1);}
.tb-write th,
.tb-write td {padding:10px 20px; text-align: left; font-size: 14px; font-weight: 500; font-family: "Noto Sans KR", serif; color:#fff; background:rgba(0,0,0,0.3); border-bottom:1px solid rgba(255,255,255,0.1);}  
.tb-write th {width:180px; font-weight:500;} 
.tb-write td > input {padding:10px 10px; font-family: "Noto Sans KR", serif; text-align: left; color:#f7f7f7; background:#222; border:1px #000 solid; border-radius:4px;}
.tb-write td > .ask-btn {padding:5px 10px; text-align: left; font-family: "Noto Sans KR", serif;}
.tb-write td > span {margin-right:15px; font-weight: 600; font-family: "Noto Sans KR", serif; color:#a6ff00;} 
.tb-write td > p {margin:5px auto 0 auto; width: 100%; text-align: left; font-family: "Noto Sans KR", serif; color:#ffca00;} 
.tb-write td > .txt-yellow {color: #e2a826; font-size: 20px; font-weight: 900; font-family: "Noto Sans KR", serif; letter-spacing: -1pt; text-shadow: 1px 1px 1px #000; font-style: italic;}

/* moneyBtns */
ul.moneyBtns {position: relative; margin:10px auto 0 auto; padding:0; width: 100%; display: flex; flex-wrap: wrap; gap:5px; justify-content: center; align-items: center;}
ul.moneyBtns > li {margin:0 auto; padding:10px 0; width: calc(100% / 7 - 5px); text-align: center; font-weight: 600; cursor: pointer;}

/* popup-btns */
.popup-btns {position: relative; margin: 15px auto 0 auto; padding:0; width: 100%; text-align: center;}
.popup-btns > button {margin: 3px auto; padding: 0 10px; min-width: 300px; line-height: 50px; text-align: center; font-size: 14px;}

.popup-btns-right {position: relative; margin: 15px auto 0 auto; padding:0; width: 100%; display: flex; justify-content: end; align-items: center; gap:10px;}
.popup-btns-right > button {margin: 0; padding: 0 10px; min-width: 120px; line-height: 35px; text-align: center; font-size: 12px;}

/* tb-wrap */
.tb-wrap {position: relative; margin:0; padding:0; width: 100%;}
.tb-list {position: relative; margin:0; padding:0; width: 100%;}
.tb-list th {margin:0 auto; padding:10px 5px; text-align: center; font-size: 13px; font-family: "Noto Sans KR", serif; color:#fff; background: linear-gradient(90deg, #444 0%, #333 100%);}
.tb-list td {margin:0 auto; padding:5px 5px; line-height: 38px; text-align: center; font-size: 13px; font-family: "Noto Sans KR", serif; color: #f0f0f0; background: rgba(27, 58, 75, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.tb-list td.list-number {width:12%; text-align: center;}
.tb-list td.list-con {text-align: left;}
.tb-list td.list-con > a {display: block; width: 580px; line-height: 38px; text-align: left; font-weight: 500; font-family: "Noto Sans KR", serif; color: #ccccf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tb-list td.list-writing {width:10%; text-align: center;}
.tb-list td.list-date {width:15%; text-align: center;}

.view-list {display: none;}
.view-list td {margin:0; padding:20px 20px 20px 50px; width: 100%; text-align: left;}
.view-list td > p {margin:0 auto; padding:0; width: 100%; text-align: left; font-size: 20px; color:#fff;}

@media (hover: hover) and (pointer: fine) {
	/* tb-wrap */
	.tb-list tbody tr:hover td {background: rgba(27, 58, 75, 0.8); }
	.tb-list tbody tr.view-list:hover td {background: rgba(27, 58, 75, 0.5); }
}

/****************************************************************************************************************************************
intro-wrap
****************************************************************************************************************************************/
.intro-wrap {position: relative; margin:0 auto; padding: 30px 30px; width: 400px; background: url('../img/bg1.jpg') center repeat; border-radius: 10px; box-shadow: 50px 50px 50px rgba(0, 0, 0, 0.8);}

ul.intro-list {position: relative; margin:0 auto; padding:0; width: 100%; text-align: center;}
ul.intro-list > li {position: relative; margin: 3px auto; width: 100%; text-align: center;}
ul.intro-list > li > input {margin:0; padding: 0 10px; width: 100%; line-height: 46px; text-align: left; font-size: 15px; font-family: "Noto Sans KR", serif; color: #fff; text-shadow: 1px 2px 2px rgba(0,0,0,0.3); background: #333; border: 1px #000 solid; border-radius: 4px;}
ul.intro-list > li > input::placeholder {font-size: 12px; color:#c5c5c5;}

/* 회원가입 */
ul.intro-list > li > select {position: relative; margin:0; padding: 0 10px; width: 100%; height: 46px; line-height: 46px; text-align: left; font-size: 15px; font-family: "Noto Sans KR", serif; color: #fff; text-shadow: 1px 2px 2px rgba(0,0,0,0.3); background: #333; border: 1px #000 solid; border-radius: 4px;}
ul.intro-list > li > select:invalid {color:#c5c5c5;}

ul.intro-list > li.check-list {display: flex; justify-content: space-between;}
ul.intro-list > li.check-list > .input-2 {width:70%;}
ul.intro-list > li.check-list > .btn_check {margin:0 auto; padding:0; width:28%; line-height: 46px; font-size:14px;}

/* intro-btns */
.intro-btns {position: relative; margin: 2px auto; padding:0; width: 100%; text-align: center;}
.intro-btns > button {margin: 3px auto; padding: 0 10px; width: 100%; line-height: 46px; text-align: center; font-size: 14px;}

/****************************************************************************************************************************************
game-wrap
*****************************************************************************************************************************************/
.game-wrap {position: relative; margin:0 auto; padding: 30px 30px; width: 1360px; min-height: 400px; background: url('../img/bg2.jpg') center top repeat; border-radius: 10px; box-shadow: 50px 50px 50px rgba(0, 0, 0, 0.8);}

ul.slot-list {position: relative; margin:40px 0 25px 0; padding:0; width: 100%; display: flex; flex-wrap: wrap; gap:20px 15px; justify-content: center; align-items: center;}
ul.slot-list > li {width: calc(100% / 5 - 15px); cursor: pointer;}

@media (hover: hover) and (pointer: fine) {
    ul.slot-list > li:hover {animation: slotImg 1s ease-in-out; transform-origin: 90% 100%;}
}

@keyframes slotImg {
	0%   {transform:rotate(0deg) scaleY(1.1);}
	20%  {transform:rotate(-1deg) scaleY(1.05);}
	35%  {transform:rotate(2deg) scaleY(1);}
	50%  {transform:rotate(-1deg);}	
	65%  {transform:rotate(1deg);}	
	80%  {transform:rotate(-1deg);}		
	100% {transform:rotate(0deg);}									
}

/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width:1390px) {
	/* 레이어 팝업 */
	.layer-wrap {width: 100%;}
	.layer-bg {padding:15px 15px;}

	/* game-wrap */
    .game-wrap {width: 100%;}
} /* 미디어쿼리문 끝 */

@media (max-width:1200px) {
	/* slot-list */
	ul.slot-list {gap:10px;}
	ul.slot-list > li {width: calc(100% / 4 - 10px);}
} /* 미디어쿼리문 끝 */

@media (max-width:1030px) {
	/* popup-wrap */
	.popup-wrap {width: 100%;}
} /* 미디어쿼리문 끝 */

@media (max-width:930px) {
	.popup-wrap,
	.game-wrap {padding: 30px 15px;}	

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

	/* tb-write */
	.tb-write th, 
	.tb-write td {padding: 10px 5px;}
	.tb-write th {width: 18%; text-align: center;}

	ul.moneyBtns {justify-content: flex-start;}
	ul.moneyBtns > li {margin:0; width: calc(100% / 4 - 5px);}

	/* tb-list */
	.tb-wrap {padding-bottom:10px; overflow-x: auto;}	
	.tb-list {width: 931px;}

	/* popup-btns */
	.popup-btns-right {justify-content: center;}
} /* 미디어쿼리문 끝 */

@media (max-width:639px) {
	.layer-close {padding:0 0 10px 0;}
	.popup-tit {padding: 3px 15px 0 15px; font-size: 20px;}

	/* slot-list */
	ul.slot-list {margin: 25px 0 0 0;}
	ul.slot-list > li {width: calc(100% / 2 - 5px);}
	ul.slot-list > li > img {width: 100%;}

	/* tb-write */
	.tb-write th,
	.tb-write td > p {font-size: 12px;}
	.tb-write td > input {width:100%;}
	ul.moneyBtns > li {font-size: 13px;}
} /* 미디어쿼리문 끝 */

@media (max-width:430px) {
	/* intro-wrap */
	.intro-wrap {padding: 30px 15px; width: 100%;}
} /* 미디어쿼리문 끝 */
/* [hangang 추가] 슬롯 게임목록 팝업(#gamePopup) 숨김/표시 — st10-venus 규칙 이식 (han popup.css 누락분) */
.game-popup {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: var(--z-game-popup);
    background: rgba(5, 13, 26, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    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: rgba(10, 22, 40, 0.96);
    border: 1px solid rgba(0, 212, 170, 0.2);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 212, 170, 0.12);
}
.game-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--bg-layer2);
    border-bottom: 1px solid rgba(0, 212, 170, 0.15);
}
.game-popup-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--earth-text);
    font-family: 'Orbitron', 'Noto Sans KR', sans-serif;
    letter-spacing: 0.02em;
}
.game-popup-close {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(26, 58, 92, 0.8);
    border: 1px solid rgba(0, 212, 170, 0.3);
    border-radius: 50%;
    color: var(--earth-text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s;
}
.game-popup-close:hover {
    background: rgba(0, 212, 170, 0.2);
    color: var(--earth-text);
    border-color: var(--earth-primary);
}
.game-popup-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: rgba(5, 13, 26, 0.4);
}
.game-popup-loading {
    display: none;
    text-align: center;
    padding: 40px;
    color: var(--earth-text-muted);
}
.game-popup-loading.active { display: block; }

/*==========================================================================
  [hangang] han 버튼 이미지 복원 — 브리지 auth-st10.css 의 청록/블루 그라디언트를
  이기고 han 원본 btn1(보라)/btn2(회색) 이미지 버튼으로. popup.css 가 마지막 로드 +
  .intro-popup .btnN (2클래스=0,2,0) 로 브리지 단일클래스(.go-login 등 0,1,0)를 이김.
==========================================================================*/
.intro-popup .intro-btns > button,
.intro-popup .check-list > .btn_check {
    border: none;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    border-radius: 4px;
    box-shadow: rgba(0,0,0,0.3) 2px 2px 2px -1px;
}
.intro-popup .btn1,
.intro-popup .check-list > .btn_check {
    background: url('../img/btn1.jpg') center top no-repeat;
    background-size: 100% 100%;
}
.intro-popup .btn2 {
    background: url('../img/btn2.jpg') center top no-repeat;
    background-size: 100% 100%;
}
@media (hover: hover) and (pointer: fine) {
    .intro-popup .btn1:hover,
    .intro-popup .check-list > .btn_check:hover {
        background: url('../img/btn1over.jpg') center top no-repeat;
        background-size: 100% 100%;
        filter: none;
        transform: none;
    }
    .intro-popup .btn2:hover {
        background: url('../img/btn2over.jpg') center top no-repeat;
        background-size: 100% 100%;
        filter: none;
        transform: none;
    }
}

/*==========================================================================
  [hangang] 회원 페이지(풀페이지化) 보정 — han 레이어팝업 popup-wrap 을 풀페이지로.
  · 상단 헤더와 겹치지 않게 상단여백  · 폼 입력 full-width  · 섹션 서브헤딩(popup-subtit)
==========================================================================*/
.member-page { margin: 30px auto; }
.member-page .tb-write td > input,
.member-page .tb-write td > select { width: 100%; box-sizing: border-box; line-height: 26px; }
.member-page .tb-write td > input[readonly] { background:#1a1a1a; color:#cfcfcf; }
/* 섹션 서브헤딩 — han 톤(보라 좌측 액센트) */
.popup-subtit {
    position: relative;
    margin: 25px 0 0 0;
    padding: 10px 14px;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, rgba(96,17,194,0.55), rgba(0,0,0,0.15));
    border-left: 3px solid #b388ff;
    border-radius: 4px;
}
.popup-subtit > i { margin-right: 6px; color: #d0a6ff; }

/*==========================================================================
  [hangang] han 모달 닫기 버튼 (popup_close.png "Close X") — 원본 han-8120.com 동일.
  풀페이지化된 팝업(popup-wrap/game-wrap) 상단 중앙에 걸치게 배치, 클릭시 메인 복귀.
==========================================================================*/
.popup-wrap .close_box,
.game-wrap .close_box {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    cursor: pointer;
    line-height: 0;
}
.popup-wrap .close_box img,
.game-wrap .close_box img {
    width: 130px;
    height: auto;
    display: block;
    transition: filter 0.15s, transform 0.15s;
}
.popup-wrap .close_box:hover img,
.game-wrap .close_box:hover img {
    filter: brightness(1.12);
    transform: scale(1.04);
}
@media (max-width: 767px) {
    .popup-wrap .close_box img,
    .game-wrap .close_box img { width: 100px; }
    .popup-wrap .close_box,
    .game-wrap .close_box { top: -18px; }
}

/****************************************************************************************************************************************
게임명 검색 — 스킨 톤 오버라이드 (공용 기본: css/business/game-popup-search.css)
*****************************************************************************************************************************************/
.game-popup .game-popup-search-input { background: rgba(5, 13, 26, 0.6); border-color: rgba(0, 212, 170, 0.3); color: var(--earth-text); }
.game-popup .game-popup-search-input:focus { border-color: rgba(0, 212, 170, 0.7); }
.game-popup .game-popup-search-clear { background: rgba(26, 58, 92, 0.9); color: var(--earth-text-muted); }
.game-popup .game-popup-search-count { color: var(--earth-text-muted); }

/****************************************************************************************************************************************
SweetAlert z 오버라이드 — 기본 1060이라 게임팝업(40000) 뒤에 로딩/오류창이 깔리는 문제. W16(999999)·W17(--z-alert) 선례 패턴.
!important = swal 자체 스타일시트 로드 순서와 무관하게 보장
*****************************************************************************************************************************************/
.swal2-container { z-index: var(--z-alert, 100000) !important; }