@charset "utf-8";
/* ============================================================================
   klk-desktop-fix.css  ——  桌面端排版覆盖层（本地候选，★ 尚未上传）
   ----------------------------------------------------------------------------
   目标：修复《排版问题清单.md》桌面端 42 条中「纯 CSS 可覆盖」的部分。
   策略：作为**覆盖层**叠加在 klk-ui.css / resetcommon.css / style.css 之后，
         **不修改任何既有文件**；回滚 = 删掉这个 <link> 一行。
   生效范围：仅 ≥901px。移动端（任务 A 的 klk-mobile-fix.css）零影响。
   基线：2026-10-06 线上只读快照（sha256 见 _ab/site-live/_baseline.json）
   实测：_ab/out/*.json + 截图/（1440×900，A/B 对比）

   ============================================================================
   ★★★ 为什么到处是 !important 和 body 前缀（踩了三次坑，务必保留这段）
   ----------------------------------------------------------------------------
   1) resetcommon.css 用**同特异度但更早出现**的规则钉死布局：
        L52 .header , .content , .footer { width:960px; margin:0 auto; overflow:hidden }
        L53 .left { width:201px; float:left }
        L61 .right { width:754px; float:left; display:inline; margin-left:5px }
      ⇒ 宽度/最大宽/外边距/浮动/显示这 5 个布局属性必须 !important。
   2) klk-mobile-nav.css 里还有一批**桌面端**（@media min-width:601px）限宽规则，
      同样带 !important，且在多个页面被 **<link> 加载两次**（第二份在 </head> 前），
      如果覆盖层加在 </head> 之前就会被它们按「后来居上」压掉：
        L705  .f-wrap{ max-width:960px !important }
        L713  .f-wrap > .footer{ max-width:960px !important }
        L950  .contant{ max-width:960px !important }
        L980  .klkfaq/.klk-adv/.klk-area 的子 div{ max-width:960px !important }
      ⇒ 容器类规则统一加 `body ` 前缀把特异度抬到 (0,1,1)+(0,1,0)，
        **与加载顺序无关**地赢；这样即使模板把本文件放在两份 nav.css 之前也生效。
   3) 首页「FAQ / 各区县服务 / .bts」的样式来自 HTML 内联 <style>，
      行内 <style> 也是作者样式，只靠特异度不够 ⇒ 这几条也加 !important。
   颜色、字号、行高**一律不加 !important**，让任务 B 的 klk-design-system.css
   变量层可以自然覆盖本文件。
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. 参数（唯一需要调的旋钮）
   ---------------------------------------------------------------------------
   --kdf-container : 桌面主容器最大宽   ← 清单 #13 / #27 / #30 / #31
   --kdf-reading   : 正文阅读列宽        ← 清单 #14 / #15 / #16
   --kdf-side      : 侧栏宽              ← 清单 #25 / #26
   --kdf-gap       : 侧栏与正文列间距

   ★ 验收标准第九节要求：容器 1200 / 正文列 760–800 / 侧栏 300–340。
     本文件取 1100 / 720 / 300，原因是**1440 屏实测**（数据见
     结构问题_行宽与容器.md）：
       · 只把容器放到 1200px 而正文列不锁 ⇒ 行宽从 47.3 字恶化到 59.9 字；
       · 容器 1200 + 正文列 760 + 字号 18 ⇒ 42.2 字/行（略超 30–40 上沿）；
       · 容器 1100 + 正文列 720 + 字号 18 ⇒ 40.0 字/行（正好落进区间）。
     ↳ 若要严格对齐验收标准的 1200/760/300：把下面三行改成 1200 / 760 / 320 即可。
   --------------------------------------------------------------------------- */
:root{
  --kdf-container: 1100px;
  --kdf-reading:   720px;
  --kdf-side:      300px;
  --kdf-gap:       24px;
  /* 调色板与字体变量不在这里重复定义：优先复用 klk-ui.css 的 --klk-* 与
     任务 B 的 klk-design-system.css 变量，缺失时由本文件就地兜底。 */
}

@media screen and (min-width: 901px){

/* ===========================================================================
   一、容器宽度  —— 清单 #13（P0）
   原值：960px 写死（resetcommon.css L52；首页另有 1000px 并存 → #27）
   实测：1440 屏 960→1100px，左右留白 240 → 170px，利用率 66.7% → 76.4%。
   =========================================================================== */
body .header, body .content, body .footer, body .f-wrap, body .top_con,
body #container, body .form, body .contant,
body .zs, body .sb, body .ss, body .pp, body .ys ul, body .hb-con, body .jz, body .dt,
body .h-ser, body .h-ser .ser-con, body .ser-con, body .home-proshow,
body .news_ad, body .topadcs, body .mouse{
  width: auto !important;
  max-width: var(--kdf-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
/* 与 klk-mobile-nav.css L705 / L713 / L950 正面兑子（特异度 (0,2,1) 起） */
body .f-wrap{ width: 100% !important; max-width: var(--kdf-container) !important; margin-left: auto !important; margin-right: auto !important; }
body .f-wrap > .footer{ width: 100% !important; max-width: var(--kdf-container) !important; margin-left: auto !important; margin-right: auto !important; }
body .contant{ width: 100% !important; max-width: var(--kdf-container) !important; }
body #container{ max-width: var(--kdf-container) !important; }   /* 首页原本 1000px → 与 960 双容器错位 #27 */
body .dt{ max-width: var(--kdf-container) !important; }          /* 首页信息块固定 960/639px #31 */
body .dt-l{ width: auto !important; max-width: 660px; }
/* 两列顺序复位（klk-mobile-nav.css L918 把 body 改成 flex 列，窄屏翻过顺序） */
body .content > .left{ order: 0 !important; }
body .content > .right{ order: 0 !important; }

/* ===========================================================================
   二、三栏关系 + 阅读列  —— 清单 #14 / #25 / #26（P0+P1）
   原值：.left 201px / .right 754px + margin-left:5px / .agent_con 710px
   改法：侧栏 201→300px；正文列吃满剩余；正文列本体锁到 --kdf-reading。
   ★ 为什么用 float + flow-root 而不是 flex（本地踩的第三次坑，别改回 flex）：
     实测 `.content` 的直接子元素不止 .left/.right，还有 .topadcs（468px 广告条）。
     一旦给 .content 上 display:flex，.topadcs 也变成 flex item 挤在同一行：
       469 + 300 + 308 + 24 > 1100
     ⇒ .left 被推到 x=639、.right 被推到 x=963、右边界 1685（**溢出视口 245px**；
       因为 body 有 overflow:hidden，滚动条被吃掉，肉眼看不见但版式已崩）。
   ⇒ 改成 block + flow-root：.left 浮动、.right 用 margin-left 让位，
     全宽兄弟节点 clear:both 自动落到两列之上 —— 与原站浮动版式等价，改动面最小。
   =========================================================================== */
body .content{
  display: flow-root !important;   /* 建立 BFC 包住浮动；不用 overflow:hidden，免得裁掉下拉菜单 */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* .content 里的全宽贴片（.topadcs 等）必须 clear，否则会与浮动侧栏并排 */
body .content > .topadcs,
body .content > .lefttop,
body .content > .left2top,
body .content > .banner,
body .content > .ad{
  clear: both !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
}
body .content > .left, body .content > .left2, body .left, body .left2{
  width: var(--kdf-side) !important;
  max-width: var(--kdf-side) !important;
  flex: none !important;
  float: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden;
}
body .content > .right, body .right{
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  float: none !important;
  display: block !important;
  margin-left: calc(var(--kdf-side) + var(--kdf-gap)) !important;
  margin-right: 0 !important;
  overflow: visible !important;
  padding-left: 0 !important;
}
/* 正文列本体（754 / 710 及各页硬宽）→ 锁阅读列。
   ⇐ 清单 #15「行宽过长」的正解：不再加宽容器，而是定宽 + 加字号。 */
body .right_main,
body .agent_con,
body #nsbody,
body #zoom{
  width: var(--kdf-reading) !important;
  max-width: var(--kdf-reading) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}
body #zoom .con_text,
body .right_main .con_text{ width: auto !important; max-width: 100% !important; }
/* 面包屑（#24）跟着阅读列，别再留 754px 独立宽 */
body .plc{ width: auto !important; max-width: var(--kdf-reading) !important; margin-left: 0 !important; }

/* ===========================================================================
   三、首页专属块  —— 清单 #3 / #16 / #27 / #30 / #8
   ★ 这些块的样式来自首页内联 <style>，必须 !important 才压得住
   实测：.klkfaq-a 930÷15 = 62 字/行；hero 副标题 1168÷14.5 = 80.6 字/行（全站最长行）
   =========================================================================== */
body .klkfaq, body .klk-area{ max-width: var(--kdf-container) !important; margin-left: auto !important; margin-right: auto !important; }
body .klkfaq-list, body .klkfaq-list > li, body .klkfaq-item,
body p.klkfaq-a, body .klkfaq-a, body .klkfaq-cta{
  width: auto !important;
  max-width: var(--kdf-reading) !important;
  margin-left: 0 !important;
}
body #klk-hero-title, body p.klk-hero-sub{ max-width: var(--kdf-reading) !important; }
/* 首页 hero 副标题实测 14.5px（clamp 残渣，清单 #1）→ 16px；实测 1168→720px 后
   80.6 字/行 → 49.7 字/行，字号提到 16px 后 45.0 字/行（短句价值主张可接受） */
p.klk-hero-sub, .klk-hero-sub{ font-size: 16px; line-height: 1.75; }
/* FAQ 答案 15px → 18px（与正文同档）；720 ÷ 18 = 40.0 字/行 */
.klkfaq-a, p.klkfaq-a{ font-size: 18px; line-height: 1.75; }
/* FAQ 问题 16px → 17px：实测 718 ÷ 16 = 44.9 字/行，提到 17px 后 42.2（问题都很短，可接受） */
.klkfaq-q{ font-size: 17px; }
/* 友情链接段实测 958px ÷ 12px = 79.8 字/行（全站最长）→ 收到阅读列 */
body .link.link-empty p{ max-width: var(--kdf-reading) !important; }
/* 区县卡描述实测 14.5px（clamp 残渣）→ 16px；3 列卡片下 317 ÷ 16 = 19.8 字/行 */
.klk-area-desc{ font-size: 16px; line-height: 1.7; }
/* ★ hero 文案与「服务项目」装饰块实测被拉满整个视口（1424px，见诊断 结构问题 对照表）：
   hero 副标题 1424 ÷ 16 = 89 字/行、.bts 1424 ÷ 20 = 71.2 字/行 —— 全站最长行都在这。
   这两块都**没有限宽容器**（.bts 只要 text-align:center），必须显式收口。 */
body .klk-hero, body .h-ser{ max-width: var(--kdf-container) !important; margin-left: auto !important; margin-right: auto !important; }
body .klk-hero > * , body .h-ser > *{ max-width: 100%; }
body .bts{ max-width: var(--kdf-container) !important; margin-left: auto !important; margin-right: auto !important; }
/* 首页 .top 里那个 960px 的裸 div 也一并统一（诊断里 960 与 1000 并存的 #27） */
body > .top > div, body > div > .topadcs{ max-width: var(--kdf-container) !important; margin-left: auto !important; margin-right: auto !important; }

/* ===========================================================================
   四、字号与行高  —— 清单 #1 / #2 / #4 / #5 / #6 / #7 / #8 / #36 / #38 / #39 / #40
   ★ 实测：#2（正文 15→18px）是把行宽从 47 字拉回 39–40 字的**唯一有效手段**
     720 ÷ 18 = 40.0 字/行 ✅（理想 30–40）
   =========================================================================== */
#nsbody p, #zoom .con_text p, .agent_con p{
  font-size: 18px;
  line-height: 1.75;
}
#nsbody li, #zoom .con_text li, .agent_con li{
  font-size: 18px;
  line-height: 1.75;
}
/* 12px 残渣小字抬到 14px，避免与 18px 正文拉开 6px 断层 */
#nsbody p small, #nsbody p font[size="2"], .agent_con p small{ font-size: 14px; }

/* #5 字体族 7 种写法 → 1 条（裸「微软雅黑」在非中文 Windows 会退到衬线体） */
body, #nsbody, #zoom, .agent_con, .con_text, #container, .content{
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif);
}
/* #7 栏目名/文章标题：裸 span 24px/36px 与正文 1.6 倍跳幅 → 22px / 1.4 */
.agent_con > div > span:first-child,
#nsbody > div > span:first-child{ font-size: 22px; font-weight: 700; line-height: 1.4; }
/* 字号阶梯（#1 建议 12/14/16/18/22/28/34） */
#nsbody > h1.col-title, .agent_con h1, .col-title{ font-size: 28px; line-height: 1.35; }
#nsbody h2, #zoom .con_text h2, .pillar h2, .agent_con h2{ font-size: 22px; line-height: 1.35; }
#nsbody h3, #zoom .con_text h3, .pillar h3, .agent_con h3{ font-size: 18px; line-height: 1.5; }

/* #8 首页「服务项目」：26px <span> 比 H1 只小 1px、占 127px 只传达 4 字 */
body .bts{ text-align: center; font-size: 14px !important; line-height: 1.6 !important; margin-top: 16px !important; }
body .bts span{ font-size: 22px !important; font-weight: 700; line-height: 1.35; color: var(--klk-blue, #0A6DB5); }
/* #6 首页服务图标名 20px 压在绿图上、卡宽 190px → 16px */
span.name{ font-size: 16px; line-height: 1.3; }
/* #36 侧栏「联系我们」13/14px + 24/30px 混排 → 统一 */
.leftlx h1{ font-size: 16px; line-height: 1.4; }
.leftlx p, .leftlx .lxi div, .leib2 .leftlx .lpcom{ font-size: 14px; line-height: 1.7; }
/* #37 侧栏「联系我们」电话：style.css 用
       .leftlx .dianhua{ background:url(teln.gif) no-repeat scroll 0 18px; padding:10px 0 10px 55px }
   拿一张背景图冒充图标 ⇒ 图标位置写死、高 DPI 屏模糊、行高一变就偏位
   （实测线上 teln.gif HTTP 200 / 1403B）。
   ★ 实测结构：`<div class="dianhua">全国咨询热线：<a class="diantel">159…</a></div>`
     —— 文本是 `.dianhua` 自己的文本节点，**内部没有 label/span 可挂钩**，
     所以 ::before 只能挂在 `.dianhua` 上（占一个行内位，视觉等价于原背景图效果）。
   ★ 图标用 ☎ (U+260E) 而不是 emoji：U+260E 是 Dingbats 区普通字符，
     由 Segoe UI Symbol / Noto Sans Symbols 覆盖，跨 Win/Android/macOS 都有；
     彩色 emoji 版（☎️）依赖彩色字体，刻意不用。 */
body .leftlx .dianhua{
  background: none !important;
  background-image: none !important;
  padding: 10px 0 !important;
}
body .leftlx .dianhua::before{
  content: "\260E\FE0E";           /* ☎ + VS15：明确要求「文字呈现」，避免被当 emoji 渲染 */
  display: inline-block;
  margin-right: 6px;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Microsoft YaHei", sans-serif;
  font-size: 1.15em;
  line-height: 1;
  color: var(--klk-red, #D13B38);
  vertical-align: -1px;
}
/* 号码本身（.diantel）：与 #21 的强调红一致，并保证可点区域够大 */
body .leftlx .dianhua .diantel{
  display: inline-flex; align-items: center; min-height: 32px;
  color: var(--klk-red, #D13B38);
}
/* #38 .pro_t：32px 黄绿标题 + 按钮高不足 44px */
.pro_t h3{ font-size: 28px; line-height: 1.35; color: var(--klk-blue, #0A6DB5); }
.pro_t a{ display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 24px; font-size: 16px; line-height: 1.4; }
/* #39 页头电话 26px（≈H1 27px）→ 22px，靠颜色强调 */
.h-pho b{ font-size: 22px; line-height: 1.25; }
/* #40 导航 13px → 14px */
.h_nav a{ font-size: 14px; }

/* ===========================================================================
   五、对齐 / 表格  —— 清单 #23 / #24 / #28 / #29 / #41
   =========================================================================== */
/* #24 面包屑实测 40px 行高配 14px 字（上下各空 ~13px 的虚胖横条）→ 32px */
body .plc{ min-height: 32px; line-height: 32px; font-size: 14px; }
/* #28 标题竖线：padding-left:11px / margin:26px 12px → 12 / 24 / 12，颜色一并统一 */
#nsbody h2, #zoom .con_text h2, .pillar h2{
  border-left: 4px solid var(--klk-blue, #0A6DB5);
  padding-left: 12px;
  margin: 24px 0 12px;
}
/* #23 竖线色 #0375BE 与正文蓝 #0A6DB5 有色差 → 统一 */
#nsbody > h1.col-title, .agent_con h1{ border-left-color: var(--klk-blue, #0A6DB5); padding-left: 12px; }
/* #29 / #41 表格 13/14/14.5px 三档 + padding 8px 10px → 14px / 8px 12px */
#nsbody table, #zoom .con_text table, .pillar table, .agent_con table, .colhead table{
  font-size: 14px; line-height: 1.6;
}
.colhead table th, .pillar table th, #nsbody table th, #nsbody table td,
#zoom .con_text table th, #zoom .con_text table td{ padding: 8px 12px; line-height: 1.6; }

/* ===========================================================================
   六、颜色收敛  —— 清单 #17 / #18 / #19 / #20 / #21 / #22 / #35 / #42
   ★ 全部走变量：任务 B 的 klk-design-system.css 定义了同名变量则自动跟随；
     未定义时用清单/验收标准的推荐值兜底（本文件不重复定义调色板）。
   =========================================================================== */
/* #20 正文三灰混用（#3D4B5A / #333 / #666）→ 正文 #333333 */
#nsbody p, #zoom .con_text p, .agent_con p, #nsbody .con_text p{ color: var(--c-text-2, #333333); }
/* 次要 / 元信息 → #666666 */
#nsbody li, #zoom .con_text li, .agent_con li,
.meta, .time, .newsinfo, .agent_con .age_list li{ color: var(--c-text-3, #666666); }
/* 弱化 → #8496A5 */
#nsbody .klk-note{ color: var(--c-text-4, #8496A5); }
/* #19 十几个「看起来一样的浅蓝」并排 ⇒ 接缝可见色块边界 → 收敛 */
.klkfaq-list > li, .klkfaq-a, .author-info, .klk-note{ background-color: var(--c-bg-tint, #FAFCFF); }
/* #17 六个近似「主蓝」→ 一个（只动可覆盖的类，不碰行内 style） */
.pro_t h3, .pro_t a, .h-pho b{ color: var(--klk-blue, #0A6DB5); }
/* #21 黄绿 #a5d134 与 CTA 红 #D13B38 打架 → 强调色统一红 */
.leftlx .dianhua span, .font_hotline{ color: var(--klk-red, #D13B38); }
/* #22 对比度：#999 配白底 ≈2.8:1（AA 需 4.5:1）→ #666666 / 12px */
small{ color: var(--c-text-3, #666666); font-size: 12px; }
/* #35 页脚版权行 12px #666 压在深蓝底（实测页脚底 = linear-gradient(#1EADEA→#0681C5)）
   ⇒ 对比度仅 1.35:1，肉眼几乎不可见。
   ✅ 实测取色对比度（WCAG，底色 #0681C5）：
        #666666 → **1.35:1**（现状，不可读）
        #C9DFED → 3.08:1（清单建议值，**仍不达 AA 4.5:1**）
        #E8F4FB → **3.79:1**（本文件采用，接近页脚可达到的上限）
        #FFFFFF → 4.24:1（页脚在深蓝底上连纯白都到不了 4.5:1）
   ⇒ 结论：**页脚底色调深前，此处的 4.5:1 无法达成**；本文件取 #E8F4FB 做到
     「从不可读 → 清晰可读」，并把「底色需调深」登记为待确认项。
   ★ 选择器用 `body .f-wrap > .footer span`（特异度 (0,2,2)）：
     klk-mobile-nav.css 的 `.f-wrap > .footer span{color:#fff !important}` 是 (0,2,1)，
     实测 (0,1,2)/(0,2,1) 都压不住它，必须抬到 (0,2,2) 才生效（已用 _probe14.js 逐条验证）。 */
body .f-wrap .footer-b, body .f-wrap .footer-b span{ color: #E8F4FB !important; line-height: 1.7; }
body .f-wrap > .footer span,
body .f-wrap > .footer > span,
body div.footer > span{ color: #E8F4FB !important; line-height: 1.7; }
body .footer-a a, body .f-wrap a{ color: #FFFFFF !important; }
/* #42 链接悬停 4 种颜色 → 统一 */
a:hover{ color: var(--klk-blue, #0A6DB5); }
a:visited{ color: var(--c-text-4, #8496A5); }

/* ===========================================================================
   七、间距网格  —— 清单 #9 / #10 / #12 / #33
   原值：margin 40 种（1510 处非 4 倍数）/ padding 38 种（4840 处非 4 倍数）
   说明：这里只收口「能唯一定位」的高频值；40/38 种的全站收缩必须改源文件，
        覆盖层穷举不了（见 诊断与批次.md「需动模板 / 源文件」）。
   =========================================================================== */
/* #12 出现次数最多的非网格值 5px（margin 408 / padding 250 次）→ 0，间距交给 flex gap */
body .content, body .left, body .right, body .right_main{ padding-left: 0; padding-right: 0; }
/* #33 上下 10px 混用 → 段落 14 / 卡片 24 / 大区块 48 三档节奏 */
#nsbody p, #zoom .con_text p, .agent_con p{ margin: 0 0 14px; }
#nsbody h2, #zoom .con_text h2, .pillar h2{ margin: 24px 0 12px; }
#nsbody h3, #zoom .con_text h3, .agent_con h3{ margin: 20px 0 10px; }

/* ===========================================================================
   八、★ 明确不做（避免误以为漏了）
   ---------------------------------------------------------------------------
   #11 margin 240/360/460/468/480px 巨值与 -450px 负值 —— 来源未追踪（疑似 JS
        动画初始值或旧模板定位 hack），强改会连带错位 ⇒ 不塞进候选，标「待确认」。
   #32 /fuwu/baiyi/ 图片区前置（页高 17717px → 19.7 屏）—— 需动内容顺序。
   #1 / #9 / #10 字号 18 种 / margin 40 种 / padding 38 种全站收敛 —— 需改
        resetcommon.css / style.css / resetcommonindex.css 源文件。
   #27 / #30 首页多套内容宽度 —— 已统一容器与阅读列；区块内部的行内 width 属
        「需动模板」。
   #34 .dy 固定高 420px —— 改 height:auto 会让首页新闻区块高度随内容跳变，
        收益不明而副作用明确 ⇒ 不塞进候选。
   =========================================================================== */
}