/* ============================================================================
 * mobile-density.css —— 手机端统一密度层（www.yuanka.com.cn）
 * 思路：不改 152 个视图文件，只在 layout 末尾追加一层「密度归一化」覆盖，
 *       把散落在各页的 p-5/p-6/mb-10/space-y-5 收敛到同一套 4 级间距令牌。
 * 基准：移动端为默认密度，≥768px 完全恢复原样（零桌面回归风险）。
 * ==========================================================================*/
@media (max-width: 767px) {
    /* --- 间距令牌（与 layout 内 :root 阶梯保持一致） --- */
    :root {
        --spc-xs: 6px;
        --spc-sm: 8px;
        --spc-md: 12px;
        --spc-lg: 16px;
        --spc-xl: 20px;
    }

    /* 1. 页面骨架：左右留白 16→12，上下 24→14，首屏立刻进入内容 */
    main {
        padding: 14px 12px 24px !important;
    }
    header nav {
        height: 52px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    footer {
        margin-top: 20px !important;
        padding: 18px 12px !important;
    }

    /* 2. 卡片：收紧内边距 + 降阴影 + 圆角 18→12（大圆角在手机上是「空」的主因） */
    .ycg-card {
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        border-color: rgba(140, 125, 95, 0.18);
    }
    .p-4, .p-5, .p-6, .p-7, .p-8 { padding: 12px !important; }
    .px-4, .px-5, .px-6 { padding-left: 12px !important; padding-right: 12px !important; }
    .py-3, .py-4, .py-5, .py-6 { padding-top: 9px !important; padding-bottom: 9px !important; }
    .pt-5, .pt-6 { padding-top: 12px !important; }
    .pb-5, .pb-6 { padding-bottom: 12px !important; }

    /* 3. 块间距：把 40/32/24 的大留白统一压到 12/16 两级 */
    .mb-6 { margin-bottom: 12px !important; }
    .mb-7, .mb-8, .mb-10 { margin-bottom: 16px !important; }
    .mt-6 { margin-top: 12px !important; }
    .mt-8, .mt-10 { margin-top: 16px !important; }
    .space-y-4 > * + *, .space-y-5 > * + *, .space-y-6 > * + *, .space-y-7 > * + * {
        margin-top: 12px !important;
    }
    .gap-4 > * { gap: 10px !important; }
    .gap-5 > *, .gap-6 > *, .gap-7 > *, .gap-8 > * { gap: 12px !important; }

    /* 4. 字号下限：11px 的说明文字在手机上是「看不清」而不是「紧凑」。
          只抬到 12/13 两档，不做大幅放大——抬字号会反噬竖向高度，
          实测 text-xs 11→12.5 会让首页三张立绘卡各长高约 17px。 */
    .text-\[10px\] { font-size: 11px !important; }
    .text-\[11px\] { font-size: 12px !important; }
    .text-xs { font-size: 12px !important; line-height: 1.55 !important; }
    .text-sm { font-size: 13.5px !important; line-height: 1.6 !important; }
    .text-3xl { font-size: 21px !important; line-height: 1.25 !important; }
    .text-4xl, .text-5xl { font-size: 23px !important; line-height: 1.25 !important; }
    .text-2xl { font-size: 18px !important; line-height: 1.3 !important; }
    h1 { letter-spacing: -0.01em; }

    /* 4.1 例外：等宽代码/命令样例不参与字号下限。
          这类行是 white-space:nowrap + overflow-x:auto，抬字号不会让它换行，
          只会按「整行 nowrap 宽度」顶开上游 grid 项的 min-width:auto，
          把 392px 视口撑出横向滚动条（万年历 API 卡实测 11→12px 溢出 17px）。
          它本身可左右滑动，保持小字号才是预期行为。 */
    .font-mono.text-\[10px\], code.text-\[10px\], pre.text-\[10px\] { font-size: 10px !important; }
    .font-mono.text-\[11px\], code.text-\[11px\], pre.text-\[11px\] { font-size: 11px !important; }

    /* 4.2 兜底：grid 子项默认 min-width:auto，会被任何不可断行的长内容
          （代码样例、长 URL、连续英文）顶开整条轨道。手机端统一允许收缩，
          溢出交给子项自己的 overflow-x:auto。只放宽收缩，不改任何尺寸。 */
    main .grid > * { min-width: 0; }

    /* 5. 触控目标：30px 的输入/下拉抬到 40px，主按钮 44px */
    input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
    select, textarea {
        min-height: 40px;
        font-size: 14px !important;   /* <16px 时 iOS Safari 会聚焦放大，这里保留原策略但抬到可读尺寸 */
    }
    button[type=submit], .btn-primary, a.btn-primary {
        min-height: 44px;
    }

    /* 6. 徽标 / 胶囊：内边距收一档，避免比正文还高 */
    .px-2, .px-2\.5 { padding-left: 7px !important; padding-right: 7px !important; }
    .py-0\.5 { padding-top: 1px !important; padding-bottom: 1px !important; }
    .py-1, .py-1\.5 { padding-top: 3px !important; padding-bottom: 3px !important; }

    /* 7. 装饰层：手机上的山影压到 22vh，避免吃掉正文可视区 */
    body::before { height: 22vh; }
}

/* ============================================================================
 * 第二层：竖向预算（2026-10-14 量测后补）
 *   实测首页 3404px 中，内边距只占约 120px，真正的开销在三处：
 *     ① 英雄区 section.py-12 + 副标题 mb-8      417px（首屏几乎只剩标题）
 *     ② 三张日君立绘卡 article.ycg-card         505×3 = 1515px（占整页 45%）
 *     ③ 区块之间 section.mb-10                  40px × 4
 *   只压间距收不到几个百分点，必须给图片与英雄区设上限。
 * ==========================================================================*/
@media (max-width: 767px) {

    /* 8. 英雄区：上下留白 48→18，副标题与按钮组之间的空段收一档 */
    section.py-12 { padding-top: 18px !important; padding-bottom: 18px !important; }
    .mb-8  { margin-bottom: 14px !important; }
    .mb-10 { margin-bottom: 18px !important; }
    .mb-12 { margin-bottom: 22px !important; }
    .mt-12 { margin-top: 18px !important; }

    /* 9. 立绘外框：首页三张日君卡用 .w-[170px] .h-[224px] 定死，图片本身 object-contain。
          要收高度必须收「外框」，给 img 加 max-height 只会裁掉图、外框不动。
          224→176（3:4 等比），三张合计省下 144px，卡片回到一屏一张半的节奏。 */
    .ycg-card .h-\[224px\] { height: 176px !important; }
    .ycg-card .w-\[170px\] { width: 134px !important; }

    /* 10. 卡片内图文之间：图与下一块文本的间距收一档 */
    .ycg-card > * + * { margin-top: 0; }
    article .mt-4, article .mt-5 { margin-top: 10px !important; }
    article .mb-2, article .mb-3 { margin-bottom: 6px !important; }
}