/* =========================================================
   青春三册 · 共享灯箱（结构）
   外观由各册主题覆盖这些变量：
   --lb-bg --lb-blur --lb-ink --lb-accent --lb-line --lb-btn
   --lb-radius --lb-img-radius --lb-font --lb-pad
   ========================================================= */

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--lb-bg, rgba(5, 6, 11, 0.92));
  backdrop-filter: var(--lb-blur, blur(18px));
  -webkit-backdrop-filter: var(--lb-blur, blur(18px));
  color: var(--lb-ink, #f4f1ea);
  font-family: var(--lb-font, system-ui, sans-serif);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.38s var(--lb-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    visibility 0.38s;
}

.lb.is-open {
  opacity: 1;
  visibility: visible;
}

.lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--lb-pad, clamp(0.8rem, 2vw, 1.2rem) clamp(1rem, 3vw, 2rem));
}

.lb__count {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--lb-muted, rgba(244, 241, 234, 0.6));
  font-variant-numeric: tabular-nums;
}

.lb__count b {
  color: var(--lb-accent, #e9c37e);
  font-weight: 600;
  font-size: 1rem;
}

.lb__close,
.lb__nav {
  display: grid;
  place-items: center;
  width: var(--lb-btn-size, 42px);
  height: var(--lb-btn-size, 42px);
  border-radius: var(--lb-radius, 50%);
  border: 1px solid var(--lb-line, rgba(255, 255, 255, 0.18));
  background: var(--lb-btn, rgba(255, 255, 255, 0.04));
  color: inherit;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.lb__close:hover,
.lb__nav:hover {
  background: var(--lb-accent, #e9c37e);
  border-color: transparent;
  color: var(--lb-accent-ink, #171105);
}

.lb__close svg,
.lb__nav svg {
  width: 17px;
  height: 17px;
}

.lb__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 clamp(0.6rem, 3vw, 3rem);
}

.lb__img {
  max-width: 100%;
  max-height: calc(100vh - 128px);
  max-height: calc(100svh - 128px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--lb-img-radius, 4px);
  box-shadow: var(--lb-shadow, 0 40px 90px -50px rgba(0, 0, 0, 0.9));
  background: var(--lb-img-bg, transparent);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.4s ease, transform 0.55s var(--lb-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lb__img.is-ready {
  opacity: 1;
  transform: none;
}

.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  opacity: 0.85;
}

.lb__nav--prev {
  left: clamp(0.3rem, 1.6vw, 1.4rem);
}

.lb__nav--next {
  right: clamp(0.3rem, 1.6vw, 1.4rem);
}

.lb__nav:hover {
  opacity: 1;
}

@media (max-width: 720px) {
  .lb__img {
    max-height: calc(100vh - 108px);
    max-height: calc(100svh - 108px);
  }
  .lb__nav {
    width: 38px;
    height: 38px;
  }
}