/* 매물 대표 카드 (2026-09-09) — 규칙은 maemulcard.js, 모양은 여기
   9/6 GPT 카드(1200x630)와 같은 배치를 화면에서 그대로 그린다.
   자리는 원본 카드의 좌표를 그대로 옮겼다(1200 기준 px ÷ 12 = cqw).
   cqw = 카드 너비의 1%. 카드가 작아지면 글자도 같이 작아진다. */

.mcard{
  position:relative; width:100%; aspect-ratio:1200/630; overflow:hidden;
  container-type:inline-size; border-radius:.6rem;
  background:linear-gradient(100deg,var(--mc1) 0%,var(--mc2) 100%);
  font-family:Pretendard,'Pretendard Variable',-apple-system,'Malgun Gothic',sans-serif;
  -webkit-font-smoothing:antialiased; --tsz:5.8; --psz:3.7;
}
/* 배경에 얹는 옅은 원 두 개 */
.mcard::before,.mcard::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.mcard::before{width:41.7cqw;height:41.7cqw;right:-8cqw;top:-10cqw;background:rgba(255,255,255,.10)}
.mcard::after{width:35cqw;height:35cqw;left:-13cqw;bottom:-17cqw;background:rgba(255,255,255,.07)}

.mc-truck{
  position:absolute; right:3cqw; top:50%; transform:translateY(-47%);
  max-width:38.5cqw; max-height:35.3cqw; width:auto; height:auto;
  filter:drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.18));
}

.mc-in{position:absolute;inset:0;color:#fff}
.mc-in>*{position:absolute;left:5.8cqw}

.mc-kind{
  top:6cqw; background:rgba(0,0,0,.28); color:#fff;
  font-size:2.5cqw; font-weight:700; line-height:1;
  padding:1.3cqw 1.9cqw; border-radius:2.6cqw;
}
.mc-tt{top:12.6cqw;max-width:51cqw}
.mc-t1,.mc-t2{font-size:calc(var(--tsz) * 1cqw);font-weight:800;line-height:1.19;white-space:nowrap}
.mc-t1{color:#fff}
.mc-t2{color:#ffe278}
.mc-bar{top:27.8cqw;width:13.8cqw;height:1cqw;border-radius:.5cqw;background:rgba(255,255,255,.94)}
.mc-pay{top:30.2cqw;font-size:calc(var(--psz) * 1cqw);font-weight:800;color:#ffe050;line-height:1.2;white-space:nowrap}
.mc-pay-x{font-size:2.9cqw;color:rgba(255,255,255,.94)}
.mc-pills{top:36.2cqw;display:flex;gap:1.1cqw;flex-wrap:nowrap;overflow:hidden;max-width:53cqw}
.mc-pill{
  background:rgba(255,255,255,.94); color:#1e2950; font-size:2.15cqw; font-weight:800;
  line-height:1; padding:1.1cqw 1.4cqw; border-radius:2.3cqw; white-space:nowrap;
}
.mc-pill.on{background:#ffe050}
.mc-route{top:41.4cqw;font-size:2.15cqw;color:#d3f2ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52cqw}
.mc-foot{top:46.6cqw;font-size:2.33cqw;font-weight:600;color:rgba(255,255,255,.72);white-space:nowrap}

/* 마감 매물도 모양은 모집중과 같게 두고 색만 가라앉힌다 (사장님 규칙) */
.mcard.mc-done{filter:saturate(.7)}
.mcard.mc-done .mc-t2{color:#fff}

/* 목록의 작은 썸네일 — 잔글씨는 접고 큰 줄만 키운다 */
.mcard.mc-sm .mc-pills,.mcard.mc-sm .mc-route,.mcard.mc-sm .mc-foot{display:none}
.mcard.mc-sm .mc-kind{top:6.5cqw;font-size:3.4cqw;padding:1.7cqw 2.3cqw;border-radius:3.4cqw}
.mcard.mc-sm .mc-tt{top:16cqw}
.mcard.mc-sm .mc-t1,.mcard.mc-sm .mc-t2{font-size:calc(var(--tsz) * 1.16cqw)}
.mcard.mc-sm .mc-bar{top:35cqw;height:1.3cqw}
.mcard.mc-sm .mc-pay{top:38.6cqw;font-size:calc(var(--psz) * 1.16cqw)}
.mcard.mc-sm .mc-truck{max-width:32cqw;max-height:30cqw}

/* 색 12벌 — 매물 번호로 정해진다 (maemulcard.js 의 pal) */
.mc-p0{--mc1:#0f766e;--mc2:#2dd4bf}
.mc-p1{--mc1:#1d4ed8;--mc2:#60a5fa}
.mc-p2{--mc1:#b45309;--mc2:#f59e0b}
.mc-p3{--mc1:#6d28d9;--mc2:#a78bfa}
.mc-p4{--mc1:#0369a1;--mc2:#38bdf8}
.mc-p5{--mc1:#be185d;--mc2:#f472b6}
.mc-p6{--mc1:#15803d;--mc2:#4ade80}
.mc-p7{--mc1:#7c2d12;--mc2:#fb923c}
.mc-p8{--mc1:#0e7490;--mc2:#22d3ee}
.mc-p9{--mc1:#4338ca;--mc2:#818cf8}
.mc-p10{--mc1:#a16207;--mc2:#facc15}
.mc-p11{--mc1:#b91c1c;--mc2:#fb7185}