/**
 * widgets/real_estate/listing-mini — 좁은 칸용 매물 목록
 *
 * 사이드바(약 275px)를 기준으로 치수를 잡았다. 썸네일을 고정폭으로 두고
 * 본문만 늘어나게 해야, 건물명이 길어져도 줄이 흔들리지 않는다.
 */
.w-listing-mini {
    --w-listing-mini-thumb:  46px;
    --w-listing-mini-gap:    0.6rem;
    --w-listing-mini-fg:     var(--site-text, #1f2937);
    --w-listing-mini-muted:  var(--site-muted, #6b7280);
    --w-listing-mini-price:  var(--site-brand, #0f766e);
    --w-listing-mini-radius: 7px;

    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--w-listing-mini-gap);
}

.w-listing-mini__link {
    display: flex;
    align-items: center;
    gap: var(--w-listing-mini-gap);
    /* min-width:0 이 없으면 긴 건물명이 칼럼을 밀어낸다 */
    min-width: 0;
    color: var(--w-listing-mini-fg);
    text-decoration: none;
}

/* ── 썸네일 ─────────────────────────────────────────── */
.w-listing-mini__thumb {
    flex: 0 0 auto;
    width: var(--w-listing-mini-thumb);
    height: var(--w-listing-mini-thumb);
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--w-listing-mini-radius);
    background: var(--site-bg-soft, #f8fafc);
}

.w-listing-mini__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.w-listing-mini__noimg {
    font-size: 0.95rem;
    color: #cbd5e1;
}

/* ── 본문 ───────────────────────────────────────────── */
.w-listing-mini__body {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.w-listing-mini__title {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    /* 두 줄까지 보여 주고 그 이상은 자른다 — 한 줄로 자르면 동·호수가 사라진다 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 호수 — 하이픈에서 줄이 쪼개지지 않게 한 덩어리로 묶는다 ('#15-11' → '#15-' / '11' 방지) */
.w-listing-mini__unit {
    white-space: nowrap;
}

.w-listing-mini__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.w-listing-mini__price {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--w-listing-mini-price);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 상태 배지 ──────────────────────────────────────────
   활성(A)에는 배지를 달지 않는다. 정상 상태에 배지를 붙이면
   정작 눈에 띄어야 할 숨김·거래완료가 묻힌다. */
.w-listing-mini__status {
    flex: 0 0 auto;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
}

/* 숨김 — 회색. 되살릴 수 있는 상태다 */
.w-listing-mini__status.is-i { background: #f1f5f9; color: #64748b; }

/* 거래 완료 — 초록. tint 차이 50 이상으로 명암 4.5:1 을 넘긴다 */
.w-listing-mini__status.is-s,
.w-listing-mini__status.is-r { background: #ecfdf5; color: #047857; }

/* ── hover — 프로젝트 규칙(배경 #f1f5f9 / 텍스트 #64748b) ── */
.w-listing-mini__link:hover {
    text-decoration: none;
}

.w-listing-mini__link:hover .w-listing-mini__title {
    color: #64748b;
    text-decoration: underline;
}

/* ── 잘린 나머지 건수 ───────────────────────────────── */
.w-listing-mini__more {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    color: var(--w-listing-mini-muted);
    text-align: center;
}