@charset "utf-8";

/* 플로팅 배너 스타일 */
.spsoft-floating-banner {
	position: fixed !important;
	right: 24px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 99999 !important;
	transition: all 0.5s ease-in-out !important;
}

.spsoft-floating-banner.expanded {
	width: 230px !important;
	height: 300px !important;
}

.spsoft-floating-banner.collapsed {
	width: 56px !important;
	height: 56px !important;
}

.spsoft-floating-banner .toggle-btn {
	position: absolute !important;
	left: -12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: #93C5FD !important;
	color: white !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	border: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
	cursor: pointer !important;
	transition: background-color 0.2s !important;
	z-index: 10 !important;
}

.spsoft-floating-banner .toggle-btn:hover {
	background: #60A5FA !important;
}

.spsoft-floating-banner .toggle-arrow {
	font-size: 12px !important;
	transition: transform 0.3s ease !important;
}

.spsoft-floating-banner .toggle-arrow.rotated {
	transform: rotate(180deg) !important;
}

/* 배너 카드 기본 스타일 - 우선순위 강화 */
.spsoft-floating-banner .banner-card,
.spsoft-floating-banner div.banner-card {
	width: 100% !important;
	height: 100% !important;
	border-radius: 16px !important;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25) !important;
	overflow: hidden !important;
	position: relative !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.spsoft-floating-banner .banner-card:hover,
.spsoft-floating-banner div.banner-card:hover {
	transform: scale(1.02) !important;
}

/* Adobe 배너 배경 - 선택자 우선순위 강화 */
.spsoft-floating-banner .banner-card.banner-adobe,
.spsoft-floating-banner div.banner-card.banner-adobe,
.spsoft-floating-banner .banner-adobe,
.spsoft-floating-banner div.banner-adobe {
	background: linear-gradient(135deg, #FF9A8B 0%, #FF6B6B 50%, #FF4757 100%) !important;
	background-color: #FF6B6B !important;
}

/* V3 배너 배경 - 선택자 우선순위 강화 */
.spsoft-floating-banner .banner-card.banner-v3,
.spsoft-floating-banner div.banner-card.banner-v3,
.spsoft-floating-banner .banner-v3,
.spsoft-floating-banner div.banner-v3 {
	background: linear-gradient(135deg, #55EFC4 0%, #00B894 50%, #00A085 100%) !important;
	background-color: #00B894 !important;
}

.spsoft-floating-banner .banner-header {
	position: absolute !important;
	top: 16px !important;
	left: 16px !important;
	right: 16px !important;
	z-index: 10 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.spsoft-floating-banner .banner-logo {
	width: 32px !important;
	height: 32px !important;
	background: rgba(255, 255, 255, 0.2) !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 18px !important;
}

.spsoft-floating-banner .banner-title {
	color: white !important;
}

.spsoft-floating-banner .banner-title h3,
.spsoft-floating-banner .banner-title > h3 {
	font-weight: bold !important;
	font-size: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: black !important;
	line-height: 1.2 !important;
}

.spsoft-floating-banner .banner-title p,
.spsoft-floating-banner .banner-title > p {
	font-size: 12px !important;
	opacity: 0.9 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: black !important;
	line-height: 1.2 !important;
}

.spsoft-floating-banner .banner-icons {
	position: absolute !important;
	top: 80px !important;
	left: 16px !important;
	right: 16px !important;
	display: flex !important;
	justify-content: center !important;
	gap: 12px !important;
	margin-bottom: 16px !important;
}

.spsoft-floating-banner .banner-icon {
	width: 48px !important;
	height: 48px !important;
	background: rgba(255, 255, 255, 0.2) !important;
	backdrop-filter: blur(8px) !important;
	border-radius: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 20px !important;
	transition: background-color 0.2s !important;
}

.spsoft-floating-banner .banner-icon:hover {
	background: rgba(255, 255, 255, 0.3) !important;
}

.spsoft-floating-banner .banner-main-text {
	position: absolute !important;
	top: 60% !important;
	left: 16px !important;
	right: 16px !important;
	transform: translateY(-50%) !important;
	text-align: center !important;
	color: white !important;
}

.spsoft-floating-banner .banner-main-text h2,
.spsoft-floating-banner .banner-main-text > h2 {
	font-size: 24px !important;
	font-weight: bold !important;
	line-height: 1.2 !important;
	margin: 0 0 24px 0 !important;
	padding: 0 !important;
	color: white !important;
}

.spsoft-floating-banner .banner-action {
	position: absolute !important;
	bottom: 24px !important;
	left: 16px !important;
	right: 16px !important;
}

.spsoft-floating-banner .banner-btn,
.spsoft-floating-banner button.banner-btn {
	width: 100% !important;
	background: rgba(255, 255, 255, 0.2) !important;
	backdrop-filter: blur(8px) !important;
	color: white !important;
	padding: 12px 16px !important;
	border-radius: 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	font-family: 'Malgun Gothic', sans-serif !important;
}

.spsoft-floating-banner .banner-btn:hover,
.spsoft-floating-banner button.banner-btn:hover {
	background: rgba(255, 255, 255, 0.3) !important;
}

.spsoft-floating-banner .banner-dots {
	position: absolute !important;
	bottom: 8px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	display: flex !important;
	gap: 8px !important;
}

.spsoft-floating-banner .banner-dot,
.spsoft-floating-banner span.banner-dot {
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.5) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	display: inline-block !important;
}

.spsoft-floating-banner .banner-dot.active,
.spsoft-floating-banner span.banner-dot.active {
	background: white !important;
}

.spsoft-floating-banner .banner-nav,
.spsoft-floating-banner button.banner-nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 32px !important;
	height: 32px !important;
	background: rgba(255, 255, 255, 0.2) !important;
	backdrop-filter: blur(8px) !important;
	border-radius: 50% !important;
	border: none !important;
	color: white !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background-color 0.2s !important;
}

.spsoft-floating-banner .banner-nav:hover,
.spsoft-floating-banner button.banner-nav:hover {
	background: rgba(255, 255, 255, 0.3) !important;
}

.spsoft-floating-banner .banner-nav.prev,
.spsoft-floating-banner button.banner-nav.prev {
	left: 8px !important;
}

.spsoft-floating-banner .banner-nav.next,
.spsoft-floating-banner button.banner-nav.next {
	right: 8px !important;
}

.spsoft-floating-banner .collapsed-state {
	width: 56px !important;
	height: 56px !important;
	background: #93C5FD !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: background-color 0.2s !important;
}

/* 접힌 상태에서만 collapsed-state 표시 */
.spsoft-floating-banner.collapsed .collapsed-state {
	display: flex !important;
}

/* 펼쳐진 상태에서는 collapsed-state 완전히 숨김 */
.spsoft-floating-banner.expanded .collapsed-state {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

/* 펼쳐진 상태에서 expanded 배너만 표시 */
.spsoft-floating-banner.expanded .banner-card {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* 접힌 상태에서는 배너 카드 숨김 */
.spsoft-floating-banner.collapsed .banner-card {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

.spsoft-floating-banner .collapsed-state:hover {
	background: #60A5FA !important;
}

.spsoft-floating-banner .collapsed-state span {
	color: white !important;
	font-size: 12px !important;
	font-weight: bold !important;
}

.spsoft-floating-banner .new-badge {
	position: absolute !important;
	top: -8px !important;
	right: -8px !important;
	background: #EF4444 !important;
	color: white !important;
	font-size: 10px !important;
	padding: 4px 8px !important;
	border-radius: 50px !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
	z-index: 20 !important;
}

.spsoft-floating-banner .decorative-pattern {
	position: absolute !important;
	inset: 0 !important;
	opacity: 0.1 !important;
	pointer-events: none !important;
}

.spsoft-floating-banner .decorative-circle {
	position: absolute !important;
	background: white !important;
	border-radius: 50% !important;
}

.spsoft-floating-banner .decorative-circle.top-right {
	top: -64px !important;
	right: -64px !important;
	width: 128px !important;
	height: 128px !important;
}

.spsoft-floating-banner .decorative-circle.bottom-left {
	bottom: -48px !important;
	left: -48px !important;
	width: 96px !important;
	height: 96px !important;
}

/* 반응형 */
@media (max-width: 768px) {
	.spsoft-floating-banner {
		right: 16px !important;
	}
	
	.spsoft-floating-banner.expanded {
		width: 210px !important;
		height: 280px !important;
	}
}

@media (max-width: 500px) {
	.spsoft-floating-banner {
		right: 12px !important;
	}
	
	.spsoft-floating-banner.expanded {
		width: 210px !important;
		height: 280px !important;
	}
	
	.spsoft-floating-banner .banner-main-text h2,
	.spsoft-floating-banner .banner-main-text > h2 {
		font-size: 20px !important;
	}
	
	.spsoft-floating-banner .banner-btn,
	.spsoft-floating-banner button.banner-btn {
		font-size: 12px !important;
		padding: 10px 12px !important;
	}
}
/* 강제 스타일 덮어쓰기 - 다른 CSS와의 충돌 방지 */
.spsoft-floating-banner * {
	box-sizing: border-box !important;
}

/* 기존 CSS 리셋 방지 */
.spsoft-floating-banner .banner-card::before,
.spsoft-floating-banner .banner-card::after {
	display: none !important;
}

.spsoft-floating-banner .banner-adobe::before,
.spsoft-floating-banner .banner-adobe::after,
.spsoft-floating-banner .banner-v3::before,
.spsoft-floating-banner .banner-v3::after {
	display: none !important;
}