@import url("../renewal-tokens.css?v=20260902d");
@import url("property-common.css?v=20260908");
/* ═══════════════════════════════════════════════════════════════
   PropVis 디자인 리뉴얼 — 매물 V2 등록 (v2/registration.html ·
   v2/prop/registration.html 쌍 전용)
   프로토타입: docs/design/prototype-toss-interactive-2026-07-28.html #page-propcreate

   ⚠️ 원칙 (2026-08-05):
   - 이 페이지는 15섹션 ~120필드 + 건축물대장 자동채움 + 사진 업로드의
     최대 규모 폼. registration.js(3,065줄)가 id/class를 전면 참조·동적
     생성하므로 "재도색(CSS 오버라이드)"만 수행한다. HTML 구조·JS 불변.
   - 방법: ① property.css의 --v2-* 토큰을 리뉴얼 값으로 재정의
     ② reg-* / v2-* 컴포넌트를 프로토타입 카드 톤으로 오버라이드.
   - 이 파일은 템플릿 인라인 <style> 뒤에 로드되어 동일 특이도 타이를
     이긴다 (링크 순서: property.css → 인라인 style → 이 파일).
   - v2/prop/* 변형은 naviBarProperty를 쓰므로 renewal-skin.css가 없다.
     → body 베이스라인(Pretendard·크림 배경)을 여기서 자체 보장.
   - JS 토글 클래스(selected/collapsed/visible/hidden/dragover/l1-hidden)는
     선택자 그대로 받아 시각만 변경. 절대 이름 변경 금지.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 베이스라인 (prop 변형은 renewal-skin 미로드) ───
   html body(0,0,2)로 global.css의 body(0,0,1)를 로드 순서와 무관하게 이김.
   (prop 변형은 naviBarProperty의 legacy CSS가 body에서 이 파일보다 늦게 로드됨) */
html body {
    font-family: "Pretendard", "SUIT", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
    background: var(--rn-bg);
    color: var(--rn-text);
}

/* ─── --v2-* 토큰 별칭은 property-common.css 한 곳에서만 정의한다 (2026-09-01 Y10).
   구 등록 전용 값 3종(primary-light=brand-faint · text-muted=grey-text · bg-hover=brand-soft)은 제거.
   bg-hover 우회가 필요했던 .v2-btn._mainLine:hover 는 common 의 명시 규칙이 담당. ─── */

/* ─── 섹션 카드 (프로토타입 .card: 흰 배경 · var(--rn-border) 보더 · 12px 라운드 · 은은한 그림자) ─── */
.reg-section {
    border: 1px solid var(--rn-border);
    border-left: 1px solid var(--rn-border); /* 구 4px 인주 좌측 액센트 제거 */
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(34, 30, 28, .04);
    margin-bottom: 14px;
}
.reg-section-header { padding: 14px 20px; }
.reg-section-header:hover { background: var(--rn-bg-hover); }
.reg-section-title {
    font-size: 13.5px;
    font-weight: 750;
    color: var(--rn-grey-text);
    letter-spacing: -.01em;
}
.step-badge {
    background: var(--rn-brand-soft);
    color: var(--rn-brand);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 750;
    padding: 2px 9px;
}
.reg-section-body { padding-left: 20px; padding-right: 20px; }
.section-toggle { color: var(--rn-text-faint); }

/* ─── 라벨·헬퍼 ─── */
.reg-label { font-size: 12.5px; font-weight: 700; color: var(--rn-text-sub); }
.reg-helper { color: var(--rn-text-faint); border-bottom-color: var(--rn-text-faint); }
.phone-sep { color: var(--rn-text-faint); }
.char-count { font-size: 11.5px; }

/* ─── 입력 컨트롤: 채움형 필 (contract-create.css와 동일 문법) ─── */
.reg-input, .reg-select, .reg-textarea {
    font-family: inherit;
    font-size: 13.5px;
    height: 38px;
    background: var(--rn-grey);
    border-color: transparent;
    border-radius: 10px;
    transition: border-color .15s ease, background .15s ease;
}
.reg-textarea { height: auto; }
.reg-input:focus, .reg-select:focus, .reg-textarea:focus {
    border-color: var(--rn-brand);
    background: #fff;
}
.reg-input::placeholder, .reg-textarea::placeholder { color: var(--rn-text-faint); }
.reg-input:disabled, .reg-select:disabled {
    background: var(--rn-grey-hover);
    border-color: transparent;
    color: var(--rn-text-dim);
}
/* 주소 readonly 인풋 — 인라인 background:#E9E9E9 를 덮으려면 !important 필요 */
#addrA_address, #addrC_address {
    background: var(--rn-grey-hover) !important;
    color: var(--rn-text-sub);
}

/* 모달 내부 v2-input 계열도 동일 톤 */
.v2-input, .v2-select, .v2-textarea {
    font-family: inherit;
    font-size: 13.5px;
    background: var(--rn-grey);
    border-color: transparent;
    border-radius: 10px;
}
.v2-input:focus, .v2-select:focus, .v2-textarea:focus {
    border-color: var(--rn-brand);
    background: #fff;
}
.v2-form-label { font-size: 12.5px; font-weight: 700; color: var(--rn-text-sub); }

/* 전체선택 미니 버튼 */
.select-all { background: var(--rn-brand-faint); color: var(--rn-brand); border-color: var(--rn-brand-border); border-radius: 8px; }
.select-all.selected { background: var(--rn-brand-soft); color: var(--rn-brand); border-color: var(--rn-brand); }

/* ─── 연락처 역할 필 → 프로토타입 .seg (트랙 + 흰 알약) ─── */
.role-pill {
    border: none;
    background: var(--rn-grey);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
    overflow: visible;
}
.role-pill label {
    border-right: none;
    background: transparent;
    border-radius: 7px;
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rn-text-dim);
}
.role-pill label.selected {
    background: #fff;
    color: var(--rn-brand);
    box-shadow: 0 1px 4px rgba(34, 30, 28, .08);
}

/* ─── 연락처 줄·스택 ─── */
.contact-row { background: var(--rn-bg-hover); border-color: var(--rn-border-soft); border-radius: 10px; }
.contact-item { border-color: var(--rn-border); border-radius: 10px; }
.contact-item .contact-role-tag { background: var(--rn-brand-soft); color: var(--rn-brand); font-weight: 700; border-radius: 999px; }
.contact-item .contact-phone { color: var(--rn-text); font-size: 13.5px; }
.contact-item .contact-remove { color: var(--rn-text-faint); }
.contact-item .contact-remove:hover { color: var(--rn-st-unmatched); }

/* ─── 거래 카드 ─── */
.deal-card { background: var(--rn-bg-hover); border-color: var(--rn-border); border-radius: 12px; }

/* ─── 사진 업로드 → 프로토타입 .photobox ─── */
.upload-area {
    border: 1.5px dashed var(--rn-border-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--rn-text-dim);
    padding: 28px;
}
.upload-area:hover, .upload-area.dragover {
    border-color: var(--rn-brand);
    background: var(--rn-brand-faint);
}
.thumb { border-radius: 10px; background: var(--rn-grey); border-color: var(--rn-border); }

/* ─── 지도 미리보기 (인라인 background:#e0e0e0 · radius 4px 덮음) ─── */
#addrMapPreview { background: var(--rn-grey) !important; border-radius: 12px !important; }
.map-placeholder { border-radius: 12px; }
#complexSearchResults { border-radius: 10px !important; }

/* ─── 임시저장 배너·버튼 (인라인 앰버 → 리뉴얼 wait 톤 var(--rn-st-wait)) ─── */
#draftBanner {
    background: #FFFCF6 !important;
    border-color: var(--rn-st-wait-border) !important; /* 리터럴 토큰화 (2026-09-02 3차) */
    color: var(--rn-st-wait) !important;
    border-radius: 10px !important;
}
#draftSaveBtn {
    background: #FFFCF6;
    border-color: var(--rn-st-wait-border) !important; /* 리터럴 토큰화 (2026-09-02 3차) */
    color: var(--rn-st-wait) !important;
}
#draftSaveBtn:hover { background: #FBF3E3; }

/* 층별 면적 안내 힌트 (인라인 #fffbf0/#f0ad4e 덮음) */
#floorAreaHint .reg-form-group {
    background: #FFFCF6 !important;
    border-left-color: var(--rn-st-wait-border) !important; /* 리터럴 토큰화 (2026-09-02 3차) */
    color: var(--rn-text-dim) !important;
    border-radius: 8px !important;
}

/* 수수료 경고 (인라인 #e74c3c 덮음) */
#commissionWarning { color: var(--rn-st-unmatched) !important; }

/* ─── 플로팅 저장 바 ─── */
.floating-save {
    border-radius: 14px;
    border-color: var(--rn-border);
    box-shadow: 0 8px 32px rgba(34, 30, 28, .14);
    /* R14 — 채팅 FAB(right 24 + 56px = 뷰포트 우측 24~80px)와 48×48 겹치던 것.
       바 우측 끝을 --rn-fab-safe(88px, chat-widget.css)에 두면 FAB 좌측 끝(80px)과 8px 간격 — 고정 px 라
       1600/1280/1024 모두 bbox 교차 0. 템플릿 인라인 <style> 의 right 는 제거했다(여기가 단일 소스). FAB 위치 불변. */
    /* 2026-09-03 매물 정밀검수 S7: 등록 화면은 채팅 위젯(chat-widget.css, --rn-fab-safe 정의처)을 로드하지 않아 변수가 비고
       폴백 88px 이 그대로 적용돼 운영(32px)보다 56px 안쪽에 붙었다. 폴백을 운영값으로 — 위젯이 있는 페이지는 변수(88px)가 이긴다 */
    right: var(--rn-fab-safe, 32px);
}

/* ─── 모달 셸(r16)·버튼·라디오·토스트는 property-common.css ─── */
.v2-card { border-color: var(--rn-border); border-radius: 12px; }