/* ============================================================
   Vanilla JS Magnifiedglass — スタイル
   使い方: <img class="magnifiedglass" data-zoom="80"> にするだけ。
   ラッパーは不要。JS がオーバーレイを動的に生成します。
   ============================================================ */

/* サムネイル（トリガー）のカーソル表示 */
img.magnifiedglass {
  cursor: zoom-in;
}

/* ---- オーバーレイ（背景を暗くする層） ---- */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6); /* 背景を少し暗く */
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lb-overlay.is-open {
  opacity: 1;
}

/* ---- 拡大表示中の画像（浮かび上がらせる） ---- */
.lb-image {
  max-width: var(--lb-zoom, 80%);   /* data-zoom で指定した % */
  max-height: var(--lb-zoom, 80%);
  width: auto;
  height: auto;
  cursor: zoom-out;
  border-radius: 6px;
  box-shadow:
          0 25px 60px rgba(0, 0, 0, 0.5), /* 大きくぼやいた影で浮き上がらせる */
          0 8px 20px rgba(0, 0, 0, 0.35);
  transform: scale(0.96);
  transition: transform 0.25s ease;
  background-color: white;
}

.lb-overlay.is-open .lb-image {
  transform: scale(1);
}

/* ============================================================
   以下はデモページ用の装飾（magnifiedglass 本体には不要）
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
  background: #f5f6f8;
  color: #1f2937;
}

.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

h1 { font-size: 1.6rem; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background: #e5e7eb;
}

.hint { color: #6b7280; font-size: 0.9rem; }