/* =============================================================
   외주비용 상세 입력 창 — macOS 시트 모양 (계약 등록 · 수정 창과 같은 규칙)
   범위: #outsourcing-detail-modal 안쪽만. 계약 창 · 견적서 창 · 계약 목록 어디서 열어도 같은 모양.
   입력 칸 · 순서 · 버튼 · 문구 · 계산 · 저장 동작은 그대로. 색 · 글자 크기 · 굵기 · 테두리 · 배치만.
   - 진한 청록 · 진한 남색 칸 → 흰 묶음 칸, 채운 파란 버튼은 '저장'(견적서에서 열 땐 '견적서에 반영') 하나
   - 결제방식 · 계산방식 고르기는 세그먼트(회색 홈 안 흰 칸) — 고른 칸은 JS 가 붙이는 text-white 로 알아본다
   되돌리기: index.tsx 의 이 파일 <link> 한 줄을 빼면 원래 모양.
   ============================================================= */

/* ── 1. 창 · 머리 · 아래 막대 ── */
html #outsourcing-detail-modal > div{ background:var(--ui-bg) !important; border-radius:var(--ui-radius-sheet) !important; box-shadow:var(--ui-elev-sheet) !important; font-family:var(--ui-font) }
html #outsourcing-detail-modal > div > div.sticky{ background:var(--ui-material) !important; backdrop-filter:var(--ui-material-blur); border-color:var(--ui-line) !important }
html #outsourcing-detail-modal h3{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important; gap:10px !important }
html #outsourcing-detail-modal h3 > i{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--ui-accent); color:var(--ui-on-accent) !important; border-radius:var(--ui-radius-card); font-size:var(--ui-text-callout) !important;
}
html #outsourcing-detail-modal button[onclick="closeOutsourcingModal()"]:not(.border){
  width:var(--ui-target-min); height:var(--ui-target-min); border-radius:var(--ui-radius-pill); background:var(--ui-fill) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-body) !important;
}
/* 아래 버튼: 취소는 회색, 저장 · 견적서에 반영은 채운 파랑(둘은 동시에 안 보임) */
html #outsourcing-detail-modal > div > div.sticky.bottom-0 button{ min-height:var(--ui-control); border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; padding:0 18px !important }
html #outsourcing-detail-modal > div > div.sticky.bottom-0 button.border{ background:var(--ui-fill) !important; border:0 !important; color:var(--ui-text-1) !important }
html #outsourcing-detail-modal #osm-save-btn, html #outsourcing-detail-modal #osm-reflect-btn{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important }
html #outsourcing-detail-modal #osm-save-btn:hover, html #outsourcing-detail-modal #osm-reflect-btn:hover{ background:var(--ui-accent-hover) !important }

/* ── 2. 글자: 9 ~ 10.5px → 11px, 굵기 800 → 700 ── */
html #outsourcing-detail-modal [class*="text-[9"], html #outsourcing-detail-modal [class*="text-[10"]{ font-size:var(--ui-text-caption) !important }
html #outsourcing-detail-modal .font-extrabold{ font-weight:var(--ui-weight-bold) !important }
html #outsourcing-detail-modal .text-gray-400, html #outsourcing-detail-modal .text-slate-500, html #outsourcing-detail-modal .text-slate-600{ color:var(--ui-text-2) !important }
html #outsourcing-detail-modal .text-slate-700, html #outsourcing-detail-modal .text-gray-600{ color:var(--ui-text-1) !important }
html #outsourcing-detail-modal .text-red-400{ color:var(--ui-danger) !important }

/* ── 3. 왼쪽 표: 흰 묶음 칸, 머리줄은 작은 회색 글자, 구역 줄은 연회색 ── */
html #outsourcing-detail-modal .lg\:col-span-2{ border-color:transparent !important }
html #outsourcing-detail-modal .lg\:col-span-2 > div.border.rounded-xl{ background:var(--ui-surface); border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:var(--ui-elev-raised) }
html #outsourcing-detail-modal thead tr{ background:transparent !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important }
html #outsourcing-detail-modal thead th{ font-weight:var(--ui-weight-semibold) !important; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #outsourcing-detail-modal tbody tr{ border-color:var(--ui-line) !important }
html #outsourcing-detail-modal #osm-out-head tr, html #outsourcing-detail-modal #osm-product-head tr{ background:var(--ui-fill-subtle) !important }
html #outsourcing-detail-modal #osm-out-head td, html #outsourcing-detail-modal #osm-product-head td{ color:var(--ui-text-2) !important; font-weight:var(--ui-weight-semibold) !important; letter-spacing:0 !important }
/* 외주 · 상품 꼬리표: 진한 칸 → 연한 칸 */
html #outsourcing-detail-modal tr.osm-outsourcing-item td:first-child > span{ background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; font-weight:var(--ui-weight-semibold) !important }
html #outsourcing-detail-modal tr.osm-product-cost-item td:first-child > span{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #outsourcing-detail-modal .osm-fee-line{ color:var(--ui-text-2) !important }
/* 합계 줄: 연파랑 + 굵은 선 → 연회색 + 머리카락 선 */
html #outsourcing-detail-modal tfoot tr{ background:var(--ui-fill-subtle) !important; border-top:var(--ui-hairline) solid var(--ui-line) !important }
html #outsourcing-detail-modal tfoot td{ color:var(--ui-text-1) !important }
html #outsourcing-detail-modal tr.osm-item button[onclick^="osmRemoveItem"]{ color:var(--ui-text-3) !important }
html #outsourcing-detail-modal tr.osm-item button[onclick^="osmRemoveItem"]:hover{ color:var(--ui-danger) !important }

/* ── 4. 입력 칸: 계약 창과 같은 맥 입력란 ── */
html #outsourcing-detail-modal input:not([type=hidden]):not([type=date]), html #outsourcing-detail-modal select{
  border:0 !important; box-shadow:var(--ui-elev-field) !important; border-radius:var(--ui-radius-row) !important; background-color:var(--ui-surface) !important;
  font-size:var(--ui-text-footnote) !important; color:var(--ui-text-1) !important; min-height:var(--ui-control-sm);
}
html #outsourcing-detail-modal input:not([type=hidden]):not([type=date]):focus, html #outsourcing-detail-modal select:focus{ box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important; outline:none !important }
html #outsourcing-detail-modal input:disabled, html #outsourcing-detail-modal input[readonly]{ background-color:var(--ui-fill-subtle) !important; color:var(--ui-text-2) !important; box-shadow:none !important }
html #outsourcing-detail-modal .osm-paid-date-box > div{ border:0 !important; box-shadow:var(--ui-elev-field); border-radius:var(--ui-radius-row) !important }

/* ── 5. 행 추가 버튼: 채운 파랑 · 청록 → 연한 파랑 보조 버튼 ── */
html #outsourcing-detail-modal button[onclick^="osmAddOutsourcingItem"], html #outsourcing-detail-modal button[onclick^="osmAddProductCostItem"],
html #outsourcing-detail-modal #osm-product-trigger > button{
  background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; border:0 !important; border-radius:var(--ui-radius-control) !important;
  min-height:var(--ui-control-sm); font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; box-shadow:none !important; transition:none !important;
}
html #outsourcing-detail-modal #osm-product-trigger > button:hover, html #outsourcing-detail-modal button[onclick^="osmAdd"]:hover{ filter:brightness(.97) }
/* 회색 바탕 위에 놓이는 '체험단 상품비용 추가'는 흰 보조 버튼(연파랑은 회색 위에서 대비 미달) */
html #outsourcing-detail-modal #osm-product-trigger > button{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important }

/* ── 6. 오른쪽 합계: 색 칸 3개 → 흰 묶음 안의 줄 3개, 마지막 줄만 크게 ── */
html #outsourcing-detail-modal .lg\:col-span-2 + div{ background:transparent !important; gap:0 !important }
html #outsourcing-detail-modal .lg\:col-span-2 + div > div.rounded-xl:not(.bg-amber-50){
  background:var(--ui-surface) !important; border-radius:0 !important; padding:10px 14px !important; border-top:var(--ui-hairline) solid var(--ui-line);
}
html #outsourcing-detail-modal .lg\:col-span-2 + div > div.rounded-xl:not(.bg-amber-50):not(.hidden){ box-shadow:var(--ui-elev-raised) }
html #outsourcing-detail-modal .lg\:col-span-2 + div > div.rounded-xl:first-child,
html #outsourcing-detail-modal #osm-tile-out.hidden + div{ border-radius:var(--ui-radius-group) var(--ui-radius-group) 0 0 !important; border-top:0 }
html #outsourcing-detail-modal .lg\:col-span-2 + div > div.rounded-xl:nth-child(3){ border-radius:0 0 var(--ui-radius-group) var(--ui-radius-group) !important }
html #outsourcing-detail-modal .lg\:col-span-2 + div > div.rounded-xl:not(.bg-amber-50) > span:first-child{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #outsourcing-detail-modal .lg\:col-span-2 + div > div.rounded-xl:not(.bg-amber-50) > span:last-child{ color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; font-variant-numeric:tabular-nums }
html #outsourcing-detail-modal #osm-total-all{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-bold) !important }
/* 도움말 칸(노랑) → 연회색 */
html #outsourcing-detail-modal .bg-amber-50{ background:var(--ui-fill-subtle) !important; border:0 !important; color:var(--ui-text-2) !important }
html #outsourcing-detail-modal .lg\:col-span-2 + div > .bg-amber-50{ margin-top:12px !important; font-size:var(--ui-text-caption) !important }
html #outsourcing-detail-modal .bg-amber-50 button{ color:var(--ui-accent-text) !important }

/* ── 7. 결제/수수료 밴드: 연청록 칸 → 흰 묶음 칸, 고르기는 세그먼트 ── */
html #outsourcing-detail-modal #osm-contract-fee-panel{ background:var(--ui-surface) !important; border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:var(--ui-elev-raised) }
html #outsourcing-detail-modal #osm-contract-fee-panel > div:first-child > span:first-child{ color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important }
html #outsourcing-detail-modal #osm-contract-fee-panel > div:first-child > span.ml-auto{ color:var(--ui-text-2) !important; background:var(--ui-fill) !important; border:0 !important; font-weight:var(--ui-weight-semibold) !important }
html #outsourcing-detail-modal #osm-contract-fee-panel > div:nth-child(2) > div.flex.gap-2:first-child{ background:var(--ui-fill); border-radius:var(--ui-radius-control); padding:2px; gap:2px !important }
html #outsourcing-detail-modal #osm-contract-type-cash, html #outsourcing-detail-modal #osm-contract-type-invoice{
  background:transparent !important; border:0 !important; border-radius:var(--ui-radius-row) !important; color:var(--ui-text-1) !important;
  font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; box-shadow:none !important;
}
html #outsourcing-detail-modal #osm-contract-type-cash.text-white, html #outsourcing-detail-modal #osm-contract-type-invoice.text-white{
  background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important;
}
html #outsourcing-detail-modal #osm-contract-type-cash > span, html #outsourcing-detail-modal #osm-contract-type-invoice > span{ color:var(--ui-text-2) !important; opacity:1 !important; font-weight:var(--ui-weight-regular) !important; word-break:keep-all }
html #outsourcing-detail-modal #osm-contract-fee-config{ border-left-color:var(--ui-line) !important; border-left-style:solid !important }
html #outsourcing-detail-modal #osm-fee-method-toggle{ background:var(--ui-fill); border:0 !important; border-radius:var(--ui-radius-control) !important; padding:2px; gap:2px }
html #outsourcing-detail-modal #osm-fee-method-toggle > button{
  background:transparent !important; border:0 !important; border-radius:var(--ui-radius-row) !important; color:var(--ui-text-1) !important;
  font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important;
}
html #outsourcing-detail-modal #osm-fee-method-toggle > button.text-white{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control); font-weight:var(--ui-weight-semibold) !important }
html #outsourcing-detail-modal #osm-contract-fee-config label{ color:var(--ui-text-2) !important; font-weight:var(--ui-weight-semibold) !important }
html #outsourcing-detail-modal #osm-contract-fee-config [style*="color"]{ color:var(--ui-text-1) !important }

/* ── 8. 휴대폰: 표는 칸 폭을 지키고 옆으로 밀기, 결제 밴드는 위아래로 ── */
@media (max-width:767px){
  html #outsourcing-detail-modal > div{ margin:0 !important; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 !important; max-height:96vh !important }
  html #outsourcing-detail-modal > div > div.sticky{ padding-left:16px !important; padding-right:16px !important }
  html #outsourcing-detail-modal .lg\:col-span-2{ padding-left:12px !important; padding-right:12px !important }
  html #outsourcing-detail-modal .lg\:col-span-2 > div.border.rounded-xl{ overflow-x:auto !important; -webkit-overflow-scrolling:touch }
  html #outsourcing-detail-modal .lg\:col-span-2 > div.border.rounded-xl > table{ min-width:600px }
  html #outsourcing-detail-modal .lg\:col-span-2 + div{ padding-left:12px !important; padding-right:12px !important }
  html #outsourcing-detail-modal #osm-contract-fee-panel{ margin-left:12px !important; margin-right:12px !important }
  html #outsourcing-detail-modal #osm-contract-fee-panel > div:nth-child(2) > div{ min-width:0 !important; flex:1 1 100% !important }
  html #outsourcing-detail-modal #osm-contract-fee-config{ border-left:0 !important; padding-left:0 !important }
  /* 결제방식 두 칸은 글이 길어 휴대폰에선 위아래로 */
  html #outsourcing-detail-modal #osm-contract-fee-panel > div:nth-child(2) > div.flex.gap-2:first-child{ flex-direction:column }
  html #outsourcing-detail-modal > div > div.sticky.bottom-0 button{ min-height:var(--ui-control-mobile); flex:1 }
}