/* ============================================================================
   国际处网站 · 自定义覆盖样式  custom.css
   第 2 层：风格映射版（在现有 DOM 上逼近改版原型）
   ============================================================================
   定位：**不改 HTML 结构**，只用 CSS 把现有的老 class
        （topWrap / main_conL / newBox / footDiv_one …）
        映射成《原型》的设计语言（配色、间距、卡片、栅格、列表、导航）。

   与第 1 层的区别：第 1 层只修技术缺陷（页脚裁切、响应式、红色统一）；
   本版在第 1 层之上追加「结构映射」段（第 5 节），让观感向原型靠拢。

   部署三步：
     1. 放到  <站点根>/css/custom.css
     2. 在页面模板 <head> 中**最后**引入（顺序不可颠倒）：
          <link rel="stylesheet" href="css/style.css">
          <link rel="stylesheet" href="css/publice.css">
          <!-- index.vsb.css 由 upage.putAllViewStyle() 动态输出，勿改 -->
          <link rel="stylesheet" href="css/custom.css">   <!-- 必须最后 -->
     3. 刷新 CDN（cache-control: max-age=3600）

   为什么必须最后引入且大量用 !important：
     · index.vsb.css 由系统按组件实例自动生成（含 .c209405_* 等），后台一保存就覆盖；
     · style.css 有 150 处固定 px 宽度；
     · 模板里有 inline style（首页 42 处）。
   切勿直接修改 index.vsb.css 或 /system/resource/**。

   实证来源：2026-09-29 备份包 + 线上抓取 + 后台模板编辑器导出。
     组件实例：209405 工作动态 / 209407 公告通知 / 209408 项目发布
     页面模板：index / list / dpzw / content / pic_list / ssjg
   ============================================================================ */

/* ================================================================ 1. Tokens */
/* 取自《原型/assets/prototype.css》，保证两边同一套设计语言 */
:root {
  /* 品牌色 */
  --brand:        #0B6CB8;
  --brand-hover:  #095A9C;
  --brand-dark:   #083A63;
  --brand-ink:    #05243D;
  --brand-soft:   #EAF3FB;
  --brand-tint:   #F4F9FD;
  /* 强调色（现网站已有橙色系 #ffb64d，收敛为单一强调色） */
  --accent:       #E08A00;
  --accent-soft:  #FDF4E3;
  --accent-ink:   #8A5300;
  /* 中性色阶（替代 #333/#666/#999/#c8c8c8 混用） */
  --ink:    #152233;
  --ink-2:  #41526A;
  --ink-3:  #64748B;   /* 对白底 4.76:1，满足 WCAG AA（原 #6E8098 仅 4.04:1） */
  --ink-4:  #9AA9BC;
  --line:   #E1E8F0;
  --line-2: #EEF3F9;
  --bg-soft: #F6F9FC;
  /* 圆角与阴影 */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(8,58,99,.06);
  --shadow:    0 4px 16px rgba(8,58,99,.08);
  --shadow-lg: 0 14px 36px rgba(8,58,99,.13);
  /* 布局 */
  --container: 1200px;
  --gutter:    24px;
  /* 字体与字号阶梯（现网站基准 12px、且只有 "微软雅黑" 单一平台） */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
          "PingFang SC", "Hiragino Sans GB", Roboto, "Helvetica Neue", Arial,
          "Noto Sans SC", sans-serif;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-h4: 17px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --lh: 1.65;
}

/* ========================================================== 2. 全局基础 */
body, td, th, div, p, span, li, a, input, select, textarea, button {
  font-family: var(--font) !important;
}
body {
  font-size: var(--fs-body) !important;
  line-height: var(--lh) !important;
  color: var(--ink) !important;
  background: var(--bg-soft) !important;   /* 页面底改为浅灰，凸显白色卡片 */
  text-align: left;
}
/* 消除 pt 单位（现网站 11pt/13pt 混用，跨设备不稳定） */
.c209405_content, .c209407_content, .c209408_content,
.c209405_abstract, .c209407_abstract, .c209408_abstract { font-size: var(--fs-sm) !important; }

h1, h2, h3, h4 { color: var(--brand-ink); line-height: 1.35; }
img { max-width: 100%; }

/* 链接交互色 */
a { color: var(--brand); transition: color 200ms ease; }
a:hover { color: var(--brand-hover); }

/* ==================================================== 3. 一期修复（保留） */

/* 3.1 消除 3 种历史红色，统一品牌蓝
   index.vsb.css 中三个实例各带 3 处红色：
     .cXXXXX_content → #d60e00   .cXXXXX_front → #ff0103   A.cXXXXX:hover → #cc0000 */
.c209405_content, .c209407_content, .c209408_content { color: var(--ink-2) !important; }
.c209405_front,   .c209407_front,   .c209408_front   { color: var(--brand) !important; }
A.c209405, A.c209407, A.c209408 {
  color: var(--ink-2) !important;
  text-decoration: none !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.7 !important;
  transition: color 200ms ease;
}
A.c209405:link, A.c209405:visited,
A.c209407:link, A.c209407:visited,
A.c209408:link, A.c209408:visited { color: var(--ink-2) !important; }
A.c209405:hover, A.c209407:hover, A.c209408:hover { color: var(--brand) !important; text-decoration: underline !important; }

/* 3.2 页脚裁切修复（最高优先级 · 涉合规）
   现状：.footDiv_one{height:60px; line-height:60px; overflow:hidden} 内含 3 行 <p>
   → line-height:60px 使每行占满 60px，第 2、3 行落在色带外被裁掉。
   实测：页脚只显示 1 行，电话/邮编与 ICP 备案号完全不可见。 */
.footDiv_one {
  height: auto !important;
  line-height: 1.8 !important;
  overflow: visible !important;
  padding: 14px 0 !important;
  text-align: center;
}
.footDiv_one p {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  line-height: 1.8 !important;
  font-size: var(--fs-sm) !important;
  padding: 0 16px;
}
.footDiv_one p a { color: #CFE4F6 !important; }
.footDiv_one p a:hover { color: #fff !important; }

/* 3.3 可见焦点（无障碍）—— 现网站多处 outline:none，键盘用户看不到焦点 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
.mainmenu a:focus-visible, .p_pages a:focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: #fff; color: var(--brand); padding: 12px 20px; }
.skip-link:focus { left: 0; }

/* ============================================ 4. 首页列表组件（3 个实例） */
/* 现网站用 <table> 做列表布局、单元格带固定百分比宽度 */
.c209405_table, .c209407_table, .c209408_table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}
.c209405_table tr, .c209407_table tr, .c209408_table tr { border-bottom: 1px solid var(--line-2); }
.c209405_table tr:last-child, .c209407_table tr:last-child, .c209408_table tr:last-child { border-bottom: 0; }
/* 只调**垂直**内边距：这三个表格靠 td 的 width 属性定宽，
   若在此增加水平内边距会把表格撑宽，反而加重窄屏溢出（实测 +15px） */
.c209405_table td, .c209407_table td, .c209408_table td {
  padding: 7px 0 !important;
  vertical-align: top;
}
.c209407_hr, .c209405_hr, .c209408_hr { display: none !important; }
/* 列表项标题两行截断，全文保留在 title 属性里 */
.c209405_table a, .c209407_table a, .c209408_table a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.c209405_table tr:hover, .c209407_table tr:hover, .c209408_table tr:hover { background: var(--brand-tint); }

/* ================================================= 5. 结构映射（第 2 层新增） */
/* 目标：让老 class 呈现《原型》的设计语言。全部针对具体选择器，
   不做全局 reset，避免破坏未预料到的系统输出。 */

/* ---- 5.1 顶部栏 ---- */
.topWrap {
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
}
.topDiv, .topWrap .topDiv { padding: 10px 0 !important; }
.logo img { max-height: 64px; width: auto; }
.topR, .topR_t { font-size: var(--fs-sm) !important; color: var(--ink-3) !important; }
.topR a, .topR_t a { color: var(--ink-2) !important; font-size: var(--fs-sm) !important; }
.topR a:hover, .topR_t a:hover { color: var(--brand) !important; }

/* ---- 5.2 主导航 ---- */
/* 加「党建工作」后共 9 个一级栏目：沿用 padding:0 24.5px 需 985px，
   而内框只有 976px 会撑破 → 必须收紧到 20px。 */
.navWrap {
  background: var(--brand) !important;
  box-shadow: var(--shadow-sm);
}
.mainmenu > li > a, .mainmenu a {
  font-size: var(--fs-body) !important;
  color: #fff !important;
  transition: background-color 200ms ease, color 200ms ease;
}
.navWrap .mainmenu > li > a { padding-left: 20px !important; padding-right: 20px !important; }
.mainmenu > li > a:hover, .mainmenu > li.cur > a, .mainmenu > li.on > a {
  background: var(--brand-hover) !important; color: #fff !important;
}
.mainmenu dl {
  background: #fff !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border-top: 2px solid var(--brand) !important;
  overflow: hidden;
}
.mainmenu dl a { font-size: var(--fs-sm) !important; color: var(--ink-2) !important; padding: 9px 18px !important; }
.mainmenu dl a:hover { background: var(--brand-soft) !important; color: var(--brand) !important; }

/* ---- 5.3 轮播 / 图片切换 ---- */
.banner, .changeDiv, .changeBox_a1 { border-radius: 0 !important; }
.fdj { opacity: .9; }
.eachBox img { border-radius: var(--radius-sm); }
.button, .h_button {
  border-radius: var(--radius-sm) !important;
  background: var(--brand) !important; color: #fff !important; border: 0 !important;
  transition: background-color 200ms ease;
}
.button:hover, .h_button:hover { background: var(--brand-hover) !important; color: #fff !important; }

/* ---- 5.4 主体栅格：用 flex 取代 float ---- */
.mainWrap {
  max-width: var(--container) !important;
  margin: 0 auto !important;
  padding: var(--gutter) !important;
  box-sizing: border-box;
}
.main_con {
  display: flex !important;
  gap: var(--gutter) !important;
  align-items: flex-start;
  background: transparent !important;
}
/* 侧栏：固定宽；主内容：自适应 */
.main_conL { flex: 0 0 280px !important; max-width: 280px !important; float: none !important; }
.main_conR, .main_conC { flex: 1 1 auto !important; min-width: 0 !important; float: none !important; }

/* ---- 5.5 侧栏 ---- */
.main_conLT {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  margin-bottom: 16px !important;
}
.main_tit, .main_titT {
  background: var(--brand) !important; color: #fff !important;
  font-size: var(--fs-h4) !important; font-weight: 700;
  padding: 12px 16px !important; border-radius: var(--radius) var(--radius) 0 0;
}
.main_titT a, .main_tit a { color: #fff !important; }
.informBox {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 12px !important;
  margin-bottom: 16px !important;
}
/* 侧栏二级导航 */
.main_conLT dl dt, .main_conLT dl dd { border-bottom: 1px solid var(--line-2); }
.main_conLT dl a {
  display: block; padding: 9px 16px !important;
  color: var(--ink-2) !important; font-size: var(--fs-sm) !important;
  transition: background-color 200ms ease, color 200ms ease;
}
.main_conLT dl a:hover, .main_conLT dl dd.cur a {
  background: var(--brand-soft) !important; color: var(--brand) !important;
}

/* ---- 5.6 内容区卡片与栏目标题 ---- */
.newBox, .new_inforBox, .informBoxb {
  background: #fff !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}
/* 只给**垂直**内边距。三个容器宽度是固定百分比（34.19% / 32.62% / 26.75%），
   叠加 box-sizing:border-box 与水平 padding 会压窄内容区 32px，
   导致列表条目提前换行、整体比 banner 窄。 */
.newBox { padding: 4px 0 12px !important; }
.dynamic, .dynamicd, .dynamicc {
  border-bottom: 2px solid var(--line-2) !important;
  padding-bottom: 8px !important; margin-bottom: 8px !important;
}
.dynamic h2, .dynamicd h2, .dynamicc h2 {
  font-size: var(--fs-h3) !important;
  color: var(--brand-ink) !important;
  border-left: 4px solid var(--brand) !important;
  padding-left: 10px !important;
}
.dynamic SPAN, .dynamicd SPAN { font-size: var(--fs-xs) !important; }
.dynamic SPAN a, .dynamicd SPAN a { color: var(--ink-3) !important; }
.dynamic SPAN a:hover, .dynamicd SPAN a:hover { color: var(--brand) !important; }

/* 首页三栏资讯：改为等宽网格（原为 34.19%/32.62%/26.75% 不等宽） */
.new_inforBox { flex: 1 1 0 !important; }

/* ---- 5.7 底部图片链接区 ---- */
.linkDiv_two, .link_tit, .link_two, .link { box-sizing: border-box; }
.link_tit {
  font-size: var(--fs-h4) !important; color: var(--brand-ink) !important;
  border-left: 4px solid var(--brand) !important; padding-left: 10px !important;
}
.link_two li, .linkDiv_two li { margin: 0 6px 10px !important; }
.link_two img, .linkDiv_two img { border-radius: var(--radius-sm); }
.link_two a, .link a { color: var(--ink-2) !important; font-size: var(--fs-sm) !important; }
.link_two a:hover, .link a:hover { color: var(--brand) !important; }

/* ---- 5.8 页脚 ---- */
.footWrap { background: var(--brand-dark) !important; color: #CFE4F6 !important; }
.foot_one, .foot_three { color: #CFE4F6 !important; font-size: var(--fs-sm) !important; }
.foot_one a, .foot_three a, .foot-left a { color: #CFE4F6 !important; }
.foot_one a:hover, .foot_three a:hover, .foot-left a:hover { color: #fff !important; text-decoration: underline; }
.footDiv_two, .footDiv_three { padding: 16px 0 !important; }
.foot-left { font-size: var(--fs-sm) !important; }

/* ---- 5.9 搜索 ---- */
.Search, .search_text { box-sizing: border-box; }
.search_text {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 12px !important;
  font-size: var(--fs-sm) !important;
  color: var(--ink) !important;
}
.search_text:focus { border-color: var(--brand) !important; }
.select dt {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 12px !important; background: #fff !important;
  font-size: var(--fs-sm) !important;
}
.select dd {
  background: #fff !important; border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important; box-shadow: var(--shadow) !important;
}
.select dd a { font-size: var(--fs-sm) !important; padding: 7px 12px !important; }

/* ---- 5.10 面包屑 / 当前位置 ---- */
.main_con .main_titT, .main_titTa {
  font-weight: 400 !important; font-size: var(--fs-sm) !important;
  color: var(--ink-3) !important;
}
.main_titTa a { color: var(--ink-2) !important; }
.main_titTa a:hover { color: var(--brand) !important; }

/* ---- 5.11 首页三栏：只放开写死的高度 ---- */
/* 原模板三栏宽度是 inline 的 34.19% / 32.62% / 26.75%（合计 93.56%），
   父容器也是 inline 的 width:1014px → 三栏合计约 949px，比 1000px 的 banner 窄约 51px。
   这个差异是**原设计自带**的，不是本次改动造成的。

   尝试用 :has() 覆盖 inline 宽度在该环境下未生效（三栏仍按 1014px 计算），
   而放宽 max-width 又会让窄屏溢出（实测 142 个元素）。因此此处只保留
   无风险的部分：放开写死的 height（285px / 191px），避免内容增多时被截断。
   三栏与 banner 的宽度对齐留待模板结构重排（第 3 层）处理。 */
.new_inforBox { height: auto !important; }
.vsb-container > .new_inforBox { height: auto !important; }
/* ============================================================ 6. 分页 */
.p_pages { text-align: center; margin: 24px 0; }
.p_pages a, .p_pages span {
  display: inline-block; min-width: 34px; padding: 6px 10px; margin: 0 3px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-sm);
  color: var(--ink-2); text-decoration: none !important; background: #fff;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.p_pages a:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.p_pages .cur { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; font-weight: 700; }
.p_pages .p_no, .p_pages .p_no_d { color: var(--ink-3); border-color: transparent; background: transparent; }

/* ============================================================ 7. 表格 */
.main_con table, .main_conC table, .vsb_content table { max-width: 100%; }
.main_con table td, .vsb_content table td { border-color: var(--line-2); }

/* ============================================================ 8. 响应式 */
/* 现网站为零响应式：0 个 @media、固定 1000px 画布、三视口文档高度恒为 1064px。
   实测（node 交付包\diagnose_overflow.mjs）：撑破页面的固定宽度全部来自
   css/style.css（150 处）；用 max-width 压制即可，无需改模板。
   断点对齐设计规范：1200 / 992 / 768 / 480 */

@media (max-width: 1200px) {
  /* 统一盒模型，避免 padding/border 在窄屏额外增加宽度 */
  *, *::before, *::after { box-sizing: border-box !important; }
  /* 兜底：max-width 优先于 width，可压制 style.css 里的固定 px 宽度 */
  div, ul, ol, dl, dt, dd, table, h1, h2, h3, h4, h5, h6, p, form, iframe,
  input, select, textarea, button, img { max-width: 100% !important; }
  .vsb-box, .vsb-container, .vsb-space, .vsb-container.a,
  .topDiv, .topWrap, .topR, .topR_t, .topR_b, .navWrap, .nav,
  .banner, .eachBox, .changeDiv, .changeBox_a1, .ul_change_a2, .fdj,
  .mainWrap, .main_con, .main_conL, .main_conR, .main_conC, .main_conLT, .main_conRCb,
  .linkDiv_two, .link_tit, .link_two, .link,
  .footWrap, .foot_one, .footDiv_one, .footDiv_two, .footDiv_three,
  .Search, .search_text, .newBox, .dynamic, .new_inforBox {
    width: auto !important; min-width: 0 !important;
  }
  /* 首页三栏不再浮动，改由 flex 排列 */
  .new_inforBox { float: none !important; }
  /* 搜索输入框自带水平 margin（实测 left=15px），取满 100% 会顶出右缘 */
  .search_text, input[type="text"], input[type="search"] {
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    box-sizing: border-box !important;
  }
}

/* 中屏：主内容与侧栏仍并列，但侧栏收窄 */
@media (max-width: 992px) {
  body { font-size: 15.5px !important; }
  .main_conL { flex: 0 0 220px !important; max-width: 220px !important; }

  /* 触屏无 hover：二级菜单改为常显 + 由 custom.js 切换 .is-open */
  .mainmenu dl {
    position: static !important; display: block !important;
    background: rgba(0,0,0,.12) !important; box-shadow: none !important;
    border-top: 0 !important; border-radius: 0 !important;
    margin: 0 0 6px 10px !important;
    width: auto !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  .mainmenu dl, .mainmenu dd, .mainmenu dt { min-width: 0 !important; }
  li.mainmenu.is-open > dl { display: block !important; }
  li.mainmenu > a[aria-expanded="true"] { background: rgba(255,255,255,.16) !important; color: #fff !important; }
  .mainmenu dl a { color: #DCEDF9 !important; }
  .mainmenu dl a:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
  .mainmenu > li { float: none !important; display: block !important; }

  /* 顶部信息条与搜索换行 */
  .topR, .topR_t, .Search, .search_text { float: none !important; }
  .search_text { width: 100% !important; }
  .topWrap, .navWrap { flex-wrap: wrap; }

  /* 宽表格改为容器内滚动，而不是撑破页面 */
  .main_con table, .vsb_content table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* 窄屏：全部改单列 */
@media (max-width: 768px) {
  body { font-size: 15px !important; }
  .main_con { display: block !important; }
  .main_conL, .main_conR, .main_conC, .main_conLT, .main_conRCb {
    flex: none !important; width: 100% !important; max-width: 100% !important;
    float: none !important; margin: 0 0 20px !important;
  }
  .mainmenu > li > a { font-size: 15px !important; padding: 12px 14px !important; }
  .dynamic h2, .dynamicd h2, .dynamicc h2 { font-size: var(--fs-h4) !important; }
  /* 首页三栏资讯改单列 */
  .new_inforBox, .new_inforBoxa, .new_inforBoxb { width: 100% !important; flex: none !important; }
  /* 三栏容器回退为块级：flex 默认不换行，会让三个全宽元素挤在一行 */
  .vsb-container:has(> .new_inforBox) { display: block !important; }
  /* 页脚居中 */
  .foot_one, .footDiv_two, .footDiv_three { text-align: center !important; }
  .link_two li, .linkDiv_two li { float: none !important; display: inline-block !important; }
  .mainWrap { padding: 16px !important; }
}

@media (max-width: 480px) {
  body { font-size: 14.5px !important; }
  .footDiv_one p { font-size: var(--fs-xs) !important; }
  .p_pages a, .p_pages span { min-width: 30px; padding: 5px 8px; font-size: var(--fs-xs); }
  .mainWrap { padding: 12px !important; }
}

/* ============================================ 9. 动效偏好与打印 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .navWrap, .topDiv, .Search, .p_pages, .fdj { display: none !important; }
  body { font-size: 10.5pt; color: #000; background: #fff !important; }
  .footDiv_one, .footWrap { background: #fff !important; color: #333 !important; }
  .foot_one a, .foot_three a { color: #333 !important; }
  .main_con { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}