/* ═══════════════════════════════════════════════════════════════════════
   앨범 — 게시판 진열(listStyle: album) + 보기 창
   사진을 자르지 않는다. A4 세로 문서도 위아래가 잘리지 않게 원본 비율 그대로 둔다.
   ═══════════════════════════════════════════════════════════════════════ */

.galbum {
  display: grid; gap: 18px; justify-content: start;
  grid-template-columns: repeat(auto-fill, minmax(200px, 260px));
}
.galbum-item { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.galbum-tile {
  position: relative; display: block; width: 100%; padding: 0; cursor: zoom-in;
  border: 1px solid var(--line); border-radius: var(--r-md, 18px); overflow: hidden;
  background: var(--surface-2); color: inherit; font: inherit;
}
.galbum-tile img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.galbum-tile:hover img { transform: scale(1.03); }
.galbum-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.galbum-tile .gtile-empty { aspect-ratio: 3 / 4; }

.galbum-title {
  font-size: 14.5px; font-weight: 700; line-height: 1.5; letter-spacing: -0.01em; color: var(--fg);
}

@media (max-width: 600px) {
  .galbum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* ── 보기 창 ─────────────────────────────────────────────────────────── */
html.gl-album-lock { overflow: hidden; }

.gl-album {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgb(0 0 0 / .88);
}
.gl-album-stage {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 56px 64px;
}
.gl-album-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  box-shadow: 0 8px 40px rgb(0 0 0 / .5);
}
.gl-album-btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / .16); color: #fff; font-size: 26px; line-height: 1;
}
.gl-album-btn:hover { background: rgb(255 255 255 / .3); }
.gl-album-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.gl-album-btn[hidden] { display: none; }
.gl-album-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.gl-album-next { right: 12px; top: 50%; transform: translateY(-50%); }
.gl-album-close { right: 12px; top: 12px; font-size: 18px; }
.gl-album-count {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em;
}

@media (max-width: 600px) {
  .gl-album-stage { padding: 56px 8px 44px; }
  .gl-album-prev, .gl-album-next { top: auto; bottom: 4px; transform: none; }
  .gl-album-prev { left: 12px; }
  .gl-album-next { right: 12px; }
}

/* ── 시차 슬라이드(보기 창 · data-fx="parallax" — 문서 35 · 제이터 Photo Gallery) ─────────────────
   사진이 겹쳐 서는 자리라 절대 위치로 가운데에 놓는다. 새 사진은 60vw 밖에서, 옛 사진은 22vw 만 — 거리가 달라 «시차» 가 생긴다. */
.gl-album-parallax .gl-album-stage { position: relative; overflow: hidden; }
.gl-album-parallax .gl-album-img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-width: calc(100% - 128px); max-height: calc(100% - 112px);
  transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1), opacity .9s ease;
}
.gl-album-parallax .gl-album-img.is-in { transform: translate(calc(-50% + var(--dir, 1) * 60vw), -50%); opacity: .2; }
.gl-album-parallax .gl-album-img.is-in.is-go { transform: translate(-50%, -50%); opacity: 1; }
.gl-album-parallax .gl-album-img.is-out { z-index: 0; }
.gl-album-parallax .gl-album-img.is-out.is-go { transform: translate(calc(-50% - var(--dir, 1) * 22vw), -50%); opacity: 0; }
@media (max-width: 600px) {
  .gl-album-parallax .gl-album-img { max-width: calc(100% - 16px); max-height: calc(100% - 100px); }
}
@media (prefers-reduced-motion: reduce) {
  .gl-album-parallax .gl-album-img { transition: none; }
}