/* 모달 없을 때: 헤더 아래 오른쪽 상단 */
.toast-container {
	position: fixed;
	top: 116px;
	right: 24px;
	left: auto;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	pointer-events: none;
	max-width: 90vw;
}

/* 카드(모달) 안에 있을 때: 카드 하단 중앙 */
.join-card .toast-container,
.login-card .toast-container,
.info-change-card .toast-container,
.findpwd-card .toast-container {
	position: absolute;
	bottom: 24px;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	top: auto;
}

.join-card,
.login-card,
.info-change-card,
.findpwd-card {
	position: relative;
}

.toast-item {
	min-width: 320px;
	max-width: 100%;
	padding: 12px 24px;
	border-radius: 8px;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
	background: rgba(0, 0, 0, 0.88);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	animation: toast-in 0.3s ease;
	box-sizing: border-box;
}

.toast-item.toast-out {
	animation: toast-out 0.3s ease forwards;
}

.toast-item.toast-success {
	background: rgba(34, 139, 34, 0.92);
}

.toast-item.toast-error {
	background: rgba(180, 50, 50, 0.92);
}

.toast-item.toast-info {
	background: rgba(0, 0, 0, 0.88);
}

@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes toast-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-8px);
	}
}