/* S17 写真の一覧（担当A）。値は tokens.css の変数だけ（タイルの大きさはこの画面の変数 --tile-min）。 */
.screen-gallery { --tile-min: calc(var(--hit) * 2); }
.gallery-count { margin: 0 0 var(--sp-2); color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
.gallery-month { padding-left: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr)); gap: var(--sp-1); margin-bottom: var(--sp-4); }
.tile {
  position: relative;
  aspect-ratio: 1;
  min-height: var(--hit);
  padding: 0;
  border: 0;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--surface);
}
.tile:active { filter: brightness(0.85); }
.tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--sp-1); color: var(--text-3); font-size: var(--fs-caption); line-height: var(--lh-ui); }
.tile.is-loaded .tile-state { display: none; }
.tile.is-missing .tile-state { color: var(--text-2); }
.gallery-sentinel { height: 1px; }