/* ================================================================
 * lightbox.css — 사진 확대 라이트박스 (갤러리 클릭 시 모달)
 * ----------------------------------------------------------------
 * theme-detail.html 에서 쓰던 .lb-* 규칙을 공용으로 분리.
 * 사진을 클릭하면 새 창 대신 모달로 열리도록 place-detail.html 도 함께 사용한다.
 *
 * 동작(js/photo-lightbox.js)과 한 쌍이며, 클래스 이름(.lb-*)이 JS와 결합되어 있다.
 * 페이지 CSS 변수에 의존하지 않도록 색상은 리터럴로 둔다(두 페이지에서 동일하게 보이도록).
 * ================================================================ */
.lb-overlay { position: fixed; inset: 0; background: rgba(10,8,6,.88); z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; cursor: zoom-out; animation: lbFade .18s ease; touch-action: manipulation; } /* manipulation: pan-x∩pan-y의 빈 교차로 썸네일 스트립 가로 스크롤이 막히는 것 방지 */
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lb-overlay .lb-img-wrap { position: relative; max-width: min(92vw, 1200px); max-height: 82vh; display: flex; align-items: center; justify-content: center; cursor: default; }
.lb-overlay .lb-img-wrap.lb-swap { overflow: hidden; } /* 슬라이드 전환 중 밀려나는 이미지 클리핑 */
.lb-overlay img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: lbZoom .22s ease; }
@keyframes lbZoom { from { transform: scale(.94); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.lb-cap { color: #fff; font-size: 13px; text-align: center; max-width: 80vw; opacity: .92; }
/* 닫기 버튼은 공용 컴포넌트로 이동 — /css/controls.css 의
   `.ui-close .ui-close--lg .ui-close--dark .ui-close--fixed` (js/photo-lightbox.js 가 그 클래스로 만든다) */
/* 좌우 화살표 내비게이션 */
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 58px; border: none; background: rgba(0,0,0,.38); color: #fff; font-size: 20px; cursor: pointer; z-index: 9001; border-radius: 10px; backdrop-filter: blur(2px); transition: background .15s, transform .15s; display: flex; align-items: center; justify-content: center; }
.lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }
.lb-count { color: rgba(255,255,255,.78); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; background: rgba(0,0,0,.3); padding: 4px 12px; border-radius: 20px; }
/* 하단 썸네일 스트립 — 클릭으로 바로 이동 */
.lb-thumbs { display: flex; gap: 8px; max-width: min(92vw, 1100px); overflow-x: auto; padding: 6px 4px 2px; touch-action: pan-x; scrollbar-width: thin; }
.lb-thumbs::-webkit-scrollbar { height: 6px; }
.lb-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.lb-thumbs::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }
.lb-thumb { flex: 0 0 64px; height: 48px; border: 2px solid transparent; border-radius: 6px; overflow: hidden; padding: 0; background: rgba(255,255,255,.08); cursor: pointer; transition: border-color .15s, opacity .15s, transform .15s; }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { border-color: rgba(255,255,255,.55); }
.lb-thumb.on { border-color: #e9c878; opacity: 1; transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.lb-thumb:not(.on) { opacity: .55; }
.lb-thumb:not(.on):hover { opacity: .85; }
@media (max-width: 600px) {
  .lb-nav { width: 38px; height: 48px; font-size: 16px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-thumb { flex-basis: 52px; height: 40px; }
}