@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

/* 기본 폰트 */
* { font-family: 'Noto Sans KR', system-ui, -apple-system, Segoe UI, Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }

/* 래퍼 */
.hotdeal-wrapper{ max-width:1280px; margin:0 auto; }

/* ================= PC: 4×3 그리드 ================ */
.pc-only{ display:grid; }
.mobile-only{ display:none; }

.hotdeal-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  list-style:none; padding:0; margin:0;
}
.hotdeal-grid > .hotdeal-card{ list-style:none; }

/* ================= 카드 공통 ====================== */
.hotdeal-card{
  background:#fff; border-radius:16px; overflow:hidden;
 /* box-shadow:0 6px 24px rgba(16,24,40,.08);*/
  border:1px solid #eee;
  transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), border-color .35s;
  display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none;
}
.hotdeal-card:hover{ transform:translateY(-6px); box-shadow:0 16px 28px rgba(16,24,40,.12); border-color:#e5e7eb; }

.card-image-wrapper{ position:relative; width:100%; /*aspect-ratio:4/3; overflow:hidden; background:#f5f5f5; */ padding-top:20px;}
.card-image-wrapper img{ /*width:100%; height:100%;*/ object-fit:cover; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.hotdeal-card:hover .card-image-wrapper img{ transform:scale(1.06); }

/* 배지 */
.card-badge{
  position:absolute; top:14px; left:14px; padding:7px 14px; border-radius:24px;
  font-size:12px; font-weight:700; color:#fff; letter-spacing:.3px; box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.badge-red{background:linear-gradient(135deg,#ef4444,#dc2626)}
.badge-purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.badge-orange{background:linear-gradient(135deg,#f97316,#ea580c)}
.badge-green{background:linear-gradient(135deg,#10b981,#059669)}

/* 본문 */
.card-content{ padding:3px 16px 0 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card-title{
  padding:5px !important;
  font-size:17px; font-weight:800; color:#111827; margin:0;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.card-subtitle{
  font-size:13px; color:#6b7280; margin:0;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}

/* 가격 */
.price-section{ margin:5px 0 5px; }
.price-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; }
.price-row:first-child{ border-bottom:1px solid #f3f4f6; }
.price-label{ font-size:13px; font-weight:600; color:#6b7280; flex-shrink:0; }
.price-value{ font-size:22px; font-weight:900; line-height:1.2; letter-spacing:-.4px; margin:0; text-align:right; }
.price-unit{ font-size:14px; font-weight:700; margin-left:2px; }
.price-gradient{ background:linear-gradient(135deg,#667eea,#764ba2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.monthly-gradient{ background:linear-gradient(135deg,#f093fb,#f5576c); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* 안내문/버튼 */
.card-info{ font-size:11px; color:#9ca3af; text-align:center;  padding-top:10px; border-top:1px solid #f3f4f6; }
.card-button{
  display:block; width:calc(100% + 32px); margin-left:-16px; margin-top:auto;
  padding:14px 16px; text-align:center; color:#fff; text-decoration:none; font-weight:800; font-size:15px;
  background:linear-gradient(135deg,#3b82f6,#2563eb); border:none; border-radius:0 0 16px 16px;
  box-shadow:0 -2px 10px rgba(0,0,0,.05); transition:filter .25s, transform .1s;
}
.card-button:hover{ filter:brightness(.98) }
.card-button:active{ transform:scale(.99) }

/* 데이터 없음 */
.no-data{ grid-column:1/-1; text-align:center; padding:80px 20px; color:#9ca3af; font-size:16px; font-weight:600; }

/* ============== 반응형(태블릿) ============== */
@media (max-width:1279px){
  .hotdeal-grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
}
@media (max-width:1023px){
  .hotdeal-wrapper{ padding:16px; }
  .hotdeal-grid{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .card-title{ font-size:16px; }
  .price-value{ font-size:20px; }
}

/* ================= 모바일: Carousel ================= */
/* 모바일에서 PC 그리드 숨기고 캐러셀 보이기 */
@media (max-width:767px){
.hotdeal-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:5px;
  list-style:none; padding:0; margin:0;
}
.pd5z{letter-spacing:-2px;}
.car-logo-img{width:40px !important;}
  .hotdeal-wrapper{ padding:12px 0; }
.fclass{font-size:14px !important;}
  .px-4{padding:10px !important;}
.card-content{gap:0px;}
  /* Owl 슬라이드 공통 */
  .hotdeal-carousel.owl-carousel{ padding: 4px 0; }
  .hotdeal-carousel .owl-stage{ display:flex; }
.hotdeal-carousel .owl-item{ width:auto !important; margin-right:0 !important; }


  /* 카드 폭(부분 보이게) - 실제 부분 노출은 stagePadding으로 조정 */
  .hotdeal-carousel .hotdeal-card{ width:260px; margin:0 6px; }

  /* 모바일 카드 미세 타이포 조정 */
  .card-content{ /*padding:0 16px 0px; */}
  .card-title{ font-size:15px; }
  .card-subtitle{ font-size:12px; }
  .price-value{ font-size:19px; }
  .card-button{ width:calc(100% + 32px); margin-left:-16px; padding:14px 16px; font-size:14px; }
}

/* 더 작은 화면 최적화 */
@media (max-width:639px){
  .card-image-wrapper{ aspect-ratio:16/9; }
  .card-title{ font-size:16px; }
  .price-value{ font-size:20px; }
}

/* 한 줄: 제목 | 서브텍스트 */
.card-title-inline{
  font-weight:800; font-size:16px; line-height:1.3; color:#111827;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin:6px 0 8px;
}

/* 제목은 흐름 그대로 */
.card-title-inline .title{}

/* 구분자 |  */
.card-title-inline .sep{
  display:inline-block;
/*  margin:0 8px;*/
  color:#d1d5db;          /* 연한 회색 */
  font-weight:600;        /* 너무 굵지 않게 */
  transform:translateY(-1px); /* 미세 정렬 */
}

/* 서브텍스트: 작고 은은하게 */
.card-title-inline .subtitle{
  font-weight:600; font-size:12px; color:#6b7280;
}

/* 데스크톱에서 살짝 키움 */
@media (min-width:1024px){
  .card-title-inline{ font-size:17px; }
  .card-title-inline .subtitle{ font-size:13px; }
}




.hotdeal-card {
  transition: box-shadow .18s ease, transform .18s ease;
}
.hotdeal-card:hover {
  box-shadow: 0 18px 35px rgba(15, 23, 42, .14);
  transform: translateY(-2px);
}
.card-image-wrapper {
  /* 카드 상단 비율 고정시키고 싶으면 */
/*  aspect-ratio: 4 / 3;*/
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-image-wrapper img {
  max-width: 100%;
  height: auto;
}



.car-logo-box {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 999px;           /* 동그란 캡슐 모양 */
/*  box-shadow: 0 4px 10px rgba(0,0,0,0.04);*/
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.car-logo-img {
  width: 50px;    /* 가로 50px */
  height: auto;   /* 비율 유지 */
  display: block;
}

/* 텍스트로 쓸 경우 */
.car-logo-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.pd5z{padding:0px 5px;}