/* Only site detail pages load the gallery and full-screen viewer. */
.detail-gallery { position: relative; min-width: 0; border: 2px solid #303030; border-bottom: 0; background: #151515; display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 5px; height: 255px; }
.gallery-stage { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; min-width: 0; overflow: hidden; cursor: zoom-in; }
.gallery-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-strip { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; height: 100%; overflow: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.gallery-thumb { position: relative; flex: 0 0 auto; width: 100%; height: 80px; padding: 0; overflow: hidden; border: 2px solid transparent; background: #101213; opacity: .6; cursor: pointer; }
.gallery-thumb[aria-pressed=true] { border-color: var(--accent); opacity: 1; }
.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-unavailable::after { content: '미리보기 없음'; position: absolute; inset: 0; display: grid; place-items: center; background: #252525; color: #bbb; font-size: 12px; }
.gallery-step { position: absolute; z-index: 1; top: calc(50% - 25px); left: 12px; width: 44px; height: 50px; padding: 0; border: 0; border-radius: 10px; background: #ffffff99; color: #111; font-size: 28px; cursor: pointer; }
.gallery-step:last-child { left: auto; right: 166px; }
.lightbox-open { overflow: hidden; }
#gallery-lightbox { box-sizing: border-box; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 50px 12px; border: 0; background: transparent; color: #fff; }
#gallery-lightbox[open] { display: grid; place-items: center; }
#gallery-lightbox::backdrop { background: #080808ed; }
.lightbox-image { max-width: 100%; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); object-fit: contain; }
#gallery-lightbox button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff40; border-radius: 4px; color: #fff; background: #202020aa; font-size: 30px; cursor: pointer; }
.lightbox-close { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
.lightbox-prev { top: calc(50% - 22px); left: 0; }
.lightbox-next { top: calc(50% - 22px); right: 0; }
.lightbox-status { position: absolute; bottom: 42px; margin: 0; padding: 4px 8px; background: #151515c9; font-size: 13px; text-align: center; }
.lightbox-status:empty { display: none; }
.lightbox-count { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); font-size: 14px; }
@media(max-width:767px) {
    .detail-gallery { grid-template-columns: 1fr; grid-template-rows: 220px 48px; height: 273px; gap: 3px; }
    .gallery-strip { flex-direction: row; height: 48px; }
    .gallery-thumb { width: 70px; height: 46px; flex-basis: 70px; }
    .gallery-step { width: 36px; height: 44px; left: 6px; top: 88px; }
    .gallery-step:last-child { right: 6px; }
}