/* =====================================================
   popUp.css - 현대적인 모던 모달 스타일 (글래스모피즘 적용)
   ===================================================== */

/* 다른 CSS 파일(common.css 등)의 오버라이딩을 완벽히 방어하기 위해 !important 및 transform 방어 적용 */
#popUp {
	display: none; 
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-color: rgba(15, 23, 42, 0.4) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	z-index: 10000 !important;
	justify-content: center !important;
	align-items: center !important;
	transform: none !important; /* common.css의 transform: translate(-50%, -50%) 방지 */
	box-sizing: border-box !important;
} 

.popUp-wrapper {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 20px !important;
	box-sizing: border-box !important;
}

.popUp-card {
	background: var(--bg-surface, #ffffff) !important;
	border: 1px solid var(--border, #e2e8f0) !important;
	border-radius: 20px !important;
	width: 100% !important;
	max-width: 360px !important;
	padding: 28px 24px !important;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 18px !important;
	animation: popUp-appear 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
	box-sizing: border-box !important;
	transform: none !important;
}

/* 팝업 등장 애니메이션 */
@keyframes popUp-appear {
	from {
		opacity: 0;
		transform: scale(0.92) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.popUp-icon-box {
	width: auto !important;
	height: auto !important;
	border-radius: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 42px !important;
	box-sizing: border-box !important;
	background: transparent !important;
}

/* 아이콘 타입 별 색상 */
.popUp-icon--warning {
	color: #ef4444 !important;
	background: transparent !important;
	background-color: transparent !important;
}

.popUp-icon--question {
	color: #0ea5e9 !important;
	background: transparent !important;
	background-color: transparent !important;
}

.popUp-notice {
	width: 100% !important;
	box-sizing: border-box !important;
}

.popUp-notice h2 {
	font-size: 17px !important;
	font-weight: 600 !important;
	color: var(--text-primary, #1e293b) !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	word-break: keep-all !important;
}

.popUp-actions {
	display: flex !important;
	gap: 10px !important;
	width: 100% !important;
	margin-top: 6px !important;
	box-sizing: border-box !important;
}

.popUp-btn {
	flex: 1 !important;
	padding: 12px !important;
	border: none !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	border-radius: 12px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
}

.popUp-btn--cancel {
	background-color: var(--bg-base, #f8fafc) !important;
	color: var(--text-muted, #64748b) !important;
	border: 1px solid var(--border, #e2e8f0) !important;
}

.popUp-btn--cancel:hover {
	background-color: #f1f5f9 !important;
	color: #334155 !important;
	transform: translateY(-1px) !important;
}

.popUp-btn--confirm {
	background-color: #10b981 !important;
	color: #ffffff !important;
}

.popUp-btn--confirm:hover {
	background-color: #059669 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

/* 모바일 전용 미세 조정 */
@media (max-width: 480px) {
	.popUp-card {
		padding: 24px 20px !important;
	}
	.popUp-notice h2 {
		font-size: 16px !important;
	}
}