/*
=========================================================================
모달 css
=========================================================================
*/
.modal{background: var(--bg); border: 1px solid var(--border); border-radius: 10px; max-width: 550px; width: calc(100% - 2em); position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); padding: 1.5em; text-align: center; box-sizing: border-box; z-index: 999999; display: none;}
.modal .closeBtn{position: absolute; top:15px; right:15px;}
.modal .mainTit{font-size: 1.15em; text-align: left;}
.modal .modalCont{min-height: 100px; max-height: calc(95dvh - 300px); overflow-y: auto; }
.modal .modalCont img{width: 100%;}
.modal .modalBtnWrap{display: flex; gap: 10px; width: 100%; margin-top: 30px;}
.modal .modalBtnWrap>button{flex: 1;}

@media (max-width: 600px) {
    .modal{padding: 1em 1.5em;}
}

/*
=========================================================================
modal_tag.php 태그선택 모달
=========================================================================
*/
.modal_tag .menuTab{margin-bottom: 0;}

/*
=========================================================================
modal_chatmodel.php AI모델 선택 모달
=========================================================================
*/
.modal_chatmodel .aiModelWrap{flex-direction: column; gap: 15px; margin-bottom: 0;}
.modal_chatmodel .aiModelWrap>li{width: 100%; border-radius: 10px; text-align: left; padding: .5em 1em;}
.modal_chatmodel .aiModelWrap h5{font-size: 1.1em; margin-bottom: 3px;}
.modal_chatmodel .aiModelWrap p{font-size: .95em; color: var(--gray);}
.modal_chatmodel .aiModelWrap>li.active p{color: #fff;}
.modal_chatmodel .aiModelWrap .point{font-size: .85em; font-weight: 400; display: inline-block; margin-left: 8px; border: 1px solid #cccccc66; border-radius: 40px; padding: .1em .6em;}
.modal_chatmodel .aiModelWrap .point::before{content:''; display: inline-block; width: 14px; height: 14px; background: url(../img/common/can_icon.png) no-repeat center / contain; margin-right: 5px; transform: translateY(1px);}

/*
=========================================================================
modal_chatedit.php 채팅 수정 모달
=========================================================================
*/
.modal_chatedit .chateditForm textarea{width: 100%; height: 400px; resize: none;} 
.modal_chatedit .chateditForm .fTit{text-align: left;}

/*
=========================================================================
modal_confirm.php 확인 모달
=========================================================================
*/
.modal .confirmTxt{font-size: 1.1em;}
.modal_confirm .modalCont, .modal_alert .modalCont{display: flex; flex-direction: column; justify-content: center;}

/*
=========================================================================
popup.php 팝업
=========================================================================
*/
.modal_popup{z-index: 9999999;}
.pSwiper-wrapper{position: relative;}
.pSwiper-wrapper .swiper-pagination{bottom: 10px !important; text-align: center; z-index: 50;}
.pSwiper-wrapper .swiper-pagination-bullet{background: rgba(255,255,255,0.45); width: 8px; height: 8px; opacity: 1; margin: 0 6px !important; border-radius: 50%; transition: background 0.3s ease;}
.pSwiper-wrapper .swiper-pagination-bullet-active{background: #fff;}

/*
=========================================================================
modal_createEx.php 예시 문답 추가 모달
=========================================================================
*/
.modal:has(.createModalCont){max-width: 800px;}
.createModalCont .formInputWrap{display: flex !important; max-height: none !important; overflow: visible !important;}
.createModalCont textarea{height: 190px;}
.createModalCont textarea.shortText{height: 100px;}
.createModalCont .fTit{text-align: left; font-size: 1.1em;}
.createModalCont .create_basic{display: none;}