/* 写真は説明文や余白を置かず、画面に収まる最大サイズで表示する。 */
html.image-viewer-open { overflow: hidden; }
html.image-viewer-open .site-navigation { visibility: hidden; pointer-events: none; }
[data-image-viewer] { cursor: zoom-in; }

.image-viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  overscroll-behavior: contain;
  color: #fff;
  background: transparent;
  border: 0;
}

.image-viewer[open] { display: grid; place-items: center; }
.image-viewer::backdrop { background: rgb(0 0 0 / 86%); }
.image-viewer-content { min-width: 0; margin: 0; }

.image-viewer-image {
  display: block;
  width: min(100vw, calc(100vh * var(--image-ratio, 1)));
  width: min(100vw, calc(100dvh * var(--image-ratio, 1)));
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0 auto;
  object-fit: contain;
}

.image-viewer-close {
  position: fixed;
  z-index: 1;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff;
  background: rgb(0 0 0 / 60%);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
  font: 32px/1 sans-serif;
  cursor: pointer;
}

.image-viewer-close:hover { background: #25313c; }
.image-viewer-close:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }