@charset "utf-8";
/* ==========================================================================
   qqgongju.com · PC 版（蓝色设计体系）移动端适配优化   v1.0   2026-09-14
   --------------------------------------------------------------------------
   适用页面
     所有使用「.topnotice / .topbar / .nav / .crumb / .block / .sp-body /
     .article」这套类名的页面 —— 首页、栏目页、文章页，以及三张手写单页：
       shengming.html（免责声明）
       tougao.html   （投稿资源）
       html/830.html （广告合作联系方式）

   安装位置
     /static/css/pc-mobile-fix.css
   引用方式
     在各页面 </head> 之前加一行（要放在页面自己的 <style> 之后）：
       <link rel="stylesheet" href="/static/css/pc-mobile-fix.css?v=20260914">

   为什么需要它（375×812 实测数据）
     1. 首屏「公告条 + 顶栏 + 主导航」共 310px，占掉整屏 38%：
          公告条  51px（文案折 2 行）
          顶栏   117px（logo 与搜索框各占一行）
          主导航 142px（9 个栏目 flex-wrap 折 3 行）
     2. 正文里内联写死的样式与设计体系互相打架：
          <h2 style="font-size:24px; color:rgb(51,51,51)">
          <p  style="font-size:16px; line-height:26px; color:rgb(51,51,51)">
          <span style="color:#0000FF">  纯蓝，设计体系是 #2563EB
          <span style="color:#FF0000">  纯红，设计体系里没有纯红
       手机上 24px 标题、16px 正文都偏大，行高 26px 又偏紧。
     3. 正文段落带 text-indent:2em，手机上平白少两个字。
     4. 页脚在 iPhone 底部 Home Indicator 区域会贴边。

   设计原则
     · 纯 CSS 覆盖层，不改 DOM、不改模板结构 —— 回退只需删掉那一行 <link>
     · 只在 ≤640px 生效，PC 端零影响
     · 关键属性一律 !important —— 页面的默认样式写在内联 <style> 里，
       而正文元素还带内联 style 属性，只有 !important 能压过去
     · 色板严格对齐站点既有令牌：#2563EB / #3B82F6 / #0F172A / #475569
   ========================================================================== */


/* ==========================================================================
   1. 顶部公告条 —— 折 2 行 → 单行省略，51px → 30px
   ========================================================================== */
@media (max-width: 640px) {
  .topnotice {
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding: 8px 14px !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topnotice b { font-weight: 600 !important; }


/* ==========================================================================
   2. 顶栏 —— logo 与搜索框改并排，117px → 58px
   ========================================================================== */
  .topbar .wrap {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center !important;
    gap: 10px !important;
    height: auto !important;
    padding: 10px 14px !important;
    flex-wrap: nowrap !important;
  }
  .topbar .brand { flex-shrink: 0 !important; }
  .site-logo img { height: 30px !important; max-width: 160px !important; }
  .top-search {
    order: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  .top-search input { padding: 0 12px !important; font-size: 13px !important; }
  .top-search button { padding: 0 16px !important; min-width: 56px !important; font-size: 13px !important; }
  /* 「本周更新 N 篇资源」在手机上纯占位，隐藏 */
  .top-stat { display: none !important; }


/* ==========================================================================
   3. 主导航 —— 折 3 行 → 单行横向滑动，142px → 56px
   ========================================================================== */
  .nav { margin-top: 10px !important; }
  .nav .wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: 46px !important;
    padding: 0 8px !important;
    gap: 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav .wrap::-webkit-scrollbar { display: none; }
  .nav a {
    flex: 0 0 auto !important;
    padding: 0 13px !important;
    height: 34px !important;
    font-size: 14px !important;
    line-height: 34px !important;
    border-radius: 8px !important;
  }


/* ==========================================================================
   4. 面包屑 —— 收紧
   ========================================================================== */
  .crumb {
    font-size: 12.5px !important;
    margin-bottom: 12px !important;
    gap: 6px !important;
  }


/* ==========================================================================
   5. 内容卡片 —— 手机上收紧内边距与圆角
   ========================================================================== */
  .block { border-radius: 14px !important; }
  .block-head { height: 50px !important; padding: 0 16px !important; }
  .block-head h1 { font-size: 18px !important; gap: 8px !important; }
  .block-head h1::before { width: 3px !important; height: 17px !important; }
  .main { margin-top: 20px !important; padding-bottom: 32px !important; }


/* ==========================================================================
   6. 正文 —— 压制内联样式，重建字号 / 行高 / 颜色层级
   --------------------------------------------------------------------------
   !important 的必要性：正文元素带内联 style 属性（如 font-size:16px），
   而样式表里的 !important 声明在内联非 !important 声明之上，是唯一手段。
   ========================================================================== */
  .sp-body,
  .article {
    font-size: 15px !important;
    line-height: 1.8 !important;
    padding: 18px 16px 24px !important;
  }

  .sp-body h1, .article h1 { font-size: 20px !important; }

  /* 单页里的 h2 被内联写死 24px + 上下 padding 30/20px + color #333；
     tougao 的 h3 内还用一个 span 画了 2px 下划线。这里统一改成「左侧色条」，
     与 /m/ 手机版皮肤、PC 站 .block-head h1::before 用同一套设计语言。 */
  .sp-body h2, .article h2,
  .sp-body h3, .article h3,
  .sp-body h4, .article h4 {
    position: relative;
    font-size: 17px !important;
    line-height: 1.5 !important;
    color: #0F172A !important;
    margin: 22px 0 10px !important;
    padding: 0 0 0 11px !important;
    border-bottom: none !important;
    border-left: none !important;
  }
  .sp-body h2::before, .article h2::before,
  .sp-body h3::before, .article h3::before,
  .sp-body h4::before, .article h4::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: .95em;
    border-radius: 2px;
    background: linear-gradient(180deg, #3B82F6, #2563EB);
  }
  /* 清掉标题里内联画的 2px 下划线，避免与左侧色条重复 */
  .sp-body h2 span[style*="border-bottom"], .sp-body h3 span[style*="border-bottom"],
  .sp-body h4 span[style*="border-bottom"], .article h2 span[style*="border-bottom"],
  .article h3 span[style*="border-bottom"] {
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .sp-body h2:first-child, .article h2:first-child,
  .sp-body h3:first-child, .article h3:first-child { margin-top: 4px !important; }

  /* 单页里的 p 被内联写死 16px / line-height 26px / color #333 */
  .sp-body p, .article p {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #475569 !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
  }

  .sp-body li, .article li {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #475569 !important;
  }
  .sp-body ul, .sp-body ol, .article ul, .article ol { padding-left: 20px !important; }

  /* 内联的纯色修正：纯蓝 → 站点蓝，纯红 → 站点蓝加粗（不再刺眼） */
  .sp-body a, .article a { color: #2563EB !important; }
  .sp-body span[style*="0000FF"], .sp-body span[style*="0000ff"],
  .sp-body span[style*="0,0,255"], .sp-body span[style*="0, 0, 255"],
  .article span[style*="0000FF"], .article span[style*="0000ff"],
  .article span[style*="0,0,255"], .article span[style*="0, 0, 255"] {
    color: #2563EB !important;
  }
  .sp-body span[style*="FF0000"], .sp-body span[style*="ff0000"],
  .sp-body span[style*="255,0,0"], .sp-body span[style*="255, 0, 0"],
  .article span[style*="FF0000"], .article span[style*="ff0000"],
  .article span[style*="255,0,0"], .article span[style*="255, 0, 0"] {
    color: #2563EB !important;
    font-weight: 600 !important;
  }
  .sp-body strong b, .sp-body b { color: inherit; }

  /* 表格在窄屏横向可滑，不撑破页面 */
  .sp-body table, .article table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    font-size: 13.5px !important;
  }

  .sp-body img, .article img { max-width: 100% !important; height: auto !important; border-radius: 10px !important; }


/* ==========================================================================
   7. 页脚 —— 收紧 + iPhone 底部安全区
   ========================================================================== */
  .footer {
    margin-top: 28px !important;
    padding: 26px 0 calc(24px + env(safe-area-inset-bottom)) !important;
  }
  .footer .wrap { gap: 12px !important; }
  .footer .fbrand img { height: 28px !important; }
  .footer .fnav { gap: 8px 16px !important; }
  .footer .fnav a { font-size: 12.5px !important; }
  .footer .copy { font-size: 12px !important; line-height: 1.75 !important; padding: 0 16px; }


/* ==========================================================================
   9. 分页条 —— 原样在窄屏会被 .block{overflow:hidden} 悄悄裁掉两端
   病因：.pager 是 flex 且子项 flex-shrink:0（9 项约 550px 宽），窄屏必然
   溢出；父级 .block 是 overflow-x:hidden，于是「首页」「末页」被直接吃掉，
   而且不产生横向滚动条 —— 用户看不出少了按钮，只当这个站就这几页。
   改法：允许换行 + 收窄按钮尺寸，全部按钮都露出来。
   ========================================================================== */
  .pager {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 2px 6px !important;
  }
  .pager > li { list-style: none !important; }
  .pager a, .pager span {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 9px !important;
    font-size: 13px !important;
    border-radius: 9px !important;
  }
}


/* ==========================================================================
   8. 小屏兜底（≤360px，如 iPhone SE / 老安卓）
   ========================================================================== */
@media (max-width: 360px) {
  .topnotice { font-size: 11.5px !important; padding: 7px 10px !important; }
  .site-logo img { height: 27px !important; }
  .nav a { padding: 0 11px !important; font-size: 13.5px !important; }
  .sp-body, .article { font-size: 14.5px !important; padding: 16px 13px 22px !important; }
  .sp-body p, .article p { font-size: 14.5px !important; }
  .sp-body h2, .article h2,
  .sp-body h3, .article h3 { font-size: 16.5px !important; }
  .crumb { font-size: 12px !important; }
}