/* ===== Grid (3x3) ===== */
.hc-grid { display: grid; gap: 24px; }
.hc-grid--3cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .hc-grid--3cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .hc-grid--3cols { grid-template-columns: 1fr; } }

/* ===== Card (glass style) ===== */
.hc-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 50px;
  gap: 30px;
  min-height: 568px;
  background: rgba(0,0,0,0.30);
  box-shadow: 3px 4px 35.4px rgba(0,0,0,0.10);
  backdrop-filter: blur(20px);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background-clip: padding-box;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
  cursor: pointer; /* ← 카드에만 포인터 */
}

/* 링크는 카드의 커서를 상속받아 내부 요소 포인터 제거 */
.hc-card__link { display: contents; color: inherit; text-decoration: none; cursor: inherit; }
.hc-card__link * { cursor: inherit; }

/* 썸네일 317×400 */
.hc-card__thumb { width: 100%; display: flex; justify-content: center; }
.hc-card__thumb img,
.hc-card__thumb--placeholder {
  width: 317px;
  height: 400px;
  border-radius: 10px;
  object-fit: cover;
  background: #fff;
}

/* 키워드 */
.hc-card__tags { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.hc-tag {
  font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.6;
  color: #fff;
  opacity: .95;
}

/* Hover: 카드만 살짝 더 투명해짐 */
.hc-card:hover {
  background: rgba(0,0,0,0.8);
  border-color: rgba(255,255,255,0.55);
  box-shadow: 3px 4px 40px rgba(0,0,0,0.14);
}

/* ===== Paging (Figma style) ===== */
.hc-paging.hc-paging--figma {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
}

/* 숫자 */
.hc-paging__num {
  font-size: 28px;
  line-height: 1;
  color: #bfbfbf;
  text-decoration: none;
  padding: 6px 2px;
  transition: color .15s ease;
}
.hc-paging__num:hover  { color: #444; }
.hc-paging__num.is-active { color: #111; font-weight: 700; }

/* 버튼 공통 */
.hc-paging__edge {
  --ic: 22px;                 /* 아이콘 크기 */
  --bar: 2px;               /* 세로바 두께 */
  position: relative;
  width: 48px;
  height: 48px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #111;
  border-radius: 3px;
  background: #fff;
  color: #111;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
  font-size: 0;               /* 텍스트 영향 제거 */
}
.hc-paging__edge:hover { background: #f3f3f3; transform: translateY(-1px);  color: #111 !important;}

/* 아이콘(체브론) – SVG 배경으로 크기 고정 */
.hc-paging__edge::before {
  content: "";
  display: block;
  width: var(--ic);
  height: var(--ic);
  background: no-repeat center / contain
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='8,4 16,12 8,20' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* 방향 */
.hc-paging__edge[data-icon="prev"]::before  { transform: scaleX(-1); }
.hc-paging__edge[data-icon="next"]::before  { transform: none; }

/* first/last: 얇은 세로바(문자 대신 1.5px 도형) */
.hc-paging__edge[data-icon="first"]::after,
.hc-paging__edge[data-icon="last"]::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--bar);
  height: calc(var(--ic) * 0.95);
  background: currentColor;
  transform: translateY(-50%);
  border-radius: 1px;
}
.hc-paging__edge[data-icon="first"]::before { transform: scaleX(-1); }   /* 왼쪽 방향 */
.hc-paging__edge[data-icon="first"]::after  { left: 12px; }
.hc-paging__edge[data-icon="last"]::after   { right: 12px; }