/* ==========================================================================
   gallery.css — フォトギャラリー / レンタル衣装ギャラリー 共用
   接頭辞 .gl- / スコープ .gallery-page（フォト） .costume-page（衣装）

   デザイン: Figma 38:342 → 342:5542（フォト） / 38:344 → 342:4602（衣装）
   2ページはヒーローの色と絞り込みの中身が違うだけで、骨格は同じ。
   座標は原寸書き出し（390x3634）を画素解析して取った。
   デザインのヘッダーは111px、実装は55pxなので、y は 56px 引いてある。
   ========================================================================== */

/* =============== ヒーロー =============== */
/* デザイン y=111..371。オブジェクトが写真の外へはみ出すので切らない */
.gl-hero {
  position: relative;
  z-index: 1;
  width: 390px;
  height: 260px;
}

/* タイトルの下地（いびつな丸）。ページごとに色と大きさが違う */
.gl-hero__blob {
  position: absolute;
  left: 0;
  top: 4px;
}
.costume-page .gl-hero__blob { width: 209px; height: 231px; }
.gallery-page .gl-hero__blob { width: 350px; height: 256px; top: 0; }

.gl-hero__beige {
  position: absolute;
  z-index: 1;
}
.costume-page .gl-hero__beige { left: 132px; top: 181px; width: 92px; height: 77px; }
.gallery-page .gl-hero__beige { left: 0;     top: 158px; width: 106px; height: 73px; }

/* 写真。四角ではなく、いびつな丸に切り抜いている */
.gl-hero__photo {
  position: absolute;
  z-index: 2;
  left: 183px;
  top: 22px;
  width: 198px;
  height: 200px;
  object-fit: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.costume-page .gl-hero__photo { -webkit-mask-image: url('/assets/costume/mask-icatch.svg?v=c9628004'); mask-image: url('/assets/costume/mask-icatch.svg?v=c9628004'); }
.gallery-page .gl-hero__photo { -webkit-mask-image: url('/assets/gallery/mask-icatch.svg?v=391e8bf8'); mask-image: url('/assets/gallery/mask-icatch.svg?v=391e8bf8'); top: 45px; }

/* 下地の上に白抜きでタイトル */
.gl-hero__title {
  position: absolute;
  z-index: 3;
  left: 0;
  text-align: center;
  color: #fff;
}
.costume-page .gl-hero__title { top: 62px;  width: 190px; }
.gallery-page .gl-hero__title { top: 55px;  width: 238px; }

.gl-hero__en {
  font-family: var(--font-kurumilk);
  line-height: 1.15;
  letter-spacing: 2px;
}
.costume-page .gl-hero__en { font-size: 27px; letter-spacing: 1px; }
.gallery-page .gl-hero__en { font-size: 34px; }

.gl-hero__ja {
  margin-top: 12px;
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 3px;
}

/* =============== 絞り込み =============== */
.gl-filter {
  position: relative;
  z-index: 2;
  margin-top: 32px;
}

/* 撮影メニューのタブ。3列で、選択中は下線が付く */
.gl-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 22px 0;
  width: 334px;
  margin: 0 auto;
  list-style: none;
}

.gl-tab {
  display: inline-block;
  padding: 0 4px 7px;
  border-bottom: 1px solid transparent;
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--dark);
  white-space: nowrap;
}
.gl-tab.is-current { border-bottom-color: var(--dark); }

/* サイズのチップ（レンタル衣装のみ）。選択中は枠が濃くなる */
.gl-sizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  width: 340px;
  margin: 30px auto 0;
  list-style: none;
}

.gl-size {
  display: flex;
  align-items: center;
  justify-content: center;
  /* サイズ（60cm など）はデザインどおり60px。七五三の「10歳女の子」のように
     長いチップは文字に合わせて伸ばす（2026-09-17） */
  min-width: 60px;
  height: 30px;
  /* 左右の余白は2pxまで。これ以上あると「Animal」が60pxを超え、
     デザインの2段5列（60〜100cm / 110cm〜Animal）が崩れる */
  padding: 0 2px;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #fff;
  font-family: var(--font-kurumilk);
  font-size: 14px;
  line-height: 1;
  color: var(--dark);
}
.gl-size.is-current { border-color: var(--dark); }
@media (hover: hover) {
  .gl-tab:hover  { border-bottom-color: var(--arrow-brown); }
  .gl-size:hover { border-color: var(--arrow-brown); }
}

/* =============== 一覧 =============== */
.gl-list {
  position: relative;
  margin-top: 46px;
}

.gl-list__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-kurumilk);
  /* デザイン実測: COSTUMES GALLERY が幅156px・字の高さ12px、PHOTO GALLERY が125px。
     字の高さに合わせて16pxにし、幅を合わせるため字間を少し詰めている
     （元は15px＋字間2pxで190pxあり、広がりすぎていた） */
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.8px;
  color: var(--dark);
  text-align: center;
}

/* 見出し脇の飾り。デザインの実測位置と色:
     衣装 … x0..57 / y560..689、#F3C254
     フォト … x250..389 / y561..791、#75C092
   ★ 形は LAYER OBJECTS の代用でデザインとは違う。縦に引き伸ばすと崩れるので
     元の縦横比のまま置いている。
     フォトの本物は _originals/assets/gallery/svg_13.svg（背景装飾 583x923, #55B47A）。
     #55B47A の不透明度80%が地色に重なって #75C092 に見えているので、
     代用側は見た目どおり #75C092 を直接塗っている。 */
.gl-list__decor {
  position: absolute;
  z-index: 0;
  top: -10px;
}
.costume-page .gl-list__decor { left: -94px;  width: 152px; height: 130px; }
.gallery-page .gl-list__decor { right: -12px; width: 152px; height: 130px; }

/* 3列。デザインはセル125px・間隔4px・左右3pxの余白 */
.gl-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 30px;
  padding: 0 3px;
  list-style: none;
}

.gl-grid li {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #d9d9d9;
  overflow: hidden;
}
.gl-grid .js-lightbox { height: 100%; }
.gl-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gl-note {
  margin: 24px auto 0;
  font-family: var(--font-zenmaru);
  font-size: 12px;
  line-height: 1.8;
  color: #a49a97;
  text-align: center;
}

.gallery-page .footer,
.costume-page .footer {
  margin-top: 70px;
}