/* WORK: 핀터레스트식 열 배치. 공통 모양은 /lib/site.css */
/* 핀터레스트식 열 배치(열 나누기는 work.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; }
.piece figcaption { padding: 14px 4px 0; text-align: center; line-height: 1.5; font-family: var(--serif); }
.piece figcaption strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.piece figcaption span { display: block; margin-top: 3px; font-size: 12px; color: var(--faint); }
@media (hover: hover) {
  .card:hover img { transform: scale(1.02); }
}
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 640px) {
  .masonry { padding-top: 18px; }
  .piece figcaption { display: none; }
  .card { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .piece, .card img { animation: none; transition: none; }
}