/* ==========================================================
   手机版适配 CSS（仅宽度 ≤ 600px 时生效）
   电脑版样式见 style.css，本文件在其之后引入，覆盖电脑默认值
   ========================================================== */
@media (max-width: 600px) {

  /* ===== 横幅尺寸：把电脑基准值整体按比例缩小 =====
     布局结构不变（logo + 文字图 + 导航 同一行、左对齐），
     只把宽高 / 间距 / 字号一起调小，出来就是"缩小版的电脑横幅"，
     保证 375px 竖屏下三个菜单能完整显示。 */
  :root {
    --bn-h: 52px;        /* 电脑 80px 的等比缩小 */
    --bn-logo: 34px;     /* 原 42px → 缩小 */
    --bn-text: 23px;     /* 原 30px → 缩小 */
    --bn-gap: 10px;
    --bn-ml: 12px;
    --bn-nav-gap: 4px;
    --bn-item-fs: 12px;
    --bn-item-px: 8px;
    --bn-item-py: 5px;
    --bn-item-r: 5px;
    --bn-pad-x: 10px;    /* 手机端左右留白收窄，把宽度让给菜单 */
    /* 图片格子宽度 = 电脑基准值的等比缩小（42 / 89.4），保证菜单位置与缩小前完全一致 */
    --bn-logo-slot: 42px;
    --bn-text-slot: 89.4px;
    --bn-sep-gap: 21px;
    --bn-sep-h: 28px;
    /* 网址小字：手机小一档；间距也收一点（手机横幅矮） */
    --bn-url-fs: 9px;
    --bn-url-gap: 3px;
  }

  /* 转屏触发：进入手机样式时播放动画（100ms，肉眼不可见），JS 监听后刷新一次页面 */
  .rotate-trigger {
    display: block;
    animation: rotateShake 100ms;
  }

  /* 横幅：内容靠左（与电脑端一致） */
  .banner {
    justify-content: flex-start;
  }
  /* 横幅小字（网址）：手机上也留着，只是字距再收一点 */
  .banner-url {
    letter-spacing: .4px;
  }
  /* 联系管理员页（banner-sm）：手机端小横幅，上下内边距更小 */
  .banner-sm {
    padding: 6px 0 6px 12px;
    margin-top: 6px;
  }

  /* 导航条：手机端不再隐藏、也不再用底部 Tab，直接留在横幅里（与电脑端一致） */
  .nav-bar {
    display: flex;
    flex: 0 0 auto; /* 不被压缩，防止窄屏把菜单挤扁 */
  }

  /* 左右翻页箭头：手机端隐藏（手机上直接用手指左右滑动切页，箭头会挡住内容） */
  .page-arrow {
    display: none;
  }

  /* 家族谱引导页：手机端 4 列（仿小程序） */
  .page-hint {
    font-size: 12px;
    margin-bottom: 14px;
  }
  .grid {
    gap: 8px;
  }
  .grid-item {
    width: calc((100% - 3 * 8px) / 4); /* 手机端 4 列 */
    padding: 9px 0;
    font-size: 13px;
    border-radius: 8px;
  }
  .info-title {
    font-size: 15px;
  }
  .info-text {
    font-size: 11px;
  }

  /* 公共热线页：手机端 4 列，字号再调小 */
  .pub-page-title {
    font-size: 15px;
    margin-bottom: 14px;
  }
  .pub-bar-btn {
    padding: 0 12px;
    height: 42px;
    font-size: 12px;
  }
  .pub-info {
    font-size: 12px;
  }
  .pub-group {
    padding: 6px;
    margin-bottom: 12px;
  }
  .pub-grid {
    gap: 6px;
  }
  .pub-item {
    width: calc((100% - 3 * 6px) / 4); /* 手机端 4 列 */
    padding: 8px 0;
    font-size: 11px;
    border-radius: 6px;
  }

  /* 家族谱分支动态页：手机端字号/尺寸调小 */
  .clan-main {
    padding: 6px;
  }
  .back {
    font-size: 11px;
    padding: 4px 2px;
    width: 44px;
    white-space: normal;
    text-align: center;
    line-height: 1.5;
  }
  .root-box {
    width: 220px;
    height: 38px;
    font-size: 17px;
    letter-spacing: 2px;
  }
  .v-box {
    width: 34px;
    height: 132px;
  }
  .v-box .sub,
  .h-box .sub {
    font-size: 11px;
  }
  .h-box .sub {
    padding: 8px 10px;
  }
  .sub {
    font-size: 11px;
  }
  .t-top,
  .t-right {
    font-size: 10px;
  }
  .nd-title {
    font-size: 16px;
  }
  .nd-sub {
    font-size: 12px;
  }

  /* 页脚：手机端与电脑端完全一致 —— 普通文档流、跟着内容走，不再固定悬浮在屏幕底部。
     首页/分页因 .home-body 是 flex 列 + min-height:100dvh，页脚会自动被压到屏幕最底。 */
  .footer .beian,
  .footer .beian a { font-size: 10px; }

  /* 主体：底部不再需要为固定导航留白 */
  .main { padding: 20px 12px 24px; }
  /* 同名页（李氏谱 / 理事铺）：空着时与首页一致，填了内容才带内边距 */
  .home-body .main:not(:empty) { padding: 16px 12px 24px; }
  /* 内容块：外框本来就不显示了，这里只留块间距；玻璃框在 .ph-title 上，按比例收小 */
  .ph { margin-bottom: 16px; }
  .ph-title { --card-ls: 3px; font-size: 13px; padding: 6px 10px; }
  .ph-sub { font-size: 12px; margin-top: 8px; }

  /* 首页栏目入口：手机端保持一列竖排（电脑端的两列布局在 style.css 里） */
  .lx-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
  }
  .lx-entry {
    max-width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
  }
  /* 预留位只在电脑端露脸：手机一列竖排里多一个空格子没意义 */
  .lx-entry-blank { display: none; }
  .lx-name { font-size: 14px; }
  .lx-arrow { font-size: 16px; }
  .lx-desc { font-size: 11px; letter-spacing: 0; }

  /* 李氏谱页的缩放工具条：按钮做大一点，手指才点得准 */
  .tree-zoom { margin-top: 8px; gap: 8px; }
  .tz-btn,
  .tz-pct { height: 32px; border-radius: 6px; }
  .tz-btn { min-width: 38px; font-size: 18px; }
  .tz-pct { min-width: 64px; font-size: 13px; }

  .intro h2 { font-size: 20px; }
  .intro p { font-size: 13px; }
  .card { width: 100%; padding: 20px 16px; }

  /* 功能卡：字号调小，描述保持两行 */
  .p-card { padding: 12px; }
  .p-card-noline { padding: 0; }
  .pub-body { padding: 10px 10px; }
  .pub-title { font-size: 15px; }
  .pub-desc { font-size: 10px; padding-left: 0.8em; }
  .pub-btn { padding: 0 6px; }
  .pub-btn-t { font-size: 13px; }
  .pub-btn-a { font-size: 13px; }
}

/* ==========================================================
   小屏手机（≤340px，如 iPhone SE 一代、小屏安卓）
   横幅再等比缩一档，保证三个菜单依然能完整显示、不挤出屏幕
   ========================================================== */
@media (max-width: 340px) {
  :root {
    --bn-h: 46px;
    --bn-logo: 29px;
    --bn-text: 20px;
    --bn-gap: 8px;
    --bn-ml: 8px;
    --bn-nav-gap: 3px;
    --bn-item-fs: 11px;
    --bn-item-px: 6px;
    --bn-item-py: 4px;
    --bn-pad-x: 8px;
    /* 格子宽度同样锁死（36 / 77.5），保证小屏上菜单也不动 */
    --bn-logo-slot: 36px;
    --bn-text-slot: 77.48px;
    --bn-sep-gap: 17px;
    --bn-sep-h: 25px;
    --bn-url-fs: 8px;
    --bn-url-gap: 3px;
  }
  /* 小屏：网址小字再收一档字距 */
  .banner-url { letter-spacing: .3px; }
}

/* ===== 全屏分页容器（手机端微调，仅 ≤600 生效）===== */
@media (max-width: 600px) {
  .fs-bar { padding: 8px 10px; gap: 10px; }
  .fs-close { width: 38px; height: 38px; font-size: 20px; }   /* 手机触摸目标大一点 */
  .fs-title { font-size: 15px; letter-spacing: 2px; }
  .fs-tab { padding: 11px 12px; font-size: 13px; letter-spacing: 1px; }
  .fs-profile { font-size: 10px; padding: 4px 8px; gap: 3px 5px; }
  .fs-g-in { width: 50px; height: 20px; padding: 2px 4px; font-size: 10px; }
  .fs-g-in#fsGBirth, .fs-g-in#fsGDeath { width: 68px; }
  .fs-g-radio { font-size: 10px; }
  .fs-g-radio input { width: 11px; height: 11px; }
  .fs-body { padding: 12px 10px 26px; }
  .fs-empty { margin: 24px auto; padding: 32px 18px; }

  /* 文书库通用生成器（手机端微调，90% 用户在此：字小框小优先） */
  .wx-form { gap: 6px; margin-bottom: 10px; }
  .wx-select, .wx-input { min-width: 0; font-size: 12px; padding: 4px 6px; height: 28px; }
  .wx-relation-sel { min-width: 110px; flex: 1; max-width: 170px; }
  .wx-name-in { width: 90px; }
  .wx-out { max-width: 100%; padding: 0 8px; box-sizing: border-box; }
  .wx-strip { font-size: 14px; letter-spacing: 1px; }
  .wx-fill-in { min-width: 0; font-size: 12px; padding: 5px 7px; height: 30px; }
  .wx-copy { padding: 5px 9px; font-size: 11px; }
  /* 手机：匹配内容 1 列 */
  .wx-cards { grid-template-columns: 1fr; gap: 8px; }


  /* 讣告生成器（手机：收集区一列、正文缩放不断行）
     **只覆写变量，不碰任何字号/高度规则**（v9.1/v11 用户定：标题/正文/小字
     三档字号 + 控件高度 --fg-ctrl-h，各一个数，全块按档/按变量继承） */
  :root { --fg-fs-title: 19px; --fg-fs-doc: 12px; --fg-fs-small: 11px; --fg-ctrl-h: 26px; }
  .fg-collect-page { grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; }
  .fg-cl-page { min-height: 28px; gap: 5px 6px; }
  /* v21：标签宽度改成"最小 36、按内容自适应"——固定 36px + nowrap 时，长标签（三字以上）
     会溢出压住输入框；三字/两字标签视觉宽度不变。v22 删了时辰框，此规则保留更稳妥 */
  .fg-cl-t { width: auto; min-width: 36px; }
  .fg-btn { padding: 0 11px; }
  .fg-btn-main { height: 30px; padding: 0 18px; }
  .fg-box { padding: 12px 12px 14px; gap: 10px; }
  .fg-doc { padding: 14px 14px 12px; line-height: 2.1; letter-spacing: 1px; }
  .fg-doc-t { letter-spacing: 8px; text-indent: 8px; }
  .fg-sel-cl { padding: 0 6px; }
  .fg-pop-op { padding: 9px 14px; }   /* 手指好点 */
  /* v13（用户：手机竖屏不允许超出屏宽，超了就左右滑动触发关闭跳转）：
     下拉行 4 项 → 2+2 两行（3 列太挤，输入框会被压到放不下 placeholder）
     殡仪馆行 → 1+1 两行或一行两列，均受 .fg-cl-page{min-width:0} 保护不撑破 */
  .fg-cl-row { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .fg-cl-row2 { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  /* v23 祭文：5 个字段两列会落单（3+2），让「祭期」独占一行满宽 →
     祭期 / 称谓·自称 / 夫家姓·主祭人，三行左缘全齐 */
  .jw-row3 > :first-child { grid-column: 1 / -1; }
  .fg-w-cal { min-width: 148px; }
  .fg-cal { min-width: 236px; }
  .fg-cal-d { min-height: 34px; }

  /* 祭文 · 固定范本（v28 内联）：手机字降一档、行距收一点
     （只覆写 --jw-fs / --jw-fs-s 两个变量，规则里不写死字号） */
  :root { --jw-fs: 13px; --jw-fs-s: 11px; }
  .jw-box { margin-top: 12px; }
  .jw-s { padding-top: 12px; }
  .jw-s + .jw-s { margin-top: 4px; }
  .jw-s-t { font-size: 16px; letter-spacing: 3px; }
  .jw-s-b { line-height: 1.95; letter-spacing: .5px; }
  .jw-s-b p { margin-bottom: 8px; }
  .jw-s-a { padding: 5px 0 7px; }
  .jw-s-copy { height: 30px; padding: 0 14px; }
}