.notice-popup {
	--notice-popup-w: 400px;
	--notice-body-h: 400px;
	position: fixed;
	left: 10%;
	top: 18%;
	width: var(--notice-popup-w);
	max-width: 90vw;
	background: #fff;
	z-index: 2222 !important;
	display: flex;
	flex-direction: column;
	overflow: visible;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 0 22px rgba(0, 0, 0, .22), 0 18px 42px rgba(0, 0, 0, .32);
}

.pop-close-btn {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(50%,-50%);
	border: 2px solid #fff !important;
	z-index: 9999 !important;
}

.notice-carousel {
	width: 100%;
	max-width: 90vw;
	height: var(--notice-body-h) !important;
	min-height: 0 !important;
	max-height: var(--notice-body-h) !important;
	overflow: hidden;
	box-shadow: none;
	background: #fff;
}

#notice-carousel,
#notice-carousel .mud-carousel,
#notice-carousel .mud-carousel-content,
#notice-carousel .mud-carousel-container,
#notice-carousel .mud-carousel-item {
	height: var(--notice-body-h) !important;
	min-height: 0 !important;
	max-height: var(--notice-body-h) !important;
}
	/* 캐러셀 화살표 */
	#notice-carousel .mud-carousel-control,
	#notice-carousel .mud-icon-button,
	#notice-carousel button.mud-button-root {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		color: var(--mud-palette-primary) !important;
		background-color: rgba(255,255,255,.82) !important;
		border-radius: 50% !important;
		box-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
		transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
	}

@media (hover: hover) and (pointer: fine) {
	#notice-carousel .mud-carousel-control:hover,
	#notice-carousel .mud-icon-button:hover,
	#notice-carousel button.mud-button-root:hover {
		color: var(--mud-palette-primary-text) !important;
		background-color: var(--mud-palette-primary) !important;
		box-shadow: 0 3px 8px rgba(0,0,0,.45) !important;
		transform: scale(1.05);
	}
}

#notice-carousel .mud-carousel-control svg,
#notice-carousel .mud-icon-button svg,
#notice-carousel button.mud-button-root svg {
	color: currentColor !important;
	fill: currentColor !important;
}
/* 실제 콘텐츠 */
.notice-slide-content {
	width: 100%;
	height: var(--notice-body-h);
	max-height: var(--notice-body-h);
	overflow-x: hidden;
	overflow-y: auto;
	background: #fff;
	box-sizing: border-box;
}
	/* 이미지 팝업 */
	.notice-slide-content img,
	.notice-popup img {
		width: 100%;
		height: auto;
		display: block;
	}
/* 텍스트 팝업 */
.notice-popup .mud-typography {
	word-break: break-word;
	padding: 0;
}
/* MudCarousel 기본 bullet 영역 사용 안 함 */
#notice-carousel .mud-carousel-bullets {
	display: none !important;
}
/* 하단 버튼 */
.notice-footer {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: .3rem .5rem .35rem .5rem;
	background: #21263d;
	color: #fff;
	flex-shrink: 0;
	box-shadow: -6px 0 10px -3px rgba(0,0,0,.45), 6px 0 10px -3px rgba(0,0,0,.45), 0 6px 10px -6px rgba(0,0,0,.45);
	position: relative;
}
/* 도트는 버튼 위로 */
.notice-bullets {
	order: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 14px;
}

.notice-bullet {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #bdbdbd;
	cursor: pointer;
}

	.notice-bullet.active {
		background: #f44336;
		transform: scale(1.25);
	}

.notice-footer-buttons {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.notice-footer .mud-button-root {
	min-width: auto;
	color: inherit;
}
/* 모바일 */
@media(max-width:768px) {
	.notice-popup {
		--notice-popup-w: 90vw;
		/*--notice-body-h: clamp(320px, 85vw, 400px);*/
		--notice-body-h: var(--notice-popup-w);
		width: var(--notice-popup-w) !important;
		left: 5vw !important;
		right: auto !important;
		top: 10vh !important;
		bottom: unset !important;
		background: #fff;
		transform: none !important;
	}

	.notice-carousel {
		width: 100%;
		height: var(--notice-body-h) !important;
		min-height: 0 !important;
		max-height: var(--notice-body-h) !important;
	}

	#notice-carousel,
	#notice-carousel .mud-carousel,
	#notice-carousel .mud-carousel-content,
	#notice-carousel .mud-carousel-container,
	#notice-carousel .mud-carousel-item {
		height: var(--notice-body-h) !important;
		min-height: 0 !important;
		max-height: var(--notice-body-h) !important;
	}

	.notice-slide-content {
		height: var(--notice-body-h);
		max-height: var(--notice-body-h);
	}

	#notice-carousel .mud-carousel-control,
	#notice-carousel .mud-icon-button,
	#notice-carousel button.mud-button-root {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
	}
}