/* 설정 › 캠페인관리 — 시안 A + N2(영역 목록 = 흰 카드 + 굵은 바) · 모바일 M2(영역 목록 → 상세) (2026-11-05 v2.355.0)
 * 마크업 = company_campaigns/_panel·_item·_item_body·_card·_pv·_live · 동작 = campaign_panel_controller.js
 * 색은 전부 var(--ord-*) — 라이트/다크 공용(가드 TOKENIZED 등록). 모바일 기준 = 셸 모바일 768px(_shell_m.css). */
.sset-page.cp-page { max-width: 1440px; }   /* .sset-page(860px)보다 넓게 — 3열 레이아웃 */
.cp [hidden] { display: none !important; }   /* 선언형 표식(data-cs-show)·숨김 요소 — 아래 display 규칙보다 앞선다 */
.cp-frame { display: block; }
.cp-muted { color: var(--ord-text-4); font-size: 12px; }
.cp-strong { font-size: 13px; font-weight: 600; color: var(--ord-text); }

/* ───── 머리말 — 공통사항설정과 같은 .sset-page-head(제목 + 한 줄 설명). 모바일에서만 «＋ 새 캠페인» 원형 단추가 오른쪽에 붙는다 ───── */
.cp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cp-head .sset-page-head { min-width: 0; margin-bottom: 18px; }
.cp-mplus { display: none; }

/* 캠페인 탭 */
.cp-tabs-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--ord-line); }
.cp-tabs { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cp-tabs::-webkit-scrollbar { display: none; }
.cp-tab { flex: none; display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 11px; color: var(--ord-text-2); white-space: nowrap; }
.cp-tab-a { display: inline-flex; align-items: center; gap: 11px; padding: 11px 18px; color: inherit; text-decoration: none; }
.cp-tab .cp-grip + .cp-tab-a { padding-left: 4px; }
.cp-tab-a strong { font-size: 14px; font-weight: 700; }
.cp-tab-a small { font-size: 11px; color: var(--ord-text-4); }
.cp-tab:hover { background: var(--ord-surface-2); }
.cp-tab.is-on { background: var(--ord-surface); border-color: var(--ord-line); box-shadow: 0 2px 6px rgba(15, 23, 42, .06); color: var(--ord-text); }
.cp-grip { padding: 11px 0 11px 12px; font-size: 11px; letter-spacing: -2px; color: var(--ord-text-4); cursor: grab; user-select: none; }
.cp-grip:active { cursor: grabbing; }
.cp-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ord-tint-green-fg); }
.cp-tab.is-suspended .cp-dot, .cp-dot.is-suspended { background: var(--ord-text-4); }
.cp-tab.is-terminated .cp-dot, .cp-dot.is-terminated { background: var(--ord-tint-red-fg); }
.cp-tab.is-consign .cp-dot, .cp-dot.is-consign { background: var(--ord-tint-violet-fg); }
.cp-addtab { margin-left: auto; flex: none; padding: 8px 4px 8px 18px; border: 0; background: none; color: var(--ord-accent-strong); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.cp-pick { display: none; }

/* ───── 3열: 영역 목록(N2) | 설정 | 미리보기 ───── */
.cp-split { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.cp-nav { position: sticky; top: 10px; z-index: 3; align-self: start; overflow: hidden; border: 1px solid var(--ord-line); border-radius: 14px; background: var(--ord-surface); box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
.cp-nav-head { padding: 12px 16px; border-bottom: 1px solid var(--ord-line); background: var(--ord-band); font-size: 11.5px; font-weight: 800; color: var(--ord-text-2); }
.cp-nav-btn { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--ord-line-soft); border-radius: 0; background: var(--ord-surface); color: var(--ord-text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.cp-nav-btn:last-child { border-bottom: 0; }
.cp-nav-btn:hover { background: var(--ord-surface-2); }
.cp-nav-tx { display: flex; flex-direction: column; min-width: 0; }
.cp-nav-tx small { display: none; }
.cp-nav-n { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--ord-band); color: var(--ord-text-2); font-size: 11px; font-weight: 800; text-align: center; }
.cp-nav-n.is-dirty { background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); }
.cp-nav-chev { display: none; }
.cp-nav-btn.is-on { background: var(--ord-accent-soft); color: var(--ord-accent-strong); font-weight: 800; }
.cp-nav-btn.is-on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ord-accent); }

.cp-panes { min-width: 0; }
.cp-form { display: block; margin: 0; }
.cp-pane { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; align-items: start; }
.cp-pane.is-solo { grid-template-columns: minmax(0, 1fr); }
.cp-main { min-width: 0; }
.cp-mbar { display: none; }
.cp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cp-section-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.4px; color: var(--ord-text); }
.cp-section-head span { font-size: 11.5px; color: var(--ord-text-4); }
.cp-panel { overflow: hidden; border: 1px solid var(--ord-line); border-radius: 14px; background: var(--ord-surface); }

/* 설정 한 줄 — 제목 · 태그 / 한 줄 설명 / 본문 */
.cp-row { position: relative; padding: 24px 26px; border-bottom: 1px solid var(--ord-line); }
.cp-row:last-child { border-bottom: 0; }
.cp-row.is-dirty::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ord-accent); }
.cp-row-title { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 7px; }
.cp-row-title h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ord-text); }
.cp-role { padding: 2px 7px; border-radius: 5px; background: var(--ord-band); color: var(--ord-text-3); font-size: 10px; font-weight: 600; }
.cp-tag-chg { margin-left: auto; padding: 3px 8px; border-radius: 5px; background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); font-size: 10.5px; font-weight: 700; }
.cp-tag-save { display: none; padding: 3px 8px; border-radius: 5px; background: var(--ord-accent-soft); color: var(--ord-accent-strong); font-size: 10.5px; font-weight: 700; }
.cp-row.is-dirty .cp-tag-save { display: inline; }
.cp-row.is-dirty .cp-tag-save:first-of-type { margin-left: auto; }
.cp-tag-chg[hidden] ~ .cp-tag-save { margin-left: auto; }
.cp-revert { padding: 2px 0; border: 0; background: none; color: var(--ord-tint-amber-fg); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.cp-revert:hover { text-decoration: underline; }
.cp-ib { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 19px; height: 19px; padding: 0; border: 1.5px solid var(--ord-line-2); border-radius: 50%; background: none; color: var(--ord-text-4); font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.cp-ib:hover, .cp-ib[aria-expanded="true"] { border-color: var(--ord-accent); color: var(--ord-accent-strong); }
.cp-info { margin: 2px 0 6px; padding: 10px 12px; border-radius: 9px; background: var(--ord-surface-2); font-size: 12px; line-height: 1.65; color: var(--ord-text-3); }
.cp-badge { margin-left: 5px; padding: 1px 6px; border-radius: 999px; background: var(--ord-accent-soft); color: var(--ord-accent-strong); font-style: normal; font-size: 10px; font-weight: 700; }
.cp-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.cp-form-stack { margin-top: 16px; }
.cp-flab { display: block; margin: 14px 0 6px; font-size: 11.5px; font-weight: 600; color: var(--ord-text-3); }
.cp-flab:first-child { margin-top: 0; }
.cp-input { display: block; width: 100%; box-sizing: border-box; padding: 10px 13px; border: 1.5px solid var(--ord-line-2); border-radius: 10px; background: var(--ord-input-bg); color: var(--ord-text); font: inherit; font-size: 13.5px; }
.cp-input:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ord-accent) 18%, transparent); }
textarea.cp-input { resize: vertical; }
.cp-meta { margin-top: 12px; font-size: 11.5px; color: var(--ord-text-4); }
.cp-row-content { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cp-chip { padding: 5px 10px; border-radius: 6px; background: var(--ord-band); color: var(--ord-text-2); font-size: 11.5px; font-weight: 500; }
.cp-chip.is-acc { background: var(--ord-accent-soft); color: var(--ord-accent-strong); }
.cp-chip.is-person { background: var(--ord-tint-blue-bg); color: var(--ord-tint-blue-fg); }
.cp-chip.is-agency { background: var(--ord-tint-violet-bg); color: var(--ord-tint-violet-fg); }
.cp-chip.is-gone { opacity: .55; text-decoration: line-through; }
.cp-chip.is-quiet { color: var(--ord-text-4); }
.cp-chip.is-base { color: var(--ord-text-3); }
.cp-textbtn { flex: none; padding: 5px 2px; border: 0; background: none; color: var(--ord-accent-strong); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.cp-textbtn:hover { text-decoration: underline; }
.cp-btn { flex: none; padding: 9px 15px; border: 1px solid var(--ord-line-2); border-radius: 9px; background: var(--ord-surface); color: var(--ord-text-2); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cp-btn:hover:not([disabled]) { border-color: var(--ord-accent); color: var(--ord-accent-strong); }
.cp-btn.is-primary { background: var(--ord-accent); border-color: var(--ord-accent); color: var(--ord-on-accent); }
.cp-btn.is-primary:hover:not([disabled]) { filter: brightness(.95); color: var(--ord-on-accent); }
.cp-btn.is-danger { color: var(--ord-tint-red-fg); border-color: var(--ord-tint-red-line); }
.cp-btn.is-danger:hover:not([disabled]) { background: var(--ord-tint-red-bg); border-color: var(--ord-tint-red-line); color: var(--ord-tint-red-fg); }
.cp-btn[disabled] { opacity: .45; cursor: not-allowed; }
.cp-ai-save { display: flex; justify-content: flex-end; padding: 8px 0 4px; }
.cp-tag { padding: 1px 8px; border-radius: 999px; background: var(--ord-band); color: var(--ord-text-3); font-size: 11px; font-weight: 600; }
.cp-tag.is-ok { background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); }
.cp-tag.is-warn { background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); }
.cp-note { margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: var(--ord-surface-2); font-size: 11.5px; line-height: 1.7; color: var(--ord-text-3); }
.cp-note b { color: var(--ord-text-2); font-weight: 700; }
.cp-note.is-warn { background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); }
.cp-empty { padding: 48px 12px; text-align: center; color: var(--ord-text-3); font-size: 14px; line-height: 1.7; }
.cp-empty span { font-size: 12px; color: var(--ord-text-4); }

/* 선택 카드(작은 그림이 달린) */
.cp-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.cp-choices.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-choice { position: relative; display: block; min-height: 88px; padding: 16px; border: 1px solid var(--ord-line-2); border-radius: 11px; background: var(--ord-surface); cursor: pointer; }
.cp-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cp-choice:hover { border-color: var(--ord-accent); }
.cp-choice:has(input:checked) { border-color: var(--ord-accent); background: var(--ord-accent-soft); }
.cp-choice:has(input:checked)::after { content: "✓"; position: absolute; top: 12px; right: 12px; width: 17px; height: 17px; border-radius: 50%; background: var(--ord-accent); color: var(--ord-on-accent); font-size: 10px; line-height: 17px; text-align: center; }
.cp-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ord-accent) 25%, transparent); }
.cp-choice strong { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ord-text); }
.cp-choice:has(input:checked) strong { color: var(--ord-accent-strong); }
.cp-choice small { display: block; margin-top: 4px; font-size: 11px; color: var(--ord-text-3); line-height: 1.5; }
.cp-choices.is-multi .cp-choice:has(input:checked)::after { border-radius: 5px; }   /* 여러 개 고르는 카드는 네모 체크 */
.cp-choice.is-locked { cursor: not-allowed; }
.cp-choice.is-locked small { color: var(--ord-tint-amber-fg); }
.cp-def { margin-left: 6px; font-style: normal; font-size: 10px; font-weight: 600; color: var(--ord-text-4); }
.cp-mini { display: flex; gap: 3px; height: 10px; }
.cp-mini i { width: 16px; height: 100%; border-radius: 2px; background: var(--ord-line-2); }
.cp-choice:has(input:checked) .cp-mini i { background: color-mix(in srgb, var(--ord-accent) 45%, transparent); }
.cp-mini.is-tabs i:first-child { width: 22px; background: color-mix(in srgb, var(--ord-accent) 55%, var(--ord-line-2)); }
.cp-mini.is-flow i { width: 12px; }
.cp-mini.is-flow i.is-on { background: var(--ord-tint-green-fg); }

/* ───── 미리보기 — 상담사 화면 ───── */
.cp-live { position: sticky; top: 10px; align-self: start; }
.cp-live-h { display: flex; align-items: center; justify-content: space-between; margin: 3px 0 14px; font-size: 12.5px; font-weight: 700; color: var(--ord-text); }
.cp-live-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 500; color: var(--ord-tint-green-fg); }
.cp-live-dot i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cp-shell { padding: 12px; border: 1px solid var(--ord-line); border-radius: 14px; background: var(--ord-band); }
.cp-dots3 { display: flex; gap: 4px; margin: 2px 0 12px; }
.cp-dots3 i { width: 6px; height: 6px; border-radius: 50%; background: var(--ord-line-2); }
.cp-mock { padding: 16px; border: 1px solid var(--ord-line); border-radius: 9px; background: var(--ord-surface); box-shadow: 0 6px 16px rgba(15, 23, 42, .06); }
.cp-mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 11.5px; font-weight: 700; color: var(--ord-text); }
.cp-mock-st { padding: 3px 7px; border-radius: 4px; background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); font-size: 9px; font-weight: 700; }
.cp-mock-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.cp-mock-chips i { padding: 3px 7px; border-radius: 5px; background: var(--ord-accent-soft); color: var(--ord-accent-strong); font-style: normal; font-size: 9.5px; font-weight: 600; }
.cp-mock-tabs { display: flex; gap: 3px; margin-bottom: 11px; }
.cp-mock-tabs i { padding: 4px 9px; border-radius: 5px; background: var(--ord-band); font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--ord-text-3); }
.cp-mock-tabs i.is-on { background: var(--ord-accent-soft); color: var(--ord-accent-strong); }
.cp-mock-card { margin-top: 8px; padding: 10px 11px; border: 1px solid var(--ord-line); border-radius: 7px; background: var(--ord-surface-2); font-size: 10px; color: var(--ord-text-2); }
.cp-mock-card h4 { margin: 0 0 7px; font-size: 10.5px; font-weight: 700; color: var(--ord-text); }
.cp-mock-card.is-off { border-style: dashed; background: transparent; color: var(--ord-text-4); }
.cp-mock-card.is-wide { grid-column: 1 / -1; }
.cp-mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cp-mock-grid .cp-mock-card { margin-top: 8px; }
.cp-mock-k { display: flex; gap: 16px; font-size: 9px; color: var(--ord-text-4); }
.cp-mock-v { display: flex; gap: 14px; margin-top: 3px; font-size: 10px; color: var(--ord-text); }
.cp-mock-sel > div { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-top: 1px solid var(--ord-line-soft); font-size: 11px; color: var(--ord-text-2); }
.cp-mock-sel > div:first-child { border-top: 0; }
.cp-mock-sel > div.is-cur { font-weight: 700; color: var(--ord-accent-strong); }
.cp-mock-sel > div.is-dim { opacity: .45; }
.cp-mock-sel em { margin-left: auto; font-style: normal; font-size: 9.5px; color: var(--ord-text-4); }
/* 실적상세·DB상세를 그대로 줄인 미리보기(.mk-*) — 실제 모달의 제목 줄·탭 줄·카드·표 모양. 통합뷰=2열, 탭 방식=탭 한 장씩 */
.cp-pane.is-real { grid-template-columns: minmax(0, 1fr) 400px; }
.cp-shell.is-real { padding: 6px; }
.mk-win { overflow: hidden; border: 1px solid var(--ord-line-2); border-radius: 8px; background: var(--ord-surface); box-shadow: 0 6px 16px rgba(15, 23, 42, .08); font-size: 9px; color: var(--ord-text-2); }
.mk-title { padding: 8px 10px; background: var(--ord-accent); color: var(--ord-on-accent); text-align: center; font-size: 10.5px; font-weight: 700; }
.mk-tabs { display: flex; gap: 3px; padding: 5px 7px; overflow: hidden; white-space: nowrap; background: color-mix(in srgb, var(--ord-accent) 88%, black); }
.mk-tab { flex: none; padding: 3px 8px; border: 0; border-radius: 5px; background: transparent; color: color-mix(in srgb, var(--ord-on-accent) 70%, transparent); font: inherit; font-size: 9px; font-weight: 600; }
button.mk-tab { cursor: pointer; }
.mk-tab.is-on { background: color-mix(in srgb, var(--ord-on-accent) 20%, transparent); color: var(--ord-on-accent); }
.mk-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 6px; max-height: max(260px, min(520px, calc(100vh - 360px))); overflow: auto; background: var(--ord-band); }
.mk-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-card { padding: 7px 8px; border: 1px solid var(--ord-line); border-radius: 6px; background: var(--ord-surface); }
.mk-card h4 { margin: 0 0 6px; font-size: 9.5px; font-weight: 700; color: var(--ord-text); }
.mk-sub { margin: 6px 0 4px; padding-left: 5px; border-left: 2px solid var(--ord-accent); font-size: 8.5px; font-weight: 700; color: var(--ord-text); }
.mk-sub:first-of-type { margin-top: 0; }
.mk-rows { border: 1px solid var(--ord-line); border-radius: 5px; overflow: hidden; }
.mk-rows > div { display: flex; align-items: center; gap: 6px; min-height: 19px; border-top: 1px solid var(--ord-line-soft); }
.mk-rows > div:first-child { border-top: 0; }
.mk-rows b { flex: none; align-self: stretch; display: flex; align-items: center; width: 52px; padding: 0 6px; background: var(--ord-surface-2); font-size: 8.5px; font-weight: 600; color: var(--ord-text-3); }
.mk-rows span { min-width: 0; padding: 2px 0; color: var(--ord-text); }
.mk-pill { display: inline-block; margin: 1px 3px 1px 0; padding: 1px 6px; border-radius: 999px; background: var(--ord-band); color: var(--ord-text-3); font-style: normal; font-size: 8.5px; font-weight: 600; }
.mk-pill.is-on { background: var(--ord-accent-soft); color: var(--ord-accent-strong); }
.mk-statuses small { margin-right: 3px; color: var(--ord-text-4); font-size: 8px; }
.mk-empty { padding: 10px 6px; border: 1px dashed var(--ord-line-2); border-radius: 5px; text-align: center; color: var(--ord-text-4); }
.mk-ok { padding: 6px 7px; border-radius: 5px; background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); line-height: 1.5; }
.mk-chat { min-height: 28px; padding: 7px; border-radius: 5px; background: var(--ord-accent-soft); color: var(--ord-accent-strong); }
.mk-prod { padding: 6px 7px; border: 1px solid var(--ord-line); border-radius: 5px; }
.mk-prod-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mk-prod-h strong { font-size: 9.5px; color: var(--ord-text); }
.mk-prod-h em { padding: 1px 6px; border-radius: 4px; background: var(--ord-band); font-style: normal; font-size: 8px; font-weight: 600; color: var(--ord-text-3); }
.mk-prod small { color: var(--ord-text-4); font-size: 8px; }
.mk-steps { display: flex; gap: 2px; margin-top: 7px; }
.mk-steps > div { position: relative; flex: 1; min-width: 0; padding-top: 9px; text-align: center; }
.mk-steps > div::before { content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 2px; background: var(--ord-line-2); }
.mk-steps > div.is-done::before { background: var(--ord-accent); }
.mk-steps i { position: absolute; top: 0; left: 50%; width: 8px; height: 8px; margin-left: -4px; border: 2px solid var(--ord-line-2); border-radius: 50%; background: var(--ord-surface); }
.mk-steps .is-done i { border-color: var(--ord-accent); background: var(--ord-accent); }
.mk-steps b { display: block; font-size: 7.5px; letter-spacing: -.3px; font-weight: 600; color: var(--ord-text-2); word-break: keep-all; }
.mk-steps small { display: block; min-height: 10px; font-size: 7.5px; color: var(--ord-text-4); }
.mk-gift > div { display: flex; align-items: center; gap: 6px; }
.mk-gift strong { flex: 1; min-width: 0; font-size: 9px; color: var(--ord-text); }
.mk-gift em { font-style: normal; font-size: 8px; color: var(--ord-text-4); }
.mk-gift p { margin: 5px 0 0; padding: 4px 6px; border-radius: 4px; background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); font-size: 8.5px; }
.mk-btn { flex: none; padding: 3px 9px; border: 1px solid var(--ord-line-2); border-radius: 999px; background: var(--ord-surface); font-size: 8.5px; font-weight: 700; color: var(--ord-text-2); }
.mk-btn.is-on { border-color: var(--ord-accent); background: var(--ord-accent); color: var(--ord-on-accent); }
.mk-seg { display: flex; overflow: hidden; border: 1px solid var(--ord-line); border-radius: 5px; }
.mk-seg i { flex: 1; padding: 6px 0; text-align: center; font-style: normal; font-weight: 700; border-left: 1px solid var(--ord-line-soft); }
.mk-seg i:first-child { border-left: 0; }
.mk-seg i.is-on { background: var(--ord-text-3); color: var(--ord-surface); }
.mk-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 7px 8px; border-top: 1px solid var(--ord-line); background: var(--ord-surface); }
.mk-foot small { margin-right: auto; color: var(--ord-text-4); font-size: 8px; }
/* 탭 방식 — 카드 틀을 걷어 한 장씩, 고른 탭의 카드만 */
.mk-body.is-tabs { display: block; background: var(--ord-surface); }
.mk-body.is-tabs .mk-col { display: contents; }
.mk-body.is-tabs .mk-card { margin-bottom: 8px; padding: 0; border: 0; border-radius: 0; background: none; display: none; }
.mk-body.is-tabs[data-pvtab="info"] .mk-card[data-tab="info"],
.mk-body.is-tabs[data-pvtab="products"] .mk-card[data-tab="products"],
.mk-body.is-tabs[data-pvtab="gifts"] .mk-card[data-tab="gifts"],
.mk-body.is-tabs[data-pvtab="pay"] .mk-card[data-tab="pay"],
.mk-body.is-tabs[data-pvtab="bl"] .mk-card[data-tab="bl"],
.mk-body.is-tabs[data-pvtab="dup"] .mk-card[data-tab="dup"],
.mk-body.is-tabs[data-pvtab="work"] .mk-card[data-tab="work"] { display: block; }

.cp-live-note { display: flex; gap: 8px; margin: 14px 4px 0; font-size: 10.5px; line-height: 1.8; color: var(--ord-text-4); }
.cp-workflow { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ord-line); }
.cp-workflow h3 { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--ord-text); }
.cp-stages { display: flex; gap: 4px; margin: 12px 0 10px; }
.cp-stage { flex: 1; min-width: 0; padding: 9px 2px; border: 1px solid var(--ord-line); border-radius: 6px; background: var(--ord-surface); text-align: center; font-size: 9.5px; line-height: 1.35; color: var(--ord-text-4); word-break: keep-all; }
.cp-stage small { display: block; margin-top: 2px; font-size: 8.5px; font-weight: 600; }
.cp-stage.is-ready { border-color: var(--ord-tint-green-fg); background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); font-weight: 700; }
.cp-flow-cap { margin: 0; font-size: 10.5px; line-height: 1.8; color: var(--ord-text-3); }
.cp-cxs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cp-cxs i { padding: 2px 8px; border-radius: 999px; background: var(--ord-tint-red-bg); color: var(--ord-tint-red-fg); font-style: normal; font-size: 10px; font-weight: 600; }
.cp-pbar { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 11px; color: var(--ord-text-2); }
.cp-pbar b { width: 76px; flex: none; font-weight: 600; }
.cp-pbar i { height: 7px; border-radius: 4px; background: var(--pc, var(--ord-accent)); min-width: 3px; }
.cp-pbar span { color: var(--ord-text-4); white-space: nowrap; }

/* ───── 하단 저장 띠 ───── */
.cp-footer { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 36px calc(-1 * var(--ord-page-gutter, 24px)) 0; padding: 14px var(--ord-page-gutter, 24px); border-top: 1px solid var(--ord-line); background: color-mix(in srgb, var(--ord-surface) 94%, transparent); backdrop-filter: blur(14px); }
.cp-status { font-size: 12px; color: var(--ord-text-3); }
.cp-status.is-dirty { color: var(--ord-tint-amber-fg); font-weight: 600; }
.cp-status-list { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--ord-text-4); }
.cp-footer-acts { display: flex; gap: 8px; }
.cp-plain .cp-footer { display: none; }

/* 이관요청·세부 창 요약 줄(기존 .cts-* 배지 그대로) */
.cp-row-content.cts-card { cursor: pointer; }
.cp-row-content.cts-card .cts-card-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .cp-pane, .cp-pane.is-real { grid-template-columns: minmax(0, 1fr); }
  .cp-live { position: static; }
}

/* ───── 모바일(≤768px) — M2: 영역 목록 → 상세. 머리말은 한 줄, 캠페인은 선택 카드, 저장 띠는 바꾼 것이 있을 때만 앱 탭바 위에 ───── */
@media (max-width: 768px) {
  .cp-tabs-wrap, .cp-section-head { display: none; }
  .cp-head { align-items: center; }
  .cp-head .sset-page-head { margin-bottom: 12px; }
  .cp-mplus { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ord-accent); color: var(--ord-on-accent); font-size: 22px; line-height: 1; }
  /* 캠페인 선택 카드(펼치면 목록) */
  .cp-pick { display: block; margin-bottom: 14px; border: 1px solid var(--ord-line); border-radius: 14px; background: var(--ord-surface); box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
  .cp-pick > summary { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 16px; list-style: none; cursor: pointer; }
  .cp-pick > summary::-webkit-details-marker { display: none; }
  .cp-pick > summary span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cp-pick > summary b { font-size: 16px; font-weight: 800; color: var(--ord-text); }
  .cp-pick small { font-size: 11.5px; color: var(--ord-text-3); }
  .cp-pick > summary em { margin-left: auto; font-style: normal; font-size: 18px; color: var(--ord-text-4); }
  .cp-pick[open] > summary { border-bottom: 1px solid var(--ord-line); }
  .cp-pick-a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border-bottom: 1px solid var(--ord-line-soft); color: var(--ord-text); text-decoration: none; }
  .cp-pick-a:last-child { border-bottom: 0; }
  .cp-pick-a span { display: flex; flex-direction: column; gap: 2px; }
  .cp-pick-a b { font-size: 14.5px; font-weight: 700; }
  .cp-pick-a.is-on { background: var(--ord-accent-soft); color: var(--ord-accent-strong); }
  .cp-split { display: block; }
  /* 영역 목록 = 큰 카드 줄(요약 한 줄 + ›) */
  .cp-nav { position: static; display: grid; gap: 10px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .cp-nav-head { display: none; }
  .cp-nav-btn { min-height: 72px; padding: 12px 14px; border: 1px solid var(--ord-line); border-radius: 14px; background: var(--ord-surface); }
  .cp-nav-btn:last-child { border-bottom: 1px solid var(--ord-line); }
  .cp-nav-btn.is-on { background: var(--ord-surface); color: var(--ord-text); font-weight: 600; }
  .cp-nav-btn.is-on::before { display: none; }
  .cp-nav-tx { gap: 3px; flex: 1; }
  .cp-nav-tx b { font-size: 15.5px; font-weight: 800; }
  .cp-nav-tx small { display: block; font-size: 11.5px; font-weight: 500; line-height: 1.45; color: var(--ord-text-3); }
  .cp-nav-n { display: none; }
  .cp-nav-n.is-dirty { display: inline-block; margin-left: 0; }
  .cp-nav-chev { display: block; font-size: 20px; color: var(--ord-text-4); }
  .cp[data-view="list"] .cp-panes { display: none; }
  .cp[data-view="pane"] .cp-nav, .cp[data-view="pane"] .cp-head, .cp[data-view="pane"] .cp-pick { display: none; }
  /* 상세: 위 고정 줄(‹ 뒤로 · 영역 이름 · 미리보기) */
  .cp-mbar { position: sticky; top: 0; z-index: 12; box-sizing: border-box; display: flex; align-items: center; gap: 10px; align-self: stretch; width: calc(100% + 2 * var(--ord-page-gutter, 12px)); margin: 0 calc(-1 * var(--ord-page-gutter, 12px)) 12px; padding: 8px var(--ord-page-gutter, 12px); border-bottom: 1px solid var(--ord-line); background: var(--ord-panel); }
  .cp-mbar small { display: block; font-size: 11px; color: var(--ord-text-4); }
  .cp-mbar h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ord-text); }
  .cp-mback { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ord-band); color: var(--ord-text); font-size: 26px; line-height: 1; cursor: pointer; }
  .cp-mpv { margin-left: auto; min-height: 40px; padding: 0 16px; border: 1px solid var(--ord-accent); border-radius: 999px; background: var(--ord-accent-soft); color: var(--ord-accent-strong); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
  .cp-pane { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .cp-mbar { order: -2; }
  .cp-live { display: none; order: -1; align-self: stretch; position: static; margin-bottom: 14px; }
  .cp-pane.show-pv .cp-live { display: block; }
  .cp-panel { border-radius: 16px; }
  .cp-row { padding: 18px 16px; }
  .cp-row-title h3 { font-size: 15px; }
  .cp-row-content { flex-wrap: wrap; margin-top: 12px; gap: 10px; }
  .cp-choices, .cp-choices.is-3 { gap: 8px; margin-top: 14px; }
  .cp-choices.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-choice { min-height: 82px; padding: 13px; }
  .cp-input { padding: 12px 13px; font-size: 16px; }
  .cp-textbtn { min-height: 40px; padding: 8px 14px; border: 1px solid var(--ord-line-2); border-radius: 999px; background: var(--ord-surface); }
  .cp-btn { min-height: 40px; }
  .cp-chip { padding: 6px 11px; font-size: 12px; }
  /* 저장 띠 — 바꾼 것이 있을 때만, 앱 하단 탭바 바로 위에 작게 */
  .cp-footer { display: none; position: fixed; left: 10px; right: 10px; bottom: calc(var(--shm-tab-h, 62px) + var(--shm-safe-b, 0px) + 10px); z-index: 60; margin: 0; padding: 8px 8px 8px 16px; border: 0; border-radius: 16px; background: var(--ord-head-bg); color: var(--ord-on-solid); backdrop-filter: none; box-shadow: 0 8px 24px rgba(15, 23, 42, .3); }
  html.ordars-app:not(.web-tabbar) .cp-footer { bottom: 10px; }
  body.m-kbd .cp-footer { display: none !important; }
  .cp.has-dirty .cp-footer { display: flex; }
  .cp-status, .cp-status.is-dirty { flex: 1; color: inherit; font-size: 13px; font-weight: 700; }
  .cp-status-list, .cp-long { display: none; }
  .cp-footer .cp-btn { min-height: 40px; padding: 0 16px; background: transparent; border-color: color-mix(in srgb, var(--ord-on-solid) 40%, transparent); color: var(--ord-on-solid); }
  .cp-footer .cp-btn.is-primary { background: var(--ord-on-solid); border-color: var(--ord-on-solid); color: var(--ord-head-bg); }
  .cp-footer .cp-btn[disabled] { display: none; }
  .cp[data-view="pane"] { padding-bottom: 96px; }
}