@charset "utf-8";
/*** popup ***/
/* 전체 모달 컨테이너 (딤 레이어) 스타일 */
.modal {
    position: fixed; /* 화면에 고정 */
    z-index: 1000; /* 다른 요소 위에 표시 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
   /* background-color: rgba(0, 0, 0, 0.6);  딤 레이어 효과 */
  z-index: 1055 !important;

}

/* 배경(backdrop)은 그보다 낮게 */
.modal-backdrop {
  z-index: 1050 !important;
}
/* 모달 내용 박스 스타일 */
.modal-content {
  touch-action: pan-y;   /* 세로 스크롤만 허용, 가로 스와이프 억제 */
}


.modal.show {
  display: block !important;
  opacity: 1 !important;
}


.modal-content.popup_counsel {
	 background: linear-gradient(328deg, #440D6D 50.5%, #7C1EC1 80.15%) !important;
}
.popup_counsel .modal-content {
    margin: 0 auto;
    padding: 30px 0 0 0;
    box-sizing: border-box;
    width: 90vw;
    max-width: 500px;
	max-height: 90vh;
    background: linear-gradient(328deg, #440D6D 50.5%, #7C1EC1 80.15%);
    border-radius: 20px;
    border: 1px solid #70319F;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.10);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.popup_counsel .btn_close {
    position: absolute;
    right: 15px;
    top: 15px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
}
.popup_star .pop_tit, .popup_counsel .pop_tit {
    color: #FFF;
    text-align: center;
    font-family: numj_R;
    font-size: 16px;
    line-height: 20px; /* 125% */
    letter-spacing: -0.4px;     
}
.popup_star .mst_info {
    text-align: center;
    margin-top: 20px;
}
.popup_star .mst_info .mst_img {
    width: 76px;
    height: 76px;
    border-radius: 76px;
    background: #A873E8;
    position: relative;
    margin: 0 auto;
}
.popup_star .mst_info .mst_img img {
    border-radius: 76px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -38px;
}
.popup_star .mst_info .mst_name {
    margin-top: 13px;
}
.popup_star .mst_info .mst_name span {
    display: inline-block;
    color: #FFF;
    font-family: pre_B;
    font-size: 16px;
    line-height: 16px; /* 100% */
}
.popup_star .mst_info .mst_name span:first-child {
    padding-right: 8px;
    border-right: 0.5px solid;
    border-color: rgba(255, 255, 255, 0.50);
}
.popup_star .mst_info .mst_name span:last-child {
    padding-left: 8px;
}
.popup_star .point_total {
    margin-top: 24px;
    background: #480E73;
    display: flex;
    padding: 24px 20px;
    align-items: center;
    justify-content:center;
    align-self: stretch;
    flex-shrink: 0;
}
.popup_star .point_total .total_01 {
    display: flex;
    width: 105px;
    height: 92px;
    padding: 4px 20px 4px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.popup_star .point_total .total_01 .tit {
    color: var(--fontcolor-, #CBBCD6);
    text-align: center;
    font-family: Pre_M;
    font-size: 14px;
    line-height: 24px; /* 171.429% */
}
.popup_star .point_total .total_01 .su {
    color:#fff;
    text-align: center;
    font-family: Pretendard;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 60% */
}
.popup_star .point_total .total_02 {
    display: flex;
    max-width: 200px;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    flex: 1;
}
.popup_star .point_total .total_02 .item {
    display: flex;
    justify-content:space-between;
}
.popup_star .point_total .total_02 .tit_box {
    padding: 2px 11px;
    border-radius: 30px;
    background: rgba(128, 76, 166, 0.30);
    color: #FFF;
    font-family: pre_M;
    font-size: 12px;
    line-height: 18px; /* 150% */
    letter-spacing: -0.06px;
}
.popup_star .point_total .total_02 .count {
    color: #FFF;
    font-size: 14px;
    line-height: 22.4px; /* 160% */
}
.popup_star .month_list {
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    overflow-y: auto;
    margin: 0 auto;
}
.popup_star .month_list li {
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    align-self: stretch;  
    border-bottom: 0.5px solid #6D3597;
}
.popup_star .month_list li span {
    color: #FFF;
    font-family: Pre_M;
    font-size: 14px;
    line-height: 24px; /* 171.429% */
    letter-spacing: -0.35px;
}
.popup_star .month_list li span.txt_R {
    font-family: Pre_R;
}
.popup_star .month_list li span img {
    vertical-align:baseline;
    margin-right: 3px;
}

/*** 상담연결 팝업 ***/
.modal-content.popup_counsel {
    padding-bottom: 30px;
}
.popup_counsel .mst_info .mst_box {
    height: 106px;
    border-radius: 0;
    position: relative;
}
.popup_counsel .mst_info .mst_box .mst_img {
    position: absolute;
    bottom: 0;
    right: 14px;
}
.popup_counsel .mst_info .mst_box .mst_img img{
    width: 128px;
}
.popup_counsel {
    display: flex;
    flex-direction: column;
    gap: 12px; 
	padding-bottom: 30px !important;
}
.popup_counsel .mst_info .mst_box .mst_txt {
    padding: 26px 0 0 34px;
	text-align: left;
}
.popup_counsel .mst_info .mst_box .badge {
    display: inline-block;
    padding: 2px 12px;
    font-size: 12px;
    color:#fff;
    border-radius: 30px;
    border: 1px solid #FFF;
    margin-bottom: 12px;
    line-height: 18px;
}
.popup_counsel .mst_info .mst_box .name {
    color: #FFF;
    font-family: Pre_M;
    font-style: normal;
    font-size: 24px;
    line-height: 20px; /* 83.333% */
    letter-spacing: -0.12px;
}
.popup_counsel .comment {
    color: #FFF;
    text-align: center;
    font-family: Pre_R;
    font-size: 14px;
    line-height: 24px; /* 171.429% */
    letter-spacing: -0.35px;
    padding: 20px 20px 0 20px;
    box-sizing: border-box;
}
.popup_counsel .comment .accent_color {
    color: #E68368;
    font-family: Pre_SB;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.45px;
}

.popup_counsel .comment .accent_color_02, .popup_counsel .comment_s .accent_color_02 {
    color: #E68368;
    font-family: Pre_R;
    font-size: 14px;
}
.popup_counsel .btn_kakao {
    height: 40px;
    width: 100%;
    border-radius: 30px;
    border: 1px solid #FFE200;
    background: #E5D000;
}
.popup_counsel .btn_kakao span {
    color: #000;
    font-family: Pre_SB;
    font-size: 14px;
    line-height: 24px; /* 171.429% */
    display: inline-block;
    padding-left: 27px;
    background: url(/images/icon_kakao.svg) left center no-repeat;
}
.popup_counsel .btn_kakao_area {
    padding: 0 20px;
	box-sizing: border-box;
    text-align: center;
}
.popup_counsel .tel_info {
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}
.popup_counsel .tel_info .after_pay {
    width: 100px;
}
.popup_counsel .tel_info .pre_pay {
    flex: 1;
}
.popup_counsel .tel_info .btn_after {
    border-radius: 30px;
    background: #70319F;
    padding: 5px 10px 5px 10px;
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    color: #E2D0F0;
    font-family: Pre_M;
    font-size: 14px;
    line-height: 24px; /* 171.429% */
    border: none;
}
.popup_counsel .tel_info .btn_pre {
    border-radius: 30px;
    background: #AC57EB;
    padding: 5px 10px 5px 10px;
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    border: none;
}
.popup_counsel .tel_info .btn_pre span {
    display: inline-block;
    padding-left: 25px;
    color: #fff;
    font-family: Pre_M;
    font-size: 14px;
    line-height: 24px; /* 171.429% */
    background: url(/images/icon_tel_possible.svg) left center no-repeat;
}
.popup_counsel .tel_info .tel_num {
    color: #CBBCD6;
    font-family: Pre_M;
    font-size: 12px;
    line-height: 24px;
    margin-top: 12px;
    text-align: center;
}
.popup_counsel .tel_info .price {
    color: #FFF;
    font-family: Pre_R;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
}
.popup_counsel .tel_info .price span {
    color: #9C7FB8;
    font-family: Pre_L;
    font-size: 11px;
    line-height: 24px;
}
.popup_counsel .point_info {
    padding: 0 20px;
    box-sizing: border-box;
}
.popup_counsel .point_info .point_box {
    border-radius: 10px;
    border: 1px solid #8F63B0;
    background: rgba(255, 255, 255, 0.10);
    padding: 10px 12px;
    box-sizing: border-box;
    position: relative;
	text-align:left;
}
.popup_counsel .point_info .point_box .point_tit {
    display: inline-block;
    padding-left: 25px;
    background: url(/images/icon_point.svg) no-repeat left center;
    color: #FFF;
    font-size: 12px;
    line-height: 16px;
    height: 16px;
}
.popup_counsel .point_info .point_box .point_txt {
    color: #fff;
    font-family: Pre_M;
    font-size: 14px;
    line-height: 14px;
}
.popup_counsel .point_info .point_box .btn_charge {
    border-radius: 30px;
    border: 1px solid #36095A;
    background: #47176C;
    color: #FFF;
    font-size: 12px;
    line-height: 18px; /* 150% */
    letter-spacing: -0.06px;
    padding: 2px 11px;
    box-sizing: border-box;
    position: absolute;
    right: 12px;
    top: 9px;
}
.popup_counsel .btn_charge:hover {
    background: rgba(255, 255, 255, 0.1);
}
.popup_counsel .comment .line_bottom {
    border-bottom: 1px solid #6E3F91;
    padding-bottom: 16px;
}
.popup_counsel .comment_s {
    color: #FFF;
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 184.615% */
    letter-spacing: -0.325px;
    padding: 10px 20px;
    box-sizing: border-box;
    word-wrap:break-word;
    white-space: normal;
    word-break:keep-all;
}
.popup_counsel .btn_round_line {
    padding: 8px 16px;
    margin: 0 auto;
}
.popup_counsel .btn_wait_area {
    padding: 10px 20px;
    box-sizing: border-box;
}
.popup_counsel .btn_wait_area .btn_wait_apply {
    border-radius: 30px;
    border: 1px solid #41076B;
    background: #AC57EB;
    height: 50px;
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
}
.popup_counsel .btn_wait_area .btn_wait_apply span {
    display: inline-block;
    padding-left: 25px;
    color: #fff;
    font-family: Pre_M;
    font-size: 14px;
    line-height: 24px; /* 171.429% */
    background: url(/images/icon_tel_possible.svg) left center no-repeat;
}
/* 스크롤바 스타일 */
.popup_counsel .modal-content::-webkit-scrollbar {
    width: 6px;
}

.popup_counsel .modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.popup_counsel .modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

/*** 공유하기팝업 ***/
.popup_counsel .popup_cont {
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.popup_share .sns_list {
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}
.popup_share .sns_list button {
    background: none;
    border: none;  
}
.popup_share .sns_list button .name {
    display: block;
    color: #FFF;
    text-align: center;
    font-size: 12px;
    line-height: 30px; /* 250% */
}
.popup_share .url_area {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}
.popup_share .url_area .url_round_box {
    border-radius: 30px;
    border: 1px solid #A471C7;
    background: #3D0D61;
    height: 40px;
    line-height: 20px;
    padding: 8px 16px;
    box-sizing: border-box;
    flex: 1 0 0;
    color: #FFF;
    font-size: 12px;

    letter-spacing: -0.06px;
    overflow: hidden;
    text-overflow: ellipsis; 
}
.popup_share .url_area .btn_copy {
    border-radius: 30px;
    background: #AC57EB;
    width: 83px;
    height: 40px;
    padding: 8px 16px;
    box-sizing: border-box;
    border: none;
    color: #FFF;
    font-size: 12px;
    line-height: 18px; /* 150% */
    letter-spacing: -0.06px;
}
.popup_share .comment_s {
    color: var(--fontcolor-, #CBBCD6);
    text-align: center;
    font-size: 13px;
    line-height: 24px; /* 184.615% */
    letter-spacing: -0.325px;
    padding: 10px 0        ;
}
/*** 정렬방식 팝업 ***/
.popup_sort .popup_cont .tit {
    color: #FFF;
    font-family: Pre_M;
    font-size: 14px;
    line-height: 24px; /* 171.429% */
    letter-spacing: -0.35px;
    margin-bottom: 12px;
	text-align:left;
}
.popup_sort .popup_cont .term_tab {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}
.popup_sort .popup_cont .term_tab li {
    flex: 1;
}
.popup_sort .popup_cont .term_tab button {
    height: 40px;
    width: 100%;
    padding: 8px 5px;
    border-radius: 30px;
    border: 1px solid #8842b9;
    background: none;
    color: #FFF;
    font-family: Pre_M;
    font-size: 12px;
    line-height: 18px; /* 150% */
    letter-spacing: -0.06px;
}
.popup_sort .popup_cont .term_tab button.on {
    border: none;
    background: #AC57EB;
}
.popup_sort .popup_cont .line_bottom {
    margin: 12px 0;
    height: 0.5px;
    background: #5B3E71;
}
.popup_sort .popup_cont .sort_type {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
    align-self: stretch;
    flex-wrap: wrap;
    padding-bottom: 12px;
}
.popup_sort .popup_cont .sort_type li {
    width: calc(50% - 8px);
}
.popup_sort .popup_cont .sort_type li button {
    height: 40px;
    width: 100%;
    padding: 8px 16px;
    box-sizing: border-box;
    align-items: center;
    border-radius: 30px;
    border: 1px solid #782CB0;
    background: none;
    color: #FFF;
    font-family: Pre_M;
    font-size: 12px;
    line-height: 18px; /* 150% */
    letter-spacing: -0.06px;
}
.popup_sort .popup_cont .sort_type li button.on {
	background: #AC57EB;
}
.popup_sort .btn_area .btn_sort_apply {
    height: 50px;
    width: 100%;
    padding: 5px 10px;
    border-radius: 30px;
    border: 1px solid #41076B;
    background: #AC57EB;
}
.popup_sort .btn_area .btn_sort_apply span {
    display: inline-block;
    padding-left: 20px;
    background: url(/images/icon_sort.svg) no-repeat left center;
    color: #FFF;
    font-family: Pre_M;
    font-size: 14px;
    line-height: 24px; /* 171.429% */
}
/*** 선불충전 카드등록수정 팝업으로수정 251216 ***/
.popup_counsel.charge {
	padding: 20px;
	box-sizing:border-box;
	overflow-y: auto;
}
.popup_counsel.qna .section.notice {
	padding: 0 20px;
	box-sizing:border-box;
}
/*** 일대일문의 팝업으로변경수정 251216 ***/
.popup_counsel.modal-content.qna {
	 max-height: unset; /** 상단 이미지 잘리는 문제 **/
	 padding-top:20px;
}
.popup_counsel.mst_view .mst_info_01 {
    background: none;
	margin-bottom: 0;
	padding-bottom: 15px
}
.popup_counsel.mst_view .mst_img {
    height: 150px;
    background: url(/images/mst_bg_purple.svg) no-repeat;
    background-size: cover;
    position: relative;
}
.popup_counsel.mst_view {
	padding-top:0 !important;
}
.popup_counsel.mst_view .mst_img .mst_photo img {
    width: 150px;
}
.popup_counsel.mst_view .info_box .card .tag {
	width:100%;
	padding:0;
	border: none;
}
.popup_counsel.qna .notice_area {
    padding: 0px 20px 0px 20px;
    box-sizing: border-box;
    margin-top: -11px;
	text-align: left;
}
.popup_counsel.qna .qna_write p.tit {
	font-size:14px;
}
.popup_counsel.qna .qna_write .txt_left {
    width: 100%;
    text-align: left !important;
	padding-left: 20px;
	box-sizing:border-box;
}
.popup_counsel.qna .qna_write .write_box {
	padding: 10px 20px;
	box-sizing:border-box;
}
.popup_counsel.qna .qna_write textarea {
    width: 100%;
    height: 150px;
    border-radius: 20px;
    border: 1px solid #6F359A;
    background: #491173;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}
.popup_counsel.qna .qna_write textarea::placeholder  {
    color: rgba(255, 255, 255, 0.50);
    font-size: 12px;
    line-height: 18px;
    letter-spacing: -0.07px;
}
.popup_counsel.qna .btn_bottom_area {
	padding: 0 20px 0px 20px;
	box-sizing:border-box;
}
.modal-content.charge .btn_bottom_area {
	padding-top:30px;
}
.modal-content.charge .btn_bottom_area button span {
	border:none;
}





/* alert ....*/
/* 전체 배경 및 박스 스타일 */
.jconfirm.jconfirm-dark .jconfirm-box {
	background: linear-gradient(328deg, #440D6D 50.5%, #7C1EC1 80.15%) !important;
	border-radius: 15px !important;
	border: 1px solid #70319F !important;
	padding: 25px !important;
	box-sizing:border-box;
	width: 90%;
}

/* 제목(Title) 스타일 */
.jconfirm.jconfirm-dark .jconfirm-title-c {
	color: #fff !important;
	font-weight: bold !important;
	text-align: center;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	padding-bottom: 10px;
	margin-bottom: 15px;
}

/* 내용(Content) 스타일 */
.jconfirm.jconfirm-dark .jconfirm-content {
	color: #CBBCD6 !important; /* 연보라색 텍스트 */
	text-align: center;
}

/* [중요] 버튼 스타일 커스텀: 흰색 버튼 방지 */
.jconfirm.jconfirm-dark .jconfirm-buttons {
	float: none !important; /* 버튼 중앙 정렬 */
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}
.jconfirm.jconfirm-dark .jconfirm-buttons button {
	background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
	border: none !important;
	border-radius: 25px !important;
	padding: 12px 30px !important;
	box-sizing:border-box;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: bold !important;
	cursor: pointer !important;
	transition: all 0.3s !important;
}

/* 보라색 확인 버튼 */
.jconfirm.jconfirm-dark .jconfirm-buttons button.btn-purple {
	background-color: #AC57EB !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: #552d7a !important;
	color: #CBBCD6 !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; }
	.card_info { padding: 15px; }
	.card_num { gap: 4px; }
}