/* ==========================================================================
   속초교회 게시판 이미지 라이트박스(전체화면 모달 뷰어)
   - 대상: 게시글 본문(#bo_v_con)·첨부(#bo_v_img)의 이미지
   - 기능: 슬라이드(이전/다음) · 확대/축소(버튼·휠·더블클릭) · 드래그 이동 · 닫기(X/배경/ESC)
   - 로드: gallery/basic view.skin.php 에서 sokcho-lightbox.js 와 함께
   ========================================================================== */
.sk-lb { position: fixed; inset: 0; z-index: 100000; display: none; }
.sk-lb.is-open { display: block; }
.sk-lb-backdrop { position: absolute; inset: 0; background: rgba(10, 12, 16, .94); }

.sk-lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.sk-lb-img { max-width: 92vw; max-height: 82vh; transform-origin: center center; transition: transform .16s ease; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; will-change: transform; }
.sk-lb.is-zoomed .sk-lb-stage { cursor: grab; }
.sk-lb.is-zoomed .sk-lb-stage:active { cursor: grabbing; }

/* 공통 버튼 */
.sk-lb-btn { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background .15s; }
.sk-lb-btn:hover { background: rgba(255, 255, 255, .3); }
.sk-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sk-lb-close { top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1; }
.sk-lb-nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; font-size: 34px; line-height: 1; padding-bottom: 4px; }
.sk-lb-prev { left: 18px; }
.sk-lb-next { right: 18px; }

/* 하단 툴바(확대·축소·비율·카운터) */
.sk-lb-bar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 50px; background: rgba(20, 22, 28, .72); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sk-lb-bar .sk-lb-btn { position: static; width: 38px; height: 38px; border-radius: 50%; font-size: 22px; line-height: 1; }
.sk-lb-reset { width: auto !important; padding: 0 14px; border-radius: 50px !important; font-size: 14px !important; font-weight: 600; }
.sk-lb-zoom-val { min-width: 54px; text-align: center; font-size: 15px; font-weight: 600; }
.sk-lb-count { margin-left: 4px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .25); font-size: 14px; color: #cfd4dc; white-space: nowrap; }

/* 원본 클릭 대상: 확대 커서 */
#bo_v_img img, #bo_v_con img { cursor: zoom-in; }

@media (max-width: 750px) {
    .sk-lb-img { max-width: 96vw; max-height: 74vh; }
    .sk-lb-close { top: 10px; right: 10px; width: 42px; height: 42px; font-size: 26px; }
    .sk-lb-nav { width: 44px; height: 44px; font-size: 28px; }
    .sk-lb-prev { left: 8px; }
    .sk-lb-next { right: 8px; }
    .sk-lb-bar { bottom: 14px; gap: 7px; padding: 6px 10px; }
    .sk-lb-bar .sk-lb-btn { width: 34px; height: 34px; font-size: 20px; }
    .sk-lb-zoom-val { min-width: 46px; font-size: 14px; }
}