/* ==========================================================
   CSSS Notice Board — scoped styles
   Prefix: .csss-notice-board (unique, safe with any theme/Elementor)
   ========================================================== */

.csss-notice-board {
	--csss-nb-height: 300px !important;
	--csss-nb-speed: 40 !important;
	width: 100% !important;
	max-width: 100% !important;
	background: #ffffff !important;
	border: 1px solid #e2e6ea !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
	font-family: inherit !important;
	box-sizing: border-box !important;
}

.csss-notice-board * {
	box-sizing: border-box !important;
}

.csss-notice-board .csss-notice-board-header {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: #0b3d91 !important;
	color: #ffffff !important;
	padding: 12px 16px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px !important;
}

.csss-notice-board .csss-notice-board-header .dashicons {
	font-size: 20px !important;
	width: 20px !important;
	height: 20px !important;
	animation: csss-nb-ring 1.8s ease-in-out infinite !important;
}

@keyframes csss-nb-ring {
	0%, 100% { transform: rotate(0deg) !important; }
	10% { transform: rotate(-12deg) !important; }
	20% { transform: rotate(10deg) !important; }
	30% { transform: rotate(-8deg) !important; }
	40% { transform: rotate(0deg) !important; }
}

.csss-notice-board .csss-notice-board-viewport {
	position: relative !important;
	height: var(--csss-nb-height) !important;
	overflow: hidden !important;
	padding: 0 16px !important;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%) !important;
	mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%) !important;
}

.csss-notice-board .csss-notice-board-track {
	list-style: none !important;
	margin: 0 !important;
	padding: 12px 0 !important;
	position: relative !important;
	will-change: transform !important;
}

.csss-notice-board .csss-notice-board-item {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 4px !important;
	border-bottom: 1px dashed #e2e6ea !important;
}

.csss-notice-board .csss-notice-board-item:last-child {
	border-bottom: none !important;
}

.csss-notice-board .csss-notice-board-date {
	flex: 0 0 auto !important;
	background: #eef3ff !important;
	color: #0b3d91 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	white-space: nowrap !important;
}

.csss-notice-board .csss-notice-board-link {
	flex: 1 1 auto !important;
	color: #1a1a1a !important;
	text-decoration: none !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	transition: color 0.15s ease !important;
}

.csss-notice-board .csss-notice-board-link:hover {
	color: #0b3d91 !important;
	text-decoration: underline !important;
}

.csss-notice-board-empty {
	padding: 16px !important;
	text-align: center !important;
	color: #666 !important;
	border: 1px dashed #ccc !important;
	border-radius: 10px !important;
}

/* Single Notice detail page */
.csss-single-notice-date {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #eef3ff !important;
	color: #0b3d91 !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	margin-bottom: 18px !important;
}

.csss-single-notice-back {
	margin-top: 30px !important;
}

.csss-single-notice-back a {
	color: #0b3d91 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.csss-single-notice-back a:hover {
	text-decoration: underline !important;
}