/* ============================================================
 * 移动端（≤768px）完整适配
 * 本文件在 enqueue 中最后加载，确保覆盖所有桌面规则
 * 目标：手机上正常流式浏览，无书本特效，阅读体验接近 pwsz.com 移动版
 * ============================================================ */

/* 顶部栏与遮罩默认隐藏，仅移动端显示 */
#mobile-bar,
#mobile-mask { display: none; }

/* v1.2.69 修复：移动端直接隐藏 #loading 加载动画，避免 1s 渐隐期间遮住首屏
   （footer.php 的 JS 在 window.load 后 300ms 才把 #loading opacity 置 0，
    再 1s 后 display:none；如果用户网络慢或脚本被 PJAX 切页覆盖，
    #loading 可能残留一屏深灰色 → 用户感知为「一屏空白」） */
@media (max-width: 768px) {
    #loading { display: none !important; }
}

@media (max-width: 768px) {

    /* ---------- 顶部栏：左站名 + 右汉堡抽屉 ---------- */
    #mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;  /* 左右分布 */
        gap: 8px;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 44px;
        padding: 0 12px;
        z-index: 10000;
        /* v1.2.71：用不透明实色背景，去掉 backdrop-filter:blur 与重 box-shadow。
           blur 会在滚动时每帧重绘整条顶栏、box-shadow 也会触发重绘，是手机上下滑动掉帧的主因之一。 */
        background: #28211e;
        color: #f3ead6;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
        /* 顶栏固定不动，禁止其内部横向触摸手势干扰页面纵向滚动 */
        touch-action: pan-y;
    }
    /* 左：站名/Logo（保持原 .mb-site 兼容：两者均生效） */
    .mb-logo,
    .mb-site {
        font-size: 15px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 70%;
    }
    /* 右：汉堡按钮（默认显示 ☰，drawer-open 时切到 ✕） */
    #mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        margin-left: auto;        /* 始终贴右 */
        padding: 0;
        border: 0;
        background: transparent;
        color: #f3ead6;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        border-radius: 4px;
    }
    #mobile-menu-btn::before { content: "\2630"; }   /* ☰ */
    body.drawer-open #mobile-menu-btn::before { content: "\2715"; } /* ✕ */
    #mobile-menu-btn:active { background: rgba(255,255,255,0.08); }

    /* ========== 2. 遮罩层 ========== */
    #mobile-mask {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 9990;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s;
    }
    body.drawer-open #mobile-mask { opacity: 1; visibility: visible; }

    /* ========== 3. 彻底重置书本特效 → 单栏流式布局 ==========
       关键：消除所有 perspective / transform / rotateY / translateX 残留效果
       确保 #body 和子元素完全回归正常文档流
    */
    html, body {
        height: auto !important;
        min-height: 100vh;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;   /* 去除点击时的灰色高亮闪烁 */
        touch-action: pan-y;                 /* 只响应纵向手势，避免横向误触干扰滚动 */
        overscroll-behavior-y: none;         /* 关闭过度回弹/橡皮筋，滑动更干脆跟手 */
        scroll-behavior: auto;               /* 关闭平滑滚动动画，避免触摸滚动延迟/跳变 */
        background: #f1eee3;                 /* v1.2.72：米色背景直接画在根上（见 #body-bg 说明） */
        /* v1.2.72 关键修复：移除 overflow-x:hidden。
           overflow-x:hidden 会让浏览器把同元素的 overflow-y 强制算成 auto，
           使 body 变成「独立滚动容器」，与 html 的 overflow-y:scroll 叠加成双层容器，
           手机端因此丢失原生惯性滚动 → 触摸下滑卡顿、不跟手。
           改用 overflow-x:clip（见下方 html/body 单独规则）：只裁剪横向溢出，
           但不创建滚动容器，纵向滚动完全交还视口原生滚动（iOS/Android 最顺滑）。 */
    }
    /* 仅裁剪横向溢出；clip 不会创建滚动容器，确保纵向由视口原生滚动 */
    html { overflow-x: clip; }
    body { overflow-x: clip; }

    /* v1.2.72 优化：移动端隐藏 #body-bg 全屏 fixed 层，背景改画在 html/body 上。
       原因：桌面端 #body-bg 是 position:fixed 全屏层（book-skin.css 467-485 行），
       滚动时浏览器每帧都要把它与正文重新合成，低端安卓机型会明显掉帧。
       移动端是纯色背景、无木桌图，没必要保留这层 fixed；隐藏后滚动更顺。
       （桌面端规则不受影响。） */
    #body-bg {
        display: none !important;
    }

    #body {
        position: relative !important;
        width: 100% !important;
        top: 44px !important;  /* 顶部栏高度 */
        height: auto !important;
        /* 关键修改（v1.2.68）：去掉 min-height: calc(100vh - 48px)，
           之前那行会强制把"书"撑到一屏高，但内部 #book-right 是 height:auto、
           内容短，于是上半部出现大块米色空白（用户截图红框区域）。
           改为 auto 让 #body 跟 #book-right 同步高，彻底消除空白。 */
        min-height: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        left: 0 !important;
        perspective: none !important;
        /* v1.2.71：确保 #body 自身不参与内部滚动（滚动交给原生 body/viewport） */
        overflow: visible !important;
        max-height: none !important;
    }

    .mains {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        perspective: none !important;
        transform-style: flat !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    /* v1.2.76 关键修复：移动端抽屉「看得见点不到」的层叠陷阱
       根因：.nav-box(position:fixed, z-index:10001) 被祖先 #body(z-index:2) /
       .mains(z-index:2) / #book-right 的层叠上下文困在「根层级≈2」；
       而 #mobile-mask 是根层级 z-index:9990，整层压在抽屉之上——
       菜单透过 45% 半透明遮罩可见，但点击全被遮罩吃掉（用户说的"看得见点不到"）。
       修复：移动端把这些祖先的 z-index 设为 auto（它们已无 transform，
       不再创建层叠上下文），让 .nav-box 回到根层级 z-index:10001 > 遮罩 9990。
       层级变为：抽屉(10001) > 遮罩(9990) > 书内容——页面变暗、抽屉在遮罩之上、链接可点。 */
    #body, .mains, #book-right { z-index: auto !important; }

    /* v1.2.77 双保险：
       ① 把 #mobile-mask 降到 9000——永远低于抽屉 10001，
          即使 .nav-box 被困在某个未知的祖先 stacking context 里，遮罩也不可能再压住它；
       ② 给 .nav-box 加 isolation:isolate 创建独立 stacking context——给抽屉自己的 z-index
          一道"独立保险"，让抽屉内部的子元素（#nav-menu > a 等）参与抽屉自己的
          层叠空间，不受外部层叠影响。
       节点层根治见 js/diary.js（v1.2.77 把 .nav-box 移出书本容器，appendTo('body')）。 */
    #mobile-mask { z-index: 9000 !important; }
    .nav-box { isolation: isolate; }

    /* ========== 左半本（目录/随言碎语）→ 完全隐藏 ==========
       手机端不显示左侧栏，只显示右侧文章内容区 */
    #book-left {
        display: none !important;
    }
    .book-left-z {
        display: none !important;
    }
    /* 封面隐藏 */
    #Book-cover { display: none !important; }

    /* 书影隐藏 */
    .book-shadow { display: none !important; }

    /* 注：#mobile-mask 不再二次 display:none（v1.2.68 修复），
       让前面 40-51 行的样式生效——默认隐藏、drawer-open 时显示为半透明遮罩。
       原「115 行 display:none」与那段样式相互矛盾，会导致点汉堡后
       抽屉面板出现但遮罩不显示、点击遮罩关抽屉失效。 */

    /* 右半本（内容区）：保留桌面端的纸张背景 + 书页感阴影
       v1.2.85 关键改动：彻底取消「background:transparent」重置，让 book-skin.css
       的 `url(../static/book-img/book-bg2.png) repeat-y` 米黄纸张纹理自然继承；
       同时加 max-width:720px 居中，让手机端右页看起来像「翻开的一页纸」，
       而不是一坨裸米色（用户反馈「手机版排版不好看」的根因之一）。 */
    #book-right {
        position: relative !important;
        width: 100% !important;
        max-width: 720px !important;          /* ≤720px 视口下就是 100%，超出视口也止于 720（平板） */
        margin: 0 auto !important;            /* 居中 */
        height: auto !important;
        min-height: auto !important;
        transform: none !important;
        rotate: none !important;
        /* 保留书页感阴影（比桌面端 20px 更轻）：左右各 4px 软阴影 + 1px 内描边感 */
        box-shadow: 0 4px 18px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.10);
        padding: 0 !important;
        background: #f1eee3 url(../static/book-img/book-bg2.png) repeat-y center top !important;
        background-size: 100% auto;          /* 让纸张纹理在窄屏完整可见 */
        background-attachment: local;
        left: 0 !important;
        top: 0 !important;
        perspective: none !important;
    }

    /* 内容容器：axjx_box 与 secondary 自身透明，让 #book-right 的纸张背景透出 */
    #axjx_box, #secondary {
        height: auto !important;
        width: 100% !important;
        min-height: auto !important;
        max-height: none !important;
        background: transparent !important;
        background-image: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        overflow: visible !important;
    }
    /* postbox（主内容区卡片）：保留桌面端纸张背景作内层卡片 + 合理内边距 */
    #postbox, #postbox-2 {
        height: auto !important;
        width: 100% !important;
        min-height: auto !important;
        max-height: none !important;
        background: transparent url(../static/book-img/book-bg2.png) repeat-y center top !important;
        background-size: 100% auto;
        background-attachment: local;
        margin: 0 !important;
        padding: 14px 18px 24px !important;   /* 顶 14 / 左右 18 / 底 24 */
        position: relative !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* 主内容区内边距 —— 兼容旧版 #postbox 单独设置 */
    #postbox {
        padding: 14px 18px 24px;
    }

    /* ========== 4. 文章列表页（首页/归档）==========
       v1.2.85 重写：.post 改为米色卡片（背景 #fdfbf5 + 1px #ece0cd 边框 + 10px 圆角 +
       1px 软阴影），与桌面端右页书页感完全一致；标题/元信息沿用桌面端棕红/暖灰色系；
       缩略图保留拍立得白边 + 阴影 + 轻微旋转，但宽度 70%/max 240px 居中。 */
    .post {
        width: 100% !important;
        max-width: 100%;
        margin: 0 0 18px !important;
        padding: 14px 14px 16px !important;
        background: #fdfbf5 !important;       /* 米色卡片，比纸张底色更亮一档，让卡片凸出 */
        border: 1px solid #ece0cd;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(80,50,20,.08);
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }
    .post:last-child { margin-bottom: 0 !important; }

    /* 列表卡片标题：暖棕色 + 缩放 */
    .post-entry-wrap > .post-title {
        font-size: 17px !important;
        line-height: 1.4 !important;
        padding: 0 0 6px 0 !important;
        margin: 0 0 4px 0 !important;
        border-bottom: 1px solid #e3d8c2 !important;
    }
    .post-entry-wrap > .post-title a { color: #5a4a32 !important; }
    .post-entry-wrap > .post-title a:active { color: #a07848 !important; }

    /* 列表元信息行：紧凑 + 暖灰 */
    .post-entry-wrap > .post-meta {
        font-size: 12px !important;
        gap: 1px 10px !important;
        margin-bottom: 8px !important;
        color: #9a8c70 !important;
    }
    .post-entry-wrap > .post-meta li { color: #9a8c70 !important; }
    .post-entry-wrap > .post-meta li#alage img {
        width: 24px !important;
        height: 24px !important;
        border-width: 1px !important;
        margin: 0 1px !important;
    }

    /* 文章标题（兼容无 .post-entry-wrap 包裹的旧结构）*/
    .post h2.entry-title,
    .post-title,
    .post h2 > a {
        font-size: 19px !important;
        line-height: 1.5 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        color: #5a4a32;
    }

    /* 特色图片 */
    .post-thumb img,
    .post-thumbnail img,
    .wp-post-image {
        max-width: 100% !important;
        height: auto !important;
        display: block;
        border-radius: 4px;
    }

    /* 元信息（日期、分类、作者）通用 */
    .entry-meta,
    .post-meta {
        font-size: 12px;
        color: #9a8c70;
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    /* 继续阅读按钮（兼容旧 .more-link）*/
    .more-link,
    a.read-more-btn {
        display: inline-block;
        padding: 6px 18px;
        font-size: 13px;
        border-radius: 20px;
        margin-top: 8px;
        color: #a07848;
    }
    /* 桌面端风格的「继续阅读 →」内联链接 */
    .post-excerpt-body .read-more {
        color: #a07848 !important;
        font-size: 13px !important;
        display: inline-block;
        padding: 4px 0;
        text-decoration: none;
    }
    .post-excerpt-body .read-more:active { color: #5a4a32 !important; }

    /* 分页 */
    .pagination,
    .page-navigator {
        padding: 16px 0 !important;
        text-align: center;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 13px;
    }
    .pagination a,
    .page-navigator a,
    .pagination span,
    .page-navigator span {
        padding: 6px 10px;
        display: inline-block;
        min-width: 32px;
    }

    /* ========== 5. 单篇文章阅读页 ========== */

    /* 文章标题 */
    .single-post .post h1,
    .single-post .entry-title,
    #axjx_box .post h1,
    .single .post-title {
        font-size: 23px !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
    }

    /* 正文区域 */
    .post-content,
    .entry-content,
    .single-post .post-content {
        font-size: 16px !important;
        line-height: 1.8 !important;
        color: #333 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* 正文图片：绝不溢出屏幕 */
    .post-content img,
    .entry-content img,
    .post-content figure,
    .entry-content figure {
        max-width: 100% !important;
        height: auto !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .post-content img.alignleft,
    .entry-content img.alignleft {
        float: none;
        display: block;
        margin: 12px auto;
    }
    .post-content img.alignright,
    .entry-content img.alignright {
        float: none;
        display: block;
        margin: 12px auto;
    }

    /* 胶带装饰图片效果：移动端缩小角度 */
    .post-content p > img,
    .entry-content p > img {
        transform: none !important;  /* 移动端取消旋转，避免裁切 */
    }

    /* 标题字号递减 */
    .post-content h2 { font-size: 20px !important; margin-top: 24px; }
    .post-content h3 { font-size: 18px !important; margin-top: 20px; }
    .post-content h4 { font-size: 17px !important; margin-top: 18px; }
    .post-content h5 { font-size: 16px !important; }
    .post-content h6 { font-size: 15px !important; }

    /* 列表间距 */
    .post-content ul,
    .post-content ol {
        padding-left: 22px !important;
        margin-bottom: 14px;
    }
    .post-content li { margin-bottom: 4px; }

    /* 引用块 */
    .post-content blockquote {
        margin: 14px 0 !important;
        padding: 10px 14px !important;
        font-size: 15px;
    }

    /* 代码块：横向滚动 */
    .post-content pre,
    .post-content code {
        font-size: 13px !important;
        word-break: break-all;
        white-space: pre-wrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .post-content pre {
        margin: 12px -14px !important;  /* 抵消 postbox 左右内边距，让代码触边 */
        padding: 12px 14px !important;
        max-width: calc(100% + 28px);  /* 允许略超出 */
        border-radius: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 表格响应式：包裹在可滚动容器中 */
    .post-content table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 14px;
        margin: 12px -14px !important;
        border-radius: 0;
    }
    .post-content th,
    .post-content td {
        padding: 8px 10px !important;
        white-space: nowrap;
    }

    /* 视频嵌入自适应 */
    .post-content iframe,
    .post-content video {
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
    .post-content iframe[style*="height"] {
        height: auto !important;
    }

    /* ========== 6. 评论区移动端优化（v1.2.85 保留桌面端米色卡片）==========
       不重置 .comment-list > li 的 background/border/border-radius，
       让桌面端「#fdfbf5 米色 + 1px #ece0cd 边框 + 10px 圆角 + 悬浮阴影」自然继承，
       仅缩内边距、字号、头像尺寸；标题沿用桌面端「共有 X 条评论」棕红色 #6b4a23。 */
    #comments {
        margin-top: 18px !important;
        padding-top: 14px !important;
    }
    .comments-title {
        font-size: 15px !important;
        color: #6b4a23 !important;
        margin: 0 0 14px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #e8dcc8 !important;
        letter-spacing: 1px;
    }
    .comment-list {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    /* 评论卡片：缩内边距、缩小间距；样式细节由桌面端 .comment-list > li 继承 */
    .comment-list > li {
        padding: 12px 14px !important;
        margin: 0 0 16px 0 !important;
        border-radius: 8px !important;
    }
    .comment-list > li:last-child { margin-bottom: 0 !important; }
    .comment-list > li:not(:last-child)::after {
        left: 14px !important;
        right: 14px !important;
        bottom: -8px !important;            /* 落在 16px 下边距间隙正中 */
    }
    /* 子评论（回复）卡片 */
    .comment-children {
        margin-left: 8px !important;
        margin-top: 10px !important;
        padding-left: 0 !important;
    }
    .comment-children .comment-children { margin-left: 6px !important; margin-top: 8px !important; }
    .comment-children > li {
        padding: 10px 12px !important;
        margin: 0 0 8px 0 !important;
        border-radius: 6px !important;
    }
    .comment-body {
        padding: 0 !important;
        display: block !important;
        clear: both;
    }
    /* v1.2.80 加固：确保评论作者（头像 + 名字）在移动端一定可见、横向排列。
       v1.2.85：保留桌面端 36px 头像 + #f0e6d6 描边 + 暖棕阴影，只在特别窄屏降为 32px。 */
    .comment-author {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 6px !important;
        line-height: normal !important;
    }
    .comment-author .fn {
        display: inline !important;
        font-size: 14px !important;
        color: #6b4a28 !important;
        font-weight: 700 !important;
        letter-spacing: .5px !important;
    }
    .comment-author img,
    .comment-author .avatar,
    .comment-body .avatar {
        display: inline-block !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        margin-right: 10px !important;
        flex-shrink: 0 !important;
        border: 2px solid #f0e6d6 !important;
        box-shadow: 0 1px 4px rgba(80,50,20,.12) !important;
        object-fit: cover !important;
    }
    /* 楼层之间的虚线分隔：在两张楼层卡片的「空白间隙正中」画一条独立的虚线。 */
    .comment-list > li:not(:last-child)::after {
        left: 14px !important;
        right: 14px !important;
        bottom: -8px !important;
        border-top: 1px dashed #d8c7a6 !important;
    }
    /* 评论元信息（时间/楼层） */
    .comment-meta {
        font-size: 12px !important;
        color: #a89878 !important;
        margin-left: 46px !important;
        display: block !important;
        margin-top: 4px !important;
    }
    /* 回复缩进减少 */
    .comment-children {
        margin-left: 24px !important;
        padding-left: 0 !important;
    }
    .comment-actions {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        margin-left: 46px !important;
    }
    /* 评论表单 */
    #respond {
        padding: 14px !important;
        background: #fdfbf5;
        border: 1px solid #ece0cd;
        border-radius: 10px;
        margin-top: 14px !important;
        box-shadow: 0 1px 4px rgba(80,50,20,.06);
    }
    #respond textarea {
        min-height: 100px;
        font-size: 16px;  /* iOS 防止自动缩放 */
    }
    #respond input[type="text"],
    #respond input[type="email"],
    #respond input[type="url"] {
        width: 100% !important;
        box-sizing: border-box;
        font-size: 16px;
        padding: 10px 12px;
    }

    /* ========== 7. 顶部导航 → 顶栏正下方全宽下拉面板（v1.2.71 重建）==========
       v1.2.68 用的是「右上角 200px 小面板」(position:fixed; right:8px; width:200px)，
       它处在 #book-right(relative) 内部，叠加桌面书签 margin-left:-60px 残留偏移，
       极易整体错位、链接被推到面板外导致「点不到」。
       v1.2.71 改为「顶栏正下方全宽下拉」(left:0;right:0;width:100%)：
       链接全宽块级、居中、可点区域大，彻底规避定位与负边距问题。
       v1.2.74 关键修复：抽屉展开时强制 .nav-box 撑满「顶栏以下」全部屏幕高度。
       原因：之前只让 .nav-box display:block + 内容自适应高度，但首页文章列表
       (.post 卡片 / .tags 标签云等) 紧接着 .nav-box 下方，抽屉只展开到自己
       内容高度（9 个导航 ~450px），下面的文章卡片与深绿色 #099 标签云就会
       从抽屉外的区域"漏出来"——用户截图反馈"导航下面有几个被截掉的深绿色方块"
       正是这个原因。让 .nav-box 全屏覆盖即可从源头杜绝下方元素漏出。 */
    /* v1.2.85：抽屉视觉贴合书页。
       米黄底 #f1eee3 与桌面端右页纸张同色；左侧加一条 4px 深棕「书脊感」竖条（#8b6b4a），
       强化「翻开的书」隐喻；链接色用桌面端棕红 #5a4a32，hover #a07848 与桌面端一致。 */
    .nav-box {
        display: none !important;            /* 默认隐藏 */
        position: fixed !important;
        top: 44px !important;                 /* 紧贴顶栏下方 */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 720px !important;          /* 与右页对齐，中小屏居中 */
        margin: 0 auto !important;
        padding: 0 0 0 4px !important;        /* 左侧留 4px 给书脊条 */
        background: #f1eee3 url(../static/book-img/book-bg2.png) repeat-y left top !important;
        background-size: 100% auto;
        border-top: 1px solid #d4c8a8 !important;
        border-left: 4px solid #8b6b4a;       /* 书脊感竖条 */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
        z-index: 10001 !important;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.18s ease, transform 0.18s ease;
        overflow: visible !important;
        touch-action: pan-y;
    }
    /* 汉堡点击后（body.drawer-open）展开面板 + 全屏覆盖 */
    body.drawer-open .nav-box {
        display: flex !important;            /* 用 flex 让内容上下居中/单列 */
        flex-direction: column;
        opacity: 1;
        transform: translateY(0);
        /* v1.2.74 核心修复：让抽屉背景填满「顶栏以下」全部屏幕高度，挡住下方
           文章列表 / 标签云 / 桌面端边角按钮等所有可能漏出的元素。
           抽屉内的 #nav-menu 用 flex:1 + overflow-y:auto 独立滚动，
           这样导航多了也能在抽屉内滚，而不是把整页滚出去。 */
        height: calc(100vh - 44px) !important;
        height: calc(100dvh - 44px) !important;  /* dvh 适配 iOS Safari 工具条 */
        max-height: calc(100vh - 44px) !important;
        min-height: 0 !important;
    }
    /* 抽屉内的导航链接：全宽块级、居中、可点区域大 */
    #nav-menu {
        display: block !important;
        margin: 0 !important;
        padding: 8px 0 !important;            /* 与抽屉上下边缘留出 8px 内边距 */
        white-space: normal !important;
        /* v1.2.74：抽屉独立滚动，导航多了不会让整页跟着滚 */
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
    #nav-menu > a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        line-height: 1.5 !important;
        text-align: center !important;        /* 简练居中，移动端更好点 */
        padding: 14px 16px !important;
        margin: 0 !important;
        font-size: 15px !important;
        color: #5a4a32 !important;            /* 桌面端棕红，与卡片标题同色 */
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        border-bottom: 1px solid #e8dfd0 !important;
        border-radius: 0 !important;
        letter-spacing: 0;
    }
    #nav-menu > a:last-child { border-bottom: 0 !important; }
    #nav-menu > a:hover,
    #nav-menu > a.current,
    #nav-menu > a:active {
        background: #e8dfd0 !important;
        color: #6e4f2f !important;
    }
    /* 桌面端那种「藏在书页后只露 2 字」的 margin-left 偏移在抽屉里必须清掉 */
    #nav-menu > a[style*="margin-left"] { margin-left: 0 !important; }
    .page-s { display: none !important; }    /* 隐藏导航分隔符 */

    /* ========== 8. 隐藏桌面专属装饰元素 ========== */
    #closed, #fullScreen, #tea_box, #chiji_box,
    #music_record, #music_rod, #music_box_bj,
    #music_volume, #music_v_box, #music_volume_c,
    #music_box, #music_name,
    .book-shadow, .closed_txt, #book-open-hit,
    .nav-z {
        display: none !important;
    }

    /* 移动端不要音乐按钮（用户 v1.2.69 反馈：pwsz.com 移动版很简练，不需音乐） */
    .diary-music-btn { display: none !important; }

    /* ========== 8.5 v1.2.74 移动端 .tags 标签云 reset ==========
       桌面端 .tags a 是 display:block; width:5em; background:#099; color:#fff;
       三个标签会竖向堆叠成三个「深绿色 5em 方块」——移动端看起来像奇怪的快捷按钮。
       移动端重置为普通行内浅色链接，跟随文字流、可换行、不抢眼。 */
    .tags {
        margin: 8px 0 4px !important;
        padding: 0 !important;
        line-height: 1.8 !important;
    }
    .tags a {
        display: inline-block !important;
        width: auto !important;
        margin: 0 6px 4px 0 !important;
        padding: 2px 8px !important;
        background: #f1eee3 !important;       /* 与米色背景同色，几乎不显眼 */
        color: #6e4f2f !important;
        border: 1px solid #d4c8a8 !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        text-decoration: none !important;
    }
    .tags a:active {
        background: #e8dfd0 !important;
    }

    /* ========== 8.6 v1.2.74 移动端 .post-excerpt-row 竖排 reset（v1.2.85 重写）==========
       v1.2.85 改造：缩略图宽度从「120px !important」改为「70% / max 240px」居中放大，
       恢复拍立得白边 + 阴影 + 轻微 rotate(-1deg) 旋转——和桌面端卡片观感一致。
       老规则强制 120px 太窄，又 transform:none 取消旋转，导致手机端缩略图看起来
       像「一个孤零零的小方块」，失去卡片悬浮感。 */
    .post-excerpt-row {
        display: block !important;
        gap: 0 !important;
    }
    .post-excerpt-row > .post-thumb,
    .post-excerpt-row > .post-thumb-default {
        display: block !important;
        width: 70% !important;
        max-width: 240px !important;        /* 上限 240px，太宽在卡片里不协调 */
        height: auto !important;
        margin: 0 auto 10px !important;     /* 居中 + 下方留 10px */
        float: none !important;
        border: 4px solid #fff !important;  /* 保留拍立得白边 */
        outline: 1px solid #e3d8c2;
        box-shadow: 0 2px 8px rgba(80,50,20,.14);
        transform: rotate(-1deg);            /* 保留桌面端 -1° 旋转 */
        background: #f3ecdc;
        border-radius: 3px;
        overflow: hidden;
    }
    .post-excerpt-row > .post-thumb img,
    .post-excerpt-row > .post-thumb-default img {
        width: 100% !important;
        height: auto !important;
        min-height: 110px;
        max-height: 160px;
        display: block !important;
        object-fit: cover;
    }
    .post-excerpt-body {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
    }
    /* 摘要正文：去掉首行缩进，紧凑排版 */
    .post-excerpt-body .post-content { margin: 0 !important; }
    .post-excerpt-body .post-content p {
        text-indent: 0 !important;
        padding: 0 0 .4em 0 !important;
        line-height: 1.7 !important;
        color: #555 !important;
        font-size: 14px !important;
    }
    .post-excerpt-body .tags { margin-top: 6px !important; }

    /* ========== 9.5 v1.2.85 首页欢迎语（welcome-post）移动端微调 ==========
       桌面端「欢迎来到我的日记本 / ← 请从左侧目录选择一篇阅读…」中
       「左侧目录」在手机端已隐藏；保留欢迎语但去掉已不存在的提示。 */
    .welcome-post {
        margin: 0 0 18px !important;
        padding: 16px 14px !important;
        background: #fdfbf5;
        border: 1px solid #ece0cd;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(80,50,20,.06);
        text-align: center;
    }
    .welcome-post .post-content p {
        text-indent: 0 !important;
        padding: 4px 0 !important;
        color: #b0a080;
        font-style: italic;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
    .welcome-post .post-content small {
        font-size: 11px !important;
        color: #c0b898 !important;
    }
    .catalog-header {
        padding: 10px 12px 6px;
    }
    .catalog-title {
        font-size: 16px;
        font-weight: 700;
    }
    #catalog-tree {
        padding: 6px 12px !important;
        font-size: 14px;
    }
    .tree-year-h,
    .tree-month-h {
        padding: 10px 4px !important;
    }
    .tree-article a {
        padding: 6px 4px !important;
        display: block;
    }

    /* ========== 9. 目录树（抽屉内）v1.2.85：补充目录树章节注释 ========== */

    /* ========== 10. 手风琴移动端 ========== */
    .diary-accordion { padding: 8px; }
    .da-cat-h, .da-item-h {
        padding: 12px 10px !important;
        font-size: 15px !important;
    }
    .da-item-desc {
        font-size: 14px !important;
        padding: 8px 10px !important;
    }
    .da-item-img img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ========== 11. Lightbox 灯箱移动端 ========== */
    .diary-lightbox-overlay { z-index: 20000; }
    .diary-lightbox-box { width: 95vw !important; max-width: none !important; }
    .diary-lightbox-close { top: 8px; right: 8px; }
    .diary-lightbox-prev,
    .diary-lightbox-next {
        width: 40px; height: 40px;
        font-size: 28px;
    }

    /* ========== 12. 友情链接卡片移动端 ========== */
    .link-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ========== 13. 底部页脚（v1.2.71：手机版不再显示页脚信息）==========
       按用户要求，移动端「一切以优先手机访问为主」，底部不显示站点名/备案号等，
       让内容区域更聚焦、减少无谓的纵向空间占用。桌面端页脚保持原样。 */
    #footer,
    .site-footer,
    footer {
        display: none !important;
    }

    /* ========== 14. NProgress 加载条层级修正 ========== */
    #nprogress .bar { z-index: 20001 !important; }
    #nprogress .peg { z-index: 20001 !important; }

    /* ========== 15. 完全隐藏 PerfectScrollbar（移动端用原生滚动）========== */
    #secondary.ps,
    #postbox.ps {
        overflow-y: auto !important;
    }
    #secondary .ps__rail-x,
    #secondary .ps__rail-y,
    #postbox .ps__rail-x,
    #postbox .ps__rail-y {
        display: none !important;
    }

    /* ========== 16. v1.2.74 抽屉展开时彻底隐藏「可能从抽屉外漏出」的元素 ==========
       即使 .nav-box 已全屏覆盖，下方保险起见把所有桌面端遗留的书页边角元素、
       桌面端快捷入口、文章底部标签云与前后篇导航 在 drawer-open 状态下
       强制 display:none，杜绝任何元素"在抽屉外被看见"的可能。
       关闭抽屉（用户浏览内容）时这些规则失效，元素恢复正常显示。 */
    body.drawer-open .tags,
    body.drawer-open .post-near,
    body.drawer-open .post-nav,
    body.drawer-open #rightSchedule,
    body.drawer-open #editpost,
    body.drawer-open #img_top_box,
    body.drawer-open #img_top_box_bg,
    body.drawer-open #img_top_box_bg2,
    body.drawer-open #img_title_q,
    body.drawer-open #footer-admin,
    body.drawer-open #shoujizhuye,
    body.drawer-open .pagination,
    body.drawer-open .comment-pagination {
        display: none !important;
    }
}

/* ---------- 平板（769px–1024px）微调：中等屏幕过渡 ---------- */