html, body {
  margin: 0;
  padding: 0;
  background: #000;
  height: 100%;
  overflow-y: auto; /* スマホでは縦スクロール可 */
  touch-action: manipulation;
}

#viewer {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: black;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* 画像 */
#image {
  width: 100%;
  height: auto;
  max-width: 100vw;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* 上部100pxタップ領域 */
#tapPrevArea {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 10;
  background: transparent;
}

/* 🧠 iPad / タブレットサイズ以上では1画面内にフィットさせる */
@media (min-width: 768px) {
  html, body {
    overflow: hidden; /* 縦スクロール禁止 */
    height: 100vh;
  }

  #viewer {
    align-items: center; /* 画面中央に配置 */
    height: 100vh;
  }

  #image {
    height: 100vh; /* 高さを画面いっぱいにフィット */
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
}