@charset "utf-8";
/* ============================================================
   업클릭 — 최근글 스킨 (매소너리 / 핀터레스트 레이아웃)
   theme/upclick/skin/latest/upc_masonry/style.css
   ------------------------------------------------------------
   · 한 페이지에 여러 번 출력되므로 ID가 아닌 .ugl 클래스로 스코프
   · 게시판 스킨(.ugb-)과 접두사를 분리해 서로 간섭하지 않음
   · 컬럼 수는 .ugl--cols-N 으로 지정, 화면이 좁아지면 자동 축소
   · 모바일 최소 2열 유지
   ============================================================ */

.ugl {
  --ink:    #111111;
  --ink-60: #666666;
  --ink-45: #8c8c8c;
  --line:   #ececec;
  --bg:     #ffffff;
  --accent: #0055ff;
  --radius: 14px;
  --gap:    clamp(.5rem, 1.6vw, 1.25rem);

  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;

  column-count: 4;
  column-gap: var(--gap);
}

.ugl *,
.ugl *::before,
.ugl *::after { box-sizing: border-box; }

.ugl img { display: block; max-width: 100%; }
.ugl a { color: inherit; text-decoration: none; }

.ugl :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 컬럼 수 (호출 시 cols= 옵션) ────────────────────── */
.ugl--cols-1 { column-count: 1; }
.ugl--cols-2 { column-count: 2; }
.ugl--cols-3 { column-count: 3; }
.ugl--cols-4 { column-count: 4; }
.ugl--cols-5 { column-count: 5; }
.ugl--cols-6 { column-count: 6; }

/* 화면이 좁아지면 지정값과 무관하게 상한을 낮춘다 */
@media (max-width: 1279px) {
  .ugl--cols-4,
  .ugl--cols-5,
  .ugl--cols-6 { column-count: 3; }
}
@media (max-width: 767px) {
  .ugl--cols-3,
  .ugl--cols-4,
  .ugl--cols-5,
  .ugl--cols-6 { column-count: 2; }
}

/* ── 카드 ────────────────────────────────────────────── */
.ugl-card {
  position: relative;
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ugl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgb(0 0 0 / .10);
}

/* ── 썸네일 ──────────────────────────────────────────── */
.ugl-card__media { background: #f2f2f2; }
.ugl-card__media img {
  width: 100%;
  height: auto;          /* width/height 속성 → 브라우저가 비율 계산 */
}

/* 유튜브 썸네일은 hqdefault(4:3)에 레터박스가 있어 16:9로 잘라낸다 */
.ugl-card__media--video {
  position: relative;
  aspect-ratio: 16 / 9;
}
.ugl-card__media--video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 재생 표식 */
.ugl-card__media--video::after {
  content: "";
  position: absolute;
  left: .625rem;
  bottom: .625rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6));
  pointer-events: none;
}

/* creator / store: 정사각 크롭 유지 */
.ugl-card__media--square { aspect-ratio: 1; }
.ugl-card__media--square img { width: 100%; height: 100%; object-fit: cover; }

/* ── 본문 ────────────────────────────────────────────── */
.ugl-card__body { padding: clamp(.75rem, 1.6vw, 1.125rem); }

.ugl-card__title {
  margin: 0 0 .5rem;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 카드 전체를 클릭 영역으로 */
.ugl-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ugl-card:hover .ugl-card__title { text-decoration: underline; text-underline-offset: 3px; }

.ugl-card__text {
  margin: 0 0 .875rem;
  font-size: clamp(.8125rem, 1.4vw, .875rem);
  line-height: 1.7;
  color: var(--ink-45);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 썸네일 없는 카드는 텍스트를 조금 더 보여준다 */
.ugl-card--noimg .ugl-card__title { -webkit-line-clamp: 3; }
.ugl-card--noimg .ugl-card__text  { -webkit-line-clamp: 5; }

/* ── 작성자 / 통계 ───────────────────────────────────── */
.ugl-card__meta {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  color: var(--ink-45);
  min-width: 0;
}

.ugl-card__avatar { flex: 0 0 auto; line-height: 0; }
.ugl-card__avatar img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: #f0f0f0;
}

.ugl-card__sns { flex: 0 0 auto; line-height: 0; margin-left: -.625rem; }
.ugl-card__sns img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--bg);
  background: var(--bg);
}

.ugl-card__author {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink-60);
}

.ugl-card__stats {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

/* ── 좁은 화면에서도 2열이 읽히도록 밀도만 조정 ─────── */
@media (max-width: 420px) {
  .ugl-card__body  { padding: .625rem .625rem .75rem; }
  .ugl-card__title { font-size: .9375rem; line-height: 1.35; margin-bottom: .375rem; }
  .ugl-card__text  { font-size: .75rem; line-height: 1.6; -webkit-line-clamp: 2; margin-bottom: .5rem; }
  .ugl-card__meta  { font-size: .6875rem; gap: .25rem; }
  .ugl-card__avatar img { width: 20px; height: 20px; }
  .ugl-card__sns   { display: none; }   /* 20px 아바타 위에 겹치면 뭉개짐 */
}

/* ── 빈 목록 ─────────────────────────────────────────── */
.ugl-empty {
  padding: clamp(2rem, 8vw, 4rem) 1rem;
  text-align: center;
  color: var(--ink-45);
  column-span: all;
}

/* ── 접근성 / 모션 ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ugl-card { transition: none; }
  .ugl-card:hover { transform: none; }
}

/* ── 다크모드 ────────────────────────────────────────── */
html.dark .ugl {
  --ink: #f3f4f6;
  --ink-60: #9ca3af;
  --ink-45: #8b929c;
  --line: #292f3d;
  --bg: #161f30;
}
html.dark .ugl-card__media { background: #1f2634; }
html.dark .ugl-card__avatar img { background: #1f2634; }