.datepicker-area {
	display: none;
	position: relative;
	z-index: 1000;
	@at-root .datepicker-wrap {
		@include position($t: .8rem, $l: 0);
		width: 100%;
		background-color: var(--#{$prefix}white);
		border: 1px solid var(--#{$prefix}gray-40);
		border-radius: var(--#{$prefix}rd-8);
		&:focus {
			@include focus($offset: -.4rem);
		}
		&.bottom {
			top: auto;
			bottom: 6.4rem;
		}
		.datepicker-head {
			@include flex-layout($ai: center, $jc: space-between);
			position: relative;
			width: 100%;
			height: 6.4rem;
			padding: 0 var(--#{$prefix}spacer-3);
			background-color: var(--#{$prefix}secondary-5);
			border-top-left-radius: inherit;
			border-top-right-radius: inherit;
			font-size: var(--#{$prefix}fz-body-lg);
			.btn-cal-move {
				width: 4rem;
				height: 4rem;
				background: url(#{$url}/component/common/ico_cal_move.svg) no-repeat center;
				background-size: 1.6rem;
				&.next {
					transform: rotate(180deg);
				}
			}
			.datepicker-switch-wrap {
				@include flex-layout($ai: center, $jc: center);
				width: 100%;
				padding: 0 var(--#{$prefix}spacer-3);
				.btn-cal-switch {
					@include flex-layout($ai: center, $jc: center);
					width: 50%;
					height: 3.8rem;
					background-color: transparent;
					border: 1px solid transparent;
					border-radius: var(--#{$prefix}rd-8);
					text-align: center;
					transition: $transition-base;
					&::after {
						@include pseudo();
						width: 1.6rem;
						height: 1.6rem;
						margin-left: var(--#{$prefix}spacer-1);
						background: url(#{$url}/component/common/ico_cal_dropdown.svg) no-repeat center;
						background-size: 1.6rem;
					}
					&:hover {
						background-color: var(--#{$prefix}secondary-10);
					}
					&:focus,
					&:active {
						border: 1px solid var(--#{$prefix}secondary-10);
					}
				}
			}
		}
		.datepicker-tbl-wrap {
			padding: 0 var(--#{$prefix}spacer-3);
			.datepicker-tbl {
				th,
				td {
					width: calc(100% / 7);
					padding-top: var(--#{$prefix}spacer-1);
					> button {
						@include flex-layout($ai: center, $jc: center);
						width: 100%;
						height: 100%;
					}
					&.old,
					&.new {
						color: transparentize($gray-60, 0.7);
					}
					&.period {
						.btn-set-date {
							background-color: var(--#{$prefix}primary-10);
						}
						&.start,
						&.end {
							> .btn-set-date {
								background-color: var(--#{$prefix}primary);
								color: var(--#{$prefix}white);
								&:focus {
									@include focus($offset: -.4rem, $color: $white, $alpha: 0.9);
								}
							}
						}
						&.start {
							> .btn-set-date {
								border-top-left-radius: var(--#{$prefix}rd-full);
								border-bottom-left-radius: var(--#{$prefix}rd-full);
							}
						}
						&.end {
							> .btn-set-date {
								border-top-right-radius: var(--#{$prefix}rd-full);
								border-bottom-right-radius: var(--#{$prefix}rd-full);
							}
						}
					}
				}
			}
		}
		.datepicker-body {
			position: relative;
			.sel {
				&.year {
					@include flex-layout($jc: center, $fd: column);
					width: 14rem;
					margin: 0 auto;
					li,
					.btn {
						width: 100%;
					}
				}
				&.month {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					column-gap: 1.2rem;
					row-gap: .8rem;
					> li {
						flex: 1;
						.btn {
							width: 100%;
						}
					}
				}
				.btn {
					background-color: transparent;
					border-color: transparent;
					color: var(--#{$prefix}gray-90);
					&.active {
						background-color: var(--#{$prefix}primary);
						border-color: var(--#{$prefix}primary);
						color: var(--#{$prefix}white);
					}
				}
			}
			.datepicker-conts {
				@include position($t:0, $l: 0);
				@include visibility(hidden);
				width: 100%;
				height: 100%;
				transition: $transition-base;
				&.active {
					@include visibility(visible);
				}
			}
		}
		.datepicker-mon-wrap,
		.datepicker-year-wrap {
			overflow-x: hidden;
			overflow-y: auto;
		}
		.datepicker-mon-wrap {
			padding: var(--#{$prefix}spacer-5) var(--#{$prefix}spacer-6) 0;
		}
		.datepicker-btn-wrap {
			@include flex-layout($jc: flex-end);
			gap: .8rem;
			margin: 0 calc(var(--#{$prefix}spacer-3) * -1);
			padding: var(--#{$prefix}spacer-4);
			border-top: 1px solid var(--#{$prefix}gray-20);
		}
	}
	&.active {
		display: block;
	}
}
.row {
	.datepicker-wrap {
		&.bottom {
			bottom: 12.8rem;
		}
	}
}

@media (min-width: 361px) {
	.datepicker-wrap {
		width: 36rem;
	}
}
@include tabletMore() {
	.datepicker-year-wrap {
		@include scrollbar;
	}
}