:root {
  --favorite-navy: #173949;
  --favorite-teal: #52a7b2;
  --favorite-gold: #d58e2b;
  --favorite-cream: #f7eedf;
  --favorite-red: #9a2f27;
}

.nvFavoriteButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 17px;
  border: 1px solid rgba(23, 57, 73, .2);
  border-radius: 999px;
  background: #fff;
  color: var(--favorite-navy);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 5px 16px rgba(23, 57, 73, .11);
  transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}

.nvFavoriteButton:hover { transform: translateY(-1px); border-color: var(--favorite-gold); color: var(--favorite-gold); }
.nvFavoriteButton:disabled { cursor: wait; opacity: .58; transform: none; }
.nvFavoriteButton.is-active { border-color: var(--favorite-gold); background: var(--favorite-gold); color: #fff; }
.nvFavoriteButton.is-active:hover { background: #b96f23; color: #fff; }
.nvFavoriteButton i { font-size: 14px; }

.nvFavoriteButton--card {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border-color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(5px);
}

.nvFavoriteButton--card .nvFavoriteLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

main .containerWrap .threeItemList .themeCourseItem .themeCourseDetail { position: relative; }
main .containerWrap .threeItemList .themeCourseItem .themeCourseDetail .nvFavoriteButton--card {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--favorite-navy);
  font-size: 13px;
}
main .containerWrap .threeItemList .themeCourseItem .themeCourseDetail .nvFavoriteButton--card.is-active {
  border-color: var(--favorite-gold);
  background: var(--favorite-gold);
  color: #fff;
}

.nvArticleFavoriteBar { display: flex; justify-content: flex-end; margin: 10px 0 24px; }

.memberFavoritesPage { padding-bottom: 70px; }
.memberFavoritesIntro { margin: 20px 0 22px; color: rgba(23, 57, 73, .64); font-size: 14px; }
.memberFavoritesGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.memberFavoriteCard {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(23, 57, 73, .1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(23, 57, 73, .08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.memberFavoriteCard:hover { transform: translateY(-3px); box-shadow: 0 11px 28px rgba(23, 57, 73, .13); }
.memberFavoriteImage { position: relative; display: block; overflow: hidden; padding-top: 62%; background: var(--favorite-cream); }
.memberFavoriteImage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.memberFavoriteBody { padding: 17px 18px 19px; }
.memberFavoriteMeta { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: rgba(23, 57, 73, .58); font-size: 11px; }
.memberFavoriteType { color: var(--favorite-teal); font-weight: 700; }
.memberFavoriteBody h2 { min-height: 42px; margin: 0 0 15px; color: var(--favorite-red); font-size: 17px; line-height: 1.28; }
.memberFavoriteBody a { text-decoration: none; }
.memberFavoriteAction { display: inline-flex; align-items: center; color: var(--favorite-navy); font-size: 13px; font-weight: 700; }
.memberFavoriteAction::after { margin-left: 7px; content: '→'; color: var(--favorite-gold); }
.memberFavoritesEmpty { padding: 68px 20px; border: 1px dashed rgba(23, 57, 73, .2); border-radius: 18px; background: #fff; text-align: center; }
.memberFavoritesEmpty i { margin-bottom: 16px; color: var(--favorite-gold); font-size: 34px; }
.memberFavoritesEmpty h2 { margin: 0 0 8px; color: var(--favorite-navy); font-size: 21px; }
.memberFavoritesEmpty p { margin: 0 0 20px; color: rgba(23, 57, 73, .58); font-size: 14px; }
.memberFavoritesExplore { display: inline-flex; padding: 10px 20px; border-radius: 999px; background: var(--favorite-navy); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.memberFavoritesExplore:hover { color: #fff; opacity: .9; }

@media (max-width: 900px) {
  .memberFavoritesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 768px) {
  .nvArticleFavoriteBar { margin: 8px 0 20px; }
  .nvArticleFavoriteBar .nvFavoriteButton { width: 100%; }
  .memberFavoritesPage { padding-right: 12px; padding-bottom: 50px; padding-left: 12px; }
  .memberFavoritesIntro { margin: 16px 0 18px; font-size: 13px; }
  .memberFavoritesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .memberFavoriteCard { border-radius: 13px; }
  .memberFavoriteBody { padding: 12px 12px 15px; }
  .memberFavoriteBody h2 { min-height: 38px; margin-bottom: 11px; font-size: 14px; }
  .memberFavoriteMeta { align-items: flex-start; flex-direction: column; gap: 3px; }
  .memberFavoriteAction { font-size: 12px; }
  .nvFavoriteButton--card { top: 7px; right: 7px; width: 34px; min-height: 34px; }
  main .containerWrap .threeItemList .themeCourseItem .themeCourseDetail .nvFavoriteButton--card {
    top: 27px;
    right: 27px;
    width: 34px;
    min-height: 34px;
  }
}