/* =====================================================================
   lisas atelier ― 写真の拡大表示（gallery/lightbox）
   写真担当。読み込む順：tokens.css → base.css → この style.css
   - 地は --color-lightbox（ライトのときも暗い）。枠に data-theme="dark" を付けて、中の文字・ボタンをダークの色にする。
   - 写真は元の縦横比のまま全体を見せる（object-fit: contain）。切らない・色を変えない・何も重ねない。
   - 写真の上に置くのは「閉じる」（.btn-icon--photo）だけ。参考番号・前／次・何枚目か・小部屋へのボタンは写真の下。
   ===================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--color-lightbox);
  color: var(--color-text);
}
.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: lightbox-in var(--dur-base) var(--ease-out);
}
.lightbox::backdrop { background: transparent; } /* 拡大表示そのものが画面いっぱいの暗い地 */
.lightbox:focus { outline: none; } /* 開いたときは枠そのものにフォーカス（操作するものではないので線を出さない。Tab で閉じるボタンへ） */
.lightbox.is-closing {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in-out);
}
@keyframes lightbox-in {
  from { opacity: 0; }
}

/* 開いている間は、後ろのページをスクロールさせない */
html.lightbox-open { overflow: hidden; }

/* 上：閉じる（右上・safe-area の内側） */
.lightbox-bar {
  display: flex;
  justify-content: flex-end;
  padding:
    calc(env(safe-area-inset-top, 0px) + var(--space-2))
    calc(env(safe-area-inset-right, 0px) + var(--space-2))
    var(--space-2)
    calc(env(safe-area-inset-left, 0px) + var(--space-2));
}

/* 写真：2枚を重ねて、薄く入れかえる（opacity・--dur-base） */
.lightbox-stage {
  position: relative;
  min-height: 0;
  margin-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  touch-action: pan-y pinch-zoom; /* 横のスワイプは script で前／次に */
}
.lightbox-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.lightbox-layer.is-front { opacity: 1; }
.lightbox-layer:not([src]) { visibility: hidden; }

/* 下：参考番号・作品番号、前／何枚目か／次、小部屋へのボタン */
.lightbox-foot {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding:
    var(--space-3)
    calc(env(safe-area-inset-right, 0px) + var(--gutter))
    calc(env(safe-area-inset-bottom, 0px) + var(--space-4))
    calc(env(safe-area-inset-left, 0px) + var(--gutter));
}
.lightbox-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.lightbox-nav[hidden] { display: none; }
.lightbox-count {
  min-width: 4.5em;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--color-text-sub);
}
.lightbox-room[hidden] { display: none; } /* .btn の inline-flex より強くする */

/* 参考番号・作品番号（例：参考番号 HF03）。写真のすぐ下に小さく。言葉は補足の色、番号は文字の色の太字 */
.lightbox-code {
  min-height: calc(var(--fs-sm) * var(--lh-tight)); /* 番号のない写真でも高さを空けておく（写真が上下に動かない） */
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-body);
  text-align: center;
  color: var(--color-text-sub);
}
.lightbox-code[hidden] { display: none; }
.lightbox-code-num {
  color: var(--color-text);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
/* その写真にないとき（分けた1枚写真など）：場所だけ空ける。見えない・押せない・読まない */
.lightbox-code.is-blank,
.lightbox-room.is-blank { visibility: hidden; }