/* PHOTO: 사진 비율 그대로, 줄 높이를 맞춰 양끝을 반듯하게 채우는 갤러리(사용자 지시 2026-10-07: 정사각 자르기 → 원래 비율).
   칸마다 --r(가로/세로)만 주면 CSS가 줄을 나눈다. 마지막 줄은 늘리지 않고 원래 크기로 둔다. 제목·날짜 없이, 마우스를 올리면 구석에 한 줄 글. */
.photo-grid {
  --row: clamp(120px, 15vw, 260px); /* 줄 높이 기준(실제 줄은 양끝을 채우느라 조금 더 높아짐) */
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 36px 0 80px;
}
.photo-grid::after { content: ''; flex-grow: 999; } /* 마지막 줄이 억지로 늘어나지 않게 */
.cell {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  aspect-ratio: var(--r, 1); overflow: hidden; background: var(--c, #e4e2dc);
  animation: cell-in .6s ease both; animation-delay: calc(var(--i, 0) * 30ms);
}
.cell img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.cell img.loaded { opacity: 1; }
/* 한 줄 글: 평소엔 숨고, 마우스를 올리면 왼쪽 아래 구석에 조용히 나타남 */
.cell .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; text-align: left;
  font-family: var(--serif); font-size: 13px; line-height: 1.5; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .38));
  opacity: 0; transition: opacity .3s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (hover: hover) {
  .cell:hover img { transform: scale(1.015); }
  .cell:hover .cap, .cell:focus-visible .cap { opacity: 1; }
}
@keyframes cell-in { from { opacity: 0; } }

@media (max-width: 640px) {
  .photo-grid { --row: 80px; gap: 3px; padding-top: 18px; }
  .cell .cap { display: none; } /* 휴대폰은 마우스가 없으니 크게 보기에서 보여 줌 */
}
@media (prefers-reduced-motion: reduce) {
  .cell, .cell img { animation: none; transition: none; }
}
.tile { flex: var(--r, 1) 1 calc(var(--row) * var(--r, 1)); min-width: 0; } /* 사진 칸을 감싸는 상자: 비율만큼 넓어짐(관리자 아이콘도 이 위에 붙음) */
/* 사진 퍼가기 막기(2026-10-08): 끌기·길게 누르기 저장 메뉴·선택을 막음(우클릭은 photo.js) */
.cell img, #viewer-img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* 자동 이어 보기(2026-10-08): 그리드 끝 표시. 보이지 않는 1px 줄 */
.more-mark { height: 1px; }
/* 2026-10-08 사용자 지적: ① 처음 올린 뒤 일부 사진이 색 칸으로만 남고 마우스를 올려야 보임(투명→보임 전환을 브라우저가 다시 그리지 않는 경우)
   → 그림을 투명하게 숨겼다 켜는 방식을 없애고 받는 대로 바로 보이게. ② 사진마다 평균색 바탕은 불필요 → 모든 칸 같은 아주 옅은 바탕 */
.cell { background: rgba(0, 0, 0, .035); }
.cell img, .cell img.loaded { opacity: 1; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
/* 번쩍임 없애기(2026-10-08): 열 때 칸이 서서히 나타나던 효과를 뺀다 */
.cell { animation: none; }