/* ============================================================
   Gallery — ∞ 궤도 사진
   사진을 8자 궤도에 태우고, 앞쪽(화면 가운데)에 온 사진을 크고 또렷하게 그린다.
   자리·크기·흐림은 gallery.js 가 프레임마다 계산해 인라인으로 넣으므로,
   여기서는 뼈대와 정적인 모양만 정한다.
   라이트박스는 site.css 의 .lb 규격을 그대로 쓴다.
   ============================================================ */

.gal {
  position: relative;
  /* 궤도 사진은 겹침 순서를 위해 z-index 를 1000 대까지 쓴다. 여기서 쌓임 문맥을 끊지 않으면
     그 값이 문서 최상위에서 경쟁해 라이트박스(site.css .lb = 110) 위로 올라온다.
     = 크게 보기를 띄워도 ∞ 궤도가 안 사라진다. */
  z-index: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.gal.is-drag { cursor: grabbing; }

.gal__empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0; color: var(--muted); font-family: var(--sans); font-size: 14px;
}

/* ---------- 배경에 깔리는 흐릿한 사진들 ----------
   궤도만 있으면 주위가 텅 비어 보이므로 바깥쪽을 사진으로 채운다.
   프레임마다 건드리는 건 이 컨테이너의 transform 하나뿐이다(타일 수와 무관). */
.gal__wall {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.gal-bgshot {
  position: absolute;
  object-fit: cover;
  border-radius: 2px;
  /* 늦게 도착한 타일이 툭 나타나지 않게, 받아진 뒤에 제 진하기까지 올라온다 */
  opacity: 0;
  transition: opacity .6s ease;
}

/* ---------- 궤도 위의 사진 한 장 ---------- */
.gal-shot {
  position: absolute; top: 0; left: 0; z-index: 2;
  transform-origin: 50% 50%;
  will-change: transform, filter, opacity;
  background: rgba(23, 21, 18, .05);
  overflow: hidden;
  cursor: pointer;
  border: none; padding: 0;
  appearance: none;
}
/* 사진은 받아진 뒤에 밝아진다. 늦게 도착한 사진이 툭 나타나지 않게. */
.gal-shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  user-select: none; -webkit-user-drag: none;
  opacity: 0; transition: opacity .45s ease;
}
.gal-shot__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 21, 18, .52); color: #fff;
  font-size: 15px; padding-left: 3px;
  pointer-events: none;
}

/* ---------- 하단 캡션 ---------- */
.gal__cap {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px clamp(18px, 3vw, 30px) 16px;
  font-family: var(--sans); font-size: 12px; color: var(--muted);
  background: linear-gradient(to top, rgba(252, 249, 238, .92), rgba(252, 249, 238, 0));
  pointer-events: none;
}
.gal__cap b {
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; color: var(--ink);
}
.gal__hint { margin-left: auto; }

/* ---------- JS 없을 때의 폴백 그리드 ---------- */
.gal__fallback {
  position: relative; z-index: 2;
  height: 100%; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; padding: clamp(18px, 3vw, 34px);
}
.gal-cell {
  position: relative; display: block;
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px;
  background: rgba(23, 21, 18, .05);
}
.gal-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-cell__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23, 21, 18, .52); color: #fff; font-size: 14px; padding-left: 3px;
}

@media (max-width: 860px) {
  /* 채팅 FAB(우하단)과 겹치지 않게 힌트를 접는다 */
  .gal__hint { display: none; }
  .gal__cap { padding-right: 84px; }
}