@charset "utf-8";

/* ============================================================
   라이트박스 (공용)
   마크업은 /js/lightbox.js 가 만든다. 이 파일은 모양만 맡는다.

   위험물 인허가의 허가증에서 처음 쓰고, 인증특허 등에서도 그대로 쓴다.
   페이지 폭 단위(--u)에 매이지 않는다 — 화면 전체를 덮는 것이라
   화면 크기를 직접 쓰는 편이 예측하기 쉽다.
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;          /* GNB(100번대) 보다 위 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }

.lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .86);
  opacity: 0;
  transition: opacity .3s ease;
}
.lightbox.is-on .lightbox__scrim { opacity: 1; }

.lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 5vh clamp(56px, 10vw, 140px);
  box-sizing: border-box;
  opacity: 0;
  transform: scale(.97);
  transition: opacity .3s ease-out, transform .35s cubic-bezier(.22, .61, .36, 1);
}
.lightbox.is-on .lightbox__stage { opacity: 1; transform: none; }

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

.lightbox__img {
  display: block;
  max-width: 100%;
  /* 자막 자리를 뺀 만큼만 쓴다. 원본 비율은 그대로다 */
  max-height: calc(90vh - 70px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  /* 손가락 둘로 확대하는 것은 브라우저에 맡긴다 — 허가증 글씨를 키워 봐야 한다.
     한 손가락 옆으로 밀기는 스크립트가 받는다 */
  touch-action: pinch-zoom;
}

.lightbox__cap-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  color: #fff;
  text-align: center;
}
.lightbox__caption {
  margin: 0;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -.02em;
  word-break: keep-all;
}
.lightbox__caption[hidden] { display: none; }
.lightbox__count {
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lightbox__count[hidden] { display: none; }

/* ---------- 단추 ---------- */
.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 1;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .7);
}
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.lightbox__nav[hidden] { display: none; }

.lightbox__close { top: 24px; right: 24px; }
/* 닫기 — 빗금 두 개 */
.lightbox__close::before,
.lightbox__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  margin: -1px 0 0 -10px;
  background: #fff;
}
.lightbox__close::before { transform: rotate(45deg); }
.lightbox__close::after  { transform: rotate(-45deg); }

.lightbox__nav { top: 50%; margin-top: -26px; }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
/* 화살촉 — 정사각형 두 변만 남겨 돌린다 */
.lightbox__nav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.lightbox__nav--prev::before { margin: -7px 0 0 -4px; transform: rotate(-135deg); }
.lightbox__nav--next::before { margin: -7px 0 0 -9px; transform: rotate(45deg); }

/* ---------- 좁은 화면 ----------
   화면을 꽉 채우고, 단추는 손가락에 맞춰 키운다 */
@media (max-width: 768px) {
  .lightbox__stage { padding: 64px 12px 84px; }
  .lightbox__img { max-height: calc(100vh - 190px); }
  .lightbox__figure { gap: 12px; }
  .lightbox__caption { font-size: 15px; }

  .lightbox__close,
  .lightbox__nav { width: 46px; height: 46px; }
  .lightbox__close { top: 12px; right: 12px; }
  /* 옆으로 밀어 넘길 수 있으니 화살표는 아래쪽에 나란히 둔다 —
     사진 위에 겹치면 확대해 볼 때 걸린다 */
  .lightbox__nav {
    top: auto;
    bottom: 18px;
    margin-top: 0;
  }
  .lightbox__nav--prev { left: calc(50% - 60px); }
  .lightbox__nav--next { right: calc(50% - 60px); }
}

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion: reduce) {
  .lightbox__scrim,
  .lightbox__stage {
    transition: none;
    opacity: 1;
    transform: none;
  }
}