/* ====== 레이아웃 ====== */
.listWrap{ width:100%; display:flex; flex-direction:column; gap:12px; }

.card{
  display:flex; gap:14px;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:14px;
  padding:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  cursor:pointer;
  position:relative;
}
.card:hover{ border-color:#d8d8d8; }

/* 광고카드도 네임카드와 동일하게 보이도록 */
.card.adCard{
  cursor:default;
}
.card.adCard:hover{
  border-color:#e8e8e8;
}

/* 썸네일 */
.thumb{
  width:84px; height:102px;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  flex:0 0 auto;

  /* 포스터 없을 때 대표이미지 느낌
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, #ffe8a3, #bfe3ff);
 */
  display:flex;
  align-items:center;
  justify-content:center;
}
.thumb img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.thumb .noPoster{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  background:rgba(0,0,0,.18);
}

.cardBody{ flex:1; min-width:0; }
.topRow{ display:flex; align-items:flex-start; gap:10px; }

/* 제목 마키(흘러가기) */
.titleMarquee{
  flex:1;
  min-width:0;
  overflow:hidden;
  position:relative;
  height:22px;
}
.titleTrack{
  display:inline-block;
  white-space:nowrap;
  font-weight:800;
  font-size:15px;
  line-height:22px;
  will-change:transform;
  padding-right:40px;
}
.titleMarquee.marqueeOn .titleTrack{
  animation: marqueeLeft 10s linear infinite;
}
.titleMarquee.marqueeOn:active .titleTrack,
.titleMarquee.marqueeOn:hover .titleTrack{
  animation-play-state:paused;
}
@keyframes marqueeLeft{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.moreBtn{
  width:22px; height:22px;
  border-radius:6px;
  border:1px solid #eee;
  background:#fafafa;
  cursor:pointer;
  flex:0 0 auto;
}
.moreBtn:active{ transform:scale(.98); }

.moreWrap{ position:relative; flex:0 0 auto; }

.moreMenu{
  position:absolute;
  top:26px;
  right:0;
  min-width:110px;
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  padding:6px;
  z-index:50;
  display:none;
}

.moreMenu.open{ display:block; }

.moreMenu button{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:10px 10px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.moreMenu button:hover{ background:#f6f6f6; }
.moreMenu button.danger:hover{ background:#ffecec; }


/* ====== 뱃지 ====== */
.badges{ display:flex; gap:8px; margin:10px 0 8px; flex-wrap:wrap; }
.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  line-height:1;
}
.b-green{ background:#e9f8ee; color:#15803d; border:1px solid #b7efc6; }
.b-blue{ background:#eef6ff; color:#1d4ed8; border:1px solid #cfe3ff; }
.b-yellow{ background:#fff7e6; color:#b45309; border:1px solid #ffe0a8; }
.b-red{ background:#ffecec; color:#b91c1c; border:1px solid #ffc7c7; }
.b-gray{ background:#f4f4f5; color:#52525b; border:1px solid #e4e4e7; }

/* ====== 서브정보 ====== */
.metaLine{
  font-size:13px;
  color:#666;
  margin-top:6px;
}
.metaLine strong{ color:#333; font-weight:800; }

/* ====== 유료 임팩트(텍스트 없이) ====== */
.card.premium{
  background: linear-gradient(135deg, #fffaf0, #fff3cd);
  border: 1px solid #f5d97b;
  box-shadow: 0 4px 14px rgba(255, 193, 7, 0.15);
}
.card.premium::before{
  content:"";
  position:absolute;
  left:0; top:12px; bottom:12px;
  width:4px;
  border-radius:8px;
  /*background: linear-gradient(180deg, #f59e0b, #fbbf24);*/
}

.card.paid{
  background: linear-gradient(135deg, #eafae5, #d5f8ae);
  border: 1px solid #7df073;
  box-shadow: 0 4px 14px rgba(255, 193, 7, 0.15);
}
.card.paid::before{
  content:"";
  position:absolute;
  left:0; top:12px; bottom:12px;
  width:4px;
  border-radius:8px;
  /*background: linear-gradient(180deg, #f59e0b, #fbbf24);*/
}

/* ====== 광고 영역(네임카드 형태 내부에 광고) ====== */
.adInner{
  width:100%;
  padding:6px 0; /* 위아래 네임카드와 톤 맞춤 */
}
/* ✅ 네임카드(일반 카드) 높이 기준을 고정 */
.card{
  min-height: 102px; /* 필요시 조정(현재 UI 기준) */
}

/* ✅ 광고카드는 일반 카드와 같은 min-height로 맞추고, 내부 여백 제거 */
.card.adCard{
  padding:14px;            /* 일반 카드와 동일 */
  min-height: 102px !important;       /* 일반 카드와 동일 */
}

/* 광고카드 전용: 본문에 텍스트 안넣고 광고만 102px */
.card.adCard .adBody{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
}

/* 광고 슬롯을 썸네일 높이(102px)로 강제 */
.adSlot{
  width:100%;
  height:102px !important;
  overflow:hidden;
  border-radius:12px;
  border:1px solid #eee;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card.adCard{ padding:14px; }
.card.adCard .adSlot{
  height:102px !important;
  overflow:hidden;
  border-radius:12px;
  border:1px solid #eee;
}