.ccp-grid{display:grid;gap:18px}
.ccp-grid.ccp-cols-1{grid-template-columns:1fr}
.ccp-grid.ccp-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ccp-grid.ccp-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ccp-grid.ccp-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){
  .ccp-grid.ccp-cols-3,.ccp-grid.ccp-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ccp-grid{grid-template-columns:1fr}
}

.ccp-card{position:relative;border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;background:#fff;transition:transform .12s ease,box-shadow .12s ease}
.ccp-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.ccp-card-link{display:block;color:inherit;text-decoration:none}
.ccp-top{display:flex;gap:14px;padding:16px 16px 10px;align-items:flex-start}
.ccp-left{width:62px;flex:0 0 62px}
.ccp-left-wrap{width:62px;height:62px;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.02)}
.ccp-left-img{width:100%;height:100%;object-fit:cover;display:block}

.ccp-main{min-width:0;flex:1;position:relative;min-height:62px}
.ccp-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.03)}
.ccp-badge-free{font-weight:600}

.ccp-rating-value{font-weight:700}
.ccp-rating-count{opacity:.75}

.ccp-excerpt{font-size:13px;opacity:.85;line-height:1.5}

.ccp-bottom{padding:0 16px 16px}
.ccp-bottom-img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid rgba(0,0,0,.08);object-fit:cover}

.ccp-empty{padding:14px;border:1px dashed rgba(0,0,0,.2);border-radius:12px;opacity:.8}


/* Head row: title left, free badge right */
.ccp-headrow{display:flex;align-items:flex-start;gap:10px;margin-bottom:0;position:relative}
.ccp-headrow 
/* Title emphasis */

/* Rating star */
.ccp-star{display:inline-flex;align-items:center;justify-content:center}
.ccp-star svg{width:13px;height:13px;display:block;opacity:.9;fill:currentColor}


/* Prevent title from colliding with badge */
.ccp-headrow .ccp-title{padding-right:72px}

/* Mobile: force single column */
@media (max-width:640px){
  .ccp-grid.ccp-cols-1,
  .ccp-grid.ccp-cols-2,
  .ccp-grid.ccp-cols-3,
  .ccp-grid.ccp-cols-4{grid-template-columns:1fr !important;}
}


/* Rating aligned to left image bottom (lifted higher) */
.ccp-rating{
	position:absolute;
	left:0;
	top:62px;                 /* left image height */
	transform:translateY(-112%); /* lift a bit more upward than -100% */
	display:flex;
	gap:6px;
	align-items:baseline;
	margin:0;
	font-size:14px;
}








/* Free badge align to headrow top */
.ccp-headrow .ccp-badge-free{
	position:absolute !important;
	top:0 !important;      /* headrow 상단과 일치 */
	right:0 !important;    /* headrow 오른쪽 끝 */
	z-index:2;
	transform:none !important;
}