/* 공개 캠페인 리스트 (views/user/campaigns.ejs 전용)
   이전 인라인 <style> 블록 + 새 요소 (마감 카운트다운, 가격 앵커, 업체명)
*/

.list-shell{max-width:1400px;margin:0 auto;padding:20px 24px 64px}
.site-modan .list-shell{max-width:100%;padding:20px 100px 64px}

/* 히어로 */
.hero{border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:16px;margin-bottom:14px;background:#fff}
.hero h1{margin:0;font-size:1.4rem;font-weight:900;color:#111827}
.hero p{margin:8px 0 0;color:#64748b;font-size:.86rem}

/* 상태 필터 탭 */
.status-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;padding:4px 0}
.stab{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid #e5e7eb;color:#475569;font-size:.86rem;font-weight:700;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.stab:hover{border-color:var(--brand);color:var(--brand)}
.stab-active{background:var(--brand);border-color:var(--brand);color:#fff}
.stab-active:hover{background:var(--brand);color:#fff;opacity:.92}
@media (max-width:640px){
  .status-tabs{gap:6px}
  .stab{height:34px;padding:0 12px;font-size:.8rem}
}

/* 필터 바 */
.filter{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:14px;margin-bottom:14px}
.filter-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(180px,1.2fr) auto;gap:10px}
.sel,.inp{width:100%;height:42px;border:1px solid #e5e7eb;border-radius:10px;padding:0 12px;font-size:.84rem}
.sel:focus,.inp:focus{outline:none;border-color:var(--brand)}
.btn{height:42px;border:0;border-radius:10px;background:var(--brand);color:#fff;font-weight:800;padding:0 16px;cursor:pointer}
.btn:hover{opacity:.92}

/* 리스트 헤더 */
.head{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}
.head h2{margin:0;font-size:1.02rem;font-weight:900;color:#111827}
.head span{font-size:.8rem;color:#9ca3af}

/* 카테고리 가이드 */
.category-guide{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:14px;margin-bottom:12px}
.category-guide h3{margin:0 0 8px;font-size:.96rem;font-weight:900;color:#111827}
.category-guide .guide-body{color:#475569;font-size:.83rem;line-height:1.6;white-space:pre-line}

/* 그리드 */
.grid{display:grid;gap:12px}
.cols-3{grid-template-columns:repeat(5,minmax(0,1fr))}
.site-modan .cols-3{grid-template-columns:repeat(7,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(5,minmax(0,1fr))}
.site-modan .cols-4{grid-template-columns:repeat(7,minmax(0,1fr))}
.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.site-modan .cols-5{grid-template-columns:repeat(7,minmax(0,1fr))}

/* 카드 */
/* Airbnb 시그니처 패턴: 카드 위로 떠오름 + 사진 살짝 확대 + 부드러운 멀티레이어 shadow */
.card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);border-color:rgba(0,0,0,.1)}
.thumb{aspect-ratio:1/1;position:relative;background:linear-gradient(135deg,var(--brand-light),#fff);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.card:hover .thumb img{transform:scale(1.04)}
.badges{position:absolute;top:8px;left:8px;display:flex;gap:6px;flex-wrap:wrap}
.badge{height:22px;padding:0 8px;border-radius:999px;font-size:.64rem;font-weight:900;background:rgba(255,255,255,.95);color:#111827;display:inline-flex;align-items:center}
.badge.primary{background:var(--brand);color:#fff}

/* 마감 D-N 배지 (우측 상단) */
.deadline-badge{position:absolute;top:8px;right:8px;padding:4px 10px;border-radius:999px;font-size:.66rem;font-weight:900;background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(4px)}
.deadline-badge.urgent{background:#dc2626}
.deadline-badge.closed{background:#6b7280}

/* 카드 본문 */
.body{padding:12px;min-width:0}
.biz-row{font-size:.68rem;color:#6b7280;font-weight:700;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.title{margin-bottom:8px;min-height:2.8em;line-height:1.45;font-size:.84rem;font-weight:800;color:#111827;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.promo{display:block;width:100%;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 9px;border-radius:999px;margin-bottom:6px;font-size:.71rem;background:var(--brand-light);color:var(--brand-deep);font-weight:700}
.price{font-size:.68rem;color:#059669;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:3px}
.price strong{color:#047857}
.meta{display:flex;justify-content:space-between;font-size:.72rem;color:#6b7280}
.meta-progress{display:flex;align-items:center;gap:4px}
.meta-progress strong{color:#111827;font-weight:800}

/* 페이지네이션 */
.pages{display:flex;justify-content:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.pages a{min-width:38px;height:38px;padding:0 12px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:#fff;border:1px solid #e5e7eb;color:#475569;font-size:.8rem;font-weight:700;transition:all .12s}
.pages a:hover{border-color:var(--brand);color:var(--brand)}
.pages a.active{background:var(--brand);border-color:var(--brand);color:#fff}
.pages a.active:hover{color:#fff}
.pages .dots{display:inline-flex;align-items:center;padding:0 4px;color:#9ca3af}

/* 빈 상태 */
.empty{text-align:center;padding:60px 20px;border:1px solid rgba(0,0,0,.06);border-radius:16px;background:#fff}
.empty-icon{font-size:48px;margin-bottom:14px}
.empty h3{font-size:1.1rem;font-weight:800;color:#111827;margin:0 0 8px}
.empty p{color:#64748b;font-size:.88rem;margin:0 0 20px}
.empty-btn{display:inline-block;padding:12px 26px;background:var(--brand);color:#fff;border-radius:10px;font-size:.88rem;font-weight:800;text-decoration:none;transition:opacity .12s}
.empty-btn:hover{opacity:.92}

/* ── 반응형 ── */
@media (max-width:1400px){
  .cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:1200px){
  .filter-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cols-5{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .list-shell{padding:12px 16px 56px}
  .site-modan .list-shell{padding:12px 16px 56px}
  .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols-5,.cols-4,.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-modan .cols-5,.site-modan .cols-4,.site-modan .cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero{padding:14px;border-radius:12px}
  .hero h1{font-size:1.15rem}
  .body{padding:10px}
  .title{font-size:.8rem}
  .promo{font-size:.68rem}
  .meta{font-size:.68rem}
  .pages{gap:5px}
  .pages a{min-width:32px;height:32px;font-size:.76rem}
}
@media (max-width:640px){
  .list-shell{padding:10px 12px 56px}
  .site-modan .list-shell{padding:10px 12px 56px}
  .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-row .inp,.filter-row .btn{grid-column:1/-1}
  .sel,.inp{height:38px;font-size:.8rem}
  .btn{height:38px;font-size:.82rem;width:100%}
  .hero{padding:12px}
  .hero h1{font-size:1.05rem}
  .hero p{font-size:.78rem}
  .head h2{font-size:.9rem}
  .head span{font-size:.74rem}
  .pages{gap:4px}
  .pages a{min-width:30px;height:30px;padding:0 8px;font-size:.72rem;border-radius:8px}
}
@media (max-width:480px){
  .cols-5,.cols-4,.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-modan .cols-5,.site-modan .cols-4,.site-modan .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{gap:10px}
  .title{font-size:.78rem;min-height:2.6em}
  .badge{font-size:.6rem;height:20px}
  .deadline-badge{font-size:.6rem;padding:3px 8px}
}