/* 라이트박스 — 참여자 앱과 전시장이 함께 쓴다(shared/lightbox.js). 화면을 어둡게 덮고 그림을 창 크기에 맞춘다.
   가운데 띠의 왼쪽·오른쪽 절반이 이전·다음이다. 토큰(--card·--ink·--radius·--font-serif)은 tokens.css 에서 온다. */
body.lb-open { overflow: hidden; }
/* inset 은 쓰지 않는다 — 옛 iOS Safari 가 몰라 덮개가 화면 아래에 선다(2026-09-07 운영에서 실제로 났다). 네 변을 적는다. */
.lb { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: flex; flex-direction: column; background: rgba(28, 22, 14, .92); color: #f3ede2; outline: none; }
.lb[hidden] { display: none; }
.lb-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; min-height: 52px; font-size: 14px; color: #cfc6b6; }
.lb-close { background: transparent; color: #f3ede2; border: 1px solid rgba(243,237,226,.4); border-radius: 8px; min-height: 40px; padding: 0 14px; font: inherit; font-size: 15px; cursor: pointer; }
.lb-mid { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.lb-stage { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.lb-stage img { display: block; max-width: calc(100vw - 16px); max-height: calc(100vh - 150px); object-fit: contain; background: #fff; padding: 6px; border-radius: 4px; }
.lb-text { max-width: 40rem; max-height: calc(100vh - 150px); overflow: auto; margin: 0 16px; padding: 26px 28px; background: var(--card); color: var(--ink); border-radius: var(--radius); font-size: 18px; line-height: 1.9; white-space: pre-wrap; }
/* 소리·영상 — 좌우 절반 단추 위에 올려 조작이 눌리게 한다. */
.lb-media { position: relative; z-index: 3; max-width: calc(100vw - 32px); }
video.lb-media { max-height: calc(100vh - 150px); border-radius: 6px; background: #000; }
audio.lb-media { width: min(32rem, calc(100vw - 32px)); }
.lb-prev, .lb-next { position: absolute; top: 0; bottom: 0; width: 50%; background: transparent; border: 0; cursor: pointer; color: rgba(243,237,226,.75); font: inherit; display: flex; align-items: center; z-index: 1; }
.lb-prev { left: 0; justify-content: flex-start; padding-left: 8px; }
.lb-next { right: 0; justify-content: flex-end; padding-right: 8px; }
.lb-prev span, .lb-next span { font-size: 44px; line-height: 1; width: 44px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(28,22,14,.45); }
.lb-prev:hover span, .lb-next:hover span { background: rgba(28,22,14,.8); color: #fff; }
.lb-bot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 14px; min-height: 56px; }
.lb-cap { margin: 0; font-size: 15px; color: #cfc6b6; line-height: 1.5; }
.lb-cap b { display: block; font-family: var(--font-serif); font-size: 17px; color: #f3ede2; }
.lb-more { flex: 0 0 auto; background: transparent; color: #f3ede2; border: 1px solid rgba(243,237,226,.4); border-radius: 8px; min-height: 40px; padding: 0 14px; font: inherit; font-size: 15px; cursor: pointer; }
.lb-more[aria-expanded="true"] { background: rgba(243,237,226,.14); }
/* 프롬프트 판 — 그림 위에 겹쳐 뜬다. 펴져도 그림이 움직이지 않는다. 참여자가 적은 말이라 그대로 싣는다. */
.lb-prompt { position: absolute; z-index: 2; overflow: auto; padding: 14px 16px; background: rgba(28,22,14,.78);
  border: 1px solid rgba(243,237,226,.3); border-left: 3px solid rgba(243,237,226,.6); border-radius: 10px;
  font-size: 16px; line-height: 1.75; color: #f3ede2; white-space: pre-wrap; }
/* under — 그림 아래쪽에 가로로 겹친다(좁은 화면). side — 오른쪽 빈 영역에 세로로(넓은 화면, 폭은 스크립트가 잰다). */
.lb-prompt.under { left: 12px; right: 12px; bottom: 12px; max-height: 42%; }
.lb-prompt.side { right: 16px; top: 16px; bottom: 16px; }
.lb-prompt[hidden] { display: none; }
/* 계보 — 고친 그림은 처음 말부터 이름표를 붙여 차례로 쌓인다(2026-09-08). */
.lb-lineage + .lb-lineage { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(243,237,226,.25); }
.lb-label { display: block; font-size: 13px; letter-spacing: .02em; opacity: .75; margin-bottom: 2px; }