dpot-frontend/app/component/PopupModal.scss

// 팝업 모달 오버레이
.popup-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--overlay-color);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: popupFadeIn 0.2s ease-out;
}

// 팝업 컨테이너
.popup-modal-container {
	position: relative;
	width: 90%;
	max-width: 500px;
	max-height: 80vh;
	background: var(--bg-page);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px var(--overlay-color);
	animation: popupSlideUp 0.25s ease-out;
}

// 팝업 본문
.popup-modal-body {
	max-height: calc(80vh - 50px);
	overflow-y: auto;

	// Swiper 커스텀 스타일
	.swiper {
		width: 100%;
	}

	.swiper-button-prev,
	.swiper-button-next {
		color: #fff;
		background: var(--overlay-color);
		width: 36px;
		height: 36px;
		border-radius: 50%;
		transition: background 0.2s;

		&:hover {
			background: var(--overlay-color);
		}

		&::after {
			font-size: 14px;
			font-weight: bold;
		}
	}

	.swiper-pagination-bullet {
		background: #fff;
		opacity: 0.5;

		&-active {
			opacity: 1;
			background: var(--color-primary-600, #2563eb);
		}
	}
}

// 팝업 슬라이드
.popup-slide {
	padding: 24px;
}

.popup-slide-subject {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--text-primary);
	line-height: 1.4;
}

.popup-slide-content {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--text-primary);
	word-break: keep-all;

	img {
		max-width: 100%;
		height: auto;
		border-radius: 8px;
	}

	a {
		color: var(--color-primary-600, #2563eb);
		text-decoration: underline;
	}
}

.popup-slide-link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;

	&:hover .popup-slide-content {
		opacity: 0.85;
	}
}

// 하단 - 하루동안 보지않기 + 닫기
.popup-modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	border-top: 1px solid var(--border-default);
	background: var(--bg-elevated);
}

.popup-modal-dismiss {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	user-select: none;

	input[type='checkbox'] {
		width: 16px;
		height: 16px;
		accent-color: var(--color-primary-600, #2563eb);
		cursor: pointer;
	}

	span {
		font-size: 0.85rem;
		color: var(--text-secondary);
	}
}

.popup-modal-close {
	padding: 6px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-secondary);
	background: var(--border-default);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s;

	&:hover {
		background: var(--border-strong);
	}
}

// 애니메이션
@keyframes popupFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes popupSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

// 반응형
@media (max-width: 480px) {
	.popup-modal-container {
		width: 95%;
		max-height: 85vh;
		border-radius: 10px;
	}

	.popup-slide {
		padding: 16px;
	}

	.popup-slide-subject {
		font-size: 1.05rem;
	}

	.popup-modal-body {
		.swiper-button-prev,
		.swiper-button-next {
			width: 30px;
			height: 30px;

			&::after {
				font-size: 12px;
			}
		}
	}
}