/* ============================================================
   一叶舟 Fursuit — 手机端整体重做（mobile.css v20261024c · App 风格 v3）
   原则：桌面端样式零改动；手机端 = 同功能、不同观感的"第二个站"；
        黑白灰漫画风格不变、功能与 DOM 结构不变。
   本文件在所有页面最后加载，等优先级下覆盖前面的媒体查询。
   设计要点（v3 · 导航收敛 + 顶栏黑底）：
   · 移除汉堡抽屉（解决与底部 Tab 的功能重复 + 抽屉显示不全）
   · 顶栏 → 黑色极简条：logo + 语言切换 + 登录态（桌面为白底横排菜单）
   · 首页 Hero → 胶片轮播（与桌面同一布局，由 index.css/hero-film.css 负责）
   · 导航 → 底部 Tab 栏（一级入口）+ 页内分段条（子页面切换）
   · 灰色纸面底 + 白色卡片层叠（桌面为白底）
   · 页头 → 大字报式标题：超大粗体贴左 + 黑色粗杠（桌面为灰底横幅）
   · 区块标题 → 黑色实心标签块（桌面为居中下划线）
   · 筛选 → 横向滚动吸顶胶囊条；卡片 → 单列横排卡
   · 弹窗/灯箱 → 底部抽屉（bottom sheet）
   ============================================================ */

/* 底部 Tab 栏 / 页内分段条：桌面端隐藏，≤768px 由下方媒体查询启用 */
.m-tabbar,.m-seg{display:none}

@media (max-width:768px){

  /* ════ 0. App 基底：灰纸面 + 底部 Tab 栏 ════ */
  body{background:#f0f0f0;padding-bottom:66px;padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .m-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;
    background:#fff;
    border:3px solid #000;border-bottom:none;border-radius:18px 18px 0 0;
    box-shadow:0 -4px 0 rgba(0,0,0,.06);
    padding:7px 4px 7px;padding-bottom:calc(7px + env(safe-area-inset-bottom));
    justify-content:space-around;
  }
  .m-tab{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:3px 0 2px;color:#ababab;text-decoration:none;
    transition:color .2s;
  }
  .m-tab:active{transform:scale(.94)}
  .m-tab-ic{
    width:40px;height:28px;display:flex;align-items:center;justify-content:center;
    border:2px solid transparent;border-radius:9px;
    transition:all .22s cubic-bezier(.3,1.5,.4,1);
  }
  .m-tab-ic svg{width:21px;height:21px;display:block;stroke-width:2}
  .m-tab-txt{font-size:10px;font-weight:800;letter-spacing:2px;transition:color .2s}
  .m-tab.active{color:#000}
  .m-tab.active .m-tab-txt{font-weight:900}
  /* 激活态：贴纸式黑块（微倾斜 + 硬阴影 + 弹跳入场）*/
  .m-tab.active .m-tab-ic{
    background:#000;color:#fff;border-color:#000;
    transform:rotate(-3deg) scale(1.08);
    box-shadow:2px 2px 0 rgba(0,0,0,.3);
    animation:mTabPop .38s cubic-bezier(.3,1.6,.4,1);
  }
  @keyframes mTabPop{
    0%{transform:rotate(-14deg) scale(.4);opacity:0}
    70%{transform:rotate(1deg) scale(1.18);opacity:1}
    100%{transform:rotate(-3deg) scale(1.08);opacity:1}
  }

  /* 首页 Hero 底部元素上移，避开 Tab 栏（胶片轮播布局由 index.css/hero-film.css 既有规则负责） */
  .scroll-hint{bottom:calc(66px + env(safe-area-inset-bottom) + 12px)}
  .hero-decor{bottom:calc(66px + env(safe-area-inset-bottom) + 28px);z-index:5}

  /* ════ 1. 顶栏：黑色极简条（logo + 语言 + 登录态，无菜单无汉堡）════ */
  .navbar,.navbar.scrolled{background:#000;box-shadow:none;border-bottom:none}
  .nav-inner{gap:8px}
  .nav-logo{color:#fff;font-size:18px;letter-spacing:4px}
  .nav-toggle{display:none!important}   /* 移除汉堡：不再有抽屉（与底部 Tab 重复） */
  .nav-menu{display:none!important}     /* 移除菜单：导航收敛到底部 Tab + 页内分段条 */
  .lang-btn{
    display:block;background:#000;color:#fff;
    border:2px solid #fff;border-radius:999px;
    padding:5px 14px;font-size:11px;margin-right:2px;
  }
  .lang-btn:hover{background:#222;transform:none}
  .nav-auth-btn{min-width:0;overflow:hidden;flex-shrink:1}
  .nav-auth-btn span{font-size:12px!important}

  /* ════ 1b. 页内分段切换条（子页面导航，插在顶栏下方）════ */
  .m-seg{
    display:flex;gap:8px;margin-top:64px;
    padding:10px 14px 12px;background:#f0f0f0;
    border-bottom:3px solid #000;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .m-seg::-webkit-scrollbar{display:none}
  .m-seg-item{
    flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
    min-height:36px;padding:0 20px;
    background:#fff;color:#333;text-decoration:none;
    border:2px solid #000;border-radius:999px;
    font-size:13px;font-weight:800;letter-spacing:2px;
  }
  .m-seg-item.active{background:#000;color:#fff}

  /* ════ 2. 页头：大字报式标题（灰画布 + 超大粗体 + 黑色粗杠）════ */
  .page-header{
    height:auto;min-height:0;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    padding:22px 18px 10px;
    background:transparent;background-image:none;border-bottom:none;
    overflow:visible;
  }
  .page-header .header-bg{display:none}
  .page-header h1{
    color:#000;-webkit-text-stroke:0;text-shadow:none;
    font-size:clamp(30px,9vw,44px);letter-spacing:1px;line-height:1.15;
    text-align:left;font-weight:900;
  }
  .page-header h1::after{content:"";display:block;width:54px;height:6px;background:#000;margin-top:14px}
  .page-header .subtitle{color:#888;text-align:left;margin-top:10px;font-size:11px;letter-spacing:4px}

  /* ════ 3. 内容容器 / 区块标题：黑色实心标签块 ════ */
  .content-section{padding:32px 16px}
  .section-title{
    display:inline-block!important;width:auto!important;text-align:left;
    background:#000;color:#fff;
    font-size:16px;letter-spacing:3px;
    padding:9px 16px 9px 14px;margin-bottom:24px;
    border-left:none;box-shadow:3px 3px 0 rgba(0,0,0,.25);
  }
  .section-title::after{display:none}
  .comic-divider{margin:36px auto;max-width:100%}

  /* ════ 4. 筛选：横向滚动吸顶胶囊条 ════ */
  .gallery-filter{
    position:sticky;top:64px;z-index:60;
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 -16px 24px;padding:10px 16px;
    background:#fff;border-bottom:3px solid #000;
  }
  .gallery-filter::-webkit-scrollbar{display:none}
  .filter-btn{
    flex-shrink:0;white-space:nowrap;
    padding:8px 18px;font-size:13px;border-width:2px;
    box-shadow:none;border-radius:999px;min-height:38px;
  }
  .filter-btn.active{box-shadow:none;transform:none}

  /* ════ 5. 卡片：单列横排（图左文右）════ */
  .gallery-grid{grid-template-columns:1fr!important;gap:18px!important}
  .gallery-card{
    display:flex!important;flex-direction:row!important;
    max-width:100%!important;width:100%!important;
    box-shadow:4px 4px 0 #000;
  }
  .gallery-card:hover{transform:none;top:0;left:0;box-shadow:4px 4px 0 #000}
  .card-img{
    width:41%!important;flex-shrink:0;
    height:auto!important;max-height:none!important;min-height:150px;
    align-self:stretch;
    border-bottom:none!important;border-right:3px solid #000;
  }
  .card-img::after{background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(0,0,0,.03) 8px,rgba(0,0,0,.03) 16px)}
  .card-info{flex:1;min-width:0;padding:12px 14px}
  .card-info h3{font-size:15px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card-info p{font-size:12px;-webkit-line-clamp:3}
  .card-tags{gap:6px;margin-top:8px}
  .tag{padding:2px 8px;font-size:10px}
  .soup-card .card-img{height:auto!important;max-height:none!important;min-height:150px}
  .soup-adopted-badge{top:8px;left:8px;font-size:10px;padding:3px 10px}

  /* ════ 6. 流程步骤：竖排编号时间线 ════ */
  .process-steps{flex-direction:column;align-items:stretch;margin:32px 0;gap:0}
  .process-step{
    display:flex;align-items:center;gap:16px;text-align:left;
    padding:14px 16px;margin:0;border-left:6px solid #000;
    border-top:none;border-right:none;border-bottom:2px dashed #bbb;
    background:#fff;
  }
  .process-step:last-child{border-bottom:3px solid #000}
  .process-step::after{display:none}
  .step-num{
    width:42px;height:42px;margin:0;flex-shrink:0;
    background:#000;color:#fff;border-radius:0;
  }
  .step-text{font-size:14px}

  /* ════ 7. 表单：大触控目标 ════ */
  .commission-form-wrap{padding:26px 18px;box-shadow:4px 4px 0 #000}
  .form-group input,.form-group select,.form-group textarea{
    padding:13px 14px;font-size:16px; /* 16px 防 iOS 聚焦缩放 */
  }
  .form-group label{font-size:13px}
  .submit-btn{width:100%;max-width:100%;min-height:48px;box-shadow:4px 4px 0 #000}
  .adopt-fi,.adopt-fta,.edit-input,.edit-sel,.edit-tarea{font-size:16px;padding:12px 14px}
  .adopt-btn{min-height:44px}
  .upload-btn{min-height:44px}
  .form-actions{margin-top:8px}
  .draft-btn-inline{margin-right:0;margin-bottom:10px;width:100%;min-height:44px;box-sizing:border-box}

  /* ════ 8. 弹窗 / 灯箱：底部抽屉 ════ */
  .modal-overlay{align-items:flex-end;padding:0}
  .modal-box{
    max-width:100%;border-radius:12px 12px 0 0;border-bottom:none;
    box-shadow:0 -5px 0 #000;max-height:88vh;padding:26px 18px 28px;
    animation:mSheetUp .26s cubic-bezier(.3,1.1,.4,1);
  }
  .modal-title{font-size:19px;padding-bottom:10px}
  @keyframes mSheetUp{from{transform:translateY(48px);opacity:.4}to{transform:none;opacity:1}}

  .adopt-modal{align-items:flex-end;padding:0}
  .adopt-form-box{
    width:100%;max-width:100%;border-radius:12px 12px 0 0;border-bottom:none;
    box-shadow:0 -5px 0 #000;padding:24px 16px 30px;
    animation:mSheetUp .26s cubic-bezier(.3,1.1,.4,1);
  }

  .soup-lb-overlay,.gal-lb-overlay,.uc-sub-lb{align-items:flex-end;padding:0}
  .soup-lb-box,.gal-lb-box,.uc-sub-lb-box{
    width:100%;max-width:100%;max-height:92vh;
    flex-direction:column-reverse;
    border-radius:12px 12px 0 0;border-bottom:none;
    box-shadow:0 -5px 0 rgba(0,0,0,.6);
    animation:mSheetUp .26s cubic-bezier(.3,1.1,.4,1);
  }
  .soup-lb-left,.gal-lb-left,.uc-sub-lb-left{
    width:100%;min-width:unset;max-height:45vh;
    border-right:none;border-top:3px solid #000;
    border-radius:12px 12px 0 0;padding:18px 16px 26px;
  }
  .soup-lb-right,.gal-lb-right,.uc-sub-lb-right{max-height:48vh;min-height:200px}
  .soup-lb-title,.lb-info-title{font-size:17px}
  .soup-lb-close{top:8px;right:8px}
  .lb-comic-frame{flex-direction:column;max-width:100%;max-height:92vh;border-radius:12px 12px 0 0;border-bottom:none;box-shadow:0 -5px 0 rgba(0,0,0,.4)}
  .lb-info-panel{width:100%;min-width:unset;border-top:4px solid #000}
  .lb-info-panel::before{left:0;right:0;top:0;bottom:auto;width:auto;height:5px;background:#000;border:none}
  .lb-img-wrap{border-right:none;border-bottom:4px solid #000}
  .lb-img-wrap img{max-height:42vh}
  .lb-comic-close{top:-46px;right:6px}

  /* ════ 9. 页脚：居中紧凑 ════ */
  .footer{padding:30px 18px 24px;text-align:center}
  .footer-logo{justify-content:center;font-size:19px;letter-spacing:3px;margin-bottom:12px}
  .footer-logo .logo-icon,.footer-logo .nav-text-logo{align-items:center}
  .footer-links{justify-content:center;gap:10px 22px;margin:16px 0 0}
  .footer-links a{font-size:12px;padding:6px 0}
  .footer-copy{margin-top:16px;padding-top:14px;font-size:11px}
  .footer-icp{margin-top:8px}

  /* ════ 10. 首页非 Hero 区块（Hero 胶片保持既有布局不动）════ */
  .home-main{padding:0 16px}
  .intro-section{margin-bottom:48px}
  .intro-title{font-size:22px;letter-spacing:2px}
  .intro-desc{font-size:14px;line-height:2;padding:0 4px}
  .featured-title{font-size:20px}
  .featured-subtitle{font-size:11px;margin-bottom:24px}
  .featured-viewall-btn{display:block;width:100%;text-align:center;box-sizing:border-box;padding:14px 20px}
  .featured-shuffle-btn{min-height:40px}
  .cta-section{padding:36px 18px;box-shadow:5px 5px 0 #333}
  .cta-title{font-size:20px}
  .cta-desc{font-size:13px;margin-bottom:24px}
  .cta-buttons{flex-direction:column;gap:12px}
  .cta-btn-primary,.cta-btn-outline{width:100%;max-width:100%;text-align:center}
  .service-card{padding:26px 18px;box-shadow:4px 4px 0 #000}

  /* ════ 11. 关于我们 ════ */
  .about-grid{grid-template-columns:1fr!important;gap:16px}
  .about-card{
    display:flex;flex-direction:row;text-align:left;
    align-items:center;gap:18px;padding:18px 16px;
    box-shadow:4px 4px 0 #000;
  }
  .about-avatar{width:72px;height:72px;font-size:26px;margin:0;flex-shrink:0}
  .about-card h3{margin-bottom:6px}
  .about-card .role{margin-bottom:8px;font-size:11px;letter-spacing:2px}
  .about-card p{font-size:13px}
  .timeline{padding-left:18px}
  .timeline-item{padding:16px 14px 16px 18px;box-shadow:3px 3px 0 #000}
  .timeline-item::before{left:-18px;width:13px;height:13px}
  .team-intro-desc{font-size:14px;margin-bottom:32px}
  .faq-card{padding:18px 16px;box-shadow:3px 3px 0 #000}
  .faq-card h4{font-size:15px}
  .faq-card p{font-size:13px}
  .contact-section{padding:32px 18px}
  .contact-channels{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 10px}
  .contact-icon{font-size:24px}
  .contact-value{font-size:13px;word-break:break-all}

  /* ════ 12. 用户中心 ════ */
  .uc-container{padding-top:80px}
  .uc-welcome{padding:18px 16px;box-shadow:4px 4px 0 #000}
  .sub-card-grid{grid-template-columns:1fr!important;gap:18px!important}
  .sub-card .card-img,.sub-card-img{height:230px!important;max-height:230px!important}
  .uc-adopt-card{box-shadow:4px 4px 0 #000}
  .uc-actions{gap:6px}
  .uc-actions button{flex:1;min-height:38px}
  .empty-state,.login-prompt{padding:44px 18px;box-shadow:4px 4px 0 #000}

  /* 通用弹层内文字 */
  .modal-series{margin-bottom:16px}
}

@media (max-width:480px){
  /* 顶栏高度 56px：分段条与吸顶筛选的偏移跟随 */
  .m-seg{margin-top:56px;padding:8px 12px 10px}
  .m-seg-item{min-height:34px;padding:0 16px;font-size:12px;letter-spacing:1px}
  .gallery-filter{top:56px}

  .page-header{padding:18px 14px 8px}
  .page-header h1{font-size:clamp(26px,8.5vw,38px)}
  .home-main{padding:0 14px}
  .content-section{padding:28px 14px}
  .gallery-filter{margin:0 -14px 20px;padding:8px 14px}
  .section-title{font-size:18px}

  .card-img{width:44%!important;min-height:132px}
  .soup-card .card-img{min-height:132px}
  .card-info{padding:10px 12px}
  .card-info h3{font-size:14px}
  .card-info p{font-size:11px;-webkit-line-clamp:2}

  .about-avatar{width:60px;height:60px;font-size:22px}
  .about-card{gap:14px;padding:16px 14px}
  .about-card p{font-size:12px}
  .contact-channels{grid-template-columns:1fr 1fr;gap:14px 8px}
  .contact-value{font-size:12px}
  .footer-links{gap:8px 16px}

  .uc-container{padding-top:70px}
  .sub-card .card-img,.sub-card-img{height:200px!important;max-height:200px!important}
  .uc-sub-lb-thumbs img{width:52px;height:52px}

  .step-num{width:38px;height:38px;font-size:17px}
  .commission-form-wrap{padding:22px 14px}
  .modal-box{padding:22px 14px 26px}
}

@media (max-width:360px){
  .card-img{width:46%!important;min-height:118px}
  .contact-channels{grid-template-columns:1fr}
  .page-header h1{font-size:clamp(24px,10vw,30px)}
  .page-header h1::after{width:40px;height:5px}
}