/* 토스트 전체를 담는 공통 고정 컨테이너 */
.sp-toast-container {
	position: fixed;
	z-index: 99999;
	display: flex;
	gap: 12px;
	pointer-events: none;
	padding: 20px;
	box-sizing: border-box;
	max-width: 100vw;
	max-height: 100vh;
}

.sp-toast-stack--down {
	flex-direction: column;
}

.sp-toast-stack--up {
	flex-direction: column-reverse;
}

/* 토스트 정렬 기준 */
.sp-toast-container[data-align="left"] {
	align-items: flex-start;
}

.sp-toast-container[data-align="center"] {
	align-items: center;
}

.sp-toast-container[data-align="right"] {
	align-items: flex-end;
}

.sp-toast--top-left {
	top: 0;
	left: 0;
}

.sp-toast--top-center {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.sp-toast--top-right {
	top: 0;
	right: 0;
}

.sp-toast--center-left {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.sp-toast--center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sp-toast--center-right {
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.sp-toast--bottom-left {
	bottom: 0;
	left: 0;
}

.sp-toast--bottom-center {
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.sp-toast--bottom-right {
	bottom: 0;
	right: 0;
}

/* 토스트 카드 기본 레이아웃 */
.sp-toast {
	position: relative;
	min-width: 290px;
	max-width: min(92vw, 440px);
	padding: 16px 18px 15px 16px;
	border-radius: 18px;
	background: rgba(239, 246, 255, 0.94);
	color: #0f172a;
	box-shadow:
		0 20px 42px rgba(15, 23, 42, 0.18),
		0 1px 0 rgba(255, 255, 255, 0.55) inset;
	border: 1px solid rgba(148, 163, 184, 0.18);
	opacity: 0;
	transform: translateY(-10px) scale(0.985);
	transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
	pointer-events: auto;
	backdrop-filter: blur(14px);
	cursor: grab;
	overflow: hidden;
	touch-action: none;
	user-select: none;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.sp-toast.on {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.sp-toast:active,
.sp-toast.is-dragging {
	cursor: grabbing;
}

.sp-toast::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, rgba(96, 165, 250, 0.95), rgba(59, 130, 246, 0.65));
}

.sp-toast__icon {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	margin-top: 2px;
	background: rgba(59, 130, 246, 0.12);
	color: #2563eb;
	border: 1px solid rgba(59, 130, 246, 0.18);
	box-sizing: border-box;
	user-select: none;
}

/* 본문과 버튼 영역 */
.sp-toast__body {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 52px;
}

.sp-toast__title {
	display: block;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 4px;
	color: #2563eb;
	cursor: grab;
	user-select: none;
}

.sp-toast.is-dragging .sp-toast__title {
	cursor: grabbing;
}

.sp-toast__message {
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: keep-all;
	color: #334155;
	padding-bottom: 4px;
	user-select: none;
}

.sp-toast__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 999px;
	background: rgba(148, 163, 184, 0.12);
	color: #475569;
	font-size: 17px;
	line-height: 26px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.sp-toast__close:hover {
	background: rgba(148, 163, 184, 0.22);
	transform: scale(1.04);
}

/* 하단 확인 버튼 */
.sp-toast__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
	padding-right: 42px;
}

.sp-toast__confirm {
	min-width: 72px;
	height: 32px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: #3b82f6;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.24);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.sp-toast__confirm:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(59, 130, 246, 0.28);
	background: #2563eb;
}

/* severity별 색상 변형 */
.sp-toast--info {
	background: linear-gradient(90deg, rgba(255,255,255,0.94), rgba(239, 246, 255, 0.94));
}

.sp-toast--success {
	background: linear-gradient(90deg, rgba(236, 253, 245, 0.96), rgba(240, 253, 244, 0.94));
}

.sp-toast--warn {
	background: linear-gradient(90deg, rgba(255, 251, 235, 0.96), rgba(255, 251, 235, 0.94));
}

.sp-toast--error {
	background: linear-gradient(90deg, rgba(254, 242, 242, 0.96), rgba(255, 247, 247, 0.94));
}

.sp-toast--warn::before {
	background: linear-gradient(180deg, rgba(245, 158, 11, 0.95), rgba(251, 191, 36, 0.7));
}

.sp-toast--error::before {
	background: linear-gradient(180deg, rgba(239, 68, 68, 0.95), rgba(248, 113, 113, 0.7));
}

.sp-toast--success::before {
	background: linear-gradient(180deg, rgba(34, 197, 94, 0.95), rgba(74, 222, 128, 0.7));
}

.sp-toast--success .sp-toast__icon {
	background: rgba(34, 197, 94, 0.12);
	color: #16a34a;
	border-color: rgba(34, 197, 94, 0.18);
}

.sp-toast--success .sp-toast__title {
	color: #16a34a;
}

.sp-toast--warn .sp-toast__icon {
	background: rgba(245, 158, 11, 0.14);
	color: #d97706;
	border-color: rgba(245, 158, 11, 0.2);
}

.sp-toast--warn .sp-toast__title {
	color: #d97706;
}

.sp-toast--error .sp-toast__icon {
	background: rgba(239, 68, 68, 0.12);
	color: #dc2626;
	border-color: rgba(239, 68, 68, 0.2);
}

.sp-toast--error .sp-toast__title {
	color: #dc2626;
}

.sp-toast--info .sp-toast__title {
	color: #2563eb;
}

.sp-toast--info .sp-toast__icon {
	background: rgba(59, 130, 246, 0.12);
	color: #2563eb;
	border-color: rgba(59, 130, 246, 0.18);
}