/* DESIGN: 핀터레스트식 열 배치. 공통 모양은 /lib/site.css */
/* 핀터레스트식 열 배치(열 나누기는 design.js가 함). 기본 3열 */
.masonry { display: flex; gap: var(--gap); align-items: flex-start; padding: 36px 0 80px; }
.masonry-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }

.piece { margin: 0; animation: card-in .6s ease both; animation-delay: calc(var(--i, 0) * 40ms); }
.card {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--c, #e4e2dc); aspect-ratio: var(--ar, 4 / 5); overflow: hidden;
  box-shadow: 0 16px 34px -20px rgba(40, 36, 28, .35);
}
.card img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.card img.loaded { opacity: 1; }
.card { position: relative; }
/* 연도/제목 두 줄: 평소엔 숨고, 마우스를 올리면 왼쪽 아래 구석에 조용히 나타남(PHOTO의 한 줄 글과 같은 모양) */
.card .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 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, .4));
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.card .cap span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .cap span:first-child:not(:only-child) { font-size: 12px; opacity: .85; }
@media (hover: hover) {
  .card:hover img { transform: scale(1.02); }
  .card:hover .cap, .card:focus-visible .cap { opacity: 1; }
}
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 640px) {
  .masonry { padding-top: 18px; }
  .card .cap { display: none; } /* 휴대폰은 마우스가 없으니 크게 보기에서 보여 줌 */
  .card { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .piece, .card img { animation: none; transition: none; }
}