@charset "utf-8";
/*
	비동기 alert / confirm / prompt 모달 스타일.
	assets/js/modal.js 와 한 쌍이며, 프론트(head.php)와 관리자(admin/views/header.php)가 함께 사용한다.
	원래 common.css 안에 있었으나 관리자에서도 쓰기 위해 분리했다.
*/
.custom-alert-overlay {position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;transition:all .5s;-webkit-transition:all .5s;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;}
.custom-alert-overlay .custom-alert-modal {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border-radius:10px;max-width: 280px;width: 100%;}
.custom-alert-overlay .custom-alert-modal .custom-alert-title {font-size:20px;font-weight:700;margin-bottom:10px;}
.custom-alert-overlay .custom-alert-modal .custom-alert-message {font-size:16px;margin-bottom:20px;}
.custom-alert-overlay .custom-alert-modal .custom-alert-btn-wrap {display:flex;justify-content:center;gap:10px;}
.custom-alert-overlay .custom-alert-modal .custom-alert-btn-wrap .custom-alert-btn {padding:10px 20px;background:#000;color:#fff;font-size:16px;font-weight:700;border-radius:5px;cursor:pointer;}

/* --- 아래는 추가분 --- */

/* 여러 줄 메시지에서 줄바꿈을 살린다 (\n 포함 메시지) */
.custom-alert-overlay .custom-alert-modal .custom-alert-message {white-space:pre-line;word-break:break-word;}

/* 취소 버튼은 확인 버튼과 구분 */
.custom-alert-overlay .custom-alert-modal .custom-alert-btn-wrap .custom-alert-cancel {background:#fff;color:#333;border:1px solid #ccc;}

/* prompt 모드 입력란 */
.custom-alert-overlay .custom-alert-modal .custom-alert-input {width:100%;box-sizing:border-box;padding:10px;margin-bottom:20px;border:1px solid #ccc;border-radius:5px;font-size:16px;}
.custom-alert-overlay .custom-alert-modal .custom-alert-input:focus {outline:none;border-color:#333;}

/* 확인/취소가 있는 경우 좁은 화면에서 버튼이 눌리기 쉽도록 */
@media screen and (max-width:640px){
	.custom-alert-overlay .custom-alert-modal {max-width:none;width:calc(100% - 40px);}
	.custom-alert-overlay .custom-alert-modal .custom-alert-btn-wrap .custom-alert-btn {flex:1 1 0;}
}