/**
 * 公告页 — 配色与形态已对齐 VIP 会员页（vip-mempage.css）的香槟金 (Champagne Gold) 视觉体系
 * 作用域 .gonggao-page（嵌入 WordPress 时不污染全局）
 */

/* ==========================================================================
   1. 变量与基础重置
   ========================================================================== */
.gonggao-page {
	--bg:     var(--color-bg);
	--panel:  var(--color-panel);
	--ink:    var(--color-ink);
	--muted:  var(--color-muted);
	--line:   var(--color-line);
	--line-2: var(--color-line-2);
	--brand:      #b99a68;   /* 与 vip.php 会员页统一的香槟金品牌色 */
	--brand-2:    #cbb288;
	--brand-soft: rgba(185, 154, 104, .12);
	--shadow: var(--color-shadow);
	--mono: var(--font-mono);
	--sans: var(--font-sans);
	--container: 1440px;
	--pad: 24px;
	--radius: 12px;
	position: relative;
	margin: 0;
	color: var(--ink);
	font-family: var(--sans);
	background:
		radial-gradient(circle at top center, rgba(185, 154, 104, .14), transparent 34%),
		linear-gradient(180deg, #f8f4ec 0%, var(--bg) 28%, #eee7dc 100%);
	line-height: 1.7;
}

.gonggao-page,
.gonggao-page * {
	box-sizing: border-box;
}

.gonggao-page::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		linear-gradient(135deg, rgba(118, 96, 67, .03) 0 1px, transparent 1px 14px),
		linear-gradient(0deg, rgba(118, 96, 67, .025) 0 1px, transparent 1px 52px);
	opacity: .45;
	mix-blend-mode: multiply;
}

.gonggao-page a {
	color: inherit;
	text-decoration: none;
}

.gonggao-page .container {
	position: relative;
	z-index: 1;
	max-width: var(--container);
	margin: 0 auto;
	padding: 20px 20px 80px;
}

/* ==========================================================================
   2. 通用区块容器（Section）
   ========================================================================== */
.gonggao-page .section {
	position: relative;
	overflow: hidden;
	margin-top: 18px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--panel);
	box-shadow: var(--shadow);
}

.gonggao-page .section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px var(--pad) 12px;
	border-bottom: 1px solid var(--line);
}

.gonggao-page .section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--sans);
	text-transform: none;
	letter-spacing: .02em;
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
}

.gonggao-page .section-title .bar {
	width: 10px;
	height: 10px;
	background: var(--brand);
	border: 1px solid #a88957;
	border-radius: 2px;
	box-shadow: 3px 0 0 #d8c4a2;
	flex: 0 0 auto;
}

.gonggao-page .section-hint {
	font-size: 12px;
	color: var(--muted);
	font-family: var(--sans);
	letter-spacing: .04em;
	white-space: nowrap;
}

/* ==========================================================================
   3. 顶部 Banner（Hero）
   ========================================================================== */
.gonggao-page .hero {
	border-color: #d8c4a2;
	color: #fffdf8;
	background:
		radial-gradient(circle at 50% -20%, rgba(255, 249, 236, .6), transparent 42%),
		radial-gradient(circle at 106% 112%, rgba(74, 51, 22, .3), transparent 58%),
		radial-gradient(circle at -6% 112%, rgba(74, 51, 22, .22), transparent 58%),
		linear-gradient(135deg, #d6bd90 0%, #b99a68 46%, #9c7d4f 100%);
}

.gonggao-page .hero::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background:
		linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%),
		radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .2) 0 2px, transparent 3px 100%),
		radial-gradient(circle at 88% 22%, rgba(255, 255, 255, .16) 0 2px, transparent 3px 100%),
		linear-gradient(160deg, rgba(255, 255, 255, .12), transparent 28%);
}

.gonggao-page .hero-inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
	padding: 42px 34px 36px;
	text-align: center;
}

.gonggao-page .hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	padding: 8px 14px;
	font-size: 12px;
	font-family: var(--mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}

.gonggao-page .hero-badge::before {
	content: "";
	width: 10px;
	height: 10px;
	border: 1px solid #fff;
	background: #e8d9b8;
}

.gonggao-page .hero h1 {
	margin: 24px 0 14px;
	font-size: clamp(30px, 4.2vw, 56px);
	line-height: 1.18;
	letter-spacing: .01em;
}

.gonggao-page .hero h1 .hero-title-site {
	display: block;
	margin-bottom: 10px;
	color: rgba(255, 253, 249, .82);
	font-family: var(--mono);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.gonggao-page .hero h1 strong {
	color: #fff8e8;
	font-weight: 700;
	text-shadow: 0 2px 10px rgba(74, 51, 22, .18);
}

.gonggao-page .hero p {
	margin: 16px auto 0;
	max-width: 620px;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .92);
}

.gonggao-page .gonggao-hero-actions {
	margin-top: 24px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* ==========================================================================
   4. 通用按钮（Button）
   ========================================================================== */
.gonggao-page .gonggao-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 130px;
	min-height: 48px;
	padding: 12px 20px;
	font-weight: 600;
	letter-spacing: .04em;
	font-size: 14px;
	color: #876a40;
	background: #fffaf2;
	border: 1px solid #d2bd9a;
	border-radius: 10px;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
	user-select: none;
}

.gonggao-page .gonggao-hero-btn:hover {
	transform: translateY(-2px);
	background: #f5ead9;
	border-color: #c6ab7e;
	color: #76582f;
}

.gonggao-page .gonggao-hero-btn--primary {
	background: var(--brand);
	color: #fffdf8;
	border-color: transparent;
	box-shadow: 0 9px 20px rgba(156, 124, 77, .16);
}

.gonggao-page .gonggao-hero-btn--primary:hover {
	background: #a88957;
	box-shadow: 0 12px 24px rgba(156, 124, 77, .22);
}

.gonggao-page .gonggao-hero-btn:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* 与 .eyebrow 同一套视觉语言的小型复制按钮 */
.gonggao-page .gonggao-copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 0 0 auto;
	margin: 0;
	min-width: 5.5em;
	padding: 7px 12px;
	font-size: 12px;
	font-family: var(--mono);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.2;
	color: #876a40;
	background: #fffaf2;
	border: 1px solid #d2bd9a;
	border-radius: 8px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.gonggao-page .gonggao-copy-btn:hover {
	background: #f5ead9;
	border-color: #c6ab7e;
	color: #76582f;
}

.gonggao-page .gonggao-copy-btn:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.gonggao-page .gonggao-copy-btn.is-done {
	background: var(--brand-soft);
	border-color: var(--brand);
	color: var(--brand);
}

/* 联系区大邮箱旁：底色与 .contact-box 协调 */
.gonggao-page .contact-box .gonggao-copy-btn {
	background: #fffdfb;
	border-color: var(--line-2);
}

.gonggao-page .contact-box .gonggao-copy-btn:hover {
	background: var(--panel);
	border-color: var(--brand);
	color: var(--brand);
}

.gonggao-page .contact-box .gonggao-copy-btn.is-done {
	border-color: var(--brand);
}

/* ==========================================================================
   5. 升级说明（Intro / Focus List）
   ========================================================================== */
.gonggao-page .lead {
	padding: 22px var(--pad) 28px;
	display: grid;
	gap: 18px;
	align-items: stretch;
}

.gonggao-page .intro-card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(185, 154, 104, .08), #fffdf9 38%);
	padding: 20px 18px;
	position: relative;
	min-width: 0;
}

.gonggao-page .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 12px;
	border: 1px solid #d2bd9a;
	border-radius: 6px;
	background: var(--brand-soft);
	color: #876a40;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 800;
}

.gonggao-page .intro-card h2 {
	margin: 16px 0 12px;
	font-size: 30px;
	line-height: 1.22;
	font-weight: 600;
}

.gonggao-page .intro-card h2 strong {
	color: var(--brand);
}

.gonggao-page .intro-card p {
	margin: 0;
	color: #444b54;
	font-size: 15px;
}

.gonggao-page .em-strong {
	font-weight: 900;
	color: #000;
	padding: 0 4px;
}

/* 重点内容聚光板：全网独家 24Bit 精选专区 */
.gonggao-page .spotlight {
	margin-top: 18px;
	padding: 22px 20px;
	border: 1px solid var(--brand);
	border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(185, 154, 104, .10), #fffdf9 55%);
}

.gonggao-page .spotlight-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.gonggao-page .spotlight-head-text {
	min-width: 0;
}

.gonggao-page .spotlight-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--brand);
	color: #fffdf8;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.gonggao-page .spotlight h3 {
	margin: 14px 0 8px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--ink);
}

.gonggao-page .spotlight h3 strong {
	color: var(--brand);
}

.gonggao-page .spotlight-head-text > p {
	margin: 0;
	max-width: 620px;
	font-size: 14px;
	color: #444b54;
}

.gonggao-page .spotlight-head-text > p strong {
	color: var(--ink);
	font-weight: 800;
}

/* 主行动按钮：与徽章/标题同排，第一时间可见 */
.gonggao-page .spotlight-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 10px;
	background: var(--brand);
	color: #fffdf8;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .02em;
	white-space: nowrap;
	box-shadow: 0 9px 20px rgba(156, 124, 77, .16);
	transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.gonggao-page .spotlight-cta:hover {
	transform: translateY(-2px);
	background: #a88957;
	box-shadow: 0 12px 24px rgba(156, 124, 77, .22);
}

.gonggao-page .spotlight-cta-arrow {
	display: inline-block;
	transition: transform .2s ease;
}

.gonggao-page .spotlight-cta:hover .spotlight-cta-arrow {
	transform: translateX(3px);
}

/* 特点列表：图标/数字 + 文案，横向排列，符合从左到右的阅读习惯 */
.gonggao-page .spotlight-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 20px;
}

.gonggao-page .spotlight-stat {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fffdf9;
	padding: 14px;
}

.gonggao-page .spotlight-stat-icon,
.gonggao-page .spotlight-stat-num {
	flex: 0 0 auto;
	font-family: var(--mono);
	font-weight: 800;
	color: var(--brand);
	line-height: 1;
}

.gonggao-page .spotlight-stat-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--brand-soft);
	font-size: 15px;
}

.gonggao-page .spotlight-stat-num {
	font-size: 22px;
}

.gonggao-page .spotlight-stat-num small {
	font-size: 13px;
	font-weight: 700;
}

.gonggao-page .spotlight-stat-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.gonggao-page .spotlight-stat-text strong {
	font-size: 13px;
	color: var(--ink);
	font-weight: 700;
}

.gonggao-page .spotlight-stat-text span {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.4;
}

.gonggao-page .focus-list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.gonggao-page .focus-list li {
	position: relative;
	padding-left: 24px;
	font-size: 14px;
	color: #2d3138;
}

.gonggao-page .focus-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 10px;
	height: 10px;
	border: 1px solid #a88957;
	border-radius: 2px;
	background: var(--brand-2);
	box-shadow: 3px 0 0 #d8c4a2;
}

.gonggao-page .focus-list li::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 10px;
	width: 5px;
	height: 3px;
	border: 2px solid #fffdf8;
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
}

/* ==========================================================================
   6. 老会员须知（Notice）
   ========================================================================== */
.gonggao-page .notice-wrap {
	padding: 18px var(--pad) 26px;
}

.gonggao-page .notice-grid {
	display: grid;
	gap: 16px;
}

.gonggao-page .notice-card {
	background: linear-gradient(180deg, #fff, rgba(185, 154, 104, .06));
	min-height: 220px;
}

.gonggao-page .notice-card h4 {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--ink);
}

.gonggao-page .notice-body {
	display: grid;
	gap: 10px;
}

.gonggao-page .notice-note {
	margin-top: 12px;
	padding: 10px 12px;
	border: 2px dashed var(--line-2);
	background: #fffdfb;
	font-size: 13px;
	color: var(--muted);
}

.gonggao-page .notice-note strong {
	color: var(--brand);
}

/* 警示类提示（如：密码示例澄清），与常规提示区分 */
.gonggao-page .notice-note--warn {
	border-color: #b85c5c;
	background: rgba(184, 92, 92, .06);
	color: #8a4a4a;
}

.gonggao-page .notice-note--warn strong {
	color: #b85c5c;
}

.gonggao-page .gonggao-email-inline {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	vertical-align: bottom;
}

/* ==========================================================================
   7. 联系与反馈（Contact）
   ========================================================================== */
.gonggao-page .caption {
	font-size: 13px;
	color: var(--muted);
	margin: 0;
}

.gonggao-page .contact-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel);
	padding: 20px 18px;
	min-width: 0;
}

.gonggao-page .contact-box {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: linear-gradient(180deg, #fffdf9, rgba(185, 154, 104, .06));
	padding: 16px 14px;
}

.gonggao-page .gonggao-mail-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.gonggao-page .gonggao-mail-row .mail {
	flex: 1 1 auto;
	min-width: 0;
}

.gonggao-page .contact-box .mail {
	display: block;
	font-size: 24px;
	line-height: 1.2;
	color: var(--brand);
	font-weight: 900;
	word-break: break-all;
}

.gonggao-page .contact-box small {
	display: block;
	margin-top: 8px;
	color: var(--muted);
	font-family: var(--mono);
	letter-spacing: .06em;
}

.gonggao-page .contact-points {
	display: grid;
	gap: 10px;
}

.gonggao-page .contact-item {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fffdf9;
	padding: 12px 12px;
	font-size: 14px;
	color: #3f454d;
}

.gonggao-page .contact-issues {
	margin-top: 12px;
}

.gonggao-page .contact-issues h4 {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--ink);
	font-weight: 800;
}

/* ==========================================================================
   8. 响应式（Responsive）
   ========================================================================== */
@media (max-width: 768px) {
	.gonggao-page {
		--pad: 16px;
	}

	.gonggao-page .container {
		padding: 14px 12px 56px;
	}

	.gonggao-page .hero-inner {
		padding: 28px 16px 24px;
	}

	.gonggao-page .hero h1 {
		font-size: 30px;
	}

	.gonggao-page .hero h1 .hero-title-site {
		font-size: 12px;
		letter-spacing: .16em;
	}

	.gonggao-page .hero p {
		font-size: 14px;
	}

	.gonggao-page .section-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.gonggao-page .section-hint {
		white-space: normal;
	}

	.gonggao-page .intro-card h2 {
		font-size: 24px;
	}

	.gonggao-page .spotlight-head {
		flex-direction: column;
		align-items: stretch;
	}

	.gonggao-page .spotlight-cta {
		justify-content: center;
	}

	.gonggao-page .spotlight h3 {
		font-size: 19px;
	}

	.gonggao-page .spotlight-stats {
		grid-template-columns: 1fr;
	}

	.gonggao-page .notice-card h4 {
		font-size: 20px;
	}
}