/*팝업*/
.layerPopup:not(.pop_card_viewer) {display: none; overflow-y:auto; position: fixed; top: 50%; max-height:100vh; z-index: 1001; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%); border-top: 3px solid #000; border-bottom: 3px solid #000; background-color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.layerPopup .popup {position: relative;}
.layerPopup .p_head {
	padding: 30px 60px 30px 40px; height: 30px;
	background: rgb(246,164,84);
	background: -moz-linear-gradient(90deg, rgba(246,164,84,1) 0%, rgba(236,110,120,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(246,164,84,1) 0%, rgba(236,110,120,1) 100%);
	background: linear-gradient(90deg, rgba(246,164,84,1) 0%, rgba(236,110,120,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f6a454",endColorstr="#ec6e78",GradientType=1);
}
.layerPopup .p_head .tit {font-weight: 100; font-size: 26px; line-height: 1; color: #fff; letter-spacing:-0.0325em; text-align: left;}
.layerPopup .p_cont {padding: 40px;}
.layerPopup .p_cont .area_write {padding: 0;}
.layerPopup .p_cont .area_write .btn-bot {padding-bottom: 0;}
.layerPopup .popup .btn_close {position: absolute; right: 30px; width: 60px; height: 60px; text-align: center;}
.layerPopup .popup .btn_close > span {display: inline-block; vertical-align: middle; font-size: 0;}
.layerPopup .popup .btn_close > span:after {content:""; position: absolute; left: 50%; top: 50%; margin-left: -25px; width: 50px; height: 1px; background-color: #000; transform:rotate(45deg);}
.layerPopup .popup .btn_close > span:before {content:""; position: absolute; left: 50%; top: 50%; margin-left: -25px; width: 50px; height: 1px; background-color: #000; transform:rotate(-45deg);}

.popup_dim {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); z-index: 1000;}


.layerPopup.ty2 {
	overflow:hidden;top: 50%; left:4%; width:90%;padding: 1px; max-width:90%;
	background-color:#000; background-position:0; background-repeat:no-repeat; color: #fff;
	-webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translateY(-50%);}
.layerPopup.ty2 .pop_tit {margin-bottom: 20px; color: #aaaaaa; font-size: 16px;}
.layerPopup.ty2 .pop_tit strong {color: #fff; font-size: 24px;font-family:'Alegreya', serif;letter-spacing:1.2px;}
.layerPopup.ty2 .popup {padding: 40px 40px 0 40px; border:1px solid; border-image:linear-gradient( to left, #00e7d1, #9f50fe )1;}
.layerPopup.ty2 .popup .btn_close {width: 30px; height: 30px;}
.layerPopup.ty2 .popup .btn_close > span:after,
.layerPopup.ty2 .popup .btn_close > span:before {background-color: #fff; width: 30px; margin-left: -15px;}
.layerPopup.ty2 .btn-bot {margin-top: 20px;}
.layerPopup.ty2 .mw100p {width: 200px;}

.layerPopup.ty2 .popup .btn_back {float:right;width:30px;height:30px;padding-right:50px;}
.layerPopup.ty2 .popup .btn_back > span {display:inline-block;vertical-align:middle;font-size:0;}
.layerPopup.ty2 .popup .btn_back > span:after {content: '';
    width: 20px;
    height: 1px;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    background: #FFF;}
.layerPopup .popup .btn_back > span:before {content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    border-left: 1px solid #FFF;
    border-top: 1px solid #FFF;
    transform: translate(-50%,-50%) rotate(315deg);}
.layerPopup.ty2 .popup .content {display:block;clear:both;position:relative;margin-top:30px;font-weight:100;margin-bottom:40px; max-height:70vh;overflow-y:scroll;overflow-x:hidden;}
#scroll_ed::-webkit-scrollbar {width:5px;}
#scroll_ed::-webkit-scrollbar-thumb {background-color:#00e7d1;}
#scroll_ed::-webkit-scrollbar-track {background-color:#617b79;}


/*alert 팝업*/
.popup_alert {display: none;}
.popup_alert .popup {z-index: 1001; overflow:hidden; position: fixed; left: 50%; top: 50%; min-width:370px; max-width:470px; text-align: center; font-size: 15px; line-height: 1.5; border-radius: 20px; transform:translate(-50%,-50%);}
.popup_alert .popup .txt {padding: 45px 30px 40px; background-color: #fff;}
.popup_alert .popup .txt .h1 {margin-bottom: 20px; font-weight: 700; font-size: 18px; color: #463c5a;}
.popup_alert .popup .btns {display: table; width: 100%; table-layout:fixed; background-color: #5a32d2;}
.popup_alert .popup .btns a {display: table-cell; vertical-align: top; font-size: 15px; line-height: 60px; font-weight: 700; color: #fff; border-left: 1px solid rgba(255,255,255,.3); box-sizing:border-box;}
.popup_alert .popup .btns a:first-child {border-left: 0;}


/*메인팝업*/
.wrap_mainPopup {z-index: 999999; position: absolute; left: 50%; top: 100px; transform:translateX(-50%); font-size: 0; width:90%;}
.wrap_mainPopup .inner {display: inline-block; padding: 50px 0;}
.mainPopup {overflow:hidden; display: none; vertical-align: top; max-width: 500px; margin: 5px; border-radius: 5px;}
.mainPopup img {max-width:100%;}
.mainPopup .botm {overflow:hidden; background-color: #fff; padding: 15px; color: #000; text-align: left;}
.mainPopup .botm button {float: right; color: #000; font-size: 14px;}

/*checkbox design*/
.mainPopup .inp_checkbox {z-index:0; position: relative; display: inline-block; line-height: 1; vertical-align: middle; font-size: 0;}
.mainPopup .inp_checkbox input {position: absolute; visibility:hidden; display: block \0/IE8;}
.mainPopup .inp_checkbox input + span {
	position:relative;
	display:inline-block;
	padding-left:25px;
	font-size: 14px; height:16px; line-height:16px;
	cursor:pointer; vertical-align:top;
}
.mainPopup .inp_checkbox input + span::after,
.mainPopup .inp_checkbox input + span:after {
	content:"";
	width:14px; height:14px;
	position:absolute; left:0; top:0;
	border: 1px solid #ddd;
	background-color: #fff;
}
.mainPopup .inp_checkbox input:checked + span:after {
	background-color: #00416e;
	border-color: #00416e;
}
.mainPopup .inp_checkbox input:checked + span::before,
.mainPopup .inp_checkbox input:checked + span:before {
    content:"";
	z-index: 1; color: #fff;
	position:absolute; left:0; top:0; text-align: center; width:16px; height:16px;
	background-image: url('/module/images/icons/ico_select_on.png');
	background-repeat: no-repeat; background-position: center center;
}

.mainPopup .inp_checkbox input + span ~ .inp_txt,
.mainPopup .inp_checkbox input + span ~ .select1 {margin-left: 5px; visibility: visible; position: static; vertical-align: middle;  pointer-events: none; background-color: #f9f9f9;}
.mainPopup .inp_checkbox input:checked + span ~ .inp_txt,
.mainPopup .inp_checkbox input:checked + span ~ .select1 {pointer-events: auto; background-color: #fff;}


/*
.pop_carview {}
.pop_carview .h1 {margin-bottom: 60px; text-align: center; font-size: 20px; line-height: 1; color: #333;}
.pop_carview .h1 .f-gm {font-weight: 700; font-size: 43px; margin-left: 20px;}
.pop_carview .tbl_basic {margin-bottom: 45px;}
*/

.pop_photo {background-color:#000;width:100vw;height:100vh;position:absolute;color:#FFF;opacity:1;}



@media (max-width:960px){
	.layerPopup:not(.pop_card_viewer) {left: 5%; width: 90%; margin-left: 0 !important;}
	.layerPopup .popup .btn_close {right: 10px;}
	.layerPopup.ty2 {padding:0;left:0;width:100vw;max-width:100vw;height:100%;}
	.layerPopup.ty2 .popup {padding:10px;border:0;height:100%;}
	.layerPopup .p_cont {padding: 15px;}
	.layerPopup .p_foo {padding: 15px 10px 16px; font-size: 16px; }

	.layerPopup.ty2 .popup .content {max-height:85vh;padding:25px;font-size:3.3vw;}

	.layerPopup.ty2 .popup .btn_back {margin-top:-4px;}
	.popcont .cont .tit1 {font-size:4.5vw;margin:5px 0 0 5px;}
}

/* [2026-01-22] 임시저장 알림 UI - TWIG 브랜드 컬러 */
.draft-notification {
	display: flex;
	flex-direction: column;
	background: linear-gradient(135deg, #23bf94 0%, #1a9e7a 100%);
	border-radius: 12px;
	padding: 12px 15px;
	margin-bottom: 12px;
	box-shadow: 0 4px 15px rgba(35, 191, 148, 0.3);
}
.draft-notification .draft-content {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.draft-notification .draft-icon {
	font-size: 24px;
	margin-right: 12px;
}
.draft-notification .draft-info {
	flex: 1;
	color: #fff;
}
.draft-notification .draft-info strong {
	display: block;
	font-size: 14px;
	margin-bottom: 2px;
}
.draft-notification .draft-preview {
	display: block;
	font-size: 12px;
	opacity: 0.9;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}
.draft-notification .draft-time {
	display: block;
	font-size: 11px;
	opacity: 0.7;
	margin-top: 2px;
}
.draft-notification .draft-actions {
	display: flex;
	gap: 8px;
}
.draft-notification .btn-draft-load {
	flex: 1;
	padding: 8px 16px;
	background: #fff;
	color: #23bf94;
	border: none;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.draft-notification .btn-draft-dismiss {
	padding: 8px 16px;
	background: rgba(255,255,255,0.2);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
}

/* 임시저장 완료 토스트 - TWIG 브랜드 컬러 */
.draft-toast {
	position: fixed;
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #23bf94 0%, #1a9e7a 100%);
	color: #fff;
	padding: 10px 20px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	z-index: 9999;
	box-shadow: 0 4px 15px rgba(35, 191, 148, 0.4);
	animation: toastFadeIn 0.3s ease;
}
@keyframes toastFadeIn {
	from { opacity: 0; transform: translateX(-50%) translateY(10px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}