//default
.modal-back,
.modal {
	display: none;
	visibility: hidden;
	z-index: -1;
	&.in {
		visibility: visible;
	}
}
.modal-back {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: transparentize($black, 0.25);
	//opacity: 0;
	//transition: visibility 0s .3s;
	&.in {
		display: block;
		z-index: 1000;
	}
}
.modal {
	/*@include flex-layout($ai: center, $jc: center, $fd: column);*/
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	visibility: hidden;
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;
	height: 100%;
	opacity: 0;
	@include reset-text;
	transition: visibility .15s .3s, z-index 0s .3s, opacity .2s;
	> * {
		width: 100%;
	}
	&.in {
		z-index: 1010;
		transition-delay: 0s;
		opacity: 1;
	}
	&.shown {
		display: block;
	}

	.modal-dialog { //기본 타입
		$p: var(--#{$prefix}spacer-10);
		$gap: var(--#{$prefix}spacer-8);
		$m: var(--#{$prefix}spacer-20);
		@include flex-layout($ai: center);
		position: relative;
		z-index: 1020;
		width: 84.6rem;
		height: calc(100% - $m * 2);
		min-height: calc(100% - $m * 2);
		margin: $m auto;
		.modal-content {
			@include flex-layout($ai: center, $fd: column);
			position: relative;
			overflow: hidden;
			width: 100%;
			max-height: 100%;
			background-color: var(--#{$prefix}white);
			border-radius: var(--#{$prefix}rd-12);
			outline-color: transparent;
			transition: outline-color .1s;
			> * {
				width: 100%;
			}
			&:focus {
				@include focus($offset: .4rem, $color: $white, $alpha: 0.9);

			}
		}
		.modal-header {
			width: 100%;
			padding: $p 6.8rem $gap $p;
			background-color: inherit;
			border-top-left-radius: inherit;
			border-top-right-radius: inherit;
			.modal-title {
				@include ellipsis(1);
				font-size: var(--#{$prefix}fz-title-sm);
				font-weight: map-get($fws, bold);
			}
		}
		.modal-conts {
			@include flex-layout($fd: column);
			gap: $gap;
			position: relative;
			overflow-y: auto;
			width: 100%;
			padding: 0 $p;
			color: var(--#{$prefix}gray-90);
			> * {
				width: 100%;
			}

			.conts-tit {
				font-size: var(--#{$prefix}fz-title-md);
				font-weight: map-get($fws, bold);
			}
			.conts-area {
				@include flex-layout($fd: column);
				gap: $gap;
				> * {
					width: 100%;
				}
			}
		}
		.modal-btn {
			@include flex-layout($ai: center, $jc: flex-end);
			gap: .8rem;
			width: 100%;
			padding: $gap $p $p;
			.btn {
				min-width: 9.2rem;
			}
		}
		.btn-close {
			@include position($t: 3.2rem, $r: 3.2rem);
			z-index: 901;
			width: 3.6rem;
			height: 3.6rem;
			background: url(#{$url}/component/common/ico_close_modal.svg) no-repeat center;
			background-size: 2rem;
		}
	}
	&.alert { //얼럿 타입
		.modal-dialog {
			width: 56rem;
			.modal-conts {
				gap: 2.4rem;
			}
			.modal-btn {
				.btn {
					min-width: 7.8rem;
				}
			}
		}
	}
}

/* modal open 시 contents (전체모달 아닌경우) */
.modal-open {
	/*padding-right: 17px;*/
	overflow: hidden;
}

/* mobile */
@include mobile {
	.modal {
		$w: calc(100% - 3.2rem);
		.modal-dialog {
			$p: var(--#{$prefix}spacer-6);
			$gap: var(--#{$prefix}spacer-6);
			$m: var(--#{$prefix}spacer-4);
			width: $w;
			height: calc(100% - $m * 2);
			min-height: calc(100% - $m * 2);
			margin: $m auto;
			.modal-header {
				padding: $p 6.8rem $gap $p;
			}
			.modal-conts {
				gap: $gap;
				padding: 0 $p;
				.conts-area {
					gap: $gap;
					> * {
						width: 100%;
					}
				}
			}
			.modal-btn {
				padding: $gap $p $p;
				.btn {
					width: calc((100% - 0.8rem) / 2);
					min-width: 0;
				}
			}
			.btn-close {
				@include position($t: 1.6rem, $r: 1.6rem);
			}
		}
		&.alert {
			.modal-dialog {
				width: $w;
				.modal-btn {
					.btn {
						width: auto;
						min-width: 7.8rem;
					}
				}
			}
		}
	}
}