/*
 * 스토리 모먼트 카드 — Figma 06.community «Story Posts» / «Story Profile» (2026-10-29 갱신)
 * 목록·프로필·검색 결과 공통(맨 뒤에 링크). 바뀐 것:
 *   · 목록 바탕 = 흰 둥근 판 없이 흰 바탕에 바로 카드(폭 1280 · 3열 간격 20 · 카드 413 · 사진 3:4 · 라운드 8)
 *   · 사진·영상 종류 아이콘 = 왼쪽 위(10, 11 · 18px) · «P»(리워드) = (32, 30 · 18px)
 *   · 소리 버튼 = 오른쪽 위(8, 8 · 30px 원 · 검정 20%) · 위치 표시 = 왼쪽 아래(10, 10)
 *   · 글 영역 = 여백 10 · 제목 16px/22 500 #444(모바일 14px/20)
 * 특정도는 body + 카드 클래스 두 번(0,3,1) — 화면별 위치 규칙(community-card-overlay-position.css 0,3,0 ·
 *   story-*-mobile.css 0,2,0)보다 높게. 프리미엄 업체 카드(0,4,0)는 그대로 둔다.
 */
.community-card-panel {
  /* 서브내비 아래 40(목록 위 여백 20 + 이 20) · 모바일은 좌우·위 20 */
  padding: 20px 0 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body .community-card.community-card .community-card__media {
  border-radius: 8px;
}

body .community-card.community-card .community-card__media-type {
  top: 11px;
  right: auto;
  left: 10px;
  width: 18px;
  height: 18px;
}

body .community-card.community-card .community-card__reward {
  top: 30px;
  left: 32px;
  width: 18px;
  height: 18px;
}

body .community-card.community-card .community-card__audio {
  top: 8px;
  right: 8px;
  bottom: auto;
}

body .community-card.community-card .community-card__review {
  bottom: 10px;
  left: 10px;
  background: rgb(0 0 0 / 20%); /* 2026-10-30 요청 — #000000 20%(예전 badge-alpha-b-60) */
}

body .community-card.community-card .community-card__body {
  padding: 10px;
}

body .community-card.community-card .community-card__title {
  color: var(--neutral-tx2-title, #444);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

@media (max-width: 767px) {
  .community-card-panel {
    padding: 20px;
  }

  .community-card-panel .community-grid {
    gap: 20px;
  }

  body .community-card.community-card .community-card__title {
    font-size: 14px;
    line-height: 20px;
  }
}

/* 2026-10-31 요청 — 스토리 모먼트 목록 그리드 간격 = 모든 폭 10px(허브·프로필·검색 결과 공통).
   폭별 시안 규칙(20/24px · 모바일 20px)을 이기도록 특정도를 올린다. */
body .community-grid.community-grid {
  gap: 10px;
}