/* ---------------------------------------------------------------------------
   메인 히어로 사진 라이트박스(확대 보기) — 로그인 사용자 전용.
   main.jsp 가 ${not empty loginVO} 일 때만 모달 마크업과 lightbox.js 를
   렌더하며, 이 파일은 site.css 를 건드리지 않는 독립 스타일이다.
   색은 기존 팔레트(#3258e0 계열 + 반투명 검정 오버레이)만 사용한다.
   ------------------------------------------------------------------------- */

/* lightbox.js 가 로드됐을 때만(=로그인 시에만) 확대 가능 커서를 보여준다.
   비로그인 화면에는 .lb-enabled 가 붙지 않으므로 커서는 기본값 그대로다. */
.hero-slides.lb-enabled { cursor:zoom-in; }
.hero-slides.lb-enabled .hero-dots button { cursor:pointer; }

.lightbox {
    position:fixed; inset:0; z-index:1000;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.82);
    padding:24px;
}
.lightbox[hidden] { display:none; }

.lightbox figure {
    margin:0; display:flex; flex-direction:column; align-items:center; gap:12px;
    max-width:90vw; max-height:90vh;
}
/* 원본 비율 유지, 화면의 90% 이내 (캡션 높이만큼 이미지 상한을 살짝 줄인다) */
.lightbox img {
    max-width:90vw; max-height:calc(90vh - 40px);
    object-fit:contain; border-radius:8px;
    box-shadow:0 12px 48px rgba(0,0,0,.55);
}
.lightbox-caption {
    color:#fff; font-size:14px; letter-spacing:.02em;
    text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.lightbox-close {
    position:fixed; top:18px; right:22px; z-index:1001;
    width:40px; height:40px; padding:0;
    border:1px solid rgba(255,255,255,.5); border-radius:50%;
    background:rgba(50,88,224,.55);            /* #3258e0 반투명 */
    color:#fff; font-size:24px; line-height:1; cursor:pointer;
    transition:background .2s;
}
.lightbox-close:hover { background:#3258e0; }

/* 모달이 열린 동안 뒷배경 스크롤 잠금 */
body.lb-open { overflow:hidden; }

@media (max-width:768px){
    .lightbox { padding:14px; }
    .lightbox-close { top:12px; right:14px; }
}