/* ========================
   📁 card.css (비율 기반)
   ======================== */

.feed-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 1.5rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.05);
  padding: 2rem 1.75rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.25s ease;
  position: relative;
  /* 북마크 float용 */
}

.feed-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

.feed-title {
  font-size: 1.25rem;
  /* ≒ 20px */
  font-weight: 700;
  color: #222;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.feed-summary p {
  font-size: 1rem;
  /* ≒ 16px */
  margin-bottom: 0.2rem;
  color: #444;
  line-height: 1.8;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
}

.like-section {
  text-align: right;
}

/* 좋아요 하트 아이콘 */
svg.heart-icon {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: #aaa;
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.2s ease, stroke 0.2s ease, transform 0.15s ease;
}

svg.heart-icon.liked {
  transform: scale(1.15);
}

svg.heart-icon.liked path,
svg.heart-icon path.liked {
  fill: #2196F3;
  stroke: #2196F3;
}

.like-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  border-radius: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.like-box:hover {
  background-color: #f2f2f2;
}

/* 카드 내 북마크 버튼 (상단 우측) */
.bookmark-float {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background 0.15s;
  z-index: 2;
}

.bookmark-float:hover {
  background: rgba(0, 0, 0, 0.05);
}

svg.bookmark-icon {
  fill: #bdbdbd;
  /* 기본 연회색 */
  width: 1.3rem;
  /* 약 20px */
  height: 1.8rem;
  transition: fill 0.2s ease;
  cursor: pointer;
}

/* svg.bookmark-icon:hover {
  fill: #ffd54f;
} */


svg.bookmark-icon.bookmarked {
  fill: #f4c542;
  /* filter: drop-shadow(0 0 2px #f4c54299);  살짝 빛나는 효과 */
}

/* ❌ 북마크 제거 버튼 스타일 */
.bookmark-remove-btn {
  position: absolute;
  right: -4rem;              /* 오른쪽 여백: 16px */
  top: 50%;                 /* 세로 중앙 */
  transform: translateY(-50%);
  font-size: 1.5rem;        /* 글자 크기: 약 17.6px */
  cursor: pointer;

  background-color: #fff;
  color: #999;
  padding: 0.25rem 0.5rem;  /* 패딩: 4px 위아래, 8px 좌우 */
  border-radius: 50%;       /* 원형 느낌 */
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.1); /* 약한 그림자 */
  transition: background-color 0.2s ease, color 0.2s ease;
  z-index: 2;
}

.bookmark-remove-btn:hover {
  background-color: #ffe6e6;
  color: #e53935;
}