/* ══════════════════════════════════════════════
   오뜨랑 리뷰 카드 공통 컴포넌트
   사용처: index.html / mypage.html / community.html
   ══════════════════════════════════════════════ */

/* ── 그리드 래퍼 ── */
.rc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 27px;  /* 줄 사이 여백 */
  margin-bottom: 20px;
}

/* ── 카드 외곽 ── */
.rc-card {
  position: relative;
  border-radius: var(--r);
  /* overflow:hidden 제거 — 콘텐츠 길이에 따라 카드 높이 자동 확장 */
  cursor: pointer;
  background: var(--bg2);
  border: .5px solid var(--border);
  transition: transform .2s, border-color .15s;
}
.rc-card:hover {
  transform: translateY(-3px);
  border-color: var(--border2);
}

/* ── 포스터 영역 ──
   aspect-ratio:2/3 로 포스터 비율 유지
   overflow:hidden — 포스터 이미지가 비율 밖으로 나오지 않게
   rc-content는 position:absolute top:50%로 포스터 밖까지 늘어남
── */
.rc-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--bg3);
  overflow: hidden;
}

/* 포스터 배경 이미지 — rc-card overflow:hidden 없으므로 직접 border-radius 적용 */
.rc-poster-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  border-radius: var(--r) var(--r) 0 0;
}

/* 포스터 없을 때 플레이스홀더 */
.rc-poster-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: linear-gradient(135deg, var(--bg3), var(--bg2));
}

/* 포스터 그라디언트 — 60% 지점부터 서서히 적용, 포스터가 더 비치게 */
.rc-poster-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent        0%,
    transparent       55%,
    rgba(13,13,20,.4) 65%,
    rgba(13,13,20,.72) 75%,
    rgba(13,13,20,.88) 88%,
    rgba(13,13,20,.93) 100%
  );
  pointer-events: none;
}

/* 좌상단 닉네임 뱃지 — 클릭 시 유저 마이페이지 이동 */
.rc-nick-badge {
  position: absolute;
  top: 8px; left: 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .3px;
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--gold);
  background: rgba(0,0,0,.6);
  border: .5px solid rgba(240,180,41,.5);
  z-index: 4;
  text-decoration: none;
  white-space: nowrap;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.rc-nick-badge:hover {
  background: rgba(240,180,41,.18);
  border-color: var(--gold);
}

/* 우상단 좋아요 버튼 — 클릭 시 좋아요 토글 (원래 있던 별점 뱃지 자리 재사용)
   박스/배경 없이 아이콘+숫자만 포스터 위에 떠있는 형태
   안 누름=빨간 빈 하트, 누름=빨간 꽉찬 하트 — 색은 항상 빨강, 채움 여부로만 구분 */
.rc-like-badge {
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: none;
  padding: 2px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: transform .15s;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.85));
}
.rc-like-icon {
  font-size: 18px; /* 기존 12px 대비 50% 확대 */
  line-height: 1;
}
.rc-like-count {
  line-height: 1;
}

/* ── 콘텐츠 영역 ──
   position:absolute, top:50% — 포스터 50% 지점에서 시작
   height:auto — 내용이 길면 포스터 밖으로 자연스럽게 늘어남
── */
.rc-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 2;
  background: linear-gradient(
    180deg,
    transparent        0%,
    rgba(13,13,20,.82) 22%,
    rgba(13,13,20,.90) 40%
  );
}

/* 작품명 — 20px */
.rc-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}

/* 별점 행 */
.rc-stars-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.rc-stars {
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 1px;
  line-height: 1;
}
.rc-score-num {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--gold);
  font-weight: 700;
}

/* 구분선 */
.rc-divider {
  height: .5px;
  background: rgba(255,255,255,.15);
}

/* 한줄 감상 — 14px */
.rc-body {
  font-size: 14px;
  color: rgba(255,255,255,.9);
  font-style: normal;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.rc-body-empty {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  font-style: normal;
}

/* 태그 영역 */
.rc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
/* 태그 — 10px */
.rc-tag {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.rc-tag.eval {
  background: rgba(240,180,41,.18);
  color: var(--gold);
  border: .5px solid rgba(240,180,41,.4);
}
.rc-tag.emo {
  background: rgba(55,138,221,.15);
  color: #6eb3f5;
  border: .5px solid rgba(55,138,221,.35);
}

/* rc-footer, rc-nick, rc-time — 닉네임이 좌상단 뱃지로 이동하여 제거 */

/* ── 스켈레톤 로딩 ── */
.rc-skel {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: rc-shimmer 1.4s infinite;
  border-radius: 4px;
}
@keyframes rc-shimmer {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}

/* ══════════════════════════════════════════════
   모바일 (768px 이하)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 가로 슬라이드 */
  .rc-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 12px;
    margin-bottom: 0;
    grid-template-columns: unset;
    /* 모바일은 가로 슬라이드라 row-gap 불필요 — community.html 2열 그리드에서 적용 */
  }
  .rc-grid::-webkit-scrollbar { display: none; }

  /* 카드 너비 200px */
  .rc-card {
    flex: 0 0 200px;
    min-width: 200px;
    scroll-snap-align: start;
  }

  /* 콘텐츠 패딩 축소 */
  .rc-content {
    padding: 10px 10px 12px;
    gap: 5px;
  }

  /* 작품명 */
  .rc-title { font-size: 15px; }

  /* 한줄감상: 2줄 표시 */
  .rc-body {
    font-size: 11px;
    -webkit-line-clamp: 2;
  }

  /* 별점 */
  .rc-stars     { font-size: 11px; }
  .rc-score-num { font-size: 11px; }

  /* 태그: 최대 2개만 표시 */
  .rc-tag:nth-child(n+3) { display: none; }
  .rc-tag  { font-size: 10px; padding: 2px 6px; }

  /* 좌상단 닉네임 뱃지 모바일 크기 */
  .rc-nick-badge { font-size: 10px; padding: 2px 6px; max-width: 65%; }

  /* 우상단 좋아요 뱃지 모바일 크기 */
  .rc-like-badge { font-size: 11px; gap: 3px; }
  .rc-like-icon  { font-size: 15px; }
}