/* =============================================================
   전체 캠페인 관리 — 맥 고밀도. 범위: #campaigns-content 안쪽 + 이 화면의 창(#work-sheet-modal · #sheet-creation-modal ·
   #sync-warning-dialog · #cell-edit-dialog, 모두 .cp-modal). 값은 ui-tokens.css 에서만.
   제목 한 줄(제목 · 건수 · 담당자 · [+ 캠페인 생성] 채운 파랑 하나) · 맥 표(머리 고정, 칸 누르면 고치기) ·
   계산서 · 입금은 색 점 + 날짜 · 업무시트는 글자 링크 · [편집] [+ 시트] 글자 단추 · 창은 맥 시트.
   마크업: index.tsx #campaigns-content · 두 창, campaigns.js renderCampaignsTable · addWorkSheetField · 두 확인 창.
   되돌리기: index.tsx 의 이 파일 <link> 한 줄 + 위 마크업.
   ============================================================= */
html #campaigns-content.cp-mac{ background:var(--ui-bg); color:var(--ui-text-1) }
html #campaigns-content.cp-mac, html #campaigns-content.cp-mac *{ font-family:var(--ui-font) }
html #campaigns-content .cp-wrap{ padding:4px 16px 32px }
html #campaigns-content .cp-sp{ flex:1 }
html #campaigns-content .cp-head{ display:flex; align-items:center; gap:8px; min-height:36px; margin:4px 0 8px; white-space:nowrap }
html #campaigns-content .cp-head h2{ margin:0; font-size:var(--ui-text-title2); font-weight:var(--ui-weight-bold); color:var(--ui-text-1) }
html #campaigns-content .cp-count{ font-size:var(--ui-text-footnote); color:var(--ui-text-2); font-variant-numeric:tabular-nums }
html #campaigns-content .cp-lb{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #campaigns-content .cp-pop{ height:var(--ui-control); padding:0 24px 0 8px; border:0; border-radius:var(--ui-radius-control); background-color:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-body); cursor:default }
html #campaigns-content .cp-btn, html .cp-modal .cp-btn{ display:inline-flex; align-items:center; justify-content:center; 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-family:var(--ui-font); font-size:var(--ui-text-body); font-weight:var(--ui-weight-regular); white-space:nowrap; cursor:default }
html #campaigns-content .cp-btn.pri, html .cp-modal .cp-btn.pri{ background:var(--ui-accent); color:var(--ui-on-accent); box-shadow:none; font-weight:var(--ui-weight-semibold) }
html #campaigns-content .cp-btn.pri:hover, html .cp-modal .cp-btn.pri:hover{ background:var(--ui-accent-hover) }
html .cp-modal .cp-btn:disabled{ opacity:.55 }
html #campaigns-content .cp-btn:focus-visible, html #campaigns-content .cp-pop:focus-visible, html .cp-modal .cp-btn:focus-visible, html .cp-modal .cp-in:focus{ outline:none; box-shadow:var(--ui-focus-ring) }

/* 표 */
html #campaigns-content .cp-list{ border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); overflow:hidden }
html #campaigns-content .cp-mirror{ height:12px; overflow-x:auto; overflow-y:hidden; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #campaigns-content .cp-scroll{ overflow:auto; max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px) }
html #campaigns-content .cp-tbl{ width:max-content; min-width:100%; border-collapse:collapse; font-size:var(--ui-text-body); font-variant-numeric:tabular-nums }
html #campaigns-content .cp-tbl th{ position:sticky; top:0; z-index:1; height:28px; padding:0 10px; background:var(--ui-surface); border-bottom:var(--ui-hairline) solid var(--ui-line); color:var(--ui-text-2); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); text-align:left; white-space:nowrap }
html #campaigns-content .cp-tbl .r{ text-align:right }
html #campaigns-content .cp-tbl td{ height:var(--ui-row); padding:0 10px; border-bottom:var(--ui-hairline) solid var(--ui-line); color:var(--ui-text-1); white-space:nowrap; vertical-align:middle }
html #campaigns-content .cp-tbl tbody tr:last-child > td{ border-bottom:0 }
@media (hover:hover){ html #campaigns-content .cp-row:hover > td{ background:var(--ui-fill-subtle) } }
html #campaigns-content .cp-edit{ cursor:default; max-width:260px; overflow:hidden; text-overflow:ellipsis }
@media (hover:hover){ html #campaigns-content .cp-tbl td.cp-edit:hover{ background:var(--ui-accent-tint); box-shadow:inset 0 0 0 1px var(--ui-accent) } }
html #campaigns-content .cp-strong{ font-weight:var(--ui-weight-semibold) }
html #campaigns-content .cp-dim{ color:var(--ui-text-2) }
html #campaigns-content .cp-none{ color:var(--ui-text-3) }
html #campaigns-content .cp-st{ display:inline-flex; align-items:center; gap:6px; color:var(--ui-text-1) }
html #campaigns-content .cp-st.warn{ color:var(--ui-warning) }
html #campaigns-content .cp-dot, html .cp-modal .cp-dot{ display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--ui-text-3) }
html #campaigns-content .cp-dot.green{ background:var(--ui-success) } html #campaigns-content .cp-dot.blue{ background:var(--ui-accent) }
html #campaigns-content .cp-dot.orange, html .cp-modal .cp-dot.orange{ background:var(--ui-warning-dot) }
html #campaigns-content .cp-link, html .cp-modal .cp-link{ padding:0 3px; border:0; background:none; color:var(--ui-accent-text); font-size:var(--ui-text-footnote); text-decoration:none; white-space:nowrap; cursor:default }
html #campaigns-content .cp-link:hover, html .cp-modal .cp-link:hover{ text-decoration:underline }
html #campaigns-content .cp-link.plain{ color:var(--ui-text-2) }
html .cp-modal .cp-link.danger{ color:var(--ui-danger) }
html #campaigns-content .cp-ws .cp-link:not(.plain){ font-size:var(--ui-text-body) }
html #campaigns-content .cp-sep{ margin:0 4px; color:var(--ui-text-3) }
html #campaigns-content .cp-empty{ padding:40px 0; text-align:center; color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
html #campaigns-content .cp-empty.err{ color:var(--ui-danger) }

@media (max-width:767px){
  html #campaigns-content .cp-wrap{ padding:4px 12px 32px }
  html #campaigns-content .cp-head{ flex-wrap:wrap }
  html #campaigns-content .cp-head .cp-sp{ display:none }
  html #campaigns-content .cp-head h2{ flex:1 }
  html #campaigns-content .cp-lb{ display:none }
  html #campaigns-content .cp-pop, html #campaigns-content .cp-head .cp-btn{ flex:1; height:var(--ui-control-mobile) }
  html #campaigns-content .cp-mirror{ display:none }
  html #campaigns-content .cp-tbl td{ height:var(--ui-row-mobile) }
  html #campaigns-content .cp-link{ padding:8px 4px }
  html #campaigns-content .cp-scroll{ max-height:none }
}

/* 창(맥 시트) */
html .cp-modal.modal.active{ padding:16px; background:var(--ui-scrim) }
html .cp-modal .cp-sheet{ display:flex; flex-direction:column; width:100%; max-width:560px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); border-radius:var(--ui-radius-sheet); background:var(--ui-bg); box-shadow:var(--ui-elev-sheet); overflow:hidden; font-family:var(--ui-font); color:var(--ui-text-1) }
html .cp-modal .cp-sheet.sm{ max-width:400px }
html .cp-modal .cp-sheet-hd{ flex:none; display:flex; align-items:center; min-height:44px; padding:6px 8px 6px 16px; background:var(--ui-surface); border-bottom:var(--ui-hairline) solid var(--ui-line) }
html .cp-modal .cp-sheet-hd h3{ flex:1; margin:0; font-size:var(--ui-text-title3); font-weight:var(--ui-weight-semibold) }
html .cp-modal .cp-sheet-bd{ flex:1; overflow-y:auto; padding:12px 16px }
html .cp-modal .cp-sheet-ft{ flex:none; 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 .cp-modal .cp-alert .cp-sheet-bd{ padding:18px 18px 14px; background:var(--ui-surface) }
html .cp-modal .cp-alert h3{ display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:var(--ui-text-title3); font-weight:var(--ui-weight-semibold) }
html .cp-modal .cp-alert p{ margin:0; font-size:var(--ui-text-body); color:var(--ui-text-2); line-height:1.5 }
html .cp-modal .cp-alert .cp-sheet-ft{ border-top:0 }
html .cp-modal .cp-sub{ margin:10px 0 6px; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2) }
html .cp-modal .cp-sub:first-child{ margin-top:0 }
html .cp-modal .cp-sub small{ margin-left:4px; font-weight:var(--ui-weight-regular); color:var(--ui-text-3); font-size:var(--ui-text-footnote) }
html .cp-modal .cp-grp{ border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) }
html .cp-modal .cp-chk{ display:flex; align-items:center; gap:10px; min-height:36px; padding:0 12px; border-bottom:var(--ui-hairline) solid var(--ui-line); font-size:var(--ui-text-body); cursor:default }
html .cp-modal .cp-chk:last-child{ border-bottom:0 }
html .cp-modal .cp-chk input{ width:14px; height:14px; margin:0; accent-color:var(--ui-accent) }
html .cp-modal .cp-btn.wide{ width:100%; margin:10px 0 2px }
html .cp-modal .cp-in{ width:100%; height:var(--ui-control); padding:0 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-family:var(--ui-font); font-size:var(--ui-text-body) }
html .cp-modal .cp-in::placeholder{ color:var(--ui-text-3) }
html .cp-modal .cp-urls{ display:flex; flex-direction:column; gap:8px; padding:10px 12px }
html .cp-modal .cp-cell-in{ background:var(--ui-surface) }
html .cp-modal .cp-ws-list{ display:flex; flex-direction:column; gap:10px }
html .cp-modal .cp-ws-item{ padding:2px 0 4px }
html .cp-modal .cp-ws-hd{ display:flex; align-items:center; justify-content:space-between; padding:6px 12px; font-size:var(--ui-text-body) }
html .cp-modal .cp-ws-hd b{ font-weight:var(--ui-weight-semibold) }
html .cp-modal .cp-row2{ display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:10px; min-height:40px; padding:4px 12px; border-top:var(--ui-hairline) solid var(--ui-line); font-size:var(--ui-text-body) }
html .cp-modal .cp-row2 em{ font-style:normal; color:var(--ui-danger) }
html .cp-modal .cp-add{ width:100%; height:var(--ui-control); margin-top:10px; border:0; border-radius:var(--ui-radius-control); background:transparent; box-shadow:inset 0 0 0 1px var(--ui-line-dashed); color:var(--ui-accent-text); font-family:var(--ui-font); font-size:var(--ui-text-body); cursor:default }
html .cp-modal .cp-add:hover{ background:var(--ui-accent-tint) }
html .cp-modal .cp-x{ position:relative; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:transparent; cursor:default }
html .cp-modal .cp-x::before, html .cp-modal .cp-x::after{ content:""; position:absolute; left:8px; top:13.5px; width:12px; height:1.5px; border-radius:1px; background:var(--ui-text-2); transform:rotate(45deg) }
html .cp-modal .cp-x::after{ transform:rotate(-45deg) }
html .cp-modal .cp-x:hover{ background:var(--ui-fill) }
@media (max-width:767px){
  html .cp-modal.modal.active{ padding:0; align-items:flex-end }
  html .cp-modal .cp-sheet, html .cp-modal .cp-sheet.sm{ max-width:none; max-height:92vh; max-height:92dvh; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 }
  html .cp-modal .cp-sheet-ft{ padding-bottom:calc(10px + env(safe-area-inset-bottom)) }
  html .cp-modal .cp-sheet-ft .cp-btn{ flex:1; height:var(--ui-control-mobile) }
  html .cp-modal .cp-in{ height:var(--ui-control-mobile) }
  html .cp-modal .cp-chk{ min-height:44px }
  html .cp-modal .cp-row2{ grid-template-columns:1fr; gap:4px; padding:8px 12px }
}