/* =============================================================================
   中国神鬼录 · 前台 UI 增强层  (tgd-ui.css)
   -----------------------------------------------------------------------------
   设计原则：
     1. 保留主题原有的「桌面资源管理器」视觉隐喻（窗口框 / 工具栏 / 面包屑），
        这是站点辨识度所在，不做推倒重来。
     2. 只修复真实缺陷 + 精修细节 + 补齐响应式，不引入新框架。
     3. 所有覆盖都带注释说明「原问题是什么」，便于后续维护。

   加载顺序：必须排在 style.css 之后（functions.php 里用 wp_enqueue_style 依赖声明）
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. 设计令牌
   -------------------------------------------------------------------------- */
:root {
    --tgd-paper: #f6f3ed;          /* 纸色底 */
    --tgd-paper-2: #fffdf9;
    --tgd-ink: #2a2723;            /* 墨色正文 */
    --tgd-ink-2: #5d574f;          /* 次级文字 */
    --tgd-ink-3: #8d867c;          /* 弱化文字 */
    --tgd-line: #e5dfd4;           /* 分隔线 */
    --tgd-line-2: #d8d0c2;
    --tgd-cinnabar: #a4262c;       /* 朱砂 · 主强调色 */
    --tgd-cinnabar-2: #c0392f;
    --tgd-cinnabar-soft: #f7ece9;
    --tgd-gold: #b08d4f;
    --tgd-shadow-sm: 0 1px 2px rgba(42, 39, 35, .06);
    --tgd-shadow-md: 0 2px 12px rgba(42, 39, 35, .08);
    --tgd-shadow-lg: 0 12px 40px rgba(42, 39, 35, .16);
    --tgd-radius: 6px;
    --tgd-nav-h: 46px;             /* 移动端工具栏高度 */
    --tgd-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tgd-font-serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC", Georgia, serif;
}

/* -----------------------------------------------------------------------------
   1. 全局基础
   -------------------------------------------------------------------------- */

/* 原问题：* { font-family: "Microsoft YaHei" } 通配符覆盖一切，连图标字体
   （layui-icon / font-awesome）都被改成雅黑，导致图标变成方块。
   修复：只在 body 上设字体，图标类强制继承自身字体族。 */
body {
    font-family: var(--tgd-font);
    background: var(--tgd-paper);
    color: var(--tgd-ink);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

.layui-icon,
[class^="layui-icon-"],
[class*=" layui-icon-"],
.fa, .fas, .far, .fab,
[class^="fa-"], [class*=" fa-"] {
    font-family: "layui-icon", "FontAwesome" !important;
}

/* 原问题：链接 hover 统一变 #333，与强调色体系冲突，且点击态无反馈 */
#main a {
    color: var(--tgd-ink);
    text-decoration: none;
    transition: color .15s ease;
}
#main a:hover {
    color: var(--tgd-cinnabar);
}
#main a:active {
    opacity: .7;
}

/* 全局可访问性：键盘焦点可见（原来完全没有焦点样式） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--tgd-cinnabar);
    outline-offset: 2px;
    border-radius: 3px;
}

/* 平滑滚动 + 锚点偏移（顶部固定工具栏会遮挡锚点） */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--tgd-nav-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* -----------------------------------------------------------------------------
   2. 窗口主体 #main
   -------------------------------------------------------------------------- */

/* 原问题：padding: 2px 让内容紧贴边框，视觉拥挤；圆角缺失 */
#main {
    background: var(--tgd-paper-2);
    border: 1px solid var(--tgd-line);
    border-radius: var(--tgd-radius);
    box-shadow: var(--tgd-shadow-md);
    padding: 0;
    overflow: hidden;              /* 让内部圆角裁切生效 */
    margin-top: 20px;
}

/* 标题栏 —— 桌面窗口的「标题条」，保留隐喻并做精修 */
.blog-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #fdfbf7 0%, #f4f0e8 100%);
    border-bottom: 1px solid var(--tgd-line);
    font-weight: 600;
    letter-spacing: .01em;
    user-select: none;
    font-size: 15px;
}

/* 原问题：.close 用 float:right + 固定宽高，和 flex 布局打架，垂直不居中 */
.close {
    float: none;
    margin-left: auto;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    background: transparent;
    transition: background .15s ease, color .15s ease;
    cursor: pointer;
}
.close:hover {
    background: var(--tgd-cinnabar);
    color: #fff;
}
.close:hover a,
.close:hover i {
    color: #fff !important;
}

/* 面包屑（原 .toolbar-url）：长路径必须可横向滚动，不能撑破布局 */
.toolbar-url {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    border: 1px solid var(--tgd-line);
    border-radius: 4px;
    background: var(--tgd-paper-2);
    padding: 3px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    cursor: default;
    min-height: 32px;
}
.toolbar-url::-webkit-scrollbar { display: none; }

.toolbar-url span {
    flex: 0 0 auto;                 /* 关键：不换行、不压缩 */
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    white-space: nowrap;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    color: var(--tgd-ink-2);
}
.toolbar-url span:hover {
    background: var(--tgd-cinnabar-soft);
    border-color: var(--tgd-cinnabar-soft);
}
.toolbar-url span:last-child {
    color: var(--tgd-ink);
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   3. 工具栏 / 导航
   -------------------------------------------------------------------------- */
.toolbar {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--tgd-line);
    background: var(--tgd-paper-2);
}

.obj_menu_header { min-width: 0; }   /* 让子元素可以正确收缩 */

/* 桌面端横向菜单：保留原样，仅优化触感 */
.menu_header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu_header > li {
    position: relative;
    min-width: auto;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    line-height: 1.4;
    font-size: 14px;
    transition: background .15s ease, border-color .15s ease;
}
.menu_header > li:hover,
.menu_header > li:focus-within {
    background: var(--tgd-cinnabar-soft);
    border-color: #f0ded9;
}
.menu_header .sub-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 999;
    min-width: 160px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--tgd-line);
    border-radius: var(--tgd-radius);
    box-shadow: var(--tgd-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    /* 隐藏时给 visibility 加一点延迟：鼠标快速划过不会立刻收起来 */
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .18s;
}

/* ★ 关键修复 —— 二级菜单点不到
   原问题：一级项与二级菜单之间有 4px 空隙（top: calc(100% + 4px)）。
   鼠标从一级项移向二级项时会经过这段空隙，此刻既不在 li 的 :hover 内、
   也还没进入 .sub-menu，:hover 链断开 → 二级菜单瞬间收起，
   结果就是「二级菜单刚出现，想点它就没了」。
   修复：用一块透明伪元素把这段空隙「搭桥」，
   让鼠标在两级之间移动时始终处于 hover 链内。 */
.menu_header .menu-item-has-children > .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;          /* 覆盖 4px 空隙 + 8px 余量，向上接住一级项 */
    height: 14px;
}

.menu_header .sub-menu li {
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 14px;
}
.menu_header .sub-menu li:hover {
    background: var(--tgd-cinnabar-soft);
}
/* 用 opacity/visibility 代替原来的 display:none，动画才生效 */
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

/* 返回/前进/向上 按钮组：加大点击区域（原来 30px 行高，手机上太难点） */
.toobar-col {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--tgd-ink-3);
    line-height: 1;
}
.toobar-col i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.toobar-col i:hover {
    background: var(--tgd-cinnabar-soft);
    color: var(--tgd-cinnabar);
}

/* 搜索框 */
.toolbar-search {
    display: flex;
    align-items: center;
    margin: 0;
    border: 1px solid var(--tgd-line);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.toolbar-search:focus-within {
    border-color: var(--tgd-cinnabar);
    box-shadow: 0 0 0 3px rgba(164, 38, 44, .08);
}
.toolbar-search input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 0;
    background: transparent;
    font-size: 14px;
    color: var(--tgd-ink);
}
.toolbar-search input:focus { outline: none; }
.toolbar-search input::placeholder { color: var(--tgd-ink-3); }

/* -----------------------------------------------------------------------------
   4. 内容区
   -------------------------------------------------------------------------- */

/* 原问题（重要缺陷）：.post-content { max-height: 600px; overflow: auto }
   → 桌面端内容被塞进一个 600px 的盒子里产生「双层滚动条」，
     手机上更糟：内层滚动 + 页面滚动互相打架，滚动体验完全错乱。
   修复：桌面端放开高度限制；移动端一律改为自然高度。 */
.post-content {
    padding: 20px 24px 28px;
    max-height: none;
    overflow: visible;
}
.post-content-content {
    min-height: 0;
    line-height: 1.85;
    font-size: 16px;
    color: var(--tgd-ink);
}

/* 正文排版精修 */
.post-content-content p {
    margin: 0 0 1.1em;
    line-height: 1.9;
    letter-spacing: .01em;
}
.post-content-content h1,
.post-content-content h2,
.post-content-content h3,
.post-content-content h4 {
    font-family: var(--tgd-font-serif);
    color: var(--tgd-ink);
    line-height: 1.45;
    margin: 1.8em 0 .8em;
    font-weight: 700;
}
.post-content-content h2 {
    padding-bottom: .4em;
    border-bottom: 1px solid var(--tgd-line);
    font-size: 1.35em;
    position: relative;
}
/* 朱砂色小标，替代原来的纯灰底线，呼应古籍刻本的鱼尾 */
.post-content-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 2px;
    background: var(--tgd-cinnabar);
}
.post-content-content h3 { font-size: 1.18em; }
.post-content-content ul,
.post-content-content ol {
    padding-left: 1.6em;
    margin: 0 0 1.1em;
}
.post-content-content li { margin: .45em 0; line-height: 1.85; }
.post-content-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin: 1.2em auto;
}
.post-content-content a {
    color: var(--tgd-cinnabar);
    border-bottom: 1px solid rgba(164, 38, 44, .3);
}
.post-content-content a:hover {
    border-bottom-color: var(--tgd-cinnabar);
}
.post-content-content blockquote {
    position: relative;
    margin: 1.6em 0;
    padding: 14px 20px 14px 46px;
    border-radius: var(--tgd-radius);
    background: var(--tgd-paper);
    border-left: 3px solid var(--tgd-gold);
    color: var(--tgd-ink-2);
}
.post-content-content blockquote::before {
    top: 16px;
    left: 16px;
}
.post-content-content blockquote::after { display: none; }
.post-content-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    background: var(--tgd-paper);
    border: 1px solid var(--tgd-line);
    border-radius: 3px;
    padding: 1px 5px;
}
.post-content-content pre {
    background: #faf8f4;
    border: 1px solid var(--tgd-line);
    border-radius: var(--tgd-radius);
    padding: 14px 16px;
    overflow-x: auto;
    line-height: 1.65;
}
.post-content-content pre code {
    background: none;
    border: 0;
    padding: 0;
}

/* 原问题：正文表格字号 11px + 全边框重线，手机上必然横向溢出且不可读。
   修复：改为表头浅底、仅横线、外层可横向滚动。 */
.post-content-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    font-family: inherit;
    font-size: 14px;
    color: var(--tgd-ink);
    border: 1px solid var(--tgd-line);
    border-radius: var(--tgd-radius);
    margin: 1.4em 0;
}
.post-content-content th {
    background: var(--tgd-paper);
    border: 0;
    border-bottom: 1px solid var(--tgd-line-2);
    padding: 10px 12px;
    font-weight: 600;
    white-space: nowrap;
    text-align: left;
}
.post-content-content td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tgd-line);
    padding: 10px 12px;
    vertical-align: top;
}
.post-content-content tr:last-child td { border-bottom: 0; }

/* -----------------------------------------------------------------------------
   5. 列表页
   -------------------------------------------------------------------------- */
.postlist { min-height: 0; overflow: visible; }

.post-namelist-title {
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--tgd-line);
    background: var(--tgd-paper);
    color: var(--tgd-ink-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    user-select: none;
}
.post-namelist-title:hover { background: var(--tgd-paper); }

.post-list-post {
    padding: 11px 12px;
    border-bottom: 1px solid var(--tgd-line);
    transition: background .13s ease;
    align-items: center;
}
.post-list-post:hover { background: var(--tgd-cinnabar-soft) !important; }
.post-list-post a { font-size: 14.5px; }

.postlist-table-icon {
    width: 15px;
    height: 15px;
    margin-right: 7px;
    vertical-align: -2px;
    opacity: .8;
}

.view {
    text-align: right;
    padding-right: 12px;
    color: var(--tgd-ink-3);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* 分页 */
.posts-nav {
    text-align: center;
    padding: 18px 0 22px;
    border-top: 1px solid var(--tgd-line);
}
.page-numbers {
    display: inline-block;
    min-width: 34px;
    padding: 7px 10px;
    margin: 0 2px;
    background: #fff;
    border: 1px solid var(--tgd-line);
    border-radius: 4px;
    color: var(--tgd-ink-2);
    font-size: 13px;
    transition: all .15s ease;
}
.page-numbers:hover {
    background: var(--tgd-cinnabar-soft);
    border-color: var(--tgd-cinnabar);
    color: var(--tgd-cinnabar);
}
.page-numbers.current {
    background: var(--tgd-cinnabar);
    border-color: var(--tgd-cinnabar);
    color: #fff;
}

/* -----------------------------------------------------------------------------
   6. 侧栏
   -------------------------------------------------------------------------- */

/* 原问题：.sidebar { display:none } 且 max-height:600px; overflow:auto
   → 侧栏在桌面端被 JS/内联样式控制显示，但又自带一个 600px 内滚动区，
     和正文的 600px 内滚动叠加，页面出现三条滚动条。
   修复：去掉内滚动，交给页面自然滚动。 */
.sidebar {
    border-right: 1px solid var(--tgd-line);
    max-height: none;
    overflow: visible;
    padding: 8px 0;
}

.sidebar-cat-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--tgd-paper);
    border-bottom: 1px solid var(--tgd-line);
    color: var(--tgd-ink-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    user-select: none;
}
.sidebar-cat-title:hover { background: var(--tgd-paper); }

.sidebar-cat li,
.widget li {
    padding: 9px 16px 9px 22px;
    border-bottom: 1px solid #f2eee7;
    font-size: 14px;
    color: var(--tgd-ink-2);
    transition: background .13s ease, padding-left .13s ease;
    user-select: none;
}
.sidebar-cat li:hover,
.widget li:hover {
    background: var(--tgd-cinnabar-soft);
    padding-left: 26px;
}
.sidebar-cat li a,
.widget li a { color: var(--tgd-ink-2); }
.sidebar-cat li:hover a,
.widget li:hover a { color: var(--tgd-cinnabar); }

.widget { padding: 0 0 8px; }
.widget:after { content: ""; display: block; clear: both; }

/* -----------------------------------------------------------------------------
   7. 评论区
   -------------------------------------------------------------------------- */
.comment_form_textarea {
    height: 110px;
    width: 100%;
    border: 1px solid var(--tgd-line);
    border-radius: var(--tgd-radius);
    margin-top: 16px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.7;
    resize: vertical;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.comment_form_textarea:focus {
    outline: none;
    border-color: var(--tgd-cinnabar);
    box-shadow: 0 0 0 3px rgba(164, 38, 44, .08);
}
.comment_form_input input {
    border: 1px solid var(--tgd-line);
    border-radius: var(--tgd-radius);
    margin-top: 8px;
    min-height: 40px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.comment_form_input input:focus {
    outline: none;
    border-color: var(--tgd-cinnabar);
    box-shadow: 0 0 0 3px rgba(164, 38, 44, .08);
}
.button_submit {
    box-shadow: none;
    border: 0;
    background: var(--tgd-cinnabar);
    color: #fff;
    padding: 11px 26px;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.button_submit:hover {
    background: var(--tgd-cinnabar-2);
}
.button_submit:active { transform: translateY(1px); }

#comments { padding-bottom: 32px; line-height: 1.7; }

.comments-title {
    position: relative;
    padding-bottom: 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--tgd-ink);
    border-bottom: 1px solid var(--tgd-line);
}
h3.comments-title::after {
    top: auto;
    bottom: -1px;
    width: 56px;
    height: 2px;
    background: var(--tgd-cinnabar);
}
.commentCount { color: var(--tgd-cinnabar); }

.commentlist { list-style: none; margin: 12px 0 0; padding: 0; }
.commentlist ol { list-style: none; }
.commentlist > .comment { border-bottom: 1px solid #f2eee7; }
.comment { padding: 14px 0 8px; }
.comment .media-left img { border-radius: 50%; }
.comment .media-body .author_name { margin-bottom: 6px; font-size: 14px; color: var(--tgd-ink-2); font-weight: 600; }
.comment .media-body p { font-size: 14.5px; line-height: 1.8; color: var(--tgd-ink-2); }
.comment .comment-metadata { margin-left: 58px; padding: 6px 0; }
.comment .comment-metadata span { margin-right: 14px; font-size: 12px; color: var(--tgd-ink-3); }
.comment-from {
    display: inline-block;
    color: #fff;
    background: var(--tgd-cinnabar);
    border-radius: 3px;
    padding: 1px 6px;
    margin: 0 6px;
    font-size: 12px;
}
.comment-from a { color: #fff !important; }
.commentlist .children { padding-left: 46px; }

/* 邮箱验证码：输入框 + 获取按钮同一行，按钮固定不压缩 */
.tgd-code-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.tgd-code-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--tgd-line);
    border-radius: var(--tgd-radius);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: .14em;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tgd-code-input:focus {
    outline: none;
    border-color: var(--tgd-cinnabar);
    box-shadow: 0 0 0 3px rgba(164, 38, 44, .08);
}
.tgd-code-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--tgd-cinnabar);
    border-radius: var(--tgd-radius);
    background: var(--tgd-cinnabar);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}
.tgd-code-btn:hover { background: var(--tgd-cinnabar-2); }
.tgd-code-btn:disabled,
.tgd-code-btn.is-wait {
    background: var(--tgd-ink-3);
    border-color: var(--tgd-ink-3);
    opacity: .65;
    cursor: default;
}
.tgd-code-tip {
    margin: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--tgd-ink-3);
}
.tgd-code-tip.is-ok { color: #2e7d32; }
.tgd-code-tip.is-err { color: var(--tgd-cinnabar); }

/* -----------------------------------------------------------------------------
   8. 移动端汉堡按钮 + 抽屉（默认隐藏，≥992px 不出现）
   -------------------------------------------------------------------------- */
.tgd-nav-toggle,
.tgd-drawer,
.tgd-backdrop {
    display: none;
}

.tgd-nav-toggle {
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    min-width: 42px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--tgd-line);
    border-radius: 4px;
    background: #fff;
    color: var(--tgd-ink-2);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tgd-nav-toggle:hover,
.tgd-nav-toggle:active {
    background: var(--tgd-cinnabar-soft);
    border-color: var(--tgd-cinnabar);
    color: var(--tgd-cinnabar);
}
/* 三条杠图标：纯 CSS 绘制，不依赖字体图标 */
.tgd-nav-toggle .bars {
    position: relative;
    width: 16px;
    height: 12px;
    flex: 0 0 auto;
}
.tgd-nav-toggle .bars i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform .22s ease, opacity .18s ease, top .22s ease;
}
.tgd-nav-toggle .bars i:nth-child(1) { top: 0; }
.tgd-nav-toggle .bars i:nth-child(2) { top: 5px; }
.tgd-nav-toggle .bars i:nth-child(3) { top: 10px; }
.tgd-nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.tgd-nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.tgd-nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { top: 5px; transform: rotate(-45deg); }

/* 遮罩 */
.tgd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(30, 26, 22, .46);
    opacity: 0;
    transition: opacity .26s ease;
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}
.tgd-backdrop.is-open { opacity: 1; }

/* 抽屉本体：从右侧滑入 */
.tgd-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    width: min(330px, 84vw);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--tgd-paper-2);
    box-shadow: -8px 0 32px rgba(42, 39, 35, .2);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    /* 触摸滑动时禁用过渡，跟手 */
    will-change: transform;
    overscroll-behavior: contain;
}
.tgd-drawer.is-open { transform: translateX(0); }
.tgd-drawer.is-dragging { transition: none; }

/* 抽屉头部 */
.tgd-drawer-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--tgd-line);
    background: linear-gradient(180deg, #fdfbf7 0%, #f4f0e8 100%);
}
.tgd-drawer-head .title {
    font-size: 15px;
    font-weight: 600;
    color: var(--tgd-ink);
}
.tgd-drawer-head .sub {
    font-size: 12px;
    color: var(--tgd-ink-3);
}
.tgd-drawer-close {
    margin-left: auto;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tgd-line);
    border-radius: 4px;
    background: #fff;
    color: var(--tgd-ink-2);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.tgd-drawer-close:active {
    background: var(--tgd-cinnabar);
    border-color: var(--tgd-cinnabar);
    color: #fff;
}

/* 抽屉可滚动区 —— 这是「可以滑动」的关键 */
.tgd-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 12px 0 40px;
}

/* 抽屉内的搜索 */
.tgd-drawer-search {
    padding: 0 16px 14px;
}
.tgd-drawer-search .toolbar-search { margin: 0; }

/* 抽屉内的导航 */
.tgd-drawer-nav { list-style: none; margin: 0; padding: 0; }
.tgd-drawer-nav li {
    position: relative;
    border-bottom: 1px solid #f2eee7;
}
.tgd-drawer-nav a {
    display: block;
    padding: 13px 46px 13px 18px;
    font-size: 15px;
    color: var(--tgd-ink);
    line-height: 1.5;
}
.tgd-drawer-nav a:active { background: var(--tgd-cinnabar-soft); }

/* 子菜单手风琴展开按钮 */
.tgd-acc-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--tgd-ink-3);
    font-size: 13px;
    cursor: pointer;
}
.tgd-acc-btn i {
    transition: transform .2s ease;
    font-style: normal;
}
.tgd-drawer-nav li.is-open > .tgd-acc-btn i { transform: rotate(180deg); }

.tgd-drawer-nav .sub-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: var(--tgd-paper);
    min-width: 0;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .26s ease;
}
.tgd-drawer-nav li.is-open > .sub-menu {
    display: block;
    max-height: 1200px;   /* 足够容纳长菜单 */
}
.tgd-drawer-nav .sub-menu li { border-bottom: 1px solid #ece7dd; }
.tgd-drawer-nav .sub-menu li:last-child { border-bottom: 0; }
.tgd-drawer-nav .sub-menu a {
    padding-left: 34px;
    font-size: 14px;
    color: var(--tgd-ink-2);
}
.tgd-drawer-nav .sub-menu .sub-menu a { padding-left: 50px; }

/* 抽屉内的分组标题 */
.tgd-drawer-sec {
    padding: 18px 18px 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--tgd-ink-3);
    text-transform: uppercase;
}
.tgd-drawer-cats { list-style: none; margin: 0; padding: 0; }
.tgd-drawer-cats li { border-bottom: 1px solid #f2eee7; }
.tgd-drawer-cats a {
    display: block;
    padding: 11px 18px;
    font-size: 14px;
    color: var(--tgd-ink-2);
}
.tgd-drawer-cats a:active { background: var(--tgd-cinnabar-soft); }

/* 抽屉底部快捷操作 */
.tgd-drawer-foot {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--tgd-line);
    background: var(--tgd-paper);
}
.tgd-drawer-foot .tgd-btn { flex: 1 1 0; }

/* 打开抽屉时锁定页面滚动 */
body.tgd-drawer-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}

/* -----------------------------------------------------------------------------
   9. 通用按钮
   -------------------------------------------------------------------------- */
.tgd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid var(--tgd-line);
    border-radius: 4px;
    background: #fff;
    color: var(--tgd-ink-2);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
    user-select: none;
}
.tgd-btn:hover {
    background: var(--tgd-cinnabar-soft);
    border-color: var(--tgd-cinnabar);
    color: var(--tgd-cinnabar);
}
.tgd-btn:active { transform: translateY(1px); }
.tgd-btn-primary {
    background: var(--tgd-cinnabar);
    border-color: var(--tgd-cinnabar);
    color: #fff;
}
.tgd-btn-primary:hover {
    background: var(--tgd-cinnabar-2);
    border-color: var(--tgd-cinnabar-2);
    color: #fff;
}
.tgd-btn svg { flex: 0 0 auto; }

/* -----------------------------------------------------------------------------
   10. 响应式
   -------------------------------------------------------------------------- */

/* 中等屏幕：菜单开始变挤，切汉堡 */
@media (max-width: 991px) {
    body {
        background: var(--tgd-paper);
    }
    .layui-container {
        width: 100% !important;
        padding: 0 !important;
    }
    #main {
        margin: 0 !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        /* 关键：桌面端靠 overflow:hidden 裁出圆角窗口，
           但它会让下面 .toolbar 的 position:sticky 失效
           （overflow 非 visible 的祖先会变成 sticky 的滚动容器，
             而该容器自身不滚动 → 吸顶永远不触发）。
           移动端本来就 border-radius:0，不需要裁切，这里放开。 */
        overflow: visible;
        min-height: calc(100vh - var(--tgd-nav-h));
        background: var(--tgd-paper-2);
    }

    /* 桌面横向菜单隐藏，改用抽屉 */
    .obj_menu_header { display: none !important; }

    .tgd-nav-toggle { display: inline-flex; }
    .tgd-drawer { display: flex; }
    .tgd-backdrop { display: block; pointer-events: none; }
    .tgd-backdrop.is-open { pointer-events: auto; }

    /* 工具栏吸顶 —— 移动端随时能开菜单 */
    .toolbar {
        position: sticky;
        top: 0;
        z-index: 900;
        padding: 8px 10px;
        background: rgba(255, 253, 249, .96);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        backdrop-filter: saturate(180%) blur(10px);
        border-bottom: 1px solid var(--tgd-line);
    }

    /* 移动端内容区：自然高度、单列、足够留白 */
    .content {
        margin-top: 0 !important;
        min-height: 0;
    }
    .post-content {
        padding: 16px 15px 28px;
        height: auto !important;
        max-height: none !important;
    }
    .post-content-content {
        font-size: 16px;
    }
    .post-content-content h2 { font-size: 1.25em; }

    /* 原问题：移动端 .sidebar 被 layui-hide-xs 隐藏，分类目录彻底看不到。
       修复：把分类列表放进抽屉（见 tgd-ui.js），侧栏本身继续隐藏以免挤占正文。 */
    .sidebar { display: none; }

    .post-namelist-title {
        font-size: 12px;
        padding: 9px 8px;
    }
    .post-list-post {
        padding: 10px 8px;
    }
    .toolbar-url span {
        max-width: 40vw;
        font-size: 12.5px;
    }
    .blog-title {
        padding: 10px 12px;
        font-size: 14.5px;
    }
    .post-title {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
}

/* 小屏手机 */
@media (max-width: 575px) {
    .post-content { padding: 14px 12px 24px; }
    .post-content-content { font-size: 15.5px; line-height: 1.85; }
    .post-content-content table { font-size: 13px; }
    .post-content-content th,
    .post-content-content td { padding: 8px 10px; }
    .commentlist .children { padding-left: 18px; }
    .comment .comment-metadata { margin-left: 0; }
    .comment .media-left { padding-right: 8px; }
    .tgd-drawer { width: min(300px, 86vw); }
    .footer-container { padding: 0 14px !important; }
}

/* 触屏设备：hover 效果会「粘住」，改为只在支持 hover 的设备启用位移类反馈 */
@media (hover: none) {
    .sidebar-cat li:hover,
    .widget li:hover {
        padding-left: 22px;
        background: transparent;
    }
    .post-list-post:hover { background: transparent !important; }
}

/* -----------------------------------------------------------------------------
   11. 打印样式（文章正文打印友好）
   -------------------------------------------------------------------------- */
@media print {
    body { background: #fff; }
    #main {
        box-shadow: none;
        border: 0;
        border-radius: 0;
        margin: 0;
    }
    .toolbar,
    .sidebar,
    .tgd-nav-toggle,
    .tgd-drawer,
    .tgd-backdrop,
    .posts-nav,
    #site-footer,
    .close,
    .post-content-comments { display: none !important; }
    .post-content { padding: 0; }
    .post-content-content { font-size: 12pt; line-height: 1.7; }
    .post-content-content a { color: #000; border: 0; }
    .post-content-content a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
}

/* -----------------------------------------------------------------------------
   12. 页脚
   -----------------------------------------------------------------------------
   原问题：页脚是一段写死的内联样式（#f8f9fa 灰底 + 三行居中文字），
   与站点的纸色/朱砂设计语言完全脱节，且备案号没地方填。
   重写为：站点名 + 描述 / 分隔线 / 版权 · ICP · 网安备（带警徽）/ 免责声明。 */
#site-footer {
    margin: 28px 0 0;
    padding: 0;
    background: transparent;
    text-align: left;
}

.tgd-ft-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 26px 20px 30px;
    border-top: 1px solid var(--tgd-line);
}

/* 站点名 + 描述 */
.tgd-ft-brand {
    text-align: center;
    margin-bottom: 4px;
}
.tgd-ft-name {
    display: inline-block;
    font-family: var(--tgd-font-serif);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--tgd-ink);
    text-decoration: none;
    transition: color .15s ease;
}
.tgd-ft-name:hover { color: var(--tgd-cinnabar); }
.tgd-ft-desc {
    margin: 9px auto 0;
    max-width: 660px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--tgd-ink-3);
}

/* 版权 / 备案行 */
.tgd-ft-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px 18px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--tgd-line);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--tgd-ink-3);
}
.tgd-ft-copy { color: var(--tgd-ink-3); }

.tgd-ft-icp,
.tgd-ft-police {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--tgd-ink-3);
    text-decoration: none;
    transition: color .15s ease;
}
.tgd-ft-icp:hover,
.tgd-ft-police:hover { color: var(--tgd-cinnabar); }

/* 警徽图标：固定尺寸，不受行高影响 */
.tgd-ft-badge {
    flex: 0 0 auto;
    display: block;
}

/* 免责声明 */
.tgd-ft-disclaimer {
    margin: 14px auto 0;
    max-width: 740px;
    text-align: center;
    font-size: 12px;
    line-height: 1.85;
    color: var(--tgd-ink-3);
    opacity: .88;
}

@media (max-width: 575px) {
    .tgd-ft-inner { padding: 22px 14px 26px; }
    .tgd-ft-meta { gap: 6px 12px; font-size: 12px; }
    .tgd-ft-desc { font-size: 12.5px; }
}