/* 이미지 뷰어 모달 (SV-f3f7) — 가운데 정렬·여백·테두리·디밍.
   장호님 지적: 화면에 꽉 차게 붙어 나와 조악했다 → 종이처럼 보이는 모달로. */
.vlb {
  position: fixed; inset: 0; z-index: 10000; display: none;
  background: rgba(12, 16, 24, .72);
  -webkit-backdrop-filter: saturate(140%) blur(3px);
  backdrop-filter: saturate(140%) blur(3px);
}
.vlb.is-open { display: block; }

/* 무대 — 화면 가장자리 여백 + safe-area(상태바에 안 가리게) */
.vlb-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: calc(56px + env(safe-area-inset-top, 0px)) clamp(16px, 5vw, 48px)
           calc(40px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
.vlb-wrap {
  transform-origin: center center;
  transition: transform .18s ease-out;
  max-width: 100%; max-height: 100%;
  /* ★7abf: display:flex 만 두면 align-items 기본값이 stretch 라 **이미지 박스가 세로로 늘어난다.**
     그러면 .vlb-img 의 max-height:100% 도 높이가 불확정인 wrap 기준이라 안 먹고,
     object-fit:contain 이 픽셀은 살려도 **흰 배경·테두리는 늘어난 박스에 그려져서**
     세로로 긴 폰 스크린샷(첨부의 대부분)이 좌우 흰 여백에 파묻혔다(프레임 2~4배 과대).
     높이를 확정하고 가운데 정렬해야 박스가 이미지 비율을 그대로 따라간다. */
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.vlb.is-zoomed .vlb-wrap { transition: none; cursor: grab; }

/* 이미지 — 기본은 전체가 한눈에 들어오게 맞추고, 종이처럼 흰 배경 + 옅은 테두리 */
.vlb-img {
  max-width: min(100%, 900px);          /* PC 에서 과도하게 크지 않게 */
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .65);
  user-select: none; -webkit-user-drag: none;
}

/* 닫기 — 우상단, 44px 이상, safe-area 반영 */
.vlb-close {
  position: absolute; z-index: 2;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .94); color: #10151F;
  font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .5);
}
.vlb-close:hover { background: #fff; }

.vlb-hint {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  color: rgba(255, 255, 255, .82); font-size: 12.5px;
  background: rgba(0, 0, 0, .42); padding: 6px 13px; border-radius: 999px;
  pointer-events: none; white-space: nowrap;
}
/* ★7abf: `content:none` 은 일반 요소에 효과가 없어 죽은 규칙이었다(데스크톱에도 터치 안내가 떴다).
   PC 에선 핀치·스와이프가 없으니 안내 자체를 감춘다. */
@media (min-width: 641px) { .vlb-hint { display: none; } }