@charset "utf-8";

/* =============================================================
   공용 모달 vzmodal.js (2026-08-12)

   브라우저 기본 alert/confirm/prompt 를 대체한다.
   관리자(manage)와 프론트에서 함께 쓰므로 두 곳 모두에서 로드한다.

   색상은 관리자 디자인 토큰(manage/template/css/content.css)을 따른다.
     주색 #3390fa / 위험 #ea1c5b / 각진 모서리
   ============================================================= */

/*
   20260812 수정
   .vz-dialog 를 margin:14vh 로 위쪽에 붙여 두었더니 화면 위로 치우쳐 보이고,
   본문이 길거나 화면이 낮으면(가로모드 등) 확인 버튼이 화면 밖으로 나갔다.
   컨테이너를 flex 로 만들어 세로 가운데 정렬하고, 넘치면 모달 안에서 스크롤되게 한다.
*/
.vz-modal{
	display:none;			/* JS 가 열 때 flex 로 바꾼다 */
	position:fixed; top:0; left:0; right:0; bottom:0;
	z-index:12000;
	font-family:inherit;
	-webkit-text-size-adjust:100%;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}
.vz-modal.vz-open{
	align-items:center;
	justify-content:center;
	padding:20px;
	box-sizing:border-box;
}

/* 모달이 열린 동안 뒤 화면이 스크롤되지 않게 */
html.vz-modal-open{overflow:hidden;}

.vz-modal .vz-backdrop{
	position:absolute; top:0; left:0; right:0; bottom:0;
	background:rgba(17,22,30,0.5);
	opacity:0;
	transition:opacity .15s ease-out;
}
.vz-modal.vz-open .vz-backdrop{opacity:1;}

.vz-modal .vz-dialog{
	position:relative;
	width:420px; max-width:100%;
	margin:auto;
	max-height:100%;
	display:flex; flex-direction:column;
	background:#fff;
	border-radius:2px;
	box-shadow:0 14px 44px rgba(0,0,0,0.24);
	opacity:0;
	transform:translateY(-14px);
	transition:opacity .15s ease-out, transform .15s ease-out;
	box-sizing:border-box;
}
.vz-modal.vz-open .vz-dialog{opacity:1; transform:translateY(0);}


/* ----- 머리말 ----- */
.vz-modal .vz-head{
	position:relative;
	padding:18px 52px 18px 22px;
	border-bottom:1px solid #e9edf2;
}
.vz-modal .vz-title{
	margin:0; font-size:17px; font-weight:500; line-height:1.4;
	color:#212121; letter-spacing:-0.025em;
}
.vz-modal .vz-close{
	position:absolute; top:50%; right:12px; margin-top:-16px;
	width:32px; height:32px; padding:0;
	border:0; background:transparent;
	font-size:24px; line-height:1; color:#9aa4b2;
	cursor:pointer;
}
.vz-modal .vz-close:hover{color:#212121;}


/* ----- 본문 ----- */
.vz-modal .vz-body{padding:22px; font-size:15px; color:#333; line-height:1.65; overflow-y:auto;}
.vz-modal .vz-msg{margin:0; word-break:keep-all;}

/* 입력형(vzPrompt)일 때만 보인다. 표시는 JS 가 켠다. */
.vz-modal .vz-input-wrap{display:none; margin-top:18px;}
.vz-modal .vz-label{
	display:block; margin:0 0 7px;
	font-size:14px; font-weight:500; color:#212121;
}
.vz-modal .vz-input{
	width:100%; height:42px; padding:6px 12px; margin:0;
	border:1px solid rgba(33,33,33,0.18); border-radius:0;
	background:#fff; color:#212121; font-size:14px;
	box-sizing:border-box;
}
.vz-modal .vz-input:focus{
	border-color:#3390fa; outline:0;
	box-shadow:0 0 0 2px rgba(51,144,250,0.15);
}
.vz-modal .vz-error{display:none; margin:8px 0 0; font-size:13px; color:#ea1c5b;}


/* ----- 버튼 ----- */
.vz-modal .vz-foot{
	padding:14px 22px 18px;
	border-top:1px solid #e9edf2; background:#fafbfc;
	text-align:right;
}
.vz-modal .vz-btn{
	display:inline-block; min-width:88px; height:40px; padding:0 20px;
	border-radius:0; font-size:14px; letter-spacing:-0.025em;
	line-height:38px; text-align:center;
	cursor:pointer; vertical-align:top;
	box-sizing:border-box;
}
.vz-modal .vz-btn + .vz-btn{margin-left:6px;}

.vz-modal .vz-cancel{border:1px solid #d5dbe2; background:#fff; color:#555;}
.vz-modal .vz-cancel:hover{border-color:#b9c2cd; background:#f4f6f8;}

.vz-modal .vz-ok{border:1px solid #3390fa; background:#3390fa; color:#fff;}
.vz-modal .vz-ok:hover{border-color:#1f7de6; background:#1f7de6;}

/* 삭제·차단처럼 되돌리기 어려운 동작 */
.vz-modal .vz-ok.vz-danger{border-color:#ea1c5b; background:#ea1c5b;}
.vz-modal .vz-ok.vz-danger:hover{border-color:#d0134c; background:#d0134c;}


/* ----- 좁은 화면 ----- */
@media all and (max-width:480px){
	.vz-modal .vz-body{padding:18px;}
	.vz-modal .vz-foot{padding:12px 18px 16px; text-align:center;}
	.vz-modal .vz-btn{min-width:0; width:calc(50% - 4px);}
	.vz-modal .vz-btn:only-child{width:100%;}
}

/* 프론트는 480px 이하에서 viewport 를 width=480 으로 고정한다(viewport.js).
   그래서 실제 렌더 폭 기준으로 한 번 더 잡아준다. */
@media all and (max-width:640px){
	.vz-modal .vz-title{font-size:16px;}
	.vz-modal .vz-body{font-size:14px;}
}