/* =========================================================
   Gallery demo 共通スタイル（A:整列グリッド / B:Masonry）
   ※プレビュー検証用。確定後に style.css へ統合する想定。
   ========================================================= */

/* JSレンダリング前のフラッシュ防止 */
#galleryRoot:empty { min-height: 80vh; }

/* 見出し下の余白 */
.gal-cat .c-sectitle{ margin-bottom: clamp(20px, 3vw, 36px); }

/* --- グリッドの器（モードAの既定。Bは下で上書き） --- */
.gal-grid{
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}
@media (max-width: 900px){ .gal-grid{ --cols: 3; } }
@media (max-width: 600px){ .gal-grid{ --cols: 3; gap: 4px; } }   /* スマホはInstagram風に3列・gap詰め（6/29）*/

/* --- サムネ（クリックでライトボックス） --- */
.gal-thumb{
  position: relative;
  display: block;
  margin: 0; padding: 0; border: 0;
  background: #ededea;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
}
.gal-thumb img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.gal-thumb:hover img,
.gal-thumb:focus-visible img{ transform: scale(1.05); }

/* キャプション（ホバー / フォーカスで表示） */
.gal-cap{
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 30px 12px 10px;
  text-align: left; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity: 0; transition: opacity .3s;
}
.gal-thumb:hover .gal-cap,
.gal-thumb:focus-visible .gal-cap{ opacity: 1; }
.gal-cap .ja{ font-size: .82rem; font-weight: 500; }
.gal-cap .en{ font-family: 'Outfit', sans-serif; font-size: .62rem; letter-spacing: .08em; opacity: .85; }

/* もっと見る前は隠す */
.gal-thumb.is-hidden{ display: none; }

/* --- もっと見る ボタン --- */
.gal-more-wrap{ text-align: center; margin-top: clamp(18px, 2.4vw, 30px); }
.gal-more{
  font-family: 'Outfit', sans-serif; letter-spacing: .06em;
  font-size: .82rem; color: var(--ink);
  background: #fff; border: 1px solid var(--ink);
  padding: .8em 2.4em; border-radius: 40px; cursor: pointer;
  transition: .25s;
}
.gal-more:hover{ background: var(--ink); color: #fff; }
.gal-more span{ opacity: .6; margin-left: .4em; font-size: .9em; }
.gal-more.is-done{ display: none; }

/* =========================================================
   Pattern1（A:入口型）— 特集ヒーロー / 系統タブ / サブチップ / タグ（6/26）
   ========================================================= */
/* .gal-feature の padding-top上書きは廃止（グレー箱化で soft 標準の上下対称余白に）6/30 */
.gal-feature .c-sectitle, .gal-browse .c-sectitle{ margin-bottom: clamp(20px, 3vw, 32px); }

/* --- 特集ヒーロー（3）：クリックで下のブラウズへ絞り込みジャンプ --- */
.gal-feature__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.gal-feature__card{ display: block; margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.gal-feature__img{ display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.gal-feature__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gal-feature__card:hover .gal-feature__img img,
.gal-feature__card:focus-visible .gal-feature__img img{ transform: scale(1.05); }
.gal-feature__label{ display: flex; flex-direction: column; gap: 1px; margin-top: 12px; }
.gal-feature__label .ja{ font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700; color: var(--ink); }
.gal-feature__label .en{ font-family: var(--f-en); font-size: .66rem; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.gal-feature__go{ display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: .82rem; font-weight: 700; color: var(--accent); }
.gal-feature__go span{ transition: transform .3s var(--ease); }
.gal-feature__card:hover .gal-feature__go span{ transform: translateX(4px); }
@media (max-width: 700px){ .gal-feature__grid{ grid-template-columns: 1fr; gap: 16px; } }

/* --- 系統タブ（面=緑で選択） --- */
.gal-tabs{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.gal-tab{ padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .86rem; font-weight: 600; color: var(--gray); cursor: pointer; transition: .25s; }
.gal-tab:hover{ border-color: var(--ink); color: var(--ink); }
.gal-tab.is-active{ background: var(--green); border-color: var(--green); color: #fff; }

/* --- サブチップ（文字=ローズで選択） --- */
.gal-subs{ display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: clamp(20px, 2.6vw, 30px); }
.gal-chip{ padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: .76rem; font-weight: 600; color: var(--gray); cursor: pointer; transition: .2s; }
.gal-chip:hover{ color: var(--ink); }
.gal-chip.is-active{ border-color: var(--accent); color: var(--accent); }

/* --- タグ横断表示中のバッジ（系統タブの代わりに出る）6/30 --- */
.gal-tagbar:not([hidden]){ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: clamp(20px, 2.6vw, 30px); }
.gal-tagbar__label{ font-size: 1rem; font-weight: 600; color: var(--ink); }
.gal-tagbar__label b{ color: var(--accent); font-weight: 700; }
.gal-tagbar__note{ margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(219,112,147,.12); color: var(--accent); font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
.gal-tagbar__clear{ margin-left: auto; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .8rem; font-weight: 600; color: var(--gray); cursor: pointer; transition: .2s; }
.gal-tagbar__clear::before{ content: "\2190\00a0"; }
.gal-tagbar__clear:hover{ border-color: var(--ink); color: var(--ink); }
@media (max-width: 600px){ .gal-tagbar__clear{ margin-left: 0; } }

/* === フィルター：PCは横並びピル（上の既定）／スマホはドロップダウン（6/30） === */
.gal-filter__toggle{ display: none; }   /* PCは非表示＝従来の横並びピルのまま */

@media (max-width: 600px){
  /* スマホ：系統＋サブを1つのドロップダウンに集約（横スクロール1行をやめる）*/
  .gal-filter{ position: relative; margin-bottom: clamp(20px, 2.6vw, 30px); }

  .gal-filter__toggle{
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 12px 16px; text-align: left;
    border: 1px solid var(--line); border-radius: 12px;
    background: #fff; color: var(--ink); font-size: .9rem; font-weight: 600; cursor: pointer;
  }
  .gal-filter__chev{
    flex-shrink: 0; width: 8px; height: 8px;
    border-right: 1.5px solid var(--gray); border-bottom: 1.5px solid var(--gray);
    transform: rotate(45deg); transition: transform .25s var(--ease);
  }
  .gal-filter.is-open .gal-filter__chev{ transform: rotate(225deg); }

  .gal-filter__panel{
    display: none; margin-top: 6px; padding: 14px;
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
  }
  .gal-filter.is-open .gal-filter__panel{ display: block; }

  /* パネル内：縦リスト＋チェック（単一選択）＋「系統 / サブ」見出し */
  .gal-filter__panel .gal-tabs,
  .gal-filter__panel .gal-subs{ display: block; overflow: visible; margin-bottom: 0; }
  .gal-filter__panel .gal-tabs{ padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
  .gal-filter__panel .gal-tabs::before,
  .gal-filter__panel .gal-subs::before{
    content: "系統"; display: block;
    font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px;
  }
  .gal-filter__panel .gal-subs::before{ content: "サブ"; }

  /* ピル → リスト行（タップ領域フル幅・選択中は薄色背景＋チェック） */
  .gal-filter__panel .gal-tab,
  .gal-filter__panel .gal-chip{
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; margin: 0; padding: 11px 12px;
    border: 0; border-radius: 8px; background: transparent;
    font-size: .92rem; font-weight: 500; color: var(--ink); text-align: left;
  }
  .gal-filter__panel .gal-tab.is-active{ background: rgba(46,139,87,.1); color: var(--green); font-weight: 600; }
  .gal-filter__panel .gal-chip.is-active{ background: rgba(219,112,147,.1); color: var(--accent); font-weight: 600; }
  .gal-filter__panel .gal-tab.is-active::after,
  .gal-filter__panel .gal-chip.is-active::after{ content: "\2713"; font-size: 1rem; line-height: 1; }
}

/* --- 作品キャプション内のタグ（画像オーバーレイ上） --- */
.gal-cap__tags{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.gal-tag{ font-size: .58rem; font-weight: 600; padding: 1px 8px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; }

/* --- 特集インデックス（小見出し＋スラッシュ区切りリンク／案B：枠線で囲む） --- */
.gal-cat{ scroll-margin-top: 24px; }
.gal-index{
  margin-top: 28px;
  border: 1px solid #e2e2dc;
  border-radius: 10px;
  padding: clamp(16px, 2vw, 22px) clamp(20px, 2.8vw, 32px);
}
.gal-index__label{
  display: flex; align-items: center; gap: .6em;
  margin: 0 0 12px;
  font-size: .98rem; font-weight: 700; letter-spacing: .08em; color: var(--ink);
}
.gal-index__label span{
  font-family: 'Outfit', sans-serif; font-weight: 500;
  font-size: .68rem; letter-spacing: .14em; color: var(--accent);
}
.gal-index__links{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .7em; font-size: 1rem;
}
.gal-index__links a{
  position: relative; color: var(--ink); text-decoration: none;
  padding-bottom: 2px; transition: color .2s;
}
.gal-index__links a::after{
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--green);
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.gal-index__links a:hover{ color: var(--accent); }
.gal-index__links a:hover::after{ transform: scaleX(1); }
.gal-index__links .sep{ color: #cfcfca; user-select: none; }
/* 2グループ目（ギャラリー）は薄い区切り線＋余白で分ける */
.gal-index__group + .gal-index__group{
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid #ededea;
}

/* =========================================================
   モードA：整列グリッド（正方形）
   ========================================================= */
body[data-mode="grid"] .gal-thumb{ aspect-ratio: 1 / 1; }

/* =========================================================
   モードB：Masonry（高さ可変・カラム積み）
   ========================================================= */
body[data-mode="masonry"] .gal-grid{
  display: block;
  column-count: 4;
  column-gap: clamp(10px, 1.4vw, 18px);
}
@media (max-width: 900px){ body[data-mode="masonry"] .gal-grid{ column-count: 3; } }
@media (max-width: 600px){ body[data-mode="masonry"] .gal-grid{ column-count: 2; } }
body[data-mode="masonry"] .gal-thumb{
  width: 100%;
  margin: 0 0 clamp(10px, 1.4vw, 18px);
  break-inside: avoid;
  aspect-ratio: 1 / var(--r, 1);   /* --r をJSが付与してモザイク化 */
}

/* =========================================================
   ライトボックス（両モード共通）
   ========================================================= */
.gal-lb[hidden]{ display: none; }
.gal-lb{
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 60px);
  background: rgba(20, 22, 20, .9);
}
.gal-lb__fig{
  margin: 0; max-width: min(92vw, 1100px); max-height: 86vh;
  display: flex; flex-direction: column;
}
.gal-lb__fig img{
  max-width: 100%; max-height: 78vh;
  object-fit: contain; background: #000; border-radius: 2px;
}
.gal-lb__fig figcaption{
  color: #fff; text-align: center; padding-top: 12px;
  font-size: .85rem; letter-spacing: .04em;
}
.gal-lb__close,
.gal-lb__nav{
  position: absolute; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; line-height: 1;
  transition: background .2s;
}
.gal-lb__close:hover,
.gal-lb__nav:hover{ background: rgba(255,255,255,.25); }
.gal-lb__close{
  top: clamp(10px, 2vw, 24px); right: clamp(10px, 2vw, 24px);
  width: 46px; height: 46px; border-radius: 50%; font-size: 1.6rem;
}
.gal-lb__nav{
  top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%; font-size: 2rem;
}
.gal-lb__prev{ left: clamp(8px, 2vw, 28px); }
.gal-lb__next{ right: clamp(8px, 2vw, 28px); }
.gal-lb__count{
  position: absolute; bottom: clamp(12px, 3vw, 30px); left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.8);
  font-family: 'Outfit', sans-serif; font-size: .8rem; letter-spacing: .1em;
}
@media (max-width: 600px){
  .gal-lb__nav{ width: 42px; height: 42px; font-size: 1.5rem; }
}