/* ==========================================================================
   rmjkol / enhance.css —— 人民健康在线 视觉增强层（2026-10-31）
   --------------------------------------------------------------------------
   定位：**只做覆盖，不改原文件**。
     base.css / header.css / footer.css / newindex.css / list.css / detail.css
     都是「线上原样取回」的基线，一个字符都不动；本文件在它们**之后**加载，
     用同等或更高优先级的选择器做视觉升级。

   回滚方式：把 layout.ejs 里引用本文件的那一行删掉，站点立即回到改造前。

   改造目标（老板 2026-10-31 要求）：
     1. 增强用户体验感：移动端可用（原版固定 1200px，手机上是横向裁切的）、
        正文更好读、交互有反馈
     2. 更美观：白卡片 + 圆角 + 轻阴影 + 留白，向 /privacy、/report 那套
        现代页面的视觉语言靠拢（那两页用主站 layout，本站首页用老骨架，原本割裂）
     3. 保持绿色主题：#1DB676 系不动，只是把红色 hover 之类的残留清掉
     4. 补齐合规入口：隐私政策 / 不良信息反馈 / 免责声明

   设计变量：老骨架没有 CSS 变量（它不引 site.css），所以在这里自己定义。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
body[data-site="rmjkol"] {
  --rk: #1db676;              /* 主色，取自线上 newindex.css，出现 7 次 */
  --rk-dark: #12805a;         /* 深绿：hover / 小字，保证白底对比度 */
  --rk-deep: #0d5f43;         /* 最深：页头 */
  --rk-soft: #eafaf3;         /* 浅绿底 */
  --rk-line: #d8f0e5;         /* 浅绿描边 */
  --rk-ink: #1c2f27;          /* 标题字 */
  --rk-text: #3d514a;         /* 正文字 */
  --rk-mute: #86988f;         /* 辅助字 */
  --rk-bg: #f4faf7;           /* 页面底 */
  --rk-card: #ffffff;
  --rk-radius: 14px;
  --rk-radius-sm: 10px;
  --rk-shadow: 0 1px 3px rgba(18, 128, 90, .05), 0 6px 18px rgba(18, 128, 90, .04);
  --rk-shadow-hover: 0 10px 30px rgba(18, 128, 90, .13);
  --rk-ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   2. 全局
   -------------------------------------------------------------------------- */
body[data-site="rmjkol"] {
  background: var(--rk-bg);
  color: var(--rk-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 兜底：某些老块（如 .mainNews .hotNews a）是 width:100% + 左右 padding 的写法，
     不统一 border-box 就会比父容器宽出 padding 那几十像素，手机上是横向裁切。 */
  overflow-x: hidden;
}

/* 统一盒模型：老骨架有一部分元素按 content-box 写宽度 + padding，
   在 1200px 固定宽下不显，一进窄屏就溢出。 */
body[data-site="rmjkol"] *,
body[data-site="rmjkol"] *::before,
body[data-site="rmjkol"] *::after {
  box-sizing: border-box;
}

body[data-site="rmjkol"] a {
  transition: color .18s var(--rk-ease), background-color .18s var(--rk-ease);
}

/* base.css 里 a:hover 是主站沿用下来的红色 #C81623，绿色站上必须改掉 */
body[data-site="rmjkol"] a:hover {
  color: var(--rk);
}

body[data-site="rmjkol"] ::selection {
  background: var(--rk-soft);
  color: var(--rk-dark);
}

/* 容器：底子是死宽 1200px，这里放宽到可收缩，窄屏不再横向裁切 */
body[data-site="rmjkol"] .container {
  width: 1200px;
  max-width: 100%;
  box-sizing: border-box;
}

/* 图片兜底：src 为空时浏览器会画一个破图图标，比不显示更难看 */
body[data-site="rmjkol"] img[src=""],
body[data-site="rmjkol"] img:not([src]) {
  visibility: hidden;
}

/* 空图位直接不占高，避免灰色空框 */
body[data-site="rmjkol"] .imgBox img[src=""],
body[data-site="rmjkol"] .imgBox img:not([src]) {
  display: none;
}

/* --------------------------------------------------------------------------
   3. 头部
   -------------------------------------------------------------------------- */
body[data-site="rmjkol"] .searchBox {
  background: linear-gradient(135deg, #0f3b2c 0%, #123f2f 45%, #0b2f23 100%);
  padding: 18px 0;
  position: relative;
}

/* 顶部一条极细的高光，让深色块不至于死板 */
body[data-site="rmjkol"] .searchBox::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rk), transparent);
  opacity: .55;
}

body[data-site="rmjkol"] .searchBox .logo {
  height: 60px;
  width: auto;
  transition: transform .25s var(--rk-ease);
}

body[data-site="rmjkol"] .searchBox .logo:hover {
  transform: translateY(-1px) scale(1.015);
}

body[data-site="rmjkol"] .searchBox .search input {
  width: 340px;
  height: 44px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  color: #fff;
  font-size: 14px;
  padding: 0 52px 0 20px;
  box-sizing: border-box;
  transition: background-color .2s var(--rk-ease), border-color .2s var(--rk-ease),
              box-shadow .2s var(--rk-ease), width .25s var(--rk-ease);
}

body[data-site="rmjkol"] .searchBox .search input::placeholder {
  color: rgba(255, 255, 255, .5);
}

body[data-site="rmjkol"] .searchBox .search input:focus {
  background: rgba(255, 255, 255, .16);
  border-color: var(--rk);
  box-shadow: 0 0 0 4px rgba(29, 182, 118, .18);
  outline: none;
}

body[data-site="rmjkol"] .searchBox .search .iconfont {
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  font-size: 17px;
  color: #fff;
  background: var(--rk);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s var(--rk-ease), transform .2s var(--rk-ease);
}

body[data-site="rmjkol"] .searchBox .search .iconfont:hover {
  background: #22cd86;
  transform: translateY(-50%) scale(1.06);
}

/* 导航：吸顶 + 当前项高亮 + hover 有下沉感 */
body[data-site="rmjkol"] header .nav {
  background: var(--rk);
  position: sticky;
  top: 0;
  z-index: 90;
  box-shadow: 0 2px 12px rgba(18, 128, 90, .12);
}

body[data-site="rmjkol"] header .nav .container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

body[data-site="rmjkol"] header .nav a {
  flex: 1;
  line-height: 56px;
  color: #fff;
  text-align: center;
  font-size: 16px;
  letter-spacing: .5px;
  position: relative;
  transition: background-color .2s var(--rk-ease);
}

/* 当前栏目：底部白色短条 */
body[data-site="rmjkol"] header .nav a.cur {
  background: rgba(0, 0, 0, .10);
  font-weight: 600;
}

body[data-site="rmjkol"] header .nav a.cur::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  transform: translateX(-50%);
}

body[data-site="rmjkol"] header .nav a:hover {
  background-color: var(--rk-dark);
}

/* --------------------------------------------------------------------------
   4. 区块通用
   -------------------------------------------------------------------------- */
body[data-site="rmjkol"] .classifyBox {
  margin-top: 34px;
}

/* 标题：30px → 22px，左侧竖条建立层级，图标退为辅助 */
body[data-site="rmjkol"] .classifyBox .title {
  color: var(--rk-ink);
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 16px;
  letter-spacing: .5px;
}

body[data-site="rmjkol"] .classifyBox .title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--rk), #7ee0b7);
}

body[data-site="rmjkol"] .classifyBox .title .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  opacity: .8;
}

body[data-site="rmjkol"] .classifyBox .title span {
  line-height: 1.4;
}

/* 栏目条：蓝线 #0066EB 是主站残留，改绿；加圆角与 hover */
body[data-site="rmjkol"] .classifyBox .classifyNav {
  background: var(--rk-soft);
  border-top: none;
  border-radius: var(--rk-radius-sm);
  padding: 0;
  margin-top: 14px;
  margin-bottom: 18px;
  justify-content: flex-start;
  overflow: hidden;
  border: 1px solid var(--rk-line);
}

body[data-site="rmjkol"] .classifyBox .classifyNav .navItem {
  width: auto;
  flex: 1;
  font-size: 15px;
  border-right: 1px solid rgba(29, 182, 118, .16);
  font-weight: 400;
}

body[data-site="rmjkol"] .classifyBox .classifyNav .navItem a {
  display: block;
  line-height: 46px;
  color: var(--rk-dark);
  transition: background-color .18s var(--rk-ease), color .18s var(--rk-ease);
}

body[data-site="rmjkol"] .classifyBox .classifyNav .navItem:hover {
  background: var(--rk);
}

body[data-site="rmjkol"] .classifyBox .classifyNav .navItem:hover a {
  color: #fff;
}

/* 纯文字列表：hover 浅绿底 + 文字变绿 */
body[data-site="rmjkol"] .articleList li {
  padding: 7px 10px 7px 20px;
  border-radius: 8px;
  transition: background-color .18s var(--rk-ease);
}

body[data-site="rmjkol"] .articleList li::before {
  width: 5px;
  height: 5px;
  left: 7px;
  top: 20px;
  background: var(--rk);
  opacity: .55;
  transition: opacity .18s var(--rk-ease), transform .18s var(--rk-ease);
}

body[data-site="rmjkol"] .articleList li:hover {
  background: var(--rk-soft);
}

body[data-site="rmjkol"] .articleList li:hover::before {
  opacity: 1;
  transform: scale(1.3);
}

body[data-site="rmjkol"] .articleList li a {
  color: var(--rk-text);
  font-size: 14px;
  line-height: 26px;
}

body[data-site="rmjkol"] .articleList li:hover a {
  color: var(--rk-dark);
}

/* 序号榜 */
body[data-site="rmjkol"] .newsList li {
  padding: 11px 8px;
  border-radius: 8px;
  transition: background-color .18s var(--rk-ease);
}

body[data-site="rmjkol"] .newsList li:hover {
  background: var(--rk-soft);
}

body[data-site="rmjkol"] .newsList li span {
  color: var(--rk);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  margin-right: 12px;
}

body[data-site="rmjkol"] .newsList li a {
  color: var(--rk-text);
}

body[data-site="rmjkol"] .newsList li:hover a {
  color: var(--rk-dark);
}

/* 区块内二级标题（热门文章 / 专题 / 养生常识 等）：统一绿色下划线 */
body[data-site="rmjkol"] .hotNews .hotTitle,
body[data-site="rmjkol"] .specialNews .specialTitle,
body[data-site="rmjkol"] .commonSense .commonSenseTitle,
body[data-site="rmjkol"] .preferList .preferTitle {
  color: var(--rk-ink);
  font-size: 17px;
  font-weight: 600;
  border-bottom: 1px solid var(--rk-line);
  padding-bottom: 12px;
}

body[data-site="rmjkol"] .hotNews .hotTitle::before,
body[data-site="rmjkol"] .specialNews .specialTitle::before,
body[data-site="rmjkol"] .commonSense .commonSenseTitle::before,
body[data-site="rmjkol"] .preferList .preferTitle::before {
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--rk);
  bottom: -1px;
}

/* 图文卡：圆角 + 悬停放大遮罩 */
body[data-site="rmjkol"] .imgBox {
  border-radius: var(--rk-radius-sm);
  overflow: hidden;
  position: relative;
  box-shadow: var(--rk-shadow);
}

body[data-site="rmjkol"] .imgBox img {
  transition: transform .45s var(--rk-ease);
}

body[data-site="rmjkol"] .imgBox:hover img {
  transform: scale(1.04);
}

body[data-site="rmjkol"] .imgTitle {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 32, 20, .78));
  font-size: 14px;
  padding: 14px 12px 10px;
  line-height: 1.5;
}

/* 图片不可用（无封面 / 外链失效）时的降级：浅绿文字卡，而不是破图灰框 */
body[data-site="rmjkol"] .imgBox.no-img {
  background: var(--rk-soft);
  border: 1px solid var(--rk-line);
  box-shadow: none;
}

body[data-site="rmjkol"] .imgBox.no-img .imgTitle {
  position: static;
  background: none;
  padding: 18px 16px;
  text-align: left;
}

body[data-site="rmjkol"] .imgBox.no-img .imgTitle a,
body[data-site="rmjkol"] .imgBox.no-img .imgTitle a.text-white {
  color: var(--rk-dark) !important;
  font-size: 14px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   5. 首页首屏
   -------------------------------------------------------------------------- */
body[data-site="rmjkol"] .mainNews {
  margin-top: 26px;
}

body[data-site="rmjkol"] .mainNews .swiper-container {
  border-radius: var(--rk-radius);
  box-shadow: var(--rk-shadow);
}

body[data-site="rmjkol"] .mainNews .swiper-container .newsTitle {
  font-size: 19px;
  font-weight: 500;
  padding: 44px 26px 20px;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 26, 16, .82));
}

body[data-site="rmjkol"] .mainNews .mainArticle {
  background: var(--rk-card);
  border-radius: var(--rk-radius);
  box-shadow: var(--rk-shadow);
  padding: 20px 22px;
}

body[data-site="rmjkol"] .mainNews .mainArticle li {
  height: 29px;
}

body[data-site="rmjkol"] .mainNews .mainArticle li::before {
  top: 12px;
  background: var(--rk);
}

body[data-site="rmjkol"] .mainNews .mainArticle a {
  color: var(--rk-text);
  line-height: 29px;
}

body[data-site="rmjkol"] .mainNews .mainArticle a:hover {
  color: var(--rk);
}

/* 热门新闻条：原版 hotNewsTitle 是 absolute + 容器 padding-left:120px，
   条数或标题长度一变就互相压字（实测已重叠）。这里改成纯 flex 水槽布局。 */
body[data-site="rmjkol"] .mainNews .hotNews {
  background: var(--rk-soft);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-sm);
  height: 46px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
}

body[data-site="rmjkol"] .mainNews .hotNews .hotNewsTitle {
  position: static;
  flex: 0 0 auto;
  width: auto;
  height: 46px;
  line-height: 46px;
  padding: 0 18px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 1px;
  background: var(--rk);
  color: #fff;
  border-radius: 0;
  white-space: nowrap;
}

body[data-site="rmjkol"] .mainNews .hotNews a {
  flex: 1 1 0;
  min-width: 0;
  line-height: 46px;
  font-size: 13px;
  color: var(--rk-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0;
}

body[data-site="rmjkol"] .mainNews .hotNews a:last-child {
  margin-right: 18px;
}

/* 育儿块的小轮播 */
body[data-site="rmjkol"] .child .swiperBox .child-swiper {
  border-radius: var(--rk-radius-sm);
  overflow: hidden;
  box-shadow: var(--rk-shadow);
}

/* 「专题」灰底块 */
body[data-site="rmjkol"] .child .specialNews {
  background: var(--rk-card);
  border-radius: var(--rk-radius-sm);
  box-shadow: var(--rk-shadow);
  padding: 18px;
  box-sizing: border-box;
}

/* 「热门文章」序号榜 */
body[data-site="rmjkol"] .healthy .hotNews {
  background: var(--rk-card);
  border-radius: var(--rk-radius-sm);
  box-shadow: var(--rk-shadow);
  padding: 18px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   6. 健康百科
   -------------------------------------------------------------------------- */
body[data-site="rmjkol"] .Encyclopedias .navBox {
  width: 32%;
  background: var(--rk-card);
  border-radius: var(--rk-radius-sm);
  box-shadow: var(--rk-shadow);
  padding: 18px;
  box-sizing: border-box;
  transition: box-shadow .25s var(--rk-ease), transform .25s var(--rk-ease);
}

body[data-site="rmjkol"] .Encyclopedias .navBox:hover {
  box-shadow: var(--rk-shadow-hover);
  transform: translateY(-2px);
}

body[data-site="rmjkol"] .Encyclopedias .navTitle {
  color: var(--rk-ink);
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--rk-line);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

body[data-site="rmjkol"] .Encyclopedias .navTitle::before {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--rk);
  bottom: -1px;
}

body[data-site="rmjkol"] .Encyclopedias .navLink a {
  color: var(--rk-text);
  font-size: 13px;
  line-height: 26px;
  border-radius: 6px;
  padding: 0 4px;
}

body[data-site="rmjkol"] .Encyclopedias .navLink a:hover {
  color: var(--rk-dark);
  background: var(--rk-soft);
}

/* --------------------------------------------------------------------------
   7. 详情页
   -------------------------------------------------------------------------- */
body[data-site="rmjkol"] .content {
  background: var(--rk-card);
  border-radius: var(--rk-radius);
  box-shadow: var(--rk-shadow);
  padding: 34px 38px 30px;
  box-sizing: border-box;
}

body[data-site="rmjkol"] .content .contentTitle {
  font-size: 27px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--rk-ink);
  padding-bottom: 4px;
  letter-spacing: .3px;
}

body[data-site="rmjkol"] .content .contentInfo {
  border-top: 1px solid var(--rk-line);
  border-bottom: 1px solid var(--rk-line);
  padding: 14px 0;
  margin-top: 14px;
}

body[data-site="rmjkol"] .content .contentInfo .source {
  font-size: 12.5px;
  color: var(--rk-mute);
  line-height: 2;
}

body[data-site="rmjkol"] .content .contentInfo .time {
  color: var(--rk-mute);
}

body[data-site="rmjkol"] .content .contentInfo a.text-secondary {
  color: var(--rk-dark);
}

/* 正文：14px/1.5 → 16px/1.9，长文可读性差别很大 */
body[data-site="rmjkol"] .content .contentTxt {
  font-size: 16px;
  line-height: 1.95;
  color: var(--rk-text);
  padding-top: 8px;
  word-break: break-word;
}

body[data-site="rmjkol"] .content .contentTxt p {
  margin-bottom: 1.15em;
  text-indent: 0;
}

body[data-site="rmjkol"] .content .contentTxt span {
  display: inline;
}

body[data-site="rmjkol"] .content .contentTxt img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.4em auto;
  border-radius: 10px;
  box-shadow: var(--rk-shadow);
}

body[data-site="rmjkol"] .content .contentTxt h1,
body[data-site="rmjkol"] .content .contentTxt h2,
body[data-site="rmjkol"] .content .contentTxt h3 {
  color: var(--rk-ink);
  font-weight: 600;
  line-height: 1.5;
  margin: 1.6em 0 .8em;
  padding-left: 12px;
  border-left: 3px solid var(--rk);
  font-size: 18px;
}

body[data-site="rmjkol"] .content .contentTxt blockquote {
  margin: 1.2em 0;
  padding: 14px 18px;
  background: var(--rk-soft);
  border-left: 3px solid var(--rk);
  border-radius: 0 8px 8px 0;
  color: var(--rk-dark);
}

body[data-site="rmjkol"] .content .contentTxt table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 14px;
}

body[data-site="rmjkol"] .content .contentTxt td,
body[data-site="rmjkol"] .content .contentTxt th {
  border: 1px solid var(--rk-line);
  padding: 10px 12px;
}

body[data-site="rmjkol"] .content .contentTxt th {
  background: var(--rk-soft);
  color: var(--rk-dark);
}

/* 正文内链：默认下划线，避免和正文糊在一起 */
body[data-site="rmjkol"] .content .contentTxt a {
  color: var(--rk-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rk-line);
}

body[data-site="rmjkol"] .content .contentTxt a:hover {
  text-decoration-color: var(--rk);
}

/* 免责声明：原来只是浅灰 #FAFAFA 一块，不醒目。改成带绿条的浅绿卡片 */
body[data-site="rmjkol"] .content .statement {
  background: var(--rk-soft);
  border: 1px solid var(--rk-line);
  border-left: 4px solid var(--rk);
  border-radius: 0 var(--rk-radius-sm) var(--rk-radius-sm) 0;
  padding: 18px 22px;
  margin: 32px 0 0;
}

body[data-site="rmjkol"] .content .statement > span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--rk-dark);
  margin-bottom: 8px;
  letter-spacing: .5px;
}

body[data-site="rmjkol"] .content .statement p {
  font-size: 12.5px;
  line-height: 1.95;
  color: #5b6f67;
  margin: 0;
}

/* 举报入口：正文末尾，紧挨免责声明 */
body[data-site="rmjkol"] .content .reportEntry {
  margin-top: 16px;
  padding: 14px 20px;
  background: #fffaf2;
  border: 1px solid #ffe6c2;
  border-radius: var(--rk-radius-sm);
  font-size: 13px;
  color: #8a6d3b;
  line-height: 1.9;
}

body[data-site="rmjkol"] .content .reportEntry a {
  color: #c47c14;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-site="rmjkol"] .content .reportEntry a:hover {
  color: #a96508;
}

/* --------------------------------------------------------------------------
   上一篇 / 下一篇（模板里 .pnNav）
   --------------------------------------------------------------------------
   控制器传的是 prevNews / nextNews（同平台 + 同 type + createdAt 相邻）。
   用 flex:1 自适应：两边都有就各占一半，只有一边就独占整行。
   不补空占位 —— 补了会在旁边留一片空白，像页面少了一块。
   -------------------------------------------------------------------------- */
body[data-site="rmjkol"] .content .pnNav {
  display: flex;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rk-line);
}

body[data-site="rmjkol"] .content .pnNav .pnItem {
  display: flex;
  flex: 1 1 0;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--rk-text);
  background: var(--rk-soft);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-sm);
  transition: color .2s var(--rk-ease), background .2s var(--rk-ease),
              border-color .2s var(--rk-ease), box-shadow .2s var(--rk-ease),
              transform .2s var(--rk-ease);
}

body[data-site="rmjkol"] .content .pnNav a.pnItem:hover {
  color: var(--rk-dark);
  background: #fff;
  border-color: #bfe8d6;
  box-shadow: var(--rk-shadow-hover);
  transform: translateY(-1px);
}

body[data-site="rmjkol"] .content .pnNav .pnItem i {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 12px;
  color: var(--rk-mute);
}

body[data-site="rmjkol"] .content .pnNav a.pnItem:hover i {
  color: var(--rk);
}

/* 标题单行截断：左右各约 400px，长标题不裁会把卡片撑高且左右不齐 */
body[data-site="rmjkol"] .content .pnNav .pnItem span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-site="rmjkol"] .content .pnNav a.pnItem:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 窄屏：并排两栏每栏太窄，改上下堆叠 */
@media (max-width: 640px) {
  body[data-site="rmjkol"] .content .pnNav {
    flex-direction: column;
    gap: 10px;
  }
}

/* 面包屑 */
body[data-site="rmjkol"] .crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--rk-mute);
  margin-bottom: 14px;
}

body[data-site="rmjkol"] .crumb a {
  color: var(--rk-mute);
}

body[data-site="rmjkol"] .crumb a:hover {
  color: var(--rk);
}

body[data-site="rmjkol"] .crumb i {
  font-style: normal;
  opacity: .5;
}

/* 右栏卡片化 */
body[data-site="rmjkol"] .rightBox > div {
  background: var(--rk-card);
  border-radius: var(--rk-radius);
  box-shadow: var(--rk-shadow);
  padding: 20px;
  box-sizing: border-box;
}

body[data-site="rmjkol"] .rightBox .hotNews {
  width: 340px;
  margin-top: 0;
  margin-bottom: 16px;
}

body[data-site="rmjkol"] .rightBox .preferList {
  background: var(--rk-card);
  width: 340px;
  margin-top: 0;
}

/* 相关文章 */
body[data-site="rmjkol"] .relevantList {
  margin-top: 34px;
}

body[data-site="rmjkol"] .relevantList .relevantTitle {
  font-size: 20px;
  font-weight: 600;
  color: var(--rk-ink);
  border-bottom: 2px solid var(--rk-line);
  padding-bottom: 14px;
  position: relative;
}

body[data-site="rmjkol"] .relevantList .relevantTitle::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: var(--rk);
  border-radius: 2px;
}

body[data-site="rmjkol"] .relevantList .relevantItem {
  background: var(--rk-card);
  border-radius: var(--rk-radius-sm);
  box-shadow: var(--rk-shadow);
  padding: 12px;
  box-sizing: border-box;
  width: 48.5%;
  transition: box-shadow .25s var(--rk-ease), transform .25s var(--rk-ease);
}

body[data-site="rmjkol"] .relevantList .relevantItem:hover {
  box-shadow: var(--rk-shadow-hover);
  transform: translateY(-2px);
}

body[data-site="rmjkol"] .relevantList .relevantItem img {
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
}

body[data-site="rmjkol"] .relevantList .relevantItem .itemTitle a {
  color: var(--rk-ink);
  line-height: 1.55;
  font-size: 15px;
}

body[data-site="rmjkol"] .relevantList .relevantItem:hover .itemTitle a {
  color: var(--rk);
}

/* --------------------------------------------------------------------------
   8. 页脚
   -------------------------------------------------------------------------- */
body[data-site="rmjkol"] footer {
  background: linear-gradient(180deg, #ffffff 0%, #f1f9f5 100%);
  border-top: 1px solid var(--rk-line);
  margin-top: 56px;
  padding: 36px 0 26px;
}

body[data-site="rmjkol"] footer .linkFriend {
  text-align: left;
  border-bottom: 1px solid var(--rk-line);
  padding-bottom: 22px;
}

body[data-site="rmjkol"] footer .linkFriend .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--rk-ink);
  margin-bottom: 14px;
}

body[data-site="rmjkol"] footer .linkFriend .friendNav {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 0;
}

body[data-site="rmjkol"] footer .linkFriend .friendNav a {
  color: var(--rk-mute);
  font-size: 13px;
  margin-right: 18px;
}

body[data-site="rmjkol"] footer .linkFriend .friendNav a:hover {
  color: var(--rk);
}

/* 站内合规导航：浅绿药丸按钮，隐私协议/举报一眼可见 */
body[data-site="rmjkol"] footer .navLink {
  margin-top: 22px;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-site="rmjkol"] footer .navLink a {
  display: inline-block;
  margin-right: 0;
  padding: 7px 16px;
  font-size: 13px;
  color: var(--rk-dark);
  background: #fff;
  border: 1px solid var(--rk-line);
  border-radius: 999px;
  transition: all .18s var(--rk-ease);
}

body[data-site="rmjkol"] footer .navLink a:hover {
  color: #fff;
  background: var(--rk);
  border-color: var(--rk);
  transform: translateY(-1px);
}

/* 重点合规入口（举报）用主色实心 */
body[data-site="rmjkol"] footer .navLink a.is-key {
  color: #fff;
  background: var(--rk);
  border-color: var(--rk);
}

body[data-site="rmjkol"] footer .navLink a.is-key:hover {
  background: var(--rk-dark);
  border-color: var(--rk-dark);
}

body[data-site="rmjkol"] footer .copyRight {
  text-align: left;
  color: var(--rk-mute);
  font-size: 12.5px;
  line-height: 2;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rk-line);
}

body[data-site="rmjkol"] footer .copyRight a {
  color: var(--rk-mute);
}

body[data-site="rmjkol"] footer .copyRight a:hover {
  color: var(--rk);
}

/* --------------------------------------------------------------------------
   9. 悬浮工具条（返回顶部 / 举报）
   -------------------------------------------------------------------------- */
.rk-float {
  position: fixed;
  right: 22px;
  bottom: 88px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rk-float a,
.rk-float button {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--rk-line);
  box-shadow: 0 4px 16px rgba(18, 128, 90, .12);
  color: var(--rk-dark);
  font-size: 12px;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  transition: all .2s var(--rk-ease);
  font-family: inherit;
  padding: 0;
}

.rk-float a:hover,
.rk-float button:hover {
  background: var(--rk);
  border-color: var(--rk);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(18, 128, 90, .22);
}

.rk-float .rk-top {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

.rk-float .rk-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   10. 响应式
   -------------------------------------------------------------------------- */

/* 10.1 平板：容器收窄 */
@media (max-width: 1240px) {
  body[data-site="rmjkol"] .container {
    width: auto;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* 10.2 首屏两栏、详情两栏 → 单栏 */
@media (max-width: 1080px) {
  /* 保险：导航容器带 flex 类，任何断点下都不允许被竖排规则带走 */
  body[data-site="rmjkol"] header .nav .container,
  body[data-site="rmjkol"] header .nav .container.flex {
    flex-direction: row;
  }

  body[data-site="rmjkol"] .mainNews .swiper-container {
    width: 62%;
    height: 360px;
  }

  body[data-site="rmjkol"] .mainNews .mainArticle {
    width: 36%;
    height: 360px;
    padding: 16px 18px;
  }

  body[data-site="rmjkol"] .content {
    width: 100%;
    padding: 26px 26px 24px;
  }

  /* 详情页主体竖排：只认 detail-wrap，不要写成 .container.flex ——
     导航容器同样是 container flex，会跟着竖排（实测过）。 */
  body[data-site="rmjkol"] .detail-wrap {
    flex-direction: column;
    gap: 22px;
  }

  body[data-site="rmjkol"] .rightBox,
  body[data-site="rmjkol"] .rightBox .hotNews,
  body[data-site="rmjkol"] .rightBox .preferList {
    width: 100%;
  }

  body[data-site="rmjkol"] .rightBox {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }

  body[data-site="rmjkol"] .rightBox > div {
    flex: 1 1 320px;
  }

  body[data-site="rmjkol"] .relevantList .relevantItem {
    width: 100%;
  }
}

/* 10.3 手机：全部单列，字号收敛 */
@media (max-width: 820px) {
  body[data-site="rmjkol"] .searchBox {
    padding: 12px 0;
  }

  body[data-site="rmjkol"] .searchBox .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  body[data-site="rmjkol"] .searchBox .logo {
    height: 44px;
  }

  body[data-site="rmjkol"] .searchBox .search {
    width: 100%;
  }

  body[data-site="rmjkol"] .searchBox .search input {
    width: 100%;
    height: 40px;
  }

  /* 导航横向滚动，不再挤成一团被裁切 */
  body[data-site="rmjkol"] header .nav {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body[data-site="rmjkol"] header .nav .container {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  body[data-site="rmjkol"] header .nav a {
    flex: 0 0 auto;
    padding: 0 20px;
    line-height: 46px;
    font-size: 15px;
    white-space: nowrap;
  }

  body[data-site="rmjkol"] header .nav a.cur::after {
    bottom: 7px;
  }

  /* 首屏：轮播 + 列表竖排 */
  body[data-site="rmjkol"] .mainNews {
    margin-top: 16px;
  }

  body[data-site="rmjkol"] .mainNews .flex {
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 100%;
  }

  /* 这里必须 !important：1060 断点那组 .mainNews .mainArticle 是 36% 宽，
     同为 body[data-site] 前缀、同优先级，靠书写顺序覆盖不够稳；
     而 swiper 原值是死宽 774px，一旦哪个环节没被覆盖住就整体横向溢出。 */
  body[data-site="rmjkol"] .mainNews .swiper-container,
  body[data-site="rmjkol"] .mainNews .mainArticle {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-site="rmjkol"] .mainNews .swiper-container {
    height: 220px;
  }

  /* 关键：柱向 flex 容器的宽度会被「有固有宽度的子项」撑开。
     轮播图原始位图比手机屏幕宽，不约束尺寸就会把 .flex 撑到 774px，
     连带下面的列表卡片也变成 774 宽 —— 表现就是「文字顶出屏幕右侧」。
     给 img 钉死 100% + object-fit，容器宽度才收得住。 */
  body[data-site="rmjkol"] .mainNews .swiper-container .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  body[data-site="rmjkol"] .mainNews .flex {
    min-width: 0;
  }

  body[data-site="rmjkol"] .mainNews .mainArticle {
    height: auto;
    padding: 14px 16px;
    /* 硬兜底：无论内部 li 为什么算宽了，卡片自身裁切住，
       绝不允许文字顶到屏幕右边缘（改造前就是这个毛病）。 */
    overflow: hidden;
  }

  /* 列表项自身再兜一层：老样式只在 li 上做 ellipsis，
     li 宽度一旦被撑开，省略号就永远不出现，文字直接顶出卡片。 */
  body[data-site="rmjkol"] .mainNews .mainArticle li,
  body[data-site="rmjkol"] .articleList li {
    max-width: 100%;
    overflow: hidden;
  }

  body[data-site="rmjkol"] .mainNews .mainArticle li a,
  body[data-site="rmjkol"] .articleList li a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-site="rmjkol"] .mainNews .hotNews {
    height: auto;
    flex-wrap: wrap;
    padding: 0 0 8px;
    gap: 0;
  }

  body[data-site="rmjkol"] .mainNews .hotNews .hotNewsTitle {
    width: 100%;
    height: 38px;
    line-height: 38px;
    text-align: center;
  }

  body[data-site="rmjkol"] .mainNews .hotNews a {
    flex: 1 1 100%;
    line-height: 32px;
    padding: 0 14px;
    font-size: 13px;
  }

  /* 区块 */
  body[data-site="rmjkol"] .classifyBox {
    margin-top: 26px;
  }

  body[data-site="rmjkol"] .classifyBox .title {
    font-size: 19px;
  }

  body[data-site="rmjkol"] .classifyBox .flex {
    flex-direction: column;
    gap: 14px;
  }

  body[data-site="rmjkol"] .classifyBox .flex > div,
  body[data-site="rmjkol"] .classifyBox .flex > ul {
    width: 100% !important;
  }

  body[data-site="rmjkol"] .articleList {
    width: 100% !important;
  }

  /* 栏目条：允许横向滚动，不要每项压成两字换行 */
  body[data-site="rmjkol"] .classifyBox .classifyNav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }

  body[data-site="rmjkol"] .classifyBox .classifyNav .navItem {
    flex: 0 0 auto;
    width: auto;
  }

  body[data-site="rmjkol"] .classifyBox .classifyNav .navItem a {
    padding: 0 16px;
    line-height: 42px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* 百科盒子占满整行 */
  body[data-site="rmjkol"] .Encyclopedias .navBox {
    width: 100% !important;
  }

  body[data-site="rmjkol"] .Encyclopedias .navLink a {
    width: 32%;
    font-size: 13px;
  }

  /* 详情页 */
  body[data-site="rmjkol"] .content {
    padding: 20px 18px 18px;
    border-radius: var(--rk-radius-sm);
  }

  body[data-site="rmjkol"] .content .contentTitle {
    font-size: 21px;
    line-height: 1.5;
  }

  body[data-site="rmjkol"] .content .contentTxt {
    font-size: 15.5px;
    line-height: 1.9;
  }

  body[data-site="rmjkol"] .content .contentTxt h1,
  body[data-site="rmjkol"] .content .contentTxt h2,
  body[data-site="rmjkol"] .content .contentTxt h3 {
    font-size: 17px;
  }

  body[data-site="rmjkol"] .content .statement {
    padding: 14px 16px;
    margin-top: 24px;
  }

  body[data-site="rmjkol"] .rightBox {
    display: block;
  }

  body[data-site="rmjkol"] .rightBox > div {
    margin-bottom: 14px;
  }

  body[data-site="rmjkol"] .relevantList .relevantItem {
    flex-direction: row;
  }

  body[data-site="rmjkol"] .relevantList .relevantItem img {
    width: 110px !important;
    height: 74px !important;
  }

  /* 页脚 */
  body[data-site="rmjkol"] footer {
    padding: 24px 0 20px;
    margin-top: 34px;
  }

  body[data-site="rmjkol"] footer .linkFriend .friendNav a {
    margin-right: 12px;
    font-size: 12.5px;
  }

  body[data-site="rmjkol"] footer .navLink {
    gap: 8px;
  }

  body[data-site="rmjkol"] footer .navLink a {
    padding: 6px 13px;
    font-size: 12.5px;
  }

  /* 悬浮条挪到右下角，避免挡住正文 */
  .rk-float {
    right: 12px;
    bottom: 76px;
    gap: 8px;
  }

  .rk-float a,
  .rk-float button {
    width: 40px;
    height: 40px;
    font-size: 11px;
  }
}

/* 10.4 超小屏 */
@media (max-width: 400px) {
  body[data-site="rmjkol"] .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  body[data-site="rmjkol"] .content {
    padding: 16px 14px;
  }

  body[data-site="rmjkol"] .content .contentTitle {
    font-size: 19px;
  }
}

/* 10.5 尊重系统的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  body[data-site="rmjkol"] *,
  .rk-float * {
    transition: none !important;
    animation: none !important;
  }
}

/* 移动端兜底：容器自身裁切。
   老骨架里有些块的宽度在窄屏下会算得比容器宽（实测 .mainArticle 内的
   li 文字会顶到屏幕右边缘），与其逐个猜是哪个祖先的盒模型，不如让最外层
   容器裁切住 —— 视觉上等价于「内容永不越界」，且不影响 PC 端。 */
@media (max-width: 820px) {
  body[data-site="rmjkol"] .container {
    overflow: hidden;
  }
}