@charset "utf-8";
/*
 * 러닝랩 상품 사진 레이어 (js/runlab.gallery.js, PhotoSwipe 5 위에 덧씌움)
 * vendor/photoswipe/photoswipe.css 뒤에 불러온다. 색·글꼴은 runlab.css 토큰(--stage·--stage-ink·--flame·--font)만 쓴다.
 */

/* 챗봇 런처(SDK z-index 2147483000)보다 위 */
.pswp.rl-pswp {
  --pswp-root-z-index: 2147483600;
  --pswp-bg: var(--stage, #0b0c0e);
  --pswp-placeholder-bg: #1b1d20;
  --pswp-icon-color: var(--stage-ink, #f5f5f2);
  --pswp-icon-color-secondary: rgba(0, 0, 0, 0.55);
  --pswp-icon-stroke-color: rgba(0, 0, 0, 0.55);
  --pswp-error-text-color: var(--stage-ink, #f5f5f2);
  font-family: var(--font, sans-serif);
}

/* 위 막대: 위치 표시 · 확대 버튼 · 닫기 */
.rl-pswp .pswp__top-bar { height: 64px; padding: 0 8px; align-items: center; background: linear-gradient(rgba(11, 12, 14, 0.6), rgba(11, 12, 14, 0)); }
.rl-pswp .pswp__counter { margin: 0 auto 0 12px; height: auto; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; text-shadow: none; opacity: 1; font-variant-numeric: tabular-nums; }
.rl-pswp .pswp__button { width: 48px; height: 48px; margin: 0 2px; border-radius: 999px; opacity: 0.9; }
.rl-pswp .pswp__top-bar .pswp__button .pswp__icn { top: 8px; left: 8px; }
.rl-pswp .pswp__top-bar .pswp__button:hover,
.rl-pswp .pswp__button:focus-visible { background: rgba(245, 245, 242, 0.12); opacity: 1; }
.rl-pswp .pswp__button:focus-visible,
.rl-pswp .rl-pswp-thumb:focus-visible { outline: 2px solid var(--flame, #ff5a1f); outline-offset: 2px; }
.rl-pswp .pswp__button:disabled { opacity: 0.3; cursor: default; background: none; }
.rl-pswp .rl-pswp-zoom .pswp__icn { fill: var(--pswp-icon-color); }
/* 확대할 수 없는 사진(원본이 이미 화면에 맞음)이면 확대 버튼을 감춘다 */
.rl-pswp:not(.rl-pswp--can-zoom) .rl-pswp-zoom { display: none; }

/* 좌우 화살표 (마우스를 쓸 때만 보임 — PhotoSwipe 기본 규칙) */
.rl-pswp .pswp__button--arrow { width: 64px; height: 96px; margin-top: -48px; }
.rl-pswp .pswp__button--arrow .pswp__icn { top: 32px; left: 14px; width: 36px; height: 32px; margin: 0; }

/* 확대 커서 */
.rl-pswp.rl-pswp--can-zoom .pswp__img { cursor: zoom-in; }
.rl-pswp.rl-pswp--zoomed .pswp__img { cursor: grab; }
.rl-pswp.rl-pswp--zoomed .pswp__img:active { cursor: grabbing; }

/* 아래 썸네일 줄 */
.rl-pswp .pswp__rlThumbs {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: safe center; gap: 8px;
  padding: 14px 16px max(14px, env(safe-area-inset-bottom));
  overflow-x: auto; overscroll-behavior: contain; scrollbar-width: none;
  background: linear-gradient(rgba(11, 12, 14, 0), rgba(11, 12, 14, 0.7));
  touch-action: pan-x;
}
.rl-pswp .pswp__rlThumbs::-webkit-scrollbar { display: none; }
.rl-pswp .rl-pswp-thumb {
  flex: 0 0 auto; width: 64px; height: 64px; padding: 0; margin: 0;
  border: 2px solid transparent; border-radius: 12px; overflow: hidden;
  background: #1b1d20; cursor: pointer; opacity: 0.6;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.rl-pswp .rl-pswp-thumb:hover { opacity: 0.9; }
.rl-pswp .rl-pswp-thumb[aria-current] { border-color: var(--flame, #ff5a1f); opacity: 1; }
.rl-pswp .rl-pswp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (min-width: 768px) {
  .rl-pswp .rl-pswp-thumb { width: 76px; height: 76px; }
}

/* 사진을 눌러 조작 막대를 감추면 썸네일도 함께 감춘다 */
.rl-pswp:not(.pswp--ui-visible) .pswp__rlThumbs { opacity: 0; pointer-events: none; }

/* 레이어가 열린 동안 페이지 스크롤 잠금 (body 고정은 JS) */
html.rl-gallery-lock { overflow: hidden; }

/* 움직임 줄이기: 열기·닫기·확대 애니메이션 길이는 JS가 0으로 둔다. 여기서는 이 파일의 전환만 끈다 */
@media (prefers-reduced-motion: reduce) {
  .rl-pswp .rl-pswp-thumb, .rl-pswp .pswp__rlThumbs { transition: none; }
}