/*  ***** 도움말 박스 *****  */
.helper-area {
	$w: 39rem;
	@include position($p:fixed, $t: 0, $b: 0, $r: 0);
	visibility: hidden;
	opacity: 0;
	z-index: 60;
	width: $w;
	transition: $transition-base;
	transform: translateX(100%);
	.helper-wrap {
		@include position($t: 0, $b: 0, $r: 0);
		width: $w;
		padding: 0 var(--#{$prefix}spacer-10);
		background-color: var(--#{$prefix}gray-5);
		border-left: 1px solid var(--#{$prefix}gray-40);
		transition: $transition-base;
		.helper-tit {
			padding-top: var(--#{$prefix}spacer-10);
			font-size: var(--#{$prefix}fz-title-xlg);
			font-weight: map-get($fws, bold);
		}
		.helper-conts-area {
			@include flex-layout($jc: space-between, $fd: column);
			gap: var(--#{$prefix}spacer-10);
			position: relative;
			overflow-x: hidden;
			overflow-y: auto;
			transition: $transition-base;
			.conts-area-wrap {
				@include flex-layout($jc: space-between, $fd: column);
				gap: var(--#{$prefix}spacer-10);
				position: relative;
				overflow-x: hidden;
				overflow-y: auto;
				transition: $transition-base;
			}
			.conts-area {
				.tit {
					@include flex-layout($ai: center);
					font-size: var(--#{$prefix}fz-title-md);
					font-weight: map-get($fws, bold);
					.btn-ico {
						margin-left: var(--#{$prefix}spacer-1);
					}
				}
				&.helper-conts {
					 width: 100%;
					 padding-top: 7rem;
					 .conts-wrap {
						 gap: var(--#{$prefix}spacer-8);
						 .conts-desc {
							 @include flex-layout($fd: column);
							 gap: var(--#{$prefix}spacer-2);
						 }
					 }
				 }
				&.related-service {
					padding: var(--#{$prefix}spacer-10) 0;
					background-color: var(--#{$prefix}gray-5);
					border-top: 1px solid var(--#{$prefix}gray-40);
					transition: $transition-base;
					.conts-wrap {
						gap: var(--#{$prefix}spacer-6);
					}
				}
			}

			.helper-in {
				width: 100%;
				height: 100%;
				padding: var(--#{$prefix}spacer-11) 0 var(--#{$prefix}spacer-10);
				.helper-conts {
					padding-top: 0;
				}
			}
		}
	}
	&.expand {
		visibility: visible;
		opacity: 1;
		transform: translateX(0);
		.btn-helper {
			&.expand {
				visibility: hidden;
				opacity: 0;
				transform: translateX(100%);
			}
		}
	}
}
.btn-helper {
	@include position($p:fixed, $t: 4rem, $r: 4rem);
	&.expand {
		visibility: visible;
		opacity: 1;
		transition: $transition-base;
		transform: translateX(0);
	}
}

/* 도움말 버튼 */
.btn {
	&.btn-helper {
		height: 4.4rem;
		padding: 0 var(--#{$prefix}btn-px-sm);
		background-color: var(--#{$prefix}gray-5);
		border: 1px solid var(--#{$prefix}gray-40);
		border-radius: var(--#{$prefix}rd-4);
		box-shadow: $box-shadow-base;
		font-size: var(--#{$prefix}btn-fz-md);
		color: var(--#{$prefix}black);
		&::before,
		&::after {
			@include pseudo();
			width: 2rem;
			height: 2rem;
			background: url(#{$url}/component/common/ico_foldable.svg) no-repeat center;
			background-size: contain;
		}
		&:focus {
			@include focus($color: $primary);
		}
		&.expand {
			&::before {
				margin-right: var(--#{$prefix}spacer-default2);
			}
			&::after {
				display: none;
			}
		}
		&.fold {
			&::before {
				display: none;
			}
			&::after {
				margin-left: var(--#{$prefix}spacer-default2);
				transform: rotate(180deg);
			}
		}
	}
}

//mobile only
@include tabletLess {
	/*  ***** 도움말 박스 *****  */
	.helper-area {
		$w : calc(100vw - 3rem);
		position: fixed;
		z-index: 71;
		width: $w;

		&::before {
			@include position($p: fixed, $t: 0, $l: -3rem, $r: 0, $b: 0);
			@include pseudo();
			background: transparent;
			transition: $transition-base;
		}

		.helper-wrap {
			width: $w;
			padding: 0 var(--#{$prefix}spacer-4);
			border-left: none;
			.helper-conts-area {
				.btn-helper {
					top: 4rem;
					right: 1.6rem;
				}
				.conts-area {
					&.helper-conts {
						.conts-wrap {
							gap: var(--#{$prefix}spacer-6);
						}
					}
					&.related-service {
						width: calc(100vw - 6.2rem);
					}
				}
				

			}
		}
		&.expand {
			&::before {
				background: rgba(0, 0, 0, 0.60);
				transition-delay: .3s;
			}
		}
	}

	.btn-helper {
		top: 2.4rem;
		right: 1.6rem;
	}
}

//tablet size more
@include tabletMore {
	/*  ***** 도움말 박스 *****  */
	.helper-area {
		.helper-wrap {
			.helper-conts-area {
				@include scrollbar;
			}
		}
	}
}