.modal {display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba( 0, 0, 0, 0.5 ); z-index: 9999;}
.modal .modal-container {
	position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    max-width: 60rem;
    width: 60rem;
    line-height: 1.4;
    text-align: center;
    background-color: #F0F0F0;
    border-radius: 0.8rem;
    box-shadow: 0 0 1rem 0 rgb(41 48 66 / 40%);
}
.modal.modal_w01 .modal-container {width: 33rem; min-width: 33rem;}

.modal .modal-header {padding: 1rem 2rem; font-weight: bold; height: 4.6rem; color: #fff; text-align: left; line-height: 2.5rem; background-color: #262e3d; border-radius: 0.5rem 0.5rem 0 0;}
.modal .modal-header > span {font-size: 1.3rem;}
.modal .modal-header > i {float: right; line-height: 2.5rem; cursor: pointer;}
.modal .modal-header:after {clear: both;}

.modal .modal-content {padding: 2rem;}
.modal .required_box {float: right; margin: -1.2rem 0 0.2rem 0; color: #ed1c2a;}
.modal .required {color: #ed1c2a;}
.modal-subTitle {display: flex; align-items: center; margin-bottom: 0.8rem; font-size: 1.3rem; font-weight: bold;}
.modal-subTitle > i {margin-right: 0.3rem;}
/*table*/
.modal .modal-content table {width: 100%;}
.modal .modal-content tr {height: 3rem;}
.modal .modal-content input,
.modal .modal-content select {
	position: relative;
    width: 100%;
    height: 3rem;
    padding: 0 1rem 0 1rem;
    border: 0.1rem solid #dfdfdf;
    line-height: 2.5rem;
    vertical-align: middle;
    border-radius: 0.3rem;
}
.modal .modal-content input[type="checkbox"].input_check {width: inherit;}
.input_check {margin-left: 0.8rem;}
.detail-info > table {text-align: left; border-collapse: separate; border-spacing: 0 0.3rem;}
.detail-info > table > tbody > tr > th::before {content: "•"; font-size: 1.8rem; vertical-align: -0.1rem; margin-right: 0.3rem;}
.detail-info > table > tbody > tr > td > textarea {border: 0.1rem solid #dfdfdf; outline: 0; padding: 0.5rem; line-height: 1.2em;}

.modal_th_w {width: 18%;}

.detail-info table input.input_w1 {width: 84%;}
.detail-info table input.input_w2 {width: 15.9rem;}
.detail-info table input.input_w3 {width: 10.2rem;}
input:read-only {background-color: #dfdfdf;}

.form_error_message {display: block; color: #ed1c2a; margin-top: 0.3rem;}
.essential {color: #ed1c2a;}

/*btn*/
.modal .btn-container {padding: 0 2rem 2rem 2rem; text-align: center;}
.modal .btn-container .btn {
	display: inline-block;
	width: 9rem;
	height: 2.7rem;
	line-height: 2.5rem;
	background-color: #4766FF;
    border: 0.1rem solid #4766FF;
	color: #fff;
	border-radius: 0.3rem;
	margin: 0 0.1rem;
	cursor: pointer;
    font-weight: bold;
}
.modal .btn-container .btn.btn-close,
.modal .btn-container .btn.btn-delete
{color: #4766FF; background-color: #fff; border: 0.1rem solid #4766FF;}

/*
	눌러도 소용없는 버튼 (2026-09-02).

	이미 측정을 마친 예약에서 [미방문]·[확정문자 재발송]·[문진링크 재발송] 처럼
	더는 할 일이 없는 것을 잠근다. 감추지 않고 흐리게 두는 이유는, 사라지면
	"버튼이 왜 없지" 를 다시 묻게 되기 때문이다(예약상태 select 에서 미방문을
	지우지 않고 disabled 로 남긴 것과 같은 뜻).
	★div 로 만든 버튼이라 prop('disabled') 가 먹지 않는다 — 클래스로 잠그고
	  클릭 핸들러 첫 줄에서 걸러야 한다.
*/
.modal .btn-container .btn.btn-off,
.modal .btn-container .btn.btn-off:hover
{color: #9aa1ab !important; background-color: #eceff2 !important;
 border: 0.1rem solid #dfe3e8 !important; cursor: default; opacity: .85;}

/*tab*/
.tabNav {text-align: left; border-bottom: 0.2rem solid #4766FF;}
.tabNav li {display: inline-block; padding: 0.5rem 1.5rem; text-align: center; background-color: #d3d3d3; border-radius: 0.3rem 0.3rem 0 0; cursor: pointer;}
.tabNav li:hover, .tabNav li.current {background-color: #4766FF; color: #fff;}
.tabContent {display: none; padding: 2rem; background-color: #fff; border-radius: 0.5rem;}
.tabContent.current {display: block;}

/*message_dialog*/
.message_dialog {
    z-index: 10001;
    display: none;
    position: fixed;
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 2rem;
    min-width: 28rem;
    text-align: center;
    box-shadow: 0 0 1rem 0 rgb(41 48 66 / 40%);
}
.message_dialog > .message_close {position: absolute; top: 1.3rem; right: 1.5rem; font-size: 1.6rem; background-color: inherit; cursor: pointer;}
.message_dialog .message {display: inline-block; font-size: 1.5rem; line-height: 1.44em; padding: 3rem 0 3.5rem 0;}
.message_dialog .button_wrap .btn {
	display: inline-block;
	width: 9rem;
	height: 2.7rem;
	line-height: 2.7rem;
	background-color: #4766FF;
    border: 0.1rem solid #4766FF;
	color: #fff;
	border-radius: 0.3rem;
	margin: 0 0.1rem;
	cursor: pointer;
    font-weight: bold;
}
.message_dialog .button_wrap .btn_confirm_close {color: #4766FF; background-color: #fff; border: 0.1rem solid #4766FF;}
.dialog_background {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba( 0, 0, 0, 0.5 ); z-index: 10000;}

/*signature-modal*/
.signature-modal .modal-container {width: 45rem;}
.signature-modal .wrapper {position: relative; width: 41rem; height: 20rem; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.signature-pad {position: absolute; left: 0; top: 0; width: 41rem; height: 20rem; background-color: #fff;}
.signature_txt {text-align: left; margin-bottom: 0.8rem;}
.signature_txt::before {content: "•"; font-size: 1.8rem; vertical-align: -0.1rem; margin-right: 0.3rem;}