@charset "utf-8";
/*** popup ***/

/* alert ....*/
/* 전체 배경 및 박스 스타일 */
.jconfirm.jconfirm-dark .jconfirm-box {
	background: #fff !important;
	border-radius: 20px !important;
	border: 0 !important;
	padding: 25px !important;
	box-sizing:border-box;
	width: 90%;
	box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.10);
}

/* 제목(Title) 스타일 */
.jconfirm.jconfirm-dark .jconfirm-title-c {
	color: #2A2D33 !important;
	font-size: 18px !important;
	font-family: Pre_B !important;
	/*font-weight: bold !important;*/
	text-align: center;
	border-bottom: 1px solid #E9E7E7;
	padding-bottom: 10px;
	margin-bottom: 15px
}

/* 내용(Content) 스타일 */
.jconfirm.jconfirm-dark .jconfirm-content {
	color: #5A5A5A !important; /* 연보라색 텍스트 */
	font-size: 14px !important;
	text-align: center;
	margin-top: 10px !important;
}

/* [중요] 버튼 스타일 커스텀: 흰색 버튼 방지 */
.jconfirm.jconfirm-dark .jconfirm-buttons {
	float: none !important; /* 버튼 중앙 정렬 */
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
	padding-bottom:0 !important;
}
.jconfirm.jconfirm-dark .jconfirm-buttons button {
	background-color: #5A5A5A !important;
	border: none !important;
	border-radius: 25px !important;
	padding: 12px 30px !important;
	box-sizing:border-box;
	color: #fff !important;
	font-family: Pre_B !important;
	font-size:14px !important;
	/*font-weight: bold !important;*/
	cursor: pointer !important;
	transition: all 0.3s !important;
}

/* 보라색 확인 버튼 */
.jconfirm.jconfirm-dark .jconfirm-buttons button.btn-purple {
	background-color: #5A5A5A !important;
	font-family: Pre_B !important;
	font-size:14px !important;
	color: #fff !important;
	border: none !important;
	border-radius: 30px !important;
	padding: 10px 30px !important;
	/*font-weight: bold !important;*/
	text-shadow: none !important;
	box-shadow: none !important;
}
			
/* 회색 취소 버튼 */
.jconfirm.jconfirm-dark .jconfirm-buttons button.btn-default {
	background-color: #5A5A5A !important;
	color: #fff !important;
	font-family: Pre_B !important;
	font-size:14px !important;
	border: none !important;
	border-radius: 30px !important;
	padding: 10px 30px !important;
	text-shadow: none !important;
}

/* 버튼 호버 효과 */
.jconfirm.jconfirm-dark .jconfirm-buttons button:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}  
/* 모달 반응형 너비 조절 */
@media (max-width: 576px) {
	.modal-dialog { margin: 10px; }
	.modal-dialog.modal-fullscreen { margin: 0px; }
	.card_info { padding: 15px; }
	.card_num { gap: 4px; }
}
/** 타로 스토리텔링 팝업 **/
/* 1) 모달을 "진짜" 전체화면처럼 (여백/둥근모서리 제거) */
    .modal-fullscreen .modal-content {
	  width: 100%;
      border-radius: 0;
      border: 0;
    }

    /* 2) backdrop(뒷배경) 반투명 + 블러(선택) */
    .modal-backdrop.show {
      opacity: 0.35;              /* 기본보다 더 투명하게 */
    }
    /* 블러를 원하면: (브라우저 지원 필요) */
    .modal-backdrop {
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    /* 3) 모달 내부도 살짝 투명하게 하고 싶다면(선택) */
    .modal-content.glassy {
      background: rgba(0, 0, 0, 0.80);
    }

.modal {
  position: fixed !important;
  inset: 0;
  z-index: 20000 !important;
}

.modal-backdrop {
  position: fixed !important;
  z-index: 19999 !important;
}
.modal-dialog {
    width: 100%;
}

.main_popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	z-index: 1000;
	width: 90%;
	max-width: 330px;
	display: none; 
}
/*** 메인팝업 추가 260521 ***/
.main_popup .banner_area {
	background: #fff;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 15px 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.main_popup .banner_box {
    height: 120px;
    width: 100%;
    padding: 0 20px 0 28px;
    box-sizing: border-box;
    border-radius: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main_popup .banner_box .tit_txt .txt_01 {
    color: #000;
    font-family: Pre_SB;
    font-size: 18px;
    line-height: 20px; /* 90.909% */
    letter-spacing: -0.5px;
    margin-bottom: 7px;
}
.main_popup .banner_box .tit_txt .txt_02 {
    color: #000;
    font-family: Pre_M;
    font-size: 13px;
    line-height: 16px; /* 123.077% */
    letter-spacing: -0.5x;
}
.main_popup .banner_box.br_app_down {
    background: #DFECFF;
}
.main_popup .banner_box.br_luckybox {
    background: #FFF5E0;
}
.main_popup .banner_box.br_card {
    background: #F7E3E3;
}
.main_popup .banner_box.br_check{
    background: #D5EAE6;
}
.main_popup .banner_box.br_13min{
    background: #d7efd4;
}
.main_popup .banner_box.br_app_down .br_img img {
    width: 65px;
	margin-right: 13px;
}
.main_popup .banner_box.br_luckybox .br_img img {
    width: 95px;
}
.main_popup .banner_box.br_check .br_img img {
    width: 95px;
}
.main_popup .banner_box.br_card .br_img img {
    width: 90px;
}
.main_popup .banner_box.br_13min .br_img img {
    width: 85px;
}
.main_popup .banner_box.br_roulette .br_img img {
    width: 85px;
	margin-right: 5px;
}
.main_popup .banner_box.br_card .txt_01>span {
    display: block;
    font-size: 16px;
    line-height: 27px;
}
.main_pop_dim {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5); 
	z-index: 999;
	display: none; 
}
.main_popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	z-index: 1000;
	width: 90%;
	max-width: 400px;
}
.main_popup .btn_area {
	border-radius: 0 0 15px 0px;
	display: flex;
	justify-content: space-between;
	background: #fff;
	padding: 10px 20px 15px 20px;
	box-sizing: border-box;
	margin-top: -1px;
}
.main_popup .btn_area .btn_close {
	background: none;
	border: 0;
	font-family: pre_SB;
	font-size: 15px;
}
.main_popup .btn_area .agree_label .checkmark {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: url(/images/check_off_01.svg) no-repeat;
    background-size: contain;
}
.main_popup .btn_area .label_text {
	font-size: 14px;
	font-family: pre_M;
	color: #5A5A5A;
}
.banner_box.app {
	display: none;
}

@media screen and (max-width:470px){
	.banner_box.app {
		display: flex;
	}
	/*
	.banner_box.web {
		display: none;
	}*/
	.main_popup .banner_box {
		height: 110px;
		padding: 0 20px 0 20px;
	}
	.main_popup .banner_box .tit_txt .txt_01 {
		font-size: 16px;
		line-height: 18px; /* 90.909% */
		margin-bottom: 5px;
	}
	.main_popup .banner_box.br_card .txt_01>span {
		display: block;
		font-size: 14px;
		line-height: 25px;
	}
	.main_popup .banner_box .tit_txt .txt_02 {
		font-size: 12px;
	}
	.main_popup .banner_box.br_luckybox .br_img img {
		width: 80px;
	}
	.main_popup .banner_box.br_app_down .br_img img {
		width: 55px;
	}
	.main_popup .banner_box.br_check .br_img img {
		width: 75px;
	}
	.main_popup .banner_box.br_card .br_img img {
		width: 80px;
	}
	.main_popup .banner_box.br_13min .br_img img {
		width: 70px;
	}
	.main_popup .banner_box.br_roulette .br_img img {
		width: 75px;
	}
}

/*** 카드선택 모달팝업 ***/
/*** 모달팝업***/
.bg {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    opacity: 0.6;
    z-index: 1000;
    overflow: hidden;
}

.bg.show {
    display: block;
}
.modal-pop {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 750px;
    width: 100%;
	border-radius: 15px;
	background-color: #fff;
	z-index: 10000;
}
.modal-pop.show {
    display: block;
}

.modal-pop.show {
	display: block;
}
.modal-pop.talk-end-pop{
    max-width: 350px;
}
.cardlist-pop .pop_tit{
    position: relative;
    font-size: 16px;
    padding: 25px 25px 15px 25px;
    box-sizing: border-box;
    text-align: center;
}

.cardlist-pop .pop_content, .talk-end-pop .pop_content  {
    padding: 10px 15px 15px 15px;
    box-sizing: border-box;
}
.cardlist-pop .pop_tit .btn_pop_close {
    position: absolute;
    top: 15px;
    right: 15px;
}

/*** 팝업 모바일일 경우 ***/
 @media screen and (hover: none) and (pointer: coarse) {
    
    .modal-pop {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 78.75vw;
        padding: 10.833vw 0 9.861vw;
        border-radius: 1.389vw;
        background-color: #fff;
        text-align: center;
        z-index: 10000;
    }
	.modal-pop.cardlist-pop.content-pop, .modal-pop.talk-end-pop.content-pop {
        padding-top: 0;
        padding-bottom: 0;
        background-color: #fff;
    }    
	.modal-pop.cardlist-pop, .modal-pop.talk-end-pop{
        position: fixed;
        width: 100%;
        top: auto;
        bottom: 0;
        left: 0;
        transform: translate(0, 100%);
        padding-top: 15.278vw;
        border-radius: 15px 15px 0 0;
        background-color: #343434;
    }       
	.modal-pop.cardlist-pop.show, .modal-pop.talk-end-pop.show  {
        animation: popTrans 0.6s ease both;
    }
        
	.modal-pop.cardlist-pop.hidePop, .modal-pop.talk-end-pop.hidePop   {
        transform: translate(0, 100%);
        display: block;
        animation: popTransHide 0.7s ease both;
    }     
    .modal-pop.talk-end-pop {
        max-width: 100%;
    }
        
    @keyframes popTransHide {
        0% {
            transform: translate(0, 0);
        }
        100% {
            transform: translate(0, 120%);
            display: none;
        }
    }
    
    @keyframes popTrans {
        0% {
            transform: translate(0, 100%);
        }
        100% {
            transform: translate(0, 0);
        }
    }
    
}