/* ==========================================================================
   04 展柜 —— 同人志版的收藏目录：粗框、双色裱贴、贴着展签的拼贴。
   页面特有样式，只作用于本页。
   ========================================================================== */

/* 页头：留白、标题字号、统计条几何一律由 v2.css 的 .room-head / .stat-box 提供，本页不再覆盖 */

/* ---------- 分类工具条 ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;
  padding:9px 12px;border:3px solid var(--ink);background:var(--paper-2);box-shadow:var(--hard-sm)}
.tabs{display:flex;flex-wrap:wrap;gap:7px}
.tab{display:inline-flex;align-items:baseline;gap:6px;border:2px solid var(--ink);background:var(--paper);
  padding:5px 11px 4px;font-size:13px;font-weight:900;letter-spacing:.02em;
  transition:background .14s var(--ease),box-shadow .14s var(--ease),transform .14s var(--ease)}
.tab b{font-family:var(--disp);font-size:11px;letter-spacing:0;color:var(--ink-62);font-weight:900}
.tab:hover{background:var(--pink-wash);transform:translate(-1px,-1px)}
.tab.is-on{background:var(--pink);box-shadow:3px 3px 0 var(--shade);transform:none}
.tab.is-on b{color:var(--ink)}
.toolbar-count{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-62);white-space:nowrap}
.toolbar-count b{font-family:var(--disp);font-size:22px;line-height:1;letter-spacing:0;color:var(--pink-deep)}
.toolbar-count .slash{color:var(--ink-62);font-size:12px;margin:0 2px}

/* 筛选状态提示条 */
.filter-note{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;
  border:2px solid var(--ink);background:var(--paper);box-shadow:var(--hard-sm);padding:9px 12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-62)}
.filter-note[hidden]{display:none}
.filter-note b{font-family:var(--disp);font-size:12px;letter-spacing:0;color:var(--pink-deep);margin:0 2px}
.note-clear{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:2px;white-space:nowrap}
.note-clear:hover{color:var(--pink-deep);border-color:var(--pink-deep)}

/* ---------- 拼贴网格 ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 26px;align-items:start;padding-top:20px}
.ex{position:relative;min-width:0;transform:rotate(var(--rot,0deg))}
.ex[hidden]{display:none}
.e3{grid-column:span 3}.e4{grid-column:span 4}.e5{grid-column:span 5}.e8{grid-column:span 8}
.ex:hover{z-index:3}

.ex-open{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:zoom-in}
.ex .frame{aspect-ratio:var(--ar,4/3);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.ex:hover .frame{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--shade)}
.ex:hover .frame img{filter:grayscale(1) contrast(1.22) brightness(1.1)}
.ex .frame .cap{font-size:10px}

/* 图下 mono 展签：编号 / 名称 / 分类·年代 */
.ex-meta{display:flex;align-items:baseline;gap:10px;padding:9px 2px 0;flex-wrap:wrap}
.ex-meta .mno{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-62)}
.ex-meta .mname{font-size:16px;font-weight:900;letter-spacing:-.01em;line-height:1.3}
.ex-meta .mcat{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-62);white-space:nowrap;margin-left:auto}

/* 主展品：2 栏宽 + 网点圆 + 展签纸卡 + NEW ARRIVAL */
.ex-main{grid-column:span 8;--rot:-.8deg}
.ex-main .halo{position:absolute;left:-56px;top:-46px;width:350px;height:350px;z-index:0;pointer-events:none;
  border-radius:50%;background:var(--pink);opacity:.32;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 55%, transparent) 1.15px,transparent 1.35px);background-size:6px 6px}
.ex-main .ex-open{position:relative;z-index:1}
.ex-main .frame{aspect-ratio:16/9;box-shadow:8px 8px 0 var(--shade)}
.ex-main .new{position:absolute;left:-16px;top:18px;z-index:6;transform:rotate(-4deg);box-shadow:3px 3px 0 var(--shade)}
.main-label{position:absolute;right:-18px;bottom:66px;z-index:6;width:300px;transform:rotate(1.6deg);
  background:var(--paper);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--shade);padding:13px 15px 15px}
.main-label .lk,.lb-label .lk{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;color:var(--ink-62);border-bottom:2px solid var(--ink);padding-bottom:6px;margin-bottom:9px}
.main-label .note,.lb-label .note{font-family:var(--kai);font-size:17px;line-height:1.7;color:var(--ink)}
.main-label .lm{margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-62);line-height:1.75;padding-right:34px}
.stamp{position:absolute;right:12px;bottom:12px;width:30px;height:30px;background:var(--pink);border:2px solid var(--ink);
  display:grid;place-items:center;font-family:var(--kai);font-size:15px;color:var(--ink);transform:rotate(4deg)}
.ex-main .ex-meta .mname{font-size:20px}

/* 小贴纸 */
.pin{position:absolute;z-index:5;top:-11px;right:-8px;transform:rotate(3deg);box-shadow:3px 3px 0 var(--shade)}
.pin--left{right:auto;left:-10px;transform:rotate(-4deg)}
.foot .colophon{color:color-mix(in srgb, var(--paper) 55%, transparent)}

/* 收尾面板 */
.closing{grid-column:span 8;align-self:stretch;position:relative;border:3px solid var(--ink);background:var(--paper-2);
  box-shadow:var(--hard);padding:22px 24px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;min-height:220px}
.closing::before{content:"";position:absolute;inset:0;z-index:0;opacity:.4;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 40%, transparent) 1.1px,transparent 1.3px);background-size:5px 5px}
.closing-no{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding-right:22px;border-right:3px solid var(--ink);align-self:stretch;justify-content:center}
.closing-no b{font-family:var(--disp);font-size:84px;line-height:.82;letter-spacing:-.04em;color:var(--pink-deep)}
.closing-no .mono{font-size:10px;letter-spacing:.1em;white-space:nowrap}
.closing-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.closing .mono{position:relative;z-index:1;font-size:10px}
.closing .kai{position:relative;z-index:1;font-size:22px;line-height:1.75;max-width:24ch}
.closing-row{position:relative;z-index:1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2px}
.closing-row .mono{font-size:10px;letter-spacing:.1em}

/* 筛选后的规整图鉴：三列、统一 4:3、去掉拼贴装饰 */
.gal-grid.is-filtered{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px;align-items:start}
.gal-grid.is-filtered .ex,.gal-grid.is-filtered .ex-main{grid-column:auto;--rot:0deg}
.gal-grid.is-filtered .ex .frame,
.gal-grid.is-filtered .ex-main .frame{aspect-ratio:4/3}
.gal-grid.is-filtered .ex-main .halo,
.gal-grid.is-filtered .ex-main .new,
.gal-grid.is-filtered .ex-main .main-label,
.gal-grid.is-filtered .closing{display:none}
.gal-grid.is-filtered .ex .pin{display:none}
.gal-grid.is-filtered .ex-main .ex-meta .mname{font-size:16px}
.ex.is-in{animation:pop .32s var(--ease) both}

/* 无图占位：mediaKey 为空时不渲染 <img>，用纸质占位撑住画幅 */
.nofig{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--paper-3);color:var(--ink-62)}
.nofig b{font-family:var(--kai);font-size:18px;font-weight:400;color:var(--ink)}
.nofig span{font-family:var(--mono);font-size:10px;letter-spacing:.16em}

/* 空态：没有陈列中的藏品时替代网格 */
.gal-empty{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:22px;padding:38px 30px;
  border:3px solid var(--ink);background:var(--paper-2);box-shadow:var(--hard)}
.gal-empty .sticker{align-self:flex-start}
.gal-empty-t{font-family:var(--kai);font-size:22px;line-height:1.8;color:var(--ink-62)}

/* ---------- 灯箱 ---------- */
.lb{width:auto;max-width:min(1180px,94vw);max-height:92vh;padding:0;border:3px solid var(--pink);
  background:var(--ink);color:var(--paper);box-shadow:10px 10px 0 color-mix(in srgb, var(--pink) 32%, transparent);overflow:visible}
.lb::backdrop{background:color-mix(in srgb, var(--ink) 84%, transparent)}
.lb[open]{animation:pop .3s var(--ease) both}
.lb-inner{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.8fr);max-height:calc(92vh - 6px)}
.lb-fig{padding:22px;background:var(--ink);border-right:3px solid var(--pink);
  display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
.lb-fig .frame{width:100%;border-color:var(--pink);box-shadow:7px 7px 0 color-mix(in srgb, var(--pink) 35%, transparent)}
.lb-fig .frame img{height:auto;max-height:calc(92vh - 130px);object-fit:contain;background:var(--ink-80)}
.lb-side{padding:22px 24px 18px;display:flex;flex-direction:column;min-height:0;overflow:auto}
.lb-top{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.lb-close{margin-left:auto;width:44px;height:44px;flex:none;display:grid;place-items:center;border:2px solid var(--pink);
  color:var(--paper);background:transparent;transition:background .14s var(--ease),color .14s var(--ease)}
.lb-close:hover{background:var(--pink);color:var(--ink)}
.lb-title{font-size:30px;font-weight:900;line-height:1.28;letter-spacing:-.02em;color:var(--paper)}
.lb-meta{margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;line-height:1.9;color:var(--pink-soft)}
.lb-label{position:relative;margin-top:20px;background:var(--paper);color:var(--ink);
  border:3px solid var(--pink);box-shadow:5px 5px 0 rgba(0,0,0,.4);padding:13px 15px 15px}
.lb-label .note{font-size:18px;line-height:1.75;padding-right:30px}
.lb-nav{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:10px}
.lb-nav .btn{height:42px;padding:0 13px;font-size:12px;border-width:2px;box-shadow:3px 3px 0 var(--pink);color:var(--ink);background:var(--paper)}
.lb-nav .btn--pink{box-shadow:3px 3px 0 color-mix(in srgb, var(--pink) 50%, transparent)}
.lb-nav .btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:3px 3px 0 var(--ink-25)}
.lb-count{font-family:var(--disp);font-size:19px;line-height:1;letter-spacing:0;color:var(--paper);white-space:nowrap}
.lb-count span{color:var(--pink)}
.lb-hint{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:color-mix(in srgb, var(--paper) 62%, transparent)}
.lb-fig img[hidden]{display:none}
.lb-nofig{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:min(58vh,440px);color:var(--pink-soft)}
.lb-nofig[hidden]{display:none}
.lb-nofig b{font-family:var(--kai);font-size:24px;font-weight:400;color:var(--paper)}
.lb-nofig span{font-family:var(--mono);font-size:10px;letter-spacing:.18em}
html.lb-lock{overflow:hidden}

/* ---------- 分页底：第 N 页 + 更早的藏品 ---------- */
.list-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;
  border-top:3px solid var(--ink);padding-top:16px}
.list-foot .mono{font-size:10px;letter-spacing:.1em}
.list-foot .btn{height:46px}
.list-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.list-links .arrow-link{white-space:nowrap}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .room-head{padding-top:calc(var(--topbar-h) + 26px)}
  .room-stats{justify-content:flex-start}
  .toolbar{flex-wrap:wrap}
  .ex-main{grid-column:span 12}
  .e3,.e4,.e5{grid-column:span 6}
  .closing{grid-column:span 12;min-height:0}
  .main-label{width:280px}
  .lb-inner{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr)}
}
@media (max-width:760px){
  .topmeta > span{display:none}
  .topmeta{gap:0;font-size:10px}
  .page-sticker{font-size:10px;padding:4px 6px;letter-spacing:.1em}
  .room-head{padding-top:calc(var(--topbar-h) + 14px);padding-bottom:22px}
  .room-head h1{font-size:34px}
  .room-stats{gap:6px}
  .room-stats .stat-box{min-width:0;padding:7px 9px}
  .room-stats .stat-box .k{font-size:10px;letter-spacing:.08em}
  .room-stats .stat-box .v{font-size:18px}
  .toolbar{margin-top:16px;padding:8px;flex-direction:column;align-items:flex-start;gap:10px}
  .tabs{gap:6px}
  .tab{font-size:12px;padding:4px 8px 3px}
  .tab b{font-size:10px}
  .gal-grid{padding-top:18px;gap:26px 16px;grid-template-columns:1fr}
  .e3,.e4,.e5,.ex-main,.closing{grid-column:span 1}
  .ex{--rot:0deg}
  .ex-main .halo{width:200px;height:200px;left:-18px;top:-18px}
  .ex-main .new{left:-6px;top:12px}
  .ex-main .frame{aspect-ratio:4/3}
  .main-label{position:relative;right:auto;bottom:auto;width:100%;transform:rotate(-.5deg);margin-top:12px}
  .ex-main .ex-meta .mname{font-size:17px}
  .gal-grid.is-filtered{grid-template-columns:1fr}
  .lb{max-height:94vh;width:calc(100vw - 24px)}
  .lb-inner{grid-template-columns:1fr;max-height:calc(94vh - 6px);overflow:auto}
  .lb-fig{border-right:0;border-bottom:3px solid var(--pink);padding:14px}
  .lb-fig .frame img{max-height:38vh}
  .lb-side{padding:16px 16px 14px}
  .lb-title{font-size:23px}
  .lb-nav{padding-top:16px}
  .closing{grid-template-columns:1fr;gap:12px;padding:16px 15px;min-height:0}
  .closing-no{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px;
    border-right:0;border-bottom:3px solid var(--ink);padding:0 0 10px;align-self:auto}
  .closing-no b{font-size:54px}
  .closing .kai{font-size:19px}
}