@charset "utf-8";
/* ============================================================
   dialog_new.css  -  공용 알림창 스타일 (2026-07-31)

   makeAlert / makeAlertAction / makeAlertFocus / makeConfirm 은
   jQuery UI Dialog 를 쓴다. 함수는 common.js(압축본) 안에 있어
   손대지 않고 CSS 로만 덮어쓴다.

   [영향 범위]
   webroot 전체의 알림창이 함께 바뀐다. CMS(msgok_cms)는 별개다.
   되돌리려면 Include_Header.asp 의 link 한 줄만 지우면 된다.

   [주의]
   jQuery UI 기본 스타일(ui-*.css) 뒤에 읽혀야 한다.
   link 순서를 가장 마지막에 둘 것.
   ============================================================ */

/* ---- 뒷배경 ---- */
.ui-widget-overlay {
	background: #141c2c !important;
	opacity: .45 !important;
	filter: alpha(opacity=45);
}

/* ---- 창 ---- */
.ui-dialog {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 14px !important;
	background: #fff !important;
	box-shadow: 0 12px 32px rgba(20, 28, 44, .22) !important;
	font-family: 'Malgun Gothic', '맑은 고딕', sans-serif !important;
	overflow: hidden;
}

/* ---- 제목 ---- */
.ui-dialog .ui-dialog-titlebar {
	padding: 17px 20px 13px 20px !important;
	border: 0 !important;
	border-bottom: 1px solid #eef0f3 !important;
	border-radius: 0 !important;
	background: none !important;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: none !important;
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	color: #1f2733 !important;
	letter-spacing: -.3px;
	line-height: 1.4 !important;
}
/* 제목 왼쪽 강조 막대. 사이트의 memTitle 파란 점과 결을 맞춘다 */
.ui-dialog .ui-dialog-title:before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 14px;
	margin: -2px 9px 0 0;
	border-radius: 2px;
	background: #3b6ef0;
	vertical-align: middle;
}

/* 닫기 버튼 */
.ui-dialog .ui-dialog-titlebar-close {
	right: 13px !important;
	top: 13px !important;
	margin: 0 !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: none !important;
	opacity: .45;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
	background: #f1f4f9 !important;
	opacity: .8;
}

/* ---- 본문 ---- */
.ui-dialog .ui-dialog-content {
	padding: 17px 20px 6px 20px !important;
	border: 0 !important;
	background: none !important;
	font-size: 13.5px !important;
	line-height: 1.85 !important;
	color: #4a5563 !important;
	word-break: keep-all;
}
.ui-dialog .ui-dialog-content p {
	margin: 0 !important;
	padding: 0 !important;
}
.ui-dialog .ui-dialog-content b {
	color: #1f2733;
	font-weight: 700;
}

/* 안내창의 체크 아이콘 제거.
   확인 표시가 붙어 있어 경고 문구와 어긋난다.
   makeConfirm 의 ui-icon-alert 는 그대로 둔다 */
#dialog-common-alert .ui-icon-circle-check {
	display: none !important;
}

/* ---- 버튼 ---- */
.ui-dialog .ui-dialog-buttonpane {
	margin: 0 !important;
	padding: 10px 20px 20px 20px !important;
	border: 0 !important;
	background: none !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none !important;
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}
.ui-dialog .ui-dialog-buttonpane button {
	min-width: 96px;
	height: 41px;
	margin: 0 !important;
	padding: 0 18px !important;
	border: 1px solid #dfe3ea !important;
	border-radius: 9px !important;
	background: #fff !important;
	color: #3a4550 !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	cursor: pointer;
}
.ui-dialog .ui-dialog-buttonpane button:hover {
	background: #f4f6fb !important;
	border-color: #cfd6e2 !important;
}
/* 첫 버튼이 「확인」이다 */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {
	border-color: #3b6ef0 !important;
	background: #3b6ef0 !important;
	color: #fff !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child:hover {
	background: #2f5fd8 !important;
	border-color: #2f5fd8 !important;
}
.ui-dialog .ui-dialog-buttonpane button .ui-button-text {
	padding: 0 !important;
	line-height: 1 !important;
}

/* ---- 좁은 화면 ----
   jQuery UI 가 left/top 을 인라인으로 잡아 모바일에서 잘린다.
   가운데 고정으로 덮는다 */
@media screen and (max-width: 520px) {
	.ui-dialog {
		position: fixed !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%);
		width: calc(100% - 32px) !important;
		max-width: 360px !important;
	}
	.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
		justify-content: stretch;
	}
	.ui-dialog .ui-dialog-buttonpane button {
		flex: 1;
	}
}