.zeta-btn-wrap {
	display: flex;
	width: 100%;
}

.zeta-btn-wrap--full .zeta-btn {
	width: 100%;
}

.zeta-btn-wrap--custom .zeta-btn {
	width: var(--zeta-btn-custom-width, auto);
}

.zeta-btn {
	--zeta-btn-duration: 340ms;
	--zeta-btn-easing: cubic-bezier(0.22, 1, 0.36, 1);
	--zeta-btn-gap: 12px;
	--zeta-btn-content-gap: 3px;
	--zeta-btn-icon-size: 18px;
	--zeta-btn-radius: 999px;
	--zeta-btn-skew-angle: 12deg;
	--zeta-btn-fill-color: #1d4ed8;
	--zeta-btn-icon-shift: 6px;
	--zeta-btn-lift-distance: 4px;
	--zeta-btn-focus-ring: currentColor;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: var(--zeta-btn-radius);
	background: #111827;
	color: #ffffff;
	font-family: "Pretendard GOV", "Pretendard Variable", "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", "Segoe UI", sans-serif;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: color var(--zeta-btn-duration) var(--zeta-btn-easing), background-color var(--zeta-btn-duration) var(--zeta-btn-easing), border-color var(--zeta-btn-duration) var(--zeta-btn-easing), box-shadow var(--zeta-btn-duration) var(--zeta-btn-easing), transform var(--zeta-btn-duration) var(--zeta-btn-easing);
}

.zeta-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--zeta-btn-fill-color);
	opacity: 0;
	transform: translateY(102%);
	transform-origin: bottom center;
	transition: transform var(--zeta-btn-duration) var(--zeta-btn-easing), opacity var(--zeta-btn-duration) var(--zeta-btn-easing);
	z-index: 0;
	pointer-events: none;
}

.zeta-btn:focus-visible {
	outline: 2px solid var(--zeta-btn-focus-ring);
	outline-offset: 2px;
}

.zeta-btn__inner {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--zeta-btn-gap);
	width: 100%;
	min-width: 0;
}

.zeta-btn__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--zeta-btn-content-gap);
	min-width: 0;
}

.zeta-btn__content:empty {
	display: none;
}

.zeta-btn__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: transform var(--zeta-btn-duration) var(--zeta-btn-easing), color var(--zeta-btn-duration) var(--zeta-btn-easing);
}

.zeta-btn__icon svg,
.zeta-btn__icon i {
	width: var(--zeta-btn-icon-size);
	height: var(--zeta-btn-icon-size);
	font-size: var(--zeta-btn-icon-size);
}

.zeta-btn__label-shell {
	position: relative;
	display: inline-grid;
	align-items: center;
	min-width: 0;
	overflow: hidden;
}

.zeta-btn__label-text {
	grid-area: 1 / 1;
	display: block;
	min-width: 0;
	line-height: 1.1;
	backface-visibility: hidden;
	transition: transform var(--zeta-btn-duration) var(--zeta-btn-easing), opacity var(--zeta-btn-duration) var(--zeta-btn-easing);
}

.zeta-btn__token-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	vertical-align: middle;
}

.zeta-btn__token-icon-svg {
	display: block;
	width: 1em;
	height: 1em;
}

.zeta-btn__subtext {
	display: block;
	font-size: 12px;
	line-height: 1.35;
	opacity: 0.74;
	transition: color var(--zeta-btn-duration) var(--zeta-btn-easing), opacity var(--zeta-btn-duration) var(--zeta-btn-easing);
}

.zeta-btn--icon-only {
	aspect-ratio: 1 / 1;
	padding-inline: 0;
	min-width: 56px;
}

.zeta-btn--icon-only .zeta-btn__inner {
	gap: 0;
}

.zeta-btn--variant-solid {
	background: #111827;
	color: #ffffff;
	border-color: #111827;
	box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
}

.zeta-btn--variant-outline {
	background: #ffffff;
	color: #0f172a;
	border-color: rgba(15, 23, 42, 0.14);
}

.zeta-btn--variant-soft {
	background: rgba(15, 23, 42, 0.05);
	color: #0f172a;
	border-color: transparent;
}

.zeta-btn--variant-inverse {
	background: #ffffff;
	color: #0f172a;
	border-color: transparent;
	box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

.zeta-btn--effect-label-slide .zeta-btn__label-text--front {
	opacity: 1;
	transform: translateY(0) skewY(0deg);
}

.zeta-btn--effect-label-slide .zeta-btn__label-text--back {
	opacity: 0;
	transform: translateY(115%) skewY(var(--zeta-btn-skew-angle));
}

.zeta-btn--effect-label-slide:not(.is-disabled):hover .zeta-btn__label-text--front,
.zeta-btn--effect-label-slide:not(.is-disabled):focus-visible .zeta-btn__label-text--front {
	opacity: 0;
	transform: translateY(-115%) skewY(calc(var(--zeta-btn-skew-angle) * -1));
}

.zeta-btn--effect-label-slide:not(.is-disabled):hover .zeta-btn__label-text--back,
.zeta-btn--effect-label-slide:not(.is-disabled):focus-visible .zeta-btn__label-text--back {
	opacity: 1;
	transform: translateY(0) skewY(0deg);
}

.zeta-btn--effect-fill-up:not(.is-disabled):hover::before,
.zeta-btn--effect-fill-up:not(.is-disabled):focus-visible::before {
	opacity: 1;
	transform: translateY(0);
}

.zeta-btn--effect-icon-shift.zeta-btn--icon-after:not(.is-disabled):hover .zeta-btn__icon,
.zeta-btn--effect-icon-shift.zeta-btn--icon-after:not(.is-disabled):focus-visible .zeta-btn__icon {
	transform: translateX(var(--zeta-btn-icon-shift));
}

.zeta-btn--effect-icon-shift.zeta-btn--icon-before:not(.is-disabled):hover .zeta-btn__icon,
.zeta-btn--effect-icon-shift.zeta-btn--icon-before:not(.is-disabled):focus-visible .zeta-btn__icon {
	transform: translateX(calc(var(--zeta-btn-icon-shift) * -1));
}

.zeta-btn--effect-lift:not(.is-disabled):hover,
.zeta-btn--effect-lift:not(.is-disabled):focus-visible {
	transform: translateY(calc(var(--zeta-btn-lift-distance) * -1));
}

.zeta-btn.is-disabled,
.zeta-btn[disabled] {
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
}

.zeta-btn.is-disabled::before,
.zeta-btn[disabled]::before {
	opacity: 0;
	transform: translateY(102%);
}

@media (max-width: 767px) {
	.zeta-btn {
		min-height: 52px;
		padding: 13px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zeta-btn,
	.zeta-btn::before,
	.zeta-btn__icon,
	.zeta-btn__label-text,
	.zeta-btn__subtext {
		transition: none !important;
	}

	.zeta-btn--effect-lift:not(.is-disabled):hover,
	.zeta-btn--effect-lift:not(.is-disabled):focus-visible,
	.zeta-btn--effect-icon-shift:not(.is-disabled):hover .zeta-btn__icon,
	.zeta-btn--effect-icon-shift:not(.is-disabled):focus-visible .zeta-btn__icon,
	.zeta-btn--effect-label-slide:not(.is-disabled):hover .zeta-btn__label-text,
	.zeta-btn--effect-label-slide:not(.is-disabled):focus-visible .zeta-btn__label-text {
		transform: none !important;
	}

	.zeta-btn--effect-fill-up:not(.is-disabled):hover::before,
	.zeta-btn--effect-fill-up:not(.is-disabled):focus-visible::before {
		opacity: 1;
		transform: none !important;
	}
}
.zeta-btn--effect-label-slide .zeta-btn__label-text {
	white-space: nowrap;
}