/* ============================================================================
   中国教育科研信息网 · 新版前端设计系统 (theme.css)
   2026-11-15 视觉重做：统一配色 / 排版 / 组件 / 全站响应式
   说明：本文件 restyle 既有生成式 HTML 的稳定 class（.columnleft/.topmenuul/
   .model?_tab/.logodiv/.wenzangul...），不动任何 Java 后端。
   加载位置：由 head.jsp 在 <body> 顶部引入，覆盖 normal/index/head/v2 旧样式。
   ============================================================================ */

/* ---------- 设计变量 ---------- */
:root
{
  --c-primary:        #0E4DA4;   /* 深蓝（主） */
  --c-primary-2:      #1A6FD4;   /* 深蓝（浅亮，hover/链接） */
  --c-primary-d:      #0A3C80;   /* 深蓝（深） */
  --c-accent:         #0E4DA4;   /* 原暖金 #E8A33D，统一为深蓝 */
  --c-accent-d:       #0A3C80;   /* 原 #C9852A，统一为深蓝深档 */
  --c-bg:             #EEF2F8;   /* 页面背景 */
  --c-surface:        #FFFFFF;   /* 卡片/内容 */
  --c-surface-2:      #F6F9FE;   /* 浅蓝底 */
  --c-text:           #1F2A3D;   /* 主文字 */
  --c-text-2:         #5A6478;   /* 次文字 */
  --c-text-3:         #98A2B3;   /* 弱文字 */
  --c-border:         #EBF1F8;   /* 淡蓝灰边线（原 #E5E9F0） */
  --c-border-2:       #DCE6F2;   /* 淡蓝灰边线-深（原 #D5DEEA） */
  --c-success:        #2E8B57;
  --c-danger:         #DC2626;
  --c-shadow:         0 6px 22px rgba(14,77,164,.08);
  --c-shadow-lg:      0 14px 40px rgba(10,40,90,.16);
  --radius:           6px;       /* 圆角统一 6px（原 14px） */
  --radius-sm:        6px;       /* 圆角统一 6px（原 9px） */
  --maxw:             1200px;
  --nav-h:            56px;
  --topbar-h:         36px;
  --font:             "Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- 基础重置 ---------- */
*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; }
body
{
  margin:0; padding:0;
  font-family:var(--font);
  font-size:15px; line-height:1.7; color:var(--c-text);
  background:var(--c-bg);
  overflow-x:hidden;
}
img{ max-width:100%; }
a{ color:var(--c-primary); text-decoration:none; transition:color .15s; }
a:hover{ color:var(--c-primary-2); }
::selection{ background:rgba(26,111,212,.18); }

/* ---------- 页面容器 ---------- */
.webroot, .webroot2
{
  width:100% !important;
  max-width:var(--maxw);
  margin:0 auto !important;
  padding-left:16px; padding-right:16px;
  box-sizing:border-box;
}

/* ===================== 顶部工具条 ===================== */
.topbar
{
  height:var(--topbar-h) !important; line-height:var(--topbar-h) !important;
  background:linear-gradient(90deg,var(--c-primary-d),var(--c-primary));
  color:#fff; font-size:12px;
  overflow:hidden;
}
.topbar .webroot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.topbar span[style*="color"]{ color:rgba(255,255,255,.82) !important; }
.logininf{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.loginspan, .regspan
{
  height:28px; line-height:28px; padding:0 14px; font-size:13px;
  color:#fff !important; cursor:pointer; border-radius:6px;
  background:rgba(255,255,255,.14); transition:background .15s;
}
.loginspan:hover, .regspan:hover{ background:rgba(255,255,255,.28); }

/* ===================== 头部 Logo + 导航 ===================== */
.headlogozone
{
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  height:auto !important; padding:14px 0;
}
.webroot .headlogozone{ display:flex; }
.logowrap{ margin:0 !important; gap:14px !important; max-width:none !important; }
.logoicon{ height:54px !important; width:54px !important; border-radius:10px; }
.logotext{ height:32px !important; }
.logotextbox{ gap:2px; }

.webhead
{
  background:var(--c-primary);
  height:var(--nav-h) !important;
  box-shadow:0 2px 10px rgba(10,40,90,.18);
  position:sticky; top:0; z-index:50;
}
.webhead .webroot2{ height:var(--nav-h); display:flex; align-items:center; }
.topmenuul
{
  list-style:none; margin:0 !important; padding:0 !important;
  display:flex !important; flex-wrap:nowrap; align-items:center;
  height:var(--nav-h) !important; width:100% !important;
  gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.topmenuul::-webkit-scrollbar{ display:none; }
.topmenuul li
{
  flex:0 0 auto; height:var(--nav-h); line-height:var(--nav-h);
  padding:0 18px; color:#fff; font-size:15px; cursor:pointer;
  white-space:nowrap; position:relative; transition:background .15s;
}
.topmenuul li:hover{ background:rgba(255,255,255,.12); }
.topmenuul li:first-child{ font-weight:700; }
.topmenuul li::after
{
  content:""; position:absolute; left:18px; right:18px; bottom:0; height:3px;
  background:var(--c-accent); transform:scaleX(0); transition:transform .2s;
}
.topmenuul li:hover::after{ transform:scaleX(1); }

.linediv_gray{ height:0 !important; border:none; }

/* ===================== 面包屑 ===================== */
#headdl .dhdiv, .dhdiv
{
  width:100% !important; max-width:var(--maxw) !important;
  margin:0 auto !important; box-sizing:border-box !important;
  padding:12px 16px !important; color:var(--c-text-2); font-size:13px;
  white-space:normal !important; overflow-wrap:anywhere; line-height:1.7;
}
.dhdiv .linkspan{ color:var(--c-primary); cursor:pointer; }

/* ===================== 页脚 ===================== */
.bottomdiv, .bottominfodiv
{
  background:var(--c-primary-d) !important;
  color:rgba(255,255,255,.82) !important;
  padding:34px 0 18px !important; margin-top:40px !important;
  font-size:13px; line-height:1.9;
}
.bottomdiv .webroot, .bottominfodiv .webroot{ color:inherit; }
.bottomdiv a, .bottominfodiv a{ color:rgba(255,255,255,.85); }
.bottomdiv a:hover, .bottominfodiv a:hover{ color:#fff; }
.contactbox, .blogobox, .linkspan{ color:inherit; }
.linediv{ border-color:rgba(255,255,255,.15) !important; }

/* ===================== 首页两栏布局 =====================
   仅在首页内容容器（index.jsp 的 .webroot.home-root）生效，
   避免影响顶部工具条/头部等其他 .webroot 用法。 */
.home-root
{
  display:flex !important; flex-wrap:wrap; gap:26px;
  align-items:flex-start; max-width:var(--maxw); margin:0 auto;
}
.home-root > .columnleft,
.home-root > .columnright
{
  display:block !important; width:auto !important;
  /* 2026-11-15 修复：原来这里是 overflow:visible，导致 .columnright 里
     两个页签面板（.neirongdivr1/r2 各 380px，靠父级裁切只露第一个）全部
     露出并压到左栏上；改回 hidden，页签切换仍由 JS 改 width 完成 */
  overflow:hidden !important; vertical-align:top; background:transparent;
  padding-left:0 !important; margin-top:0; min-width:0;
}
.home-root > .columnleft{ flex:1 1 720px; }
/* 右栏内两个页签面板各 380px（JS selectitemdivr 把宽度改成 0/380 来切换），
   容器严格 380 才能把第二个面板完整裁掉，否则右边会露出 20px 残条 */
.home-root > .columnright{ flex:0 0 380px; max-width:380px; }
@media (max-width: 980px)
{
  .home-root{ display:block !important; }
  .home-root > .columnleft,
  .home-root > .columnright{ flex:none !important; max-width:100% !important; width:100% !important; }
}

/* 通用栏目容器兜底：未加 home-root 的旧页面两栏也别溢出 */
.columnleft{ max-width:100%; }
.columnright{ max-width:100%; }

/* 板块标题条 */
/* 板块标题条：白底收窄（见 fix-layout P10），底部一条淡线分隔 */
.itemmenudivtop{ margin-top:18px; border-bottom:1px solid var(--c-border); margin-bottom:10px; }
/* 栏目切换 tab：选中 = 文字变蓝 + 底边蓝线（2026-11-16 统一，不再整块深蓝） */
.itemmenudivsel, .itemmenudiv
{
  text-align:center; color:var(--c-text-2); background:transparent;
  cursor:pointer; width:auto !important; min-width:120px; height:44px; line-height:44px;
  position:relative; margin-right:6px; display:inline-block; padding:0 18px; border:none;
  border-bottom:2px solid transparent; border-radius:0;
  font-size:15px;
}
.itemmenudivsel
{
  color:var(--c-primary); font-weight:700;
  border-bottom:2px solid var(--c-primary);
}
.itemmenudiv{ color:var(--c-text-2); background:transparent; }
.itemmenudiv:hover{ color:var(--c-primary); }
.com-title{ margin-left:0 !important; font-size:18px; color:var(--c-primary); font-weight:700; padding-bottom:8px; border-bottom:3px solid var(--c-border); }

/* 文章列表 */
.columnul{ list-style:none; padding:0; margin:0; }
.columnul li
{
  height:auto !important; line-height:1.7 !important; padding:10px 0;
  border-bottom:1px dotted var(--c-border-2); cursor:pointer; position:relative;
  color:var(--c-text); font-size:15px; text-indent:0 !important;
}
.columnul li:hover{ color:var(--c-primary); }

/* ===================== 轮播 ===================== */
.logodiv
{
  width:100% !important; max-width:var(--maxw); height:auto !important;
  min-height:0; overflow:hidden; position:relative;
  margin:18px auto 14px !important; border-radius:var(--radius); box-shadow:var(--c-shadow);
  background:var(--c-surface);
}
.logodiv img{ width:100% !important; height:340px !important; object-fit:cover; display:block; cursor:pointer; }
/* 轮播同一时刻只显示一张：由 js/index.js 的 selectlogo() 写内联 display 控制。
   2026-11-15 修复：原来这条写了 display:block !important，权重压过 JS 写的
   内联 display:none，10 张图全部竖排堆叠，首页被撑到 3400px 高、整版错位。 */
.logodiv > div{ width:100% !important; position:relative; }
.logodiv > div[id^="logodiv_"]{ display:none; }
.logodiv > #logodiv_0{ display:block; }
.logodiv > .pagebtndiv{ width:auto !important; display:block; }
.logodiv p
{
  text-align:left; color:#fff; background:linear-gradient(transparent,rgba(10,30,70,.78));
  font-size:16px; height:auto !important; line-height:1.6 !important;
  position:absolute; left:0; right:0; bottom:0; width:100% !important;
  padding:24px 14px 12px !important; margin:0;
}
.pagebtndiv{ text-align:right; position:absolute !important; bottom:14px; right:14px; left:auto !important; z-index:3; }
.pagebtn, .pagebtnsel{ border:none; outline:none; background:rgba(255,255,255,.7); width:20px; height:20px; line-height:20px; margin-left:5px; cursor:pointer; border-radius:50%; }
.pagebtnsel{ background:var(--c-primary); color:#fff; }

/* ===================== 内容模型栅格（model1~model7 / modelr） ===================== */

/* 2026-11-15 修复（关键）：首页 tab 面板容器
   index.css 里 .neirongdiv{width:2000px} / .neirongdiv1{width:800px} 是 1200px 时代的硬编码，
   而左栏实际只有 762px → 表格被撑到 800px，右边 38px 直接被裁掉，右边文字永远看不全。
   容器改 100%，面板宽度由 JS 按父容器实测值写入；切换仍靠 width:0 塌缩，
   所以这里必须保持 inline-block + nowrap（用 flex 会让 width:0 失效、页签点不动）。 */
.neirongdiv
{
  width:100% !important; display:block !important;
  white-space:nowrap !important; overflow:hidden !important;
  font-size:0; /* 消除 inline-block 之间的空白间隙 */
}
.neirongdiv1, .neirongdiv2, .neirongdivr1, .neirongdivr2
{
  display:inline-block !important; vertical-align:top !important;
  white-space:normal !important; max-width:100%; box-sizing:border-box;
  font-size:14px; /* 还原上面 font-size:0 的影响 */
}

.model1_tab, .model2_tab, .model3_tab, .model4_tab, .modelr1_tab, .modelr3_tab
{
  width:100% !important; margin:14px auto 0 !important;
  border-collapse:separate; border-spacing:14px; overflow:hidden !important;
}
.model2_tab a, .model3_tab a
{
  display:block !important; font-size:0; width:100% !important;
  border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--c-shadow); background:#fff;
  transition:transform .2s, box-shadow .2s;
}
.model2_tab a:hover, .model3_tab a:hover{ transform:translateY(-4px); box-shadow:var(--c-shadow-lg); }
.model2_img, .model3_img, .model4_img, .modelr2_img, .modelr91_img
{ width:100% !important; height:160px !important; object-fit:cover !important; display:block; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
/* 2026-11-15 修复：左栏「左图右文」的图必须定宽，不能 100%（100% 在 auto 表格里会把图列撑到 569px，
   文字列只剩 190px，整块又高又错位）。放开 object-fit 统一 160px 高的写法。 */
.model1_img
{
  width:300px !important; max-width:300px !important; height:170px !important;
  object-fit:cover !important; display:block; border-radius:var(--radius-sm);
  /* 抓取时缩略图缺失会写出空路径 res/-1/itemres/，浏览器拿到裂图。
     给底色兜住，视觉上是浅色占位块而不是白框。 */
  background:linear-gradient(135deg,#eef3fb,#dbe6f8);
}
/* 右栏横排小图，固定窄图 */
.modelr1_img
{
  width:140px !important; max-width:140px !important; height:100px !important;
  object-fit:cover !important; display:block; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,#eef3fb,#dbe6f8);
}
.model2_title, .model3_title, .model4_title, .model1_title, .modelr1_title
{
  color:var(--c-text) !important; font-size:15px !important; font-weight:600;
  background:#fff !important; text-align:left !important; height:auto !important; line-height:1.5 !important;
  margin:10px 12px !important; padding:0 !important;
}
.model1_title:hover, .model2_title:hover, .model3_title:hover{ color:var(--c-primary) !important; }
.model1_data, .model3_data, .model4_data, .modelr1_data, .modelr91_data
{ color:var(--c-text-2) !important; font-size:13px !important; margin:0 12px 12px !important; }

/* 四列卡片网格：仅 model2/3/4（纯图片卡）适用 */
.model2_tab td, .model3_tab td, .model4_tab td
{ width:25% !important; vertical-align:top; overflow:visible !important; padding:0; }

/* 2026-11-15 修复：model1 / modelr1 / modelr3 是「图 + 文」两列表，
   原来被上面同一条 25% 规则命中 → 图列 569px、文字列 190px、表格宽 800px 溢出左栏。
   改为固定表格布局，图列定宽，文列吃剩余。 */
.model1_tab, .modelr1_tab, .modelr3_tab
{ table-layout:fixed !important; width:100% !important; overflow:hidden !important; }
.model1_tab td, .modelr1_tab td, .modelr3_tab td
{ vertical-align:top; overflow:hidden !important; padding:0; }
.model1_tab td:first-child{ width:300px !important; }
.model1_tab td:last-child{ width:auto !important; padding-left:16px !important; }
.modelr1_tab td:first-child, .modelr3_tab td:first-child{ width:150px !important; }
.modelr1_tab td:last-child, .modelr3_tab td:last-child{ width:auto !important; padding-left:12px !important; }

/* 摘要统一裁切，避免抓来的超长正文把卡片撑高 */
.model1_data, .modelr1_data, .modelr91_data, .modelr3_data
{ display:-webkit-box !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
.model1_data{ -webkit-line-clamp:2 !important; max-height:3.4em !important; }
.modelr1_data, .modelr3_data{ -webkit-line-clamp:2 !important; max-height:3.4em !important; }
.modelr91_data{ -webkit-line-clamp:2 !important; max-height:3.4em !important; }

@media (max-width: 980px)
{
  .model2_tab td, .model3_tab td, .model4_tab td{ width:50% !important; }
  .model1_tab td:first-child{ width:220px !important; }
  .model1_img{ width:220px !important; max-width:220px !important; height:130px !important; }
}
@media (max-width: 560px)
{
  .model2_tab td, .model3_tab td, .model4_tab td{ width:100% !important; display:block; }
  .model1_tab{ table-layout:auto !important; }
  .model1_tab td{ display:block !important; width:100% !important; padding-left:0 !important; }
  .model1_img{ width:100% !important; max-width:100% !important; height:180px !important; }
}

/* ===================== 列表页（wenzangul） ===================== */
.wenzangul{ list-style:none; padding:0; margin:0; }
.wenzangul li
{
  display:flex; gap:16px; align-items:flex-start; padding:16px 0;
  border-bottom:1px solid var(--c-border); cursor:pointer;
}
.wenzangul li > img
{
  width:160px !important; height:110px !important; flex:0 0 160px;
  object-fit:cover !important; border-radius:var(--radius-sm); float:none !important;
}
.wenzangul li .msgtextdiv
{
  display:block !important; width:auto !important; margin-left:0 !important;
  flex:1; min-width:0; overflow:hidden;
}
.wenzangul li .msgtextdiv .title{ font-size:17px; font-weight:700; color:var(--c-text); }
.wenzangul li:hover .msgtextdiv .title{ color:var(--c-primary); }
.wenzangul li .msgtextdiv .summary{ color:var(--c-text-2); font-size:14px; margin-top:6px; }

/* ===================== 通用按钮 ===================== */
.btnge, .viewmorebtn, .submit, .abtn
{
  font-family:var(--font); cursor:pointer; border:none; border-radius:var(--radius-sm);
  transition:all .18s;
}
.btnge
{
  background:var(--c-primary);              /* 原渐变，统一纯深蓝 */
  color:#fff; padding:0 26px; height:44px; font-size:16px; font-weight:600;
  box-shadow:0 6px 16px rgba(14,77,164,.22);
}
.btnge:hover{ background:var(--c-primary-d); transform:translateY(-1px); }
.viewmorebtn
{
  color:var(--c-primary) !important; font-size:14px; border:1px solid var(--c-border-2) !important;
  border-radius:var(--radius-sm); width:auto !important; display:inline-block !important;
  line-height:28px !important; height:28px !important; text-align:center; background:#fff !important;
  padding:0 16px !important; margin:8px 0 0 10px;
}
.viewmorebtn:hover{ background:var(--c-primary) !important; color:#fff !important; border-color:var(--c-primary) !important; }

/* ===================== 区块卡片（通用容器） ===================== */
.card, .section-box
{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--radius); box-shadow:var(--c-shadow); padding:18px 20px; margin:16px 0;
}

/* ===================== 期刊推荐条（jqstrip） ===================== */
.jqstrip
{
  background:var(--c-surface-2);
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  overflow:hidden;
  margin:14px 0;
}
.jqstrip-in
{
  width:100% !important;            /* 覆盖 v2.css 的固定 1200px，治本“缩小就乱跑” */
  max-width:var(--maxw);
  margin:0 auto !important;
  display:flex !important;
  flex-wrap:wrap;
  align-items:stretch;
  gap:4px;
  padding:10px 0;
  box-sizing:border-box;
}
.jqstrip-label
{
  flex:0 0 auto !important;
  background:var(--c-primary) !important;
  color:#fff !important;
  font-size:13px !important;
  padding:10px 7px !important;
  border-radius:8px !important;
  margin:8px 12px 8px 0 !important;
  white-space:nowrap;
  writing-mode:vertical-rl !important;
  text-orientation:upright !important;
  letter-spacing:3px; line-height:1.2; align-self:center; min-width:max-content;
}
.jqcard
{
  display:inline-block !important; text-decoration:none;
  margin:6px 7px !important; position:relative; vertical-align:top;
}
.jqcard-cv
{
  width:104px !important; height:144px !important;
  border-radius:10px !important; overflow:hidden; background:#e6ebf5;
  box-shadow:0 2px 10px rgba(20,40,90,.16); position:relative; transition:transform .18s, box-shadow .18s;
}
.jqcard:hover .jqcard-cv{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(9,51,128,.32); }
.jqcard-cv img{ width:100% !important; height:100% !important; object-fit:cover; display:block; }
.jqcard-cv.nocv{ display:flex; align-items:center; justify-content:center; padding:8px; box-sizing:border-box; }
.jqcard-cv.nocv span{ font-size:13px; font-weight:600; color:var(--c-primary); line-height:1.5; text-align:center; }
.jqcard-cv .jqtag{ position:absolute; top:0; left:0; background:var(--c-danger); color:#fff; font-size:11px; padding:2px 8px; border-radius:8px 0 8px 0; z-index:1; }
.jqcard-nm{ margin-top:6px; font-size:12px; color:var(--c-text); text-align:center; width:104px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jqcard:hover .jqcard-nm{ color:var(--c-primary); font-weight:600; }

/* ===================== 防溢出安全网（兜底任何遗留固定宽度） =====================
   2026-11-15 修复：这一行原来还写了 .webroot / .webhead，
   与第 54 行 `.webroot{max-width:var(--maxw)}` 同权重且在后面，
   把 1200px 上限改写成了 100%，于是桌面端整页被拉到窗口满宽（1880+px），
   .home-root 的 flex 两栏算错行，右栏被挤到下一行、右侧内容出屏被裁。
   .webroot 的宽度约束已由第 54 行负责，此处只兜底图片/表格。 */
img, video, canvas, table, .topmenuul{ max-width:100%; }
* { box-sizing:border-box; }

/* ===================== 全局响应式收尾 ===================== */
@media (max-width: 820px)
{
  body{ font-size:14px; }
  .topbar{ font-size:11px; }
  .logoicon{ height:44px !important; width:44px !important; }
  .logotext{ height:26px !important; }
  .topmenuul li{ padding:0 13px; font-size:14px; }
  .logodiv img{ height:200px !important; }
}
@media (max-width: 560px)
{
  .webroot, .webroot2{ padding-left:12px; padding-right:12px; }
  .logodiv img{ height:170px !important; }
  .topmenuul li{ padding:0 10px; }
}