/* =========================================================================
   lightbox.css — 画像のクリック/タップ拡大（ポップアップ）
   media.css から切り出した共有パーツ。開閉は public/js/app.js が担当する。
   媒体記事（media.css）と収録カードリスト（cardlist.css）の両方から読む。
   ========================================================================= */

.img-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300; /* フローティングバナー(200)より前面 */
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--ds-space-stack-md);
    background: rgba(0, 0, 0, 0.85);
}
.img-lightbox.is-open {
    display: flex;
}
.img-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--ds-radius-card);
    cursor: zoom-out;
}
/* SP では縦長図版を全幅で表示し、収まらない分はスクロールして読む。
   （align-items:center だけだと、はみ出した画像の上端が切れるため margin:auto を使う） */
@media (max-width: 600px) {
    .img-lightbox { overflow: auto; }
    .img-lightbox__img {
        max-height: none;
        margin: auto;
    }
}
.img-lightbox__close {
    position: absolute;
    top: var(--ds-space-stack-xs);
    right: var(--ds-space-stack-xs);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--ds-radius-avatar);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
body.is-lightbox-open {
    overflow: hidden;
}