/* ===== 카드 뱃지 묶음 (DEEP·NEW·인기!) — 2026-10-01 사용자 피드백 =====
   예전엔 뱃지마다 position:absolute + left 값으로 따로 놓아 카테고리·랭킹 카드에서 서로(또는 순위 박스와) 겹쳤고,
   높이가 제각각(DEEP·인기! 22px, NEW 약 16px)이라 위 끝만 맞아 줄이 어긋나 보였다.
   이제 카드 왼쪽 위 한 줄 묶음(.card-badges) 안에 나란히(gap 4px), 모두 같은 높이·세로 가운데 정렬.
   랭킹 카드는 순위 박스(ch_grid.css .ranking-rank: top -8px, 높이 30px)와 같은 줄·같은 세로 가운데.
   모양·색은 각 뱃지 그대로 (DEEP 은 보라 알약 — adult.css, NEW·인기! 는 각진 사각 — main.css), 흰 테두리 없음(메인과 같음). */
.card-badges {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 34px;            /* 오른쪽 위 찜 하트(약 28px)와 겹치지 않게 */
  z-index: 4;
  display: flex;
  flex-wrap: wrap;        /* 자리가 모자라면 다음 줄로 (겹침 없음) */
  align-items: center;
  gap: 4px;
  min-width: 0;
  pointer-events: none;
}

.card-badges > .age-badge-19,
.card-badges > .new-badge,
.card-badges > .pop-badge {
  position: static;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  max-width: 100%;
  height: 22px;           /* DEEP·NEW·인기! 같은 높이 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 6px;
  box-sizing: border-box;
  border: none;
  outline: none;
  font-size: 9px;
  line-height: 1;         /* 글자가 높이 가운데에 오게 */
  white-space: nowrap;
  overflow: hidden;
}

/* 랭킹 카드: 순위 박스(-8px~22px, 가운데 7px) 오른쪽에 같은 줄 — 묶음 높이를 순위 박스와 같게 두고 세로 가운데 */
.ranking-rank ~ .card-badges { top: -8px; left: 26px; min-height: 30px; }

/* 좁은 카드(휴대폰 2열 랭킹·카테고리·검색 격자)에서는 조금 작게 — 카드 밖으로 넘치지 않게 */
#ranking-grid .card-badges,
#category-grid .card-badges,
.ds-grid .card-badges { gap: 3px; }

#ranking-grid .card-badges > *,
#category-grid .card-badges > *,
.ds-grid .card-badges > * { height: 20px; padding: 0 5px; }