/* ============================================================
   移动端适配（设计稿《网页设计稿020910》，手机画布 366×644）
   所有规则仅对 ≤768px 生效；桌面样式完全不变
   字号基准：366 宽时 1rem=16px（min(100vw/22.875, 100vh/40.25)），
   设计稿坐标 px ÷ 16 = rem
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --nav-h: 3.375rem;      /* 54px */
    --footer-h: 3.69rem;    /* 59px */
  }
  html { font-size: min(100vw / 22.875, 100vh / 40.25); }

  /* —— 内容容器 —— */
  .page-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-top: calc(var(--nav-h) + 1rem);
    padding-bottom: calc(var(--footer-h) + 1.6rem);
  }
  .page-articles .page-content,
  .page-search .page-content { margin: 0; padding-top: calc(var(--nav-h) + 1rem); }
  .page-article .page-content { width: 100%; padding-top: calc(var(--nav-h) + 1.4rem); }

  /* —— 移动背景裁剪图（同桌面图片、按设计稿位置） —— */
  .page-home .page-bg {
    background-image: url('../mobile/bg-home.png') !important;
    background-position: right center;   /* 照片右边线与屏幕右边线重合（用尽横向余量、不露底） */
  }
  .page-articles .page-bg,
  .page-article .page-bg { background-image: url('../mobile/bg-articles.png') !important; }
  .page-me .page-bg,
  .page-gallery .page-bg { background-image: url('../mobile/bg-me.png') !important; }
  .page-friends .page-bg { background-image: url('../mobile/bg-friends.png') !important; }

  /* 移动端首页背景：与叠卡同处文档流、同一 100vh 基准 —— sticky 钉在视口顶部，
     浏览器底部导航栏收起/展开时背景尺寸不再随之改变 → 不缩放、不露底；
     高度恒为 100vh（= 视口高），背景底边即屏幕底部（与叠卡底部留白同源） */
  .page-home .page-bg {
    position: sticky;
    inset: 0 0 auto 0;        /* top:0 + 左右贴边，取消 bottom（原 fixed 的 inset: 0） */
    height: 100vh;
    margin-bottom: -100vh;    /* 抵消文档流占位，页面内容仍从顶部开始 */
  }

  /* ================= 导航栏 ================= */
  #site-nav {
    height: var(--nav-h);
    padding: 0 0.9rem;
    display: flex; align-items: center;
  }
  #site-nav .logo { font-size: 1.17rem; padding: .35rem .4rem; }
  .nav-divider { display: none; }

  /* 汉堡按钮（≡ ⇄ ✕ 动画） */
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .26rem;
    margin-left: auto;
    width: 1.7rem; height: 1.7rem;
    padding: .2rem;
  }
  .nav-burger span {
    display: block;
    width: 100%; height: 2px;
    background: var(--white);
    border-radius: 1px;
    transition: transform .3s ease, opacity .3s ease;
  }
  #site-nav.open .nav-burger span:nth-child(1) { transform: translateY(.36rem) rotate(45deg); }
  #site-nav.open .nav-burger span:nth-child(2) { opacity: 0; }
  #site-nav.open .nav-burger span:nth-child(3) { transform: translateY(-.36rem) rotate(-45deg); }

  /* 下拉导航面板：文章/我的/友链/搜索/文 从左到右 */
  .nav-items {
    display: none;
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    background: var(--blue-panel);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: .3rem .9rem;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;   /* 44px */
    transition: background .4s ease;   /* 与顶部栏玻璃化状态联动淡入淡出 */
  }
  #site-nav.open .nav-items { display: flex; }
  /* 首页第一屏顶部栏透明时，下拉菜单同样透明 */
  .page-home #site-nav:not(.glassed) .nav-items {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* 下拉菜单滚动区：文章/我的/友链/搜索栏可左右滑动；
     右侧渐变淡出——初始时搜索栏右端在语言键左侧淡出，左滑逐渐完全显现；
     右侧留白保证滑到底时搜索栏右端恰好完整露出 */
  .nav-scroll {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 1.4rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.4rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.4rem), transparent);
  }
  .nav-scroll::-webkit-scrollbar { display: none; }
  .nav-scroll .tab { flex: 0 0 auto; white-space: nowrap; }
  #site-nav .nav-items .tab { font-size: 1.17rem; padding: .3rem .5rem; }
  .nav-items .tab.active { background: rgba(255, 255, 255, .15); }
  .nav-search { margin-left: 0; gap: .3rem; flex: 0 0 11rem; min-width: 0; }   /* 稍长（中英文一致），右端淡出、左滑显现 */
  .nav-search img { width: 1.2rem; height: 1.2rem; cursor: pointer; }
  .nav-search input { width: 100%; font-size: 1.17rem; }
  #lang-btn { width: 1.44rem; height: 1.44rem; font-size: .8rem; margin-left: .2rem; border-width: 1.5px; }

  /* ================= 首页 ================= */
  /* 首屏 */
  .hero-line { top: 15.2rem; left: 1.06rem; font-size: .83rem; }
  .hero-name { top: 16.8rem; left: .875rem; font-size: 3.67rem; line-height: 1.2; }
  .chevron { bottom: 1.2rem; width: 2.7rem; height: 1.5rem; }

  /* 英文版与中文版字号一致（覆盖 home.css 中的桌面英文规则） */
  html[lang="en"] .section-title { font-size: 3.67rem; }
  html[lang="en"] .section-sub { font-size: 1.17rem; margin-top: .6rem; }
  html[lang="en"] .section-copy { max-width: 13.5rem; }
  html[lang="en"] .deck-arrow { display: none; }

  /* 第 2/3 屏：标题 + 右半出屏的叠卡 */
  .section-copy { top: 16.8rem; left: .875rem; max-width: 13.5rem; }
  .section-title { font-size: 3.67rem; }
  .section-sub { font-size: 1.17rem; margin-top: .6rem; }
  .section-title-row { gap: .6rem; }
  .deck-arrow { width: 3.75rem; translate: 0 .23rem; }
  .deck {
    left: 15.6rem;                      /* 左缘位置不变 */
    top: calc((100vh - 22.6rem) / 2);   /* 全屏居中：上边线到屏幕顶部 = 下边线到屏幕底部 */
    width: 15.6rem; height: 22.6rem;    /* 原 7.8x11.3 的两倍 */
  }
  .deck .deck-card { border-radius: 1.8rem; }
  .deck .deck-card:nth-child(2) { translate: .88rem .5rem; }
  .deck .deck-card:nth-child(3) { translate: 1.88rem .75rem; }
  .deck .deck-card:nth-child(4) { translate: 2.88rem 1.25rem; }
  .deck:hover .deck-top { translate: 2.88rem 1.25rem -6px; }

  /* 主页背景固定不动：各屏不再自带背景，统一透出固定的 page-bg */
  .page-home .step:not(#step-hero),
  .page-home .friend-area {
    background-image: none;
  }
  /* 桌面按屏切屏的蒙版在移动端关闭，改用全局蒙版淡入淡出 */
  .page-home .step::before,
  .page-home .friend-area::before { display: none; }
  #stage::before {
    content: '';
    position: fixed; inset: 0;   /* 蒙版固定盖住视口；舞台此时为文档流中的整段内容 */
    background: var(--overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
  }
  .page-home.masked #stage::before { opacity: 1; }

  /* 友链区：竖列 4 卡（友链 1-3 + 磨砂加号卡），200vh */
  .friend-area { height: 200vh; }
  .fa-title { top: 9vh; }
  .fa-title .section-title { font-size: 3.67rem; }
  .fa-title .section-sub { font-size: 1.17rem; margin-top: .3rem; line-height: 1.35; }
  .fa-grid {
    top: calc(9vh + 8.53rem); left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    flex-direction: column;
    gap: 2.06rem;
  }
  .fa-row { flex-direction: column; gap: 2.06rem; }
  .friend-card { width: 15rem; height: 12.5rem; }
  .friend-card .fc-avatar { width: 3rem; height: 3rem; }
  .friend-card .fc-name { font-size: 1.33rem; }
  .fa-end { top: 168vh; }
  .fa-end .stop-line { margin: 0 auto; }
  .stop-line { margin: 1.5rem auto; }
  .stop-line span { width: 6rem; }
  /* —— 移动端首页：原生滚动 + 逐屏吸附（home.js 挂 html.snap-home）——
     前 3 屏各自吸附对齐；友链区是整块 200vh，超过一屏的吸附区
     在其覆盖视口的整个范围内均为合法吸附位置 → 友链部分可任意自由滑动 */
  .page-home { overflow: visible; }    /* 覆盖 home.css 的 overflow:hidden，恢复文档滚动 */
  html.snap-home { scroll-snap-type: y mandatory; }
  #stage { position: relative; inset: auto; overflow: clip; }   /* 裁掉右侧出屏叠卡，不产生滚动条 */
  .page-home #track {
    height: 500vh;                 /* 3 屏(300vh) + 友链区(200vh) */
    transform: none !important;    /* 关闭桌面步进 transform，滚动交回文档流 */
    transition: none !important;
  }
  .page-home .step,
  .page-home .friend-area { scroll-snap-align: start; }

  /* ================= 页头（文章/我的/友链/搜索 居中 44pt） ================= */
  .page-head { text-align: center; margin-left: 0; padding-top: 0; }
  .page-head h1 { font-size: 3.67rem; }
  .page-head p { font-size: .875rem; margin-top: .1rem; }
  .page-search .page-head { text-align: center; margin-left: 0; }
  .page-search .page-head h1 { font-size: 3.67rem; }
  .page-search .page-head p { font-size: .875rem; margin-top: .1rem; }

  /* ================= 文章导索 / 搜索 ================= */
  .articles-layout { display: block; margin-top: 1rem; }   /* 页头与内容框等距（1rem = 与顶部栏距离） */

  /* 筛选横条（胶囊）：论文/随笔/研究 | 一周/一个月/一年（无“三个月”） */
  /* 筛选条：两层（类型在上、时间在下），整体一个玻璃面板 */
  .filter-panel {
    width: 20.9rem;
    margin: 0 auto;
    display: block;
    background: var(--blue-panel);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: .4rem .6rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  }
  .filter-group { display: flex; align-items: center; justify-content: center; gap: .7rem; }
  .filter-group + .filter-group { margin-top: .3rem; }
  .filter-group h3 { display: none; }
  .fg-divider { display: none; }
  .fg-options { flex-direction: row; align-items: center; gap: .7rem; }
  .filter-opt { font-size: .875rem; line-height: 1.4; padding: .15rem .1rem; white-space: nowrap; }
  .filter-opt::before { width: .8em; height: .8em; border-width: 1.5px; font-size: .8em; }
  .filter-opt[data-time="quarter"] { display: none; }   /* 移动端无“三个月” */

  /* 文章卡（与筛选条等宽、居中） */
  .article-list { width: 20.9rem; margin: .9rem auto 0; gap: .9rem; }
  .article-card { height: 3.75rem; border-radius: .9rem; }
  .article-card .ac-cover { width: 6.2rem; }
  .article-card .ac-main { padding: .4rem .8rem; gap: .15rem; }
  .ac-line1 { gap: .5rem; }
  .ac-line1 h3 { font-size: 1.17rem; }
  .ac-divider { height: 1.6rem; }
  .ac-meta { font-size: .75rem; gap: 1.1rem; }
  .ac-intro { font-size: .75rem; }
  .list-empty { font-size: 1rem; padding: 2rem 1rem; }

  /* 搜索页特有 */
  .friend-hit { padding: .7rem 1rem; border-radius: .9rem; gap: .8rem; }
  .friend-hit img { width: 2.4rem; height: 2.4rem; }
  .friend-hit .fh-name { font-size: 1.05rem; }
  .friend-hit .fh-url { font-size: .85rem; }
  .search-results .group-label { font-size: 1rem; }
  .state-box { font-size: 1rem; padding: 2.5rem 1rem; }

  /* ================= 文章阅读 ================= */
  .article-frame { width: 19rem; margin: 0 auto; border-radius: .9rem; }   /* 圆角与移动端封面一致 */
  .a-cover { aspect-ratio: 304 / 149; border-radius: .9rem .9rem 0 0; }
  .a-panel { padding: 1.2rem 1.4rem 1.8rem; border-radius: 0 0 .9rem .9rem; }   /* 底部圆角与封面顶部圆角一致 */
  .a-panel h1 { font-size: 1.67rem; }
  .a-meta { font-size: .83rem; gap: 1.2rem; margin-top: .3rem; }
  .a-body { font-size: .83rem; line-height: 1.9; margin-top: 1rem; }
  .a-body p + p { margin-top: .9rem; }
  .a-fig { margin: 1.1rem auto; }
  .a-fig img { max-width: 85%; border-radius: .5rem; }
  .not-found h1 { font-size: 2rem; }
  .not-found p { font-size: 1rem; }
  .not-found a { font-size: 1rem; padding: .5rem 1.3rem; }

  /* ================= 我的页 ================= */
  .profile {
    display: block;
    margin: 1rem 0 0;   /* 页头与内容框等距（1rem = 与顶部栏距离） */
  }
  /* 居中正方形卡：圆形头像 */
  .p-avatar-card {
    width: 8.6rem; height: 7.25rem;
    min-height: 0;
    margin: 0 auto;
    border-radius: 1.5rem;
  }
  .p-avatar-card img { width: 5.5rem; height: 5.5rem; }
  /* 长方形卡：名字/联系方式/简介（标题-正方形-长方形等间距 1.25rem） */
  .p-info-card {
    width: 18.9rem;
    min-height: 0;
    margin: 1.25rem auto 0;
    padding: 1.5rem 1.7rem;
    border-radius: 1.5rem;
  }
  .p-info-card h2 { font-size: 2rem; }
  .p-contact { flex-direction: column; align-items: flex-start; gap: .45rem; margin-top: .8rem; }
  .p-contact-row { display: flex; align-items: center; gap: .6rem; }
  .p-contact .ci { width: 1.1rem; height: 1.1rem; }
  .p-contact .p-link { font-size: .9rem; }
  .p-intro { font-size: .9rem; line-height: 1.8; margin-top: 1rem; }

  .sec-title {
    font-size: 2rem;
    margin: 2.8rem 0 1.2rem;
    padding-left: calc((100% - 17.2rem) / 3);   /* 与相册左列左缘对齐 */
  }

  /* 相册：两列（我的页与相册页共用） */
  #gallery {
    grid-template-columns: repeat(2, 8.6rem);
    justify-content: space-evenly;   /* 左距=列距=右距，任意屏宽下均等分 */
    column-gap: 0;
    row-gap: .85rem;
    padding: 0;
  }
  .gallery .g-item { aspect-ratio: 138 / 98; border-radius: 1rem; }
  .gallery .g-item.g-add { position: relative; }

  /* 时间轴：两侧等边距 */
  .timeline { padding: 0 1.9rem; }
  .timeline::before { left: .55rem; }
  .tl-item { padding: 0 0 1.6rem; }
  .tl-item::before { left: -1.725rem; width: .75rem; height: .75rem; top: .4rem; }   /* 圆心落在竖线上 */
  .tl-card { min-width: 0; width: 100%; padding: 1.1rem 1.3rem; border-radius: 1rem; }
  .tl-date { font-size: .9rem; }
  .tl-title { font-size: 1.17rem; }
  .tl-desc { font-size: .9rem; }

  /* 灯箱：图片下方一行 = 左切换键 | 照片标题 | 右切换键（与照片等宽） */
  .lb-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 92vw;
  }
  .lb-img { max-width: 92vw; max-height: 64vh; }
  .lb-row {
    display: flex;
    align-items: flex-start;   /* 按键与标题上边线齐平（距照片下边线相等） */
    justify-content: space-between;
    width: 100%;
    margin-top: 1rem;
  }
  .lb-caption { font-size: 1rem; margin-top: 0; padding: 0 .6rem; }
  .lb-nav {
    position: static;
    transform: none;
    width: 2rem; height: 2rem;
    font-size: 1.3rem;
    line-height: 1;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .12);
  }
  .lb-close { top: 1.2rem; right: 1.4rem; width: 2.4rem; height: 2.4rem; line-height: 1; }
  .lb-close svg { width: 1.2rem; height: 1.2rem; }
  .lb-nav svg { width: 1.3rem; height: 1.3rem; }

  /* ================= 相册页 ================= */
  .page-gallery .gallery-page-title {
    font-size: 2rem;
    margin: 1.2rem 0 1.4rem;
    padding-left: calc((100% - 17.2rem) / 3);   /* 与相册左列左缘对齐 */
  }

  /* ================= 友链页：单列竖排 ================= */
  .page-friends .page-head { padding-top: 0; }
  .friends-grid {
    width: 15rem;
    grid-template-columns: 1fr;
    row-gap: 2.06rem;
    margin-top: 1rem;   /* 页头与内容框等距（1rem = 与顶部栏距离） */
  }
  .exchange { font-size: 1rem; margin-top: 3rem; }

  /* ================= 底部栏 / 浮动按钮 ================= */
  .site-footer { height: var(--footer-h); font-size: .75rem; gap: .1rem; }
  .fab {
    left: .75rem;
    bottom: calc(var(--footer-h) + .5rem);
    gap: .5rem;
  }
  .fab-btn { width: 2.5rem; height: 2.5rem; border-radius: .7rem; }
  .fab-btn svg { width: 1.4rem; height: 1.4rem; }

  /* 磨砂加号卡中的“+”（移动端尺寸） */
  .add-plus { width: 4rem; height: 4rem; }
}