/* ═══════════════════════════════════════════════
   雾山 · 移动端自适应覆盖层
   目标：手机端可读、可滚、可缩放，不裁字
   ═══════════════════════════════════════════════ */

/* 1. 全局：允许纵向滚动，禁止横向溢出 */
html, body {
  max-width: 100vw;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 2. 所有容器：不超出视口 */
@media (max-width: 900px) {
  * { max-width: 100%; }
  img, video, canvas, svg { max-width: 100% !important; height: auto !important; }

  /* 固定宽度的容器改为流式 */
  [class*="wrap"], [class*="Wrap"], [class*="in"], [class*="In"],
  [class*="box"], [class*="Box"], [class*="main"], [class*="Main"] {
    max-width: 100% !important;
  }

  /* 表格允许横向滚动，不撑破页面 */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 长串不换行内容（URL、ID）强制断行 */
  * { overflow-wrap: break-word; word-break: break-word; }
}

/* 3. 手机竖屏（<=640px）：字体与间距收紧 */
@media (max-width: 640px) {
  html { font-size: 15px; }
  body { font-size: 15px !important; line-height: 1.75 !important; }

  /* 标题不超出 */
  h1 { font-size: 1.5rem !important; line-height: 1.4 !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }

  /* 固定像素宽度的元素改为百分比 */
  [style*="width:1400"], [style*="width:1200"], [style*="width:1100"],
  [style*="width:1000"], [style*="width: 1400"], [style*="width: 1200"] {
    width: 100% !important;
  }

  /* 内边距收紧，给内容留空间 */
  [class*="wrap"], [class*="Wrap"] { padding-left: 14px !important; padding-right: 14px !important; }

  /* 弹窗全屏化 */
  [class*="mask"] > *, [class*="Mask"] > *,
  [class*="modal"], [class*="Modal"], [class*="dialog"], [class*="Dialog"] {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
  }
}

/* 4. 触摸设备：加大可点区域，禁用 hover 粘滞 */
@media (hover: none) and (pointer: coarse) {
  button, a, [onclick], input[type="button"], input[type="submit"],
  [class*="btn"], [class*="Btn"], [class*="tab"], [class*="Tab"],
  [class*="opt"], [class*="Opt"], [class*="card"], [class*="Card"] {
    min-height: 40px;
    -webkit-tap-highlight-color: transparent;
  }
  input, textarea, select { font-size: 16px !important; } /* 防 iOS 缩放 */
}

/* 5. 允许双指缩放与滚动（覆盖页面里 user-scalable=no 的副作用） */
@media (max-width: 900px) {
  body { touch-action: pan-y pinch-zoom; }
}

/* 6. 安全区（刘海屏） */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  [class*="foot"], [class*="Foot"], [class*="bar"], [class*="Bar"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
  }
}


/* ═══════════════════════════════════════════════
   页面级补丁：实测发现的溢出
   ═══════════════════════════════════════════════ */

/* luoxi.html：报纸版面的固定宽度容器在手机上撑破 */
@media (max-width: 640px) {
  .paper, .pageSide, .listSide, .listHead, .dirList, .dirItem,
  .group, .footNote, .latest, .topIn, .masthead, .lead, .grid2, .miniArt {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .paper { padding: 0 !important; margin: 0 !important; }
  .pageSide, .listSide { padding-left: 0 !important; padding-right: 0 !important; border-left: none !important; }
}

/* 所有页面：防止 box-sizing 缺失导致 padding 撑破 */
@media (max-width: 900px) {
  *, *::before, *::after { box-sizing: border-box; }
}


/* ═══════════════════════════════════════════════
   窄屏（<=400px）导航与标签溢出补丁
   ═══════════════════════════════════════════════ */
@media (max-width: 400px) {
  /* 导航栏允许横向滚动而不是撑破页面 */
  nav, [class*="nav"], [class*="Nav"], [class*="tab"], [class*="Tab"],
  [class*="menu"], [class*="Menu"], [class*="bar"], [class*="Bar"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav::-webkit-scrollbar, [class*="nav"]::-webkit-scrollbar,
  [class*="tab"]::-webkit-scrollbar { display: none; }

  /* 导航项不换行、可收缩 */
  nav > *, [class*="nav"] > *, [class*="tab"] > * {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    white-space: nowrap;
  }

  /* 顶部工具条文字缩小 */
  [class*="tbar"], [class*="topbar"], [class*="topIn"] { font-size: 12px !important; }

  /* 链接强制不超出 */
  a { max-width: 100%; }
}


/* ═══════════════════════════════════════════════
   终极保险：<=400px 时兜底裁切横向溢出
   不影响功能，仅防止页面被撑出横向滚动
   ═══════════════════════════════════════════════ */
@media (max-width: 400px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* 表格彻底改为流式 */
  table, thead, tbody, tr, td, th {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  thead { display: none; }   /* 表头在窄屏隐藏，单元格自带标签语义 */
  th, td {
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    padding: 8px 10px !important;
  }

  /* 行内图标/徽章类不撑宽 */
  span[class*="ic"], span[class*="Ic"], i, em, b {
    max-width: 100%;
  }

  /* 任何绝对定位且超出右侧的装饰元素裁掉 */
  body > * { max-width: 100vw; }
}