/* repflix 스타일 메인 위젯 (실시간 인기 랭킹/신상품 등) — hushbag002
   markup: main.001~003.skin.php (.sct_slide > .col.sct_li > .inner-wrap > .sct_rank/.sct_img/.sct_text)
   토큰: 포인트 #f84a71, 텍스트 #212121, 화이트 미니멀, 4열 */

.main-common{ max-width:1240px; margin:0 auto; padding:0 20px; }
.main-common .sct_slide{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px 20px;
  list-style:none; margin:0; padding:0;
}
.main-common .sct_li{ position:relative; }
.main-common .inner-wrap{ height:100%; display:flex; flex-direction:column; }

/* 순위 뱃지 */
.main-common .sct_rank{
  position:absolute; top:10px; left:10px; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:34px; padding:4px 0; border-radius:6px;
  background:#212121; color:#fff; line-height:1;
}
.main-common .sct_li:nth-child(1) .sct_rank,
.main-common .sct_li:nth-child(2) .sct_rank,
.main-common .sct_li:nth-child(3) .sct_rank{ background:#f84a71; }
.main-common .sct_rank .num{ font-size:16px; font-weight:800; }
.main-common .sct_rank .text{ font-size:9px; font-weight:600; letter-spacing:.04em; opacity:.85; margin-top:2px; }

/* 이미지 */
.main-common .sct_img{
  position:relative; width:100%; aspect-ratio:1/1; overflow:hidden;
  background:#f5f5f5; border-radius:10px; border:1px solid #eee;
}
.main-common .sct_img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.main-common .sct_li:hover .sct_img img{ transform:scale(1.04); }
.main-common .soldout-text{ position:absolute; inset:0; background:rgba(0,0,0,.45); color:#fff; font-weight:700; }

/* 호버 액션 버튼 */
.main-common .sct_op_btn{
  position:absolute; right:10px; bottom:10px; display:flex; gap:6px; opacity:0; transform:translateY(6px);
  transition:.25s ease;
}
.main-common .sct_li:hover .sct_op_btn{ opacity:1; transform:none; }
.main-common .sct_op_btn button{
  width:34px; height:34px; border:0; border-radius:50%; background:#fff; color:#212121;
  box-shadow:0 2px 8px rgba(0,0,0,.15); cursor:pointer; font-size:15px; display:inline-flex; align-items:center; justify-content:center;
}
.main-common .sct_op_btn button:hover{ background:#f84a71; color:#fff; }
.main-common .sct_op_btn .like_cnt{ font-size:10px; margin-left:1px; }

/* 텍스트 */
.main-common .sct_text{ padding:12px 2px 0; }
.main-common .sct_txt{ font-size:14px; line-height:1.4; color:#212121; margin-bottom:6px; }
.main-common .sct_txt a{ color:inherit; text-decoration:none; }
.main-common .sct_basic{ font-size:12px; color:#999; margin-bottom:4px; }
.main-common .discount-price{ font-size:12px; margin-bottom:2px; }
.main-common .discount-price .dc-price-percent{ color:#f84a71; font-weight:800; margin-right:4px; }
.main-common .discount-price .text-decoration-line-through{ color:#bbb; text-decoration:line-through; }
.main-common .sct_cost.item-price{ font-size:16px; font-weight:800; color:#212121; }
.main-common .sct_noitem{ grid-column:1/-1; text-align:center; color:#999; padding:40px 0; }

/* 반응형 */
@media (max-width:991px){ .main-common .sct_slide{ grid-template-columns:repeat(3,1fr); gap:24px 14px; } }
@media (max-width:767px){
  .main-common{ padding:0 12px; }
  .main-common .sct_slide{ grid-template-columns:repeat(2,1fr); gap:20px 12px; }
  .main-common .sct_cost.item-price{ font-size:15px; }
}