/* =============================================================
   성과급 · 추가지급 창 맥 시트 — 추가지급항목 설정 · 파트장 팀 인센티브 산출규칙 · 계약별 산출내역 · 확인 필요 계약 귀속 지정.
   마크업(테일윈드 창)은 그대로, 이 창들 id 안쪽만 덮는다. 값은 ui-tokens.css 에서만. 화면에서만(인쇄 그대로).
   흰 시트 · 뒤 배경 옅게(흐림 없음) · 제목 17px(앞 아이콘 숨김) · 닫기 회색 동그라미 · 칸 28px · 표 머리 회색 12px ·
   탭 → 회색 분할 단추 · 파란/주황 안내 상자 → 회색 묶음(주황 '확인 필요' 글자는 그대로) ·
   채운 단추는 창마다 주 행동 하나(추가지급 [저장] · 귀속 지정 [저장]), 금액 계산 · 저장은 그대로.
   휴대폰: 아래에서 올라오는 시트. 되돌리기: index.tsx 의 이 파일 <link> 한 줄.
   ============================================================= */
@media screen {
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal){ background:var(--ui-scrim) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; font-family:var(--ui-font) }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) *{ font-family:var(--ui-font) }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section){ border:0 !important; border-radius:var(--ui-radius-sheet) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-sheet) !important; color:var(--ui-text-1) }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) > :is(header, div:first-child){ min-height:44px; padding:10px 10px 10px 16px !important; background:var(--ui-surface) !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) > :is(header, div:first-child) :is(h2, h3){ margin-top:0 !important; font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-semibold) !important; letter-spacing:normal !important; color:var(--ui-text-1) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) > :is(header, div:first-child) :is(h2, h3) > i.fas{ display:none }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) > :is(header, div:first-child) p{ font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) > :is(header, div:first-child) p.text-blue-600{ font-weight:var(--ui-weight-semibold) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) > :is(header, div:first-child) p :is(.text-amber-700){ color:var(--ui-text-1) !important }
/* 바닥 단추 줄 */
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) > div:last-child:not(:first-child):has(> button){ gap:8px !important; padding:10px 16px !important; background:var(--ui-surface) !important; border-top:var(--ui-hairline) solid var(--ui-line) !important; border-radius:0 !important }
/* 탭 → 분할 단추 */
html #ep-modal > div > div:nth-child(2){ gap:2px; margin:8px 16px 0; padding:2px !important; border:0 !important; border-radius:var(--ui-radius-control); background:var(--ui-fill) !important }
html #ep-modal [id^="ep-tab-"]:not([id^="ep-tab-content"]){ flex:1; height:24px; padding:0 8px !important; border:0 !important; border-radius:calc(var(--ui-radius-control) - 2px) !important; background:transparent !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #ep-modal [id^="ep-tab-"].bg-amber-50{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important }
/* 표 */
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) table{ font-size:var(--ui-text-body) !important; font-variant-numeric:tabular-nums }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) thead, html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) thead th{ background:var(--ui-fill-subtle) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) th{ height:28px; padding:0 10px !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) td{ padding:7px 10px !important; border-color:var(--ui-line) !important }
/* 칸 */
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select){ height:var(--ui-control) !important; min-height:0 !important; padding:0 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background-color:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) textarea{ padding:6px 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-field) !important; font-size:var(--ui-text-body) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) :is(input, select, textarea):focus{ outline:none !important; box-shadow:var(--ui-focus-ring) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) :is(input[type="checkbox"], input[type="radio"]){ accent-color:var(--ui-accent) }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) .text-\[10px\]{ font-size:var(--ui-text-caption) !important }
/* 안내 · 항목 상자 → 회색 묶음 */
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) :is(.bg-blue-50, .bg-slate-50, .bg-gray-50, .bg-green-50, .bg-amber-50):not(button):not(thead):not([id^="ep-tab-"]){ border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-fill-subtle) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) :is(.text-blue-900, .text-blue-800, .text-green-700){ color:var(--ui-text-1) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) :is(.border-gray-100, .border-slate-200, .border-blue-100).rounded-lg, html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) :is(.border-gray-100, .border-slate-200, .border-blue-100).rounded-xl{ border:0 !important; box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) }
/* 단추: 흰 단추가 기본 */
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) button{ display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:0 !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) > div:last-child:not(:first-child) > button{ height:var(--ui-control) !important; padding:0 14px !important; font-size:var(--ui-text-body) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) button > i.fas{ color:inherit }
html #ep-modal button.border-dashed{ background:transparent !important; box-shadow:inset 0 0 0 1px var(--ui-line-dashed) !important; color:var(--ui-accent-text) !important }
/* 주 행동 하나 = 채운 파랑 */
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) :is(button[onclick^="saveExtraPayAll"], button[onclick^="_saveTeamIncentivePendingAssignment"]){ background:var(--ui-accent) !important; box-shadow:none !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-semibold) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) :is(button[onclick^="saveExtraPayAll"], button[onclick^="_saveTeamIncentivePendingAssignment"]):hover{ background:var(--ui-accent-hover) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) :is(button[onclick^="saveExtraPayAll"], button[onclick^="_saveTeamIncentivePendingAssignment"]) > i.fas{ display:none }
/* 위험 = 흰 단추 + 빨간 글자 */
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) button:is(.text-red-500, .text-red-600, .bg-red-500, .bg-red-600, .hover\:text-red-500){ color:var(--ui-danger) !important }
/* 닫기: 회색 동그라미(맨 끝에 — 흰 단추 규칙보다 뒤) */
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) > :is(header, div:first-child) > button:last-child{ width:22px !important; height:22px !important; padding:0 !important; border-radius:50% !important; background:var(--ui-fill) !important; box-shadow:none !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-callout) !important; line-height:1 !important; flex:none }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) > :is(header, div:first-child) > button:last-child :is(i, svg){ width:10px; height:10px; font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) > :is(header, div:first-child) > button:last-child:hover{ background:var(--ui-fill-hover) !important }
html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) button:focus-visible{ outline:none !important; box-shadow:var(--ui-focus-ring) !important }
}
@media screen and (max-width:767px){
  html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal){ align-items:flex-end !important; padding:0 !important }
  html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section){ width:100% !important; max-width:none !important; margin:0 !important; max-height:92vh !important; max-height:92dvh !important; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 !important; padding-bottom:env(safe-area-inset-bottom) }
  html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select){ height:var(--ui-control-mobile) !important; font-size:16px !important }
  html :is(#ep-modal, #team-incentive-rule-modal, #team-incentive-details-modal, #team-incentive-pending-assignment-modal) > :is(div, section) > div:last-child:not(:first-child) > button{ flex:1; height:44px !important }
  html #ep-modal [id^="ep-tab-"]:not([id^="ep-tab-content"]){ height:30px }
}