/* =========================
   MODAL DIALOG (HARD LIMIT)
========================= */
.modal-dialog {
  position: fixed;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 450px;              /* ⛔ HARD LIMIT */
  margin: 0;
  animation: glide 1s ease forwards;
}

/* =========================
   MODAL CONTENT (BOUNDARY)
========================= */
.modal-content {
  width: 100%;
  height: 100%;               /* ⛔ SAME AS DIALOG */
  border-radius: 20px;
  background: transparent;
  overflow: hidden;           /* 🔒 NEVER OVERFLOW */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   IMAGE (AUTO FIT)
========================= */
.modal-content > img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;        /* ⭐ KEY */
  border-radius: 20px;
  display: block;
}

/* =========================
   MOBILE SAFETY
========================= */
@media (max-width: 450px) {
  .modal-dialog {
    width: 90vw;
    height: 90vw;             /* still square */
  }
}

/* =========================
   ANIMATION
========================= */
@keyframes glide {
  from {
    transform: translate(-50%, -100vh);
  }
  to {
    transform: translate(-50%, -50%);
  }
}