/* ========================================
   [Yido-footer] START (CTA 예약)
   ======================================== */

.yido-footer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(360px, 32.2vw, 618px);
	overflow: hidden;
}

.yido-footer__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.yido-footer__bg-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.yido-footer__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: color-mix(in srgb, var(--black) 50%, transparent);
}

.yido-footer__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(28px, 2.08vw, 40px);
	width: 100%;
	max-width: 1440px;
	padding: clamp(64px, 8.85vw, 170px) clamp(20px, 4vw, 80px) clamp(56px, 6vw, 100px);
}

.yido-footer__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 1.04vw, 20px);
	max-width: 880px;
	text-align: center;
}

.yido-footer__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	margin: 0;
}

.yido-footer__title-line {
	display: block;
	color: var(--gray-0);
}

.yido-footer__title-line--regular {
	font-weight: 400;
}

.yido-footer__desc {
	margin: 0;
	color: var(--neutral-200);
	word-break: keep-all;
}

.yido-footer__cta.pill-cta {
	width: 206px;
	background: color-mix(in srgb, var(--gray-0) 20%, transparent);
	border-color: color-mix(in srgb, var(--gray-0) 20%, transparent);
}

.yido-footer__cta.pill-cta:hover {
	border-color: color-mix(in srgb, var(--gray-0) 35%, transparent);
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {
	.yido-footer__desc br {
		display: none;
	}
}

/* ========================================
   [Yido-footer] END
   ======================================== */

/* ========================================
   [Yido-site-footer] START (하단 정보)
   ======================================== */

.yido-site-footer {
	position: relative;
	background: var(--bg);
	overflow: hidden;
}

.yido-site-footer__deco {
	position: absolute;
	/* top: clamp(24px, 2.34vw, 45px); */
    bottom: 0;
	left: clamp(20px, 9.17vw, 176px);
	z-index: 0;
	width: clamp(140px, 13.28vw, 255px);
	pointer-events: none;
}

.yido-site-footer__deco-img {
	display: block;
	width: 100%;
	height: auto;
}

.yido-site-footer__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(24px, 1.46vw, 28px);
	max-width: 1440px;
	margin: 0 auto;
	padding: clamp(48px, 4.17vw, 80px) clamp(20px, 4vw, 80px) clamp(48px, 4.17vw, 80px) clamp(20px, 12.5vw, 240px);
}

.yido-site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.yido-site-footer__nav-link {
	color: var(--main-color);
	text-decoration: none;
}

/* .yido-site-footer__nav-divider {
	color: var(--white);
	opacity: 0.5;
} */

.yido-site-footer__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	max-width: 100%;
	line-height: 2;
}

.yido-site-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0;
	color: var(--main-color);
	opacity: 0.5;
}

.yido-site-footer__meta-item {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.yido-site-footer__meta-label,
.yido-site-footer__meta-value {
	color: inherit;
}

.yido-site-footer__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	color: var(--main-color);
	opacity: 0.5;
}

/* --- max-width: 1024px --- */
@media screen and (max-width: 1024px) {
	.yido-site-footer__inner {
		align-items: flex-start;
		padding-inline: clamp(20px, 4vw, 80px);
	}

	.yido-site-footer__deco {
		left: clamp(12px, 2vw, 24px);
		width: clamp(100px, 18vw, 180px);
	}
}

/* --- max-width: 640px --- */
@media screen and (max-width: 640px) {
	.yido-site-footer__deco {
		display: none;
	}

	.yido-site-footer__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.yido-site-footer__meta-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
}

/* ========================================
   [Yido-site-footer] END
   ======================================== */

/* ========================================
   [Yido-quick-menu] START (PC 플로팅)
   ======================================== */

.yido-quick-menu {
	position: fixed;
	right: clamp(12px, 0.78vw, 15px);
	bottom: clamp(32px, 2.6vw, 50px);
	z-index: 99;
	display: none;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(16px, 1.25vw, 24px);
}

.yido-quick-menu__panel {
	width: 143px;
}

.yido-quick-menu__panel[hidden] {
	display: none;
}

.yido-quick-menu.is-open .yido-quick-menu__panel {
	display: block;
	animation: yido-quick-menu-panel-in 0.28s ease;
}

@keyframes yido-quick-menu-panel-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.yido-quick-menu__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yido-quick-menu__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 143px;
	height: 44px;
	padding: 1px 17px;
	border: 1px solid var(--point);
	border-radius: 32px;
	background: var(--white);
	color: var(--sub-color);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.yido-quick-menu__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
}

.yido-quick-menu__icon img {
	display: block;
	width: 23px;
	height: 23px;
	object-fit: contain;
	transition: filter 0.2s ease;
}

.yido-quick-menu__label {
	flex-shrink: 0;
	width: 72px;
	color: inherit;
	word-break: keep-all;
	text-align: left;
}

.yido-quick-menu__controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 15px;
	width: 143px;
}

.yido-quick-menu__fab {
	display: block;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.yido-quick-menu__fab[hidden] {
	display: none;
}

.yido-quick-menu__fab img {
	display: block;
	width: 100%;
	height: 100%;
}

.yido-quick-menu__fab-icon--close {
	display: none;
}

.yido-quick-menu.is-open .yido-quick-menu__fab-icon--open {
	display: none;
}

.yido-quick-menu.is-open .yido-quick-menu__fab-icon--close {
	display: block;
}

.yido-quick-menu__fab:focus-visible {
	outline: 2px solid var(--point);
	outline-offset: 3px;
	border-radius: 50%;
}

@media (hover: hover) and (pointer: fine) {
	.yido-quick-menu__pill:hover {
		background: var(--point);
		border-color: var(--point);
		color: var(--neutral-0);
	}

	.yido-quick-menu__pill:hover .yido-quick-menu__icon img {
		filter: brightness(0) invert(1);
	}

	.yido-quick-menu__fab:hover {
		transform: translateY(-2px);
	}
}

.yido-quick-menu__pill:focus-visible {
	outline: 2px solid var(--point);
	outline-offset: 2px;
}

/* --- min-width: 1024px --- */
@media screen and (min-width: 1024px) {
	.yido-quick-menu {
		display: flex;
	}
}

/* ========================================
   [Yido-quick-menu] END
   ======================================== */