.lightbox{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  padding:40px;
  background:rgba(0,0,0,.9);
}
.lightbox.is-open{display:flex}

.lightbox__figure{
  margin:0;max-width:100%;max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}

.lightbox__img{
  max-width:100%;max-height:calc(100vh - 140px);
  width:auto;height:auto;
  border-radius:var(--radius);
  object-fit:contain;
}

/* 영상 — 16:9 를 유지하면서 세로가 화면을 넘지 않게 폭으로 제한한다.
   max-height 로 잡으면 iframe 이 늘어나 비율이 깨진다 */
.lightbox__video{
  position:relative;
  display:none;
  width:min(1200px, 100%, calc((100vh - 120px) * 16 / 9));
  aspect-ratio:16/9;
  background:#000;
  border-radius:var(--radius);
  overflow:hidden;
}
.lightbox__video iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}

/* 영상 모드 — 이미지·캡션·상세보기를 감춘다 */
.lightbox--video .lightbox__figure{width:100%}
.lightbox--video .lightbox__img,
.lightbox--video .lightbox__caption,
.lightbox--video .lightbox__link{display:none}
.lightbox--video .lightbox__video{display:block}

.lightbox__caption{
  font-size:var(--fs-sm);color:rgba(255,255,255,.85);text-align:center;
}

/* 상세보기 — data-link 가 있을 때만 나온다 */
.lightbox__link{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:16px;padding:11px 22px;
  font-size:var(--fs-sm);font-weight:600;
  color:#fff;text-decoration:none;
  background:var(--c-primary);
  border-radius:999px;
  transition:var(--tr);
}
.lightbox__link svg{width:16px;height:16px;transition:var(--tr)}
.lightbox__link:hover{background:var(--c-primary-d, var(--c-primary));opacity:.9}
.lightbox__link:hover svg{transform:translateX(3px)}

.lightbox__close{
  position:absolute;top:24px;right:24px;
  width:44px;height:44px;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.14);
  cursor:pointer;transition:var(--tr);
}
.lightbox__close::before,
.lightbox__close::after{
  content:'';position:absolute;top:50%;left:50%;
  width:18px;height:2px;background:#fff;
}
.lightbox__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.lightbox__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lightbox__close:hover{background:rgba(255,255,255,.28)}

@media (max-width:768px){
  .lightbox{padding:16px}
  .lightbox__close{top:12px;right:12px;width:38px;height:38px}
  .lightbox__img{max-height:calc(100vh - 110px)}
  .lightbox__video{width:min(100%, calc((100vh - 90px) * 16 / 9))}
}