/* =============================================================
   계약 등록 · 수정 창 스킨 — 공통 화면 규칙(ui-tokens.css) 적용
   범위: #sales-modal 안쪽만. 배치 · 입력 항목 · 저장 동작은 그대로, "값"만 규칙으로.
   계약관리 화면 스킨(ui-skin-contract.css)과 같은 규칙: 채운 파랑은 '저장' 하나,
   선택된 칸은 연한 파랑, 입력칸은 흰 바탕 + 머리카락 선, 11px 미만 글자 없음, 굵기 400/600/700.
   되돌리기: index.tsx 의 이 파일 <link> 한 줄을 빼면 원래 창.
   ============================================================= */

/* ── 1. 창 틀 ── */
html #sales-modal > div{
  background:var(--ui-surface) !important; border-radius:var(--ui-radius-sheet) !important;
  box-shadow:var(--ui-elev-sheet) !important; font-family:var(--ui-font) !important; color:var(--ui-text-1);
}
html #sales-modal *:not(i):not(.fas):not(.far):not(.fa){ font-family:var(--ui-font) !important }
html #sales-modal #sales-modal-title{ font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important; letter-spacing:var(--ui-tracking-tight) }
html #sales-modal #sales-modal-title i{ color:var(--ui-accent) !important }
html #sales-modal button[onclick="closeSalesModal()"]:has(.fa-times){
  width:28px; height:28px; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill) !important;
  color:var(--ui-text-2) !important; font-size:var(--ui-text-body) !important; display:inline-flex; align-items:center; justify-content:center;
}
html #sales-modal h4, html #sales-modal .border-b{ border-color:var(--ui-line) !important }
html #sales-modal .lg\:border-gray-100, html #sales-modal .lg\:border-r{ border-color:var(--ui-line) !important }

/* ── 2. 글자 크기 · 굵기 · 색 ── */
html #sales-modal .text-\[10px\], html #sales-modal .text-\[10\.5px\], html #sales-modal .text-\[11px\]{ font-size:var(--ui-text-caption) !important }
html #sales-modal .text-\[11\.5px\], html #sales-modal .text-\[12px\], html #sales-modal .text-xs{ font-size:var(--ui-text-footnote) !important }
html #sales-modal .text-\[13px\], html #sales-modal .text-sm{ font-size:var(--ui-text-body) !important }
html #sales-modal .text-\[14px\]{ font-size:var(--ui-text-callout) !important }
html #sales-modal .font-extrabold, html #sales-modal .font-black{ font-weight:var(--ui-weight-bold) !important }
html #sales-modal .font-medium{ font-weight:var(--ui-weight-regular) !important }
html #sales-modal .text-gray-900, html #sales-modal .text-gray-800, html #sales-modal .text-gray-700,
html #sales-modal .text-slate-800, html #sales-modal .text-slate-700{ color:var(--ui-text-1) !important }
html #sales-modal .text-gray-600, html #sales-modal .text-gray-500, html #sales-modal .text-gray-400,
html #sales-modal .text-slate-600, html #sales-modal .text-slate-500, html #sales-modal .text-slate-400{ color:var(--ui-text-2) !important }
html #sales-modal .text-gray-300{ color:var(--ui-text-3) !important }
html #sales-modal .text-blue-400, html #sales-modal .text-blue-500, html #sales-modal .text-blue-600, html #sales-modal .text-blue-700, html #sales-modal .text-blue-800{ color:var(--ui-accent-text) !important }
html #sales-modal .text-red-500, html #sales-modal .text-red-600, html #sales-modal .text-rose-500, html #sales-modal .text-rose-600{ color:var(--ui-danger) !important }
html #sales-modal .text-emerald-600, html #sales-modal .text-emerald-700, html #sales-modal .text-green-600, html #sales-modal .text-green-700{ color:var(--ui-text-1) !important }
html #sales-modal .text-amber-700, html #sales-modal .text-amber-600, html #sales-modal .text-orange-600{ color:var(--ui-warning) !important }
html #sales-modal .text-amber-400, html #sales-modal .text-amber-500{ color:var(--ui-warning-dot) !important }

/* ── 3. 입력칸 · 선택칸: 흰 바탕 + 머리카락 선, 높이 28 (모바일 36) ── */
html #sales-modal input:not([type=checkbox]):not([type=radio]):not([type=file]),
html #sales-modal select, html #sales-modal textarea{
  background:var(--ui-surface) !important; border:var(--ui-hairline) solid var(--ui-line-control) !important;
  border-radius:var(--ui-radius-control) !important; color:var(--ui-text-1) !important; box-shadow:none !important;
}
html #sales-modal input:not([type=checkbox]):not([type=radio]):not([type=file]), html #sales-modal select{
  min-height:var(--ui-control); padding-top:3px !important; padding-bottom:3px !important;
}
html #sales-modal input::placeholder, html #sales-modal textarea::placeholder{ color:var(--ui-text-3) !important; opacity:1 }
html #sales-modal input:focus, html #sales-modal select:focus, html #sales-modal textarea:focus{
  border-color:var(--ui-accent) !important; box-shadow:var(--ui-focus-ring) !important; outline:none !important;
}
html #sales-modal input[readonly], html #sales-modal input:disabled, html #sales-modal select:disabled{ background:var(--ui-fill-subtle) !important; color:var(--ui-text-2) !important }
html #sales-modal input.bg-transparent{ background:transparent !important; border-color:transparent !important }
html #sales-modal input.bg-transparent:focus{ background:var(--ui-surface) !important; border-color:var(--ui-accent) !important }
html #sales-modal input[type=checkbox], html #sales-modal input[type=radio]{ accent-color:var(--ui-accent) }

/* ── 4. 고르는 버튼(매출유형 · 사업자 유형 · 담당 등): 회색 칸, 고른 칸은 연한 파랑 ── */
html #sales-modal button.border-2{
  border:var(--ui-hairline) solid transparent !important; background:var(--ui-fill) !important; color:var(--ui-text-1) !important;
  border-radius:var(--ui-radius-control) !important; min-height:var(--ui-control); box-shadow:none !important;
}
html #sales-modal button.border-2:hover{ background:var(--ui-fill-hover) !important }
html #sales-modal button.border-2.border-blue-500, html #sales-modal button.border-2.bg-blue-50{
  background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; border-color:var(--ui-accent) !important;
}
html #sales-modal button.border-2 i{ color:inherit !important }

/* ── 5. 보조 버튼(+ 품목 추가 · 상품구입비용 계산 · 외주 행 추가 · 담당자 추가) ── */
html #sales-modal #sales-form-container button:not(.border-2):not([class*="bg-blue-6"]):not(.bg-transparent){ border-radius:var(--ui-radius-control) !important; box-shadow:none !important }
html #sales-modal #sales-form-container button.border-blue-100, html #sales-modal #sales-form-container button.border-blue-200,
html #sales-modal #sales-form-container button.bg-blue-50{
  background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; border-color:transparent !important;
  min-height:var(--ui-control-sm); font-weight:var(--ui-weight-semibold) !important;
}
html #sales-modal #sales-form-container button.border-blue-100:hover, html #sales-modal #sales-form-container button.bg-blue-50:hover{ background:var(--ui-accent-tint) !important; filter:brightness(.97) }

/* ── 6. 아래 버튼: 취소 회색 · 저장 채운 파랑 (창 안 유일한 채운 파랑) ── */
html #sales-modal button[onclick="closeSalesModal()"]:not(:has(.fa-times)){
  height:var(--ui-control); border:0 !important; background:var(--ui-fill) !important; color:var(--ui-text-1) !important;
  border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important;
}
html #sales-modal button[onclick="closeSalesModal()"]:not(:has(.fa-times)):hover{ background:var(--ui-fill-hover) !important }
html #sales-modal #save-btn{
  height:var(--ui-control); border:0 !important; background:var(--ui-accent) !important; color:var(--ui-on-accent) !important;
  border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; box-shadow:none !important;
}
html #sales-modal #save-btn:hover{ background:var(--ui-accent-hover) !important }
html #sales-modal #save-btn:focus-visible, html #sales-modal button:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) !important }
html #sales-modal #save-btn:disabled{ background:var(--ui-fill) !important; color:var(--ui-text-2) !important }
/* 창 안의 다른 채운 파랑 버튼은 연한 파랑으로 (채운 파랑은 저장 하나) */
html #sales-modal #sales-form-container button.bg-blue-600, html #sales-modal #sales-form-container button.bg-blue-500{
  background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important;
}

/* ── 7. 색 바탕 칸 → 규칙 바탕 ── */
html #sales-modal #sales-upload-label{
  border:1px dashed var(--ui-line-dashed) !important; background:var(--ui-surface-alt) !important; border-radius:var(--ui-radius-panel) !important;
}
html #sales-modal #sales-upload-label:hover{ background:var(--ui-fill-subtle) !important; border-color:var(--ui-accent) !important }
html #sales-modal #sales-upload-label > span:first-child{ background:var(--ui-accent-tint) !important; color:var(--ui-accent) !important }
html #sales-modal .bg-gray-50, html #sales-modal .bg-slate-50{ background:var(--ui-fill-subtle) !important }
html #sales-modal .bg-gray-100, html #sales-modal .bg-slate-100{ background:var(--ui-fill-subtle) !important }
html #sales-modal [class*="bg-amber-50"], html #sales-modal .bg-yellow-50, html #sales-modal .bg-orange-50{ background:var(--ui-warning-tint) !important; border-color:transparent !important }
/* 입력 묶음 상자(메일 · 미리보기)는 파랑 대신 옅은 회색 — 파랑은 '고른 것'에만 쓴다 */
html #sales-modal div[class*="bg-blue-50/"]{ background:var(--ui-fill-subtle) !important; border-color:transparent !important }
html #sales-modal div.bg-blue-50, html #sales-modal .bg-sky-50, html #sales-modal .bg-indigo-50{ background:var(--ui-accent-tint) !important; border-color:transparent !important }
html #sales-modal .bg-emerald-50, html #sales-modal .bg-green-50{ background:var(--ui-success-tint) !important; border-color:transparent !important }
html #sales-modal .bg-rose-50, html #sales-modal .bg-red-50{ background:var(--ui-danger-tint) !important; border-color:transparent !important }
html #sales-modal .bg-purple-50, html #sales-modal .bg-violet-50{ background:var(--ui-fill-subtle) !important; border-color:transparent !important }
html #sales-modal .border, html #sales-modal .border-gray-100, html #sales-modal .border-gray-200, html #sales-modal .border-gray-300,
html #sales-modal .border-slate-100, html #sales-modal .border-slate-200, html #sales-modal .border-blue-100{ border-color:var(--ui-line) !important }
html #sales-modal .divide-y > * + *, html #sales-modal .divide-gray-100 > * + *{ border-color:var(--ui-line) !important }
/* 켜고 끄는 스위치(사업자정보 추후입력) */
html #sales-modal .peer:checked ~ div, html #sales-modal .peer-checked\:bg-amber-500.peer-checked\:bg-amber-500{ background:var(--ui-warning) }
html #sales-modal input.peer:checked + div{ background:var(--ui-accent) !important }

/* ── 8. 모서리 · 그림자 정리 ── */
html #sales-modal #sales-form-container .rounded-xl, html #sales-modal #sales-form-container .rounded-2xl{ border-radius:var(--ui-radius-group) !important }
html #sales-modal #sales-form-container .rounded-lg, html #sales-modal #sales-form-container .rounded-md{ border-radius:var(--ui-radius-control) !important }
html #sales-modal #sales-form-container [class*="shadow"]{ box-shadow:none !important }
html #sales-modal .tabular-nums{ letter-spacing:0 }

/* ── 9. 모바일: 누르기 쉬운 높이 36 · 아래 버튼 넓게 ── */
@media (max-width:767px){
  html #sales-modal > div{ margin:0 !important; max-height:100vh !important; height:100%; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 !important }
  html #sales-modal input:not([type=checkbox]):not([type=radio]):not([type=file]), html #sales-modal select,
  html #sales-modal button.border-2, html #sales-modal #save-btn, html #sales-modal button[onclick="closeSalesModal()"]:not(:has(.fa-times)){ min-height:var(--ui-control-mobile) }
  html #sales-modal #save-btn, html #sales-modal button[onclick="closeSalesModal()"]:not(:has(.fa-times)){ flex:1 }
}
@media (prefers-reduced-motion:reduce){ html #sales-modal *{ transition-duration:0ms !important } }