/*
Theme Name: 相约 Xiangyue
Theme URI: https://example.invalid/xiangyue
Author: moban
Description: 暖白底、珊瑚粉与薄荷色的中文同城约会内容主题。首页由首屏插画、今日约会灵感、约会四步、约会地图、约会场景横滑卡、适合谁画像卡、安全中心、常见问题、关于本站组成，全部从分类与标签文章取内容，同一篇文章只出现一次，板块顺序可调；文章页带本文要点、H2 自动目录、一句话答案、见面前提醒、标签分组、同分类上下篇和相关 6 篇。珊瑚 / 杏桃 / 莓紫三套配色并跟随系统深色模式。插画和图标全部自绘 SVG。只在搜索页输出 noindex，不输出其他 SEO 标签，不导入演示内容，不加载任何外部资源。
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xiangyue
*/

/* ---------- 色板 ---------- */
/* --xg-primary 只做色块装饰；文字和实心按钮用 --xg-ink（对比度 ≥4.5:1），薄荷文字用 --xg-mint-ink */
:root,
body {
	--xg-bg: #fff9f5;
	--xg-surface: #fff;
	--xg-fg: #2b2b33;
	--xg-mfg: #626270;
	--xg-primary: #ff6b6b;
	--xg-ink: #bd3b3b;
	--xg-secondary: #2ec4b6;
	--xg-mint-ink: #0f766e;
	--xg-soft: #ffe8e3;
	--xg-mint-soft: #e3f7f5;
	--xg-border: #f0e4df;
	--xg-dark: #1f2a44;
	--xg-on-dark: #fff;
	--xg-on-dark-mfg: #c9d2e8;
	--xg-dark-accent: #2ec4b6;
	--xg-btn-fg: #fff;
	--xg-art-skin1: #ff6b6b;
	--xg-art-skin2: #2ec4b6;
	--xg-shadow: 0 6px 24px rgba(43, 43, 51, .06);
	--xg-r: 16px;
	--xg-wrap: 1160px;
	--xg-gut: 20px;
	--xg-sans: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
	color-scheme: light;
}
body.xg-p-apricot {
	--xg-primary: #ff8a5b;
	--xg-ink: #b0431c;
	--xg-secondary: #5b8def;
	--xg-mint-ink: #2f62c8;
	--xg-soft: #ffeadf;
	--xg-mint-soft: #e6eefd;
	--xg-dark-accent: #8fb2ff;
	--xg-art-skin1: #ff8a5b;
	--xg-art-skin2: #5b8def;
}
body.xg-p-berry {
	--xg-primary: #b05bef;
	--xg-ink: #8a36cc;
	--xg-soft: #f3e6fd;
	--xg-border: #ebe1f2;
	--xg-art-skin1: #b05bef;
	--xg-art-skin2: #2ec4b6;
}
body.xg-r-12 { --xg-r: 12px; }
body.xg-r-20 { --xg-r: 20px; }

@media (prefers-color-scheme: dark) {
	body.xg-dark-auto {
		--xg-bg: #17171d;
		--xg-surface: #22222b;
		--xg-fg: #f2efec;
		--xg-mfg: #a8a8b5;
		--xg-ink: #ff8f7a;
		--xg-mint-ink: #5ee0d2;
		--xg-soft: #2e2428;
		--xg-mint-soft: #1d2e2d;
		--xg-border: #34343f;
		--xg-dark: #101726;
		--xg-btn-fg: #17171d;
		--xg-shadow: 0 6px 24px rgba(0, 0, 0, .3);
		color-scheme: dark;
	}
	body.xg-dark-auto.xg-p-apricot {
		--xg-ink: #ffa27a;
		--xg-mint-ink: #8fb2ff;
		--xg-soft: #2e2622;
		--xg-mint-soft: #1e2536;
	}
	body.xg-dark-auto.xg-p-berry {
		--xg-ink: #c9a0ff;
		--xg-soft: #2a2333;
	}
}

/* ---------- 基础 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
	margin: 0;
	background: var(--xg-bg);
	color: var(--xg-fg);
	font: 400 16px/1.75 var(--xg-sans);
	overflow-wrap: anywhere;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--xg-ink); }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.35; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--xg-ink); outline-offset: 3px; border-radius: 6px; }
.xg-sr {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.xg-skip {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	padding: 10px 18px; border-radius: 999px;
	background: var(--xg-ink); color: var(--xg-btn-fg); font-weight: 700;
}
.xg-skip:focus { top: 12px; color: var(--xg-btn-fg); }
.xg-wrap { width: 100%; max-width: calc(var(--xg-wrap) + var(--xg-gut) * 2); margin: 0 auto; padding: 0 var(--xg-gut); }
.xg-wrap--mid { max-width: calc(860px + var(--xg-gut) * 2); }
.xg-main:focus { outline: none; }
.xg-ico { width: 1.2em; height: 1.2em; flex: none; }
.xg-meta { color: var(--xg-mfg); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.xg-meta span { display: inline-flex; align-items: center; gap: 4px; }
.xg-meta .xg-ico { width: 16px; height: 16px; }
.xg-empty { padding: 40px 0; color: var(--xg-mfg); }

/* 胶囊与按钮 */
.xg-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 2px 12px; border-radius: 999px;
	background: var(--xg-soft); color: var(--xg-ink);
	font-size: 13px; font-weight: 600; line-height: 1.8; white-space: nowrap;
}
.xg-pill:hover { background: var(--xg-ink); color: var(--xg-btn-fg); }
.xg-pill--lg { padding: 6px 16px; font-size: 15px; }
.xg-pill--lg .xg-ico { width: 18px; height: 18px; }
.xg-pill--tag { background: var(--xg-mint-soft); color: var(--xg-mint-ink); }
.xg-pill--tag:hover { background: var(--xg-mint-ink); color: var(--xg-surface); }
.xg-pill__n { font-size: 12px; font-variant-numeric: tabular-nums; }
.xg-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.xg-pills--big { margin-top: 20px; }
.xg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 10px 24px; border-radius: 999px;
	border: 2px solid var(--xg-ink); color: var(--xg-ink);
	font-weight: 700; line-height: 1.3; text-align: center;
	transition: background .15s, color .15s;
}
.xg-btn:hover { background: var(--xg-soft); color: var(--xg-ink); }
.xg-btn--solid { background: var(--xg-ink); color: var(--xg-btn-fg); }
.xg-btn--solid:hover { background: var(--xg-fg); border-color: var(--xg-fg); color: var(--xg-bg); }
.xg-btn--sm { min-height: 40px; padding: 6px 16px; font-size: 15px; }
.xg-btn--mint { border-color: var(--xg-dark-accent); color: var(--xg-dark-accent); }
.xg-btn--mint:hover { background: var(--xg-dark-accent); color: var(--xg-dark); }
.xg-btn .xg-ico { width: 18px; height: 18px; }
.xg-more { display: inline-flex; align-items: center; gap: 6px; color: var(--xg-ink); font-weight: 600; white-space: nowrap; }
.xg-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.xg-more .xg-ico { width: 16px; height: 16px; transition: transform .15s; }
.xg-more:hover .xg-ico { transform: translateX(3px); }
.xg-more--sm { font-size: 14px; }

/* ---------- 页头 ---------- */
.xg-top {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--xg-bg) 92%, transparent);
	border-bottom: 1px solid var(--xg-border);
	backdrop-filter: saturate(1.4) blur(10px);
}
.xg-top__bar { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.xg-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; min-width: 0; }
.xg-logo__mark {
	display: grid; place-items: center; width: 36px; height: 36px; flex: none;
	border-radius: 12px; background: var(--xg-primary); color: #fff;
}
.xg-logo__mark .xg-ico { width: 20px; height: 20px; fill: #fff; }
.xg-logo__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xg-nav--wide { margin-left: auto; }
.xg-nav--wide .xg-menu { display: flex; gap: 4px; }
.xg-nav--wide .xg-menu a { display: block; padding: 6px 12px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
.xg-nav--wide .xg-menu a:hover,
.xg-nav--wide .current-menu-item > a { background: var(--xg-soft); color: var(--xg-ink); }
.xg-drawer { display: none; margin-left: auto; }
.xg-drawer summary {
	display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
	min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--xg-border);
	background: var(--xg-surface); font-weight: 600;
}
.xg-drawer summary::-webkit-details-marker { display: none; }
.xg-drawer__panel {
	position: absolute; left: 16px; right: 16px; top: calc(100% + 8px);
	display: grid; gap: 16px; padding: 18px;
	background: var(--xg-surface); border: 1px solid var(--xg-border); border-radius: var(--xg-r);
	box-shadow: 0 16px 40px rgba(43, 43, 51, .14);
}
.xg-drawer__panel .xg-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.xg-drawer__panel .xg-menu a { display: block; padding: 10px 14px; border-radius: 12px; background: var(--xg-bg); }
.xg-drawer__panel .current-menu-item > a { background: var(--xg-soft); color: var(--xg-ink); }

/* 搜索框 */
.xg-search { display: flex; gap: 8px; max-width: 520px; }
.xg-search input {
	flex: 1; min-width: 0; min-height: 46px; padding: 8px 18px;
	border: 1px solid var(--xg-border); border-radius: 999px; background: var(--xg-surface);
}
.xg-search input::placeholder { color: var(--xg-mfg); }
.xg-search button {
	display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 8px 18px;
	border: 0; border-radius: 999px; background: var(--xg-ink); color: var(--xg-btn-fg); font-weight: 700; cursor: pointer;
}
.xg-search button .xg-ico { width: 18px; height: 18px; }

/* ---------- 首屏 ---------- */
.xg-hero { padding: 56px 0 40px; overflow: hidden; }
.xg-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.xg-hero--plain .xg-hero__grid { grid-template-columns: 1fr; max-width: 820px; }
.xg-hero__brow {
	display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
	padding: 4px 14px; border-radius: 999px; background: var(--xg-surface); box-shadow: var(--xg-shadow);
	color: var(--xg-ink); font-size: 14px; font-weight: 600;
}
.xg-hero__brow .xg-ico { width: 16px; height: 16px; fill: currentColor; }
.xg-hero__title { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.2; letter-spacing: -.01em; }
.xg-hero__promise { margin-top: 18px; max-width: 34em; color: var(--xg-mfg); font-size: 17px; }
.xg-hero__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.xg-hero__pills .xg-pill { background: var(--xg-surface); border: 1px solid var(--xg-border); color: var(--xg-fg); }
.xg-hero__pills .xg-pill::before { content: "#"; color: var(--xg-ink); font-weight: 700; }
.xg-hero__pills .xg-pill:hover { border-color: var(--xg-ink); color: var(--xg-ink); background: var(--xg-surface); }
.xg-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.xg-hero__art { position: relative; }
.xg-art { width: 100%; max-width: 480px; margin-left: auto; }
.xg-art__soft { fill: var(--xg-soft); }
.xg-art__win { fill: var(--xg-surface); stroke: var(--xg-border); stroke-width: 3; }
.xg-art__line { stroke: var(--xg-border); stroke-width: 3; stroke-linecap: round; }
.xg-art__city { fill: var(--xg-mint-soft); }
.xg-art__lamp { fill: var(--xg-secondary); }
.xg-art__p1 { fill: var(--xg-art-skin1); }
.xg-art__p2 { fill: var(--xg-art-skin2); }
.xg-art__table { fill: var(--xg-fg); }
.xg-art__leg { fill: var(--xg-fg); opacity: .85; }
.xg-art__cup { fill: var(--xg-surface); stroke: var(--xg-fg); stroke-width: 3; }
.xg-art__steam { stroke: var(--xg-mfg); stroke-width: 3; stroke-linecap: round; opacity: .6; }
.xg-art__heart { fill: var(--xg-primary); }
.xg-art__dots circle { fill: var(--xg-art-skin1); opacity: .55; }
.xg-art__leaf { fill: var(--xg-secondary); opacity: .75; }
.xg-art__leaf2 { fill: var(--xg-secondary); opacity: .45; }

/* ---------- 板块通用 ---------- */
.xg-block { padding: 56px 0; }
.xg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.xg-head__title { font-size: clamp(24px, 3vw, 32px); }
.xg-head__title::after {
	content: ""; display: block; width: 40px; height: 4px; margin-top: 10px;
	border-radius: 999px; background: var(--xg-primary);
}
.xg-head__sub { margin-top: 10px; color: var(--xg-mfg); }

/* 卡片 */
.xg-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.xg-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--xg-surface); border: 1px solid var(--xg-border); border-radius: var(--xg-r);
	box-shadow: var(--xg-shadow); transition: transform .2s, box-shadow .2s;
}
.xg-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(43, 43, 51, .1); }
.xg-card__media { display: block; aspect-ratio: 16 / 10; background: var(--xg-soft); }
.xg-card__media img { width: 100%; height: 100%; object-fit: cover; }
.xg-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.xg-card__title { font-size: 18px; }
.xg-card__text { color: var(--xg-mfg); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xg-card .xg-meta { margin-top: auto; }
.xg-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--xg-ink); background: var(--xg-soft); }
.xg-ph--1 { background: var(--xg-mint-soft); color: var(--xg-mint-ink); }
.xg-ph--2 { background: linear-gradient(135deg, var(--xg-soft), var(--xg-mint-soft)); }
.xg-ph .xg-ico { width: 56px; height: 56px; stroke-width: 1.4; }

/* ---------- 约会四步 ---------- */
.xg-steps { background: var(--xg-surface); border-block: 1px solid var(--xg-border); }
.xg-steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: none; }
.xg-step {
	position: relative; display: flex; flex-direction: column; gap: 12px;
	padding: 24px 22px; border-radius: var(--xg-r); background: var(--xg-bg); border: 1px solid var(--xg-border);
}
/* 步骤之间的虚线箭头 */
.xg-step:not(:last-child)::after {
	content: ""; position: absolute; top: 44px; right: -27px; width: 26px; height: 0;
	border-top: 2px dashed var(--xg-primary);
}
.xg-step:not(:last-child)::before {
	content: ""; position: absolute; top: 39px; right: -28px; width: 10px; height: 10px;
	border-top: 2px solid var(--xg-primary); border-right: 2px solid var(--xg-primary); transform: rotate(45deg);
}
.xg-step__top { display: flex; align-items: center; justify-content: space-between; }
.xg-step__n { font-size: 44px; font-weight: 800; line-height: 1; color: var(--xg-ink); font-variant-numeric: tabular-nums; }
.xg-step__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--xg-soft); color: var(--xg-ink); }
.xg-step__name { font-size: 20px; }
.xg-step__desc { color: var(--xg-mfg); font-size: 15px; }
.xg-step__posts { display: grid; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--xg-border); }
.xg-step__posts a { display: block; font-size: 15px; font-weight: 600; line-height: 1.5; }
.xg-step__posts a::before { content: "· "; color: var(--xg-ink); }
.xg-step .xg-more { margin-top: auto; }

/* ---------- 约会地图 ---------- */
.xg-map__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.xg-zone {
	display: flex; flex-direction: column; gap: 8px; padding: 20px;
	background: var(--xg-surface); border: 1px solid var(--xg-border); border-radius: var(--xg-r);
	background-image: radial-gradient(var(--xg-border) 1px, transparent 1px); background-size: 14px 14px;
}
.xg-zone__name { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 700; }
.xg-zone__name .xg-ico { color: var(--xg-ink); width: 24px; height: 24px; }
.xg-zone__feat { color: var(--xg-mfg); font-size: 14px; }
.xg-zone__post {
	margin-top: auto; padding: 10px 12px; border-radius: 12px;
	background: var(--xg-surface); border: 1px solid var(--xg-border); font-size: 15px; font-weight: 600; line-height: 1.5;
}
.xg-zone__post:hover { border-color: var(--xg-ink); }

/* ---------- 约会场景（CSS scroll-snap 横滑） ---------- */
.xg-scenes { background: linear-gradient(180deg, var(--xg-bg), var(--xg-soft)); }
.xg-scenes__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, calc((100% - 60px) / 4));
	gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin: 0 -4px;
	scrollbar-width: thin; scrollbar-color: var(--xg-primary) transparent;
}
.xg-scene {
	scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px;
	min-height: 220px; padding: 24px; border-radius: var(--xg-r);
	background: var(--xg-surface); border: 1px solid var(--xg-border); box-shadow: var(--xg-shadow);
}
.xg-scene__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--xg-soft); color: var(--xg-ink); }
.xg-scene--2 .xg-scene__ico { background: var(--xg-mint-soft); color: var(--xg-mint-ink); }
.xg-scene--3 .xg-scene__ico { background: var(--xg-fg); color: var(--xg-bg); }
.xg-scene__ico .xg-ico { width: 28px; height: 28px; }
.xg-scene__name { color: var(--xg-mfg); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.xg-scene__title { font-size: 18px; margin-top: auto; }

/* ---------- 适合谁 ---------- */
.xg-who__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.xg-persona {
	position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px;
	background: var(--xg-surface); border: 1px solid var(--xg-border); border-radius: var(--xg-r); box-shadow: var(--xg-shadow);
}
.xg-persona__note {
	position: absolute; top: 14px; right: 14px; padding: 0 8px; border-radius: 999px;
	border: 1px solid var(--xg-border); color: var(--xg-mfg); font-size: 12px; line-height: 1.7;
}
.xg-av { width: 72px; height: 72px; }
.xg-av__bg { fill: var(--xg-soft); }
.xg-av__a { fill: var(--xg-art-skin1); }
.xg-av__b { fill: var(--xg-fg); opacity: .85; }
.xg-av__c { fill: var(--xg-art-skin2); }
.xg-av--2 .xg-av__bg, .xg-av--4 .xg-av__bg { fill: var(--xg-mint-soft); }
.xg-av--2 .xg-av__a, .xg-av--4 .xg-av__a { fill: var(--xg-art-skin2); }
.xg-av--2 .xg-av__c, .xg-av--4 .xg-av__c { fill: var(--xg-art-skin1); }
.xg-persona__name { font-size: 19px; }
.xg-persona__desc { color: var(--xg-mfg); font-size: 15px; }
.xg-persona__posts { display: grid; gap: 6px; padding: 12px 0 4px; border-top: 1px dashed var(--xg-border); }
.xg-persona__posts a { font-size: 15px; font-weight: 600; line-height: 1.5; }
.xg-persona .xg-more { margin-top: auto; }

/* ---------- 安全中心（深色区块） ---------- */
.xg-safe { background: var(--xg-dark); color: var(--xg-on-dark); }
.xg-safe__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.xg-safe__badge {
	display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px;
	border-radius: 20px; background: rgba(46, 196, 182, .16); color: var(--xg-dark-accent);
}
.xg-safe__badge .xg-ico { width: 34px; height: 34px; }
.xg-safe .xg-head__title::after { background: var(--xg-dark-accent); }
.xg-safe .xg-head__sub { color: var(--xg-on-dark-mfg); }
.xg-safe__rules { display: grid; gap: 14px; }
.xg-safe__rules li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.xg-safe__rules .xg-ico { color: var(--xg-dark-accent); margin-top: 3px; }
.xg-safe__side { padding: 28px; border-radius: var(--xg-r); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.xg-safe__h { color: var(--xg-dark-accent); font-weight: 700; margin-bottom: 8px; }
.xg-safe__posts li { display: flex; flex-direction: column; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.xg-safe__posts a { font-weight: 600; }
.xg-safe__posts a:hover { color: var(--xg-dark-accent); }
.xg-safe__posts time { color: var(--xg-on-dark-mfg); font-size: 13px; }
.xg-safe__side .xg-btn { margin-top: 22px; }
.xg-safe :focus-visible { outline-color: var(--xg-dark-accent); }

/* ---------- 常见问题 ---------- */
.xg-faq__list { display: grid; gap: 12px; }
.xg-qa { background: var(--xg-surface); border: 1px solid var(--xg-border); border-radius: var(--xg-r); }
.xg-qa[open] { box-shadow: var(--xg-shadow); }
.xg-qa summary {
	display: flex; align-items: center; gap: 12px; padding: 18px 20px;
	cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; line-height: 1.5;
}
.xg-qa summary::-webkit-details-marker { display: none; }
.xg-qa summary span { flex: 1; }
.xg-qa__q { color: var(--xg-ink); }
.xg-qa__chev { color: var(--xg-mfg); transition: transform .2s; }
.xg-qa[open] .xg-qa__chev { transform: rotate(180deg); }
.xg-qa__a { display: grid; gap: 10px; justify-items: start; padding: 0 20px 20px 52px; color: var(--xg-mfg); }

/* ---------- 关于本站 ---------- */
.xg-about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.xg-about__col { padding: 28px; border-radius: var(--xg-r); background: var(--xg-surface); border: 1px solid var(--xg-border); }
.xg-about__col h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin-bottom: 14px; }
.xg-about__col h3 .xg-ico { display: block; padding: 5px; width: 32px; height: 32px; border-radius: 999px; }
.xg-about__col--yes h3 .xg-ico { background: var(--xg-mint-soft); color: var(--xg-mint-ink); }
.xg-about__col--no h3 .xg-ico { background: var(--xg-soft); color: var(--xg-ink); }
.xg-about__col li { position: relative; padding: 6px 0 6px 18px; }
.xg-about__col li::before { content: ""; position: absolute; left: 0; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--xg-border); }
.xg-about__col--yes li::before { background: var(--xg-secondary); }
.xg-about__col--no li::before { background: var(--xg-primary); }
.xg-about__col a { color: var(--xg-ink); text-decoration: underline; }

/* ---------- 页脚 ---------- */
.xg-foot { margin-top: 40px; padding: 48px 0 24px; background: var(--xg-surface); border-top: 1px solid var(--xg-border); }
.xg-foot__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.xg-foot__name { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.xg-foot__name .xg-ico { color: var(--xg-ink); fill: currentColor; }
.xg-foot__about p { color: var(--xg-mfg); }
.xg-foot__about .xg-foot__name { color: var(--xg-fg); }
.xg-foot__note { margin-top: 10px; font-size: 14px; }
.xg-foot__h { font-weight: 700; margin-bottom: 10px; }
.xg-foot__nav .xg-menu { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.xg-foot__nav a { color: var(--xg-mfg); }
.xg-foot__nav a:hover { color: var(--xg-ink); }
.xg-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--xg-border); color: var(--xg-mfg); font-size: 14px; }
.xg-foot__base a:hover { color: var(--xg-ink); }

/* ---------- 内页 ---------- */
.xg-page { padding-top: 24px; padding-bottom: 32px; }
.xg-page--narrow { max-width: calc(800px + var(--xg-gut) * 2); }
.xg-crumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--xg-mfg); }
.xg-crumb li { display: inline-flex; align-items: center; min-width: 0; }
.xg-crumb li + li::before { content: "›"; margin: 0 8px; color: var(--xg-mfg); }
.xg-crumb a:hover { color: var(--xg-ink); }
.xg-crumb [aria-current] { color: var(--xg-fg); }
.xg-page__head { padding: 28px 0 32px; display: grid; gap: 12px; justify-items: start; }
.xg-page__head--term { grid-template-columns: auto 1fr; align-items: start; gap: 20px; }
.xg-page__head--term > div { display: grid; gap: 10px; justify-items: start; }
.xg-page__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--xg-soft); color: var(--xg-ink); }
.xg-page__head--zone .xg-page__ico { background: var(--xg-mint-soft); color: var(--xg-mint-ink); }
.xg-page__ico .xg-ico { width: 32px; height: 32px; }
.xg-page__title { font-size: clamp(26px, 3.6vw, 38px); }
.xg-page__paged { display: inline-block; margin-left: 12px; font-size: .5em; font-weight: 600; color: var(--xg-mfg); vertical-align: middle; }
.xg-page__desc { color: var(--xg-mfg); max-width: 46em; }
.xg-grid3--lead { margin-bottom: 32px; }
.xg-grid3--lead .xg-card__title { font-size: 20px; }
.xg-list { display: grid; gap: 16px; }
.xg-row {
	display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 16px;
	background: var(--xg-surface); border: 1px solid var(--xg-border); border-radius: var(--xg-r);
}
.xg-row__media { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--xg-soft); }
.xg-row__media img { width: 100%; height: 100%; object-fit: cover; }
.xg-row__media .xg-ph .xg-ico { width: 40px; height: 40px; }
.xg-row__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.xg-row__title { font-size: 19px; }
.xg-row__text { color: var(--xg-mfg); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xg-pager { margin: 32px 0; }
.xg-pager ul, .xg-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.xg-pager a, .xg-pager span.page-numbers, .xg-pager > span {
	display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px;
	border-radius: 999px; background: var(--xg-surface); border: 1px solid var(--xg-border); font-weight: 600;
}
.xg-pager .current { background: var(--xg-ink); border-color: var(--xg-ink); color: var(--xg-btn-fg); }
.xg-pager a:hover { border-color: var(--xg-ink); }
.xg-other { margin-top: 48px; }
.xg-sub-title { font-size: 22px; margin-bottom: 18px; }

/* 文章页 */
.xg-read { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 800px; margin: 0 auto; }
.xg-read.has-toc { grid-template-columns: minmax(0, 1fr) 260px; max-width: none; }
.xg-article__head { display: grid; gap: 14px; justify-items: start; padding: 24px 0 20px; }
.xg-article__title { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.3; }
.xg-answer, .xg-gist, .xg-tip { margin: 0 0 24px; padding: 20px 22px; border-radius: var(--xg-r); }
.xg-answer { background: var(--xg-primary); background: linear-gradient(135deg, var(--xg-soft), var(--xg-surface)); border: 2px solid var(--xg-primary); }
.xg-answer__h, .xg-gist__h, .xg-tip__h { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 6px; }
.xg-answer__h { color: var(--xg-ink); }
.xg-answer__a { font-size: 18px; font-weight: 600; }
.xg-gist { background: var(--xg-surface); border: 1px solid var(--xg-border); box-shadow: var(--xg-shadow); }
.xg-gist__h { color: var(--xg-ink); }
.xg-gist p:last-child { color: var(--xg-mfg); }
.xg-tip { margin-top: 32px; background: var(--xg-mint-soft); border-left: 5px solid var(--xg-secondary); }
.xg-tip__h { color: var(--xg-mint-ink); }
.xg-tip ul { display: grid; gap: 6px; }
.xg-tip li { position: relative; padding-left: 18px; }
.xg-tip li::before { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--xg-secondary); }
.xg-tip a { color: var(--xg-mint-ink); text-decoration: underline; }
.xg-article__cover { margin: 0 0 24px; border-radius: var(--xg-r); overflow: hidden; background: var(--xg-soft); }
.xg-article__cover img { width: 100%; }
.xg-toc { background: var(--xg-surface); border: 1px solid var(--xg-border); border-radius: var(--xg-r); }
.xg-toc ol { counter-reset: toc; display: grid; gap: 2px; }
.xg-toc li { counter-increment: toc; }
.xg-toc a { display: flex; gap: 8px; padding: 6px 10px; border-radius: 10px; font-size: 15px; line-height: 1.5; }
.xg-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--xg-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.xg-toc a:hover, .xg-toc a[aria-current] { background: var(--xg-soft); color: var(--xg-ink); }
.xg-toc--inline { display: none; margin-bottom: 24px; }
.xg-toc--inline summary { display: flex; align-items: center; gap: 8px; padding: 14px 18px; cursor: pointer; font-weight: 700; list-style: none; }
.xg-toc--inline summary::-webkit-details-marker { display: none; }
.xg-toc--inline ol { padding: 0 10px 14px; }
.xg-toc__count { margin-left: auto; color: var(--xg-mfg); font-size: 14px; font-weight: 400; }
.xg-read__side { position: relative; }
.xg-toc--side { position: sticky; top: 92px; padding: 18px 12px; max-height: calc(100vh - 120px); overflow: auto; margin-top: 24px; }
.xg-toc__title { display: flex; align-items: center; gap: 8px; padding: 0 10px 8px; font-weight: 700; }
.xg-prose { font-size: 17px; line-height: 1.9; }
.xg-prose > * + * { margin-top: 1.1em; }
.xg-prose h2 { font-size: 24px; margin-top: 2em; padding-left: 14px; border-left: 4px solid var(--xg-primary); }
.xg-prose h3 { font-size: 20px; margin-top: 1.6em; }
.xg-prose ul { list-style: disc; padding-left: 1.4em; }
.xg-prose ol { list-style: decimal; padding-left: 1.4em; }
.xg-prose a { color: var(--xg-ink); text-decoration: underline; text-underline-offset: 3px; }
.xg-prose blockquote { margin: 1.4em 0; padding: 14px 20px; border-radius: 12px; background: var(--xg-soft); }
.xg-prose img { border-radius: 12px; }
.xg-prose figure { margin: 1.4em 0; }
.xg-prose figcaption { color: var(--xg-mfg); font-size: 14px; text-align: center; }
.xg-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.xg-prose th, .xg-prose td { padding: 8px 12px; border: 1px solid var(--xg-border); }
.xg-tagset { display: grid; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--xg-border); }
.xg-tagset__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xg-tagset__h { min-width: 4em; color: var(--xg-mfg); font-size: 14px; }
.xg-adj { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.xg-adj > div { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--xg-r); background: var(--xg-surface); border: 1px solid var(--xg-border); }
.xg-adj__next { grid-column: 2; text-align: right; }
.xg-adj span { color: var(--xg-mfg); font-size: 13px; }
.xg-adj a { font-weight: 600; }
.xg-related { margin-top: 56px; }
.xg-comments { margin-top: 48px; padding: 24px; border-radius: var(--xg-r); background: var(--xg-surface); border: 1px solid var(--xg-border); }
.xg-comments__list { display: grid; gap: 16px; margin-bottom: 24px; }
.xg-comments textarea, .xg-comments input[type="text"], .xg-comments input[type="email"], .xg-comments input[type="url"] {
	width: 100%; padding: 10px 14px; border: 1px solid var(--xg-border); border-radius: 12px; background: var(--xg-bg); color: var(--xg-fg);
}
.xg-comments .submit { min-height: 44px; padding: 8px 22px; border: 0; border-radius: 999px; background: var(--xg-ink); color: var(--xg-btn-fg); font-weight: 700; cursor: pointer; }

/* 安全指南页眉 */
.xg-safehead { padding: 24px 0 40px; background: var(--xg-dark); color: var(--xg-on-dark); }
.xg-safehead .xg-crumb ol, .xg-safehead .xg-crumb li + li::before { color: var(--xg-on-dark-mfg); }
.xg-safehead .xg-crumb [aria-current] { color: var(--xg-on-dark); }
.xg-safehead .xg-crumb a:hover { color: var(--xg-dark-accent); }
.xg-safehead .xg-safe__badge { margin-top: 28px; }
.xg-safehead__lead { margin-top: 12px; color: var(--xg-on-dark-mfg); }
.xg-safehead .xg-safe__rules { margin-top: 24px; }
.xg-safehead :focus-visible { outline-color: var(--xg-dark-accent); }

/* ---------- 响应式：1024 / 768 / 480 ---------- */
@media (max-width: 1024px) {
	.xg-nav--wide, .xg-top__btn { display: none; }
	.xg-drawer { display: block; }
	.xg-hero__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
	.xg-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xg-step:nth-child(2)::after, .xg-step:nth-child(2)::before { display: none; }
	.xg-who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xg-scenes__track { grid-auto-columns: minmax(240px, calc((100% - 40px) / 3)); }
	.xg-read.has-toc { grid-template-columns: minmax(0, 1fr); max-width: 800px; }
	.xg-read__side { display: none; }
	.xg-toc--inline { display: block; }
}
@media (max-width: 768px) {
	:root, body { --xg-gut: 16px; }
	.xg-hero { padding: 32px 0 24px; }
	.xg-hero__grid { grid-template-columns: 1fr; }
	.xg-hero__art { order: -1; max-width: 340px; margin: 0 auto; }
	.xg-art { margin: 0 auto; }
	.xg-block { padding: 44px 0; }
	.xg-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	/* 约会四步改竖排，连线改成向下的虚线 */
	.xg-steps__list { grid-template-columns: 1fr; gap: 28px; }
	.xg-step:not(:last-child)::after, .xg-step:nth-child(2)::after {
		display: block; top: auto; bottom: -27px; right: auto; left: 44px; width: 0; height: 26px;
		border-top: 0; border-left: 2px dashed var(--xg-primary);
	}
	.xg-step:not(:last-child)::before, .xg-step:nth-child(2)::before {
		display: block; top: auto; bottom: -26px; right: auto; left: 40px; transform: rotate(135deg);
	}
	/* 地图 2×4 */
	.xg-map__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.xg-zone { padding: 16px; }
	.xg-scenes__track { grid-auto-columns: 72%; }
	.xg-safe__grid, .xg-about__cols, .xg-foot__grid { grid-template-columns: 1fr; gap: 24px; }
	.xg-row { grid-template-columns: 140px minmax(0, 1fr); gap: 14px; padding: 12px; }
	.xg-row__title { font-size: 17px; }
	.xg-adj { grid-template-columns: 1fr; }
	.xg-adj__next { grid-column: auto; }
}
@media (max-width: 480px) {
	.xg-grid3, .xg-who__grid { grid-template-columns: 1fr; }
	.xg-logo { font-size: 17px; }
	.xg-hero__title { font-size: 30px; }
	.xg-hero__btns .xg-btn { flex: 1 1 100%; }
	.xg-zone__name { font-size: 18px; }
	.xg-zone__post { font-size: 14px; padding: 8px 10px; }
	.xg-scenes__track { grid-auto-columns: 82%; }
	.xg-row { grid-template-columns: 1fr; }
	.xg-row__media { aspect-ratio: 16 / 9; }
	/* 手机上的灵感卡和相关文章改成左图右文，少占一屏 */
	.xg-grid3:not(.xg-grid3--lead) { gap: 12px; }
	.xg-grid3:not(.xg-grid3--lead) .xg-card { flex-direction: row; }
	.xg-grid3:not(.xg-grid3--lead) .xg-card__media { flex: none; width: 112px; aspect-ratio: auto; }
	.xg-grid3:not(.xg-grid3--lead) .xg-card__body { padding: 12px 14px; gap: 6px; }
	.xg-grid3:not(.xg-grid3--lead) .xg-card__title { font-size: 16px; }
	.xg-grid3:not(.xg-grid3--lead) .xg-ph .xg-ico { width: 36px; height: 36px; }
	.xg-page__head--term { grid-template-columns: 1fr; }
	.xg-drawer__panel .xg-menu { grid-template-columns: 1fr; }
	.xg-qa__a { padding-left: 20px; }
	.xg-safe__side, .xg-about__col { padding: 20px; }
	.xg-search button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}