@charset "utf-8";
/* ==========================================================================
   article-v2.css —— 文章页 / 分类页现代化布局层
   2026-09 前端重构（路线 B 步骤 4）

   定位：作为【覆盖层】加载，必须排在 css.css、css-menu.css 之后。
   设计意图：
     - 不重写 css.css（1463 行，63 个手写产品页仍在用，风险太大）；
     - 只把「文章页/分类页」从 <table> + 999px 固定宽里解放出来；
     - 客服浮窗(#floatDivBoxs)、灯箱(#outerdiv)、footer 等仍沿用 css.css 的旧样式，避免丢样式。
   ========================================================================== */

/* ---------- 0. 变量：所有可调数字集中在这里 ---------- */
:root {
    --cs-maxw: 1200px;          /* 整站最大宽度 */
    --cs-gap: 20px;             /* 栅格间距 */
    --cs-side-l: 130px;         /* 左栏宽（2026-09-24 由 200 压缩：栏内内容仅 vip.gif 97px，
                                   用户要求把两侧空间让给正文） */
    --cs-side-r: 200px;         /* 右栏宽（2026-09-24 由 240 压缩：栏内图片仅 109px，
                                   用户要求把两侧空间让给正文） */
    --cs-pad: 16px;             /* 移动端左右留白 */
    --cs-c-text: #24292f;
    --cs-c-muted: #6b7280;
    --cs-c-link: #1a56db;
    --cs-c-link-hover: #1e40af;
    --cs-c-border: #e5e7eb;
    --cs-c-soft: #f8fafc;
    --cs-radius: 8px;
    --cs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
    --cs-font-mono: Consolas, Monaco, "Courier New", monospace;
}

/* ---------- 1. 容器：拆掉 999px 固定宽 ---------- */
/* css.css 里 .page_container/.content_back/.headerImg 都是 width:999px，另有 min-width:850px。
   ⚠️ 必须同时关掉 css.css 的 float:left：浮体上 margin:auto 不生效、宽度收缩到内容，
   2026-09-22 实测分类页/文章页页脚因此变成 783px 白卡左对齐（正常应居中）。
   2026-09-22 补：.p_header_bk/.share/.location/.bk_foot_bk 也是 999/990 定宽残留，
   容器自适应后它们仍 999px → 菜单行/面包屑/口号条/页脚底图右缘与横幅差 34px（用户报「断层」）。 */
.page_container,
.content_back,
.headerImg,
.p_header_bk,
.share,
.location,
.bk_foot_bk {
    width: auto !important;
    min-width: 0 !important;
    max-width: var(--cs-maxw);
    margin-left: auto;
    margin-right: auto;
    float: none !important;
}

.page_container {
    padding-left: var(--cs-pad);
    padding-right: var(--cs-pad);
    box-sizing: border-box;
}

/* 菜单条内层：css-menu.css 写死 #navframe/#navigation 950px，只占加宽后
   菜单条（1168px）的左侧，右侧空约 218px（2026-09-23 用户报「菜单宽度不够」）。
   放开成满宽：菜单项靠左、#login1（float:right）贴菜单条右缘。 */
#navframe,
#navigation {
    width: auto !important;
    max-width: 100%;
}

/* #login1（登录|注册，float:right）原贴菜单条右缘太靠边（2026-09-23 用户反馈），
   与内容区一致内收 120px */
#login1 {
    margin-right: 120px;
}

/* headerImg 是独立 logo 条（高约 100px，非包裹层），在容器外按 --cs-maxw 撑满 1200px，
   而容器内区块 = 1200 - 2*16 = 1168 → logo 条左右各突出 16px（2026-09-22 全站巡检发现）。
   收窄到与内容列同宽。 */
.headerImg {
    max-width: calc(var(--cs-maxw) - 2 * var(--cs-pad));
}

/* ---------- 1-B. 顶部红色背景图全出血 ----------
   首页/产品页等模板的 .page_header 在 .page_container 外（红图满屏）；
   文章页/分类页模板把它放进了容器里 → 红图锁在 1200px 容器内，
   宽屏两侧露深蓝底（2026-09-22 用户报「顶部红色背景图片没有100%填充屏幕宽度」）。
   用负外边距拉到视口宽；100vw 含滚动条宽会多出 ~15px，故同时隐藏横向溢出。
   仅 ≥1101px（容器居中、两侧有留白）时启用——更窄时容器本就 100% 宽，无需出血。 */
@media screen and (min-width: 1101px) {
    .page_header {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    body {
        overflow-x: hidden;
    }
}

.content_back {
    height: auto !important;
    box-sizing: border-box;
}

/* ---------- 2. 文章区：table 三栏 → CSS Grid ---------- */
.article-content {
    display: grid;
    grid-template-columns: var(--cs-side-l) minmax(0, 1fr) var(--cs-side-r);
    gap: var(--cs-gap);
    align-items: start;
    width: 100%;
}

/* 模板里为了兼容旧结构保留的 <table>/<tr>/<td> 外壳，直接降级为不参与布局 */
.article-content > table,
.article-content > table > tbody,
.article-content table tr {
    display: contents;
}

.article-left,
.article-right {
    width: auto !important;
    min-width: 0;
}

.article-body {
    width: auto !important;      /* 覆盖 css-article.css 的 730px */
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
    font-family: var(--cs-font);
    color: var(--cs-c-text);
}

/* ---------- 3. 文章正文排版 ---------- */
.article-body .title {
    font-size: 26px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--cs-c-text);
    word-break: break-word;
}

.article-body .author {
    font-size: 13px;
    color: var(--cs-c-muted);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cs-c-border);
    margin-bottom: 18px;
}

/* ★ 老正文兼容层：1639 篇文章的正文是十几年前的 HTML 片段，
     含内联样式、table 布局、固定宽图片 —— 这里是兜底，不能删 */
.article-body .body {
    font-size: 15px;
    line-height: 1.85;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.article-body .body img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 12px auto;
}

.article-body .body table {
    max-width: 100% !important;
    width: auto !important;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}

.article-body .body pre,
.article-body .body code {
    max-width: 100%;
    overflow-x: auto;
    font-family: var(--cs-font-mono);
}

.article-body .body p {
    margin: 0 0 14px;
}

.article-body .body a {
    color: var(--cs-c-link);
    text-decoration: none;
}

.article-body .body a:hover {
    color: var(--cs-c-link-hover);
    text-decoration: underline;
}

/* ---------- 4. 下载区 / 参考 / 收藏 ---------- */
#download-file,
.references,
.favo,
.ref_links {
    margin-top: 16px;
    font-size: 14px;
}

.adv_main {
    margin-top: 20px;
    overflow: hidden;
}

/* ---------- 5. 上一篇 / 下一篇 ---------- */
/* ★ id="a_P" / id="a_N" 是硬契约：生成器的正则靠它改链接，class 可改、id 不可改 */
.article-navigator {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--cs-c-border);
}

.article-navigator a.page {
    display: inline-block;
    padding: 8px 16px;
    background: var(--cs-c-soft);
    border: 1px solid var(--cs-c-border);
    border-radius: var(--cs-radius);
    color: var(--cs-c-text);
    font-size: 14px;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.article-navigator a.page:hover {
    background: #eef2f7;
    border-color: #cbd5e1;
    text-decoration: none;
}

/* ---------- 6. 面包屑 ---------- */
.location {
    font-size: 13px;
    color: var(--cs-c-muted);
    padding: 8px 0;
}

/* 内层虚线框：css.css 写死 986px + float:left + padding-left:2px + height:18px，
   外层解宽后右侧空 ~180px、长标题顶满拥挤（2026-09-23 用户反馈「宽度不够、拥挤」）。
   放开成满宽 + 左右 10px 内边距，行高放宽，小图标与文字垂直居中。 */
.location > div {
    float: none;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 20px;
}

.location > div img {
    vertical-align: middle;
}

.location a {
    color: var(--cs-c-link);
    text-decoration: none;
}

.location a:hover {
    text-decoration: underline;
}

/* ---------- 7. 页脚（沿用 css.css 结构，只做现代化微调） ---------- */
.page_footer_outer {
    float: none;                /* css.css 的 float:left + width 收缩 → 783px 白卡左对齐（2026-09-22 实测） */
    width: auto !important;
    max-width: var(--cs-maxw);
    margin: 0 auto;             /* 顶部不能留白：紧贴 .public_img 横幅，否则露深蓝底缝（2026-09-22 用户报「页脚有间隙」） */
    padding: 15px var(--cs-pad);   /* 顶部原 20px → 与静态页统一 15px（2026-09-24） */
    box-sizing: border-box;
    font-size: 13px;
    line-height: 2;
    text-align: center;
}

.page_footer_outer a {
    color: var(--cs-c-muted);
}

.page_footer_outer a:hover {
    color: var(--cs-c-link);
}

/* ---------- 8. 响应式 ---------- */
/* 平板：丢掉左栏 */
@media screen and (max-width: 1100px) {
    .article-content {
        grid-template-columns: minmax(0, 1fr) var(--cs-side-r);
    }

    .article-left {
        display: none;
    }
}

/* 手机：单栏，右栏挪到正文下方 */
@media screen and (max-width: 768px) {
    .article-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .article-right {
        display: none;
    }

    .article-body .title {
        font-size: 21px;
    }

    .article-body .body {
        font-size: 15px;
        line-height: 1.8;
    }

    .page_footer_outer {
        line-height: 1.9;
    }

    /* 客服浮窗在手机上缩小，避免挡内容 */
    #floatDivBoxs {
        transform: scale(.9);
        transform-origin: right bottom;
    }
}

/* ---------- 9. 分类列表页 ---------- */
.category-list {
    display: grid;
    grid-template-columns: var(--cs-side-l) minmax(0, 1fr) var(--cs-side-r);
    gap: var(--cs-gap);
    align-items: start;
    width: 100%;
    padding: 8px var(--cs-pad) var(--cs-pad);     /* 旧版 .category-list{margin:5px}/.list{padding:5px} 的卡内留白，
                                   否则左栏二维码/产品盒贴住白色卡片左缘 */
    box-sizing: border-box;
}

/* 旧模板的 <table> 外壳降级，不参与布局 */
.category-list > table,
.category-list > table > tbody,
.category-list table tr {
    display: contents;
}

.category-list .left,
.category-list .right,
.category-list .list {
    min-width: 0;
}

/* 列表头：标题 + 上/下一页 */
.list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cs-c-border);
    margin-bottom: 12px;
}

.list-header .title-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--cs-c-text);
}

.list-header .nav a.page {
    font-size: 13px;
    padding: 4px 12px;
    background: var(--cs-c-soft);
    border: 1px solid var(--cs-c-border);
    border-radius: var(--cs-radius);
    color: var(--cs-c-text);
    text-decoration: none;
}

.list-header .nav a.page:hover {
    background: #eef2f7;
    border-color: #cbd5e1;
    text-decoration: none;
}

/* 列表项：对应 HtmlGenerator.cs 的 rowTemplate */
.category-list .item {
    padding: 14px 0;
    border-bottom: 1px dashed var(--cs-c-border);
}

.category-list .item .cat-article-title a {
    font-size: 16px;
    color: var(--cs-c-link);
    text-decoration: none;
    line-height: 1.5;
}

.category-list .item .cat-article-title a:hover {
    text-decoration: underline;
}

.category-list .item .info,
.category-list .item .short-content {
    font-size: 13px;
    color: var(--cs-c-muted);
    line-height: 1.7;
    margin-top: 6px;
    word-break: break-word;
}

.category-list .item .icon img {
    max-width: 100%;
    height: auto;
}

/* 底部翻页条（含跳页输入框） */
.category-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--cs-c-muted);
}

.category-nav input {
    width: 44px;
    padding: 3px 6px;
    border: 1px solid var(--cs-c-border);
    border-radius: 4px;
    text-align: center;
}

/* 右侧推荐 */
.comment-title {
    font-size: 15px;
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cs-c-border);
    margin-bottom: 10px;
}

.comment-list {
    font-size: 13px;
    line-height: 1.9;
}

.adv_main_category,
.google_links_category,
.category-fav {
    margin-top: 16px;
    overflow: hidden;
}

/* 分类页底部 4 区块（翻页条/隐藏友链/其它资料/隐藏广告位）在新模板里
   位于栅格外、content_back 全宽处 —— 不约束会顶满 1168px 卡宽、与列表列错位。
   这里与列表列左缘对齐并限宽（生产版观感：缩进 140px、宽 600-800px）。 */
.category-nav.article-navigator,
.google_links_category,
.category-fav,
.adv_main_category {
    margin-left: calc(var(--cs-pad) + var(--cs-side-l) + var(--cs-gap));   /* --cs-pad = .category-list 的左右内边距 */
    max-width: 720px;
}

/* 底部大图横幅：css.css 给了 999px 定宽 + float:left，在自适应容器里整体左偏。
   宽度放开到与容器同宽（与 footer 白盒对齐，2026-09-22 用户报「页脚下断层」），
   背景图 999px 居中 + cover 裁切补边，不留深蓝底缝隙。
   下外边距清零：横幅与页脚白盒齐平，不留缝。
   ⚠️ 必须 clear:both：前一轮去掉 float 后进了普通流，而「浮动不撑普通流」——
   内容区若是浮动布局（cs-framework-6.0 等页 .jonny1/.jonny2 float:left 长文），
   横幅会升到内容顶部压住正文（2026-09-23 用户报「public_img 跑上面去了」）。
   clear 把块推到所有前置浮动之下，等价于当年 999px 整宽 float 的占位效果。 */
.public_img {
    float: none;
    clear: both;
    width: auto !important;
    max-width: 100%;
    margin: 10px auto 0;
    background-position: center;
    background-position-x: center;
    background-size: cover;
}

/* 页脚下的倒影底图：css.css 是 999px 定宽 + no-repeat，块拉宽到容器后
   右侧盖不住（2026-09-22 用户报「倒影背景图片宽度不一致」）→ 拉伸铺满整块。 */
.bk_foot_bk {
    background-size: 100% 100%;
    background-position: top center;
}

/* ---------- 9-B. 分类列表补遗（2026-09-22）----------
   模板/生成页用到的这些类此前只在旧 css-article.css 里有定义，
   换成 article-v2.css 后全部失去样式 → 列表页大面积错位。
   规则从 css-article.css 移植并按本文件的栅格/变量改写。 */

/* 列表头右侧的「上一页/下一页」包裹层 */
.list-header .title-navigator {
    display: flex;
    gap: 8px;
}

.list-header .title-navigator .nav {
    display: flex;
    gap: 8px;
}

/* 列表项的两段式行结构（生成页 rowTemplate：.d1 = 图标+标题行，.d2 = 摘要行） */
.category-list .item .d1 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.category-list .item .d1 .icon {
    flex: 0 0 auto;
}

.category-list .item .d1 .icon img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.category-list .item .d1 .cat-article-title {
    min-width: 0;
}

.category-list .item .d2 {
    min-width: 0;
}

/* 右栏：站长推荐 + 广告位 */
.category-list .right-content {
    min-width: 0;
}

.right-content .ad-img {
    margin-top: 15px;
}

.right-content .ad-img img {
    max-width: 100%;
    height: auto;
}

/* 右栏「推荐的文章」列表（生成页 markup：.comment-list > div > a + br）
   旧 css-article.css 靠 .right-content .comment-list{width:205px} 加
   div{height:18px;overflow:hidden;text-overflow:ellipsis} 把每行裁成单行；
   这两条没随迁移过来 → 行内 <a> 的 white-space:nowrap 无人约束，
   把文档宽度从 1280 撑到 1431（1280 视口下多出横向滚动条）。
   这里改为「不锁高度」的单行省略：overflow 裁切 + 顺手隐藏生成页尾随的
   <br>（每条已各自独占一个 div，不需要再换行，否则会多出一个空行）。 */
.right-content .comment-list div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.right-content .comment-list div > br {
    display: none;
}

/* 翻页计数（<div id="category-counter" class="count">） */
.category-nav .count {
    margin-left: auto;
    color: var(--cs-c-muted);
    font-size: 13px;
    white-space: nowrap;
}

/* 列表顶部的推广图 */
#first_img img {
    max-width: 100%;
    height: auto;
    margin: 5px 0 10px;
}

@media screen and (max-width: 1100px) {
    .category-list {
        grid-template-columns: minmax(0, 1fr) var(--cs-side-r);
    }

    .category-list .left {
        display: none;
    }

    /* 左栏隐藏后，底部区块的对齐基准消失 → 恢复全宽 */
    .category-nav.article-navigator,
    .google_links_category,
    .category-fav,
    .adv_main_category {
        margin-left: 0;
        max-width: none;
    }
}

@media screen and (max-width: 768px) {
    .category-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .category-list .right {
        display: none;
    }

    .list-header .title-name {
        font-size: 16px;
    }
}

/* ---------- 10. 文章正文细节（2026-09-24 用户反馈） ----------
   左栏「申请开通VIP」图（vip.gif，97px 宽）在 130px 栏内原为左贴边
   （左贴边 0px / 右侧空 33px，实测）→ 改为栏内水平居中。
   （正文首 article-typeN.gif 类型小图标移到「作者:」前的逻辑在
     js/common-article.js，用 JS 真实移动 DOM —— 图标有 type1/3/5/6/7
     五种、约 2700 篇文章自带，CSS :has() 无法让 ::before 的背景图
     跟随每页类型，故不走 CSS。） */
.article-left > a {
    display: block;
    text-align: center;
}

.article-left > a > img {
    display: block;
    margin: 0 auto;
}