/* =====================================================
   mobile.css — 手机端响应式适配 v3
   ===================================================== */

/* ── 全局防溢出（media query 外，所有设备生效） ── */
html { overflow-x: hidden !important; }
body { overflow-x: hidden !important; max-width: 100vw !important; }

/* ℹ ボタン：PC端で隠す、手機端で表示 */
.mob-info-btn { display: none; }           /* PC デフォルト非表示 */
.mob-info-popup { display: none; }        /* ポップアップ デフォルト非表示 */

@media (max-width: 900px) {

  /* ══════════════════════════════════════
     1. 核心：强制所有固定宽度元素自适应
     ══════════════════════════════════════ */
  .box,
  .wrap,
  .topPageNation,
  .main_content_column,
  .sub_content_column,
  #follow_scrolling_container,
  .page_content_wrap,
  .contribute_visual_container,
  .pets_visual_container,
  .content_inner_container_04,
  .content_inner_container,
  .search_area_wrap,
  .serch_area_row,
  .search_inner_wrap,
  .side_contribute_bnr_wrap,
  .side_contribute_menu_wrap,
  .global_footer,
  .global_footer > *,
  .footer_menus,
  .footer_bottom,
  .contribute_result_wrap,
  .contribute_result,
  .contribute_result .inner,
  .visual_heading_wrap,
  .visual_description_container,
  .visual_description,
  .visual_conunt_container,
  .top_page_nation_wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  /* ══════════════════════════════════════
     2. 容器 padding
     ══════════════════════════════════════ */
  .box {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ══════════════════════════════════════
     3. HEADER
     ══════════════════════════════════════ */
  .global_header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: #fff !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.08) !important;
  }
  .global_header .box {
    padding: 0 14px 0 14px !important;
    height: 52px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }
  /* Logo 左对齐，完整显示 */
  .global_header .box .logo {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
  }
  .pet_logo_symbol {
    height: 36px !important;
    width: auto !important;
    max-width: 160px !important;
  }
  /* 隐藏标题文字和副导航 */
  .global_header .infos { display: none !important; }
  .global_header .sub_menus { display: none !important; }

  /* 右侧只保留登录按钮 */
  .global_header .account_menus {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
  }
  .global_header .account_menus ul {
    display: flex !important;
    float: none !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .global_header .account_menus li {
    float: none !important;
    display: block !important;
  }
  /* 隐藏「サポーター募集」按钮 */
  .global_header .account_menus li:first-child { display: none !important; }
  .global_header .account_menus .btn {
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 7px 18px !important;
    border-radius: 20px !important;
    background: #fff !important;
    color: #333 !important;
    border: 1.5px solid #ddd !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  .global_header .account_menus .btn:hover {
    background: #f5f5f5 !important;
    border-color: #bbb !important;
  }

  /* ══════════════════════════════════════
     4. 全局导航（横向滚动）
     ══════════════════════════════════════ */
  .global_menus {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    height: 40px !important;
  }
  .global_menus ul.box {
    width: max-content !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 40px !important;
    padding: 0 6px !important;
  }
  .global_menus .global_menu a {
    font-size: 12px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
  }

  /* ══════════════════════════════════════
     5. 面包屑 — 两行布局
     ══════════════════════════════════════ */
  #page_path_wrap .box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  /* 第一行：路径 */
  #page_path {
    float: none !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
    color: #999 !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 5px 10px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #eee !important;
    margin: 0 !important;
  }
  #page_path li { float: none !important; display: inline !important; }
  #page_path li h2 { display: inline !important; font-size: 11px !important; font-weight: normal !important; margin: 0 !important; }
  #page_path a { color: #999 !important; }
  /* 第二行：三个按钮 */
  #page_path_menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #page_path_menu .left_btn {
    font-size: 11px !important;
    padding: 0 !important;
    height: 28px !important;
    line-height: 28px !important;
    flex-shrink: 0 !important;
  }
  #page_path_menu .left_btn a,
  #page_path_menu .left_btn .bl-bigger {
    font-size: 11px !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    display: block !important;
    height: 28px !important;
    line-height: 28px !important;
  }

  /* ══════════════════════════════════════
     6. 视觉区
     ══════════════════════════════════════ */
  .pets_visual_container {
    background-size: 100% auto !important;
    background-position: center top !important;
    min-height: 100px !important;
    padding: 10px !important;
  }
  .visual_heading_wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .contribute_sub_menu_wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .contribute_sub_menu_wrap li a { font-size: 11px !important; padding: 3px 8px !important; }
  .visual_conunt_container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: 11px !important;
  }
  .visual_description_container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .visual_description p.info { font-size: 12px !important; }

  /* ══════════════════════════════════════
     7. 搜索区
     ══════════════════════════════════════ */
  .serch_area_row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .search_btn_wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .search_btn_01 { font-size: 12px !important; }
  .input_txtbox {
    font-size: 16px !important;
    width: calc(100% - 40px) !important;
    padding: 6px 8px !important;
  }

  /* ══════════════════════════════════════
     8. 主内容 + 侧边栏：双列 → 单列
     ══════════════════════════════════════ */
  #follow_scrolling_container {
    display: flex !important;
    flex-direction: column !important;
  }
  .main_content_column { order: 1 !important; }
  .sub_content_column  { order: 2 !important; margin-top: 12px !important; }

  /* ══════════════════════════════════════
     9. 宠物卡片 — 手机端2列
     ══════════════════════════════════════ */
  #pet-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }
  .contribute_result_new .inner {
    padding: 0 !important;
  }

  /* ══════════════════════════════════════
     10. 排序栏
     ══════════════════════════════════════ */
  .top_page_nation_wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .page_sort_wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .page_sort_wrap li { font-size: 12px !important; }

  /* ══════════════════════════════════════
     11. 图片
     ══════════════════════════════════════ */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ══════════════════════════════════════
     16. 文字溢出修复
     ══════════════════════════════════════ */
  * {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  /* 导航链接例外——横向滚动处理 */
  .global_menus .global_menu a,
  .mob-tab-label {
    word-break: keep-all !important;
    white-space: nowrap !important;
  }
  /* 标题截断 */
  .contribute_result .title a,
  .global_header .infos .h1 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-all !important;
  }

  /* ══════════════════════════════════════
     17. 美观优化
     ══════════════════════════════════════ */

  /* Header 更简洁 */
  .global_header {
    background: #fff !important;
    border-bottom: 1px solid #e8e7e3 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  }

  /* 导航栏更紧凑 */
  .global_menus {
    background: #eb4847 !important;
  }
  .global_menus .global_menu a {
    color: #fff !important;
    font-weight: 600 !important;
    opacity: 0.85;
  }
  .global_menus .global_menu a.current,
  .global_menus .global_menu a.current:link,
  .global_menus .global_menu a.current:visited {
    opacity: 1 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    box-shadow: inset 0 -3px 0 #fff !important;
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
  }

  /* 搜索区更卡片化 */
  .content_inner_container_04 {
    background: #fff !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 16px 10px !important;
    margin-top: -4px !important;
    border: none !important;
  }
  .border_content_container_04 {
    border: none !important;
    outline: none !important;
  }
  .search_title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #666 !important;
    margin: 4px 0 4px !important;
  }
  .search_inner_wrap {
    margin-bottom: 6px !important;
    padding-top: 0 !important;
  }
  .search_inner_wrap:first-child {
    margin-top: -6px !important;
  }
  .search_btn_01 {
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    border: 1px solid #ddd !important;
    background: #f8f8f8 !important;
  }
  .search_btn_01.current_search_btn,
  .search_btn_01.current_search_btn a {
    background: #eb4847 !important;
    color: #fff !important;
    border-color: #eb4847 !important;
  }
  .input_txtbox {
    border-radius: 20px !important;
    border: 1px solid #ddd !important;
    background: #f8f8f8 !important;
  }
  .input_txtbox:focus {
    border-color: #eb4847 !important;
    background: #fff !important;
    outline: none !important;
  }

  /* 宠物卡片精致化 */
  .contribute_result {
    margin-bottom: 8px !important;
  }
  .contribute_result .inner {
    border-radius: 10px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.08) !important;
    background: #fff !important;
    border: none !important;
    margin: 0 0 8px !important;
  }
  .contribute_result .img_wrap,
  .contribute_result .img_wrap img {
    border-radius: 8px !important;
    object-fit: cover !important;
  }
  .contribute_result .title a {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.4 !important;
  }
  .pet_limit_date {
    font-size: 11px !important;
    color: #999 !important;
  }
  .pet_limit_date.urgent_date {
    color: #eb4847 !important;
    font-weight: 700 !important;
  }
  .our-adopt-btn {
    border-radius: 20px !important;
    font-size: 12px !important;
    margin-top: 6px !important;
  }

  /* 侧边栏菜单精致化 */
  .side_contribute_menu_wrap {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.07) !important;
  }
  .side_contribute_menu .menu {
    border-radius: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 12px 14px !important;
  }
  .side_contribute_menu .menu:last-child {
    border-bottom: none !important;
  }

  /* 排序栏精致化 */
  .top_page_nation_wrap {
    padding: 4px 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin-bottom: 4px !important;
    min-height: 0 !important;
  }
  .page_sort_wrap li {
    border-radius: 20px !important;
    padding: 3px 10px !important;
    border: 1px solid #ddd !important;
    background: #f8f8f8 !important;
  }
  .page_sort_wrap li.current_btn,
  .page_sort_wrap li.current_btn a {
    background: #eb4847 !important;
    color: #fff !important;
    border-color: #eb4847 !important;
  }

  /* 视觉区标题 */
  .visual_title_img {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #333 !important;
  }

  /* 视觉区按钮：半透明毛玻璃 */
  .contribute_sub_menu_wrap li,
  .btn_link_type_01 {
    background: rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255,255,255,0.7) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
  }
  .contribute_sub_menu_wrap li a,
  .btn_link_type_01 a {
    color: #333 !important;
    font-weight: 600 !important;
  }

  /* 统计数字：竖排 + 半透明毛玻璃 */
  .visual_conunt_container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .visual_conunt_container li {
    margin-left: 0 !important;
    padding-left: 12px !important;
  }
  .visual_conunt_container li {
    background: rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255,255,255,0.7) !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
    float: none !important;
  }

  /* 面包屑简化 */
  #page_path_wrap {
    background: #f9f8f4 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee !important;
  }

  /* ══════════════════════════════════════
     12. Footer — 手机端精简
     ══════════════════════════════════════ */

  /* 隐藏所有 footer 菜单链接，只留 copyright + SNS */
  .global_footer > .box > *:not(.footer_bottom) {
    display: none !important;
  }
  /* 兼容写法：直接隐藏 title / footer_menus */
  .global_footer .title,
  .global_footer .footer_menus {
    display: none !important;
  }
  .global_footer {
    padding: 0 !important;
    margin: 0 !important;
    background: #f9f8f4 !important;
    border-top: 1px solid #e8e7e3 !important;
  }
  .footer_bottom {
    padding: 12px 0 !important;
  }
  .footer_bottom .box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
  }
  .footer_snss {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
  }
  .footer_snss img {
    width: 22px !important;
    height: 22px !important;
  }
  .copyright {
    font-size: 11px !important;
    color: #999 !important;
    text-align: center !important;
  }

  /* ══════════════════════════════════════
     13. Modal 弹窗（底部弹出）
     ══════════════════════════════════════ */
  .our-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .our-modal-box {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 12px 12px 0 0 !important;
  }
  .our-modal-img { height: 180px !important; }
  .our-info-grid { grid-template-columns: 1fr 1fr !important; }

  /* ══════════════════════════════════════
     14. 底部导航栏留白
     ══════════════════════════════════════ */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }

  /* footer_bottom 自身再加一截保险 */
  .footer_bottom {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ══════════════════════════════════════
     15. 隐藏桌面端多余元素
     ══════════════════════════════════════ */
  /* 只隐藏月亮/主题按钮 */
  .our-theme-btn {
    display: none !important;
  }
  .our-lang-bar .box {
    justify-content: flex-end !important;
    padding: 4px 14px !important;
  }
  .our-lang-sel {
    width: auto !important;
    font-size: 13px !important;
    padding: 4px 20px 4px 8px !important;
  }
  /* ── 手机端：隐藏描述文字，显示气泡按钮 ── */
  .visual_description_container {
    display: none !important;
  }
  /* ℹ 按钮手机端显示 */
  .mob-info-btn {
    display: inline-flex !important;
  }
  /* 手机端专用块 */
  .mob-only-block {
    display: flex !important;
  }
  /* 搜索区上部の空白を詰める */
  .search_area_wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  /* 排序バー：手机端 シンプルタブ */
  .top_page_nation_wrap {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 8px !important;
    border-bottom: 1px solid #e8e7e3 !important;
    margin-top: -8px !important;
    margin-bottom: 8px !important;
    background: #fff !important;
  }
  .page_sort_wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .page_sort_wrap li {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    padding: 10px 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    flex: 1 !important;
    text-align: center !important;
    color: #888 !important;
    margin-bottom: -1px !important;
  }
  .page_sort_wrap li a {
    color: #888 !important;
  }
  .page_sort_wrap li.current_btn {
    border-bottom: 2px solid #eb4847 !important;
    color: #333 !important;
  }
  .page_sort_wrap li.current_btn a {
    color: #333 !important;
    font-weight: 700 !important;
  }
  .mob-info-btn {
    display: inline-flex !important;
    position: static !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: rgba(34,197,94,0.15) !important;
    border: 1.5px solid #16a34a !important;
    box-shadow: none !important;
    font-size: 13px !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #16a34a !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
  }
  .mob-info-popup {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 9998 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  /* .mob-info-popup.active は JS で style.display='flex' で制御 */
  .mob-info-popup-inner {
    background: #fff !important;
    width: 100% !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 16px 32px !important;
    position: relative !important;
  }
  .mob-info-close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    background: #f0f0f0 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

}

/* ── 底部导航栏（仅手机） ── */
.mob-tab-bar { display: none; }

@media (max-width: 900px) {
  .mob-tab-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border-top: 1px solid #e8e7e3 !important;
    z-index: 10000 !important;
    align-items: stretch !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  [data-theme="dark"] .mob-tab-bar { background: #1e1e1e !important; border-top-color: #333 !important; }

  .mob-tab {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: #999 !important;
    gap: 2px !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .mob-tab.active { color: #eb4847 !important; }
  .mob-tab-icon { display: flex; align-items: center; justify-content: center; line-height: 1; }
  .mob-tab-icon svg { display: block; }
  .mob-tab-label { font-size: 10px; font-weight: 500; }
  .mob-tab.mob-tab-center { color: #fff !important; }
  .mob-tab-icon-center {
    width: 44px; height: 44px;
    background: #eb4847 !important;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 300;
    box-shadow: 0 2px 8px rgba(235,72,71,.4);
    position: relative; top: -4px;
    border: 2px solid #fff;
  }
}