/* ====== Gallery (namespaced) ====== */
    .ibg-gallery{
      /* 覗き量（小さいほど左右がよく見える）／余白／スナップ時間 */
      --ibg-slide-basis: 78%;
      --ibg-slide-gap: 0px;
      --ibg-snap-ms: 300ms;

      /* 任意：レイアウト用。必要なければ max-width/margin を外してOK */
      max-width: 700px;
      margin: 24px auto;
      padding: 0;
    }

    .ibg-viewport{
      position: relative;
      overflow: hidden;
      touch-action: pan-y;
      user-select: none;
    }
    .ibg-track{
      display: flex;
      align-items: center;
      gap: var(--ibg-slide-gap);
      will-change: transform;
      transition: transform var(--ibg-snap-ms) ease;
    }
    .ibg-slide{
      position: relative;
      flex: 0 0 var(--ibg-slide-basis);
      cursor: grab;
      margin: 0; /* figure の既定 margin を無効化（余白ゼロ連結） */
    }
    .ibg-track.ibg-is-dragging .ibg-slide{ cursor: grabbing; }
    .ibg-slide img{
      display: block;
      width: 100%;
      height: auto;
      pointer-events: none; /* 画像ドラッグ抑止。クリックはfigure側で拾う */
      -webkit-user-drag: none;
      user-drag: none;
    }
    /* アクティブ以外（左右）はグレー */
    .ibg-slide:not(.ibg-is-active) img{
      filter: grayscale(1);
      opacity: 0.9;
    }

    /* ====== Thumbnails (折り返しレイアウト) ====== */
    .ibg-thumbs{
      display: flex;
      flex-wrap: wrap;      /* ← 横幅に応じて自動折り返し */
      gap: 8px;
      padding: 12px 0 0;
      margin-top: 8px;
      overflow: visible;    /* 横スクロールを使わない */
    }
    .ibg-thumb{
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
      flex: 0 0 auto;
      width: 80px;          /* 1個あたりの横幅（行の詰まり具合はここで調整） */
    }
    .ibg-thumb img{
      width: 100%;
      height: 54px;
      object-fit: cover;
      opacity: .6;
      display: block;
    }
    .ibg-thumb[aria-selected="true"] img{
      opacity: 1;
      outline: 2px solid #aaa;
      outline-offset: 2px;
    }

    /* ====== Lightbox (全画面拡大) ====== */
    .ibg-lightbox{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.9);
      z-index: 9999;
      cursor: zoom-out;     /* クリックで閉じることを示唆 */
    }
    .ibg-lightbox.ibg-open{ display: flex; }
    .ibg-lightbox__img{
      max-width: 95vw;
      max-height: 90vh;
      object-fit: contain;
      display: block;
    }

    /* モバイルで覗き量をやや広げる例 */
    @media (max-width: 480px){
      .ibg-gallery{ --ibg-slide-basis: 78%; }
    }