/* ============================================================================
   ro-lightbox.css — 사진 모자이크(.cb__gal) + 확대 모달(.ro-lb)

   ⚠ 확대 모달은 항상 어두운 배경이다(사진에 집중). 라이트/다크 분기 없음 —
     대신 UI 글자는 흰색 고정이라 두 테마 모두에서 대비가 확보된다.
   ⚠ 클래스에 ad/ad- 접두사 금지 → [[css-avoid-ad-class]]
   ========================================================================== */

/* ── 게시글 사진 모자이크 ── */
.cb__gal {
    display: grid;
    gap: 2px;
    background: var(--ro-border);
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.cb__gal--one   { grid-template-columns: 1fr; }
.cb__gal--two   { grid-template-columns: 1fr 1fr; }
/* 3장: 왼쪽 큰 1 + 오른쪽 작은 2 */
.cb__gal--three { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.cb__gal--three .cb__gal-it:first-child { grid-row: span 2; }
.cb__gal--quad  { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.cb__gal-it {
    position: relative;
    padding: 0; border: 0; margin: 0;
    background: var(--ro-surface);
    cursor: zoom-in;
    overflow: hidden;
    min-width: 0; min-height: 0;   /* 그리드 칸이 이미지 크기에 밀려 늘어나지 않게 */
}
.cb__gal-it img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .25s ease;
}
.cb__gal-it:hover img { transform: scale(1.04); }
.cb__gal-it:focus-visible { outline: 3px solid var(--ro-primary-500); outline-offset: -3px; }
/* 깨진 사진 — 칸은 유지해서 그리드가 안 무너지게 하고, 클릭만 막는다 */
.cb__gal-it.is-broken { pointer-events: none; }
.cb__gal-it.is-broken img { display: none; }

.cb__gal-more {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 12, 20, .58);
    color: #fff; font-size: 22px; font-weight: 800;
    letter-spacing: -0.02em;
}

/* 모바일에선 3장 배치가 너무 좁아진다 → 2x2 와 같은 형태로 */
@media (max-width: 420px) {
    .cb__gal { aspect-ratio: 4 / 3; }
    .cb__gal-more { font-size: 18px; }
}

/* ══════════════ 확대 모달 ══════════════ */
.ro-lb {
    position: fixed; inset: 0; z-index: 11000;   /* 헤더(50)·FAB(9000)·글쓰기모달(10000) 위 */
    display: flex; align-items: center; justify-content: center;
}
.ro-lb[hidden] { display: none; }
body.ro-lb-open { overflow: hidden; }            /* 뒤 배경 스크롤 잠금 */

.ro-lb__backdrop {
    position: absolute; inset: 0;
    background: rgba(6, 9, 14, .92);
    backdrop-filter: blur(4px);
    animation: rolb-fade .18s ease both;
}
@keyframes rolb-fade { from { opacity: 0 } to { opacity: 1 } }

.ro-lb__stage {
    position: relative;
    width: min(100vw, 1400px);
    height: min(100vh, 100dvh);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    touch-action: none;              /* 핀치/팬을 직접 처리 — 브라우저 기본 제스처 끔 */
    padding: 64px 16px 76px;         /* 위 닫기버튼 · 아래 바 자리 */
    box-sizing: border-box;
}
.ro-lb__img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    user-select: none; -webkit-user-drag: none;
    transform-origin: center center;
    /* ⚠ transform 에 transition 을 걸면 핀치·팬이 끈적하게 밀린다. 확대 애니는 포기. */
    animation: rolb-pop .2s cubic-bezier(.22,1,.36,1) both;
    cursor: zoom-in;
}
.ro-lb__img.is-zoomed { cursor: grab; }
.ro-lb__img.is-zoomed:active { cursor: grabbing; }
@keyframes rolb-pop { from { opacity: 0; transform: scale(.96) } to { opacity: 1 } }

/* 닫기 · 좌우 이동 · 확대축소 바 — 전부 사진 위에 뜬다 */
.ro-lb__x, .ro-lb__nav, .ro-lb__zb {
    position: absolute; z-index: 2;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(22, 27, 36, .72);
    color: #fff; cursor: pointer;
    border-radius: 50%;
    transition: background .15s, transform .1s;
}
.ro-lb__x:hover, .ro-lb__nav:hover, .ro-lb__zb:hover { background: rgba(48, 56, 70, .92); }
.ro-lb__x:active, .ro-lb__nav:active, .ro-lb__zb:active { transform: scale(.94); }
.ro-lb__x:focus-visible, .ro-lb__nav:focus-visible, .ro-lb__zb:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px;
}

.ro-lb__x { top: 14px; right: 14px; width: 42px; height: 42px; }
.ro-lb__x svg { width: 20px; height: 20px; }

.ro-lb__nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.ro-lb__nav:active { transform: translateY(-50%) scale(.94); }
.ro-lb__nav[hidden] { display: none; }
.ro-lb__nav--prev { left: 14px; }
.ro-lb__nav--next { right: 14px; }
.ro-lb__nav svg { width: 22px; height: 22px; }

.ro-lb__bar {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    z-index: 2;
    display: flex; align-items: center; gap: 6px;
    padding: 6px; border-radius: 999px;
    background: rgba(22, 27, 36, .72);
    border: 1px solid rgba(255, 255, 255, .14);
}
.ro-lb__zb { position: relative; width: 34px; height: 34px; border: 0; background: transparent; }
.ro-lb__zb svg { width: 17px; height: 17px; }
.ro-lb__cap {
    min-width: 52px; text-align: center;
    color: #fff; font-size: 13px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 모바일 — 좌우 버튼은 스와이프로 대체되므로 작게, 안전영역 확보 */
@media (max-width: 560px) {
    .ro-lb__stage { padding: 58px 8px 72px; }
    .ro-lb__nav { width: 38px; height: 38px; }
    .ro-lb__nav--prev { left: 6px; }
    .ro-lb__nav--next { right: 6px; }
    .ro-lb__bar { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
    .ro-lb__backdrop, .ro-lb__img { animation: none; }
    .cb__gal-it img, .ro-lb__x, .ro-lb__nav, .ro-lb__zb { transition: none; }
    .cb__gal-it:hover img { transform: none; }
}