@charset "utf-8";

/* 최신글 — pic_block 스킨 (이미지 카드 그리드) */

.pic_lt ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}

.pic_lt .galley_li {
  display: flex; flex-direction: column; align-items: flex-start;
  position: relative; min-width: 0;
}

/* 인기글 / 새글 배지는 썸네일 위에 얹는다 (flex 스트레치 방지) */
.pic_lt .galley_li .hot_icon,
.pic_lt .galley_li .new_icon {
  position: absolute; top: 10px; right: 10px; margin: 0; z-index: 2;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
}
.pic_lt .galley_li .hot_icon ~ .new_icon { right: 38px; }

.pic_lt .lt_img {
  display: block; position: relative;
  aspect-ratio: 4 / 3; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.pic_lt .lt_img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s var(--ease);
}
.pic_lt .galley_li:hover .lt_img img { transform: scale(1.045); }
.pic_lt .lt_img:after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .16), transparent 42%);
  opacity: 0; transition: opacity .25s var(--ease);
}
.pic_lt .galley_li:hover .lt_img:after { opacity: 1; }

.pic_lt .galley_li > a:not(.lt_img) {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; width: 100%;
  margin: 12px 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.45;
  color: var(--text);
}
.pic_lt .galley_li > a:not(.lt_img):hover { color: var(--accent); }

.pic_lt .lt_info {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 8px; font-size: 12px; color: var(--text-3);
}
.pic_lt .lt_nick { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pic_lt .lt_date { font-variant-numeric: tabular-nums; }
.pic_lt .lt_info:before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--border-2); order: 1;
}
.pic_lt .lt_nick { order: 0; }
.pic_lt .lt_date { order: 2; }

.pic_lt .empty_li { grid-column: 1 / -1; border: 0; }

@media (max-width: 1023px) {
  .pic_lt ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .pic_lt ul { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}