@charset "UTF-8";

/* ==========================================================================
 * Contentful Forma 36 Notification 디자인 기반 공통 토스트 UI
 * ========================================================================== */

.toast-message {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99999;

	display: flex;
	align-items: center;
	gap: 12px;

	width: auto;
	min-width: 320px;
	max-width: 460px;
	min-height: 56px;
	padding: 12px 14px 12px 16px;

	background: #ffffff;
	border: 1px solid #d9dee7;
	border-left: 4px solid #00853d; /* 기본 success */
	border-radius: 8px;

	color: #111b2b;
	font-family: inherit;
	box-shadow:
		0 6px 18px rgba(17, 27, 43, 0.12),
		0 2px 6px rgba(17, 27, 43, 0.08);

	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);

	transition:
		opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0.22s ease,
		bottom 0.18s ease;

	pointer-events: none;
	box-sizing: border-box;
}

.toast-message.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* ==========================================================================
 * Variant별 좌측 액센트 보더 & 아이콘 색상 (Forma 36 컬러 토큰)
 * ========================================================================== */

/* 1) Success (기본값) */
.toast-message.toast-success {
	border-left-color: #00853d;
}
.toast-message.toast-success .toast-icon {
	background: #eaf7ef;
	color: #00853d;
}

/* 2) Info */
.toast-message.toast-info {
	border-left-color: #0059c8;
}
.toast-message.toast-info .toast-icon {
	background: #e7f1fc;
	color: #0059c8;
}

/* 3) Warning */
.toast-message.toast-warning {
	border-left-color: #e07000;
}
.toast-message.toast-warning .toast-icon {
	background: #fef4e8;
	color: #e07000;
}

/* 4) Error */
.toast-message.toast-error {
	border-left-color: #d91938;
}
.toast-message.toast-error .toast-icon {
	background: #fbebee;
	color: #d91938;
}

/* ==========================================================================
 * 내부 요소 스타일 (아이콘, 텍스트, 닫기 버튼)
 * ========================================================================== */

/* 아이콘 컨테이너 */
.toast-icon {
	position: relative;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.toast-icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* 메시지 텍스트 컨테이너 */
.toast-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.toast-text {
	color: #111b2b !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	word-break: keep-all;
	letter-spacing: -0.01em;
	display: inline-block;
}

/* 닫기 버튼 */
.toast-close {
	position: relative;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #687386;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.toast-close svg {
	width: 14px;
	height: 14px;
	display: block;
}

.toast-close:hover {
	background: #f3f5f7;
	color: #111b2b;
}

.toast-close:focus-visible {
	outline: 2px solid #0059c8;
	outline-offset: 2px;
}

/* ==========================================================================
 * 모바일 반응형
 * ========================================================================== */
@media screen and (max-width: 768px) {
	.toast-message {
		left: 16px;
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom));
		width: auto;
		min-width: 0;
		max-width: none;
		min-height: 52px;
		padding: 10px 12px 10px 14px;
	}

	.toast-icon {
		flex-basis: 26px;
		width: 26px;
		height: 26px;
	}

	.toast-icon svg {
		width: 15px;
		height: 15px;
	}

	.toast-text {
		font-size: 13.5px;
	}

	.toast-close {
		flex-basis: 26px;
		width: 26px;
		height: 26px;
	}
}