/* ==========================================================================
   选址参谋 · 移动端独立样式（mobile.css）
   --------------------------------------------------------------------------
   这不是「把 PC 的两栏挤成一栏」的响应式补丁，而是按手机的使用场景重排：

     · 竖排卡片：桌面并排的区块在手机上变成一张张可整屏扫读的卡
     · 横向滑动：筛选条 / 步骤条 / 地图控件不再折成三行，改为一条可滑的横条
     · 更大的点击区：按钮 44px、列表项 44px、表单单行 44px
     · 底部 APP 式导航：56px tabbar 常驻，页面底部统一预留，内容永不被压住
     · 表格：结构上做不了卡片化的（thead 是列语义）走横滚 + 右侧阴影暗示

   三条硬规则（改这个文件时不要破）：
   1) 断点只有一个：max-width: 820px。它和 app.css 里 .nav-toggle 的出现点
      完全一致 —— 出现「导航已经是汉堡、版面还是桌面版」的错位，就是这里漂了。
   2) 颜色一律 var(--*)。theme.css 的浅色主题是整套换变量，任何硬编码色值
      在 data-theme="light" 下都会糊成一片。
   3) 不做强制覆盖（全文件零个强制优先级声明）。本文件在
      type-scale → theme → app → 各页 extraCss 之后加载，同特异性必然覆盖；
      唯一需要抬高特异性的是「视图内联 <style>」—— 它位于 <body> 里、
      比本文件更晚，同特异性时它赢。对这些页面
      （/product /about /contact /cases /articles /pricing /workbench）
      选择器统一加一层作用域（body .px-page / body .cases-page / #wb-root），
      靠作用域压过去，而不是靠强制优先级。
   ========================================================================== */

/* 桌面隐藏底部导航：它只属于手机，桌面端由站点 header 的横向导航承担 */
.m-tabbar { display: none; }

/* ==========================================================================
   0. 总则 —— 安全区、触摸、点击区、表单、横滚容器
   ========================================================================== */
/* ---------- 0. 总则（20 条） ---------- */
@media (max-width: 820px) {

    /* 底部导航的三个尺寸集中在这里，后面所有 calc 都引用它们：
       tabbar 56px 是「图标 22 + 文字 12 + 上下留白」的最小值，
       再矮拇指按下去会连带误触；env() 兜住 iPhone 的 Home 条。 */
    html {
        --m-tab-h: 56px;
        --m-safe-b: env(safe-area-inset-bottom, 0px);
        --m-dock-h: 62px;
    }

    /* 全站给 tabbar 让位。少了这一条，每个页面最底部的内容都会被
       fixed 的 tabbar 永久盖住 —— 移动端最常见、也最难自查的 bug。 */
    body { padding-bottom: calc(var(--m-tab-h) + var(--m-safe-b)); }

    /* 页面自带常驻操作条时（测算页 .pf-dock、工作台 .wb-actionbar），
       操作条被抬到 tabbar 之上，底部预留要再加一条的高度。
       .m-has-dock 由 mobile-nav.js 按 DOM 探测后挂到 <html> 上。 */
    html.m-has-dock body {
        padding-bottom: calc(var(--m-tab-h) + var(--m-dock-h) + var(--m-safe-b));
    }

    /* iOS 上点按会闪一层灰底，配合 44px 的按钮看着像「按坏了」 */
    a, button { -webkit-tap-highlight-color: transparent; }

    /* 去掉双击缩放带来的 300ms 点击延迟，列表点起来才跟手 */
    .btn, .mc-btn, button, .chip, .tag, .cases-chip { touch-action: manipulation; }

    /* 点击区：主按钮 44，紧凑按钮 38（页头、卡片角标这类密集处用） */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; padding: 0 14px; }
    .nav-toggle { width: 40px; height: 40px; }

    /* iOS Safari 在 input 字号 < 16px 时会自动放大整个页面，且不自动缩回。
       基础令牌在 ≤768 是 17px，769~820 可能落到 15px，所以取 max(16px, …)。 */
    main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    main select,
    main textarea { font-size: max(16px, var(--fs-base, 17px)); }
    main .input, main .select { height: 44px; }
    main .textarea { min-height: 110px; }

    /* 横滚容器统一兜底：能滚 + 惯性 + 右缘阴影暗示。
       阴影用 var(--line)，深色下是灰边、浅色下是浅灰边，都不用另配颜色。 */
    .table-wrap,
    .cases-table-wrap,
    .pf-tablewrap,
    .px-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: inset -14px 0 12px -12px var(--line);
    }

    /* 手机屏上居中的区块标题会让人「找不到从哪开始读」，一律左对齐 */
    .section-head { text-align: left; margin-bottom: 22px; }
    .section-head h2 { font-size: var(--fs-lg, 22px); letter-spacing: -.2px; }
    .section-head p { font-size: var(--fs-sm, 16px); }

    /* 头图区的两个按钮在手机上竖排铺满：并排时第二个会被挤到折行 */
    .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .hero-actions .btn { width: 100%; }

    .alert { padding: 12px 14px; font-size: var(--fs-sm, 16px); line-height: 1.8; }
    img { height: auto; }

    /* 分页/页码：44px 的方形命中区，拇指不会点到隔壁 */
    .pager a, .pager span { min-width: 44px; min-height: 44px; }
}

/* ==========================================================================
   1. 底部导航 .m-tabbar（APP 式，5 格）
   ========================================================================== */
/* ---------- 1. 底部导航 .m-tabbar（11 条） ---------- */
@media (max-width: 820px) {

    /* 层级 40：高于正文（1~8）、低于 .nav-mask(45) 与 .site-header(50)。
       汉堡菜单展开时遮罩会一起把这排压暗，且点击落到遮罩上直接关菜单，
       不会出现「菜单开着、底下还能点导航」的分裂状态。
       页面内的 fixed 条（.pf-dock 60 / .wb-actionbar 80）都比它高，
       但它们已被抬到 tabbar 上方，两者不重叠。 */
    .m-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        height: calc(var(--m-tab-h) + var(--m-safe-b));
        padding-bottom: var(--m-safe-b);
        background: var(--panel);
        border-top: 1px solid var(--line);
    }

    .m-tab {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--muted);
        transition: color .15s;
    }

    .m-tab-ico { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
    .m-tab-ico svg { display: block; width: 22px; height: 22px; }
    .m-tab-tx {
        font-size: var(--fs-chart, 12px);
        line-height: 1;
        letter-spacing: .2px;
        white-space: nowrap;
    }

    /* 当前页：品牌色 + 顶部 18px 的短横条。只靠颜色区分在浅色主题下
       对比不足（灰字 vs 蓝字），加一条位置固定的横条才能一眼定位。 */
    .m-tab.on { color: var(--brand); }
    .m-tab.on .m-tab-ico svg { stroke-width: 2.2; }
    .m-tab.on::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 18px;
        height: 2px;
        margin-left: -9px;
        border-radius: 0 0 2px 2px;
        background: var(--brand);
    }

    /* 按下即反馈：不等到页面跳转，拇指就知道「点到了」 */
    .m-tab:active { background: var(--brand-soft); }
    .m-tab.is-press { background: var(--brand-soft); }
}

/* 打印时不留底部导航：真机上从手机直接打印时，fixed 栏会被印到每一页的底边 */
@media print {
    .m-tabbar { display: none; }
}

/* ==========================================================================
   2. 页脚精简 —— 只留版权行 + 法律链接，栏目全收
   ========================================================================== */
/* ---------- 2. 页脚精简（6 条） ---------- */
@media (max-width: 820px) {

    .site-footer { padding: 22px 0 20px; }

    /* 四组栏目链接在手机上占掉两屏，而「产品 / 市场 / 我的」三个入口
       tabbar 已经有了，整块收起比压成两列更好读。 */
    .site-footer .footer-cols { display: none; }

    .site-footer .footer-bottom {
        margin: 0;
        padding: 0;
        border: 0;
        gap: 6px;
        font-size: var(--fs-chart, 12px);
        color: var(--muted);
    }

    /* 法律链接单行排开，行内留 40px 触控高度 */
    .site-footer .footer-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
    .site-footer .footer-legal a { padding: 8px 0; color: var(--text-2); }
    .site-footer .footer-legal span { padding: 8px 0; }
}

/* ==========================================================================
   3. 逐页重排
   ========================================================================== */
/* ---------- 3. 首页 /（30 条） ---------- */
@media (max-width: 820px) {

    /* 头图：标题 → 一句话 → 按钮 → 数据，四段竖排。
       右侧的示例结论卡不再并排（并在 390 宽下会被压成 190px 的窄条），
       而是落到按钮下面独占一行，整屏可读。 */
    .hero { padding: 30px 0 26px; }
    .hero h1 { font-size: var(--fs-2xl, 34px); line-height: 1.25; }
    .hero p.lead { font-size: var(--fs-base, 17px); line-height: 1.75; }

    /* 四个数字改成 2×2 网格：flex + 36px 间距在 390 宽下会折成 2+2 但左对齐错位 */
    .hero-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 14px;
        margin-top: 24px;
    }
    .hero-facts .f { padding: 12px 0 10px; border-top: 1px solid var(--line-soft); }
    .hero-facts .f b { font-size: var(--fs-xl, 28px); }
    .hero-facts .f span { font-size: var(--fs-chart, 12px); }

    /* 示例结论卡：内部四行指标本来就是「标签左 / 数值右」，
       手机只需要把内边距收一档、KPI 数字降一号 */
    .quote-card { padding: 15px 14px; }
    .qc-head { flex-wrap: wrap; gap: 6px; }
    .qc-title { font-size: var(--fs-sm, 16px); }
    .quote-rows .qr { font-size: var(--fs-xs, 14px); gap: 8px; }
    .qq-foot .big { font-size: var(--fs-xl, 28px); }

    /* 轮播：PC 的 8:3 在 390 宽下只有 146px 高，字压在图上一半看不清，
       提高到 4:3 让文案区有呼吸空间 */
    .bcar { aspect-ratio: 4 / 3; max-height: none; }
    .bslide .bcap { padding: 22px 16px 16px; gap: 4px; }
    .bslide .bcap b { font-size: var(--fs-md, 19px); line-height: 1.4; }
    .bslide .bcap span { font-size: var(--fs-xs, 14px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* 数据看板：6 列 KPI → 2 列。每格只留标签 / 数字 / 注释三行，
       注释压到两行，避免一格就占满一屏 */
    .db-section { padding-top: 30px; }
    .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .db-kpi { padding: 13px 12px 12px; }
    .db-kpi-num { font-size: var(--fs-xl, 28px); }
    .db-kpi-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .db-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
    .db-card { padding: 14px 13px; }

    /* 榜单 / 热力 / 城市分布三张表都是 div 画的伪表格：
       桌面 5~6 列，手机上把名次列与数值列压窄，名次列不会再吃掉整行 */
    .db-rank-row { grid-template-columns: 22px minmax(0, 1fr) 62px; gap: 8px; }
    .db-heat-row { grid-template-columns: 22px minmax(0, 1fr) 42px; gap: 8px; }
    .db-city-row { grid-template-columns: 20px 54px minmax(0, 1fr) 34px; gap: 7px; }
    .db-rank-name, .db-heat-name, .db-city-name { font-size: var(--fs-chart, 12px); }

    /* 三坑 / 四步 / 城市三张卡：桌面 3~4 列并排，手机上单列竖排，
       卡片之间靠 10px 间距分组 */
    .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .card { padding: 15px 14px; }
    .card-head { margin-bottom: 12px; }
}
/* ---------- 3.1 产品介绍 /product、关于我们 /about（38 条） ----------
   这两个页面由 app/views/site/page.php 渲染，样式写在视图内联 <style> 里，
   比 mobile.css 更晚出现，因此下面每条选择器都加了 body .px-page 作用域。 */
@media (max-width: 820px) {

    body .px-page .px-hero { padding: 26px 0 20px; }
    body .px-page .px-hero-in { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
    body .px-page .px-hero h1 { font-size: var(--fs-xl, 28px); line-height: 1.3; }
    body .px-page .px-sub { font-size: var(--fs-base, 17px); line-height: 1.75; }

    /* 右上的指标组（圈层数 / 城市数 / ‰ 口径）在手机上排成 2 列，
       原来 flex 换行后第二行只剩一个，看着像漏了内容 */
    body .px-page .px-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body .px-page .px-kpi { padding: 10px 12px; }
    body .px-page .px-kpi b { font-size: var(--fs-md, 19px); }

    /* 目录从「左侧 208px 竖栏」变成「贴顶的横滑胶囊条」：
       手机上侧栏会直接吃掉一半屏宽，而正文才是要读的东西。
       sticky top 56px = header 高度，滚动时目录常驻但不遮正文。 */
    body .px-page .px-doc { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    body .px-page .px-toc {
        position: sticky;
        top: 56px;
        z-index: 6;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        margin: 0 -16px;
        padding: 8px 16px;
        background: var(--bg);
        border-bottom: 1px solid var(--line-soft);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body .px-page .px-toc::-webkit-scrollbar { display: none; }
    body .px-page .px-toc-t { display: none; }
    body .px-page .px-toc a {
        flex: 0 0 auto;
        padding: 9px 14px;
        border: 1px solid var(--line);
        border-radius: 20px;
        font-size: var(--fs-xs, 14px);
        color: var(--text-2);
        white-space: nowrap;
    }
    body .px-page .px-toc a i { display: none; }
    body .px-page .px-toc-note { display: none; }

    /* 正文：视图里写死 14.5px，换成 17px 令牌后一行 21 字，符合手机阅读节奏 */
    body .px-page .px-prose { font-size: var(--fs-base, 17px); line-height: 1.9; }
    body .px-page .px-sec { padding-top: 22px; margin-top: 22px; }
    body .px-page .px-sec-h { font-size: var(--fs-md, 19px); gap: 8px; }
    body .px-page .px-sec-sub { font-size: var(--fs-sm, 16px); }
    body .px-page .px-sec-no { font-size: var(--fs-chart, 12px); }

    /* 三列卡（能力 / 原则 / 口径 / 联系方式）→ 单列：
       两列时每张卡只剩 170px，标题会断成「数据口/径」这种半截词 */
    body .px-page .px-caps,
    body .px-page .px-principles,
    body .px-page .px-caliber,
    body .px-page .px-contacts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    body .px-page .px-cap { padding: 14px; }
    body .px-page .px-cap h3 { font-size: var(--fs-base, 17px); }
    body .px-page .px-cap-dim { font-size: var(--fs-sm, 16px); }

    /* 四步 / 能力网格同样落到单列；连接线（::before）在单列下会画到卡片外 */
    body .px-page .px-steps,
    body .px-page .px-feat-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    body .px-page .px-step.is-wrap::before { display: none; }
    body .px-page .px-step p { font-size: var(--fs-sm, 16px); line-height: 1.8; }

    /* 统计条：桌面是「左标签 / 右数值」的横向条，手机上改成上下两行，
       否则数值（含 ‰ 单位）会把标签挤成三行 */
    body .px-page .px-stats { grid-template-columns: minmax(0, 1fr); }
    body .px-page .px-stat { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; }
    body .px-page .px-rail-item { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px 13px; }

    /* 对照表：列语义（圈层 / 能级 / 报告）拆不成卡片，
       改成横滚 + 右缘阴影，并放开 min-width 让单元格能折行 */
    body .px-page .px-table { min-width: 0; font-size: var(--fs-xs, 14px); }
    body .px-page .px-table th,
    body .px-page .px-table td { padding: 10px 9px; }
    body .px-page .px-table tbody th { white-space: normal; }

    /* 页尾 CTA：横排的「文案 + 两个按钮」在手机上把按钮压到 130px，
       改成上下堆叠、按钮铺满 */
    body .px-page .px-cta { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
    body .px-page .px-cta-btns { width: 100%; flex-direction: column; gap: 8px; }
    body .px-page .px-cta-btns .btn { width: 100%; }
    body .px-page .px-actions { flex-direction: column; margin-top: 22px; }
    body .px-page .px-actions .btn { width: 100%; }
    body .px-page .px-end { height: 24px; }
}
/* ---------- 3.2 测算工具 /profit（41 条） ----------
   这是「左输入 / 右结果」的双栏工具页，手机上的重排顺序是：
   参数表单（竖排一列）→ KPI → 明细表（横滚）→ 结论。
   底部 .pf-dock 被抬到 tabbar 之上，两个按钮始终在拇指区。 */
@media (max-width: 820px) {

    .pf-hero { padding: 26px 0 18px; }
    .pf-hero h1 { font-size: var(--fs-xl, 28px); line-height: 1.3; }
    .pf-lede { font-size: var(--fs-sm, 16px); line-height: 1.85; }

    /* 五条卖点胶囊：横排会折成三行、把首屏吃掉 120px，
       改成一条可横滑的条，一屏内能看到「还有更多」 */
    .pf-hero-chips {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        margin-top: 14px;
        padding-bottom: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pf-hero-chips::-webkit-scrollbar { display: none; }
    .pf-hero-chips > span { flex: 0 0 auto; font-size: var(--fs-chart, 12px); }

    .pf-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 14px; padding-bottom: 16px; }
    .pf-card { padding: 14px; margin-bottom: 12px; }
    .pf-card-head { margin-bottom: 10px; }
    .pf-card-head h2 { font-size: var(--fs-base, 17px); }

    /* 表单行：桌面是「62px 标签 + 控件」的横排，390 宽下控件只剩 250px，
       下拉框里的「快餐简餐」都被截断。手机上标签改成上方一行，控件铺满。 */
    .pf-qrow { flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 12px; }
    .pf-qrow label { width: auto; font-size: var(--fs-xs, 14px); }
    .pf-qrow-top { align-items: stretch; }

    /* 三种选点方式（商圈 / 精准检索 / 地图落点）横滑，按钮本身给足 40px 高 */
    .pf-pick-tabs {
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pf-pick-tabs::-webkit-scrollbar { display: none; }
    .pf-pick-tab { flex: 0 0 auto; min-height: 40px; padding: 0 14px; font-size: var(--fs-xs, 14px); }

    /* 落点经纬度两个框本来就并排，这里只保证 16px 字号后不被挤扁 */
    .pf-ll { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pf-ll .input { padding: 0 10px; }

    /* 检索结果一条一行，改成 44px 的整行点击区 */
    .pf-search-item { padding: 11px 12px; font-size: var(--fs-xs, 14px); }
    .pf-search-item b { font-size: var(--fs-sm, 16px); }

    /* 地图落点画布：canvas 已按 width:100% 缩放，这里给它一个稳定的高度基线，
       避免「容器没显示时量到 0 宽」把地图压成一条线 */
    .pf-mapbox { min-height: 150px; }

    /* 结果区 KPI：桌面 3 列，手机上 2 列（3 列时每个数字只剩 110px 宽，
       「12.3 万」会折行） */
    .pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .pf-kpi b { font-size: var(--fs-md, 19px); }
    .pf-kpi span { font-size: var(--fs-chart, 12px); }

    .pf-steps li { font-size: var(--fs-sm, 16px); line-height: 1.8; }

    /* 明细表：三列（项目 / 金额 / 说明）保留列语义横滚，右侧阴影提示还能滑 */
    .pf-tablewrap { margin: 0 -14px; padding: 0 14px; }
    .pf-table { font-size: var(--fs-xs, 14px); }
    .pf-table-compare { min-width: 520px; }
    .pf-table th, .pf-table td { padding: 9px 8px; }
    .pf-table-def td { font-size: var(--fs-xs, 14px); line-height: 1.85; }

    /* 投入结构条与成本条：数值列固定宽度，名称列可换行 */
    .pf-cost-row { grid-template-columns: 82px minmax(0, 1fr) 84px; gap: 8px; font-size: var(--fs-chart, 12px); }

    /* 风险项桌面是三列（名称 / 说明 / 档位），手机上一列一列往下堆 */
    .pf-risk-item { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 11px 12px; }
    .pf-risk-item .pf-risk-band { text-align: left; }
    .pf-reverse { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

    /* 底部常驻条：抬到 tabbar 之上（56 + 安全区），
       内容只保留「总额 + 两个按钮」，hint 行在手机上属于重复信息，收起。 */
    .pf-dock { bottom: calc(var(--m-tab-h) + var(--m-safe-b)); }
    .pf-dock-in { padding: 9px var(--pad-x, 16px); gap: 10px; }
    .pf-dock-info b { font-size: var(--fs-md, 19px); }
    .pf-dock-info small { font-size: var(--fs-chart, 12px); }
    .pf-dock-btns { gap: 6px; }
    .pf-dock-btns .btn { padding: 0 11px; font-size: var(--fs-xs, 14px); }
    .pf-dock-hint { display: none; }
}
/* ---------- 3.3 选址工作台 /workbench（54 条） ----------
   桌面是「浮层条件面板 + 常驻地图」的双栏。手机上没有浮层的余地，
   重排为：地图（300px 固定高度）→ 四步条件 → 结果 → 底部常驻操作条。
   地图放在最前是刻意的：面板全展开有 1700px 高，若面板在前，
   用户滚两屏都看不到这页最核心的东西，会以为「工作台没加载出来」。

   这一页的样式大多写在 workbench.php 的内联 <style> 里（且更晚出现），
   所以下面一律用 #wb-root / #wb-actionbar 的 ID 作用域压过去。 */
@media (max-width: 820px) {

    /* 底部要让出「常驻操作条 62 + tabbar 56」，否则最后一屏被两条 fixed 压住。
       内联的 .wb { padding-bottom: 104px } 只够桌面的一条。 */
    #wb-root { padding-bottom: calc(var(--m-dock-h) + var(--m-tab-h) + 16px + var(--m-safe-b)); }

    #wb-root .wb-head { gap: 10px; margin-bottom: 12px; }
    #wb-root .wb-head h1 { font-size: var(--fs-lg, 22px); }
    #wb-root .wb-src { font-size: var(--fs-chart, 12px); }

    /* 上下堆叠，并把地图提到条件面板之前 */
    #wb-root .wb-body { flex-direction: column; gap: 12px; }
    #wb-root .wb-right { order: 1; width: 100%; }
    #wb-root .wb-left { order: 2; width: 100%; }

    /* 内联规则 #wb-root .wb-left 给了 max-height: calc(100vh - 158px)，
       在单列布局下会把面板截断、溢出内容与下方卡片重叠。整页滚动即可。 */
    /* 这里必须比内联的 #wb-root .wb-left(1,1,0) 再高一档：
       同特异性时内联 <style> 在后面，会把它压回去、面板被截断 */
    #wb-root .wb-body > .wb-left { max-height: none; overflow: visible; }
    #wb-root .wb-left .panel-body { max-height: none; overflow: visible; }

    /* 地图卡顶栏：全屏 / 定位 / 图源徽标 / 四档半径，桌面一行放得下，
       手机上折成两行且第二行溢出 → 改成上下两块，控件区单独横滑 */
    #wb-root .map-card-head { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
    #wb-root .mc-l { width: 100%; }
    #wb-root .mc-name { max-width: none; }
    #wb-root .mc-r {
        flex-wrap: nowrap;
        gap: 8px;
        padding-bottom: 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #wb-root .mc-r::-webkit-scrollbar { display: none; }
    #wb-root .mc-r > * { flex: 0 0 auto; }
    #wb-root .map-fs-btn,
    #wb-root .map-loc-btn,
    #wb-root .map-rg-btn { min-height: 34px; padding: 0 11px; }
    #wb-root .map-src-badge { font-size: var(--fs-chart, 12px); white-space: nowrap; }
    #wb-root .mc-rg { gap: 4px; }

    /* 地图画布高度：给一个确定的 px，不许出现 height:100% 量到 0 的情况。
       300px ≈ 满屏高度的 40%，既能看清商圈分布，也留得住下方的条件面板入口。
       （全屏态由下面的 :not(.map-full) 排除掉，交给视图内联规则。） */
    /* :not(.map-full) 是必须的：全屏态由视图内联的
       .map-card.map-full .map-stage 接管，而 ID 作用域的优先级高于它，
       不排除的话「全屏地图」会被压回 300px */
    #wb-root .map-card:not(.map-full) .map-stage { height: 300px; min-height: 300px; }
    #wb-root .map-stage canvas { width: 100%; height: 100%; }

    /* 地图内的搜索框与缩放按钮：字号已 ≥16px，这里只让按钮够得着 */
    #wb-root .map-q { left: 8px; top: 8px; right: 56px; width: auto; max-width: none; }
    #wb-root .map-q input,
    #wb-root .map-q button { height: 38px; }
    #wb-root .map-q-list { top: 44px; }
    #wb-root .map-zoom button { width: 38px; height: 38px; }
    #wb-root .map-legend { display: none; }
    #wb-root .map-attr { font-size: var(--fs-chart, 12px); }

    /* 坐标 / 地址 / 缩放级别：横排会溢出，改成自动换行的两行小字 */
    #wb-root .map-foot { gap: 4px 12px; padding: 9px 12px; font-size: var(--fs-chart, 12px); }
    #wb-root .mf-addr { width: 100%; white-space: normal; }

    /* 四步步骤条：4 格均分的结构在手机上保留（每格 78px 刚好放下 2 个字），
       只把高度与字号补到可点、可读 */
    #wb-root .wb-stepbar { gap: 5px; }
    #wb-root .sb-tab { min-height: 58px; padding: 8px 7px; }
    #wb-root .sb-tab .sb-t { font-size: var(--fs-chart, 12px); }
    #wb-root .sb-tab .sb-v { font-size: 11px; }
    #wb-root .wb-stepmeta { font-size: var(--fs-chart, 12px); }

    /* 每一步的折叠标题：整行 48px，拇指能稳稳点中 */
    #wb-root .step-head { min-height: 48px; padding: 0 0 10px; font-size: var(--fs-sm, 16px); }
    #wb-root .step-head .step-v { max-width: 40%; font-size: var(--fs-chart, 12px); }
    #wb-root .step-body { padding-top: 12px; }

    /* 筛选胶囊（选商圈 / 选品类 / 业态）排成一整行，单颗 36px 高 */
    #wb-root .chip { min-height: 36px; display: inline-flex; align-items: center; padding: 0 12px; font-size: var(--fs-xs, 14px); }
    #wb-root .chip-row { gap: 6px; }

    /* 预算 / 面积 / 精确地址这类「窄输入 + 单位」的行：字号必须 ≥16px
       （内联写的是 12~12.5px，iOS 聚焦时会放大整页），宽度同步放开 */
    #wb-root .addr-box .input { height: 44px; font-size: max(16px, var(--fs-base, 17px)); }
    #wb-root .ab-range .input { width: 84px; height: 42px; font-size: max(16px, var(--fs-base, 17px)); padding: 0 8px; }
    #wb-root .ab-range b,
    #wb-root .ab-range em { font-size: var(--fs-chart, 12px); }
    #wb-root .poi-kw { height: 42px; font-size: max(16px, var(--fs-base, 17px)); }
    #wb-root .poi-item { padding: 10px; min-height: 48px; }
    #wb-root .poi-list { max-height: 260px; }
    #wb-root #area-band-chips { max-height: 180px; }

    /* 品类卡片 / 预算项：桌面多列，手机单列（每项就是一行可点的钱数） */
    #wb-root .cat-cards { grid-template-columns: minmax(0, 1fr); }
    #wb-root .budget-list { grid-template-columns: minmax(0, 1fr); }
    #wb-root .rg-row { grid-template-columns: minmax(0, 1fr); }

    #wb-root .report-empty { padding: 28px 16px; }

    /* 底部常驻操作条：抬到 tabbar 之上。桌面那行「尚未选点 · 全部业态 · 20–50 万」
       的上下文在手机上换成一屏就看不见的窄条，直接收起；三个按钮各占 1/3。 */
    #wb-actionbar {
        bottom: calc(var(--m-tab-h) + var(--m-safe-b));
        padding: 8px 12px;
    }
    #wb-actionbar .wab-in { gap: 8px; }
    #wb-actionbar .wab-ctx { display: none; }
    #wb-actionbar .wab-btns { flex: 1 1 auto; gap: 6px; }
    #wb-actionbar .wab-btns .btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 6px;
        font-size: var(--fs-chart, 12px);
        white-space: normal;
        line-height: 1.25;
        text-align: center;
    }
}
/* ---------- 3.4 房租回本 /tools/rent、菜品毛利 /tools/menu（15 条） ----------
   两页共用 pf-* 骨架，3.2 的表单 / KPI / 表格规则已经生效，
   这里只补它们各自的差异：回本页的四格投入汇总、毛利页的 SKU 行编辑器。 */
@media (max-width: 820px) {

    /* 毛利页 KPI 是 pf-kpis-4（桌面 4 列，每格不到 90px），手机上固定 2 列 */
    .pf-kpis.pf-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 投入汇总（押金 / 保证金 / 加盟费 / 装修）：四项横排会挤成两行标签，
       改成两列网格，每项一行值 + 一行说明 */
    .pf-invest-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
    .pf-invest-sum b { font-size: var(--fs-sm, 16px); }

    .pf-legend { font-size: var(--fs-chart, 12px); }
    .pf-actions { flex-direction: column; gap: 8px; }
    .pf-actions .btn { width: 100%; }

    /* 公式卡：等宽字体在手机上每行只有 26 个字符，允许横向滚动而不是硬折行 */
    .pf-formula { overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: var(--fs-chart, 12px); }

    /* SKU 行编辑器：桌面是「名称占 4 列 + 四个数字框 + 删除」的两排网格；
       390 宽下每个数字框只剩 70px，而内联给 input 的是 13px 字号（iOS 聚焦会放大整页）。
       手机上改成「名称 + 删除」一行、四个数字框 2×2 一行，输入框字号提到 16px。 */
    .pf-sku-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) 40px;
        gap: 8px;
        padding: 10px;
    }
    .pf-sku-row .pf-sku-name { grid-column: 1 / 3; grid-row: 1; }
    .pf-sku-row .pf-sku-f:not(.pf-sku-name) { grid-row: auto; }
    .pf-sku-row .pf-sku-del {
        grid-column: 3;
        grid-row: 1;
        width: 40px;
        height: 40px;
        margin-bottom: 0;
        font-size: var(--fs-base, 17px);
    }
    main .pf-sku-row .input { height: 42px; font-size: max(16px, var(--fs-base, 17px)); }
    .pf-sku-f i { font-size: var(--fs-chart, 12px); }
    .pf-sku-add { min-height: 44px; font-size: var(--fs-sm, 16px); }
    .pf-sku-sum { font-size: var(--fs-chart, 12px); line-height: 1.9; }
}
/* ---------- 3.5 产品价格 /pricing（13 条） ----------
   .plan-grid 的列数由 PHP 算好写在行内样式里（--plan-cols），行内优先级高于
   本文件，所以不能改变量，只能直接改 grid-template-columns。 */
@media (max-width: 820px) {

    /* 390 宽下 4 列会有 90px 的卡片，价格直接被截断；
       用 auto-fit + 300px 让宽度自己决定列数，宽屏 2 列、手机 1 列，
       不需要再引入第二个断点 */
    body .plan-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
    body .plan-card { padding: 16px; }
    body .plan-card .amount { font-size: var(--fs-2xl, 34px); }
    body .plan-card .pts { font-size: var(--fs-sm, 16px); }
    body .plan-quota,
    body .plan-unit { font-size: var(--fs-chart, 12px); }
    /* 行内写的 11.5px 说明文字在 17px 正文旁边太小，统一到 12px 下限 */
    body .plan-card p.muted { font-size: var(--fs-chart, 12px); line-height: 1.8; }
    body .plan-card .btn { min-height: 46px; font-size: var(--fs-sm, 16px); }

    body .page-head { padding: 28px 0 6px; }
    body .page-head h1 { font-size: var(--fs-xl, 28px); }
    body .page-head p { font-size: var(--fs-sm, 16px); line-height: 1.8; }

    body .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    body .kv { font-size: var(--fs-sm, 16px); padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
    body .kv:last-child { border-bottom: 0; }
}

/* ---------- 3.6 成功案例 /cases（26 条） ---------- */
@media (max-width: 820px) {

    body .cases-page .cases-hero { padding: 26px 0 18px; }
    body .cases-page .cases-hero-in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    body .cases-page .cases-hero h1 { font-size: var(--fs-xl, 28px); line-height: 1.3; }
    body .cases-page .cases-sub { font-size: var(--fs-base, 17px); line-height: 1.8; }
    body .cases-page .cases-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
    body .cases-page .cases-kpi { min-width: 0; padding: 10px 11px; }
    body .cases-page .cases-kpi b { font-size: var(--fs-md, 19px); }

    /* 筛选条：桌面是 flex-wrap 的两三行胶囊，手机上改成一条横滑，
       并且把当前选中的那颗滚进视野（scroll-snap 让停下时永远对齐一整颗） */
    body .cases-page .cases-filter {
        flex-wrap: nowrap;
        gap: 6px;
        margin: 0 -16px 16px;
        padding: 2px 16px 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    body .cases-page .cases-filter::-webkit-scrollbar { display: none; }
    body .cases-page .cases-chip {
        flex: 0 0 auto;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 0 14px;
        font-size: var(--fs-xs, 14px);
        scroll-snap-align: start;
    }
    body .cases-page .cases-filter-note { display: none; }

    /* 案例卡：桌面 4 列（每张 280px），手机上单列，卡内数字改用竖排两列 */
    body .cases-page .cases-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    body .cases-page .cases-grid-all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    body .cases-page .cases-lib { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    body .cases-page .cases-lib-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

    /* 机制 / 路径两组三列卡 → 单列 */
    body .cases-page .cases-mech,
    body .cases-page .cases-ways { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    body .cases-page .cases-mech-card:last-child,
    body .cases-page .cases-way:last-child { grid-column: auto; }

    /* 案例对照表是「行标签 + 三列数值」的列语义表，拆不成卡片：
       保留 620px 最小宽度横滚，并把提示行显式放出来（源文件里它到 680 才显示） */
    body .cases-page .cases-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body .cases-page .cases-table-hint {
        display: block;
        margin-top: 8px;
        padding: 8px 12px;
        border-radius: var(--radius-sm);
        background: var(--bg-soft);
        color: var(--muted);
        font-size: var(--fs-chart, 12px);
        text-align: center;
    }

    body .cases-page .cases-cta { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
    body .cases-page .cases-cta-btns { width: 100%; flex-direction: column; gap: 8px; }
    body .cases-page .cases-cta-btns .btn { width: 100%; }
    body .cases-page .cases-legal { margin-top: 28px; padding: 18px 0 20px; }
    /* 商圈卡内部：2 列时每卡约 170px，「商圈名 + 租金」一行放不下，
       允许换行并把两行字压到 12px（租金是等宽数字，不能省略） */
    body .cases-page .cases-area-row { flex-wrap: wrap; gap: 2px 8px; margin-top: 8px; font-size: var(--fs-chart, 12px); }
    body .cases-page .cases-area-rent { font-size: var(--fs-chart, 12px); }
    body .cases-page .cases-area { padding: 12px 11px; }
}
/* ---------- 3.7 行业资讯 /articles（17 条） ---------- */
@media (max-width: 820px) {

    body .news-head { padding: 26px 0 4px; }
    body .news-head h1 { font-size: var(--fs-xl, 28px); }
    body .news-head p { font-size: var(--fs-sm, 16px); }

    /* 「分类胶囊 + 篇数」原来在一行里 wrap 成三行，改成上下两块：
       胶囊条横滑，篇数单独一行靠右 */
    body .news-bar { flex-direction: column; align-items: stretch; gap: 8px; margin: 16px 0 14px; }
    body .news-bar .chip-row {
        flex-wrap: nowrap;
        gap: 6px;
        margin: 0 -16px;
        padding: 2px 16px 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body .news-bar .chip-row::-webkit-scrollbar { display: none; }
    body .news-bar .chip {
        flex: 0 0 auto;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 0 14px;
        font-size: var(--fs-xs, 14px);
    }
    body .news-count { text-align: right; font-size: var(--fs-chart, 12px); }

    /* 卡片列数交给可用宽度（>=300px 一列），手机 1 列、820 宽 2 列 */
    body .news-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 11px; }
    /* 头条卡原本占两列，列数变成 1 之后这个 span 会把网格撑出横向滚动 */
    body .news-card.is-lead { grid-column: auto; padding: 18px; }
    body .news-card.is-lead .news-title { font-size: var(--fs-md, 19px); }
    body .news-card.is-lead .news-sum { max-width: none; -webkit-line-clamp: 3; }

    body .news-card { padding: 15px; gap: 9px; }
    body .news-title { font-size: var(--fs-base, 17px); line-height: 1.5; }
    body .news-sum { font-size: var(--fs-xs, 14px); line-height: 1.8; }
    body .news-date, body .news-etime, body .news-count { font-size: var(--fs-chart, 12px); }
    body .news-foot { font-size: var(--fs-chart, 12px); padding-top: 10px; }
}

/* ---------- 3.8 联系我们 /contact（13 条） ---------- */
@media (max-width: 820px) {

    body .px-page .ct-doc { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    body .px-page .ct-side { position: static; }

    /* 表单卡：内边距收一档，字段之间留 14px，标签在输入框上方 */
    body .px-page .px-form { padding: 16px; }
    body .px-page .px-form-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 14px; }
    body .px-page .px-form-head h2 { font-size: var(--fs-md, 19px); }
    body .px-page .px-form .field { margin-bottom: 14px; }
    body .px-page .px-form .field label { font-size: var(--fs-xs, 14px); }
    body .px-page .px-form-tip { font-size: var(--fs-chart, 12px); line-height: 1.9; }
    /* 姓 + 名 / 邮箱 + 电话这类两列行在手机上落成单列 */
    body .px-page .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }

    /* 联系方式列表：每项一行图标 + 文案，点整行就能拨号/发信 */
    body .px-page .px-contacts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    body .px-page .px-contact-link { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
    body .px-page .ct-sec { padding: 20px 0; }
    body .px-page .ct-sec-h { font-size: var(--fs-md, 19px); }
}

/* ---------- 3.9 会员中心 /member（32 条） ----------
   member.css 在 1000px 已把左栏折成顶部横条、820px 把卡片落到单列，
   这里补的是「手机上怎么更好用」：横条可磁吸对齐、按钮 44px、表格横滚。 */
@media (max-width: 820px) {

    body .mc-page { padding: 14px 0 24px; }
    body .mc-layout { gap: 12px; }

    /* 侧栏导航 → 顶部横滑条：每项 44px 高，停下时对齐到整项 */
    body .mc-nav { gap: 4px; padding: 8px; scroll-snap-type: x proximity; }
    body .mc-nav a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0 14px;
        font-size: var(--fs-xs, 14px);
        scroll-snap-align: start;
    }
    body .mc-nav-sum { display: none; }

    /* 身份条：头像 + 昵称 + 资料，操作按钮另起一行铺满 */
    body .mc-ident { flex-wrap: wrap; gap: 12px; padding: 14px; }
    body .mc-ident-acts { margin-left: 0; width: 100%; }
    body .mc-ident-acts .mc-btn { flex: 1 1 0; }
    body .mc-av { width: 44px; height: 44px; font-size: var(--fs-md, 19px); }

    /* 四张主卡 2×2（560 以下由 member.css 落成单列），数值降一号避免折行 */
    body .mc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    body .mc-card { padding: 13px; }
    body .mc-card-big { font-size: var(--fs-xl, 28px); }
    body .mc-card-label { font-size: var(--fs-chart, 12px); }

    body .mc-sec { padding: 14px; margin-bottom: 12px; }
    body .mc-sec-head { flex-wrap: wrap; gap: 6px; }
    body .mc-sec-head h3 { font-size: var(--fs-base, 17px); }
    body .mc-sec-right { margin-left: 0; width: 100%; }

    /* 所有会员按钮统一 44px 命中区 */
    body .mc-btn { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; }
    body .mc-btn-sm { min-height: 40px; }

    /* 套餐：桌面 3 列，手机单列竖排，价格与按钮各占一行 */
    body .mc-plans { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    body .mc-plan { padding: 14px; }
    body .mc-plan-amount { font-size: var(--fs-2xl, 34px); }

    /* 明细行（积分 / 订单 / 报告）：左边名称右边数值，数值换行时再折一行 */
    /* 明细行：名称过长时才折行（flex-wrap 自己判断），短行保持一行，
       不强行 basis:100%，否则每一行都白占半行高度 */
    body .mc-row { flex-wrap: wrap; gap: 4px 10px; padding: 12px 0; }
    body .mc-row-main { flex: 1 1 60%; min-width: 0; }
    body .mc-row-val { font-size: var(--fs-sm, 16px); }

    body .mc-cols { grid-template-columns: minmax(0, 1fr); }
    body .mc-2col { grid-template-columns: minmax(0, 1fr); }

    /* 社交看板与快捷入口：自动铺 2 列，卡片最小 120px，不会再压成 90px 的方块 */
    body .mc-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
    body .mc-kpi-v { font-size: var(--fs-lg, 22px); }
    body .mc-quick { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    body .mc-quick a { min-height: 56px; display: flex; flex-direction: column; justify-content: center; }

    /* 报表列表里的表格：列语义保留，只给容器横滚能力，
       不写死 min-width —— 三列的小表本来能放下，写死反而多出一条滚动条 */
    body .mc-sec .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   站点 Logo · 移动端
   --------------------------------------------------------------------------
   页头高度从 62px 收到 56px、左右留白从 28px 收到 16px，Logo 跟着收 2px：
   在 375px 宽的屏幕上，26px 高的横版标 + 站点名 + 汉堡按钮会刚好挤在一起。
   max-width 同时收紧到 132px —— 超宽标占掉半屏，站点名就只能折行。 */
@media (max-width: 820px) {
    .logo-img { height: 24px; max-width: 132px; }
    .footer-logo .logo-img { height: 22px; max-width: 132px; }
}