/**
 * widgets/real_estate/listing-scroll — 무한 스크롤 표시자
 *
 * 색은 변수로만 노출한다. 이 위젯은 매물 격자 **아래**에만 그려지므로
 * 격자 자체의 레이아웃(.w-collection__items)에는 손대지 않는다.
 */
.w-listing-scroll {
    --w-listing-scroll-muted:  var(--site-muted, #6b7280);
    --w-listing-scroll-border: var(--site-border, #e5e7eb);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0 0.25rem;
}

/*
 * 🔴🔴 hidden 속성이 이기게 만든다 — 이것이 없으면 무한 스크롤이 고장 난 것처럼 보인다.
 *
 *    브라우저 기본 스타일 `[hidden] { display: none }` 은 **UA 스타일시트**라 우선순위가
 *    가장 낮다. 아래에서 `.w-listing-scroll__loading { display: flex }` 처럼 클래스로
 *    display 를 주는 순간 그것이 이겨서, JS 가 `el.hidden = true` 로 감춰도 화면에 남는다.
 *
 *    실측 증상: 매물을 끝까지 다 불러왔는데도 "불러오는 중…" 과 [더 보기] 버튼이
 *    나란히 남아 있었다. 로직은 정상이었고(sentinel 제거·끝 문구 표시 모두 동작),
 *    순전히 이 CSS 우선순위 문제였다.
 */
.w-listing-scroll [hidden] { display: none !important; }

/*
 * 🔴 sentinel 은 높이가 있어야 한다. height:0 이면 브라우저에 따라
 *    IntersectionObserver 가 교차를 보고하지 않아 스크롤이 조용히 멈춘다.
 */
.w-listing-scroll__sentinel {
    width: 100%;
    height: 1px;
}

.w-listing-scroll__loading,
.w-listing-scroll__end,
.w-listing-scroll__error {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--w-listing-scroll-muted);
    text-align: center;
}

.w-listing-scroll__loading { display: flex; align-items: center; gap: 0.4rem; }

.w-listing-scroll__end {
    padding-top: 0.75rem;
    border-top: 1px solid var(--w-listing-scroll-border);
    width: 100%;
}

.w-listing-scroll__fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* JS 가 꺼진 사람에게만 보이는 링크 — 그 화면에서는 아래가 영원히 비어 있다 */
.w-listing-scroll__noscript {
    display: inline-block;
    padding: 0.45rem 1rem;
    border: 1px solid var(--w-listing-scroll-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--site-brand, #0f766e);
    text-decoration: none;
}

.w-listing-scroll__noscript:hover { background: #f1f5f9; color: #64748b; }