:root {
	--ink: #111827;
	--muted: #6b7280;
	--brand: #6d28d9;
	--line: #e5e7eb
}

* {
	box-sizing: border-box
}

body {
	margin: 0;
	color: var(--ink);
	font: 16px/1.7 system-ui, -apple-system, Segoe UI, Roboto
}

a {
	text-decoration: none;
	color: inherit
}

.container {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 20px
}

.min-h-screen {
	min-height: 100vh
}

.bg-gray-50 {
	background: #f9fafb
}

.pt-20 {
	padding-top: 80px
}

/* Header */
.fixed {
	position: fixed
}

.top-0 {
	top: 0
}

.w-full {
	width: 100%
}

.z-50 {
	z-index: 50
}

.bg-black-10 {
	background: rgba(0, 0, 0, .1)
}

.backdrop-blur {
	backdrop-filter: saturate(1.2) blur(6px)
}

.nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px
}

.logo img {
	height: 48px;
	width: auto;
	display: block
}

.main-nav {
	display: none
}

.menu {
	display: flex;
	gap: 24px
}

.menu li {
	list-style: none
}

.menu a {
	padding: 8px 4px;
	color: #374151
}

.menu a:hover {
	color: #7c3aed
}

.hamburger {
	display: inline-flex;
	background: transparent;
	border: 0;
	color: #4b5563
}

/* Mobile */
.mobile-menu {
	margin: 8px 0
}

.m-menu {
	list-style: none;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08)
}

.m-menu li {
	margin: 6px 0
}

.m-menu a {
	display: block;
	padding: 10px;
	border-radius: 8px
}

.m-menu a:hover {
	background: #f3f4f6
}

/* Sections */
.section {
	padding: 64px 0
}

.section-head {
	text-align: center;
	margin-bottom: 24px
}

.section-head h2 {
	font-size: 28px;
	margin: 0 0 10px
}

.divider {
	width: 96px;
	height: 4px;
	background: #facc15;
	margin: 0 auto;
	border-radius: 2px
}

.prose p {
	margin: 14px 0;
	color: #374151
}

.h3 {
	font-size: 22px;
	font-weight: 700;
	margin: 20px 0
}

.ol {
	margin: 8px 0 0 22px
}

.strong {
	font-weight: 600
}

.gradient-purple {
	background: linear-gradient(180deg, #5b21b6 0%, #7c3aed 100%);
	color: #fff
}

.panel-head {
	background: #6d28d9;
	color: #fff;
	padding: 12px 16px;
	border-radius: 8px 8px 0 0
}

.panel-body {
	background: #fff;
	color: #111;
	border-radius: 0 0 12px 12px;
	padding: 24px
}

.center {
	text-align: center
}

.grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px
}

.chairman-left {
	display: flex;
	flex-direction: column;
	align-items: center
}

.avatar {
	width: 192px;
	height: 256px;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
	margin-bottom: 10px
}

.badge {
	background: #facc15;
	color: #111;
	padding: 8px 12px;
	border-radius: 8px;
	font-weight: 700
}

.org-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 24px
}

.org-head {
	background: #2563eb;
	color: #fff;
	text-align: center;
	font-weight: 700;
	padding: 10px;
	border-radius: 10px 10px 0 0
}

.org-head.blue {
	background: #2563eb
}

.org-list {
	display: grid;
	gap: 12px;
	margin-top: 12px
}

.org-card {
	background: #f3f4f6;
	border: 2px solid #f59e0b;
	border-radius: 12px;
	padding: 14px;
	text-align: center
}

.org-card.blue {
	background: #dbeafe;
	border-color: #f59e0b
}

.org-name {
	font-weight: 700;
	color: #1f2937
}

/* Footer */
footer.gradient-purple {
	padding: 48px 0 24px
}

.footer-grid {
	display: grid;
	gap: 20px;
	align-items: start
}

.qr-wrap {
	display: flex;
	gap: 16px
}

.qr img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 8px
}

.contact .link {
	color: #fde68a
}

.copy {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .35);
	text-align: center;
	color: #fde68a
}

/* Back to top */
.back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	background: #7c3aed;
	border: 0;
	color: #fff;
	border-radius: 999px;
	padding: 10px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
	cursor: pointer
}

/* Layout helpers */
.container.narrow {
	max-width: 880px
}

.container.wide {
	max-width: 1200px
}

.mt-16 {
	margin-top: 32px
}

.mb-4 {
	margin-bottom: 12px
}

/* Responsive */
@media (min-width: 960px) {
	.main-nav {
		display: block
	}

	.hamburger {
		display: none
	}

	.grid-2 {
		grid-template-columns: 1fr 2fr
	}

	.org-grid {
		grid-template-columns: repeat(4, 1fr)
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}
}
/* 讓文章/段落中的圖片不會超過容器 */
.text-p img,
.prose img,
img.responsive-img {
	max-width: 100%;
	height: auto;
	display: block;
	/* 避免行內圖片基線間隙 */
}

/* 如果這一塊希望固定最大寬度 */
.text-p.fs18 {
	max-width: 1080px;
	/* 依你的版心調整 */
	margin: 0 auto;
	/* 置中 */
}
/* 卡片網格 */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 36px;
}

.news-card .thumb {
	display: block;
	aspect-ratio: 3/2;
	overflow: hidden;
	border-radius: 8px;
}

.news-card .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.news-card .thumb:hover img {
	transform: scale(1.04);
}

.news-card .title {
	font-size: 20px;
	line-height: 1.5;
	margin: 14px 0 8px;
	font-weight: 700;
}

.news-card .title a {
	text-decoration: none;
	color: #111;
}

.news-card .title a:hover {
	opacity: .85;
}

.news-card .meta {
	color: #6b7280;
	font-size: 14px;
}

.news-card .meta .sep {
	margin: 0 10px;
}

/* RWD */
@media (max-width: 1024px) {
	.news-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.news-grid {
		grid-template-columns: 1fr;
	}
}