/* =============================================================
   계약 등록 · 수정 창 — macOS 시트 모양 (승인된 맥 시안의 '모양'만)
   범위: #sales-modal 안쪽만. ui-skin-contract-modal.css(값 정리) 다음에 불러온다.
   입력 항목 · 순서 · 버튼 · 문구 · 저장 동작은 그대로. 시안에 있던 새 기능(등록증 붙여넣기 등)은 넣지 않는다.
   - 창 바탕은 연회색, 입력은 흰 묶음 칸(설정 앱처럼) 안에 줄로, 줄 사이 머리카락 선
   - 구역 제목은 작은 회색 글자, 고르는 버튼(사업자 유형 · 매출유형)은 회색 홈 안의 흰 칸(세그먼트)
   - 고르는 칸(select)은 흰 팝업 버튼 모양, 스위치는 파랑
   되돌리기: index.tsx 의 이 파일 <link> 한 줄을 빼면 1차 정리 상태로 돌아간다.
   ============================================================= */

/* ── 1. 창: 연회색 시트, 제목 왼쪽 파란 아이콘 칸 ── */
html #sales-modal > div{ background:var(--ui-bg) !important }
html #sales-modal #sales-modal-title{ display:flex; align-items:center; gap:10px }
html #sales-modal #sales-modal-title i{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; margin:0 !important;
  background:var(--ui-accent); color:var(--ui-on-accent) !important; border-radius:var(--ui-radius-card); font-size:var(--ui-text-callout) !important;
}
html #sales-modal > div > div > div:first-child{ padding-bottom:12px; margin-bottom:12px !important; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #sales-modal > div > div > div:last-child{ padding-top:12px; border-top:var(--ui-hairline) solid var(--ui-line) }

/* ── 2. 구역 제목: 줄 · 아이콘 없이 작은 회색 글자 ── */
html #sales-modal #sales-form-container > .grid > div > div.border-b:first-child{ border:0 !important; padding:0 4px !important; margin-bottom:6px !important }
html #sales-modal #sales-form-container > .grid > div > div.border-b:first-child *{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-2) !important }
html #sales-modal #sales-form-container > .grid > div > div.border-b:first-child i{ display:none }
html #sales-modal #sales-form-container > .grid > div.lg\:border-r{ border-right:0 !important }

/* ── 3. 묶음 칸: 각 열의 입력 묶음을 흰 칸으로 ── */
html #sales-modal #sales-form-container > .grid > div > div.space-y-1\.5{
  background:var(--ui-surface); border-radius:var(--ui-radius-group); padding:12px 14px; box-shadow:var(--ui-elev-raised);
}
/* 사업자 정보 줄: 왼쪽 이름 · 오른쪽 값, 줄 사이 머리카락 선 */
html #sales-modal #biz-info-fields{ margin-top:4px !important }
html #sales-modal #biz-info-fields > div.flex.items-center,
html #sales-modal #sales-form-container #other_employee_container, html #sales-modal #sales-form-container #work_other_employee_container{
  min-height:var(--ui-row); padding:4px 0; margin-top:0 !important;
}
html #sales-modal #biz-info-fields > div.flex.items-center + div.flex.items-center,
html #sales-modal #biz-info-fields > p + div.flex.items-center,
html #sales-modal #sales-form-container #work_other_employee_container{ border-top:var(--ui-hairline) solid var(--ui-line) }
html #sales-modal #biz-info-fields > div.pt-1{ border-top:var(--ui-hairline) solid var(--ui-line); padding-top:8px !important }
html #sales-modal #biz-info-fields label, html #sales-modal #other_employee_container > label, html #sales-modal #work_other_employee_container > label{
  color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important; font-size:var(--ui-text-body) !important;
}
/* 위에 붙는 이름(매출유형 · 브랜드 · 계약 품목 등)도 같은 모양 */
html #sales-modal #sales-form-container label.block, html #sales-modal #sales-form-container .grid.grid-cols-2.sm\:grid-cols-4 label{
  color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important;
}

/* ── 4. 세그먼트: 고르는 버튼 묶음은 회색 홈, 고른 칸은 흰 칸 + 그림자 ── */
html #sales-modal #sales-form-container div.grid:has(> button.border-2){
  background:var(--ui-fill); border-radius:var(--ui-radius-control); padding:2px; gap:2px !important;
}
html #sales-modal #sales-form-container div.grid > button.border-2{
  background:transparent !important; border:0 !important; color:var(--ui-text-1) !important; min-height:calc(var(--ui-control) - 4px);
  border-radius:var(--ui-radius-row) !important; font-weight:var(--ui-weight-regular) !important; box-shadow:none !important;
}
html #sales-modal #sales-form-container div.grid > button.border-2:hover{ background:var(--ui-fill-subtle) !important }
html #sales-modal #sales-form-container div.grid > button.border-2.border-blue-500,
html #sales-modal #sales-form-container div.grid > button.border-2.bg-blue-50,
html #sales-modal #sales-form-container div.grid > button.border-2.border-orange-500,
html #sales-modal #sales-form-container div.grid > button.border-2.border-purple-500{
  background:var(--ui-surface) !important; color:var(--ui-text-1) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important;
}
html #sales-modal #sales-form-container div.grid > button.border-2 i{ color:var(--ui-text-2) !important }

/* ── 5. 팝업 버튼(select) · 입력 칸 ── */
html #sales-modal select{ box-shadow:var(--ui-elev-control) !important; border-color:transparent !important; cursor:pointer }
html #sales-modal select:focus{ box-shadow:var(--ui-focus-ring) !important }

/* ── 6. 추후입력 줄: 노란 띠 → 흰 칸 안의 한 줄 + 파란 스위치 ── */
html #sales-modal #sales-form-container [class*="bg-amber-50"]{ background:var(--ui-fill-subtle) !important; border:0 !important; border-radius:var(--ui-radius-control) !important }
html #sales-modal #sales-form-container [class*="bg-amber-50"] span{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important }
html #sales-modal #sales-form-container [class*="bg-amber-50"] i{ color:var(--ui-text-2) !important }
/* 스위치 바탕: 'peer-checked:bg-amber-500' 이름이 위 [class*="bg-amber-50"] 규칙에 걸려 켜도 회색이던 것 바로잡기 */
html #sales-modal #sales-form-container input.peer + div{ background:var(--ui-fill) !important; border:0 !important }
html #sales-modal #sales-form-container input.peer:checked + div{ background:var(--ui-accent) !important }

/* ── 7. 사업자등록증 칸: 흰 묶음 안에서 연한 점선 칸 ── */
html #sales-modal #sales-upload-label{ background:var(--ui-surface-alt) !important }

/* ── 8. 안내 띠(계산서 · 입금 자동 반영) ── */
html #sales-modal #invoice_match_display, html #sales-modal #payment_match_display{ background:var(--ui-fill-subtle) !important; border:0 !important; color:var(--ui-text-2) !important }

/* ── 9. 텍스트 입력란: 맥 입력란 — 테두리 대신 안쪽 머리카락 선 + 살짝 눌린 그림자, 모서리 6px ── */
html #sales-modal input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.bg-transparent),
html #sales-modal textarea{
  border:0 !important; box-shadow:var(--ui-elev-field) !important; border-radius:var(--ui-radius-row) !important; background:var(--ui-surface) !important;
}
html #sales-modal input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.bg-transparent):focus,
html #sales-modal textarea:focus{ box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
html #sales-modal input[readonly], html #sales-modal input:disabled{ background:var(--ui-fill-subtle) !important; box-shadow:none !important }
/* 1차 스킨의 '.rounded-lg → 7px' 규칙(아이디 두 개)보다 우선 */
html #sales-modal #sales-form-container input.rounded-lg:not([type=checkbox]):not([type=radio]):not([type=file]), html #sales-modal #sales-form-container textarea.rounded-lg{ border-radius:var(--ui-radius-row) !important }
/* 금액 · 숫자 칸은 오른쪽 정렬, 숫자 폭 고정 */
html #sales-modal input[inputmode="numeric"], html #sales-modal input.text-right, html #sales-modal #contract_amount_input{ text-align:right !important; font-variant-numeric:tabular-nums }

/* ── 10. 매출유형 안내 한 줄: 연한 보라 · 주황 글자 → 읽히는 회색 ── */
html #sales-modal .text-purple-400, html #sales-modal .text-orange-400{ color:var(--ui-text-2) !important }

@media (max-width:767px){
  html #sales-modal #sales-form-container > .grid > div > div.space-y-1\.5{ padding:10px 12px }
  /* 계약 품목 · 내부비용 표: 휴대폰에선 칸이 쪼개지지 않게 최소 폭을 주고 표만 옆으로 밀기 */
  html #sales-modal #ct-items-box, html #sales-modal div.border.rounded-lg:has(> table #oc-tbody){ overflow-x:auto !important; -webkit-overflow-scrolling:touch }
  html #sales-modal #ct-items-box > table, html #sales-modal div.border.rounded-lg:has(> table #oc-tbody) > table{ min-width:560px }
  /* 계산서 · 입금 안내: 휴대폰에서 '…'로 잘리지 않게 줄바꿈 */
  html #sales-modal #invoice_match_display, html #sales-modal #payment_match_display{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important }
}

/* ━━ 휴대폰: 사업자등록증 올리기 칸 낮게 (세로 스크롤 줄이기) ━━
   원래 199px(큰 동그라미 아이콘 + 3줄 안내)이 창 맨 위를 차지 → 한 줄 버튼 크기(약 56px). 누르면 파일 고르기는 그대로.
   휴대폰에선 끌어다 놓기를 못 하므로 '끌어다 놓거나 … 클릭하여 업로드' 줄만 숨기고, 파일 형식 안내는 남김. */
@media (max-width:767px){
  html #sales-modal #sales-upload-label{ display:grid !important; grid-template-columns:auto minmax(0,1fr); column-gap:10px !important; row-gap:0 !important; justify-items:start; text-align:left !important; min-height:0 !important; padding:8px 12px !important }
  html #sales-modal #sales-upload-label > span:first-child{ grid-row:1 / span 2; width:var(--ui-control) !important; height:var(--ui-control) !important; font-size:var(--ui-text-callout) !important }
  html #sales-modal #sales-upload-label > span:nth-child(3){ display:none !important }
}