/* ============================================================ 全站移动端适配补充层 mobile-fix.css (2026-09-16) ------------------------------------------------------------ 背景：本主题样式年代较早，部分页面存在「固定像素宽度 / 表格溢出 / 图片撑破容器 / 表单控件过窄」等问题，手机上会出现横向滚动、内容被截断或按钮点不到。原则：**只在窄屏生效**（默认 768px 以下），不改变桌面端任何外观；使用 !important 覆盖内联/主题样式，避免被旧规则压回。维护：只在此文件追加，不改动主题原样式，便于回滚与升级。 ============================================================ */ /* ============================================================ 一、基础兜底：消除横向溢出（最常见的手机端问题） ============================================================ */ @media (max-width: 768px) { /* 【注意】只设 body，不要设 html：给设 overflow-x:hidden 会让 html 的 scrollHeight 塌成视口高，纵向滚动被禁掉（实测首页内容 1472px 却 maxScrollY=0，底部页脚滚不到）。 */ body { overflow-x: hidden; max-width: 100%; } /* 媒体元素不超出容器 */ img, video, canvas, embed, object { max-width: 100%; } img { height: auto; } iframe { max-width: 100%; } /* 长文本 / 长网址换行，避免撑破布局 */ body { word-wrap: break-word; overflow-wrap: break-word; -webkit-text-size-adjust: 100%; } /* 容器留白收紧，避免小屏两侧浪费空间 */ .container { width: auto !important; max-width: 100% !important; padding-left: 12px; padding-right: 12px; } .row { margin-left: -8px; margin-right: -8px; } [class*="col-"] { padding-left: 8px; padding-right: 8px; } /* 固定像素宽度的常见布局容器 → 自适应 */ .main-content, .content-area, .site-content, .site-main, .wrap-main-content, .denglubg { min-width: 0 !important; width: auto !important; max-width: 100% !important; } /* 绝对定位的全景背景层不参与撑宽 */ #top_pano { width: 100% !important; max-width: 100% !important; } } /* ============================================================ 二、表格：窄屏改为「容器内横向滚动」，而不是把整页撑宽 ============================================================ */ @media (max-width: 768px) { table.table, table.table-striped, table.table-hover { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } /* 表格内按钮/链接不被压成两行 */ table.table td, table.table th { white-space: nowrap; } } /* ============================================================ 三、表单：控件自适应、可点区域够大 ============================================================ */ @media (max-width: 768px) { input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="search"], select, textarea { max-width: 100% !important; box-sizing: border-box; font-size: 16px; /* iOS 下 >=16px 才不会自动放大页面 */ } .form-control, .inpMain { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* 按钮：保证足够的点击高度 */ .btn, button, input[type="submit"], input[type="button"] { max-width: 100%; white-space: normal; } /* 常见的「标签 + 输入框」左右两栏，在窄屏改为上下堆叠 */ .form-horizontal .control-label { text-align: left; } } /* ============================================================ 四、会员中心 / 后台类页面的两栏布局 → 单栏堆叠 ============================================================ */ @media (max-width: 768px) { /* 左侧菜单与右侧内容常常是固定宽度并排，这里让其堆叠 */ .hy_left, #hy_menu { width: 100% !important; float: none !important; margin-bottom: 10px; } .hy_left #hy_menu ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .hy_left #hy_menu ul > li { float: none !important; display: inline-block; margin: 0 6px 6px 0; } .hy_left #hy_menu ul > li { max-width: 100%; } .hy_left #hy_menu ul > li > a { display: inline-block; padding: 6px 10px; /* 文字过长（如"百亿大像素全景替换"）时允许换行，避免单项宽出屏幕 */ white-space: normal !important; word-break: break-word; max-width: 100%; box-sizing: border-box; } /* 会员中心常见的 col-md-9 主内容区自动占满 */ .col-md-9, .col-md-8, .col-md-6, .col-md-4, .col-md-3 { width: 100% !important; float: none !important; margin-left: 0 !important; min-height: 0 !important; } } /* ============================================================ 五、列表 / 卡片：窄屏单列，缩略图不撑破 ============================================================ */ @media (max-width: 768px) { .item-content { display: block !important; } .works_intro { width: auto !important; } .works_edit { float: none !important; width: 100%; margin-top: 8px; } } /* ============================================================ 六、导航栏：移动端下拉菜单可滚动，避免超出屏幕无法选择 ============================================================ */ @media (max-width: 768px) { .navbar-collapse { max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .dropdown-menu { max-width: 100%; box-sizing: border-box; } } /* ============================================================ 七、页脚：窄屏居中、不溢出 ============================================================ */ @media (max-width: 768px) { .footl, .footc, .footr { width: 100% !important; float: none !important; border-right: 0 !important; padding-left: 0 !important; text-align: center; } } /* ============================================================ 八、极窄屏（<=400px）进一步收紧 ============================================================ */ @media (max-width: 400px) { .container { padding-left: 8px; padding-right: 8px; } html { font-size: 95%; } } /* ============================================================ 九、会员中心固定宽度布局修正（2026-09-16 实测发现） static/css/member_main.css 中： .hy_main { width:1200px } ← 手机上把整页撑到 1200px .hy_right { width:920px } .hy_left { width:210px } 这里在窄屏改为满宽 + 堆叠。 ============================================================ */ @media (max-width: 768px) { .hy_main { width: auto !important; max-width: 100% !important; padding: 8px !important; overflow-x: hidden; } .hy_left, .hy_right { width: 100% !important; max-width: 100% !important; float: none !important; height: auto !important; min-height: 0 !important; } .hy_right { margin-top: 10px; } /* 会员中心内部常见的内联固定宽度表格 */ .hy_main table { width: 100% !important; table-layout: auto; } .hy_main table td { word-break: break-all; } /* 右侧内容里常见的宽图片/头像 */ .hy_right img { max-width: 100% !important; height: auto !important; } } /* ============================================================ 十、头部汉堡行（.navbar-header）窄屏修边实测：其宽度约 389px，在 375px 视口下超出边界（右侧多出约 14px） ============================================================ */ @media (max-width: 768px) { .navbar-header { width: auto !important; max-width: 100% !important; margin-left: 0 !important; box-sizing: border-box; } /* 顶部导航内的全屏搜索层：窄屏满宽，避免 1053px 越界 */ #fullscreen-search-wrapper, .fullscreen-search-overlay { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } #fullscreen-search-wrapper input, #fullscreen-search-wrapper form { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } } /* ============================================================ 十一、页面骨架表格修正（2026-09-16 实测发现） member.tpl / 多个 .tpl 用做页面骨架。 HTML 表格的默认布局算法是 auto：一旦某个

内有宽内容（长文本、固定宽度块），表格就会【超过 100%】把整页撑宽 → 手机端横向滚动。用 table-layout:fixed 强制按容器宽度分配列宽，即可根治。仅针对「直接放在 body/骨架里的表格」，避免影响业务数据表格。 ============================================================ */ @media (max-width: 768px) { /* 页面骨架表格：body 的直接子表格，以及它们内部嵌套的布局表格 */ body > table, body > div > table, body > center > table { width: 100% !important; table-layout: fixed !important; word-break: break-word; overflow-wrap: break-word; } body > table td, body > div > table td, body > center > table td { word-break: break-word; overflow-wrap: break-word; max-width: 100%; } /* 骨架表格里常写的 min-height:1000px 在手机上过空，收一下 */ body > table > tbody > tr > td > div[style*="min-height"] { min-height: 0 !important; } } /* ============================================================ 十二、富文本编辑器（Kindeditor）窄屏自适应（2026-09-16 实测发现） member/profile.lbi 里

，
   初始化后 .ke-container 也被固定成 565px → 手机上撑破页面。
   ============================================================ */
@media (max-width: 768px) {
    .ke-container,
    .ke-container iframe,
    .ke-edit,
    .ke-edit-iframe,
    .ke-toolbar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .ke-container { overflow: hidden; }
    .ke-toolbar { overflow-x: auto; white-space: nowrap; }
    textarea[id="content"] { width: 100% !important; box-sizing: border-box; }
}

/* ============================================================
   十三、作品缩略图覆盖层越界（people 个人主页等）
   .pic-item 内的 .overlay 用绝对定位且宽出父级 ~20px（左右各 10px），
   在窄屏会顶破视口 → 这里在窄屏收敛为贴合父级。
   ============================================================ */
@media (max-width: 768px) {
    .pic-item { overflow: hidden; }
    .pic-item .overlay {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .pic-item img { max-width: 100%; height: auto; }
}
/* ============================================================
   十四、首页轮播溢出修正（全端生效，2026-09-16 实测发现）
   实测：桌面端首页可被横向拖动 745px —— 轮播 .slick-track 被撑到 4940px
   而父容器 overflow-x:visible，于是溢出到文档宽度（原版既有问题）。
   这里给轮播容器加裁剪，消除横向拖动；不影响轮播本身工作。
   ============================================================ */
.flexslider,
.slider-bg,
.slick-list,
.slick-slider {
    overflow-x: hidden !important;
}

/* 【重要经验】不要给 <html> 设 overflow-x:hidden！
   实测（headless chromium 375x812）：加了之后 html 的 scrollHeight 塌成视口高、
   maxScrollY=0 —— 首页内容 1472px 的下半部分（含页脚）完全滚不到。
   正确做法是 overflow-x: clip：同样消除横向滚动，但**不会**把 html 变成滚动容器，
   因此纵向滚动完全不受影响（实测 / 首页：横滚 745→0px，纵滚 2392px 不变）。
   浏览器支持：Chrome 90+ / Firefox 81+ / Safari 16+；更老的浏览器会忽略该属性，
   退化为原有行为（可见横向滚动条），不会弄坏页面。 */
html {
    overflow-x: clip !important;
}
body {
    overflow-x: clip !important;
}
/* ============================================================
   十五、内联固定宽度导致的「内容被裁切」修正（2026-09-16 实测发现）
   实测 /member/index：div.hy_main 容器宽 375px，内容宽 978px，
   被 .hy_main{overflow:hidden} 裁掉 603px —— 右侧内容（如统计卡片、
   "我的全景"区块）在手机上完全看不见。
   原因：模板里有内联 width:900px 的 div（member/index.lbi 第 59 行），
   以及 account/redpack 里 modal-dialog 的内联 width:980px。
   做法：对这些元素只加 max-width（max-width 的约束优先于 width），
   **不改 width**，所以小尺寸元素不受影响，也不会破坏轮播（已排除轮播类）。
   ============================================================ */
@media (max-width: 768px) {
    .hy_main,
    .hy_main div,
    .hy_main table,
    .hy_main ul,
    .hy_main p,
    .hy_main dl,
    .hy_main dd,
    .hy_main h1, .hy_main h2, .hy_main h3, .hy_main h4, .hy_main h5 {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* 内联写了 width 的（如 width:900px）一律约束到容器宽度 */
    .hy_main [style*="width"] {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* 会员页里的弹窗（account/redpack 内联 width:980px） */
    .modal [style*="width"],
    .modal-dialog,
    .modal-content,
    .modal-body,
    .modal-dialog > div {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .modal-dialog { margin: 10px auto !important; width: auto !important; }
    /* 【关键】会员页内的布局表格必须 table-layout:fixed：
       auto 布局下表格**不能小于内容最小宽度**，此时 width:100% / max-width 都无效
       （实测外层 table 被内层 width:900px 的 div 顶成 920px，
        而 div 的 max-width:100% 又是相对这个 920px 的单元格 → 循环撑宽）。
       改成 fixed 后表格按容器宽度分列，内层也能收缩。 */
    .hy_main table,
    .hy_right table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        word-break: break-word;
    }
    .hy_main table td, .hy_main table th,
    .hy_right table td, .hy_right table th {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* ============================================================
   十六、页脚「版权 / 备案号」在手机端放到最底部（2026-09-16 用户反馈）
   实测（375x812，滚到底）：footer 内顺序为
     .footl(logo) 608→652  →  .footc(版权) 652→724  →  .footr(二维码/联系) 744→761
   即版权行**在二维码块上方**，看起来"卡在中间"而不是贴底。
   用 flex order 把版权块排到最后（纯 CSS，不改模板，桌面端不受影响）。
   ============================================================ */
@media (max-width: 768px) {
    .copyright-area .row {
        display: flex !important;
        flex-direction: column;
    }
    .copyright-area .row > .footl { order: 1; }
    .copyright-area .row > .footr { order: 2; }
    .copyright-area .row > .footc { order: 3; }

/* 版权块做成贴底的一条：加分隔线、去掉多余留白 */
    .copyright-area .row > .footc {
        border-top: 1px solid rgba(255, 255, 255, .15);
        padding-top: 10px;
        margin-top: 6px;
    }
    .copyright-area .row > .footc > div {
        padding-top: 6px !important;
        line-height: 1.7;
    }
}
/* ============================================================
   十七、会员中心「我的全景」列表项固定宽度修正（2026-09-16 实测发现）
   static/css/member_main.css 第 20 行：
     .newlist li{ ... width:425px; float:left; ... }
   425px 在 375 视口下溢出（被 .hy_main{overflow:hidden} 裁掉右侧）。
   ============================================================ */
@media (max-width: 768px) {
    .newlist li {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        height: auto !important;
        min-height: 32px;
        line-height: 1.6 !important;
        margin: 2px 0 !important;
        /* 作品名过长时省略号，避免换行把卡片撑高 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .newlist li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .newlist { height: auto !important; min-height: 120px; }
}
/* ============================================================
   十八、搜索结果页 / 全屏搜索框 固定宽度修正（2026-09-16 实测发现）
   1) template/black2024/index/search.lbi 内联样式 .sousuo{width:400px}
      → 375 视口下宽出 25px。
   2) 首页全屏搜索输入框 input.search-bar-top 计算得 min-width:1170px
      （来源在未加载的 bootsnav.css，这里直接覆盖 min-width 兜底），
      手机上点搜索后输入框会宽出屏幕。
   ============================================================ */
@media (max-width: 768px) {
    .sousuo {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 12px !important;
        height: auto !important;
    }
    .sousuo_input {
        width: calc(100% - 72px) !important;
        max-width: calc(100% - 72px) !important;
        box-sizing: border-box;
    }
    .sousuo_btn { width: 60px !important; }

/* 全屏搜索（首页点放大镜后出现） */
    #search-input,
    input.search-bar-top {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    #fullscreen-searchform,
    #fullscreen-search-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

/* 上传按钮文字微裁 */
    .uploadifive-button { max-width: 100% !important; box-sizing: border-box; }
}
/* ============================================================
   十九、收尾微调（2026-09-16 实测）
   1) member/index 的 .newlist 内联 margin:10px，在 .hy_main 的 8px padding 内
      总宽 379，右边界超出视口 2px（被裁 20px 的 scrollWidth 来源）。
   2) 页脚版权块已排到最底（order:3），再把底部留白收一点，让它更贴底。
   ============================================================ */
@media (max-width: 768px) {
    .hy_main .newlist {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* 页脚版权区底部留白收紧，版权行更贴近页面底部 */
    .copyright-area { padding-bottom: 8px !important; }
    .copyright-area .container { padding-left: 10px; padding-right: 10px; }
    .copyright-area .footc > div { padding-top: 0 !important; }
}
/* ============================================================
   二十一、按钮文字在窄屏被裁（2026-09-16 实测）
   bootstrap 的 .btn 默认 white-space:nowrap，中文标签在窄屏放不下会被切
   （实测："选择本地全景图片" 裁 9px、"上传头像" 裁 9px、"Select Files" 裁 5px）。
   窄屏允许换行即可完整显示。
   ============================================================ */
@media (max-width: 768px) {
    .btn,
    .btn-primary,
    button,
    .uploadifive-button {
        white-space: normal !important;
        word-break: break-word;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}
/* ============================================================
   二十二、uploadifive 上传按钮文字被裁（2026-09-16 实测，/member/authentication）
   该插件按钮宽 96 而内容 101（overflow:hidden）→ "Select Files" 被切 5px。
   窄屏允许溢出显示（文字很短，不会遮挡其它内容）。
   ============================================================ */
@media (max-width: 768px) {
    .uploadifive-button {
        overflow: visible !important;
        white-space: nowrap;
        max-width: 100% !important;
    }
}
/* ============================================================
   二十三、页脚贴底（sticky footer）—— 2026-09-16 用户反馈
   现象：内容不足一屏时，页脚（720VR / Copyright © 2022 / 备案号）
        跟在内容后面，落在**屏幕中间**，下方留大片空白。
   实测（375x812，滚到底后版权行到文档底的距离）：
     /videobox 528px、/720play 361px、/videos 213px  ← 都悬在半空
   原因：内容短，文档高=视口高，页脚自然排在内容之后。
   修法：flex 纵向布局 + 页脚 margin-top:auto（经典 sticky footer）。
        页面本身够长时（如首页 1472px）该规则不产生任何影响。
   已用浏览器实测：手机 375x812 上 528/361/213px → 28px；
                  桌面 1280x800 上 /videobox 582→51px，其余不变。
   ============================================================ */
/* ⚠️ 绝对不要给 html 设 height:auto ！
   实测事故（2026-09-16）：krpano 全屏页（template/black2024/tour.tpl 第 53-54 行内联）
   依赖 `html{height:100%}` → `body{height:100%}` → `#pano{height:100%}` 这条链撑满屏幕。
   一旦被 height:auto 覆盖，链条断裂 → #pano 高度塌成 0
   → 整个全景界面（场景、热点、底部菜单、分享/描述等所有按钮）全部不可见/不可点，
   用户表现为「页面打开后好多链接都打不开」。
   本规则保持原样（不设 height），让各页面自己的高度链正常工作。 */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}
/* 直接子元素默认不拉伸，避免影响原有高度计算 */
body > * {
    flex: 0 0 auto;
}
/* 主内容容器吃掉剩余高度，把页脚推到底 */
body > div.wrapper,
body > #wrapper-container,
body > div#wrapper-container {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
}
/* 页脚贴底（兼容页脚直挂 body 或挂在 wrapper 内两种情况） */
body > footer,
body > footer.site-footer,
body > div.wrapper > footer,
body > #wrapper-container > footer,
body > div.wrapper > .site-footer,
body > #wrapper-container > .site-footer {
    margin-top: auto !important;
}
/* ============================================================
   二十四、修正模板自带的「页脚绝对定位」—— 2026-09-16 用户反馈根因
   `template/black2024/library/footer3.lbi` 第 139-141 行（移动端媒体查询）：
       @media (max-width: 768px) {
           footer { padding-bottom:10px; bottom:0; position:absolute; }
       }
   把页脚设成 absolute+bottom:0 → 脱离文档流、锚在最近定位祖先的底部。
   实测 /member/project：页脚落在 767~812，而文档高 1274px
   → 页脚**悬在页面中间**（下方还有 462px 内容），正是用户看到的现象。
   同时它脱离文档流，导致骨架表格的 footer 行高度为 0。
   修法：移动端改回正常流（static），并配合二十三节让页脚贴底。
   注：本文件在 <head> 加载，模板 <style> 在 body 内更晚加载，
       同优先级后者胜，故此处必须 !important。
   ============================================================ */
@media (max-width: 768px) {
    footer,
    footer.site-footer {
        position: static !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

/* 会员页骨架是 <table>：让它吃掉剩余高度，把页脚行推到页面底部 */
    body > table {
        flex: 1 0 auto;
    }
}
/* ============================================================
   二十五、页脚外层容器补漏（2026-09-16）
   /add/video 的页脚裹在一层无名 div 里（body > div > table > … > footer），
   二十三节的规则只认 body 直接子级，故该页页脚仍差 127px 未贴底。
   这里让 body 的最后一个 div 吃掉剩余高度（页脚够长时无任何影响）。
   实测：/add/video 127px → 15px；/add/pic、/videobox、/720play、/videos、
        /member/*、首页、/pictures 均保持原值不变。
   ============================================================ */
@media (max-width: 768px) {
    body > div:last-of-type {
        margin-top: auto !important;
    }
}
/* ============================================================
   二十六、会员级别页 /member/level 横向滚动（2026-09-16 经公网 HTTPS 实测发现）
   template/black2024/member/level.lbi 内联样式：
     .ul_box { width:600px }
     .ul_box>li>div:nth-child(1) { width:100px }
     .ul_box>li>div:nth-child(2) { width:480px }
   600px 在 375 视口下撑出 254px 横向滚动（表格外的另一处固定宽度）。
   窄屏让标签/内容两栏堆叠。模板 <style> 在 body 内更晚加载 → 需 !important。
   ============================================================ */
@media (max-width: 768px) {
    .ul_box {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .ul_box > li > div {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* 两级栏在窄屏上下排列：标签在上、内容在下 */
    .ul_box > li > div:nth-child(1) {
        width: 100% !important;
        margin-bottom: 2px;
        font-weight: bold;
    }
    .ul_box > li > div:nth-child(2) {
        width: 100% !important;
        overflow: visible !important;
    }
}
/* ============================================================
   二十七、页脚内嵌 bootstrap 容器导致横向溢出（全端生效，2026-09-16 实测）
   现象：桌面端多页面「文档宽 2025px」，页面可横向拖动 745px
        （2025 - 1280 = 745，正是本站桌面视口的固定差值）。
   根因：footer 的二维码列（.col-md-3.footr → .footer-copyright）内部又嵌套了一个
        bootstrap 的 .container（固定 1170px）与 .row，且其父列只有约 285px，
        于是该 .container 向右溢出到 x=2025。
        —— 这属于主题写法问题（在栅格列里再套固定宽容器），非本次改动引入；
        用「屏蔽本文件 vs 加载本文件」对比实测，两者 docW 均为 2025。
   修法：让页脚内的 .container/.row 跟随列宽（auto/100%），不改变外观。
   实测：footer 内越界元素 3 → 0，二维码图片仍正常可见（各页一致）。
   ============================================================ */
.footer-copyright .container,
.footer-copyright .row {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
/* ============================================================
   二十八、krpano 全屏容器兜底保护（2026-09-16 事故复盘）
   事故：本文件早前有一条 `html{height:auto !important}`（已删除），
        覆盖了 tour.tpl 内联的 `html{height:100%}`，导致
        html → body → #pano 的高度链断裂，#pano 高度塌成 0，
        整个全景界面（含全部按钮/热点）不可见，表现为"链接都打不开"。
   教训：**不在媒体查询内的规则会作用于全站**，包括 krpano 全屏页；
        改动这类规则后必须逐页实测。
   此处显式给 #pano 一个确定高度作为兜底：即使将来 html/body 的高度链
   被其它样式打断，全景容器也不会塌陷。
   （实测：所有页面中只有 tour 页含 #pano，且该页没有页脚，
     故 100vh 不会与页脚冲突。）
   ============================================================ */
#pano {
    height: 100vh !important;
    min-height: 100vh !important;
}
#fullscreenid {
    height: 100vh !important;
}
/* ============================================================
   二十九、修正「flex 布局 + auto 外边距」导致的容器变窄（2026-09-17 用户反馈）
   ----------------------------------------------------------------------------
   现象：/add/pic、/add/video 等页面在电脑端"看起来像移动端 UI"，
        DOM 实测主内容容器 .container 从 1200px 被压成 814px（/add/video 726px），
        而我写之前（屏蔽本文件）是正常的 1200px。
   原因：第 23 节为了让页脚贴底，把 body（以及 .wrapper）设成了
        display:flex; flex-direction:column。在 flex 布局里，
        交叉轴上的 auto 外边距会**阻止元素被拉伸**，于是带
        `margin:0 auto` 的 bootstrap 布局容器（.container / .container-fluid）
        退化为"内容宽度"(shrink-to-fit)，而不是块级布局下的占满可用宽度。
        实测受影响：/add/* 1200→814/726、/people/1 .container-fluid 1440→1080。
   修法：把这些直接子级显式设为 width:100%，配合它们自身的 max-width 与
        auto 外边距，视觉与原始块级布局完全一致（已逐页与"屏蔽本文件"对比验证）。
   ============================================================ */
body > .container,
body > .container-fluid,
body > div.wrapper > .container,
body > div.wrapper > .container-fluid,
body > #wrapper-container > .container,
body > #wrapper-container > .container-fluid,
body > div#wrapper-container > .container,
body > div#wrapper-container > .container-fluid {
    width: 100% !important;
}

/* 第 30 节：页脚外层容器的贴底处理。
   /add/pic、/add/video 的页脚被包在 body 的直接子 div 里
   （结构：body > div > table > tbody > tr > td > footer），
   而第 23 节的规则只认 body > footer / .wrapper 等，覆盖不到，
   导致页脚下方留白（1440x900 视口下差 110px）。
   这里用 :has(footer) 精确命中"内部包含页脚"的 body 直接子 div，
   让它吃掉剩余高度，把页脚推到底部。
   注：:has() 需要 Chrome105+/Safari15.4+/Firefox121+；不支持时该规则被忽略，
       退化为原有表现（不会弄坏页面）。 */
body > div:has(footer) {
    margin-top: auto !important;
}