@charset "utf-8";
/*═══════════════════════════════════════════════
  매물 목록 — theme/map/skin/board/property-rental/list.css
  · .pl- 프리픽스로 style.css 와 충돌 없음
═══════════════════════════════════════════════*/
.pl {
    --pl-gold:      #b7a389;
    --pl-gold-deep: #98856c;
    --pl-ink:       #23201d;
    --pl-body:      #5c5956;
    --pl-mute:      #8d8781;
    --pl-line:      #e7e2da;
    --pl-fill:      #f7f5f2;

    width: 100% !important;
    color: var(--pl-ink);
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

.pl .con { max-width: 1400px; margin: 0 auto; }

/*═══════════════ 상단 배너 ═══════════════
  메인처럼 헤더가 배너 위에 겹쳐 보이도록,
  배너가 있는 페이지에서는 헤더를 absolute 로 띄웁니다.
  (#header 기본값은 position:relative, padding 30px 5%)
═══════════════════════════════════════════*/
body:has(.pl-hero) #header {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
}

/* 배너 높이·배경은 default.css 의 공통 규칙(.pl-hero)에서 관리합니다 */

.pl-hero__crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.875rem;
}

.pl-hero__crumb a { color: rgba(255, 255, 255, 0.55); }
.pl-hero__crumb a:hover { color: #fff; }
.pl-hero__crumb span { color: var(--pl-gold); }

.pl-hero__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.pl-hero__title {
    margin: 0 0 12px;
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--pl-gold);
    line-height: 1.2;
}

.pl-hero__desc {
    max-width: 640px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.6;
    word-break: keep-all;
}

.pl-hero__map {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    padding: 18px 24px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    transition: all 0.2s;
}

.pl-hero__map:hover {
    background: var(--pl-gold-deep);
    border-color: var(--pl-gold-deep);
}

.pl-hero__map > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pl-gold);
    color: #23201d;
    font-size: 1.25rem;
}

.pl-hero__map b { display: block; font-size: 1rem; font-weight: 600; }
.pl-hero__map em {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.6);
    font-style: normal;
    font-size: 0.8125rem;
}

/*═══════════════ 분류 탭 ═══════════════*/
.pl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 22px 0;
    border-bottom: 1px solid var(--pl-line);
}

.pl-tabs a {
    padding: 10px 18px;
    border-radius: 999px;
    color: var(--pl-body);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.18s;
}

.pl-tabs a:hover { background: var(--pl-fill); color: var(--pl-gold-deep); }

.pl-tabs a.is-active {
    background: var(--pl-ink);
    color: #fff;
    font-weight: 600;
}

/* 전체매물보기 — 탭 우측 끝 */
.pl-tabs .pl-tabs__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    border: 1px solid var(--pl-gold);
    color: var(--pl-gold-deep);
    font-weight: 600;
}

.pl-tabs .pl-tabs__all:hover {
    background: var(--pl-gold-deep);
    border-color: var(--pl-gold-deep);
    color: #fff;
}

.pl-tabs .pl-tabs__all.is-active {
    background: var(--pl-gold-deep);
    border-color: var(--pl-gold-deep);
    color: #fff;
}

/*═══════════════ 상세 검색 ═══════════════*/
.pl-filter {
    margin: 18px 0 0;
    padding: 18px 20px 20px;
    border: 1px solid var(--pl-line);
    border-radius: 12px;
    background: var(--pl-fill);
}

/* 상세 검색 제목을 없앴으므로 상태 표시만 남습니다 */
.pl-filter__state {
    margin: 0;
    min-height: 1px;
}

.pl-filter__state b {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--pl-gold-deep);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.pl-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pl-filter__head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pl-ink);
}

.pl-filter__head h2 i { color: var(--pl-gold-deep); }

.pl-filter__head h2 b {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--pl-gold-deep);
    color: #fff;
    font-size: 0.75rem;
}



/* 모바일 전용 열기 버튼 */
.pl-filter__toggle { display: none; }

/*───────── 선택형 줄 ─────────*/
/* 기본(모바일) — flex 로 감싸 내려가게 */
.pl-filter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pl-filter__row + .pl-filter__row { margin-top: 12px; }

/*───────────────────────────────────────────────
  PC — 6칸 그리드
  두 줄을 같은 격자로 잡아 위아래 폭이 정확히 맞습니다.
    1줄 : 임대/매매 · 지역 · 시군구 · 읍면동 · 층수 · 면적
    2줄 : 보증금 · 임대료 · 매매가 · 번지건물명(2칸) · 버튼
───────────────────────────────────────────────*/
@media (min-width: 901px) {
    /* 둘째 줄 : 금액 3칸 + 번지·건물명 2칸 + 버튼 1칸 = 6칸 */
    .pl .pl-filter__form .pl-filter__row--range .pl-fld--text { grid-column: span 2; }

    /* display:flex 를 확실히 덮도록 선택자 무게를 올립니다 */
    .pl .pl-filter__form .pl-filter__row {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        align-items: end;
        gap: 8px;
    }
}

/*───────── 선택형 줄 ─────────*/
.pl-filter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pl-filter__row + .pl-filter__row { margin-top: 12px; }

.pl-fld {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 0;
    min-width: 120px;
}



.pl-fld > span {
    color: var(--pl-mute);
    font-size: 0.75rem;
    font-weight: 500;
}

.pl .pl-fld select,
.pl .pl-fld input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--pl-line);
    border-radius: 8px;
    background: #fff;
    color: var(--pl-ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

.pl .pl-fld select:focus,
.pl .pl-fld input:focus {
    border-color: var(--pl-gold);
    outline: none;
}

/* 번지·건물명 — 직접 입력이라 넓게 */
.pl-fld--text { flex: 1 1 100%; }

@media (min-width: 901px) {
    /* 그리드에서는 flex 값 대신 칸을 그대로 씁니다 */
    .pl-filter__row > .pl-fld,
    .pl-filter__row > .pl-range { min-width: 0; }
    .pl-fld--text { min-width: 0; }
}

/*───────── 범위 슬라이더 ─────────*/
.pl-filter__row--range { align-items: flex-end; }

/* 둘째 줄 : 1:1:1:1:2 — 마지막 직접입력이 두 칸
   (.pl-filter__row 의 6칸 규칙보다 뒤에 와야 적용됩니다) */
@media (min-width: 901px) {
    .pl .pl-filter__form .pl-filter__row--range {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr);
        align-items: end;
    }
}

.pl-range {
    position: relative;
    flex: 1 1 0;
    min-width: 120px;
}

/* 항목명을 버튼 위에 올려 선택형과 높이를 맞춥니다 */
.pl-range::before {
    content: attr(data-name);
    display: block;
    margin-bottom: 5px;
    color: var(--pl-mute);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.pl-range__label { display: none; }

.pl-range__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--pl-line);
    border-radius: 8px;
    background: #fff;
    color: var(--pl-ink);
    font-size: 0.9375rem;
    text-align: left;
    transition: all 0.16s;
}

.pl-range__btn:hover { border-color: var(--pl-gold); }

.pl-range.is-active .pl-range__btn {
    border-color: var(--pl-gold-deep);
    background: #fffdfa;
}

.pl-range__label {
    flex: 0 0 auto;
    color: var(--pl-mute);
    font-size: 0.75rem;
}

.pl-range__value {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-range.is-active .pl-range__value { color: var(--pl-gold-deep); }

.pl-range__btn i {
    flex: 0 0 auto;
    color: var(--pl-mute);
    transition: transform 0.2s;
}

.pl-range__btn[aria-expanded="true"] i { transform: rotate(180deg); }

/* 펼침 패널 */
.pl-range__panel {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 40;
    width: 320px;
    max-width: calc(100vw - 40px);
    padding: 22px;
    border: 1px solid var(--pl-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(35, 32, 29, 0.16);
}

.pl-range__panel[hidden] { display: none; }

/* 오른쪽에 가까운 항목은 패널을 오른쪽 정렬로 */
@media (min-width: 901px) {
    .pl-filter__row > .pl-range:nth-last-child(-n+2) .pl-range__panel { left: auto; right: 0; }
}

.pl-range__title {
    margin-bottom: 14px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--pl-ink);
}

.pl-range__now {
    margin-bottom: 18px;
    color: var(--pl-mute);
    font-size: 0.75rem;
}

.pl-range__now-txt {
    display: block;
    margin-top: 3px;
    color: var(--pl-gold-deep);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* 두 개의 range 를 겹쳐 범위 슬라이더로 */
.pl-range__slider {
    position: relative;
    height: 24px;
    margin-bottom: 10px;
}

.pl-range__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 5px;
    transform: translateY(-50%);
    border-radius: 3px;
    background: #e7e2da;
}

.pl-range__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    background: var(--pl-gold);
}

.pl .pl-range__input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    pointer-events: none;      /* 손잡이만 잡히도록 */
    appearance: none;
    -webkit-appearance: none;
}

.pl .pl-range__input::-webkit-slider-thumb {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--pl-gold-deep);
    box-shadow: 0 2px 6px rgba(35, 32, 29, 0.25);
    cursor: grab;
    appearance: none;
    -webkit-appearance: none;
}

.pl .pl-range__input::-webkit-slider-thumb:active { cursor: grabbing; }

.pl .pl-range__input::-moz-range-thumb {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--pl-gold-deep);
    box-shadow: 0 2px 6px rgba(35, 32, 29, 0.25);
    cursor: grab;
}

.pl .pl-range__input::-moz-range-track { background: none; border: 0; }

.pl-range__minmax {
    display: flex;
    justify-content: space-between;
    color: var(--pl-body);
    font-size: 0.8125rem;
}

.pl-range__help {
    margin: 16px 0 18px;
    color: var(--pl-mute);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
}

.pl-range__act {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 8px;
}

.pl .pl-range__reset,
.pl .pl-range__apply {
    height: 44px;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    transition: all 0.16s;
}

.pl .pl-range__reset {
    border: 1px solid var(--pl-line);
    background: #fff;
    color: var(--pl-body);
}

.pl .pl-range__reset:hover { border-color: var(--pl-gold); color: var(--pl-gold-deep); }

.pl .pl-range__apply {
    border: 0;
    background: var(--pl-gold-deep);
    color: #fff;
}

.pl .pl-range__apply:hover { background: var(--pl-ink); }

/*───────── 검색·초기화 ─────────*/
/* 검색·초기화 — 입력칸 아래 우측 정렬 */
.pl-filter__act {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.pl-filter__submit {
    height: 44px;
    padding: 0 30px;
    border: 0;
    border-radius: 8px;
    background: var(--pl-gold-deep);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    transition: background 0.18s;
}

.pl-filter__submit:hover { background: var(--pl-ink); }

.pl .pl-filter__reset {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--pl-line);
    border-radius: 8px;
    background: #fff;
    color: var(--pl-body);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.pl .pl-filter__reset:hover { border-color: var(--pl-gold); color: var(--pl-gold-deep); }

/*═══════════════ 관리 버튼 ═══════════════*/
.pl-admin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

.pl-admin__btns { display: flex; gap: 8px; margin-left: auto; }

.pl .pl-abtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--pl-line);
    border-radius: 8px;
    background: #fff;
    color: var(--pl-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    transition: all 0.18s;
}

.pl .pl-abtn:hover { border-color: var(--pl-gold); color: var(--pl-gold-deep); }

.pl .pl-abtn--primary {
    border-color: var(--pl-gold-deep);
    background: var(--pl-gold-deep);
    color: #fff;
}

.pl .pl-abtn--primary:hover { background: var(--pl-ink); border-color: var(--pl-ink); color: #fff; }

.pl-bulk { display: flex; gap: 8px; margin: 20px 0; }
.pl-checkall { margin: 18px 0 10px; color: var(--pl-body); font-size: 0.875rem; }

/*═══════════════ 섹션 ═══════════════*/
.pl-sec { margin-top: 46px; }

.pl-sec__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pl-sec__title {
    position: relative;
    margin: 0;
    padding-left: 16px;
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--pl-ink);
    line-height: 1.3;
}

.pl-sec__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.16em;
    width: 5px;
    height: 0.88em;
    border-radius: 3px;
    background: var(--pl-gold);
}

.pl-sec__util {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* 좌우 화살표 — 카드 이미지 양옆, JS 가 top 을 이미지 중앙에 맞춥니다 */
.pl-carousel {
    position: relative;
    margin-top: 20px;
}

.pl .pl-nav {
    position: absolute;
    top: 120px;                 /* JS 로 이미지 중앙에 재계산 */
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--pl-line);
    border-radius: 50%;
    background: #fff;
    color: var(--pl-ink);
    font-size: 1.25rem;
    box-shadow: 0 4px 14px rgba(35, 32, 29, 0.14);
    transform: translateY(-50%);
    transition: background 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s;
}

.pl .pl-nav--prev { left: -22px; }
.pl .pl-nav--next { right: -22px; }

.pl .pl-nav:hover:not(:disabled) {
    border-color: var(--pl-gold-deep);
    background: var(--pl-gold-deep);
    color: #fff;
}

.pl .pl-nav:disabled {
    opacity: 0.25;
    cursor: default;
    box-shadow: none;
}

.pl-sec.is-single .pl-nav { display: none; }

.pl-sec__more {
    color: var(--pl-gold-deep);
    font-size: 0.9375rem;
    font-weight: 600;
}

.pl-sec__more:hover { text-decoration: underline; }

.pl-sec__desc {
    margin: 8px 0 0 16px;
    color: var(--pl-body);
    font-size: 0.9375rem;
    word-break: keep-all;
}

/*═══════════════ 캐러셀 트랙 ═══════════════*/
.pl-track {
    --pl-per-view: 4;
    --pl-gap: 24px;
    overflow: hidden;
}

.pl-track__inner {
    display: flex;
    gap: var(--pl-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pl-track__inner > .pl-card {
    flex: 0 0 calc((100% - (var(--pl-per-view) - 1) * var(--pl-gap)) / var(--pl-per-view));
}

/*═══════════════ 그리드 (분류 선택 시) ═══════════════*/
.pl-head {
    margin: 40px 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pl-line);
}

.pl-head__title {
    position: relative;
    margin: 0 0 8px;
    padding-left: 16px;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.3;
}

.pl-head__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    width: 5px;
    height: 0.85em;
    border-radius: 3px;
    background: var(--pl-gold);
}

.pl-head__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-left: 16px;
}

.pl-head__desc { color: var(--pl-body); font-size: 0.9375rem; word-break: keep-all; }

.pl-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

/*═══════════════ 카드 ═══════════════*/
.pl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pl-card__check { position: absolute; left: 12px; top: 12px; z-index: 3; }
.pl-card__link { display: block; color: inherit; }

.pl-card__thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 14px;
    border-radius: 4px;
    background: var(--pl-fill) center / cover no-repeat;
    overflow: hidden;
}

.pl-card__thumb em {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--pl-mute);
    font-style: normal;
    font-weight: 600;
}

.pl-card__new {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 4px 9px;
    border-radius: 3px;
    background: var(--pl-gold-deep);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
}

.pl-card__link:hover .pl-card__thumb { opacity: 0.9; }

/* 카드 내부를 세로 flex 로 잡아 관심매물 버튼을 항상 맨 아래에 붙입니다 */
.pl-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.pl-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 태그 — 최대 3개, 갈색 박스
   비어 있어도 한 줄 높이를 유지해 아래 요소가 위로 붙지 않게 합니다 */
.pl-card__tags {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
    min-height: 24px;
    margin-bottom: 9px;
}

.pl-card__tags em {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid #d9cbb6;
    border-radius: 3px;
    background: var(--pl-fill);
    color: var(--pl-gold-deep);
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.pl-card__title {
    display: block;
    margin-bottom: 5px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pl-ink);
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.pl-card__link:hover .pl-card__title { text-decoration: underline; }

/* 주소 */
.pl-card__addr {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-height: 1.5em;
    margin-bottom: 12px;
    color: var(--pl-body);
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: keep-all;
}

.pl-card__addr i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--pl-gold);
    font-size: 0.9375rem;
}

/* 전용면적 · 층수 — 위아래 구분선 사이 */
.pl-card__spec {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 1.5em;
    padding: 11px 0;
    border-top: 1px solid var(--pl-line);
    color: var(--pl-mute);
    font-size: 0.875rem;
    line-height: 1.5;
}

.pl-card__spec em {
    font-style: normal;
    white-space: nowrap;
}

.pl-card__spec b {
    color: var(--pl-ink);
    font-weight: 700;
}

/* 구분 막대 */
.pl-card__spec > i {
    width: 1px;
    height: 11px;
    background: var(--pl-line);
}

/* 금액 */
.pl-card__price {
    display: block;
    margin-top: auto;          /* 카드 높이가 달라도 구분선 위치가 맞습니다 */
    padding-top: 12px;
    border-top: 1px solid var(--pl-line);
}

.pl-card__plabel {
    display: block;
    margin-bottom: 5px;
    color: var(--pl-gold);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.pl-card__pval {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 1.6em;
}

.pl-card__pval > i {
    font-style: normal;
    color: var(--pl-line);
}

.pl-card__deposit {
    color: var(--pl-body);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.pl-card__deposit b {
    color: var(--pl-ink);
    font-size: 1.0625rem;
    font-weight: 700;
}

.pl-card__rent {
    color: var(--pl-body);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.pl-card__rent b {
    color: var(--pl-gold-deep);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.pl .pl-card__wish {
    flex: 0 0 auto;
    width: 100%;
    height: 40px;
    margin: 14px 0 0;
    padding: 0;
    border: 1px solid var(--pl-line);
    border-radius: 4px;
    background: #fff;
    color: var(--pl-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    transition: all 0.18s;
}

.pl .pl-card__wish:hover {
    border-color: var(--pl-gold);
    background: var(--pl-fill);
    color: var(--pl-gold-deep);
}

.pl .pl-card__wish.active {
    border-color: var(--pl-gold-deep);
    background: var(--pl-gold-deep);
    color: #fff;
}

.pl-empty {
    grid-column: 1 / -1;
    padding: 70px 20px;
    border: 1px dashed var(--pl-line);
    border-radius: 8px;
    color: var(--pl-mute);
    text-align: center;
}

/*═══════════════ 진행 순서 ═══════════════*/
.pl-steps {
    margin-top: 70px;
    padding: 40px;
    border: 1px solid var(--pl-line);
    border-radius: 12px;
    background: var(--pl-fill);
}

.pl-steps__title {
    margin: 0 0 28px;
    font-size: 1.375rem;
    font-weight: 700;
}

.pl-steps__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pl-steps__list li {
    position: relative;
    padding: 22px 16px;
    border: 1px solid var(--pl-line);
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.pl-steps__list li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 50%;
    z-index: 2;
    width: 12px;
    height: 1px;
    background: var(--pl-gold);
}

.pl-step__no {
    display: block;
    margin-bottom: 10px;
    color: var(--pl-gold);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.pl-steps__list li > i {
    display: block;
    margin-bottom: 8px;
    color: var(--pl-gold-deep);
    font-size: 1.5rem;
}

.pl-steps__list li strong {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9375rem;
    font-weight: 700;
}

.pl-steps__list li em {
    display: block;
    color: var(--pl-mute);
    font-style: normal;
    font-size: 0.75rem;
    line-height: 1.5;
    word-break: keep-all;
}

/*═══════════════ 하단 CTA ═══════════════*/
.pl-cta {
    margin: 60px 0 70px;
    text-align: center;
}

.pl-cta__copy {
    margin-bottom: 26px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pl-ink);
    word-break: keep-all;
}

.pl-cta__btns {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.pl .pl-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    height: 56px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 1.0625rem;
    font-weight: 700;
    justify-content: center;
    transition: all 0.2s;
}

.pl .pl-cta__btn--gold { background: var(--pl-gold-deep); color: #fff; }
.pl .pl-cta__btn--gold:hover { background: var(--pl-ink); }
.pl .pl-cta__btn--dark { background: var(--pl-ink); color: #fff; }
.pl .pl-cta__btn--dark:hover { background: var(--pl-gold-deep); }

/*═══════════════ 반응형 ═══════════════*/
@media (max-width: 1440px) {
    .pl .con { max-width: 92%; }
    /* 여백이 부족하면 카드 위로 살짝 겹쳐 배치 */
    .pl .pl-nav--prev { left: -14px; }
    .pl .pl-nav--next { right: -14px; }
}

@media (max-width: 1100px) {
    .pl .pl-nav { width: 38px; height: 38px; font-size: 1.125rem; }
    .pl .pl-nav--prev { left: 6px; }
    .pl .pl-nav--next { right: 6px; }
}

@media (max-width: 1280px) {
    .pl-track { --pl-per-view: 3; --pl-gap: 20px; }
    .pl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .pl-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .pl-steps__list li:not(:last-child)::after { display: none; }
}

@media (max-width: 1024px) {
    .pl-hero__row { flex-direction: column; align-items: flex-start; gap: 24px; }
    .pl-hero__title { font-size: 2.125rem; }
    .pl-hero__map { width: 100%; }
}

@media (max-width: 900px) {
    /* 모바일 — 상세검색을 접어 둡니다 */
    .pl-filter__toggle {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        height: 36px;
        padding: 0 14px;
        border: 1px solid var(--pl-line);
        border-radius: 999px;
        background: #fff;
        color: var(--pl-body);
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .pl-filter__toggle i { transition: transform 0.2s; }
    .pl-filter__toggle[aria-expanded="true"] i { transform: rotate(180deg); }

    .pl-filter.is-collapsed { padding-bottom: 18px; }
    .pl-filter.is-collapsed .pl-filter__fields { display: none; }
    .pl-filter.is-collapsed .pl-filter__act { display: none; }

    /* 상세 검색 제목을 없앴으므로 상태 표시만 남습니다 */
    .pl-filter__state {
        margin: 0;
        min-height: 1px;
    }

    .pl-filter__state b {
        padding: 3px 9px;
        border-radius: 999px;
        background: var(--pl-gold-deep);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .pl-filter__head { margin-bottom: 0; }

    .pl-fld,
    .pl-range { flex: 1 1 calc(50% - 5px); min-width: 0; }

    .pl-filter__act { margin-top: 12px; }
    .pl-filter__submit { flex: 1; padding: 0; }
    .pl .pl-filter__reset { flex: 0 0 auto; }

    .pl-range__panel { width: calc(100vw - 48px); }

    .pl-track { --pl-per-view: 2; }
    .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-sec__title, .pl-head__title { font-size: 1.375rem; }
    .pl-steps { padding: 28px 20px; }
}

@media (max-width: 560px) {
    .pl-filter { padding: 16px 14px 18px; }
    .pl-range__panel { left: 0; width: calc(100vw - 40px); padding: 18px; }
    .pl-track { --pl-per-view: 1; --pl-gap: 16px; }
    .pl-grid { grid-template-columns: 1fr; gap: 26px; }
    .pl-hero__title { font-size: 1.75rem; }
    .pl-tabs .pl-tabs__all { margin-left: 0; width: 100%; justify-content: center; }
    .pl-sec { margin-top: 34px; }
    .pl-sec__head { flex-wrap: wrap; }
    .pl-sec__desc { margin-left: 16px; }
    .pl-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-cta__copy { font-size: 1.25rem; }
    .pl-cta__btns { flex-direction: column; }
    .pl .pl-cta__btn { width: 100%; }
    .pl-filter__form { padding: 0; }
    .pl-filter__submit { flex: 1 1 100%; padding: 0; }
}


/*───────────────────────────────────────────────
  매물상태 뱃지 (판매중은 표시하지 않음)
───────────────────────────────────────────────*/
.pl-card__status {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    padding: 5px 11px;
    border-radius: 3px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pl-card__status[data-status="거래완료"] { background: #6b6560; }
.pl-card__status[data-status="보류"]   { background: #c0483f; }

/* 거래완료·보류는 관리자만 보이므로 카드를 흐리게 해 구분 */
.pl-card:has(.pl-card__status[data-status="거래완료"]) .pl-card__thumb,
.pl-card:has(.pl-card__status[data-status="보류"]) .pl-card__thumb {
    filter: grayscale(0.85);
    opacity: 0.75;
}


/*───────────────────────────────────────────────
  매물상태 필터 버튼
───────────────────────────────────────────────*/
.pl-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 16px 0 0;
}

.pl-status a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--pl-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pl-body);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.18s;
}

.pl-status a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pl-mute);
}

.pl-status a:first-child::before { display: none; }
.pl-status a[data-status="판매중"]::before   { background: #2f7a5b; }
.pl-status a[data-status="거래완료"]::before { background: #6b6560; }
.pl-status a[data-status="보류"]::before     { background: #c0483f; }

.pl-status a:hover {
    border-color: var(--pl-gold);
    background: var(--pl-fill);
    color: var(--pl-gold-deep);
}

.pl-status a.is-active {
    border-color: var(--pl-ink);
    background: var(--pl-ink);
    color: #fff;
    font-weight: 600;
}

.pl-status a.is-active::before { background: #fff; }

.pl-status__note {
    margin-left: auto;
    color: var(--pl-mute);
    font-size: 0.8125rem;
}

@media (max-width: 780px) {
    .pl-status { gap: 5px; }
    .pl-status a { height: 34px; padding: 0 12px; font-size: 0.8125rem; }
    .pl-status__note { flex: 1 1 100%; margin-left: 0; }
}


/*───────────────────────────────────────────────
  추천 매물
───────────────────────────────────────────────*/
.pl-card__rec {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 10px;
    border-radius: 3px;
    background: var(--pl-gold-deep);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.pl-card__rec i { font-size: 0.8125rem; }

/* 추천 섹션 제목에 별 표시 */
.pl-sec[data-key="recommend"] .pl-sec__title::before {
    content: "\e9a3";
    font-family: 'xeicon';
    margin-right: 6px;
    color: var(--pl-gold);
}

/*───────────────────────────────────────────────
  섹션 전체보기 — 그 자리에서 8개 펼치기
───────────────────────────────────────────────*/
.pl-sec__util {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pl .pl-sec__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--pl-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pl-body);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.18s;
}

.pl .pl-sec__more:hover {
    border-color: var(--pl-gold);
    color: var(--pl-gold-deep);
}

.pl .pl-sec__more i { transition: transform 0.2s; }
.pl .pl-sec__more[aria-expanded="true"] i { transform: rotate(180deg); }

.pl .pl-sec__link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--pl-mute);
    font-size: 0.8125rem;
    font-weight: 500;
}

.pl .pl-sec__link:hover { color: var(--pl-gold-deep); }

/* 펼침 상태 — 캐러셀을 해제하고 격자로 */
.pl-sec.is-expanded .pl-track { overflow: visible; }

.pl-sec.is-expanded .pl-track__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    transform: none !important;
}

.pl-sec.is-expanded .pl-track__inner > * {
    flex: none;
    width: auto;
}

.pl-sec.is-expanded .pl-nav { display: none; }

@media (max-width: 1024px) {
    .pl-sec.is-expanded .pl-track__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 900px) {
    .pl-sec.is-expanded .pl-track__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .pl-sec.is-expanded .pl-track__inner { grid-template-columns: 1fr; gap: 26px; }
}

/*═══════════════════════════════════════════════
  좁은 화면 마무리 — 필터를 짧고 촘촘하게

  · 선택칸을 두 칸씩 배치해 세로 길이를 줄입니다.
  · 손가락으로 끄는 금액·면적 상자는 화면 아래에서
    올라오는 시트로 띄워 어디서 열어도 잘리지 않습니다.
═══════════════════════════════════════════════*/
@media (max-width: 900px) {

    /* 추천매물보기 — 줄이 바뀔 때 위가 붙지 않도록 */
    .pl-tabs { gap: 6px; padding: 18px 0; }
    .pl-tabs .pl-tabs__all { margin-top: 6px; }

    /*───────── 필터 안쪽 ─────────*/
    .pl-filter { padding: 14px 16px 16px; }

    .pl .pl-filter__form .pl-filter__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .pl-filter__row + .pl-filter__row { margin-top: 8px; }

    .pl .pl-filter__form .pl-fld,
    .pl .pl-filter__form .pl-range { flex: none; min-width: 0; }

    /* 번지·건물명은 한 줄을 다 씁니다 */
    .pl .pl-filter__form .pl-fld--text { grid-column: 1 / -1; }

    /* 칸 높이와 글자를 줄여 세로를 짧게 */
    .pl .pl-fld > span,
    .pl .pl-range::before {
        margin-bottom: 3px;
        font-size: 0.6875rem;
        line-height: 1.2;
    }

    .pl .pl-fld { gap: 3px; }

    .pl .pl-fld select,
    .pl .pl-fld input[type="text"],
    .pl .pl-range__btn {
        height: 38px;
        padding: 0 10px;
        font-size: 0.875rem;
        border-radius: 7px;
    }

    .pl .pl-range__btn { gap: 4px; }

    .pl-filter__act { margin-top: 10px; gap: 6px; }

    /*───────── 끄는 상자 — 아래에서 올라오는 시트 ─────────*/
    .pl .pl-range__panel {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        top: auto;
        width: auto;
        max-width: none;
        max-height: 76vh;
        overflow-y: auto;
        padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
        border-radius: 16px;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.28);
        -webkit-overflow-scrolling: touch;
    }

    /* 시트 위쪽에 손잡이 모양을 둡니다 */
    .pl .pl-range__panel::before {
        content: "";
        display: block;
        width: 38px;
        height: 4px;
        margin: -6px auto 14px;
        border-radius: 2px;
        background: var(--pl-line);
    }

    .pl .pl-range__title { font-size: 1rem; }
}

@media (max-width: 560px) {
    .pl-tabs a { padding: 8px 14px; font-size: 0.875rem; }
    .pl-tabs .pl-tabs__all { margin-top: 8px; }

    .pl .pl-filter__form .pl-filter__row { gap: 7px; }

    .pl .pl-fld select,
    .pl .pl-fld input[type="text"],
    .pl .pl-range__btn { height: 36px; font-size: 0.8125rem; }

    /* 560px 에서도 두 칸을 유지해 필터가 길어지지 않게 합니다 */
    .pl .pl-filter__form .pl-fld,
    .pl .pl-filter__form .pl-range { flex: none; }
}

/*───────────────────────────────────────────────
  좁은 화면 — 칸 너비 고르게

  칸마다 폭이 들쭉날쭉해 보이던 것을 바로잡습니다.
  격자 칸을 꽉 채우고, 안쪽 요소도 폭을 물려받게 합니다.
───────────────────────────────────────────────*/
@media (max-width: 900px) {
    .pl .pl-filter__form .pl-filter__row > * {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        justify-self: stretch;
        align-self: end;
    }

    .pl .pl-filter__form .pl-fld,
    .pl .pl-filter__form .pl-range { display: flex; flex-direction: column; }

    .pl .pl-filter__form select,
    .pl .pl-filter__form input[type="text"],
    .pl .pl-filter__form .pl-range__btn {
        width: 100% !important;
        min-width: 0;
        max-width: none;
        flex: none;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23968d80' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 28px;
    }

    /* 글자칸과 버튼에는 화살표가 없습니다 */
    .pl .pl-filter__form input[type="text"],
    .pl .pl-filter__form .pl-range__btn {
        background-image: none;
        padding-right: 10px;
    }

    /* 검색·초기화는 한 줄을 다 씁니다 */
    .pl-filter__act { display: flex; }
    .pl .pl-filter__submit { flex: 1 1 auto; }
    .pl .pl-filter__reset { flex: 0 0 auto; }
}

/*───────────────────────────────────────────────
  좁은 화면 — 필터가 접혀 있을 때

  칸이 어중간하게 남아 빈 상자처럼 보이던 것을 줄입니다.
  접혔을 때는 '필터 열기' 한 줄만 남깁니다.
───────────────────────────────────────────────*/
@media (max-width: 900px) {
    .pl-filter__form { padding: 0; }

    .pl-filter.is-collapsed {
        padding: 10px 14px;
    }

    .pl-filter.is-collapsed .pl-filter__head {
        margin: 0;
        min-height: 0;
    }

    /* 적용 중인 필터가 없으면 왼쪽 자리를 비우지 않습니다 */
    .pl-filter.is-collapsed .pl-filter__state:empty { display: none; }

    /* 열기 버튼이 오른쪽 끝에 붙도록 */
    .pl-filter__head { justify-content: flex-end; }
    .pl-filter__state { margin-right: auto; }
}

@media (max-width: 560px) {
    .pl-filter { padding: 12px 14px 14px; }
    .pl-filter.is-collapsed { padding: 8px 12px; }
    .pl-filter__form { padding: 0; }
}

/*───────────────────────────────────────────────
  좁은 화면 — 끄는 상자를 누른 자리에 띄웁니다

  화면 아래에서 올라오는 시트는 누른 곳과 멀어
  어느 항목을 고치는지 헷갈립니다.
  버튼 바로 밑에 붙이되, 오른쪽 칸은 오른쪽으로 정렬해
  화면 밖으로 잘리지 않게 합니다.
───────────────────────────────────────────────*/
@media (max-width: 900px) {
    .pl .pl-range__panel {
        position: absolute;
        left: 0;
        right: auto;
        top: calc(100% + 6px);
        bottom: auto;
        width: min(320px, calc(100vw - 40px));
        max-width: none;
        max-height: 70vh;
        overflow-y: auto;
        padding: 18px;
        border-radius: 14px;
        box-shadow: 0 14px 34px rgba(35, 32, 29, 0.16);
    }

    /* 손잡이 모양은 시트일 때만 쓰던 것이라 없앱니다 */
    .pl .pl-range__panel::before { content: none; }

    /* 오른쪽 칸에서 열면 오른쪽 끝에 맞춥니다 */
    .pl .pl-filter__form .pl-filter__row > .pl-range:nth-child(even) .pl-range__panel {
        left: auto;
        right: 0;
    }

    /* 펼친 칸이 뒤 칸에 가리지 않도록 */
    .pl .pl-range { position: relative; }
    .pl .pl-range:has(.pl-range__btn[aria-expanded="true"]) { z-index: 60; }
}

/*───────────────────────────────────────────────
  추천매물 — 손가락으로 좌우 넘기기
───────────────────────────────────────────────*/
.pl-track {
    cursor: grab;
    touch-action: pan-y;          /* 위아래 스크롤은 그대로 둡니다 */
    -webkit-user-select: none;
    user-select: none;
}

.pl-track.is-dragging { cursor: grabbing; }

/* 끌 때 사진이 딸려오지 않게 */
.pl-track img { -webkit-user-drag: none; user-select: none; }

/* 화살표는 끌기와 상관없이 눌립니다 */
.pl-nav { touch-action: auto; }

/* 넘길 것이 없으면 손 모양을 쓰지 않습니다 */
.pl-sec.is-single .pl-track { cursor: default; }