/**
 * 作品详情页（整页铺满，不是弹窗）
 *
 * ⚠️ 自建整屏层，**不复用父主题的 bootstrap modal**：父主题被魔改的 Modal.hide 监听
 *    transitionstart 而兜底触发 transitionend（两者不匹配）→ 用 display:none 做隐藏态会
 *    杀掉过渡、导致遮罩与 body 的滚动锁残留（项目里踩过，见 CLAUDE.md §8.2.15）。
 *    所以本层：① 隐藏态用 visibility ② 不依赖父主题任何 modal 代码
 *
 * 版面（参考 civitai 的图片详情）：
 *   ┌ 顶栏：[✕] [♥][👍][🔗][🖼][✨][⛶] ……………………………………  〔侧栏开关〕┐
 *   ├ 左列（可滚动）：媒体轮播 + 整宽评论区                              ┤   〔侧栏开关〕钉在
 *   └ 右列（可滚动、可收起）：标题 / 作者 / 生成参数（含提示词）          ┘    侧栏的顶部外侧
 *
 * 侧栏开关的定位规则（一条规则，别再加分支）：
 *   它永远钉在「侧栏左缘 × 顶栏高度」这个点上 —— 收起时侧栏宽度为 0，
 *   它就落在屏幕右上角；展开时它跟着侧栏一起左移同样的距离，依然在侧栏顶部外侧。
 */

.zibll-work-detail {
    position: fixed;
    inset: 0;
    z-index: 99990;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

.zibll-work-detail.is-open {
    opacity: 1;
    visibility: visible;
}

/* ⚠️ 层级安排（写清楚，否则以后一定有人踩：整屏详情把父主题的弹窗盖住）
   z-index 从低到高：
     普通页面内容
     .zibll-work-detail      99990    本模块的整屏详情
     .zwork-poster-mask      99995    海报弹窗（挂在 body 上）
     .modal-backdrop        100000    父主题弹窗的遮罩（仅详情打开时抬升）
     .modal                 100010    父主题弹窗：登录 / 会员购买 / 充值 …

   父主题弹窗原本的 z-index 低于 99990，会被整屏详情整个盖住 ——
   表现就是「点提示词的复制按钮，会员购买窗弹在下面看不见」。
   所以详情打开期间（body.zwork-open）把它们整体抬到详情之上。
   用 .modal 通配而不是逐个列 ID：父主题以后新增弹窗也能自动生效。
   （AI Engine 模块当年也是靠抬弹窗层级解决同类问题，见 CLAUDE.md §3） */
body.zwork-open .modal-backdrop {
    z-index: 100000 !important;
}

body.zwork-open .modal {
    z-index: 100010 !important;
}

/* ⚠️ [hidden] 必须显式加 !important：
   浏览器默认的 [hidden]{display:none} 是 (0,0,0) 权重，被本文件里任何一个
   display:flex/grid 的规则盖掉就失效（加载遮罩、评论块都靠 hidden 控制） */
.zibll-work-detail [hidden] {
    display: none !important;
}

/*========== 面板：整页铺满 ==========*/

.zwork-panel {
    /* 侧栏宽度抽成变量：桌面是并排一列，手机端是浮层宽度 */
    --zwork-side-w: 420px;
    /* 把手宽度。⚠️ 把手的 left 是它的负值，两者**必须同源** ——
       分开写死的话，一旦只改了其中一个就会露缝（这正是上一版手机上出现缝隙的原因之一） */
    --zwork-handle-w: 30px;
    /* 工具栏高度。把手要与它**等高对齐**（用户要的是「和工具栏那些按钮一样的视觉」），
       所以两边共用这一个变量，改一处两边一起变 */
    --zwork-tool-h: 56px;
    position: absolute;
    inset: 0;
    display: flex;
    /* 横向两栏：左列（工具栏+轮播+评论） / 右列（整高信息栏）。
       ⚠️ 不能改成 column —— 那样工具栏会横贯整屏、把右侧信息栏压掉一截 */
    flex-direction: row;
    overflow: hidden;
    background: var(--main-bg-color);
}

/*========== 顶栏 ==========*/

.zwork-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: var(--zwork-tool-h);
    border-bottom: 1px solid var(--main-border-color);
    /* 抬到加载遮罩之上：切换作品时遮罩盖住内容，但关闭按钮必须始终可点 */
    position: relative;
    z-index: 7;
    /* ⚠️ 用 muted 底而不是 main-bg：侧栏与把手都是 main-bg，
       而把手正好贴在工具条这一行上 —— 三处同色的话把手完全看不出来。
       拉开一档明度差，把手才一目了然（深浅色模式下都会自动拉开，因为两个变量本身就有差） */
    background: var(--muted-bg-color);
}

.zwork-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--muted-bg-color);
    color: var(--main-color);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s;
}

.zwork-close:hover {
    background: var(--theme-color);
    color: #fff;
}

/* 操作组：紧跟在关闭按钮后面。min-width:0 是它能收缩、进而在窄屏触发横向滚动
   而不是把顶栏撑高的前提 */
.zwork-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.zwork-tools::-webkit-scrollbar {
    display: none;
}

/* 工具按钮：纯图标圆形按钮。
   收藏与点赞复用父主题输出（自带 <text>文案</text> 与 <count>数字</count>），
   这里把它们藏掉只留图标 —— 完整含义（含计数）由 JS 写进 title 当 tooltip */
.zwork-tool {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
}

.zwork-tool text,
.zwork-tool count {
    display: none;
}

.zwork-tool .icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: inline-block;
}

/* 图标在按钮里必须**精确水平垂直居中**。
   光给 flex 居中是不够的，三个坑都要压：
   ① 父主题的 .but 自带 padding 与 line-height；
      ⚠️ 而且它常写成 `.but.hollow` 这类**双类**选择器（权重 0,2,0），
      单类 `.zwork-tool`（0,1,0）压不过 —— 所以下面把 .but/.hollow 一起写上凑权重
   ② 图标是行内元素，受基线影响
   ③ ⚠️ **字体图标（`<i class="fa">`）的字形受 letter-spacing / 字体度量影响**，
      凭 flex 居中仍会偏零点几像素 —— 这正好解释了「收藏/点赞（`<svg>`，不吃字体度量）
      看着是正的，而复制链接/海报/全屏（字体图标）略偏左」
   所以对图标不再依赖文本排版，直接用**绝对定位 + translate 居中**，
   让「字体怎么量」这件事彻底不参与定位。 */
.zwork-tool,
.zwork-tool.but,
.zwork-tool.but.hollow,
.zwork-close,
.zwork-side-toggle,
.zwork-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    letter-spacing: normal;
    text-indent: 0;
    word-spacing: normal;
    text-align: center;
}

/* 这两个不是「自身绝对定位」的元素，需要显式给相对定位才能当图标的定位基准；
   另外两个（把手、轮播箭头）本身就是绝对定位，天生就是基准，不能在这里覆盖 */
.zwork-tool,
.zwork-close {
    position: relative;
}

.zwork-tool i,
.zwork-tool .icon,
.zwork-close i,
.zwork-nav i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    margin: 0;
    line-height: 1;
}

/* 已赞 / 已收藏：父主题 JS 会给按钮加 actived 类。
   ⚠️ 只换字色用户根本看不出来（工具条上本来就都是灰色图标），
   所以这里做成**实心填充**——一眼就能分辨自己有没有点过 */
.zwork-tool.actived {
    color: #fff;
    background: var(--theme-color);
    border-color: var(--theme-color);
}

.zwork-tool.actived:hover {
    background: var(--theme-color);
    filter: brightness(1.08);
}

/*========== 侧栏把手 ==========   ⚠️ 它是**侧栏的子元素**（见上面的 .zwork-info 说明）：
   挂在侧栏左边界外（left:-30px），与侧栏共用同一个定位盒子与变换 ——
   收起/展开时两者一起动，**结构上不可能出现对齐缝隙**（上一版各自用 right 对齐，
   实测手机上会露缝）。侧栏滑出屏幕时，它也仍留在屏幕边缘，看得见、点得到。

   外观：与侧栏同底色、只左角圆角、右侧不封口、阴影朝左 —— 读起来就是侧栏伸出来的把手 */
/* 把手外观：**与侧栏完全同色同底、无边框无阴影** —— 用户要的是「它就是侧栏伸出来的一块」。
   上一版它自己带 1px 描边和左侧投影，看起来就比侧栏深/亮一档（实测被反馈）。
   它与工具栏的区分交给工具栏自己的底色（--muted-bg-color）去做，不需要额外装饰。 */
.zwork-side-toggle {
    position: absolute;
    /* left 与 width 同源于 --zwork-handle-w：把手右边缘永远严丝合缝贴在侧栏左边界上 */
    left: calc(-1 * var(--zwork-handle-w));
    /* 与工具栏**等高、同顶**：视觉上就是工具栏那一行伸出来的一个按钮 */
    top: 0;
    height: var(--zwork-tool-h);
    z-index: 9;
    margin: 0;
    width: var(--zwork-handle-w);
    padding: 0;
    cursor: pointer;
    border: 0;
    /* ⚠️ 圆角只给**左边两角**，右边保持直角 ——
       右边缘正是「把手 = 侧栏左缘」那条接缝，圆角会在那里露出底色缺口（会被看成一条缝）。
       左边缘外侧是工具栏/内容区，圆角不会碰到任何需要无缝的地方。 */
    border-radius: 8px 0 0 8px;
    background: var(--main-bg-color);
    color: var(--muted-2-color);
    /* 与工具栏按钮同字号，图标大小一致 */
    font-size: 15px;
    line-height: 1;
    /* ⚠️ 只过渡颜色。背景必须**始终**与侧栏一致 —— 给它加背景过渡/变化
       等于让把手看起来和侧栏不是一块（实测被明确反馈） */
    transition: color .2s;
}

/* hover 只换图标颜色，**绝不换背景** */
.zwork-side-toggle:hover {
    color: var(--theme-color);
}

/* 把手里的图标
   ⚠️ 方向切换**不用 rotate**：改成两个方向的图标各放一个、由 CSS 切显隐。
   原因是 transform 是整体覆盖而非叠加，且旋转还牵涉旋转中心 ——
   把「居中」和「翻转」压在同一条 transform 上极易踩坑（上一版就是这么翻车的）。
   现在居中有且只有 translate 一件事，翻转有且只有 display 一件事，互不干扰。 */
.zwork-side-toggle .zwork-tog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 收起态：显示朝右的图标（提示「往这边展开」）；展开态反过来 */
.zwork-side-toggle .zwork-tog-open {
    display: none;
}

.zwork-panel:not(.is-side-collapsed) .zwork-side-toggle .zwork-tog-open {
    display: flex;
}

.zwork-panel:not(.is-side-collapsed) .zwork-side-toggle .zwork-tog-close {
    display: none;
}

/* 图标尺寸：父主题图标库的图形在 em 框里留白较多，同字号下看起来明显更小，
   所以放大到 1.4em 让视觉重量与工具栏那排图标对齐 */
.zwork-side-toggle .icon,
.zwork-side-toggle i {
    width: 1.4em;
    height: 1.4em;
    fill: currentColor;
    display: block;
}

/* （方向切换见上面 .zwork-tog 的显隐规则，这里不再需要任何 transform） */

/* 手机端侧栏是「盖住内容」的浮层：加一层遮罩，点侧栏以外的地方就能收起。
   桌面不需要（侧栏是并排的一列，不存在「外面」） */
.zwork-side-backdrop {
    display: none;
}

/*========== 全屏（无干扰查看）==========
   只留媒体 + 两个浮按钮：左上角「退出全屏」、右上角（或侧栏左缘）「侧栏开关」。
   两者一左一右，不会打架。
   ⚠️ 隐藏的是顶栏里的**子元素**而不是顶栏本身 —— 顶栏一旦 display:none，
   它的子元素（含任何放在里面的按钮）都会跟着消失 */

.zwork-exit-full {
    display: none;
}

.zwork-panel.is-immersive .zwork-toolbar {
    background: transparent;
    border-bottom: 0;
    padding: 0;
    min-height: 0;
    height: 0;
    overflow: visible;
}

.zwork-panel.is-immersive .zwork-close,
.zwork-panel.is-immersive .zwork-tools,
.zwork-panel.is-immersive .zwork-comments {
    display: none;
}

.zwork-panel.is-immersive .zwork-main {
    overflow: hidden;
}

.zwork-panel.is-immersive .zwork-stage-wrap {
    height: 100%;
    background: #000;
}

/* 全屏态下的退出按钮：放**左上角**，与右上角的侧栏开关一左一右互不遮挡。
   平时半透明、悬停才实显——全屏看图时别让按钮抢镜 */
.zwork-panel.is-immersive .zwork-exit-full {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 9;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    transition: background .2s, opacity .2s, visibility .2s;
    opacity: .4;
}

.zwork-panel.is-immersive .zwork-exit-full:hover {
    opacity: 1;
    background: var(--theme-color);
}

/*========== 全屏「闲时」自动隐藏操作按钮 ==========
   全屏看图/看视频时，左右切换箭头与退出按钮在停止操作 N 秒后淡出，画面彻底干净；
   移动鼠标（电脑）或轻触屏幕（手机）立即重新出现。N 由后台「全屏自动隐藏按钮」控制。

   ⚠️⚠️ **安全设计，别改**：这里是「**默认可见、闲时才隐藏**」（`is-idle` 由 JS 加上），
   不是「默认隐藏、动一下才显示」。区别是致命的 —— 前者即使 JS 挂掉、定时器异常、
   类名残留，按钮也**照常可见**，用户永远退得出全屏；后者一旦出问题，用户就被锁在全屏里。

   ⚠️ 隐藏效果**必须绑在 `is-immersive` 上**（两级选择器都要写）：只要退出全屏、
   `is-immersive` 一移除，哪怕 `is-idle` 还残留也不会影响正常态的按钮。

   ⚠️ 隐藏态同时 `pointer-events:none`：「看不见却点得到」是最糟的组合（会误触到隐形按钮）。
   ⚠️ 再加 `visibility:hidden`：光靠 opacity 仍留在**键盘 Tab 序列**里 —— 用键盘的用户
   会聚焦到一个看不见的按钮上（焦点凭空消失）。visibility 是离散属性，配 `transition:visibility`
   时会在**淡出结束后**才生效，所以淡出动画照样有。 */
.zwork-panel.is-immersive.is-idle .zwork-nav,
.zwork-panel.is-immersive.is-idle .zwork-exit-full {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*========== 主体两栏 ==========
   左列 = 工具栏 + （轮播 + 评论），整体纵向排布；
   右列 = 整高的信息栏。两列等高于整个面板 */

.zwork-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* 左列里：媒体 + 评论，整体滚动 */
.zwork-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/*========== 媒体舞台 ==========*/

/* ⚠️ 高度是「后台可调」的：两个变量由 inc/work/work.php 的 zibll_work_stage_vars()
   随 wp_head 输出（挂在 .zwork-panel 上），这里只负责消费、并用 var() 的第二参
   保留原来的 68vh / 46vh 作为兜底 —— 变量没输出时视觉与改动前逐字节一致。
   全屏态（.zwork-panel.is-immersive）那条 height:100% 特异性更高，不受这里影响。 */
.zwork-stage-wrap {
    position: relative;
    height: var(--zwork-stage-h, 68vh);
    background: #14161a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.zwork-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* 每张幻灯片：绝对铺满，只有当前张可见（切换靠 is-cur 类） */
.zwork-slide {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.zwork-slide.is-cur {
    display: flex;
}

.zwork-slide img,
.zwork-slide video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

/* ⚠️⚠️ `<picture>` 必须自己撑满舞台并居中 —— 这是竖版图被裁半截的根因。
   原因是：`.zwork-slide` 是 **flex 容器**，上面那组 max-width/max-height 是写给 `img` 的。
   图片一旦被包进 `<picture>`，**flex item 就从 img 变成了 picture** ——
   picture 没拿到任何约束，会撑到图片固有宽度（例如 1024px），超出 68vh 的舞台后被
   `overflow:hidden` 裁掉，看上去就是"竖版图只显示半截"。
   ⚠️ 不要用 `display:contents` 去"让 picture 消失"：实测那样 img 会作为 flex item
   被压成极小尺寸（211×282 的基准变成 16×21），反而更糟。让它照抄 slide 的布局最稳。 */
.zwork-slide picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
}

.zwork-slide .zwork-noslide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: rgba(255, 255, 255, .6);
}

.zwork-slide .zwork-noslide i {
    font-size: 46px;
    opacity: .5;
}

/* 左右切换箭头 */
.zwork-nav {
    position: absolute;
    top: 50%;
    margin-top: -24px;
    width: 44px;
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, .42);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* visibility 一起过渡：淡出结束后才真正 hidden（离散属性在过渡末尾切换） */
    transition: background .2s, opacity .2s, visibility .2s;
    z-index: 4;
}

.zwork-nav:hover {
    background: var(--theme-color);
}

.zwork-nav[disabled] {
    opacity: .25;
    cursor: default;
}

.zwork-nav.prev {
    left: 12px;
}

.zwork-nav.next {
    right: 12px;
}

/* 页码 / 计数 */
.zwork-counter {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 12px;
    line-height: 1.8;
    z-index: 4;
    pointer-events: none;
}

.zwork-counter:empty {
    display: none;
}

/*========== 评论区（媒体下方，整宽）==========
   父主题的评论模板是按整页宽度设计的，塞进窄侧栏会非常拥挤，所以放这里 */

.zwork-comments {
    border-top: 1px solid var(--main-border-color);
    padding: 18px 20px 48px;
}

.zwork-comments-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--main-color);
    cursor: pointer;
    user-select: none;
}

.zwork-comments-count {
    font-weight: 400;
    color: var(--muted-2-color);
}

.zwork-comments.is-collapsed .zwork-comments-body {
    display: none;
}

/* 父主题评论模板自带卡片外观（.theme-box/.main-shadow），这里压平 ——
   它本来就在一整块区域里，再套一层卡片很重 */
.zwork-comments .zwork-comments-body #comments .theme-box,
.zwork-comments .zwork-comments-body #comments .box-body,
.zwork-comments .zwork-comments-body #comments .main-bg {
    box-shadow: none;
    background: transparent;
}

.zwork-comments .zwork-comments-body #comments {
    margin: 0;
}

.zwork-comments .zwork-comments-body #comments .title-theme {
    display: none;
}

/* 父主题评论模板是按整页宽度设计的，放进这里要一点兜底：
   ① 贴边的元素不许溢出（本容器 overflow-x:hidden，溢出的会被切掉、看着就像排版乱了）
   ② flex 子项默认 min-width:auto，长内容（长链接/长英文）撑不动就会顶破整行 ——
      这是评论列表在窄容器里最常见的翻车点，必须显式给 0 */
.zwork-comments .zwork-comments-body,
.zwork-comments .zwork-comments-body > * {
    max-width: 100%;
    box-sizing: border-box;
}

.zwork-comments .zwork-comments-body img,
.zwork-comments .zwork-comments-body video,
.zwork-comments .zwork-comments-body iframe {
    max-width: 100%;
    height: auto;
}

.zwork-comments .zwork-comments-body p,
.zwork-comments .zwork-comments-body .comment-content,
.zwork-comments .zwork-comments-body .comment-body {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.zwork-comments .zwork-comments-body #commentform .flex,
.zwork-comments .zwork-comments-body .comment > .flex {
    min-width: 0;
}

/* 父主题在移动端把评论表单做成「点输入框 → 从底部弹出」的固定层
   （#respond.mobile-fixed，配合 zib_get_respond_mobile 输出的那个假输入框）。

   ⚠️ 这里**绝不能改它的定位方式**：上一版我用 position:static 把它按回普通流，
   结果就是「那个假输入框和真表单同时显示」——用户看到两份输入框。
   正确做法是只把它抬到本模块顶栏/把手之上：
   它是本模块的子节点，而本模块自己是一个独立层叠上下文，
   所以这个 z-index 只在模块内部比较 —— 30 够高（顶栏 7、把手 9、加载遮罩 6），
   又不会去和父主题自己的弹窗抢层级。 */
.zwork-comments .zwork-comments-body #respond.mobile-fixed {
    z-index: 30;
}

/*========== 右列：信息栏 ==========*/

.zwork-info {
    /* ⚠️ position:relative 是必须的：把手要挂在它左边界外（left:-30px），
       以它为定位基准才能保证「把手 + 侧栏」是同一个盒子、同一个变换 ——
       这样收起/展开时两者一起动，结构上不可能出现对齐缝隙 */
    position: relative;
    flex: 0 0 var(--zwork-side-w);
    width: var(--zwork-side-w);
    max-width: var(--zwork-side-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--main-bg-color);
    /* ⚠️ 不用 border-left：那条线正好落在「把手右边缘」的接缝上，
       会让把手看起来和侧栏不是一块（实测被反馈「明度有差异」）。
       分隔线改用 ::before 画在**工具栏那一行之下**，接缝处保持干净 */
    border-left: 0;
    /* ⚠️ 必须 visible：把手伸在盒子外面，hidden 会把它裁掉 */
    overflow: visible;
    transition: flex-basis .22s ease, width .22s ease;
}

/* ⚠️ 这里**不画任何分隔线**（原本有个 ::before 画 1px 竖线）：
   那条线正好落在「把手右缘 = 侧栏左缘」这个接缝上，看起来就是「按钮与侧栏之间有条缝」
   （实测被反复反馈）。左列与右列的分界靠媒体区自身的深色底 + 评论区自带的 border-top
   已经分得很清楚，不需要再加线。 */

/* 收起态：宽度归零，媒体占满整屏。
   注意**不能**用 overflow:hidden 来藏内容（那样会连把手一起裁掉），
   改成把内容层隐藏 —— 把手是它的兄弟节点，不受影响 */
.zwork-panel.is-side-collapsed .zwork-info {
    flex-basis: 0;
    width: 0;
    max-width: 0;
    border-left: 0;
}

.zwork-panel.is-side-collapsed .zwork-info-scroll {
    visibility: hidden;
}

/* 滚动与横向裁切都在内容层做（外层要 overflow:visible 才能让把手露出来） */
.zwork-info-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

.zwork-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--main-color);
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 作者块 */
.zwork-author {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 14px;
    border-bottom: 1px solid var(--main-border-color);
}

.zwork-author-avatar {
    flex: 0 0 auto;
}

.zwork-author-avatar .avatar-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}

.zwork-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* min-width:0 是 flex 子项能收缩的前提，不加的话长昵称会把这行撑出横向滚动条 */
.zwork-author-main {
    flex: 1 1 auto;
    min-width: 0;
}

.zwork-author-name {
    font-size: 15px;
    color: var(--main-color);
    min-width: 0;
    flex-wrap: wrap;
}

.zwork-author-meta {
    margin-top: 3px;
    font-size: 12px;
    color: var(--muted-2-color);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.zwork-author-meta .icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: inline-block;
    vertical-align: -1px;
    margin-right: 3px;
}

/*========== 折叠区块（参数）==========*/

.zwork-sec {
    border-bottom: 1px solid var(--main-border-color);
}

.zwork-sec-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color);
    cursor: pointer;
    user-select: none;
}

.zwork-sec-head .zwork-sec-arrow {
    margin-left: auto;
    transition: transform .2s;
    font-size: 12px;
    color: var(--muted-2-color);
}

.zwork-sec.is-collapsed .zwork-sec-arrow,
.zwork-comments.is-collapsed .zwork-sec-arrow {
    transform: rotate(-90deg);
}

.zwork-sec-body {
    padding-bottom: 14px;
}

/* 折叠：内容高度不定，做 max-height 动画既麻烦又不准，直接切换显示 */
.zwork-sec.is-collapsed .zwork-sec-body {
    display: none;
}

/*========== 提示词 ==========*/

.zwork-prompt {
    position: relative;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--muted-bg-2-color);
    font-size: 13px;
    line-height: 1.7;
    color: var(--main-color);
    /* 长串（提示词里常见连续英文/符号）必须能断行，否则撑出横向滚动条 */
    word-break: break-word;
    overflow-wrap: anywhere;
}

.zwork-prompt-text {
    white-space: pre-wrap;
}

.zwork-prompt.is-locked .zwork-prompt-text {
    color: var(--muted-2-color);
}

/* 提示词底部一行：左＝权限说明，右＝复制按钮 */
.zwork-prompt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--main-border-color);
    font-size: 12px;
    color: var(--muted-2-color);
}

.zwork-prompt-lock {
    min-width: 0;
}

.zwork-copy {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--theme-color);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 0;
    white-space: nowrap;
}

.zwork-copy.is-locked {
    cursor: pointer;
}

/*========== 生成参数 ==========
   左右对齐（名称靠左、值靠右）+ 行间细分隔线：
   目的是「一眼能扫出哪一项是什么值」，而不是把名称与值挤成一团。
   整块做成一张浅底卡、首尾跟着卡片圆角裁切；最后一行不画分隔线（否则底边多一道）。 */

.zwork-params {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: var(--muted-bg-2-color);
    /* 让首行的底色与末行的分隔线跟着卡片圆角走 */
    overflow: hidden;
    /* 「模型名 / LoRA 名」的文字色：比正文色**浅一档**。这两块是辅助信息，
       用 `--main-color` 会显得比标题还重（用户反馈「太突出刺眼」）。
       color-mix 在深浅色下各自取到合适的中性色：亮色 #4e5358 → #64686b、
       深色近白 #e5eef7 → 柔和的浅蓝灰 —— 两种模式都更静。 */
    --zwork-soft: var(--main-color);
    --zwork-soft: color-mix(in srgb, var(--main-color) 70%, var(--muted-2-color));
}

.zwork-param {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--main-border-color);
    transition: background .15s;
}

/* 悬停高亮当前行：参数多时便于逐行比对（纯视觉反馈，不改变布局） */
.zwork-param:hover {
    background: var(--muted-bg-color);
}

.zwork-param:last-child {
    border-bottom: 0;
}

/* 名称：不缩、次要色、字号略小 —— 与值拉开层级，且不会把值挤到换行 */
.zwork-param-label {
    flex: 0 0 auto;
    max-width: 46%;
    color: var(--muted-2-color);
    font-size: 12px;
    line-height: 1.6;
    word-break: break-word;
}

/* 值：占满剩余宽度、右对齐 —— 与名称一左一右，中间自然留白 */
.zwork-param-value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    color: var(--main-color);
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/*========== 多行值（如「模型」一条里的多个模型名）==========
   与「成组参数」同一套外观：整条参数独立成卡片（外边距 + 圆角 + 极淡边框），
   底色取 `--muted-bg-color`（比外层参数区深一档，边界看得见但不刺眼）。
   卡里逐行 —— 模型名都长，光靠行距容易看串，所以行间压一条极淡分隔线。 */
.zwork-param.is-lines {
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 8px 10px;
    padding: 9px 12px;
    border: 1px solid var(--main-border-color);
    border-radius: 10px;
    background: var(--muted-bg-color);
}

.zwork-param.is-lines .zwork-param-label {
    flex: 1 1 100%;
    max-width: 100%;
    margin-bottom: 6px;
}

/* 值区只作布局容器（卡片底/圆角在 .zwork-param 上，别再套一层） */
.zwork-param-lines {
    flex: 1 1 100%;
    min-width: 0;
}

.zwork-line {
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

/* 模型名本身（可能是纯文本，也可能是管理员填了下载链接的 <a>） */
.zwork-line-n {
    color: var(--zwork-soft);
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
}

.zwork-line + .zwork-line {
    border-top: 1px solid var(--muted-bg-2-color);
}

/*========== 超长参数值（折叠）==========
   ComfyUI 的 `workflow` 块这类参数可能有几十 KB —— 不折叠的话整个参数区会被一个
   巨大文本撑成几千像素高，其余参数全被挤到屏幕外。
   「多长算长」的阈值在 PHP 的 zibll_work_param_fold_len()，两端要一致。 */
.zwork-param.is-long {
    /* 名称与值各占一行：右对齐的长文本极难读，改成上下结构 + 左对齐 */
    flex-wrap: wrap;
    align-items: flex-start;
}

.zwork-param.is-long .zwork-param-label {
    flex: 1 1 100%;
    max-width: 100%;
}

.zwork-param.is-long .zwork-param-value {
    flex: 1 1 100%;
    min-width: 0;
    text-align: left;
    /* 折叠成三行；点「展开」后由 .is-open 放开 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 等宽字体：这类值多是 JSON / 参数串，对齐了才看得出结构 */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.zwork-param.is-long.is-open .zwork-param-value {
    display: block;
    -webkit-line-clamp: none;
    /* 展开后也不无限高：内部滚动，参数区整体高度仍在控制之内 */
    max-height: 320px;
    overflow: auto;
    overscroll-behavior: contain;
}

/*========== 成组参数（LoRA：名称 + 权重 + 下载链接）==========
   整条参数**独立成卡片**（不是列表里的一行）：外边距把它从相邻参数里撑开，
   圆角 + 极淡边框勾出边界。
   ⚠️ 底色用 `--muted-bg-color` 而不是 `--main-bg-color`：外层参数区本来就是
   `--muted-bg-2-color`（亮色 `#f6f7f8`），再放一块**纯白**卡会「跳」出来很刺眼
   （用户实测反馈）。`--muted-bg-color` 比外层只深一档（亮色 `#eee`、深色 `#2d2e31`），
   卡片边界看得见、又不抢眼。
   卡里逐行：左列模型名、右列权重胶囊，中间留白。 */
.zwork-param.is-pairs {
    flex-wrap: wrap;
    align-items: flex-start;
    /* 从「列表的一行」变成「一张卡」：撑开外边距 + 圆角 + 淡边框。
       `border` 简写同时覆盖基础规则那条底部分隔线（这里不再需要行分隔线） */
    margin: 8px 10px;
    padding: 9px 12px;
    border: 1px solid var(--main-border-color);
    border-radius: 10px;
    background: var(--muted-bg-color);
}

.zwork-param.is-pairs .zwork-param-label {
    flex: 1 1 100%;
    max-width: 100%;
    margin-bottom: 6px;
}

/* 值区只作布局容器：卡片底/圆角已经在 .zwork-param 上，别再套一层（那就是「框中框」） */
.zwork-param-pairs {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.zwork-pair {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

/* 行与行之间压一条极淡的分隔线：LoRA 一多，光靠行距很容易看串行 */
.zwork-pair + .zwork-pair {
    border-top: 1px solid var(--muted-bg-2-color);
}

.zwork-pair-k {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--zwork-soft);
    font-size: 12px;
    line-height: 1.6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

/*========== 可点击的模型名（管理员填了下载链接才有）==========
   没填链接时是上面那样的普通文本；**只有填了**才变成可点的链接 —— 这是用户明确要求的
   「不添加链接默认显示，只有添加了链接才新窗口跳转」。 */
.zwork-pair-k.is-link,
.zwork-line-n.is-link {
    color: var(--theme-color);
    text-decoration: none;
    cursor: pointer;
}

.zwork-pair-k.is-link:hover,
.zwork-line-n.is-link:hover {
    text-decoration: underline;
}

/* 外链小图标：给「这行能点」一个一眼可见的提示 */
.zwork-pair-k.is-link .fa,
.zwork-line-n.is-link .fa {
    margin-left: 5px;
    font-size: 10px;
    opacity: .7;
    vertical-align: middle;
}

/* 权重胶囊：主题色微染底 + 主题色字。背景先给不依赖 color-mix 的回退行 */
.zwork-pair-v {
    flex: 0 0 auto;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--muted-bg-2-color);
    background: color-mix(in srgb, var(--theme-color) 14%, transparent);
    color: var(--theme-color);
    font-size: 11px;
    line-height: 1.7;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* 等宽数字：多个权重上下排时小数点能对齐 */
    font-variant-numeric: tabular-nums;
}

.zwork-param-acts {
    flex: 1 1 100%;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 6px;
}

.zwork-param-btn {
    border: 0;
    background: transparent;
    color: var(--theme-color);
    font-size: 12px;
    line-height: 1.6;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s;
}

.zwork-param-btn:hover {
    background: var(--muted-bg-color);
}

.zwork-empty {
    padding: 4px 0;
}

/*========== 加载中 ==========*/

.zwork-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--main-bg-color);
    color: var(--muted-2-color);
    z-index: 6;
}

/*========== 滚动锁 ==========*/

body.zwork-open {
    overflow: hidden;
}

/*========== 滚动条样式（后台「作品设置→详情」可选档位）==========
   作用对象：左列（媒体/评论）与右列信息栏。
   颜色一律取自主题变量，深浅色模式自动适配；
   同时写 webkit（Chrome/Edge/Safari）与标准属性（Firefox）。

   档位类名挂在 .zwork-panel 上：zwork-sb-{default|thin|pill|overlay|hidden}
   default = 不写任何规则，跟随浏览器/系统默认 */

/* 公用：轨道透明（深浅色下都不会有突兀的底色块） */
.zwork-panel.zwork-sb-thin .zwork-main::-webkit-scrollbar-track,
.zwork-panel.zwork-sb-thin .zwork-info::-webkit-scrollbar-track,
.zwork-panel.zwork-sb-pill .zwork-main::-webkit-scrollbar-track,
.zwork-panel.zwork-sb-pill .zwork-info::-webkit-scrollbar-track,
.zwork-panel.zwork-sb-overlay .zwork-main::-webkit-scrollbar-track,
.zwork-panel.zwork-sb-overlay .zwork-info::-webkit-scrollbar-track {
    background: transparent;
}

/*---- 细窄直角 ----*/
.zwork-panel.zwork-sb-thin .zwork-main::-webkit-scrollbar,
.zwork-panel.zwork-sb-thin .zwork-info::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.zwork-panel.zwork-sb-thin .zwork-main::-webkit-scrollbar-thumb,
.zwork-panel.zwork-sb-thin .zwork-info::-webkit-scrollbar-thumb {
    background: var(--muted-2-color);
    border-radius: 0;
}

.zwork-panel.zwork-sb-thin .zwork-main:hover::-webkit-scrollbar-thumb,
.zwork-panel.zwork-sb-thin .zwork-info:hover::-webkit-scrollbar-thumb {
    background: var(--theme-color);
}

/*---- 胶囊圆角（默认档）----*/
.zwork-panel.zwork-sb-pill .zwork-main::-webkit-scrollbar,
.zwork-panel.zwork-sb-pill .zwork-info::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.zwork-panel.zwork-sb-pill .zwork-main::-webkit-scrollbar-thumb,
.zwork-panel.zwork-sb-pill .zwork-info::-webkit-scrollbar-thumb {
    /* color-mix 前面必须给纯变量回退行（旧内核不认 color-mix 时用得上） */
    background: var(--muted-2-color);
    background: color-mix(in srgb, var(--muted-2-color) 50%, transparent);
    border-radius: 999px;
    /* 用「透明边框 + padding-box 裁剪」做内缩，比直接调宽度更精致 */
    border: 3px solid transparent;
    background-clip: padding-box;
}

.zwork-panel.zwork-sb-pill .zwork-main:hover::-webkit-scrollbar-thumb,
.zwork-panel.zwork-sb-pill .zwork-info:hover::-webkit-scrollbar-thumb {
    background: var(--theme-color);
    background: color-mix(in srgb, var(--theme-color) 70%, transparent);
    background-clip: padding-box;
}

/*---- 悬停时才显示 ----*/
.zwork-panel.zwork-sb-overlay .zwork-main::-webkit-scrollbar,
.zwork-panel.zwork-sb-overlay .zwork-info::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.zwork-panel.zwork-sb-overlay .zwork-main::-webkit-scrollbar-thumb,
.zwork-panel.zwork-sb-overlay .zwork-info::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.zwork-panel.zwork-sb-overlay .zwork-main:hover::-webkit-scrollbar-thumb,
.zwork-panel.zwork-sb-overlay .zwork-info:hover::-webkit-scrollbar-thumb {
    background: var(--muted-2-color);
    background: color-mix(in srgb, var(--muted-2-color) 60%, transparent);
    background-clip: padding-box;
}

/*---- 完全不显示（仍可滚动）----*/
.zwork-panel.zwork-sb-hidden .zwork-main,
.zwork-panel.zwork-sb-hidden .zwork-info {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.zwork-panel.zwork-sb-hidden .zwork-main::-webkit-scrollbar,
.zwork-panel.zwork-sb-hidden .zwork-info::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Firefox 的标准属性（webkit 那套它不认） */
.zwork-panel.zwork-sb-thin .zwork-main,
.zwork-panel.zwork-sb-thin .zwork-info,
.zwork-panel.zwork-sb-pill .zwork-main,
.zwork-panel.zwork-sb-pill .zwork-info {
    scrollbar-width: thin;
    scrollbar-color: var(--muted-2-color) transparent;
}

.zwork-panel.zwork-sb-overlay .zwork-main,
.zwork-panel.zwork-sb-overlay .zwork-info {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.zwork-panel.zwork-sb-overlay .zwork-main:hover,
.zwork-panel.zwork-sb-overlay .zwork-info:hover {
    scrollbar-color: var(--muted-2-color) transparent;
}

/*========== 移动端 ==========*/

@media (max-width: 900px) {
    /* 手机端侧栏是浮层：宽度与桌面不同，把手也窄一点。
       两个变量都在这里改，把手的 left/width 同源，改窄也不会露缝 */
    .zwork-panel {
        --zwork-side-w: min(86vw, 360px);
        --zwork-handle-w: 26px;
    }

    /* 舞台矮一些，给下方的评论留出可见空间（后台可单独调移动端高度） */
    .zwork-stage-wrap {
        height: var(--zwork-stage-h-m, 46vh);
    }

    .zwork-stage {
        padding: 8px;
    }

    .zwork-nav {
        width: 38px;
        height: 44px;
        font-size: 20px;
    }

    .zwork-nav.prev {
        left: 6px;
    }

    .zwork-nav.next {
        right: 6px;
    }

    .zwork-comments {
        padding: 14px 10px 40px;
    }

    /* 信息栏：从右侧整块滑出的浮层（默认收起）。
       收起用 translateX 而不是宽度归零 —— 整块滑出去时，挂在它左边界的把手
       也跟着走到屏幕边缘，仍然看得见、点得到（把手是它的子元素）。

       ⚠️ 这里**不加 box-shadow**：侧栏左侧投影会在把手左边留出一道暗渐变，
       而把手自身没有渐变，两者的边界看起来就是「把手与侧栏之间有接缝」
       （实测被反馈）。手机端本来就有遮罩负责把内容压暗，投影是多余的。 */
    .zwork-info {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 8;
        flex-basis: auto;
        transform: translateX(0);
        transition: transform .22s ease;
    }

    .zwork-panel.is-side-collapsed .zwork-info {
        flex-basis: auto;
        width: var(--zwork-side-w);
        max-width: var(--zwork-side-w);
        transform: translateX(100%);
    }

    /* 侧栏展开时才铺遮罩：点侧栏以外的地方就能收起（手机上最主要的关闭方式） */
    .zwork-panel:not(.is-side-collapsed) .zwork-side-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 7;
        background: rgba(0, 0, 0, .45);
    }

    .zwork-tool {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .zwork-close {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    /* ⚠️ 全屏态下退出按钮必须**往下让位**：手机端侧栏是浮层（宽 `min(86vw, 360px)`），
       展开时它的左边缘落在屏幕左侧 50~60px 处，而把手就挂在那条边界外 —— 与左上角
       （`left:16px` 宽 40px）的退出按钮正好压成一坨，两个按钮叠着（实测反馈
       「外观和交互都非常业余」）。
       把手的 y 范围恒为 `0 ~ var(--zwork-tool-h)`（高度与工具栏同源，见 .zwork-side-toggle），
       所以把退出按钮挪到它**下面**就结构性地不可能重叠 —— 与把手对齐同一思路：
       靠结构保证，不去算屏宽。 */
    .zwork-panel.is-immersive .zwork-exit-full {
        top: calc(var(--zwork-tool-h) + 12px);
    }

    /* ⚠️ 这里**不写把手的 width/height**：宽度由 --zwork-handle-w 给（left 与它同源），
       高度由 --zwork-tool-h 给（与工具栏等高）。写死任何一处都会破坏对齐 ——
       上一版手机上就是因为这里单独写了高度，才和工具栏对不齐 */
}

@media (prefers-reduced-motion: reduce) {
    .zibll-work-detail,
    .zwork-info,
    .zwork-side-toggle,
    /* 全屏闲时显隐也归「动效」：偏好减少动态的用户直接瞬间切换，别做淡入淡出 */
    .zwork-nav,
    .zwork-exit-full {
        transition: none;
    }
}

/*========== 海报弹窗 ===========
   与详情同一套思路：自建遮罩、隐藏态用 visibility（不用 display:none） */

.zwork-poster-mask {
    position: fixed;
    inset: 0;
    /* 低于父主题弹窗（见文件顶部的层级说明）：海报与会员弹窗同时出现时以弹窗为准 */
    z-index: 99995;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .78);
}

.zwork-poster-mask[hidden] {
    display: none !important;
}

/* ⚠️ 海报弹窗是直接挂在 <body> 上的（不在 .zibll-work-detail 里），
   所以上面那条 [hidden] 兜底盖不到它 —— 必须在本作用域再来一条。
   漏了它的后果实测过：海报生成成功后，加载转圈没有被隐藏（它的 display:flex
   压过了 UA 的 [hidden]{display:none}），仍然占着位置把海报挤变形。 */
.zwork-poster-mask [hidden] {
    display: none !important;
}

.zwork-poster-box {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    width: min(560px, 100%);
    background: var(--main-bg-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}

.zwork-poster-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--main-color);
    border-bottom: 1px solid var(--main-border-color);
}

.zwork-poster-close {
    border: 0;
    background: transparent;
    color: var(--muted-2-color);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
}

.zwork-poster-close:hover {
    color: var(--theme-color);
}

.zwork-poster-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zwork-poster-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--muted-2-color);
    font-size: 13px;
}

/* ⚠️ 海报有横版也有竖版（按主图宽高比自动选），所以图片不能写 width:100%
   —— 那样竖版会撑爆高度、横版会显得很小。用 max-width + max-height 双约束、
   width/height 都 auto，让浏览器按原始比例缩到「两边都放得下」 */
.zwork-poster-img {
    display: block;
    max-width: 100%;
    max-height: 68vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
}

.zwork-poster-foot {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 12px 16px 16px;
}