/* ============================================================
   NODE Space — 라이트박스 슬라이드
   ============================================================ */
:root { --lb-accent: #5bbf94; }

/* ── 라이트박스 슬라이드 ─────────────────── */
.lb { position: fixed; inset: 0; z-index: 2000; display: none; }
.lb.open { display: block; }
.lb-back { position: absolute; inset: 0; z-index: 1; background: rgba(18,21,26,.92); backdrop-filter: blur(3px); }
/* stage 는 inset:0 이라 버튼 위를 덮는다.
   클릭이 통과하도록 pointer-events 를 끄고, 이미지에만 다시 켠다. */
.lb-stage {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    padding: 64px 72px;
}
.lb-stage img { pointer-events: auto; }
.lb-stage img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
    user-select: none; -webkit-user-drag: none;
}
.lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    color: #fff; display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.lb-nav:hover { background: rgba(255,255,255,.2); }
.lb-nav.prev { left: 16px; }
.lb-nav.next { right: 16px; }
.lb-close {
    position: absolute; top: 16px; right: 16px; z-index: 3; width: 38px; height: 38px;
    border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2); color: #fff;
    display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.lb-close:hover { background: rgba(255,255,255,.22); }
.lb-meta {
    position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; text-align: center;
    color: rgba(255,255,255,.72); font-size: 12.5px;
}
.lb-meta .cnt {
    font-family: 'Archivo', 'Noto Sans KR', sans-serif; letter-spacing: .1em;
    color: var(--lb-accent); margin-right: 10px;
}
.lb-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.lb-dots i {
    width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.28);
    cursor: pointer; transition: background .2s, transform .2s;
}
.lb-dots i.on { background: var(--lb-accent); transform: scale(1.25); }

@media (max-width: 640px) {
    .lb-stage { padding: 56px 12px 84px; }
    .lb-nav { width: 38px; height: 38px; }
    .lb-nav.prev { left: 6px; }
    .lb-nav.next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .up-drop, .lb-nav, .lb-close, .lb-dots i { transition: none; }
}