/* =============================================================
   세일즈 플로우에서 여는 나머지 창 — 맥 설정 앱 시트(사용자 승인 A안). 범위: 수주목표 입력 · 승인(#st-modal),
   주간 경위서 작성 · 감점 수용 · 승인(#rw-modal), 세일즈 플로우 공지(#pl-notice-modal) 안쪽만. 값은 ui-tokens.css 에서만.
   회색 바탕 · 흰 머리(17px 제목 · 부제 · 닫기 동그라미) · '이름 ··· 값' 줄 묶음 · 아래 단추 줄(기본 단추 맨 오른쪽).
   채운 단추는 창마다 하나(제출 · 감점 수용 · 반려 확정은 빨강). 승인 · 반려… · 완료 · 취소는 흰 단추.
   마크업: sales-target.js _stSheet · sales-retention-weekly.js _rwSheet. 되돌리기: index.tsx 의 이 파일 <link> 한 줄 + 두 파일.
   ============================================================= */
html :is(#st-modal, #rw-modal){ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--ui-scrim) }
html :is(#st-modal, #rw-modal) *{ font-family:var(--ui-font) }
html :is(#st-modal, #rw-modal) .mx-sheet{ display:flex; flex-direction:column; width:480px; max-width:100%; max-height:min(86vh, 760px); overflow:hidden; border-radius:var(--ui-radius-sheet); background:var(--ui-bg); box-shadow:var(--ui-elev-sheet); color:var(--ui-text-1) }
html :is(#st-modal, #rw-modal) .mx-sheet.wide{ width:640px }
html :is(#st-modal, #rw-modal) .mx-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 :is(#st-modal, #rw-modal) .mx-tt{ flex:1; min-width:0 }
html :is(#st-modal, #rw-modal) .mx-tt h3{ margin:0; font-size:var(--ui-text-title2); font-weight:var(--ui-weight-semibold); line-height:22px }
html :is(#st-modal, #rw-modal) .mx-sub{ margin-top:1px; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html :is(#st-modal, #rw-modal) .mx-x{ position:relative; flex:none; width:24px; height:24px; border:0; border-radius:var(--ui-radius-pill); background:var(--ui-fill); cursor:default }
html :is(#st-modal, #rw-modal) .mx-x::before, html :is(#st-modal, #rw-modal) .mx-x::after{ content:""; position:absolute; left:7px; top:11.25px; width:10px; height:1.5px; border-radius:1px; background:var(--ui-text-2); transform:rotate(45deg) }
html :is(#st-modal, #rw-modal) .mx-x::after{ transform:rotate(-45deg) }
html :is(#st-modal, #rw-modal) .mx-body{ flex:1; min-height:0; overflow-y:auto; padding:14px 20px 16px }
html :is(#st-modal, #rw-modal) .mx-ft{ display:flex; justify-content:flex-end; gap:8px; padding:10px 16px; background:var(--ui-surface); border-top:var(--ui-hairline) solid var(--ui-line) }
html :is(#st-modal, #rw-modal) .mx-cap{ display:flex; align-items:baseline; justify-content:space-between; margin:16px 12px 6px; font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2) }
html :is(#st-modal, #rw-modal) .mx-body > .mx-cap:first-child{ margin-top:2px }
html :is(#st-modal, #rw-modal) .mx-cap b{ font-weight:inherit; color:var(--ui-text-1) }
html :is(#st-modal, #rw-modal) .mx-capr{ font-weight:var(--ui-weight-regular) }
html :is(#st-modal, #rw-modal) .mx-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 :is(#st-modal, #rw-modal) .mx-grp + .mx-grp{ margin-top:8px }
html :is(#st-modal, #rw-modal) .mx-row{ display:flex; align-items:center; gap:12px; min-height:36px; padding:6px 12px; font-size:var(--ui-text-body) }
html :is(#st-modal, #rw-modal) .mx-row + .mx-row{ box-shadow:inset 0 var(--ui-hairline) 0 var(--ui-line) }
html :is(#st-modal, #rw-modal) .mx-row.top{ align-items:flex-start }
html :is(#st-modal, #rw-modal) .mx-row.top .mx-k{ padding-top:5px }
html :is(#st-modal, #rw-modal) .mx-k{ flex:none; min-width:84px; white-space:nowrap; color:var(--ui-text-1) }
html :is(#st-modal, #rw-modal) .mx-row.sub .mx-k{ color:var(--ui-text-2) }
html :is(#st-modal, #rw-modal) .mx-v{ flex:1; min-width:0; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
html :is(#st-modal, #rw-modal) .mx-v.wrap{ white-space:pre-wrap; text-align:left; line-height:18px; padding-top:3px }
html :is(#st-modal, #rw-modal) .mx-v.dim, html :is(#st-modal, #rw-modal) .dim{ color:var(--ui-text-2) }
html :is(#st-modal, #rw-modal) .strong{ font-weight:var(--ui-weight-semibold) }
html :is(#st-modal, #rw-modal) .danger{ color:var(--ui-danger) }
html :is(#st-modal, #rw-modal) .mx-due{ flex:none; font-size:var(--ui-text-footnote); color:var(--ui-danger) }
html :is(#st-modal, #rw-modal) .mx-empty{ justify-content:center; color:var(--ui-text-3); font-size:var(--ui-text-footnote) }
html :is(#st-modal, #rw-modal) .mx-note{ margin:10px 12px 0; font-size:var(--ui-text-caption); line-height:16px; color:var(--ui-text-2) }
html :is(#st-modal, #rw-modal) .mx-st{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html :is(#st-modal, #rw-modal) .mx-st.ok{ color:var(--ui-success) }
html :is(#st-modal, #rw-modal) .mx-st.wait{ color:var(--ui-warning) }
html :is(#st-modal, #rw-modal) .mx-st.bad{ color:var(--ui-danger) }
html :is(#st-modal, #rw-modal) .num{ font-variant-numeric:tabular-nums }
html :is(#st-modal, #rw-modal) /* 입력: 줄 안 칸(A) */
.mx-field{ cursor:text }
html :is(#st-modal, #rw-modal) .mx-field .mx-v{ display:flex; align-items:center; gap:6px; overflow:visible }
html :is(#st-modal, #rw-modal) .mx-field input, html :is(#st-modal, #rw-modal) .mx-field textarea, html :is(#st-modal, #rw-modal) .mx-form textarea, html :is(#st-modal, #rw-modal) .mx-form input, html :is(#st-modal, #rw-modal) .mx-rej textarea{ flex:1; min-width:0; min-height:28px; padding:4px 8px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-field); color:var(--ui-text-1); font:inherit; font-size:var(--ui-text-body); text-align:left; resize:vertical }
html :is(#st-modal, #rw-modal) .mx-field input{ text-align:right }
html :is(#st-modal, #rw-modal) :is(.mx-field, .mx-form, .mx-rej) :is(input, textarea):focus{ outline:none; box-shadow:var(--ui-focus-ring) }
html :is(#st-modal, #rw-modal) .mx-unit{ flex:none; color:var(--ui-text-2) }
html :is(#st-modal, #rw-modal) /* 단추 */
.mx-btn{ 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); color:var(--ui-text-1); font-size:var(--ui-text-body); white-space:nowrap; cursor:default }
html :is(#st-modal, #rw-modal) .mx-btn.pri{ min-width:96px; background:var(--ui-accent); color:var(--ui-on-accent); box-shadow:none; font-weight:var(--ui-weight-semibold) }
html :is(#st-modal, #rw-modal) .mx-btn.danger{ background:var(--ui-danger); color:var(--ui-on-accent); box-shadow:none; font-weight:var(--ui-weight-semibold) }
html :is(#st-modal, #rw-modal) .mx-btn.sm{ height:24px; padding:0 10px; font-size:var(--ui-text-footnote) }
html :is(#st-modal, #rw-modal) .mx-btn.ok{ color:var(--ui-success) }
html :is(#st-modal, #rw-modal) .mx-btn.bad{ color:var(--ui-danger) }
html :is(#st-modal, #rw-modal) .mx-acts{ justify-content:flex-end; gap:6px; min-height:36px }
html :is(#st-modal, #rw-modal) .mx-rej{ gap:8px }
html :is(#st-modal, #rw-modal) .mx-rej-b{ display:flex; gap:6px; flex:none; padding-top:2px }
html :is(#st-modal, #rw-modal) .mx-sheet .hidden{ display:none !important }

/* ── 5. 세일즈 플로우 공지(안내 페이지를 띄우는 창): 머리만 맥, 이모지 숨김 ── */
html #pl-notice-modal > div > div:first-child{ padding:10px 14px 10px 20px !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html #pl-notice-modal > div > div:first-child h3{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #pl-notice-modal > div > div:first-child h3 > span{ display:none }

@media (max-width:767px){
  html :is(#st-modal, #rw-modal){ align-items:flex-end; padding:0 }
  html :is(#st-modal, #rw-modal) .mx-sheet, html :is(#st-modal, #rw-modal) .mx-sheet.wide{ width:100%; max-height:92vh; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 }
  html :is(#st-modal, #rw-modal) .mx-body{ padding:12px 14px 16px }
  html :is(#st-modal, #rw-modal) .mx-row{ min-height:44px }
  html :is(#st-modal, #rw-modal) .mx-k{ min-width:72px }
  html :is(#st-modal, #rw-modal) .mx-ft{ padding:10px 14px calc(10px + env(safe-area-inset-bottom)) }
  html :is(#st-modal, #rw-modal) .mx-ft .mx-btn{ flex:1; height:var(--ui-control-mobile) }
  html :is(#st-modal, #rw-modal) .mx-btn.sm{ height:32px }
}