/* 生活书房 Web 版 · 移动端适配层
 * 仅对窄屏（手机/平板竖屏等 ≤768px）生效，桌面浏览完全不受影响。
 * 目标：修复横向溢出、收紧留白、避免文字截断、适配顶部提示条。
 */
@media (max-width: 768px) {
  /* 1. 修复横向溢出（窄屏下禁止横向滚动条） */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* 2. 主内容区收紧内边距，给屏幕更多空间 */
  main > main {
    padding: 12px !important;
  }
  main header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 3. 防固定宽度元素（如 w-44 等）在窄屏溢出 */
  [class*="w-44"], [class*="w-40"], [class*="w-48"] {
    max-width: 100% !important;
  }

  /* 4. 卡片与列表文字允许折行，避免被截断 */
  main main p,
  main main span,
  main main div,
  main main li {
    overflow-wrap: break-word;
  }

  /* 5. 顶部「未配置云端同步」提示条适配窄屏 */
  div[style*="position:fixed"] {
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  /* 6. 页面根元素占满屏高（兼容移动端地址栏伸缩） */
  #root {
    min-height: 100dvh;
  }
}