/* =============================================================
   세일즈 플로우에서 여는 창 — 맥 시트. 범위: 영업건 상세(#pl-detail-modal) · 새 영업건 / 수정(#pl-modal) · 실패 / 보류 처리(#pl-lost-modal) 안쪽만.
   값은 ui-tokens.css 에서만. 배치 · 단추 · 내용 · 동작은 그대로.
   창마다 채운 단추는 하나: 상세 = [계약 체결 완료](협상 단계일 때만), 새 영업건 = [등록], 수정 = [수정 저장], 실패·보류 = [… 확인].
   휴대폰: 상세는 아래에서 올라오는 시트(원래 그대로), 정보 칸은 한 줄씩.
   되돌리기: index.tsx 의 이 파일 <link> 한 줄.
   ============================================================= */

/* ── 0. 틀 · 글꼴 ── */
html :is(#pl-detail-modal, #pl-modal){ background:var(--ui-scrim) !important }
html #pl-lost-modal > .absolute{ background:var(--ui-scrim) !important }
html :is(#pl-detail-modal, #pl-modal, #pl-lost-modal) *:not(i):not(.fas):not(.far):not(.fa){ font-family:var(--ui-font) !important }
html :is(#pl-detail-modal, #pl-modal, #pl-lost-modal) .pl-sheet{ border:0 !important; border-radius:var(--ui-radius-sheet) !important; box-shadow:var(--ui-elev-sheet) !important; color:var(--ui-text-1); scrollbar-gutter:stable }
html :is(#pl-detail-modal, #pl-modal, #pl-lost-modal) .font-bold, html :is(#pl-detail-modal, #pl-modal, #pl-lost-modal) .font-extrabold{ font-weight:var(--ui-weight-semibold) !important }
html :is(#pl-detail-modal, #pl-modal, #pl-lost-modal) .font-semibold{ font-weight:var(--ui-weight-regular) !important }
html :is(#pl-detail-modal, #pl-modal, #pl-lost-modal) :is(.text-gray-400, .text-gray-500, .text-gray-600){ color:var(--ui-text-2) !important }
html :is(#pl-detail-modal, #pl-modal, #pl-lost-modal) :is(.text-gray-700, .text-gray-800){ color:var(--ui-text-1) !important }
html :is(#pl-detail-modal, #pl-modal, #pl-lost-modal) [class*="text-[9px]"], html :is(#pl-detail-modal, #pl-modal, #pl-lost-modal) [class*="text-[10px]"]{ font-size:var(--ui-text-caption) !important }

/* ── 1. 새 영업건 · 수정 · 실패 창 머리: 흰 바탕 · 17px 제목 · 색 아이콘 숨김 ── */
html #pl-modal .pl-sh-hd{ padding:12px 16px 10px 20px !important; background:var(--ui-surface) !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html #pl-modal .pl-sh-hd h3, html #pl-lost-modal .pl-sh-t{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html :is(#pl-modal, #pl-lost-modal) :is(.pl-sh-hd h3, .pl-sh-t) i{ display:none }

/* ── 2. 영업건 상세 = 맥 설정 앱 시트: 회색 바탕 · 흰 묶음 목록 · 아래 단추 줄 ── */
html #pl-detail-modal .pd{ display:flex; flex-direction:column; width:560px; max-width:100%; max-height:min(86vh, 820px); overflow:hidden; background:var(--ui-bg) }
html #pl-detail-modal .pd-hd{ display:flex; align-items:flex-start; gap:12px; padding:14px 14px 12px 20px; background:var(--ui-surface); border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #pl-detail-modal .pd-tt{ flex:1; min-width:0 }
html #pl-detail-modal .pd-tt h3{ margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; line-height:22px; color:var(--ui-text-1) }
html #pl-detail-modal .pd-sub{ display:flex; gap:5px; min-width:0; margin-top:1px; font-size:var(--ui-text-footnote); line-height:16px; color:var(--ui-text-2); white-space:nowrap }
html #pl-detail-modal .pd-stage{ overflow:hidden; text-overflow:ellipsis }
html #pl-detail-modal .pd-dot{ color:var(--ui-text-3) }
html #pl-detail-modal .pd-tools{ display:flex; align-items:center; gap:2px; flex:none }
html #pl-detail-modal .pd-tools button{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:0; border-radius:var(--ui-radius-control); background:transparent; color:var(--ui-text-2); cursor:default }
html #pl-detail-modal .pd-tools button i{ font-size:12px }
@media (hover:hover){ html #pl-detail-modal .pd-tools button:hover{ background:var(--ui-fill-subtle); color:var(--ui-text-1) } html #pl-detail-modal .pd-tools button.del:hover{ color:var(--ui-danger) } }
html #pl-detail-modal .pd-tools .pd-x{ width:24px; height:24px; margin-left:6px; border-radius:var(--ui-radius-pill); background:var(--ui-fill) }
html #pl-detail-modal .pd-tools .pd-x i{ font-size:11px }

html #pl-detail-modal .pd-body{ flex:1; min-height:0; overflow-y:auto; padding:14px 20px 18px; scrollbar-gutter:stable }
html #pl-detail-modal .pd-amt{ display:flex; align-items:baseline; gap:8px; margin:0 4px 10px }
html #pl-detail-modal .pd-amt-v{ font-size:var(--ui-text-title2); font-weight:var(--ui-weight-semibold); letter-spacing:-.01em; color:var(--ui-text-1); font-variant-numeric:tabular-nums }
html #pl-detail-modal .pd-amt-k{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #pl-detail-modal .pd-cap{ display:flex; align-items:center; justify-content:space-between; margin:18px 12px 6px; font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2) }
html #pl-detail-modal .pd-cap .pd-link{ height:20px; margin-right:-8px }
html #pl-detail-modal .pd-grp{ border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); overflow:hidden }
html #pl-detail-modal .pd-row{ display:flex; align-items:center; gap:12px; min-height:36px; padding:6px 12px; font-size:var(--ui-text-body); color:var(--ui-text-1); position:relative }
html #pl-detail-modal .pd-row + .pd-row, html #pl-detail-modal .pd-row + .pd-hist{ box-shadow:inset 0 var(--ui-hairline) 0 var(--ui-line) }
html #pl-detail-modal .pd-k{ flex:none; min-width:84px; white-space:nowrap; color:var(--ui-text-2); font-size:var(--ui-text-body) }
html #pl-detail-modal .pd-v{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right }
html #pl-detail-modal .pd-row.num .pd-v{ font-variant-numeric:tabular-nums }
html #pl-detail-modal .pd-row.over .pd-v{ color:var(--ui-danger) }
html #pl-detail-modal .pd-memo{ align-items:flex-start }
html #pl-detail-modal .pd-note{ flex:1; min-width:0; white-space:pre-wrap; word-break:break-word; line-height:18px; text-align:left }
html #pl-detail-modal .pd-empty{ justify-content:center; margin:0; padding:10px 12px; font-size:var(--ui-text-footnote); color:var(--ui-text-3); text-align:center }
html #pl-detail-modal .pd-link{ flex:none; height:24px; padding:0 8px; border:0; border-radius:var(--ui-radius-control); background:transparent; color:var(--ui-accent-text); font-size:var(--ui-text-footnote); cursor:default }
@media (hover:hover){ html #pl-detail-modal .pd-link:hover{ background:var(--ui-fill-subtle) } }

/* 진행: 단계 · 세부 단계 = 맥 분할 단추(고른 칸 흰색), 줄 오른쪽 끝에 붙임 */
html #pl-detail-modal .pd-segrow .pd-seg{ margin-left:auto }
html #pl-detail-modal .pd-seg{ display:inline-flex; flex-wrap:nowrap; gap:0; padding:2px; max-width:100%; overflow-x:auto; border-radius:var(--ui-radius-control); background:var(--ui-fill); scrollbar-width:none }
html #pl-detail-modal .pd-seg::-webkit-scrollbar{ display:none }
html #pl-detail-modal .pd-seg button{ flex:none; height:24px; padding:0 11px; border:0; border-radius:calc(var(--ui-radius-control) - 2px); background:transparent; color:var(--ui-text-1); font-size:var(--ui-text-footnote); white-space:nowrap; cursor:default }
html #pl-detail-modal .pd-seg button + button:not(.on){ box-shadow:inset var(--ui-hairline) 0 0 var(--ui-line) }
html #pl-detail-modal .pd-seg button.on + button{ box-shadow:none }
html #pl-detail-modal .pd-seg button.on{ background:var(--ui-surface); box-shadow:var(--ui-elev-control); font-weight:var(--ui-weight-semibold) }

/* 견적서 줄: 번호 · 건명 ··· 금액 · 상태(회색 글자) */
html #pl-detail-modal .pd-q{ cursor:default }
@media (hover:hover){ html #pl-detail-modal .pd-q:hover{ background:var(--ui-fill-subtle) } }
html #pl-detail-modal .pd-qn{ flex:none; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #pl-detail-modal .pd-qw{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
html #pl-detail-modal .pd-qa{ flex:none; font-variant-numeric:tabular-nums }
html #pl-detail-modal .pd-qs{ flex:none; width:44px; text-align:right; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }

/* 활동: 첫 줄 = 기록 남기기(종류 · 입력 · 추가), 아래 = 기록 목록 */
html #pl-detail-modal .pd-compose{ gap:8px; padding:8px 10px }
html #pl-detail-modal .pd-compose select{ flex:none; width:auto; min-width:76px }
html #pl-detail-modal .pd-compose input{ flex:1; min-width:0 }
/* 활동 목록은 따로 스크롤하지 않음 — 본문 한 곳만 스크롤(스크롤 막대 둘이던 것) */
html #pl-detail-modal .pd-hist{ max-height:none; overflow:visible }
html #pl-detail-modal #pl-history-list > div{ gap:10px !important; padding:8px 12px; font-size:var(--ui-text-body) !important; line-height:18px }
html #pl-detail-modal #pl-history-list > div + div{ box-shadow:inset 0 var(--ui-hairline) 0 var(--ui-line) }
html #pl-detail-modal #pl-history-list > div > div:first-child{ width:14px; flex:none; text-align:center; margin-top:1px !important }
html #pl-detail-modal #pl-history-list > div > div:first-child i{ font-size:11px; color:var(--ui-text-3) !important }
html #pl-detail-modal #pl-history-list .pl-hist-content-text{ color:var(--ui-text-1) !important; white-space:pre-wrap; word-break:break-word }
html #pl-detail-modal #pl-history-list > div > div:last-child > div:last-child{ margin-top:1px !important; font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #pl-detail-modal #pl-history-list button{ color:var(--ui-text-2) !important; padding:0 4px }
html #pl-detail-modal #pl-history-list button i{ font-size:11px !important }

/* 아래 단추 줄: 왼쪽 실패 · 보류(흰 단추 · 빨강 · 주황 글자), 오른쪽 계약 체결(채운 파랑, 협상 단계만) */
html #pl-detail-modal .pd-ft{ display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--ui-surface); border-top:var(--ui-hairline) solid var(--ui-line) }
html #pl-detail-modal .pd-ft .pl-pri{ margin-left:auto }
html #pl-detail-modal .pl-dm-warn{ height:var(--ui-control); padding:0 14px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); font-size:var(--ui-text-body); cursor:default }
html #pl-detail-modal .pl-dm-warn.red{ color:var(--ui-danger) } html #pl-detail-modal .pl-dm-warn.amber{ color:var(--ui-warning) }
html #pl-detail-modal .pl-dm-add{ flex:none; height:var(--ui-control); padding:0 12px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-body); cursor:default }

/* ── 5. 입력칸 · 고르는 칸: 맥 칸(테두리 대신 머리카락 선 그림자) ── */
html :is(#pl-detail-modal, #pl-modal, #pl-lost-modal) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea){ min-height:28px; padding:4px 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background: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(#pl-detail-modal, #pl-modal, #pl-lost-modal) :is(input, select, textarea):focus{ outline:none !important; box-shadow:var(--ui-focus-ring) !important }

/* ── 6. 새 영업건 · 수정: 이름은 왼쪽 칸 그대로, 아래 단추 줄 머리카락 선 ── */
html #pl-modal .pl-sheet > div:nth-child(2){ padding:14px 20px !important }
html #pl-modal .pl-sheet > div:nth-child(2) label{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #pl-modal .pl-sheet > div:nth-child(2) label .text-red-500{ color:var(--ui-danger) !important }
html :is(#pl-modal) .pl-sh-ft{ padding:10px 16px !important; background:var(--ui-surface) !important; border-top:var(--ui-hairline) solid var(--ui-line) !important }
html :is(#pl-modal) .pl-sh-ft button:not(.pl-pri), html #pl-lost-modal .pl-sheet > div:last-child button:not(.pl-pri){ height:var(--ui-control); padding:0 14px !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-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important }

/* ── 7. 창마다 채운 단추 하나(시스템 파랑 · 실패 확인은 빨강) ── */
html :is(#pl-detail-modal, #pl-modal, #pl-lost-modal) .pl-pri{ height:var(--ui-control); padding:0 16px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; box-shadow:none !important }
html :is(#pl-detail-modal, #pl-modal, #pl-lost-modal) .pl-pri i{ display:none }
html #pl-lost-modal .pl-pri.danger{ background:var(--ui-danger) !important }
html #pl-lost-modal .pl-sheet{ padding:18px 20px 16px !important }
html #pl-lost-modal label{ font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-2) !important }

/* ── 8. 휴대폰: 상세는 아래에서 올라오는 시트, 단추 44px, 이름 칸 좁게 ── */
@media (max-width:767px){
  html #pl-detail-modal .pd{ width:100%; max-height:92vh; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 !important }
  html #pl-detail-modal .pd-body{ padding:12px 14px 16px }
  html #pl-detail-modal .pd-k{ min-width:72px }
  html #pl-detail-modal .pd-row{ min-height:44px }
  html #pl-detail-modal .pd-segrow{ flex-direction:column; align-items:stretch; gap:6px; padding:8px 12px }
  html #pl-detail-modal .pd-segrow .pd-seg{ margin-left:0 }
  html #pl-detail-modal .pd-seg button{ height:30px; flex:1 0 auto }
  html #pl-detail-modal .pd-ft{ padding:10px 14px calc(10px + env(safe-area-inset-bottom)) }
  html #pl-detail-modal .pd-ft button{ height:var(--ui-control-mobile) }
  html #pl-detail-modal .pd-ft .pl-dm-warn{ flex:1 }
  html #pl-detail-modal .pd-ft .pl-pri{ flex:1.4; margin-left:0 }
  html :is(#pl-modal, #pl-lost-modal) .pl-pri{ height:var(--ui-control-mobile) }
}