/* 전시(/gallery/) — 2026-11-02 사용자 «디지털 전시관처럼». 벽 = 따뜻한 회백 · 그림마다 흰 매트 · 누르면 어두운 방에 한 점 */
.gl-wall { --gl-wall: #efece6; --gl-mat: #fbfaf7; background: var(--gl-wall); margin: 16px 0 0; padding: clamp(16px, 3vw, 40px); border-radius: 12px; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.gl-item { margin: 0; }
.gl-item button { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; width: 100%; padding: 8%; border: 0; border-radius: 2px; background: var(--gl-mat); cursor: zoom-in; outline: 1px solid rgba(0, 0, 0, .06); transition: transform .25s ease; }
.gl-item button:hover, .gl-item button:focus-visible { transform: translateY(-3px); outline-color: rgba(0, 0, 0, .14); }
.gl-item button:focus-visible { outline: 2px solid var(--eq-accent); }
.gl-item img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; background: #e4e0d8; }
.gl-item figcaption { margin-top: 8px; font-size: 12px; color: var(--eq-muted); letter-spacing: .02em; }

/* 한 점 보기 — 어두운 방 */
.gl-room { position: fixed; inset: 0; z-index: 50; display: none; background: #161514; color: #e9e6e0; }
.gl-room.on { display: grid; grid-template-rows: 1fr auto; }
.gl-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 56px 72px 8px; min-height: 0; }
.gl-stage img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fbfaf7; padding: clamp(8px, 1.6vw, 20px); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); opacity: 0; transition: opacity .35s ease; }
.gl-stage img.on { opacity: 1; }
.gl-plate { width: 100%; max-width: none; margin: 0; display: flex; justify-content: center; gap: 12px; padding: 14px 16px 22px; font-size: 14px; color: #b9b4ab; }
.gl-plate b { color: #e9e6e0; font-weight: 500; }
.gl-room button { position: absolute; border: 0; background: rgba(255, 255, 255, .08); color: #e9e6e0; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.gl-room button:hover, .gl-room button:focus-visible { background: rgba(255, 255, 255, .18); }
.gl-room svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-x { top: 12px; right: 12px; }
.gl-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.gl-next { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 768px) {
  .gl-wall { padding: 12px; border-radius: 8px; }
  .gl-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gl-stage { padding: 56px 8px 8px; }
  .gl-prev, .gl-next { top: auto; bottom: 10px; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .gl-item button, .gl-stage img { transition: none; } }