/* =====================================================
   AU 重要公告 Modal
   保留原本 .au-open 開關機制
   ===================================================== */


/* -----------------------------------------
   背景遮罩
   ----------------------------------------- */
.au-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(5, 18, 35, 0.82);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	padding: 24px;
	box-sizing: border-box;

	/* 初始：隱藏且不可互動 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity .28s ease,
		visibility 0s linear .28s;
}


/* 開啟時 */
.au-modal-overlay.au-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity .28s ease,
		visibility 0s linear 0s;
}


/* -----------------------------------------
   Modal 外層盒
   ----------------------------------------- */
.au-modal-box {
	position: relative;
	width: min(92vw, 720px);
	max-height: 86vh;
	overflow: visible;
}


/* -----------------------------------------
   Modal 主體
   ----------------------------------------- */
.au-modal-surface {
	background: #ffffff;
	border-radius: 14px;
	border: 1px solid #1b66c9;
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.32),
		0 8px 20px rgba(0, 0, 0, 0.18);

	display: flex;
	flex-direction: column;
	max-height: 86vh;
	overflow: hidden;

	/* 原本進場動畫保留 */
	transform: translateY(8px) scale(0.98);
	transition:
		transform .28s ease,
		box-shadow .28s ease;
}


/* 開啟時內容到位 */
.au-modal-overlay.au-open .au-modal-surface {
	transform: translateY(0) scale(1);
}


/* =====================================================
   上方「重要公告」標題區
   ===================================================== */

.au-modal-header {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 60px;
	padding: 16px 36px;
	box-sizing: border-box;
	background:
		linear-gradient(
			120deg,
			#0750bd 0%,
			#0b5bd3 45%,
			#164fc0 100%
		);

	overflow: hidden;
}


/* 淡淡的幾何光影 */
.au-modal-header::before {
	content: "";
	position: absolute;
	width: 240px;
	height: 240px;
	right: -100px;
	top: -150px;
	background: rgba(255, 255, 255, 0.06);
	transform: rotate(35deg);
	border-radius: 32px;
	pointer-events: none;
}


.au-modal-header::after {
	content: "";
	position: absolute;
	width: 180px;
	height: 180px;
	right: 100px;
	top: -145px;
	background: rgba(255, 255, 255, 0.035);
	transform: rotate(35deg);
	border-radius: 24px;
	pointer-events: none;
}


/* 標題文字 */
.au-modal-header h2 {
	position: relative;
	z-index: 1;
	margin: 0;
	color: #ffffff;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.08em;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.12);
}


/* =====================================================
   內容區
   ===================================================== */

.au-modal-content {
	padding: 16px 42px 20px;
	overflow: auto;

	-webkit-overflow-scrolling: touch;

	background: #ffffff;
}


/* 避免長文字撐破 */
.au-modal-content,
.au-modal-content * {
	word-break: break-word;
	overflow-wrap: anywhere;
}


/* 圖片 / 影片 / iframe 自適應 */
.au-modal-content img,
.au-modal-content video,
.au-modal-content iframe {
	max-width: 100%;
	height: auto;
}


/* =====================================================
   日期區
   ===================================================== */

.au-modal-content h3 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	width: fit-content;
	margin: 0 0 20px;
	padding: 0px;
	min-height: 46px;
	color: #0752b9;
	font-size: 1.55rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.025em;

	/*
	   日期下方裝飾線
	   前段深藍、後段淡藍
	*/
	background-image:
		linear-gradient(
			to right,
			#0759d3 0,
			#0759d3 72px,
			#dce8f8 72px,
			#dce8f8 190px,
			transparent 190px
		);

	background-repeat: no-repeat;
	background-size: 190px 4px;
	background-position: 62px bottom;
}


/* 日期左側圓形 Icon */
.au-date-icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background:
		linear-gradient(
			135deg,
			#e8f2ff 0%,
			#d4e7ff 100%
		);

	color: #0752b9;
	font-size: 21px;
	box-sizing: border-box;
}


/* Font Awesome Icon */
.au-date-icon i {
	display: block;
	line-height: 1;
}


/* =====================================================
   公告本文
   ===================================================== */

.au-modal-content p,
.au-modal-content li {
	color: #171717;
	font-size: 1em;
	line-height: 1.95;
	letter-spacing: 0.015em;
	margin: 0 0 12px;
	text-align: justify;
}


/* =====================================================
   關閉按鈕
   保留你原本的純 CSS X 設計
   ===================================================== */

.au-close-btn {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #191919;
	border: 2px solid rgba(255, 255, 255, 0.95);
	box-shadow:
		0 6px 16px rgba(0, 0, 0, 0.38),
		0 2px 5px rgba(0, 0, 0, 0.25);

	cursor: pointer;
	user-select: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 10;

	/* 隱藏 HTML 裡的 ×，實際 X 由 CSS 畫出 */
	color: transparent;

	transition:
		transform .18s ease,
		box-shadow .18s ease,
		background-color .18s ease,
		border-color .18s ease;
}


/* CSS 畫 X */
.au-close-btn::before,
.au-close-btn::after {
	content: "";
	position: absolute;
	width: 19px;
	height: 2px;
	background: #ffffff;
	border-radius: 2px;
	box-shadow:
		0 0 0.5px rgba(255, 255, 255, 0.7);
}


.au-close-btn::before {
	transform: rotate(45deg);
}


.au-close-btn::after {
	transform: rotate(-45deg);
}


/* 滑鼠移入 */
.au-close-btn:hover {
	background-color: #303030;
	border-color: #ffffff;
	transform: scale(1.08);
	box-shadow:
		0 9px 20px rgba(0, 0, 0, 0.45);
}


/* 點擊 */
.au-close-btn:active {
	transform: scale(0.95);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}


/* 鍵盤 Focus */
.au-close-btn:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.95);
	outline-offset: 3px;
}


/* =====================================================
   平板
   ===================================================== */

@media (max-width: 768px) {

	.au-modal-box {
		width: min(94vw, 720px);
	}


	.au-modal-header {
		min-height: 68px;
		padding: 14px 26px;
	}


	.au-modal-header h2 {
		font-size: 1.45rem;
	}


	.au-modal-content {
		padding: 30px 28px 34px;
	}


	.au-modal-content h3 {
		font-size: 1.4rem;
	}

}


/* =====================================================
   手機
   ===================================================== */

@media (max-width: 480px) {

	.au-modal-overlay {
		padding: 14px;
	}


	.au-modal-box {
		width: 100%;
		max-height: 90vh;
	}


	.au-modal-surface {
		max-height: 90vh;
		border-radius: 12px;
	}


	/* 手機版縮小藍色標題區 */
	.au-modal-header {
		min-height: 60px;
		padding:
			13px
			52px
			13px
			20px;
	}


	.au-modal-header h2 {
		font-size: 1.28rem;
		letter-spacing: 0.05em;
	}


	/* 內容 */
	.au-modal-content {
		padding:
			26px
			20px
			28px;
	}


	/* 日期 */
	.au-modal-content h3 {
		gap: 12px;
		min-height: 38px;
		padding: 0 0 12px;
		margin-bottom: 26px;
		font-size: 1.25rem;
		background-size: 160px 3px;
		background-position: 50px bottom;
	}


	.au-date-icon {
		width: 38px;
		height: 38px;
		font-size: 18px;
	}


	.au-modal-content p,
	.au-modal-content li {
		font-size: 1rem;
		line-height: 1.85;
	}


	/*
	   手機版關閉鈕移進藍色標題區，
	   避免超出螢幕邊界
	*/
	.au-close-btn {
		top: 10px;
		right: 10px;
		width: 36px;
		height: 36px;
		border-width: 1.5px;
		box-shadow:
			0 5px 12px rgba(0, 0, 0, 0.32);
	}


	.au-close-btn::before,
	.au-close-btn::after {
		width: 16px;
	}

}


/* =====================================================
   開啟 Modal 時禁止背景捲動
   原本機制保留
   ===================================================== */

body.au-modal-open {
	height: 100vh;
	overflow: hidden;
	position: relative;
}