/* ══════════════════════════════════════════════════════════════
   照片墙 / 分层堆叠相册
   样式整段搬自参考项目 zwxll/Your-China-Travel 的 .img-viewer 规则，
   一行未改。它用 CSS 把五张卡片摆成"主卡 + 两侧微斜"的堆叠效果
   （.photo-card.main / .prev / .next / .far-prev / .far-next）。
   ══════════════════════════════════════════════════════════════ */
/* ===== 全屏图片预览器 ===== */
  /* 图片预览弹窗 —— 半透浅灰遮罩 + 淡入淡出过渡 */
  /* ===== 分层堆叠相册预览器 ===== */
  /* 底层：半透明深色遮罩 + 弱模糊，弱化后方页面 */
  .img-viewer{position:fixed;inset:0;z-index:10010;
    background:rgba(15,17,22,.92);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    display:none;align-items:center;justify-content:center;
    overflow:hidden;
    opacity:0;transition:opacity .3s ease;}
.img-viewer.show{display:flex;opacity:1;}
.img-viewer.carousel-mode{overflow:clip;}
/* 舞台容器：承载 3D 旋转木马圆环（仅 .carousel-mode 模式）
   * ★ 改造为 3D Carousel（cult-ui 旋转木马）：卡片围成圆环，整体 rotateY 旋转 */
  .img-viewer.carousel-mode .stage{position:relative;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    overflow:visible;
    /* 3D 透视：让圆环有纵深感 */
    perspective:1400px;
    perspective-origin:50% 50%;}
/* 旋转木马圆环：所有卡片挂载于此，整体 rotateY 旋转
   * 卡片尺寸缩小为 1.1 倍：300×400 → 330×440，视觉精致
   * 尺寸通过 CSS 变量 --card-w/--card-h 控制，支持 1.5 倍放大模式 */
  .img-viewer.carousel-mode .carousel-ring{position:relative;
    width:var(--card-w,330px);height:var(--card-h,440px);
    transform-style:preserve-3d;
    transition:transform .8s cubic-bezier(.25,.46,.45,.94);
    will-change:transform;}
.img-viewer.carousel-mode .carousel-ring.dragging{transition:none;}
/* 背景图层：默认隐藏，cover-bg-mode 模式下显示虚化封面大图 */
  .img-viewer.carousel-mode .carousel-bg{position:absolute;inset:0;z-index:0;
    background-size:cover;background-position:center;
    filter:blur(40px) brightness(.4);
    opacity:0;transition:opacity .4s ease;
    transform:scale(1.1);}
.img-viewer.carousel-mode.cover-bg-mode .carousel-bg{opacity:1;}
/* cover-bg-mode 下移除纯色遮罩，沿用虚化封面背景 */
  .img-viewer.carousel-mode.cover-bg-mode{background:transparent;}
/* ===== 照片卡片：3D 旋转木马单卡（仅 .carousel-mode）
   * 去除白底相纸边框，照片直接铺满卡片，尺寸由 CSS 变量控制 */
  .img-viewer.carousel-mode .photo-card{position:absolute;top:0;left:0;
    width:var(--card-w,330px);height:var(--card-h,440px);
    /* 去除白色相纸背景和 padding，照片直接铺满 */
    background:transparent;
    padding:0;
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    backface-visibility:hidden;
    box-shadow:0 16px 48px rgba(0,0,0,.5);
    transform-style:preserve-3d;}
.img-viewer.carousel-mode .photo-card img{width:100%;height:100%;
    object-fit:cover;          /* 照片铺满整个卡片，无白边 */
    border-radius:8px;
    user-select:none;-webkit-user-drag:none;pointer-events:none;
    display:block;}
/* 当前焦点卡片青蓝发光高亮 */
  .img-viewer.carousel-mode .photo-card.is-active{box-shadow:0 24px 80px rgba(56,189,248,.35),0 8px 32px rgba(0,0,0,.5);}
/* ===== 原堆叠相册样式（仅 .stack-mode 模式，非景点照片查看使用）===== */
  .img-viewer.stack-mode .stage{position:relative;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;}
.img-viewer.stack-mode .photo-card{position:absolute;
    background:#fff;
    padding:12px;
    border-radius:4px;
    display:flex;align-items:center;justify-content:center;
    transition:transform .55s cubic-bezier(.25,.46,.45,.94),
               opacity .4s ease;
    will-change:transform;
    backface-visibility:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.35);}
.img-viewer.stack-mode .photo-card img{max-width:70vw;max-height:66vh;object-fit:contain;
    border-radius:2px;
    user-select:none;-webkit-user-drag:none;pointer-events:none;
    display:block;}
.img-viewer.stack-mode .photo-card.dragging{transition:none !important;}
.img-viewer.stack-mode .photo-card.no-transition{transition:none !important;}
.img-viewer.stack-mode .photo-card.main{z-index:10;transform:translate(0,0) rotate(0deg) scale(1);opacity:1;
    box-shadow:0 24px 80px rgba(0,0,0,.55),0 8px 32px rgba(0,0,0,.3);}
.img-viewer.stack-mode .photo-card.prev{z-index:8;transform:translate(-130px,32px) rotate(-8deg) scale(.78);opacity:.5;}
.img-viewer.stack-mode .photo-card.next{z-index:8;transform:translate(130px,32px) rotate(8deg) scale(.78);opacity:.5;}
.img-viewer.stack-mode .photo-card.far-prev{z-index:6;transform:translate(-240px,58px) rotate(-14deg) scale(.64);opacity:.22;
    box-shadow:0 6px 20px rgba(0,0,0,.2);}
.img-viewer.stack-mode .photo-card.far-next{z-index:6;transform:translate(240px,58px) rotate(14deg) scale(.64);opacity:.22;
    box-shadow:0 6px 20px rgba(0,0,0,.2);}
/* ===== 上层控件：左右切换按钮 ===== */
  .img-viewer .nav-btn{position:absolute;top:50%;transform:translateY(-50%);
    width:52px;height:52px;border-radius:50%;
    background:rgba(248,250,252,.1);border:1px solid rgba(248,250,252,.18);
    color:#fff;font-size:26px;cursor:pointer;display:grid;place-items:center;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:background .25s ease,transform .25s ease,opacity .25s ease;
    z-index:20;}
.img-viewer .nav-btn:hover{background:rgba(248,250,252,.22);transform:translateY(-50%) scale(1.1);}
.img-viewer .nav-btn.disabled{opacity:.25;pointer-events:none;}
.img-viewer .nav-prev{left:28px;}
.img-viewer .nav-next{right:28px;}
/* ===== 上层控件：关闭按钮 ===== */
  .img-viewer .close-btn{position:absolute;top:22px;right:28px;
    width:42px;height:42px;border-radius:50%;
    background:rgba(248,250,252,.1);border:1px solid rgba(248,250,252,.18);
    color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:background .25s ease,transform .25s ease;z-index:20;}
.img-viewer .close-btn:hover{background:rgba(232,148,60,.55);transform:rotate(90deg);}
/* ===== 上层控件：下载按钮 ===== */
  .img-viewer .download-btn{position:absolute;top:22px;left:28px;
    width:42px;height:42px;border-radius:50%;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
    color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:background .25s ease,transform .25s ease;z-index:20;}
.img-viewer .download-btn:hover{background:rgba(248,250,252,.22);transform:scale(1.1);}
/* ===== 上层控件：页码提示 ===== */
  .img-viewer .counter{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
    color:rgba(255,255,255,.6);font-size:14px;font-weight:500;
    background:rgba(0,0,0,.35);padding:6px 18px;border-radius:20px;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    z-index:20;}
.img-viewer .viewer-media-tabs{position:absolute;top:22px;left:86px;z-index:22;display:flex;gap:4px;padding:3px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.img-viewer .viewer-media-tabs[hidden]{display:none;}
.img-viewer .viewer-media-tab{border:0;border-radius:7px;padding:6px 11px;background:transparent;color:rgba(255,255,255,.68);font-family:inherit;font-size:12px;cursor:pointer;white-space:nowrap;}
.img-viewer .viewer-media-tab:hover{background:rgba(255,255,255,.16);color:#fff;}
.img-viewer .viewer-media-tab.is-active{background:#e8e9eb;color:#0f1116;}
/* ===== 底部缩略图层：横向排列，当前高亮放大 ===== */
  .img-viewer .thumb-strip{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);
    display:flex;gap:8px;padding:8px 12px;
    background:rgba(0,0,0,.3);border-radius:12px;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    max-width:90vw;overflow-x:auto;overflow-y:hidden;
    z-index:20;}
.img-viewer .thumb-strip::-webkit-scrollbar{height:0;}
.img-viewer .thumb-strip .thumb{width:52px;height:52px;border-radius:6px;object-fit:cover;
    cursor:pointer;opacity:.5;flex-shrink:0;
    border:2px solid transparent;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
    transition:opacity .2s ease,transform .2s ease,border-color .2s ease;}
.img-viewer .thumb-strip .thumb:hover{opacity:.85;transform:scale(1.05);}
.img-viewer .thumb-strip .thumb.active{opacity:1;transform:scale(1.2);
    border-color:#7dd3fc;
    box-shadow:0 4px 16px rgba(125,211,252,.18);}
/* 底部操作提示 */
  .img-viewer .hint{position:absolute;bottom:142px;right:28px;
    color:rgba(255,255,255,.3);font-size:11px;z-index:20;}
/* 照片查看器浏览模式：横向缩略条 / 照片墙 */
  .img-viewer .viewer-mode{position:absolute;top:24px;right:84px;z-index:22;display:flex;align-items:center;gap:8px;padding:5px 8px 5px 12px;border-radius:13px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.img-viewer .vm-label{color:rgba(255,255,255,.5);font-size:11.5px;letter-spacing:.1em;white-space:nowrap;user-select:none;}
.img-viewer .vm-btn{width:30px;height:26px;border-radius:8px;cursor:pointer;border:1px solid transparent;background:transparent;display:grid;place-items:center;padding:0;color:rgba(255,255,255,.5);transition:color .25s ease,background .25s ease,border-color .25s ease;}
.img-viewer .vm-btn:hover{color:#fff;background:rgba(255,255,255,.08);}
.img-viewer .vm-btn.is-active{color:#0f1116;background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9);}
.img-viewer .viewer-wall{position:absolute;left:0;right:0;top:76px;bottom:72px;z-index:15;display:none;padding:40px 24px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;}
.img-viewer.wall-mode{background:#161513;backdrop-filter:none;}
.img-viewer.wall-mode .viewer-wall{display:flex;background:radial-gradient(ellipse at center,rgba(106,98,83,.3),transparent 75%);}
.img-viewer.wall-mode .stage,.img-viewer.wall-mode .thumb-strip,.img-viewer.wall-mode .hint{display:none;}
/* Native hanging-slide adaptation inspired by Slide Curtain; no demo code or photos copied. */
  .img-viewer .curtain-panel{position:relative;display:flex;flex:none;margin:auto;padding:14px 12px 10px;background:radial-gradient(ellipse at 50% 35%,#fff8df,#d6ccb7);border:9px solid #777164;box-shadow:0 0 0 14px rgba(143,135,118,.15),0 0 65px rgba(236,220,179,.18),inset 0 0 12px #fff7e0;}
.img-viewer .curtain-rod{position:absolute;left:-22px;right:-22px;top:-13px;height:9px;border-radius:5px;background:linear-gradient(#5b5851,#151412 45%,#24221e);box-shadow:0 4px 5px rgba(19,17,13,.45);}
.img-viewer .curtain-rod::before,.img-viewer .curtain-rod::after{content:'';position:absolute;top:-4px;width:17px;height:17px;border-radius:50%;background:#151412;}
.img-viewer .curtain-rod::before{left:-4px;}
.img-viewer .curtain-rod::after{right:-4px;}
.img-viewer .curtain-chain{width:var(--curtain-cell);flex:none;transform:rotate(0deg);transform-origin:50% -14px;}
.img-viewer .curtain-link{height:var(--curtain-cell);display:flex;align-items:center;justify-content:center;}
.img-viewer .wall-tile{position:relative;display:flex;align-items:center;justify-content:center;width:90%;height:90%;margin:0;padding:8%;border:1px solid #484238;cursor:pointer;border-radius:4px;background:linear-gradient(125deg,#333029,#161513 55%,#28251f);box-shadow:0 2px 3px rgba(29,24,17,.4),inset 0 0 0 2px rgba(239,222,185,.035);transition:box-shadow .18s ease;}
.img-viewer .wall-tile::before{content:'';position:absolute;left:50%;bottom:calc(100% + 1px);width:16%;height:18%;border:2px solid #4e493f;border-radius:50%;transform:translateX(-50%);box-sizing:border-box;}
.img-viewer .wall-tile:hover{box-shadow:0 2px 9px rgba(29,24,17,.5),inset 0 0 0 2px #827663;}
.img-viewer .wall-tile:focus-visible{outline:3px solid #ad7b39;outline-offset:2px;}
.img-viewer .wall-tile img{width:100%;height:100%;object-fit:contain;display:block;filter:none;pointer-events:none;}
.img-viewer .wall-no{position:absolute;left:6px;bottom:5px;font-size:10px;line-height:1;color:rgba(255,255,255,.92);padding:3px 5px;border-radius:5px;background:rgba(12,14,18,.5);opacity:0;transition:opacity .2s ease;}
.img-viewer .wall-tile:hover .wall-no{opacity:1;}
.img-viewer .wall-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(12,14,18,.42);border:1px solid rgba(255,255,255,.5);}
.img-viewer .wall-zoom{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(9,11,15,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.img-viewer .wall-zoom.show{display:flex;}
.img-viewer .wz-stage{position:relative;display:flex;align-items:center;justify-content:center;width:calc(100% - 160px);height:calc(100% - 132px);}
.img-viewer .wz-stage img,.img-viewer .wz-stage video{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:6px;box-shadow:0 24px 70px rgba(0,0,0,.6);background:rgba(255,255,255,.03);}
.img-viewer .wz-close{position:absolute;top:22px;right:26px;width:42px;height:42px;border-radius:50%;background:rgba(248,250,252,.08);border:1px solid rgba(248,250,252,.16);color:#fff;font-size:22px;cursor:pointer;z-index:4;}
.img-viewer .wz-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(248,250,252,.08);border:1px solid rgba(248,250,252,.16);color:#fff;font-size:24px;cursor:pointer;display:grid;place-items:center;z-index:3;}
.img-viewer .wz-nav.disabled{opacity:.22;pointer-events:none;}
.img-viewer .wz-prev{left:26px;}
.img-viewer .wz-next{right:26px;}
.img-viewer .wz-bar{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 10px 8px 16px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);z-index:4;}
.img-viewer .wz-count{font-size:13px;color:rgba(255,255,255,.82);white-space:nowrap;}
.img-viewer .wz-name{font-size:12px;color:rgba(255,255,255,.45);max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.img-viewer .wz-dl,.img-viewer .wz-strip{cursor:pointer;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);border-radius:9px;font:12px inherit;padding:5px 12px;}
.img-viewer .wz-hint{position:absolute;top:30px;left:26px;color:rgba(255,255,255,.3);font-size:11px;z-index:4;}
.img-viewer .viewer-mode{right:20px;top:74px;padding:5px 6px 5px 9px;}
.img-viewer .vm-label{display:none;}
.img-viewer .viewer-wall{top:118px;padding:32px 20px;}
.img-viewer .curtain-panel{padding:12px 4px 6px;border-width:5px;box-shadow:0 0 0 7px rgba(143,135,118,.15),0 0 30px rgba(236,220,179,.15);}
.img-viewer .curtain-rod{left:-13px;right:-13px;}
.img-viewer .wz-stage{width:calc(100% - 24px);height:calc(100% - 130px);}
.img-viewer .wz-name{display:none;}
.img-viewer .download-btn{left:14px;top:16px;}
.img-viewer .close-btn{right:14px;top:16px;}
.img-viewer .viewer-media-tabs{left:64px;top:20px;}
.img-viewer .viewer-mode{right:14px;}
.img-viewer .viewer-media-tab{padding:6px 8px;}
@keyframes fade {from{opacity:0}to{opacity:1}}
@keyframes tlFadeIn {from{opacity:0;}to{opacity:1;}}
@keyframes attFadeIn {from{opacity:0;}to{opacity:1;}}
@keyframes gravityFadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes archiveFade {from{opacity:0}to{opacity:1}}

/* ── 我这边补的居中锚点 ──
   参考项目的堆叠卡由主应用 JS 定位到舞台中心；这里没有那套 JS，
   用一条 CSS 把卡片的左上角挪到舞台中心再回退半张卡，等价于居中。
   卡片基准尺寸 330×440（见 .stack-mode .photo-card 的 max-width/max-height）。 */
#pwViewer .stage{position:relative}
#pwViewer .photo-card{top:50%;left:50%;margin:-220px 0 0 -165px;transform-origin:center center}
@media (max-width:760px){
  #pwViewer .photo-card{margin:-160px 0 0 -120px}
}

/* ── 我这边加的两块：网格态的墙 + 形态切换按钮 ──
   相框与挂杆本身用的是上面搬来的 .curtain-panel / .curtain-rod，样式未改。 */
#pwViewer .pw-wall{position:absolute;inset:0;overflow-y:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:18px 15px;
  padding:30px 30px 40px;background:linear-gradient(180deg,#fbf6ea,#f1e9d8);align-content:start}
#pwViewer .pw-wall::-webkit-scrollbar{width:8px}
#pwViewer .pw-wall::-webkit-scrollbar-thumb{background:rgba(120,105,80,.3);border-radius:4px}
#pwViewer .curtain-panel{padding:9px 7px 6px!important;border-width:6px!important;cursor:pointer;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
#pwViewer .curtain-panel:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 14px 30px rgba(60,50,30,.26)}
#pwViewer .curtain-panel img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#201d1a}
#pwViewer .pw-toggle{position:absolute;top:18px;right:20px;z-index:40;font:inherit;font-size:.84em;
  color:#fff;background:rgba(20,24,30,.72);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:9px 18px;cursor:pointer;backdrop-filter:blur(6px)}
#pwViewer .pw-toggle:hover{background:rgba(212,168,67,.28);border-color:rgba(212,168,67,.6)}
#pwViewer.pw-grid-mode .nav-btn{display:none}
#pwViewer.reveal .pw-count{bottom:14px}

/* ── 堆叠态必须彻底清空背景 ──
   .pw-wall 的 display:grid 会把 [hidden] 的默认 display:none 盖掉，
   所以堆叠时整面墙仍然透在背后（看着很乱）。这里显式把它关掉。 */
#pwViewer .pw-wall[hidden]{display:none!important}
/* 清空后让堆叠画面的背景更干净：深色渐变 + 轻微暗角，不再透出相框 */
#pwViewer.stack-mode{background:
  radial-gradient(ellipse at 50% 42%,rgba(28,44,64,.55),rgba(6,10,16,.96) 62%),
  #060a10}

/* 计数条：底部居中（之前没有定位规则，它作为普通 div 排在按钮后面，跑到右边去了） */
#pwViewer .pw-count{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:40;pointer-events:none;padding:7px 18px;border-radius:999px;
  background:rgba(10,16,24,.72);backdrop-filter:blur(6px);
  color:rgba(235,243,255,.92);font-size:13px;letter-spacing:.04em;white-space:nowrap}