/* ══════════════════════════════════════════════════════════
   진행서 '새 화면 미리보기' (.cdp — js/cpl-detail-preview.js, 2026-10-23)
   목업 artifact KU4eEfdvYfacdHg2zjzDh1 'B안 수정 2'. 부품 크기·색 = 공용 규격(ui-kit.css):
   보통 32 / 작게 28 / 모서리 6·카드 8 / 고른 것 = 연청록(--sel-*) / 검정 = 주 버튼(로그 추가)만.
   기존 진행서 클래스(.cp-tabs·.cp-tab·.cp-tab-panel·.cp-checklist-section)는 .cdp 안에서만 모양을 바꾼다.
   ══════════════════════════════════════════════════════════ */
.cdp{--cdp-line:#e4e4e7;--cdp-soft:#f4f4f5;color:var(--text);}
.cdp-top{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.cdp-grow{flex:1 1 auto;}
.cdp-muted{font-size:12px;color:var(--text2);font-weight:400;}
.cdp-grid{display:grid;grid-template-columns:420px minmax(0,1fr);gap:12px;align-items:start;}
.cdp-col{display:flex;flex-direction:column;gap:12px;min-width:0;}
.cdp-card{background:var(--surface);border:1px solid var(--cdp-line);border-radius:8px;padding:12px 16px;box-sizing:border-box;}
.cdp-card-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;}
.cdp-card-hd strong{font-size:13px;}
.cdp-sep{border-top:1px solid #f0f0f2;margin-top:12px;padding-top:10px;}
.cdp-link{font-family:inherit;border:0;background:none;padding:0;color:var(--accent-text);font-size:inherit;cursor:pointer;text-decoration:underline;}

/* 왼쪽 요약 */
.cdp-sum{padding:16px;}
.cdp-sum-hd{display:flex;gap:12px;align-items:flex-start;}
.cdp-thumb{width:56px;height:56px;flex-shrink:0;border-radius:8px;background:var(--cdp-soft);border:1px solid var(--cdp-line);overflow:hidden;}
.cdp-thumb.has-img{cursor:zoom-in;}
.cdp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cdp-sum-name{min-width:0;display:flex;flex-direction:column;gap:4px;}
.cdp-sum-name h2{margin:0;font-size:17px;font-weight:700;line-height:1.35;word-break:keep-all;}
.cdp-sum-act{display:flex;gap:8px;margin-top:12px;}
.cdp-status{width:auto;min-width:88px;cursor:pointer;}
.cdp-status.is-stop{background:var(--sel-bg);border-color:var(--sel-line);color:var(--sel-text);font-weight:500;}
.cdp-group{font-family:inherit;display:block;width:100%;margin-top:8px;text-align:left;border:1px dashed var(--seg-line);border-radius:6px;background:var(--surface);
  color:var(--text2);font-size:12px;padding:6px 10px;cursor:pointer;}
.cdp-group:hover{background:var(--surface2);color:var(--text);}
.cdp-props{border-top:1px solid #f0f0f2;margin-top:14px;padding-top:6px;}
.cdp-prop{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;min-height:30px;font-size:12.5px;}
.cdp-prop > span:first-child{font-size:12px;color:var(--text2);}
.cdp-verdict.is-late{color:#b91c1c;} .cdp-verdict.is-warn{color:#8a5300;} .cdp-verdict.is-ok{color:#15803d;}
.cdp-fact{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto auto;align-items:center;gap:8px;font-size:12.5px;line-height:1.5;min-height:28px;}
.cdp-fact > span:first-child{font-size:12px;color:var(--text2);}
.cdp-fact-d{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums;}
.cdp-x{color:var(--text3);font-size:12px;}
.cdp-x:hover{color:var(--text);}
.cdp-issue{font-size:12.5px;padding:6px 0;border-top:1px solid #f4f4f5;}
.cdp-issue:first-of-type{border-top:0;}
.cdp-issue-row{display:flex;align-items:center;gap:8px;}
.cdp-issue-t{flex:1 1 auto;min-width:0;line-height:1.5;word-break:keep-all;}
.cdp-issue-m{font-size:11px;color:var(--text3);margin-top:2px;}
.cdp-issue.is-closed .cdp-issue-t{color:var(--text2);}
.cdp-over{color:#b91c1c;font-weight:600;}
.cdp-closed{margin-top:8px;font-size:12px;}
.cdp-closed summary{cursor:pointer;color:var(--text2);padding:4px 0;}
/* 바로 입력 — 왼쪽 칸 폭(320) 안에서 세로로. 회색 바탕 = 지금 쓰는 중인 칸 */
.cdp-form{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px;padding:10px;border:1px solid var(--seg-line);border-radius:6px;background:var(--seg-track);}
.cdp-form .oc-in{width:100%;box-sizing:border-box;background:var(--surface);}
.cdp-form-row{display:flex;align-items:center;gap:6px;}
.cdp-form-row .oc-in{flex:1 1 auto;min-width:0;}
.cdp-form-row .cdp-in-date{flex:0 0 132px;width:132px;}
.cdp-form-act{display:flex;align-items:center;gap:6px;margin-top:2px;}
.cdp-form-act .cdp-muted{font-size:11px;}
.cdp-foot{margin-top:10px;font-size:11px;color:var(--text3);}

/* 단계 막대 — 8칸 꺾쇠(Salesforce 경로 32px) */
/* 좁은 화면(노트북·창 반쪽)에서 8칸 이름이 '소…'로 잘리지 않게 칸 최소 폭 + 가로 스크롤 */
.cdp-steps{display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin;}
.cdp-steps > .cdp-step{min-width:84px;}
.cdp-step{font-family:inherit;flex:1 1 0;min-width:0;height:32px;border:0;padding:0 8px 0 14px;display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:12px;font-weight:500;color:var(--text3);background:var(--surface);cursor:pointer;white-space:nowrap;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%);box-shadow:inset 0 0 0 1px var(--cdp-line);}
.cdp-step span{overflow:hidden;text-overflow:ellipsis;}
.cdp-step.is-first{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);padding-left:12px;border-radius:6px 0 0 6px;}
.cdp-step.is-last{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,10px 50%);border-radius:0 6px 6px 0;}
/* 지난 단계 = 옅은 회색 / 현재 = 짙은 청록 한 칸(Salesforce·Pipedrive 경로 — 회색 사이 진한 칸 하나라 바로 보이되,
   채도 낮은 청록이라 시끄럽지 않음) / 남은 단계 = 흰 바탕·연한 글자 / 멈춤 = 연청록 */
.cdp-step.is-done{background:#eef0f3;color:#52525b;box-shadow:none;}
.cdp-step.is-cur{background:var(--sel-text);color:#fff;font-weight:600;box-shadow:none;}
.cdp-step.is-cur.is-paused{background:var(--sel-bg);color:var(--sel-text);box-shadow:inset 0 0 0 1px var(--sel-line);}
.cdp-step:disabled{cursor:default;}
.cdp-step:not(:disabled):not(.is-cur):hover{color:var(--text);background:var(--surface2);}
.cdp-step-sub{margin-top:8px;font-size:12px;color:var(--text2);}
.cdp-step-sub b{color:var(--text);}
.cdp-step-sub .cdp-stop{color:var(--sel-text);}

/* 진행 체크 */
.cdp-legend{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text2);}
.cdp-chk-groups{display:flex;flex-wrap:wrap;gap:12px 20px;}
.cdp-chk-group{display:flex;flex-direction:column;gap:6px;min-width:0;}
.cdp-chk-g{font-size:11px;color:var(--text2);border-top:2px solid var(--cdp-line);padding-top:4px;}
.cdp-chk-row{display:flex;gap:6px;flex-wrap:wrap;}
.cdp-chk{font-family:inherit;display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;height:28px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:500;
  white-space:nowrap;cursor:pointer;background:var(--surface);color:var(--text2);border:1px dashed var(--border);}
.cdp-chk.is-done{background:var(--cdp-soft);color:#334155;border:1px solid var(--cdp-line);}
.cdp-chk.is-done svg:first-child{color:#15803d;}
.cdp-chk.is-ing{background:#e8eefc;color:#1d4ed8;border:1px solid #c7d5f8;font-weight:700;}
.cdp-chk.is-fixed{cursor:default;}
.cdp-chk:not(.is-fixed):hover{border-color:var(--text3);}
.cdp-dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.cdp-auto{color:var(--text3);}

/* 탭 — 밑줄형 40px(Pipedrive), 고른 탭 = 청록 밑줄. 기존 .cp-tabs 의 상자 모양을 이 화면에서만 바꿈 */
.cdp-tabwrap{background:var(--surface);border:1px solid var(--cdp-line);border-radius:8px;overflow:hidden;}
.cdp .cp-tabs{display:flex;gap:20px;margin:0;padding:0 16px;border:0;border-bottom:1px solid var(--cdp-line);border-radius:0;background:transparent;overflow-x:auto;}
.cdp .cp-tab{flex:0 0 auto;height:40px;padding:0 4px;border-radius:0;border-bottom:2px solid transparent;font-size:13px;color:var(--text2);background:transparent;white-space:nowrap;}
.cdp .cp-tab:not(.active):hover{background:transparent;color:var(--text);}
.cdp .cp-tab.active{background:transparent;color:var(--sel-text);font-weight:700;border-bottom-color:var(--accent);}
.cdp .cp-tab .cp-tab-count,.cdp .cp-tab:not(.active) .cp-tab-count{background:var(--cdp-soft);color:var(--text2);border-radius:999px;padding:0 6px;font-size:11px;font-weight:500;}
.cdp .cp-tab.active .cp-tab-count{background:var(--sel-bg);color:var(--sel-text);}
.cdp .cp-tab-panel{border:0;border-radius:0;}

/* 확인 리스트 탭 — 기존 오른쪽 칸 카드를 탭 폭으로 넓게 */
.cdp-memo .cp-checklist-section{position:static;max-height:none;border:0;padding:0;background:transparent;}
/* 탭 이름이 이미 '확인 리스트'라 카드 제목 글자는 숨기고 '그룹 공용' 칩·저장 시각만 남김 */
.cdp-memo .cp-checklist-head{border-bottom:0;padding-bottom:0;min-height:20px;}
.cdp-memo .cp-checklist-title{font-size:0;}
.cdp-memo .cp-checklist-title .cpi-note-shared{font-size:11px;}
.cdp-memo #cp-prod-memo-quill.ql-container.ql-snow{min-height:420px;background:var(--surface);font-size:13px;}
.cdp-memo #cp-prod-memo-quill .ql-editor{padding:14px 18px;line-height:1.7;}

/* 로그 탭 — 확인 리스트가 따로 탭이라 로그가 전체 폭 */
.cp-log-tab-layout.is-solo{grid-template-columns:minmax(0,1fr);}

/* 그룹 진행서는 상태 카드가 아니라 SKU 목록이라 예전 폭 그대로 */
#cdp-root[data-group] .cdp-grid{grid-template-columns:320px minmax(0,1fr);}
@media (max-width: 1100px){
  .cdp-grid,#cdp-root[data-group] .cdp-grid{grid-template-columns:minmax(0,1fr);}
}

/* ══════════════════════════════════════════════════════════
   진행서 새 화면 — 탭 7개 안쪽 모양 (2026-10-26). 공용 부품 규격(ui-kit.css)과 PL 보드·로그 추가 새 화면에 맞춤:
   누르는 칩 28 · 고른 칩 = 연청록(--sel-*) · 도구 줄 검색·버튼 28 · 표 머리 32 / 줄 44 · 보여 주는 칩 22(모서리 4) ·
   카드 8 · 검정 = 화면의 주 버튼(왼쪽 [로그 추가]) 하나 — 탭 안 추가·저장 버튼은 테두리 버튼.
   상태 색(지연 빨강·진행 파랑·완료 초록·중요 노랑)은 뜻이 있어 유지하고 모양만 맞춘다. 모두 .cdp 안에서만(기존 화면 무영향).
   ⚠ 샘플 탭 스타일은 JS 가 <head> 끝에 넣으므로(pl-samples.js) 클래스 2~3개로 이긴다. 인라인 스타일(첨부 칩 등)은 그대로
   ══════════════════════════════════════════════════════════ */
.cdp .cp-tab-panel{padding:16px 20px 20px;}

/* 공통 — 탭 도구 줄의 누르는 칩(로그 분류·VOC·샘플 범위) */
.cdp .cp-log-filter-pill,
.cdp .cp-voc-filter-pill,
.cdp .pl-sample-scope-chip{display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:var(--chip-tap);padding:0 10px;
  border:1px solid var(--seg-line);border-radius:999px;background:var(--surface);color:var(--text2);font-size:12px;font-weight:400;line-height:1;}
.cdp .cp-log-filter-pill:hover:not(.active),
.cdp .cp-voc-filter-pill:hover:not(.active),
.cdp .pl-sample-scope-chip:hover:not(.on){background:var(--surface2);}
.cdp .cp-log-filter-pill.active,
.cdp .cp-voc-filter-pill.active,
.cdp .pl-sample-scope-chip.on{background:var(--sel-bg);border-color:var(--sel-line);color:var(--sel-text);font-weight:500;}
.cdp .cp-log-filter-pill.star{font-size:14px;color:#a1a1aa;}
.cdp .cp-log-filter-pill.star.active{background:#fef3c7;border-color:#fcd34d;color:#d97706;}
/* 탭 안 추가·저장 버튼 → 테두리 버튼(검정 아님 — 화면 주 버튼은 왼쪽 [로그 추가]) */
.cdp .cp-log-add-btn,
.cdp .cp-cert-add,
.cdp .cpi-sec-actions .btn-save{display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;height:var(--btn-sm);padding:0 10px;
  border:1px solid var(--border2,#d4d4d8);border-radius:6px;background:var(--surface);color:var(--text);font-size:12px;font-weight:500;line-height:1;filter:none;}
.cdp .cp-log-add-btn:hover,
.cdp .cp-cert-add:hover,
.cdp .cpi-sec-actions .btn-save:hover{background:var(--surface2);color:var(--text);border-color:var(--border2,#d4d4d8);filter:none;}
.cdp .cpi-sec-actions .btn-edit{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--btn-sm);padding:0 10px;border:0;border-radius:6px;font-size:12px;color:var(--text2);}
.cdp .cpi-sec-actions .btn-edit:hover{background:var(--surface2);color:var(--text);}
/* 줄 안 작은 버튼(인증 완료·수정·삭제, 히스토리 수정·삭제) → 28 */
.cdp .cp-cert-btn{box-sizing:border-box;height:var(--btn-sm);min-width:var(--btn-sm);padding:0 8px;border:1px solid var(--cdp-line);border-radius:6px;background:var(--surface);
  color:var(--text2);font-size:12px;display:inline-flex;align-items:center;justify-content:center;}
.cdp .cp-cert-btn:hover{background:var(--surface2);color:var(--text);border-color:var(--cdp-line);}
.cdp .cp-cert-btn.is-del:hover{background:#fdecec;color:#c81e1e;border-color:#f0b4b4;}
/* 탭 머리(제목 + 설명 + 버튼) */
.cdp .cp-cert-title,.cdp .cp-hist-title{font-size:13px;font-weight:700;}
.cdp .cp-cert-hint,.cdp .cp-hist-hint{font-size:12px;color:var(--text3);}
/* 비었을 때 */
.cdp .cp-log-empty,.cdp .cp-cert-empty,.cdp .cp-hist-empty,.cdp .cpi-empty,.cdp .cp-tab-placeholder{border:1px dashed var(--cdp-line);border-radius:8px;background:#fafafa;
  color:var(--text3);font-size:12px;padding:28px 16px;text-align:center;}

/* ── 로그 ── */
.cdp .cp-log-head{gap:8px;margin-bottom:12px;align-items:center;}
.cdp .cp-log-filter-pills{gap:6px;}
.cdp .cp-log-search-input{box-sizing:border-box;height:var(--btn-sm);width:240px;padding:0 28px 0 28px;font-size:12px;border-radius:6px;border-color:var(--cdp-line);}
.cdp .cp-log-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
.cdp .cp-logtab-tblwrap{border-color:var(--cdp-line);border-radius:8px;}
.cdp .cp-logtab-table{font-size:13px;}
.cdp .cp-logtab-table th{height:32px;padding:0 8px;font-size:12px;font-weight:500;color:#71717a;background:#fafafa;border-bottom-color:var(--cdp-line);}
.cdp .cp-logtab-table td{height:44px;padding:0 8px;border-bottom-color:#f0f0f2;}
.cdp .cp-logtab-table .c-time{font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums;}
.cdp .cp-logtab-table .c-cmt{font-size:12px;}
.cdp .cp-logtab-table .c-author{font-size:12px;color:var(--text2);}
.cdp .cp-logtab-row:hover{background:#fafafa;}
.cdp .cp-logtab-row.important{background:#fffdf3;}
.cdp .cp-logtab-row.important:hover{background:#fff8e1;}
.cdp .cp-lt-title{font-weight:500;}
.cdp .cp-log-star{color:#d4d4d8;}
.cdp .cp-log-star.on{color:#f59e0b;}
/* 태그 → 보여 주는 칩 22(모서리 4, 회색). 뜻이 있는 것만 색: VOC = 빨강/초록, 공유 = 연청록 */
.cdp .cp-log-tag{display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:20px;padding:0 6px;border:0;border-radius:4px;
  background:var(--surface2);color:var(--text2);font-size:11px;font-weight:400;line-height:1;vertical-align:middle;}
.cdp .cp-log-tag.ch,.cdp .cp-log-tag.dir,.cdp .cp-log-tag.ven{background:var(--surface2);color:var(--text2);}
.cdp .cp-log-tag.cat{background:var(--surface2);color:var(--text);}
.cdp .cp-log-tag.share{background:var(--sel-bg);color:var(--sel-text);}
.cdp .cp-log-tag.voc-unresolved{background:#fde8e8;color:#c81e1e;}
.cdp .cp-log-tag.voc-resolved{background:#e3f6e9;color:#15803d;}
.cdp .cp-log-due{display:inline-flex;align-items:center;box-sizing:border-box;height:20px;padding:0 6px;border:0;border-radius:4px;font-size:11px;}

/* ── VOC (카드 목록) ── */
.cdp .cp-voc-filter-pills{gap:6px;margin-bottom:0;}
.cdp .cp-log-group{margin-bottom:16px;}
.cdp .cp-log-group-head{padding:0 0 6px;margin-bottom:8px;background:transparent;border-radius:0;border-bottom:1px solid var(--cdp-line);font-size:12px;font-weight:500;color:var(--text2);}
.cdp .cp-log-grid{gap:10px;}
.cdp .cp-log-card{border-color:var(--cdp-line);border-radius:8px;padding:12px 14px;box-shadow:none;transform:none;}
.cdp .cp-log-card:hover{border-color:#d4d4d8;box-shadow:0 1px 3px rgba(0,0,0,.06);transform:none;}
.cdp .cp-log-card-time{font-size:12px;color:var(--text3);}
.cdp .cp-log-card-content{font-size:13px;color:var(--text2);}
.cdp .cp-log-card-comments{background:var(--surface2);color:var(--text2);border-radius:4px;font-size:11px;}

/* ── 히스토리 ── */
.cdp .cp-hist{gap:12px;}
.cdp .cp-hist-key{background:#fafafa;border:1px solid var(--cdp-line);border-radius:8px;padding:12px 16px;gap:12px 16px;}
.cdp .cp-hist-key-label{font-size:12px;font-weight:500;color:#71717a;}
.cdp .cp-hist-key .form-input,.cdp .cp-hist-key select{box-sizing:border-box;height:var(--btn-sm);padding:0 8px;font-size:12px;border-radius:6px;}
.cdp .cp-hist-save{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--btn-sm);padding:0 12px;border:1px solid var(--border2,#d4d4d8);border-radius:6px;
  background:var(--surface);color:var(--text);font-size:12px;font-weight:500;}
.cdp .cp-hist-save:hover{background:var(--surface2);}
.cdp .cp-hist-key-hint{font-size:11px;color:var(--text3);}
.cdp .cp-hist-timeline{border-color:var(--cdp-line);border-radius:8px;}
.cdp .cp-hist-row{min-height:44px;box-sizing:border-box;padding:6px 14px;border-bottom-color:#f0f0f2;align-items:center;}
.cdp .cp-hist-row.is-future{background:#fcfcfd;}
.cdp .cp-hist-date{font-size:12px;color:var(--text2);}
.cdp .cp-hist-kind{display:inline-flex;align-items:center;box-sizing:border-box;height:22px;padding:0 8px;border-radius:4px;font-size:11px;font-weight:500;}
.cdp .cp-hist-tag{border-radius:4px;font-size:11px;}

/* ── 샘플 ── */
.cdp .pl-sample-scope-bar{gap:6px;margin-bottom:10px;}
.cdp .pl-sample-row{border-color:var(--cdp-line);border-radius:8px;padding:10px 14px;}
.cdp .pl-sample-row.other{border-style:dashed;background:#fafafa;}
.cdp .pl-sample-row .pl-sample-row-name{font-size:14px;color:var(--text);}
.cdp .pl-sample-row .pl-sample-row-meta{font-size:12px;color:var(--text2);}
.cdp .pl-sample-row .pl-sample-row-img{border-radius:6px;}
.cdp .pl-sample-row .pl-sample-po{border-radius:4px;background:var(--surface2);font-size:11px;}
.cdp .pl-sample-row .pl-sample-sku-tag{border-radius:4px;font-size:11px;}
.cdp .pl-sample-row .pl-sample-input-no,
.cdp .pl-sample-row .pl-sample-input-note{border-radius:6px;font-size:12px;background:#fafafa;}
.cdp .pl-sample-row .pl-sample-input-no:focus,
.cdp .pl-sample-row .pl-sample-input-note:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);background:var(--surface);}
/* 상태 배지 — .badge 는 발주관리(.so-scope) 안에서만 모양이 있어 여기선 맨글자였음 → 보여 주는 칩 22 */
.cdp .pl-sample-row .badge{display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:500;
  background:var(--surface2);color:var(--text2);white-space:nowrap;}
.cdp .pl-sample-row .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.cdp .pl-sample-row .badge.badge-green{background:#e3f6e9;color:#15803d;}
.cdp .pl-sample-row .badge.badge-blue{background:#e8eefc;color:#1d4ed8;}
.cdp .pl-sample-row .badge.badge-yellow{background:#fcf1dc;color:#a16207;}

/* ── 인증·검사 ── */
.cdp .cp-cert-panel{gap:8px;}
.cdp .cp-cert-head{margin-bottom:4px;}
.cdp .cp-cert-row{border-color:var(--cdp-line);border-radius:8px;min-height:44px;box-sizing:border-box;padding:8px 14px;align-items:center;}
.cdp .cp-cert-row.is-done,.cdp .cp-cert-row.is-failed{background:#fafafa;}
.cdp .cp-cert-state{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:22px;padding:0 8px;font-size:11px;font-weight:500;}
.cdp .cp-cert-name{font-weight:500;}
.cdp .cp-cert-dates{font-size:12px;color:var(--text2);font-variant-numeric:tabular-nums;}
.cdp .cp-cert-memo{font-size:12px;color:var(--text3);}

/* ── 제품정보 ── */
.cdp .cp-info-cols{gap:12px;}
.cdp .cp-info-card{border-color:var(--cdp-line);border-radius:8px;padding:16px;}
.cdp .cpi-master{background:#fafafa;border:1px solid #f0f0f2;border-radius:8px;}
.cdp .cpi-master-badge{background:var(--sel-bg);color:var(--sel-text);border-radius:4px;font-weight:500;}
.cdp .cpi-master-name{font-weight:700;}
.cdp .cpi-sec-head b{font-size:13px;}
.cdp .cpi-spec-table{border-color:var(--cdp-line);font-size:13px;}
.cdp .cpi-spec-table th{background:#fafafa;color:#71717a;font-size:12px;font-weight:500;}
.cdp .cpi-spec-table td,.cdp .cpi-spec-table th{border-color:#f0f0f2;}
.cdp .cpi-spec-table tr:hover td{background:#fafafa;}
.cdp .cpi-row-acts button{border-radius:6px;}

/* ── 확인 리스트·제품정보 메모 에디터 — 노란 바탕 대신 흰 바탕, 툴바 모서리 맞춤 ── */
.cdp .ql-toolbar.ql-snow{border-color:var(--cdp-line);border-radius:6px 6px 0 0;background:#fafafa;}
.cdp .ql-container.ql-snow{border-color:var(--cdp-line);border-radius:0 0 6px 6px;background:var(--surface);}
.cdp .cpi-note-shared{background:var(--sel-bg);color:var(--sel-text);border-radius:4px;}

/* ── 그룹 진행서 새 화면 (cdpRenderGroupDetail, 2026-10-26) ── */
.cdp-grp-desc{margin-top:10px;font-size:12px;color:var(--text2);line-height:1.5;}
.cdp-grp-skus{display:flex;flex-direction:column;gap:2px;}
.cdp-grp-sku{font-family:inherit;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  padding:6px;border:0;border-radius:6px;background:transparent;text-align:left;cursor:pointer;color:var(--text);}
.cdp-grp-sku:hover{background:var(--surface2);}
.cdp-grp-sku-name{font-size:12.5px;line-height:1.4;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.cdp-grp-sku-name small{display:block;font-size:11px;color:var(--text3);}
.cdp-grp-stage{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--surface2);color:var(--text2);font-size:11px;white-space:nowrap;}
.cdp #cp-group-ai-summary-slot:empty{display:none;}

/* ── 진행서 1~3분할 보기 (cpl-projects-multi.js) — 같은 카드·칩 모양 ── */
#page-pl-multi-detail .cp-multi-topbar-title{font-size:16px;font-weight:700;}
#page-pl-multi-detail .cp-multi-pane{border:1px solid #e4e4e7;border-radius:8px;background:var(--surface);box-shadow:none;}
#page-pl-multi-detail .cp-multi-pane-head{padding:12px 14px;border-bottom:1px solid #e4e4e7;background:var(--surface);}
#page-pl-multi-detail .cp-multi-pane-thumb{width:40px;height:40px;border-radius:6px;border:1px solid #e4e4e7;}
#page-pl-multi-detail .cp-multi-pane-name{font-size:14px;font-weight:700;}
#page-pl-multi-detail .cp-multi-pane-btn{box-sizing:border-box;width:28px;height:28px;border:1px solid #e4e4e7;border-radius:6px;background:var(--surface);}
#page-pl-multi-detail .cp-multi-pane-btn:hover{background:var(--surface2);}
#page-pl-multi-detail .cp-multi-pane-body{padding:12px 14px;}
#page-pl-multi-detail .cp-log-search-input{box-sizing:border-box;height:var(--btn-sm);font-size:12px;}

/* ── 진행서 탭에서 여는 창 공용 모양 (.cdp-dlg, 2026-10-26) ──────────────────────────────
   대상: 스펙 추가·수정 / 스펙 템플릿 관리 / 인증·검사 추가·수정 / 완료·불합격 날짜 / 날짜 기록 / VOC 처리 /
   그룹 단계 변경 / 로그·댓글 수정 이력. 창은 #modal-box 안에 그려져 .cdp 범위 밖이라 따로 클래스로 잡는다.
   기준 = 로그 추가 창 B안(lap-mb): 제목 16/700(기호·이모지 없음) · 라벨 12/500 회색 · 입력 32 · 누르는 칩 26 둥근 테두리 ·
   아래 버튼 줄 = 오른쪽 정렬 + 위 구분선 · 취소 → 주 버튼(검정) 순서. */
.cdp-dlg{color:#18181b;font-size:13px;}
.cdp-dlg .modal-title,.cdp-dlg .cdp-dlg-title{font-size:16px;font-weight:700;color:#18181b;margin:0 0 4px;letter-spacing:-.01em;}
.cdp-dlg .cdp-dlg-sub{font-size:12px;color:#8e8e96;margin:0 0 16px;line-height:1.55;}
.cdp-dlg .modal-title + .cdp-dlg-sub{margin-top:0;}
.cdp-dlg .modal-title + :not(.cdp-dlg-sub){margin-top:14px;}
.cdp-dlg .form-field{margin-bottom:14px;}
.cdp-dlg .form-field > label,.cdp-dlg .form-label{display:block;font-size:12px;font-weight:500;color:#71717a;margin-bottom:6px;}
.cdp-dlg .cp-cert-form-row{gap:12px;margin-bottom:10px;}
.cdp-dlg .cp-cert-form-row > label{width:72px;font-size:12px;font-weight:500;color:#71717a;}
.cdp-dlg .cp-cert-form-hint{font-size:12px;color:#8e8e96;line-height:1.55;margin:-4px 0 12px 84px;}
.cdp-dlg .cp-cert-form-check{margin-left:84px;font-size:12px;}
.cdp-dlg .cpi-hint{font-size:11.5px;color:#8e8e96;font-weight:400;}
.cdp-dlg textarea.form-input,.cdp-dlg .form-textarea{height:auto;min-height:84px;padding:8px 10px;font-size:13px;line-height:1.55;border-radius:6px;box-sizing:border-box;width:100%;}
/* 누르는 칩(항목명 추천·재소싱 사유) — 26 둥근 테두리, 마우스 올리면 연한 회색 */
.cdp-dlg .cpi-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.cdp-dlg .cpi-suggest span{display:inline-flex;align-items:center;box-sizing:border-box;height:26px;padding:0 9px;border:1px solid #c4c4ca;border-radius:999px;background:#fff;font-size:12px;color:#3f3f46;cursor:pointer;}
.cdp-dlg .cpi-suggest span:hover{background:#f4f4f5;color:#18181b;}
/* 아래 버튼 줄 */
.cdp-dlg .form-actions,.cdp-dlg .cdp-dlg-ft{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:18px 0 0;padding-top:14px;border-top:1px solid #f0f0f2;}
.cdp-dlg .cdp-dlg-ft .cdp-dlg-grow{flex:1;}
/* 위험 버튼(삭제) */
.cdp-dlg .cdp-dlg-danger{color:#c81e1e;border-color:#f0b4b4;}
.cdp-dlg .cdp-dlg-danger:hover{background:#fdecec;color:#c81e1e;border-color:#f0b4b4;}
/* 그룹 단계 변경 · 수정 이력 — 목록 칸 모서리·선을 연하게 */
.cdp-dlg .cp-stg-list,.cdp-dlg .cp-hist-list{border-color:#e4e4e7;border-radius:8px;}
.cdp-dlg .cp-stg-hint{font-size:12px;color:#8e8e96;}
/* 패킹 파일에서 스펙 가져오기 (cpl-projects-info.js cpiOpenPackModal, 2026-10-26) — 왼쪽 도면 그림 · 오른쪽 읽은 줄 */
.cpi-pk{width:min(1040px,90vw);}
.cpi-pk-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:200px;border:1px dashed #c4c4ca;border-radius:8px;background:#fafafa;cursor:pointer;text-align:center;padding:20px;}
.cpi-pk-drop.on{border-color:#0e7490;background:#e6f4f7;}
.cpi-pk-drop b{font-size:14px;color:#18181b;}
.cpi-pk-drop span{font-size:12px;color:#8e8e96;}
.cpi-pk-drop .cpi-pk-err{color:#c81e1e;font-size:12.5px;}
/* 새 모델 모드 — 읽은 모델명·제조사 칸(표 위) */
.cpi-pk-nm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px;padding:10px 12px;margin:0 0 12px;border:1px solid #e4e4e7;border-radius:8px;background:#fafafa;}
.cpi-pk-nm .form-field{margin:0;}
.cpi-pk-nm #cpi-pk-nm-hint{grid-column:1/-1;font-size:12px;color:#52525b;}
.cpi-pk-nm .cpi-pk-err{color:#c81e1e;}
.cpi-pk-wait{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 0;font-size:13px;color:#52525b;}
.cpi-pk-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:16px;align-items:start;}
.cpi-pk-page{position:sticky;top:0;display:flex;flex-direction:column;gap:6px;}
.cpi-pk-page img{width:100%;border:1px solid #e4e4e7;border-radius:8px;cursor:zoom-in;background:#fff;}
.cpi-pk-list{display:flex;flex-direction:column;max-height:60vh;overflow:auto;border:1px solid #e4e4e7;border-radius:8px;}
.cpi-pk-row{display:grid;grid-template-columns:20px minmax(0,190px) minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border-bottom:1px solid #f0f0f2;}
.cpi-pk-row:last-child{border-bottom:0;}
.cpi-pk-row.is-off{opacity:.55;}
.cpi-pk-row > input[type=checkbox]{margin-top:9px;}
.cpi-pk-k,.cpi-pk-v{display:flex;flex-direction:column;gap:3px;min-width:0;}
.cpi-pk-k .form-input{font-weight:500;}
.cpi-pk-row .form-input{width:100%;box-sizing:border-box;font-size:12.5px;}
.cpi-pk-row textarea.form-input{min-height:0;line-height:1.5;}
.cpi-pk-src{font-size:11px;color:#8e8e96;}
.cpi-pk-old{font-size:11px;color:#a16207;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 그룹 SKU 패킹 파일 — 줄마다 '이 SKU만'(2026-10-27). 그룹 전체를 덮는 줄은 빨강으로 */
.cpi-pk-old.is-all{color:#b91c1c;}
.cpi-pk-sku{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;font-size:11.5px;color:#0e7490;cursor:pointer;}
.cpi-pk-sku input{margin:0;}
.cpi-pk-sku.is-fixed{color:#8e8e96;cursor:default;}
/* 진행 체크 칩 안 완료 날짜(2026-10-26 — 로그 추가 상태 카드에서 넣은 날짜) */
.cdp-chk-d{margin-left:4px;font-size:11px;font-weight:400;color:#15803d;font-variant-numeric:tabular-nums;}
.cdp-chk-d.is-na{color:#64748b;}
/* 진행서 왼쪽 요약 — 로그 추가 상태 카드와 같은 날짜·단계 칸(lapDatePropsRows, 2026-10-26). lap-* 부품이 쓰는 값만 여기서 정의 */
.lap-tok{--surface:#ffffff;--surface2:#f4f4f5;--border:#e4e4e7;--border2:#c4c4ca;--text:#18181b;--text2:#52525b;--text3:#8e8e96;--accent:#0e7490;--accent-light:#e6f4f7;--primary:#18181b;--primary-fg:#ffffff;--red:#dc2626;--red-light:#fde8e8;--green:#15803d;--green-light:#e3f6e9;--amber:#b45309;--amber-light:#fcf1dc;--radius:8px;--radius-sm:6px;--fs-xs:11px;--fs-sm:12px;--fs-md:13px;--chip-h:22px;--btn:32px;--btn-sm:28px;}
.cdp-prop-v{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0;padding:3px 0;}
/* 진행서 왼쪽 = 로그 추가 화면 오른쪽 상태 카드 그대로(lapCardBodyHTML — 2026-10-27). 카드 폭(420)에 맞춰 왼쪽 칸도 420 */
.cdp-lapcard{gap:0;}
.cdp-lap-hd{padding:12px 16px;}
.cdp-props .lap-input-sm{max-width:100%;}
.cdp-props .lap-stage-sel{max-width:170px;}