.gallery-modal { position: fixed; inset: 0; z-index: 400; visibility: hidden; display: flex; align-items: center; justify-content: center; padding: 28px; opacity: 0; pointer-events: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: opacity .24s ease; }
.gallery-modal.open { visibility: visible; opacity: 1; pointer-events: auto; background: rgba(30,18,10,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gallery-modal-content { position: relative; width: min(100%,1040px); max-height: 88dvh; transform: translateY(12px) scale(.98); transition: transform .24s ease; }
.gallery-modal.open .gallery-modal-content { transform: translateY(0) scale(1); }
.gallery-modal-media { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-height: calc(88dvh - 54px); overflow: hidden; border-radius: 18px; background: #1a0f09; box-shadow: 0 18px 52px rgba(0,0,0,.36); }
.gallery-modal-media img,.gallery-modal-media video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(88dvh - 54px); }
.gallery-modal-media.is-image { width: fit-content; max-width: min(100%,1040px); height: fit-content; max-height: calc(88dvh - 54px); margin: 0 auto; overflow: visible; background: transparent; box-shadow: none; }
.gallery-modal-media.is-image img { width: auto; height: auto; max-width: min(100%,1040px); max-height: calc(88dvh - 54px); object-fit: contain; border-radius: 18px; box-shadow: 0 18px 52px rgba(0,0,0,.36); }
.gallery-modal-media video { width: min(100%,1040px); }
.gallery-tap-zone { position: absolute; top: 0; bottom: 0; z-index: 2; width: 33.333%; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
.gallery-tap-zone.prev { left: 0; }
.gallery-tap-zone.next { right: 0; }
.gallery-modal-caption { margin-top: 12px; color: #fff; font: 700 15px 'Zen Maru Gothic',sans-serif; text-align: center; }
.gallery-modal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.gallery-action-btn { padding: 8px 16px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.94); color: #C4612A; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.18); font: 700 13px 'Noto Sans JP',sans-serif; text-decoration: none; transition: transform .16s ease,background .16s ease; }
.gallery-action-btn:hover,.gallery-action-btn:focus-visible { outline: 0; transform: translateY(-1px); background: #FFF3E4; }
.gallery-modal-status { min-height: 22px; margin-top: 8px; color: rgba(255,255,255,.86); font-size: 12px; line-height: 1.6; text-align: center; word-break: break-all; }
.gallery-modal-close { position: absolute; top: -18px; right: -18px; z-index: 4; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: #C4612A; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.24); font-size: 28px; line-height: 1; transition: transform .16s ease,background .16s ease; }
.gallery-modal-close:hover,.gallery-modal-close:focus-visible { outline: 0; transform: scale(1.06); background: #FFF3E4; }
@media (max-width: 820px) {
  .gallery-modal { padding: 18px; }
  .gallery-modal-close { top: -14px; right: -10px; width: 38px; height: 38px; font-size: 25px; }
}