@import url("../renewal-tokens.css?v=20260902d");
@import url("property-common.css?v=20260908");
/* ═══════════════════════════════════════════════════════════════
   PropVis 리뉴얼 — 매물 V2 목록 · 관심매물 전용 스킨 오버라이드
   assets/property/v2/property.css 뒤에 로드된다 (list/favorites 4개
   템플릿 전용). registration 은 이 파일을 로드하지 않으므로
   property.css 원본은 무수정 보존된다.
   토큰 근거: docs/design/README-design-renewal.md 2·3절 (A안)
   구조/셀렉터 무변경 — 색·라운드·타이포 재도색만 수행한다.
   ⚠️ --v2-* 별칭·버튼·라디오·모달 셸·토스트 등 3페이지 공통 규칙은
   property-common.css 에만 둔다 (2026-09-01). 여기엔 목록·관심 고유 규칙만.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 카드 (라운드 12px + 보더 var(--rn-border) — 확정 결정 #3) ─── */
.v2-card {
    border-radius: 12px;
    border-color: var(--rn-border);
}

/* ─── 필터 pill — 프로토타입 .pill / .pill._on (보더리스 소프트 pill) ─── */
.v2-chip {
    background: var(--rn-grey);
    border-color: transparent;
    border-radius: 8px;
    color: var(--rn-grey-text);
    font-weight: 650;
}
.v2-chip:hover { background: var(--rn-grey-hover); }
.v2-chip.active {
    background: var(--rn-brand-soft);
    color: var(--rn-brand);
    border-color: transparent;
    font-weight: 700;
}

/* ─── 정렬 — 프로토타입 .seg._sm 세그먼트 스타일 ─── */
.v2-sort-bar {
    background: var(--rn-grey);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
    align-items: center;
}
.v2-sort-btn {
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rn-text-dim);
}
.v2-sort-btn:hover { color: var(--rn-grey-text); }
.v2-sort-btn.active {
    background: var(--rn-card-bg);
    color: var(--rn-brand);
    border-color: transparent;
    box-shadow: 0 1px 4px rgba(34, 30, 28, .08);
}
/* 비공개 포함 토글(대표 전용) — 세그먼트 바 안에서 흰 pill 로 정렬 */
.v2-hidden-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    color: var(--rn-grey-text);
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--rn-card-bg);
    box-shadow: 0 1px 4px rgba(34, 30, 28, .08);
}

/* ─── 태그 — 리뉴얼 팔레트로 재조색 (의미 매핑은 기존 유지) ─── */
.v2-tag { border-radius: 6px; font-weight: 700; }
.v2-tag._green  { background: var(--rn-st-done-soft); color: var(--rn-st-done); }
.v2-tag._blue   { background: var(--rn-st-matched-soft); color: var(--rn-st-matched); }
.v2-tag._orange { background: var(--rn-st-wait-soft); color: var(--rn-st-wait); }
.v2-tag._yellow { background: var(--rn-st-wait-soft); color: var(--rn-st-wait); }
.v2-tag._purple { background: var(--rn-brand-soft); color: var(--rn-brand); }
.v2-tag._gray   { background: var(--rn-grey); color: var(--rn-text-sub); }
.v2-tag._red    { background: var(--rn-danger-faint); color: var(--rn-st-unmatched); }

/* 리스트 행의 "비공개" 상태 = 색 점 + 텍스트 (폴리시 A-2)
   상세 모달 쪽 _red 태그(칩 형태)는 영향받지 않도록 행 스코프 한정 */
.v2-prop-item .v2-tag._red {
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
}
.v2-prop-item .v2-tag._red::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ─── 매물 리스트 행 — 목록(list.js)·관심(favorites.js) 공용 렌더 구조 (2026-09-01 R5)
   두 렌더러가 같은 클래스만 쓰고 인라인 색·크기를 두지 않는다. 구조:
   .v2-prop-item > [checkbox] + .v2-prop-thumb-wrap(.v2-prop-thumb + .v2-fav-btn)
                 + .v2-prop-info(.v2-prop-title-row > .v2-prop-title / .v2-prop-meta / .v2-prop-address / .v2-prop-date)
                 + .v2-prop-side(.v2-prop-tags / .v2-prop-price / .v2-prop-fee / [.contact-btn]) ─── */
.v2-prop-item { border-bottom-color: var(--rn-border-soft); }
.v2-prop-item._hidden {
    background: var(--rn-bg-hover);
    border-left-color: var(--rn-st-unmatched);
}
.v2-prop-item._hidden:hover { background: var(--rn-bg); }
.v2-prop-item._hidden .v2-prop-title { color: var(--rn-text-sub); }
.v2-prop-item .item-cb, .v2-prop-item .fav-item-cb {
    width: 18px; height: 18px; accent-color: var(--rn-brand); flex-shrink: 0;
}
.v2-prop-thumb-wrap { position: relative; flex-shrink: 0; }
.v2-prop-thumb {
    border-radius: 10px;
    background: var(--rn-grey);
    color: var(--rn-text-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.v2-prop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-prop-thumb .material-symbols-outlined { font-size: 24px; }
.v2-prop-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.v2-prop-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v2-prop-title { font-weight: 700; color: var(--rn-text); margin: 0; }
.v2-prop-address { color: var(--rn-text-dim); margin: 0; }
.v2-prop-meta { font-size: 12px; font-weight: 500; color: var(--rn-text-dim); }
.v2-prop-date { font-size: 11px; color: var(--rn-text-faint); }
.v2-prop-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    /* 2026-09-03 매물 정밀검수 S4: 운영은 min-width 180 + 태그 행 nowrap — 160/wrap 이면 거래·형태·담당자 3태그가 2줄로 감겨
       행 높이가 늘고(112 vs 운영 한 줄) 가격/연락처 세로 정렬이 달라진다. 운영 규격으로 복원 */
    min-width: 180px;
}
.v2-prop-tags { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; }
.v2-prop-manager { font-size: 12px; font-weight: 600; color: var(--rn-text-sub); }
.v2-prop-price {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    font-weight: 800;
}
.v2-prop-fee { font-size: 11px; color: var(--rn-text-dim); }
.v2-prop-side .contact-btn { margin-top: 2px; }

/* ─── 관심(북마크) 버튼 — 프로토타입 .pfav 흰 원형 (썸네일 우상단)
   상태는 data-fav 속성 기준 — list.js applyFavBtnState 가 갱신 ─── */
.v2-fav-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    padding: 0;
    z-index: 2;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--rn-shadow-card);   /* 비표준 알파 .18 → 카드 그림자 토큰 수렴 (2026-09-02 3차 Y4) */
}
.v2-fav-btn .material-symbols-outlined { font-size: 14px; line-height: 1; }
/* 상태색은 명시도 (0,4,2) 로 — renewal-skin.css:153 의
   `button:not([class*="_main"]):not([class*="_red"]):not(.register-btn) .material-symbols-outlined{color:inherit}`(0,4,1) 이
   (0,2,0)/(0,3,0) 규칙을 이겨 idle·관심 모두 본문색이 됐다(재측정 RG1). !important 없이 이기도록 조상·태그를 붙인다.
   list.js/favorites.js 둘 다 .v2-prop-thumb-wrap > button.v2-fav-btn[data-fav] > span 구조. */
.v2-prop-thumb-wrap button.v2-fav-btn[data-fav] span.material-symbols-outlined { color: var(--rn-text-dim); }
.v2-prop-thumb-wrap button.v2-fav-btn[data-fav="true"] span.material-symbols-outlined { color: var(--rn-brand); }

/* ─── 페이지네이션 — 프로토타입 .pg (보더리스) ─── */
.page-btn {
    border: none;
    background: transparent;
    border-radius: 8px;
    font-weight: 650;
    color: var(--rn-grey-text);
}
.page-btn:hover:not(.active):not(.disabled) { background: var(--rn-grey); }
.page-btn.active { background: var(--rn-brand); color: #fff; }

/* ─── 지도 카드 밑판 — 벤더(네이버 지도)가 컨테이너에 쿨그레이 #F8F9FA 를 깔아
   타일 로드 전 종이톤과 어긋났다. 토큰으로 고정 (2026-09-02 3차 Y2) ─── */
#map.v2-card { background: var(--rn-bg) !important; }

/* ─── 리스트 헤더 · 빈 상태 · 탑바 ─── */
.v2-list-header { border-bottom-color: var(--rn-border-soft); }
.v2-empty { color: var(--rn-text-dim); }
.v2-empty p { font-size: 13px; }
.v2-topbar-title { font-weight: 800; letter-spacing: -.02em; }

/* ─── 인쇄 옵션 모달 — 단건/일괄 공용 셸, 반대 모드 요소 숨김 (2026-09-01 Y9) ─── */
#printOptionsModal[data-print-mode="single"] [data-print-bulk] { display: none; }
#printOptionsModal[data-print-mode="bulk"] [data-print-single] { display: none; }

/* ─── 하트(상세 모달 관심 표시 호환) ─── */
.v2-heart.liked { color: var(--rn-brand); }


/* ─── 직원 필터 칩 (renewal-skin.css 와 동일 — 매물 V2 는 naviBarProperty 라 스킨 미로드) ─── */
.selected-employees { display: flex; flex-wrap: wrap; gap: 6px; }
.selected-employee {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; background: var(--rn-brand-soft); border-radius: 8px;
}
.selected-employee .employee-name { color: var(--rn-brand); font-size: 11.5px; font-weight: 750; }
.selected-employee .remove-employee {
  color: var(--rn-brand); font-size: 12px; opacity: 1;
  background: none; border: none; padding: 0; cursor: pointer;
}
.selected-employee .remove-employee:hover { color: var(--rn-brand-hover); background: none; }

/* ═══ 매물 상세 모달 본문 (property-detail-modal.js renderDetailHtml — 6유형 공통, 2026-09-01 R6)
   섹션 카드 → --rn-bg-hover + --rn-border, 값 → --rn-text, 보조 → --rn-text-sub/dim, placeholder → --rn-grey.
   유형별 필드 배치(기본정보·거래정보·시설·상세설명·관리정보)는 JS 가 정하고 여기서는 색·라운드·타이포만. ═══ */
.v2-detail-notice { text-align: center; padding: 40px; color: var(--rn-text-dim); font-size: 13.5px; }
.v2-detail-notice._error { color: var(--rn-st-unmatched); }
.v2-detail-notice small { color: var(--rn-text-faint); }

.v2-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.v2-detail-head-actions { display: flex; gap: 8px; flex-shrink: 0; }
.v2-detail-addr { font-size: 17px; font-weight: 700; color: var(--rn-text); letter-spacing: -.01em; }
.v2-detail-price {
    font-size: 24px; font-weight: 800; color: var(--rn-brand);
    margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.v2-detail-price .v2-tag { font-size: 12px; vertical-align: middle; letter-spacing: 0; }
.v2-detail-maint { font-size: 13px; color: var(--rn-text-sub); margin-top: 3px; }

.v2-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.v2-detail-photos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.detail-photo-thumb {
    min-width: 180px; height: 200px; border-radius: 10px; overflow: hidden;
    background: var(--rn-grey); cursor: pointer; flex-shrink: 0;
}
.detail-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-detail-photo-count {
    min-width: 40px; display: flex; align-items: center; justify-content: center;
    color: var(--rn-text-dim); font-size: 12px; flex-shrink: 0;
}
.v2-detail-placeholder, .v2-detail-map {
    height: 200px; background: var(--rn-grey); border-radius: 10px; overflow: hidden;
}
.v2-detail-placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: var(--rn-text-dim);
}
.v2-detail-map-msg {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; gap: 4px; color: var(--rn-text-dim); font-size: 12px;
}
.v2-detail-map-msg._row { flex-direction: row; font-size: 13px; }
.v2-detail-map-msg .material-symbols-outlined { font-size: 20px; }
.v2-detail-map-msg._row .material-symbols-outlined { font-size: 18px; margin-right: 4px; }
.v2-detail-map-msg small { font-size: 11px; color: var(--rn-text-faint); }

.v2-detail-section {
    background: var(--rn-bg-hover);
    border: 1px solid var(--rn-border);
    border-radius: 12px;
    padding: 16px;
}
.v2-detail-section._mb16 { margin-bottom: 16px; }
.v2-detail-section h4 {
    font-size: 13px; font-weight: 700; color: var(--rn-brand);
    margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--rn-border-soft);
}
.v2-detail-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; }
.v2-detail-row._inline { justify-content: flex-start; gap: 8px; padding: 0; }
.v2-detail-row-label { color: var(--rn-text-dim); flex-shrink: 0; }
.v2-detail-row-value { font-weight: 600; color: var(--rn-text); text-align: right; word-break: keep-all; }
.v2-detail-row._inline .v2-detail-row-value { text-align: left; }
.v2-detail-inline-rows { display: flex; gap: 24px; margin-top: 8px; flex-wrap: wrap; }

.v2-detail-desc-title { font-size: 15px; font-weight: 700; color: var(--rn-text); margin-bottom: 6px; }
.v2-detail-desc { font-size: 14px; line-height: 1.7; color: var(--rn-text-sub); white-space: pre-wrap; margin: 0; }

.v2-detail-memo { border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; border-left: 3px solid; }
.v2-detail-memo._internal { background: var(--rn-st-wait-soft); border-left-color: var(--rn-st-wait); }
.v2-detail-memo._briefing { background: var(--rn-grey); border-left-color: var(--rn-text-dim); margin-bottom: 16px; }
.v2-detail-memo-label { font-size: 11px; font-weight: 700; margin-bottom: 4px; color: var(--rn-text-sub); }
.v2-detail-memo._internal .v2-detail-memo-label { color: var(--rn-st-wait); }
.v2-detail-memo-label span { font-size: 10px; font-weight: 500; color: var(--rn-text-dim); }
.v2-detail-memo-body { font-size: 13px; line-height: 1.6; color: var(--rn-text-sub); white-space: pre-wrap; margin: 0; }

.v2-detail-safety { display: flex; gap: 12px; margin-bottom: 16px; font-size: 12px; color: var(--rn-text-sub); }
.v2-detail-safety b { font-weight: 600; color: var(--rn-brand); }

.v2-detail-chip-row { margin-bottom: 6px; }
.v2-detail-chip-label { font-size: 12px; color: var(--rn-text-dim); margin-right: 6px; }
.v2-detail-chip-label._brand { color: var(--rn-brand); font-weight: 700; }
.v2-detail-chip { margin: 2px; font-weight: 600; }
.v2-detail-d1 { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--rn-border-soft); }
.v2-detail-d1 .v2-detail-chip-row { margin: 6px 0 0; }

/* ─── 직원 필터 드롭다운 재도색 (2026-09-02 재검수 R4) ───
   naviBar 프래그먼트가 body 에 style.css 를 주입해 head 의 이 파일보다 늦게 로드된다 →
   .employee-filter-container > div{#D9D9D9·radius4·fs16}·.dropdown-options{순검정 그림자}가
   이겨서 레거시로 렌더됐다. id 셀렉터로 명시도를 올려 계약건 관리 규격(contracts.css:134~147)을
   적용한다. 위치·재배치(JS fixed)는 style.css 것을 그대로 쓰므로 색·타이포만 덮는다. */
#employee-checkbox-container > div {
    border: none; border-radius: 8px; background: var(--rn-grey);
    font-size: 12.5px; font-weight: 700; color: var(--rn-grey-text);
}
#employee-checkbox-container .dropdown-summary { padding: 8px 14px; list-style: none; white-space: nowrap; cursor: pointer; }
#employee-checkbox-container .dropdown-summary::-webkit-details-marker { display: none; }
#employee-checkbox-container .dropdown-options {
    border-radius: 10px; border: 1px solid var(--rn-border); background: var(--rn-card-bg);
    box-shadow: 0 14px 34px rgba(34, 30, 28, .16); font-weight: 600; padding: 10px 12px;
    min-width: 168px;
}
#employee-checkbox-container .dropdown-option { gap: 7px; font-size: 12.5px; }
#employee-checkbox-container .dropdown-option input { accent-color: var(--rn-brand); }

/* select 열림 목록 option — .rn 스코프 밖 페이지용 이식 (2026-09-02 5차 5Y-6, renewal.css:53 동일 규칙) */
select option { font-family: inherit; font-size: 13px; color: var(--rn-text, #221E1C); background: var(--rn-card-bg, #fff); }
select option:checked { color: var(--rn-brand, #812B27); font-weight: 700; }

/* ─── 필터 카드 컨트롤 채움형 전환 (2026-09-02 민수님 지적: 흰 카드 보더 + 흰 select 보더 = 윤곽 두 겹) ───
   카드가 윤곽 한 겹을 담당하고 컨트롤은 회색 채움 — 계약작성 입력·기준 페이지 필터 pill 과 동일 문법.
   열림 옵션 목록도 같은 회색으로 톤 연속(닫힘·열림 단절 방지), 선택 항목만 흰 배경+브랜드. */
#filterCard .v2-select, #filterCard .v2-input {
    background: var(--rn-grey);
    border-color: transparent;
}
#filterCard .v2-select:focus, #filterCard .v2-input:focus {
    background: var(--rn-card-bg);
    border-color: var(--rn-brand);
}
#filterCard .v2-select:hover { border-color: var(--rn-border-hover); }
#filterCard .v2-select option { background: var(--rn-grey); color: var(--rn-text); }
#filterCard .v2-select option:checked { background: var(--rn-card-bg); color: var(--rn-brand); }

/* 필터 픽커 톤 일치 (2026-09-02 민수님 지적: 계약작성과 달리 회색 박스에 흰 픽커) —
   닫힘 박스가 회색 채움이므로 열림 픽커도 회색 계열(cc 와 동일 문법) */
@supports selector(::picker(select)) {
  #filterCard .v2-select::picker(select) { background: var(--rn-grey); }
  #filterCard .v2-select option { font-size: 13px; }
  #filterCard .v2-select option:hover { background: var(--rn-grey-hover); }
  #filterCard .v2-select option:checked { background: var(--rn-card-bg); color: var(--rn-brand); }
}