/* ============================================================
   GALLERY: 見出しとタグ / 作品の一覧（作品の詳細の小窓は gallery-view.css）
   .page-head と .count は ui.css
   ============================================================ */

/* ---------- 見出しとタグ ---------- */
.g-head { position: relative; background: var(--sky-pale); padding: 44px 0 50px; }
.tagbar { display: flex; flex-direction: column; gap: 12px; }
.tag-list { gap: 10px 8px; }
.tag-list .chip { cursor: pointer; }
.tag-clear {
  align-self: flex-end; font-size: 13px; color: var(--ink-soft); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; letter-spacing: .04em;
}
.tag-clear:hover { color: var(--brown); }
.g-head .gh-m1 { --x: calc(100% - 150px); --y: 42px; }
.g-head .gh-m2 { --x: calc(100% - 100px); --y: 88px; }
.g-head .gh-m3 { --x: calc(100% - 230px); --y: 96px; }
.g-head .gh-m4 { --x: 44%; --y: 30px; }
.g-head .gh-m5 { --x: 2%; --y: 62%; }

/* ---------- 作品の一覧 ---------- */
.g-main { --sep-bg: var(--white); position: relative; background: var(--white); padding: 46px 0 76px; }
.g-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; grid-auto-flow: dense; grid-auto-rows: minmax(140px, auto); }
.g-item {
  position: relative; display: block; min-width: 0; padding: 6px; border-radius: 14px; background: var(--white);
  box-shadow: var(--sh-card); transition: transform .3s var(--ease-pop), box-shadow .3s;
}
.g-item img { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; border-radius: 9px; background: var(--sky-pale); }
.g-item:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--sh-float); }
.g-item.is-tall { grid-row: span 2; }
.g-item.is-tall img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); aspect-ratio: auto; }
.g-more { display: flex; justify-content: center; margin-top: 42px; }
.g-more[hidden], .g-main .empty[hidden] { display: none; }
.g-main + .cband { margin-top: 0; }

@media (max-width: 767px) {
  .g-head { padding: 28px 0 36px; }
  .g-head .gh-m1 { --x: calc(100% - 44px); --y: 20px; }
  .g-head .gh-m2 { --x: calc(100% - 70px); --y: 52px; }
  .g-head .gh-m3, .g-head .gh-m4 { display: none !important; }
  .g-head .gh-m5 { --x: 3%; --y: 88%; }
  .tag-list {
    display: grid; grid-template-rows: auto auto; grid-auto-flow: column; justify-content: start;
    overflow-x: auto; padding-bottom: 6px; gap: 10px 8px; scrollbar-width: none;
    margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter);
  }
  .tag-list::-webkit-scrollbar { display: none; }
  .g-main { padding: 30px 0 56px; }
  .g-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .g-item { padding: 5px; }
  .g-item.is-tall img { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
  .g-more { margin-top: 28px; }
}