@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 10px; 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 */
.layer-close {position: absolute; right: 12px; top: 12px; z-index: 1; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; border: none; cursor: pointer;}
.layer-close:before, 
.layer-close:after {content: ''; position: absolute; left: 0; right: 0; top: 10px; bottom: 0; margin:0 auto; width: 2px; height: calc(100% - 20px); background:#ffd989; transform: rotate(45deg); transition: 0.5s;}
.layer-close:after {transform: rotate(-45deg);}

/* layer-con */
.layer-con {position: relative;}

@media (hover: hover) and (pointer: fine) {
	/* layer-close */
	.layer-close:hover:before {transform: rotate(135deg); background: #dc431f;}
	.layer-close:hover:after {transform: rotate(-135deg); background: #dc431f;}
}

/****************************************************************************************************************************************
팝업 공통
*****************************************************************************************************************************************/
.popup-wrap {position: relative; display: flex; flex-direction: column; align-items: center; min-width: 980px; width: 100%;}

/* popup-hd */
.popup-hd {position:relative; margin:0; padding: 0; width: 100%; height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(#ae9c48, #251b0d, #251b0d); border-radius: 15px;}
.popup-tit {position:relative; margin:0 auto; padding: 0; width: 100%; text-align: center;}
.popup-tit > h3 {position:relative; margin:0 auto; padding: 0; width: 100%; text-align: center; font-size: 24px; color:#fff;}
.popup-tit > p {position:relative; margin:0 auto; padding: 0; width: 100%; text-align: center; font-size: 10px; letter-spacing: 5px; color:#ffd989;}

/* popup-body */
.popup-body {position:relative; margin: 5px 0 0 0; padding:30px 40px; width: 100%; background: #251b0d; border-radius: 10px;}

/* popup-list */
ul.popup-list {position: relative; margin:0 auto 40px auto; padding:0; width: 100%; text-align: center;}
ul.popup-list > li {position: relative; margin:20px auto;}
ul.popup-list > li > label {display:block; position: relative; margin: 0 auto 6px auto; padding: 0 0 0 5px; width: 100%; text-align: left; font-size: 12px; font-weight: 500; color: #ebdec3;}
ul.popup-list > li > input {position: relative; margin:0; padding: 0 15px; width: 100%; height: 44px; color: #000; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); border: none; border-radius: 8px;}
ul.popup-list > li > input::placeholder {color:#3d3d3d;}

/* btns-money */
.btns-money {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 5px;}
.btns-money > button {position: relative; margin: 0 auto; padding: 0; width: calc(100% / 6 - 5px); height: 38px; font-size: 12px; color: #fff; background: #625747; border: none; border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.5);}
.btns-money > button.btn-edit {background: #a34141;}

/* popup-btns */
.popup-btns {position: relative; margin:0; padding:0 30px; width: 100%; display: flex; justify-content: center; align-items: center; gap:15px;}
.popup-btns > button {margin:0 auto; padding:15px 0; width: 170px; text-align: center;}

/* 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:15px 5px; text-align: center; font-size: 12px; color:#fff; background: rgba(0, 0, 0, 0.25);}
.tb-list td {margin:0 auto; padding:5px 5px; text-align: center; font-size: 12px; color:#fff; background: rgba(255, 255, 255, 0.08); border-bottom: solid 1px rgba(0, 0, 0, 0.25); border-top: solid 1px rgba(255, 255, 255, 0.05);}
.tb-list td.list-number {width:15%; text-align: center;}
.tb-list td.list-con {text-align: left;}
.tb-list td.list-con > a {display: block; line-height: 38px; text-align: left; font-weight: 500; color: #ccccf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.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) {
	/* btns-money */
	.btns-money > button:hover {background: #917853;}
	.btns-money > button.btn-edit:hover {background: #ff4d4d;}

	/* tb-wrap */
	.tb-list tbody tr:hover td {background: rgba(255, 255, 255, 0.05);}
	.tb-list tbody tr.view-list:hover td {background: rgba(255, 255, 255, 0.08);}
}

/****************************************************************************************************************************************
intro 시작
*****************************************************************************************************************************************/
.intro-wrap {min-width: 600px;}
ul.intro-list {position: relative; margin:0 auto; padding:0; width: 100%; text-align: center;}
ul.intro-list > li {position: relative; margin:20px 0;}
ul.intro-list > li > input {position: relative; margin:0; padding: 0 15px; width: 100%; height: 44px; color: #000; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); border: none; border-radius: 8px;}
ul.intro-list > li > input::placeholder {color:#3d3d3d;}

/* 회원가입 */
ul.intro-list > li > select {position: relative; margin: 0; padding:0 15px; width:100%; height:44px; line-height: 40px; font-size:14px; font-weight: 500; color:#000; background:#fff; border:none; border-radius: 8px; transition: 0.3s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);}
ul.intro-list > li > select:invalid {color:#3d3d3d;}

/* 🔴 이 스킨은 어두운 팝업 안에 입력칸만 흰색이다(위 94·99행의 background:#fff).
   페이지는 data-theme="dark" 라 공용 auth-floating.css 의 color-scheme:dark 가 걸리는데,
   그러면 브라우저가 그리는 자동완성 "미리보기" 글자가 흰색이 되어 흰 배경 위에서 사라진다
   (st88bet 실측: 대비 1.0 — 글자색·배경 둘 다 rgb(255,255,255)).
   🔴 color-scheme 은 페이지 테마가 아니라 **그 입력칸 자신의 배경**을 따라가야 한다.
   배경을 흰색으로 바꾼 이 파일이 color-scheme 도 같이 책임진다.
   🔴 body.skin-st88-cheongung 을 붙여 specificity 를 올린 이유: 공용 규칙과 같은
   (0,2,3) 이면 로드 순서에만 의존하게 되는데, 이 스킨은 popup.css 가 auth-floating.css
   보다 나중에 로드되는 역순 구조라 순서가 바뀌면 조용히 깨진다.
   ※ hangang 이 body 클래스(skin-st88-cheongung)를 공유하지만 이 파일을 로드하지 않는다
     (각자 @p/css/popup.css → hangang 은 자기 것). hangang 입력칸은 #333 이라 dark 가 맞다. */
html[data-theme="dark"] body.skin-st88-cheongung ul.intro-list > li input,
html[data-theme="dark"] body.skin-st88-cheongung ul.intro-list > li select { color-scheme: light; }

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%; height:44px; line-height: 40px; font-size:14px; font-weight: 500; color:#fff; background: #976f37; border: none; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.5);}

/* intro-btns */
.intro-btns {position: relative; margin:0; padding:0 30px; width: 100%; display: flex; justify-content: center; align-items: center; gap:15px;}
.intro-btns > button {margin:0 auto; padding:15px 0; width: calc(100% / 2 - 15px); text-align: center;}

@media (hover: hover) and (pointer: fine) { 
    ul.intro-list > li.check-list > .btn_check:hover {background:#917853}
}

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

@media (max-width: 767px) {
	/* popup-hd */
	.popup-hd {height: 85px;}

	/* tb-wrap */
	.tb-list td.list-con > a {width: 200px;}
	.tb-list td.list-number {width: 10%;}
	.tb-list td.list-date {min-width: 75px; font-size: 12px;}
}/* 미디어쿼리문 끝 */

@media (max-width: 639px) {
	/* 팝업공통*/	
	.popup-body {padding:20px 15px 40px 20px;}

	.btns-money {flex-wrap: wrap;}
	.btns-money > button {width: calc(100% / 3 - 5px);}

	/* tb-wrap */
	.tb-wrap {padding-bottom:20px; overflow-x: auto; overflow-y: hidden;}
	.tb-list {width: 640px;}

	/* .intro-wrap  */
	.intro-wrap {min-width: 100%;}
	.intro-btns {padding:0; flex-wrap: wrap;}
	.intro-btns > button {padding: 11px 0; width:100%;}
}/* 미디어쿼리문 끝 */