/* ═══════════════════════════════════════════════════════════════════
   responsive.css —— 全站正文宽度自适应（v1，2026-10-09）
   问题：文章页容器写死 max-width:600px —— 手机端合适，笔记本/桌面端
         就是屏幕中间窄窄一条，长表格还得左右拖。
   做法：只在 ≥768px 生效的媒体查询里放宽容器宽度 + 微调正文排版；
        手机端（<768px）**完全不动**，保持原有移动端优先设计。
   回退：删掉页面里的 <link rel="stylesheet" href="/responsive.css?v=1"> 即可。
   ⚠️ 与 elearn/hydrogen/grow 三个小应用无关（那些页面不引用本文件）。
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  /* 正文容器：600 → 820（约 62–68 汉字/行，阅读舒适区） */
  main.container,
  .container {
    max-width: 820px !important;
  }
  .footer {
    max-width: 820px !important;
  }

  /* 正文排版：宽屏下字号与行距同步放大，避免"放大了容器却还是小字" */
  .content {
    font-size: 16.5px;
    line-height: 1.85;
  }
  .content p {
    margin: 12px 0;
  }
  /* 表格跟着放宽：宽表少滚动 */
  .content table {
    font-size: 14px;
  }
  .content th,
  .content td {
    padding: 9px 11px;
  }

  /* 二级标题留白加大，宽屏下层次更清楚 */
  .content h2 {
    margin-top: 40px;
  }
}

@media (min-width: 1280px) {
  main.container,
  .container,
  .footer {
    max-width: 920px !important;
  }
}