@import url(common.css);

/* =====================================================================
   视频/图片占位体系（.vid-ph）— 全站统一占位底 + grid
   （本页主大图/缩略图/集封面只用 .vid-ph__bg + .vid-ph__grid 两子元素；作品=静态图，无播放钮/shimmer/is-playing）
   ===================================================================== */
.vid-ph {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-dark-ink);
}

.vid-ph__bg {
    position: absolute;
    inset: 0;
    background: var(--color-dark-blue);
    transition: transform .6s ease;
}

.vid-ph--ink .vid-ph__bg {
    background: var(--color-dark-ink);
}

.vid-ph--cool .vid-ph__bg {
    background: var(--color-brand-blue);
}

.vid-ph--deep .vid-ph__bg {
    background: var(--color-brand-blue-deep);
}

.vid-ph--warm .vid-ph__bg {
    background: var(--color-brand-yellow);
}

.vid-ph__grid {
    position: absolute;
    inset: 0;
    opacity: .10;
    background-image: linear-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .6) 1px, transparent 1px);
    background-size: 44px 44px;
}

.vid-ph__shimmer {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, .18), transparent 60%);
    transition: opacity .4s ease;
}

.vid-ph.is-playing .vid-ph__shimmer {
    opacity: 1;
    animation: kenburns 9s ease-in-out infinite alternate;
}

.vid-ph.is-playing .vid-ph__bg {
    animation: kenburns 12s ease-in-out infinite alternate;
}

@keyframes kenburns {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.08) translate(-2%, -2%);
    }
}

/* 播放钮：本页作品不用；保留样式以维持 .vid-ph 占位族完整 + 未来真图替换留口 */
.vid-ph__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-brand-yellow);
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    transition: transform .2s ease, background .2s ease;
    box-shadow: var(--shadow-card);
    z-index: 2;
}

.vid-ph__play svg {
    width: 20px;
    height: 20px;
    fill: var(--color-on-yellow);
    margin-left: 3px;
}

.vid-ph.is-playing .vid-ph__play {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
}

.vid-ph--warm .vid-ph__play {
    background: var(--color-white);
}

.vid-ph--warm .vid-ph__play svg {
    fill: var(--color-ink);
}

.vid-ph__pill {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(10, 10, 10, .7);
    color: #fff;
    font-size: .6875rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    z-index: 3;
    letter-spacing: .02em;
}

.vid-ph__tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    z-index: 3;
    opacity: .9;
    background: rgba(10, 10, 10, .6);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}


/* =====================================================================
   作品详情三级页 · 页面级追加样式（仅结构/尺寸；颜色字体圆角阴影全引 :root 既有 var）
   类前缀：.dview / .dinfo / .dmore / .dalbum / .dthumb（d=detail，仿 .wlist/.wcard 命名习惯）
   数值对照：主大图 4:5 = 首页 .work__item（index L982）/ 展示页 .wcard（L419）同口径；
            深色查看卡 = .lightbox__media 深底（作品展示 L292 var(--color-dark-ink)）先例；
            圆角 14 = var(--radius-card)；缩略/封面小圆角 10 = var(--radius-card-sm)
   ===================================================================== */

/* ---------- ② 主查看区 .dview（白底 · 容器宽 1200 由 .container 承当） ---------- */
.dview {
    background: var(--color-white);
    padding-block: var(--space-5) var(--space-6);
}

@media(min-width:1024px) {
    .dview {
        padding-block: var(--space-6) var(--space-7);
    }
}

/* 依据：与 .wlist（展示页 L392/394）同语义的区块纵距（space-5/6 移动、space-6/7 桌面） */

/* 深色查看卡 .dview__stage —— 沉浸黑 + 圆角 14 + 内边距（让图片与箭头在深色面上呼吸） */
.dview__stage {
    position: relative;
    background: var(--color-dark-ink);
    border-radius: var(--radius-card);
    padding: var(--space-3);
}

@media(min-width:1024px) {
    .dview__stage {
        padding: var(--space-4);
    }
}

/* 依据：深底沿用 .lightbox__media/基座 var(--color-dark-ink)（作品展示 L292/L286）；圆角沿用 var(--radius-card)。内距 12/16 为结构性档位。 */

/* 主大图框 .dview__frame —— 4:5 竖幅 · 桌面高钳制 min(74vh,640px) · 移动宽钳制 min(78vw,400px)
   口径推导：4:5 竖幅 640 高 → 宽 640×4/5=512px；512 落在 .container 1160 内 → 两侧留 ~324px 呼吸，箭头始终可点 */
.dview__frame {
    position: relative;
    width: min(78vw, 400px);
    aspect-ratio: 4/5;
    margin-inline: auto;
    border-radius: var(--radius-card-sm);
    overflow: hidden;
    background: var(--color-dark-ink);
    touch-action: pan-y;
}

/* 允许纵向滚动；横向手势交 JS 滑切 */
.dview__frame .vid-ph {
    position: absolute;
    inset: 0;
}

@media(min-width:768px) {
    .dview__frame {
        width: auto;
        height: min(74vh, 640px);
    }
}

/* 依据：桌面高度 min(74vh,640px)——640px 上限为「主查看区首屏尽量不滚出」的折衷；移动端宽度钳制 min(78vw,400px)。 */

/* 左右箭头 .dview__arrow —— 圆钮 · 白描边 chevron · 垂直居中；语义=上一张/下一张（集内循环） */
.dview__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--color-on-dark);
    display: grid;
    place-items: center;
    padding: 0;
    transition: background .18s ease, transform .18s ease;
}

.dview__arrow:hover {
    background: rgba(255, 255, 255, .24);
}

.dview__arrow:active {
    transform: translateY(-50%) scale(.94);
}

.dview__arrow:focus-visible {
    outline: 3px solid rgba(30, 64, 175, .35);
    outline-offset: 2px;
}

.dview__arrow svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-on-dark);
    stroke-width: 2.2;
    fill: none;
    pointer-events: none;
}

.dview__arrow--prev {
    left: var(--space-2);
}

.dview__arrow--next {
    right: var(--space-2);
}

@media(min-width:1024px) {
    .dview__arrow--prev {
        left: var(--space-3);
    }

    .dview__arrow--next {
        right: var(--space-3);
    }
}

@media(max-width:767px) {
    .dview__arrow {
        width: 40px;
        height: 40px;
    }

    .dview__arrow svg {
        width: 18px;
        height: 18px;
    }
}

/* 依据：圆钮语感沿 .lightbox__close（rgba(255,255,255,.12/.24) 半透明白 + 圆钮）；焦点可见沿用站点蓝描边语言 */

/* 底部说明带 .dview__cap —— 与主大图同宽居中 · 底部渐变文字带（on-dark · 无独立色块）
   宽度口径 = .dview__frame 同源：移动 min(78vw,400px)；桌面 4:5 派生 640→512、74vh→59.2vh */
.dview__cap {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 1;
    width: 100%;
    padding: var(--space-6) var(--space-3) var(--space-3);
    background: linear-gradient(transparent, rgba(20, 30, 50, .78));
    color: var(--color-on-dark);
    pointer-events: none;
}

@media(min-width:768px) {
    .dview__cap {
        width: 100%;
        padding: var(--space-6) var(--space-4) var(--space-4);
    }
}

.dview__cap h3.h3 {
    color: var(--color-on-dark);
}

.dview__cap .small {
    color: var(--color-on-dark-muted);
    margin-top: 2px;
}

/* 依据：渐变字带 linear-gradient(transparent,rgba(20,30,50,.78)) = .wcard__label（展示页 L431）原值；无独立色块 */

/* 查看器控制/计数行 .dview__meta（stage 下方 · 1-based 计数「3 / 6」） */
.dview__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-3);
}

.dview__counter {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text-heading);
}

.dview__hint {
    color: var(--color-text-tertiary);
    font-size: .75rem;
    line-height: 1.4;
}

/* ---------- ③ 集内缩略图条 .dview__thumbs（6 枚 .dthumb = 集内「可见地图」+ 直跳）
   当前张 .is-active 黄描边；aria-current="true"；移动端横滑不换行 ---------- */
.dview__thumbs {
    padding-block: var(--space-4) var(--space-6);
}

@media(min-width:1024px) {
    .dview__thumbs {
        padding-block: var(--space-5) var(--space-7);
    }
}

.dview__thumbs__track {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
}

.dview__thumbs__track::-webkit-scrollbar {
    display: none;
}

@media(min-width:768px) {
    .dview__thumbs__track {
        justify-content: center;
    }
}

.dthumb {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    aspect-ratio: 4/5;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card-sm);
    overflow: hidden;
    background: var(--color-white);
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.dthumb .vid-ph {
    position: absolute;
    inset: 0;
}

.dthumb:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.dthumb:focus-visible {
    outline: 3px solid rgba(30, 64, 175, .35);
    outline-offset: 2px;
}

.dthumb.is-active {
    border-color: var(--color-brand-yellow);
    box-shadow: 0 0 0 2px var(--color-brand-yellow);
}

/* ---------- ④ 集信息 .dinfo（白底 · section-head + intro + owner/cat/件数 元信息行）
   不做色块：元信息沿用 .small/.num 文字层级 ---------- */
.dinfo {
    background: var(--color-white);
    padding-block: var(--space-6) var(--space-5);
}

@media(min-width:1024px) {
    .dinfo {
        padding-block: var(--space-7) var(--space-6);
    }
}

.dinfo__intro {
    max-width: 760px;
    font-size: .9375rem;
    line-height: 1.8;
    color: var(--color-text-primary);
}

.dinfo__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-4);
}

.dinfo__meta li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.dinfo__meta b {
    font-weight: 700;
    color: var(--color-text-heading);
}

.dinfo__meta .num {
    font-weight: 800;
}

/* ---------- ⑤ 其他作品集 .dmore（6 枚 .dalbum 集卡 · 当前集 is-active · 点击同页 hash 换集）
   视觉语感继承 .wcard（白底 hairline 卡 + 4:5 封面 + hover 上浮） ---------- */
.dmore {
    background: var(--color-white);
    padding-block: var(--space-5) var(--space-6);
}

@media(min-width:1024px) {
    .dmore {
        padding-block: var(--space-6) var(--space-7);
    }
}

.dmore__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

@media(min-width:576px) {
    .dmore__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

@media(min-width:1024px) {
    .dmore__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.dalbum {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dalbum:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-float);
    border-color: var(--color-brand-yellow);
}

.dalbum:focus-visible {
    outline: 3px solid rgba(30, 64, 175, .35);
    outline-offset: 2px;
}

.dalbum.is-active {
    border-color: var(--color-brand-yellow);
    box-shadow: 0 0 0 2px var(--color-brand-yellow);
}

.dalbum.is-active .dalbum__body h4::after {
    content: " · 当前";
    font-weight: 600;
    color: var(--color-brand-yellow-text);
}

.dalbum__cover {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    aspect-ratio: 4/5;
    border-radius: var(--radius-card-sm);
    overflow: hidden;
    background: var(--color-dark-ink);
}

.dalbum__cover .vid-ph {
    position: absolute;
    inset: 0;
}

.dalbum__body {
    min-width: 0;
}

.dalbum__body h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text-heading);
}

.dalbum__body .small {
    margin-top: 2px;
    color: var(--color-text-secondary);
}

.dalbum__body .small .num {
    font-weight: 800;
}
.zpSwiper .swiper-slide{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 690px;
}
.zpSwiper .swiper-slide img{
    height: 100%;
    width: auto;
}
.zpSwiperThumbs .swiper-wrapper{
    /*justify-content: center;*/
}

.zpSwiperThumbs .swiper-slide{
    max-width: 72px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #555555;
}
.zpSwiperThumbs .swiper-slide img{
    height: auto;
    width: 100%;
}
.zpSwiperThumbs .swiper-slide {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card-sm);
    overflow: hidden;
    background: #555;
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.zpSwiperThumbs .swiper-slide.swiper-slide-thumb-active {
    border-color: var(--color-brand-yellow);
    box-shadow: 0 0 0 2px var(--color-brand-yellow);
}