@import url("../renewal-tokens.css?v=20260902d");
/* ═══════════════════════════════════════════════════════════════
   PropVis 디자인 리뉴얼 — 계약건 작성 (contract-create.html 전용)
   프로토타입: docs/design/prototype-toss-interactive-2026-07-28.html #page-create
   토큰: /css/renewal.css (:root --rn-*)

   ⚠️ 원칙 (2026-08-05):
   - 이 페이지의 DOM id/class/구조는 contract-create.js(2,394줄)가 전면
     참조·동적 생성하므로 "재도색(CSS 오버라이드)" 방식으로만 이식한다.
   - JS가 innerHTML로 찍는 마크업(.deposit-group/.input-row/.fee-group/
     .control-box/.phone-input-group/.tenant-section/.landlord-section 등)은
     여기서 클래스 그대로 받아 스타일링한다. JS는 한 글자도 수정하지 않음.
   - 카드 안 제목처럼 보이는 것은 "조인 트릭": form > h3.sectionTitle(상단부)
     + section.basicBox(하단부)를 한 카드로 이어 붙인다. DOM 이동 없음.
   - 라디오 → 세그먼트 필은 @supports selector(:has()) 가드 안에서만 라디오를
     시각적으로 숨긴다(미지원 브라우저는 필 + 기존 라디오 노출로 안전 폴백).
   - 오버라이드 프리픽스는 .main-box.rn-create (style.css의
     .main-box.contract-create … 와 동급 특이도 + 후순위 로드로 승리).
   ═══════════════════════════════════════════════════════════════ */

/* ─── 레이아웃 골격 (.rn의 margin:0 리셋이 .main-box 여백을 덮으므로 재선언) ─── */
.rn.rn-create {
  min-height: calc(100vh - 60px);
  margin-left: 260px;
  margin-top: 60px;
  background: var(--rn-bg);
}
.navbar-container.close + .rn.rn-create { margin-left: 68px; }
@media screen and (max-width: 1760px) {
  .rn.rn-create { margin-left: 220px; }
}
.main-box.rn-create .pbAll80 {
  margin: 0 auto;
  padding: 24px 28px 60px;
}
/* contractStyles.css:15 form{background:#f8f3f2} 웜핑크 누출 방어 — 현재 링크는 주석 상태지만
   재활성 시 카드 밖 여백이 --rn-bg 와 다른 핑크톤이 되므로 선제 오버라이드 (2026-09-02 3차 S-4) */
.main-box.rn-create form { background: transparent; }

/* ─── 페이지 헤드 ─── */
.main-box.rn-create .top-line { margin-bottom: 16px; align-items: flex-start; }
.main-box.rn-create .page-title {
  font-size: 22px; font-weight: 800; letter-spacing: -.025em;
  color: var(--rn-text); line-height: 1.3;
}
.main-box.rn-create .hsub { font-size: 14px; font-weight: 500; color: var(--rn-text-sub); margin-top: 6px; }

/* ─── 카드: 제목(상단부) + basicBox(하단부) 조인 ─── */
.main-box.rn-create form > h3.sectionTitle {
  background: var(--rn-card-bg);
  border: 1px solid var(--rn-border); border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 15px 20px 0;
  margin-bottom: 0;
  font-size: 13px; font-weight: 750; color: var(--rn-text-dim);
}
.main-box.rn-create .basicBox {
  background: var(--rn-card-bg);
  border: 1px solid var(--rn-border); border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 1px 4px rgba(34, 30, 28, .04);
  padding: 14px 20px 18px;
  margin-bottom: 14px;
  display: flex;
}
.main-box.rn-create .basicBox > ul { flex: 1; min-width: 0; }

/* 임차/임대 카드: 헤더 줄(제목 + 추가 버튼)이 상단부 */
.main-box.rn-create #tenant-info-section > .flexBox,
.main-box.rn-create #landlord-info-section > .flexBox {
  background: var(--rn-card-bg);
  border: 1px solid var(--rn-border); border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 12px 20px 2px;
  margin-bottom: 0;
}
.main-box.rn-create #tenant-info-section .sectionTitle,
.main-box.rn-create #landlord-info-section .sectionTitle {
  font-size: 13px; font-weight: 750; color: var(--rn-text-dim);
}
/* 두 카드 사이 간격 (기존 mr32 유틸 완화) */
.main-box.rn-create #tenant-info-section { margin-right: 14px; }

/* ─── 폼 리스트: 라벨 위 · 필드 아래 스택 ─── */
.main-box.rn-create .formList {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
}
.main-box.rn-create .formList:not(:last-of-type) { margin-bottom: 16px; }
.main-box.rn-create .formList > label,
.main-box.rn-create .dropdown-group > label,
.main-box.rn-create .phone-section > label,
.main-box.rn-create .fee-group .control-box > label {
  width: auto; line-height: 1.4; margin: 0;
  font-size: 11.5px; font-weight: 750; color: var(--rn-text-dim);
}
.main-box.rn-create .dropdown-row { display: flex; }
.main-box.rn-create .dropdown-group { display: flex; flex-direction: column; gap: 6px; }
.main-box.rn-create .phone-section { flex-direction: column; align-items: flex-start; gap: 6px; }

/* ─── 입력 컨트롤 공통 (채움형 필) ─── */
.main-box.rn-create input:not([type="checkbox"]):not([type="radio"]),
.main-box.rn-create select,
.main-box.rn-create textarea {
  border: 1px solid transparent;
  background: var(--rn-grey);
  border-radius: 10px;
  padding: 8px 13px;
  height: 38px;
  font-size: 13px;
  font-family: inherit;
  color: var(--rn-text);
  transition: border-color .15s ease, background .15s ease;
}
.main-box.rn-create textarea { height: auto; }
/* select 드롭박스 — 네이티브 화살표(appearance:auto) 잔존으로 구식 렌더 (2026-09-02 민수님 지적).
   직원관리 표 select(employees.css)와 동일한 셰브론 SVG + appearance:none 규격으로 통일 */
.main-box.rn-create select {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23837D76' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
/* 열림 옵션 목록 톤 연속성 — 닫힘 박스가 회색 채움인데 목록만 흰색이면 UX 단절 (2026-09-02 민수님 지적)
   목록도 같은 회색, 선택 항목만 흰 배경+브랜드로 구분 */
.main-box.rn-create select option { background: var(--rn-grey); color: var(--rn-text); }
.main-box.rn-create select option:checked { background: var(--rn-card-bg); color: var(--rn-brand); }
.main-box.rn-create input:not([type="checkbox"]):not([type="radio"]):focus,
.main-box.rn-create select:focus,
.main-box.rn-create textarea:focus {
  border: 1px solid var(--rn-brand);
  background: var(--rn-card-bg);
  outline: none;
}
.main-box.rn-create input::placeholder,
.main-box.rn-create textarea::placeholder { color: var(--rn-text-faint); }
.main-box.rn-create input:disabled,
.main-box.rn-create select:disabled,
.main-box.rn-create textarea:disabled,
.main-box.rn-create input.disabled,
.main-box.rn-create textarea.disabled {
  background: var(--rn-border-soft);
  border: 1px solid transparent;
  color: var(--rn-text-dim);
  border-radius: 10px;
}

/* 필드 폭 */
.main-box.rn-create .formList > input[type="text"],
.main-box.rn-create .formList > input[type="date"],
.main-box.rn-create .formList > .date-picker,
.main-box.rn-create .address-details-row input { width: 100%; max-width: 420px; }
.main-box.rn-create .dropdown-group select { min-width: 240px; }
.main-box.rn-create .formList.address-group > .flex1 { max-width: 460px; }
.main-box.rn-create .phone-input-group input { width: 74px; text-align: center; padding: 8px; }

/* 만기일 줄: 날짜 아래에 프리셋 드롭다운 */
.main-box.rn-create #expiryForms .dropdown-row { margin-left: 0; margin-top: 2px; }

/* ─── 라디오 그룹 → 세그먼트 필 ───
   #contract-create-type(계약 형태) · #contractStatus(계약 상태)
   · #dealType(계약 종류) · #contractType(양/단타)
   JS가 label.style.display 토글·input.click()·checked 제어를 그대로 수행 */
.main-box.rn-create .radioList {
  display: inline-flex; align-self: flex-start;
  background: var(--rn-grey); border-radius: 10px; padding: 4px; gap: 2px;
  flex-wrap: wrap;
}
.main-box.rn-create .radioList label {
  display: inline-flex; align-items: center;
  width: auto; margin: 0; padding: 6px 14px;
  border-radius: 7px; line-height: 1.4;
  font-size: 12.5px; font-weight: 700; color: var(--rn-text-dim);
  cursor: pointer; user-select: none; white-space: nowrap;
}
@supports selector(label:has(input:checked)) {
  /* :has 지원 브라우저에서만 라디오 동그라미를 숨김 (미지원 시 폴백: 필 + 라디오 노출)
     ⚠️ 라디오를 숨기면 클릭 대상은 label 뿐이다. label 이 input 을 감싸고 있어도
        `for=""`(빈 값)가 붙어 있으면 명시적 연결이 우선돼 **암묵적 연결이 무효화**되고,
        결과적으로 어디를 눌러도 선택이 안 된다(2026-08-07 회귀 발견: 계약 종류·계약 형태).
        템플릿에서 빈 for 를 제거해 해결했다. 이 CSS 를 다른 라디오 그룹에 재사용할 때도
        label 이 input 을 감싸는지(또는 for 가 실제 id 를 가리키는지) 먼저 확인할 것. */
  .main-box.rn-create .radioList input[type="radio"] {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
    pointer-events: none;
  }
  .main-box.rn-create .radioList label:has(input[type="radio"]:checked) {
    background: var(--rn-card-bg); color: var(--rn-brand);
    box-shadow: 0 1px 4px rgba(34, 30, 28, .08);
  }
  .main-box.rn-create .radioList label:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--rn-brand); outline-offset: 1px;
  }
  .main-box.rn-create .radioList label:has(input[type="radio"]:disabled) {
    opacity: .45; cursor: default;
  }
}

/* ─── 주소 검색 ─── */
.main-box.rn-create #addbtn {
  height: 38px; min-width: auto; padding: 0 14px;
  border: 1px solid var(--rn-brand-border); background: var(--rn-brand-faint); color: var(--rn-brand);
  border-radius: 10px; font-size: 12.5px; font-weight: 750;
}
.main-box.rn-create #addbtn:hover {
  background: var(--rn-brand-soft); color: var(--rn-brand); border-color: #D9AFAC;
}
.main-box.rn-create #addbtn.disabled { opacity: .45; pointer-events: none; }

/* ─── 임차/임대 추가 버튼 (프로토타입 .mbtn 톤) ─── */
.main-box.rn-create .add-button {
  height: 30px; min-width: auto; padding: 0 12px;
  border: 1px solid var(--rn-input-border); background: var(--rn-card-bg); color: var(--rn-grey-text);
  border-radius: 10px; font-size: 12px; font-weight: 700;
}
.main-box.rn-create .add-button:hover {
  background: var(--rn-card-bg); color: var(--rn-grey-text); border-color: var(--rn-border-hover);
}

/* ─── 금액 · 수수료 (JS가 #dynamic-fields 안에 동적 생성하는 마크업) ─── */
.main-box.rn-create #dynamic-fields { width: 100%; }
.main-box.rn-create .input-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.main-box.rn-create .input-row label {
  width: 96px; flex-shrink: 0; margin: 0; line-height: 1.4;
  font-size: 12px; font-weight: 750; color: var(--rn-text-dim);
}
.main-box.rn-create .input-row input[type="text"] { width: 220px; }
.main-box.rn-create .unit { font-size: 12px; font-weight: 700; color: var(--rn-text-dim); white-space: nowrap; }
/* JS가 인라인 color:lightgray 로 찍는 부가세 안내 — 가독성 보정 (재도색만) */
.main-box.rn-create .vat-amount { color: var(--rn-text-faint) !important; font-size: 11.5px; }

.main-box.rn-create .fee-group {
  display: flex; gap: 40px; width: 100%;
  border-top: 1px solid var(--rn-border-soft);
  padding-top: 16px; margin-top: 14px;
}
/* JS(toggleFeeFields)가 inline display:flex/none 토글 — 방향만 CSS가 담당 */
.main-box.rn-create .tenant-fee-section,
.main-box.rn-create .landlord-fee-section { flex-direction: column; gap: 8px; }
/* style.css:248 의 border-right #D9D9D9 진회색 세로선 누출 — 토큰 소프트 톤으로 (2026-09-02 재검수 R6) */
.main-box.rn-create .tenant-fee-section { border-right: 1px solid var(--rn-border-soft); }
.main-box.rn-create .tenant-fee-section > label,
.main-box.rn-create .landlord-fee-section > label {
  width: auto; line-height: 1.4; margin: 0;
  font-size: 12.5px; font-weight: 800; color: var(--rn-text);
}
.main-box.rn-create .fee-group .control-box { display: inline-flex; flex-direction: column; gap: 5px; }
.main-box.rn-create .fee-group .control-box:first-child { margin-bottom: 10px; }
.main-box.rn-create .fee-input { width: 200px; }

/* ─── 추가 계약자(임차2/임대2 — JS 동적 생성 .tenant-section/.landlord-section) ─── */
.main-box.rn-create .additional-fields-container .formList { margin-bottom: 12px; }

/* ─── 공동 작업자 (직원 필터 — 대시보드 pill 톤과 동일 · grab 커서 금지) ─── */
.main-box.rn-create .employee-filter-container { cursor: default; gap: 8px; padding-bottom: 6px; }
.main-box.rn-create .employee-filter-container > div {
  min-width: 0; border: none; border-radius: 8px; background: var(--rn-grey);
  font-size: 12.5px; font-weight: 700; color: var(--rn-grey-text);
}
.main-box.rn-create .dropdown-summary { padding: 8px 14px; list-style: none; white-space: nowrap; }
.main-box.rn-create .dropdown-summary::-webkit-details-marker { display: none; }
.main-box.rn-create .dropdown-options {
  border-radius: 10px; border: 1px solid var(--rn-border);
  box-shadow: 0 14px 34px rgba(34, 30, 28, .16);
  font-weight: 600; padding: 10px 12px; min-width: 168px;
}
.main-box.rn-create .dropdown-option { gap: 7px; font-size: 12.5px; }
.main-box.rn-create .dropdown-option input { accent-color: var(--rn-brand); }
.main-box.rn-create .selected-employees { margin: 8px 0 4px; gap: 6px; }
.main-box.rn-create .selected-employee { background: var(--rn-brand-soft); border-radius: 8px; padding: 4px 8px; }
.main-box.rn-create .selected-employee .employee-name { color: var(--rn-brand); font-size: 11.5px; font-weight: 750; }
.main-box.rn-create .selected-employee .remove-employee {
  background: none; border: none; color: var(--rn-brand); font-size: 12px;
}
.main-box.rn-create .selected-employee .remove-employee:hover { background: none; color: var(--rn-brand-hover); }

/* ─── 하단 버튼 ─── */
.main-box.rn-create .buttons-group { margin-top: 20px; }
.main-box.rn-create .buttons-group button,
.main-box.rn-create .print-button {
  height: 42px; border-radius: 10px; padding: 0 20px;
  font-size: 13px; font-weight: 700; border: none;
}
.main-box.rn-create #cancel-button { background: var(--rn-grey); color: var(--rn-grey-text); }
.main-box.rn-create #cancel-button:hover { background: var(--rn-grey-hover); color: var(--rn-grey-text); }
.main-box.rn-create .buttons-group button[type="submit"] { background: var(--rn-brand); color: #fff; min-width: 120px; }
.main-box.rn-create .buttons-group button[type="submit"]:hover { background: var(--rn-brand-hover); color: #fff; }
.main-box.rn-create #print-button,
.main-box.rn-create .print-button {
  background: var(--rn-card-bg); border: 1px solid var(--rn-input-border); color: var(--rn-grey-text);
}
.main-box.rn-create #print-button:hover,
.main-box.rn-create .print-button:hover { background: var(--rn-grey); color: var(--rn-grey-text); }

/* ─── 인쇄: 리뉴얼 배경 제거 (기존 인라인 print 규칙은 그대로 유지) ─── */
@media print {
  .rn.rn-create { background: var(--rn-card-bg); margin: 0; }
}

/* select 열림 목록 라운드 + 회색 톤 연속 (2026-09-02) */
@supports selector(::picker(select)) {
  .main-box.rn-create select::picker(select) { background: var(--rn-grey); border-color: var(--rn-border); }
  .main-box.rn-create select option:hover { background: var(--rn-grey-hover); }
}