:root {
	--site-toast-surface: rgba(255, 255, 255, 0.94);
	--site-toast-line: rgba(29, 29, 31, 0.12);
	--site-toast-text: #1d1d1f;
	--site-toast-muted: #6e6e73;
	--site-toast-shadow: 0 18px 48px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.06);
	--site-toast-radius: 16px;
	--site-toast-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-toast-region {
	position: fixed;
	z-index: 14000;
	display: grid;
	gap: 10px;
	width: min(360px, calc(100vw - 28px));
	pointer-events: none;
}

.site-toast-region[data-position="top-right"] {
	top: 18px;
	right: 18px;
}

.site-toast-region[data-position="top-left"] {
	top: 18px;
	left: 18px;
}

.site-toast-region[data-position="bottom-right"] {
	right: 18px;
	bottom: 18px;
}

.site-toast-region[data-position="bottom-left"] {
	bottom: 18px;
	left: 18px;
}

.site-toast {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	min-width: 0;
	padding: 12px 12px 12px 13px;
	border: 1px solid var(--site-toast-line);
	border-radius: var(--site-toast-radius);
	background: var(--site-toast-surface);
	box-shadow: var(--site-toast-shadow);
	color: var(--site-toast-text);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans KR", "Segoe UI", sans-serif;
	letter-spacing: 0;
	opacity: 0;
	pointer-events: auto;
	transform: translateY(-8px) scale(0.985);
	transition: opacity var(--site-toast-transition), transform var(--site-toast-transition);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
}

.site-toast.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.site-toast.is-closing {
	opacity: 0;
	transform: translateY(-6px) scale(0.985);
}

.site-toast-icon {
	display: inline-grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 999px;
	background: rgba(0, 113, 227, 0.1);
	color: #0071e3;
	font-size: 13px;
}

.site-toast-success .site-toast-icon {
	background: rgba(52, 199, 89, 0.14);
	color: #1f8f43;
}

.site-toast-warning .site-toast-icon {
	background: rgba(255, 149, 0, 0.15);
	color: #b76300;
}

.site-toast-error .site-toast-icon {
	background: rgba(215, 0, 21, 0.1);
	color: #d70015;
}

.site-toast-copy {
	display: grid;
	gap: 2px;
	min-width: 0;
	padding-top: 2px;
}

.site-toast-copy strong,
.site-toast-copy span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.site-toast-copy strong {
	color: var(--site-toast-text);
	font-size: 13px;
	font-weight: 760;
	line-height: 1.25;
}

.site-toast-copy span {
	color: var(--site-toast-muted);
	font-size: 13px;
	font-weight: 620;
	line-height: 1.35;
}

.site-toast-copy strong + span {
	color: var(--site-toast-muted);
	font-weight: 560;
}

.site-toast-close {
	display: inline-grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #8a8a90;
	cursor: pointer;
}

.site-toast-close:hover,
.site-toast-close:focus-visible {
	background: rgba(29, 29, 31, 0.06);
	color: var(--site-toast-text);
	outline: 0;
}

@media (max-width: 767px) {
	.site-toast-region,
	.site-toast-region[data-position] {
		top: 12px;
		right: 12px;
		left: 12px;
		bottom: auto;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-toast {
		transition: none;
	}
}
