/* ===============================
   CleanCall 버튼 시스템
================================= */

.cc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  padding:10px 18px;

  font-size:13px;
  font-weight:700;

  border-radius:8px;
  border:1px solid transparent;

  cursor:pointer;
  text-decoration:none;

  transition:all .15s ease;
  white-space:nowrap;
}

/* 큰 버튼 */
.cc-btn-lg{
  padding:14px 32px;
  font-size:14px;
  border-radius:12px;
}

/* 작은 버튼 (테이블용) */
.cc-btn-sm{
  padding:6px 12px;
  font-size:12px;
  border-radius:6px;
}

.cc-btn-main{
  background:#2563eb;
  color:#fff;
  border:none;
}

.cc-btn-main:hover{
  background:#1e4fd8;
}


/* ===============================
   의미 기반
================================= */

.cc-btn-edit{
  background:#2563eb;
  color:#fff;
}
.cc-btn-edit:hover{
  background:#1e4fd8;
}

.cc-btn-delete{
  background:#ef4444;
  color:#fff;
}
.cc-btn-delete:hover{
  background:#dc2626;
}

.cc-btn-detail{
  background:#f3f4f6;
  color:#374151;
  border:1px solid #e5e7eb;
}
.cc-btn-detail:hover{
  background:#e5e7eb;
}

.cc-btn-accept{
  background:#111827;
  color:#fff;
}
.cc-btn-accept:hover{
  background:#1f2937;
}

.cc-btn-sub{
  background:#f9fafb;
  color:#374151;
  border:1px solid #e5e7eb;
}
.cc-btn-sub:hover{
  background:#f3f4f6;
}

.cc-btn-call{
  background:#2563eb;
  color:#fff;
}

.cc-btn-call:hover{
  background:#1e4fd8;
}

.cc-btn-lead{
  background:#111827;
  color:#fff;
}

.cc-btn-lead:hover{
  background:#1f2937;
}



/* ===============================
   CleanCall list.css (정렬 완전 해결)
================================= */



/* ===============================
   페이지 타이틀
================================= */
.partner-header {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 8px;
  margin-bottom: 20px;
}

@media (max-width:768px){

  .partner-header{
    margin-top:12px;   /* 🔥 기본 추천 */
  }

}

.partner-title {
  font-size: 25px;
  font-weight: 600;
  margin: 0;
  margin-bottom: 6px;
  color: #111827;
  letter-spacing: -0.3px;
}

.partner-subtitle {
  font-size: 15px;
  color: #6b7280;
  margin: 0;
}

.partner-card-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 14px;
  color: #111827;
}

.partner-greeting{
    font-size:13px;
    color:#9ca3af;
    margin-top:4px;
}


/* 🔥 상단 */
.cc-section {
  margin-top: 10px;
}

.cc-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.cc-section-header h3{
  font-size:20px;
  font-weight:700;
  margin:0;
}

.cc-section-desc{
  margin:0;
  font-size:14px;
  color:#6b7280;
}


/* ===============================
   검색 영역 (PC 기준)
================================= */

.cc-search-inline{
  display:flex;
  justify-content:flex-end;
  margin-bottom:16px;
}

.cc-search-inline form{
  display:flex;
  gap:6px;
  align-items:center;
}

/* 검색창 */
.cc-search-inline input{
  height:36px;
  padding:0 12px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  font-size:14px;
  min-width:220px;
}

/* 정렬 */
.cc-search-inline select{
  height:36px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:0 8px;
  font-size:13px;
}

/* 버튼 */
.cc-search-actions,
.cc-reset{
  display:flex;
}


/* ===============================
   모바일 검색 영역 (완성형)
================================= */

@media (max-width:768px){

  .cc-search-inline{
    justify-content:center;
  }

  .cc-search-inline form{
    display:flex;
    flex-wrap:wrap;   /* 🔥 핵심 */
    gap:8px;
  }

  /* 🔥 1줄: 검색 + 정렬 */
  .cc-search-group{
    flex:1 1 auto;
    min-width:0;     /* 🔥 필수 (overflow 방지) */
  }

  .cc-sort-group{
    flex:0 0 100px;  /* 🔥 안정적인 고정폭 */
  }

  /* 🔥 input */
  .cc-search-inline input{
    width:100%;
    min-width:0;
    height:44px;        /* 🔥 추가 (input 두께 맞춤) */
    padding:0 12px;
  }

  /* 🔥 select */
  .cc-search-inline select{
    width:100%;
    height:44px;        /* 🔥 input과 높이 통일 */
  }

  /* 🔥 폰트 (iOS 대응) */
  .cc-search-inline input,
  .cc-search-inline select{
    font-size:16px;
  }

  /* 🔥 2줄: 검색 버튼 */
  .cc-search-actions{
    flex:1 1 100%;
  }

  .cc-search-actions .cc-btn{
    width:100%;
    height:44px;
    font-size:15px;
  }

  /* 🔥 3줄: 초기화 */
  .cc-reset{
    flex:1 1 100%;
  }

  .cc-reset .cc-btn{
    width:100%;
    height:44px;
    font-size:14px;
  }

  /* 🔥 카드 */
  .cc-premium-list .cc-list-card{
    max-width:100% !important;
    width:100% !important;
  }

}


/* ===============================
   리스트 (핵심)
================================= */

.cc-premium-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch; /* 🔥 중요 */
}

.cc-premium-list .cc-list-card{
  max-width:270px;   /* 🔥 핵심 */
  margin:0 auto;     /* 🔥 가운데 정렬 */

}

/* ===============================
   카드 (핵심 구조)
================================= */

.cc-premium-list .cc-list-card{
  display:flex;
  flex-direction:column; /* 🔥 핵심 */
  position: relative;

  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);

  cursor:pointer;
  transition:all .2s ease;
}

.cc-premium-list .cc-list-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,0.08);
}


/* ===============================
   썸네일
================================= */

.cc-card-thumb{
  position:relative;
  width:100%;
  height:180px;
  overflow:hidden;
}

.cc-card-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ===============================
   뱃지
================================= */

.cc-badge{
  position:absolute;
  top:10px;
  left:10px;
  background:#2563eb;
  color:#fff;
  font-size:12px;
  padding:4px 8px;
  border-radius:6px;
}

.cc-badge.gray{
  background:#9ca3af;
}

/* ===============================
   프리미엄 카드 (강조 스타일)
================================= */
.cc-list-card.premium{
  box-shadow: 0 10px 24px rgba(42,124,255,0.18);
}

.cc-list-card.premium::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:#2a7cff;
  z-index:2;
}

/* ===============================
   카드 본문 (핵심)
================================= */

.cc-card-body{
  display:flex;
  flex-direction:column;
  flex:1; /* 🔥 핵심 */
  padding:10px;
}


/* 🔥 제목 */
.cc-card-body h4{
  font-size:16px;
  font-weight:600;
  margin-bottom:6px;

  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* 🔥 지역 */
.cc-region{
  font-size:13px;
  color:#6b7280;
  margin-bottom:6px;
}


/* 🔥 설명 (높이 통일) */
.cc-desc{
  font-size:13px;
  color:#4b5563;
  margin-bottom:10px;
  line-height:1.4;

  display:-webkit-box;
  -webkit-line-clamp:2; /* 🔥 핵심 */
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* 🔥 평점 */
.cc-meta{
  font-size:13px;
  margin-bottom:10px;
}


/* ===============================
   버튼 영역 (핵심)
================================= */

.cc-card-actions{
  margin-top:auto; /* 🔥 핵심 (하단 고정) */
  display:flex;
  gap:6px;
  padding-top:12px; 
}


/* ===============================
   empty
================================= */

.cc-empty{
  text-align:center;
  padding:80px 20px;
}

.cc-empty-icon{
  font-size:40px;
  margin-bottom:10px;
}

.cc-empty h4{
  font-size:18px;
  font-weight:600;
  margin-bottom:8px;
}

.cc-empty-desc{
  color:#6b7280;
  margin-bottom:16px;
}


/* ===============================
   모바일
================================= */

@media (max-width:768px){

  .cc-section{
    padding:0 12px;   /* 🔥 핵심 추가 */
  }
  
  .cc-premium-list{
    grid-template-columns: 1fr;
    gap:16px;
  }

  .cc-card-thumb{
    aspect-ratio: 4 / 3;
    height:auto;
  }

  .cc-card-body{
    display:flex;
    flex-direction:column;
    height:100%;
  }

  .cc-card-actions{
    margin-top:auto;
  }

  .cc-card-actions .cc-btn-main{
    height:44px;        /* 🔥 높이 확보 */
    font-size:15px;     /* 🔥 글자 살짝 키움 */
    font-weight:600;
  }
  
  .cc-card-actions .cc-btn{
    flex:1;        /* 버튼 반반 */
    height:44px;   /* 높이 통일 */
    font-size:14px;
  }    
}


/* ===============================
   pagination
================================= */

.cc-pagination {
  text-align: center;
  margin-top: 30px;
}

.cc-pagination a {
  display: inline-block;
  margin: 0 4px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #374151;
  text-decoration: none;
  font-size: 14px;
}

.cc-pagination a.active {
  background: #2563eb;
  color: #fff;
}

.cc-pagination a:hover {
  background: #1e40af;
  color: #fff;
}



/* 🔥 리스트 페이지 전용 spacing */
.cc-list-page .cc-container{
  padding-left:12px;   /* 🔥 추가 */
  padding-right:12px;  /* 🔥 추가 */  
  padding-bottom:0px;  
}