/* ===== 이미지 확대 보기 — assets/lightbox.js 와 짝 =====
   단지마다 style.css 는 브랜드 색이 달라 복사본을 쓰지만,
   확대창 모양은 공통이라 이 파일 하나를 같이 쓴다.
   var(--accent) 등은 각 단지 style.css 가 정의한 값으로 해석된다. */
/* ============ 이미지 확대 보기 (../assets/lightbox.js) ============ */
.zoomable{cursor:zoom-in}
.zoomable:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.lb{
  position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  background:rgba(10,14,26,.92);padding:24px;
}
.lb[hidden]{display:none}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:12px}
/* 원본 비율을 지키면서 화면 안에 들어오게 한다 */
.lb-fig img{max-width:100%;max-height:calc(100vh - 110px);width:auto;object-fit:contain;border-radius:6px;background:#fff}
.lb-fig figcaption{
  color:#dbe2ea;font-size:14px;font-weight:700;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
}
.lb-count{color:#9aa5b4;font-weight:600;font-variant-numeric:tabular-nums}
/* 화살표와 같은 이유로 fixed. .lb 는 inset:0 이라 좌표는 그대로다. */
.lb-x{
  position:fixed;top:14px;right:18px;width:44px;height:44px;border:0;border-radius:50%;z-index:3;
  background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer;
}
.lb-x:hover{background:rgba(255,255,255,.26)}
.lb-x:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* 세로로 긴 이미지(카탈로그 페이지형 평면도)는 높이에 맞추면 폭이 줄어
   확대한 의미가 없다. 폭을 채우고 세로로 스크롤해서 보게 한다. */
.lb.lb-tall{align-items:flex-start;overflow-y:auto;overscroll-behavior:contain}
.lb-fig.tall{max-height:none}
.lb-fig.tall img{max-height:none;width:100%;height:auto}

.lb-hint{display:none;color:#9aa5b4;font-size:12.5px;text-align:center}

/* ── 여러 장 넘겨 보기 ──
   묶음이 한 장뿐이면 .lb-multi 가 붙지 않아 화살표·썸네일이 전부 숨는다.
   그때는 예전과 똑같은 한 장짜리 확대창이 된다. */
.lb-nav,.lb-strip{display:none}
/* 세로로 긴 이미지는 .lb 자체가 스크롤된다(.lb-tall). absolute 로 두면
   화살표가 이미지와 함께 위로 밀려 올라가 사라진다. 화면에 붙여 둔다. */
.lb.lb-multi .lb-nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;
  font-size:34px;line-height:1;padding-bottom:4px;cursor:pointer;
}
.lb.lb-multi .lb-nav:hover{background:rgba(255,255,255,.26)}
.lb-nav:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lb-prev{left:14px}
.lb-next{right:14px}
/* 썸네일 줄은 화면 바닥에 고정한다. 사진이 세로로 길어 본문이 스크롤될 때도
   자리를 지켜야 다음 장으로 넘어갈 수 있다. */
.lb.lb-multi .lb-strip{
  position:fixed;left:0;right:0;bottom:0;z-index:2;
  display:flex;gap:8px;align-items:center;
  padding:10px 14px;background:rgba(6,9,18,.86);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
}
.lb-strip::-webkit-scrollbar{display:none}
.lb-thumb{
  flex:0 0 auto;width:84px;height:60px;padding:0;border:0;border-radius:5px;
  overflow:hidden;cursor:pointer;background:#0b1f30;
  opacity:.5;transition:opacity .15s;
  outline:2px solid transparent;outline-offset:-2px;
}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb:hover{opacity:.85}
.lb-thumb.on{opacity:1;outline-color:#fff}
.lb-thumb:focus-visible{outline:3px solid #fff;outline-offset:1px}
/* 썸네일 줄 높이(80px)만큼 사진 자리를 줄인다. lightbox.js 의 reserve 값과 짝. */
.lb.lb-multi{padding-bottom:104px}
.lb.lb-multi .lb-fig img{max-height:calc(100vh - 216px)}
.lb.lb-multi .lb-fig.tall img{max-height:none}

@media(max-width:640px){
  .lb{padding:12px}
  .lb-fig img{max-height:calc(100vh - 110px)}
  .lb-hint{display:block}
  /* 좁은 화면에서는 화살표가 사진을 가린다. 스와이프와 썸네일로 넘긴다. */
  .lb.lb-multi .lb-nav{display:none}
  .lb-thumb{width:64px;height:46px}
  .lb.lb-multi{padding-bottom:80px}
  .lb.lb-multi .lb-fig img{max-height:calc(100vh - 190px)}
}