/* =======================  disc-grid.css  ======================= */


/* ===== グリッドは flex-wrap に戻し gap は JS で制御 ===== */
/* ===== グリッド（幅は JS で動的に上書き） ===== */
/* ラッパーが中央寄せを担当（幅は自動計算） */
.discography-wrap{
  display:flex;
  justify-content:center;   /* ← 常に中央に */
}


.discography-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;   /* ← 行内は左詰め */
  row-gap:20px;                 /* 行間は固定（列間は JS が設定） */

  margin-left:auto;             /* ← ★ これで「グリッド全体」が中央に */
  margin-right:auto;
}


.disc-item{
  width:180px; height:180px;
  overflow:hidden; cursor:pointer;
}
.disc-item img{
  width:100%; height:100%;
  object-fit:cover;           /* 真ん中を切り出し */
  display:block;
}


/* 2 ─ 画面全体オーバーレイ ＆ フェード -------------------------------- */
#disc-modal{
  position:fixed; inset:0; width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75);        /* 半透明黒 */
  opacity:0; pointer-events:none;    /* クリック不能・透明 */
  transition:opacity .35s ease;
  z-index:9999;
}
#disc-modal.is-open{opacity:1; pointer-events:auto}

/* 3 ─ モーダル本体 ------------------------------------------------------ */
.disc-modal__inner{
  background:transparent !important;   /* ← これがポイント */
  border-radius:0 !important;          /* 角丸をなくす   */
  box-shadow:none !important;          /* 影も消す       */

  max-width:900px; width:90%; max-height:90vh; overflow:auto;
  padding:30px; position:relative;
  color:#fff;
  opacity:0; transform:scale(.92);    /* フェード用（既存のまま） */
  transition:opacity .35s ease, transform .35s ease;
}
#disc-modal.loading  .disc-modal__inner{      /* ロード中：薄く表示 */
  background:transparent;   /* ← 白背景を消す */
  box-shadow:none;          /* ← テーマが影をつける場合はついでに消す */
  opacity:1;                /* ← ここを 1 にしてスピナーを見せる */
  transform:scale(.96);     /* ← ふわっと感は残す */
}
#disc-modal.loaded   .disc-modal__inner{      /* 読み込み後：完全表示 */
  opacity:1; transform:scale(1);
}
.disc-modal__inner, .disc-modal__inner *{
  color:#fff !important;
}
/* モーダル本体 ─ スクロールバー完全非表示 */
.disc-modal__inner{
  overflow-y:auto;           /* スクロール機能は残す          */
  scrollbar-width:none;      /* Firefox                       */
  -ms-overflow-style:none;   /* 旧 Edge, IE                   */
  scrollbar-gutter:auto;     /* ← Safari に“溝”を作らせない    */
}

.disc-modal__inner::-webkit-scrollbar{
  width:0 !important;        /* ← 幅 0 を強制                 */
  height:0 !important;
  background:transparent;    /* 念のため                       */
}


/* × ボタン：デフォルトは画面右端から 50px */
.disc-close{
  position:fixed;
  top:20px;
  right:20px;              /* ← 30 → 50 に変更 */
  font-size:3.6rem; color:#fff;
  background:none; border:none; cursor:pointer; line-height:1;
  z-index:10001; display:none;
}
/* モーダルが開いている間だけ表示（body 直下に置いた場合） */
#disc-modal.is-open ~ .disc-close{ display:block; }


/* 5 ─ CSS スピナー ------------------------------------------------------- */
.spinner{
  width:48px; height:48px;
  border:4px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin:60px auto;           /* 上下に余白を取り中央に */
}
@keyframes spin{to{transform:rotate(360deg)}}