/* 文章详情页布局：正文(中) + 推荐图文(左) + 文章目录(右,浮动)
 *
 * 2026-11-04 整页拉宽，与首页完全对齐
 *   首页 index.htm 内联规则：.w1200 { width:100%; max-width:1728px; min-width:1200px }
 *   文章页原本走 base.css 的 .w1200{width:1220px} 与 style.css 的 .m{width:1220px}，
 *   被钉死在 1220px（1920 视口下两侧各空 350px）。这里照抄首页规则覆盖后，
 *   顶部导航/搜索、面包屑、内容区、底部 footer 内部容器全部与首页对齐：
 *     1920 视口 → 1728px (x=96 居中)   1400 视口 → 1400px (x=0 满宽)
 *   本文件只在文章详情页加载，不会影响首页 / 列表页等其它页面。
 *
 * 三栏（以 1920 视口、容器 1728px 为例）：
 *   左栏 推荐图文  400px  —— 双列缩略图，图片随列宽放大到 160px
 *   中栏 正文      flex:1（外框 1308px；padding-right 280px 让出目录）→ 文字实宽 1028px
 *   右栏 文章目录  260px  —— position:fixed 锚定内容区右缘，滚动始终可见
 *   评论、同类百科知识都在 .m3l 内部，随正文列自动拉宽；
 *   底部 footer_servic / footer_copyright 内部的 .w1200 也随全局覆盖铺满 1728px。
 *
 * 栏宽按视口分档（保证 1400 / 1920 视口下三栏都是变大的，不只是宽屏受益）：
 *   ≥1600 视口      左 400 / 目录 260 / 右预留 280
 *   1241~1599 视口  左 340 / 目录 220 / 右预留 240
 *   ≤1240 视口      隐藏目录、取消 min-width、正文占满整行
 *
 * 目录浮动层水平位置由 art-toc.js 按「容器右缘 - 目录实际 offsetWidth - 20」计算，
 * 因此目录加宽或容器变宽都不会错位。
 */

/* ---- 1. 整页宽度：照抄首页 ---- */
.w1200 {
	width: 100%;
	max-width: 1728px;
	min-width: 1200px;
}

/* ---- 2. 三栏容器 ---- */
.m3.art-swap {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;          /* 让底部占位 div 换行到栏位下方，而不是挤占栏位 */
	align-content: flex-start;/* 换行后不拉伸行高，避免栏位下方多出空隙 */
	width: 100%;
	max-width: 1728px;        /* 与 .w1200 / 首页一致 */
	background: #FFFFFF;      /* 去掉默认 .m3 的 bg-line 竖线（flex 布局不再需要分隔线） */
}
/* 底部占位 div（原 .b10.c_b，float 布局下用 clear:both 撑高）。
 * 转 flex 后 clear 失效，它会作为 flex 项参与同一行，而 base.css 给它 width:100%，
 * 于是抢走大半行宽、把正文挤成 0 宽（文字一个字一行竖排）。
 * 修复：order 排到最后 + 占满整行，独占第二行。 */
.m3.art-swap > .b10.c_b {
	order: 99;
	flex: 0 0 100%;
	width: 100%;
}
.m3.art-swap .m3l {
	/* 必须用 flex: 1 1 0%（带单位），不能写 flex: 1 1 0（无单位 0 会被整条丢弃，
	 * 退回 width:auto 后内部 width:100% 子元素塌缩成 1 字符宽）。 */
	flex: 1 1 0%;
	min-width: 0;           /* 防止长内容/长单词把 flex 撑破导致溢出 */
	width: auto;
	order: 2;
	margin: 0 10px;
	/* 让出右侧目录 + 20px 间隙（≥ 目录宽+间距，文字不会钻到目录下面） */
	padding-right: 280px;
	box-sizing: border-box;
}
.m3.art-swap .m3r {
	width: 400px;
	flex: 0 0 400px;
	order: 1;
	margin: 0;
}

/* ---- 3. 左栏推荐图文：双列网格 ----
 * thumb-table 模板的 cols=2 实际未生效——浏览器解析出的是「N 行 × 每行 1 个 td」
 * （td 上的 width="50%" 在单列布局下也被忽略），所以不依赖表格布局，
 * 直接把 table 改成 2 列 CSS 网格，tbody/tr 用 display:contents 让 td 直接成为网格项。
 * 只作用于文章页左栏，不改动全站共享的 thumb-table 模板。 */
.m3.art-swap .m3r .list-thumb table {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 4px;
}
.m3.art-swap .m3r .list-thumb tbody,
.m3.art-swap .m3r .list-thumb tr {
	display: contents;
}
.m3.art-swap .m3r .list-thumb td {
	display: block;
	width: auto !important;   /* 覆盖模板里的 width="50%" 属性残留 */
	text-align: center;
	vertical-align: top;
}
/* 左栏加宽后图片跟着放大（上限 160px，避免小图被过度拉伸） */
.m3.art-swap .m3r .list-thumb img {
	width: 100%;
	max-width: 160px;
	height: auto;
}
.m3.art-swap .m3r .list-thumb ul {
	padding-left: 0;
	margin: 0;
}
.m3.art-swap .m3r .list-thumb li {
	height: auto;
	line-height: 18px;
	text-align: center;
	padding: 4px 0;
	overflow: hidden;
}

/* ---- 3b. 正文下方「同类百科知识」：恢复双列铺满 ----
 * list-table 模板与 thumb-table 有同样的毛病：输出的是「N 行 × 每行 1 个 td」，
 * td 上的 width="50%" 在单列布局下被忽略。正文列拉宽到 1000px 后若不管它，
 * 内容会变成一条条长条、右侧留一大片空白。
 * 这里只在文章页把它改成 2 列网格（模板原本就想做 50% 双列），
 * 让评论下方的同类知识随正文宽度铺满。 */
.m3.art-swap .m3l .related table {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 12px;
}
.m3.art-swap .m3l .related tbody,
.m3.art-swap .m3l .related tr {
	display: contents;
}
.m3.art-swap .m3l .related td {
	display: block;
	width: auto !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- 4. 右侧文章目录：浮动固定层 ----
 * position:fixed，水平位置由 art-toc.js 按「内容区右缘」计算（不是屏幕右缘），
 * 因此它始终待在原来的栏位上，滚动时始终可见，且不会跑到屏幕最右侧。 */
.m3.art-swap .m3toc {
	position: fixed;
	/* left / top 由 JS 计算 */
	right: auto;
	top: 200px;
	width: 260px;
	z-index: 999;
	margin: 0;
	background: #FFFFFF;
	border: 1px solid #E8E8E8;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
	overflow: hidden;
}
.m3.art-swap .m3toc .head-sub {
	margin: 0;
	border-bottom: 1px solid #F2F2F2;
	background: #F7F9FC;
}
.m3.art-swap .m3toc .art-toc {
	max-height: 68vh;
	overflow-y: auto;
	padding-left: 12px;
	padding-right: 12px;
}
.m3.art-swap .m3toc .art-toc li {
	padding-left: 14px;
}

/* ---- 5. 中等视口分档（1241~1599px）----
 * 容器此时 1240~1599px，栏位相应收一点，保证正文仍有足够宽度。 */
@media (min-width: 1241px) and (max-width: 1599px) {
	.m3.art-swap .m3r {
		width: 340px;
		flex: 0 0 340px;
	}
	.m3.art-swap .m3toc {
		width: 220px;
	}
	.m3.art-swap .m3l {
		padding-right: 240px;
	}
}

/* ---- 6. 窄屏 ----
 * 取消首页那条 min-width:1200px，否则小屏会横向滚动；
 * 目录隐藏、正文右内边距清零，让文字占满整行。 */
@media (max-width: 1240px) {
	/* base.css 里 body{min-width:1200px} 会让小屏横向滚动，这里一并取消 */
	body {
		min-width: 0;
	}
	.w1200 {
		min-width: 0;
	}
	.m3.art-swap .m3r {
		width: 300px;
		flex: 0 0 300px;
	}
	.m3.art-swap .m3toc {
		display: none !important;
	}
	.m3.art-swap .m3l {
		padding-right: 0;
	}
}