/* ══════════════════════════════════════════════════════════
   옥토퍼스 공용 부품 규격 (ui-kit) — 2026-10-23 사용자 승인
   목업·근거: https://claude.ai/artifact/9hS385wR7Pbrm8C1RRjiqY (Mobbin 실측, 배율 1.27 환산 ±1~2px)
   · 크기 2단계: 보통 32px·13px(입력 창 안 칸·버튼, 화면 머리 주 버튼) / 작게 28px·12px(목록 위 도구 줄·
     줄 안 버튼·누르는 칩·전환). 보여 주는 칩 22px. 표 한 줄 44 · 머리 줄 32. 모서리 버튼·입력 6 · 카드 8 · 창 12.
   · 주 버튼 = 검정(--primary), 한 화면·한 창에 하나. 청록(--accent)은 선택·포커스에만.
   · 선택 표시(2026-10-23 2안): 전환 = 회색 트랙(--seg-track) 위 흰 칸, 고른 칩 = 연청록(--sel-bg/--sel-line/--sel-text,
     '전체'를 고른 것도 같은 색 — 사용자 결정). 켜진 탭·칩을 검정으로 칠하지 않는다(검정이 많아 주 버튼이 묻힘).
   · 토큰은 base.css(--btn-md·--btn-sm·--chip-tap·--chip-h·--fs-*). 색(중립색)은 아직 앱 기본값 그대로 —
     앱 전체 B안 색 전환은 별도 단계라 여기서 --border·--text 등을 바꾸지 않는다.

   1) .oc-* = 새 화면·새 코드용 부품 클래스(어디서나 사용 가능)
   2) 섹션 덮어쓰기 = 기존 공용 클래스(.btn-save·.pl-btn-mini·.form-input …)를 그 섹션 안에서만 규격 모양으로.
      범위 = body[data-oc-section="…"] (main.js _navSectionChrome 이 설정 — 모달도 body 안이라 같이 잡힘).
      ⚠ 크기·겉모양만 바꾼다(높이·안쪽 여백·글자·모서리·색). width·margin·display:block 은 건드리지 않음
        (.btn-primary 는 width:100%, 일부 버튼·칸은 인라인 폭이 의도된 값). !important 금지 — 인라인 스타일로
        모양을 박아 둔 버튼·칸은 파일별로 클래스로 옮겨서 정리한다.
   적용 섹션: lounge(2026-10-23~) · design(2026-10-26~) · pllog(쿠팡 PL, 2026-10-26~ — :where() 로 낮춘 우선순위).
   다음 섹션은 아래에 같은 블록을 추가.
   3) 페이지 덮어쓰기 = 섹션 전체가 아니라 한 화면만(쿠팡 PL > PL 보드 — 2026-10-23).
   ══════════════════════════════════════════════════════════ */

/* ── 1) 부품 클래스 ── */
.oc-btn{font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;cursor:pointer;
  box-sizing:border-box;height:var(--btn-md);padding:0 12px;font-size:13px;font-weight:500;line-height:1;
  border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);text-decoration:none;}
.oc-btn:hover{background:var(--surface2);}
.oc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.oc-btn:disabled{opacity:.5;cursor:not-allowed;}
.oc-btn.oc-sm{height:var(--btn-sm);padding:0 10px;font-size:12px;}
.oc-btn.oc-pri{background:var(--primary);border-color:var(--primary);color:var(--primary-fg);}
.oc-btn.oc-pri:hover{background:#3f3f46;border-color:#3f3f46;}
.oc-btn.oc-ghost{background:transparent;border-color:transparent;color:var(--text2);}
.oc-btn.oc-ghost:hover{background:var(--surface2);}
.oc-btn.oc-danger{color:#c81e1e;border-color:#f0b4b4;background:var(--surface);}
.oc-btn.oc-danger:hover{background:#fdecec;}
.oc-btn.oc-icon{width:var(--btn-md);padding:0;}
.oc-btn.oc-sm.oc-icon{width:var(--btn-sm);}

.oc-in{font-family:inherit;box-sizing:border-box;height:var(--btn-md);padding:0 10px;font-size:13px;border:1px solid var(--border);
  border-radius:6px;background:var(--surface);color:var(--text);outline:none;}
.oc-in.oc-sm{height:var(--btn-sm);padding:0 8px;font-size:12px;}
textarea.oc-in{height:auto;min-height:76px;padding:8px 10px;line-height:1.5;}
.oc-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}

/* 전환(보기 바꾸기) — 회색 트랙 위 흰 칸이 선택(Klaviyo·Todoist). 검정 아님 */
.oc-seg{display:inline-flex;gap:2px;box-sizing:border-box;height:var(--btn-sm);padding:2px;border:1px solid var(--seg-line);border-radius:6px;background:var(--seg-track);}
.oc-seg > button{all:unset;cursor:pointer;display:inline-flex;align-items:center;padding:0 10px;font-size:12px;color:var(--text2);border-radius:4px;}
.oc-seg > button:hover:not(.on):not([aria-pressed="true"]){color:var(--text);}
.oc-seg > button[aria-pressed="true"],.oc-seg > button.on{background:var(--surface);color:var(--text);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.10);}
.oc-seg > button:focus-visible{outline:2px solid var(--accent);outline-offset:0;}

/* 누르는 칩(빠른 필터) 28 · 보여 주는 칩 22. 고른 칩 = 연청록('전체'를 고른 것도 같은 색) */
.oc-chip{font-family:inherit;display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:var(--chip-tap);padding:0 10px;
  border-radius:999px;border:1px solid var(--seg-line);background:var(--surface);color:var(--text2);font-size:12px;white-space:nowrap;cursor:pointer;}
.oc-chip:hover:not(.on):not([aria-pressed="true"]){background:var(--surface2);}
.oc-chip em{font-style:normal;color:var(--text3);}
.oc-chip.on,.oc-chip[aria-pressed="true"]{background:var(--sel-bg);border-color:var(--sel-line);color:var(--sel-text);font-weight:500;}
.oc-chip.on em,.oc-chip[aria-pressed="true"] em{color:var(--sel-text);opacity:.75;}
.oc-st{display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;height:var(--chip-h);padding:0 8px;border-radius:999px;
  font-size:12px;font-weight:500;white-space:nowrap;background:var(--surface2);color:var(--text2);}
.oc-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.oc-st.late{color:#c81e1e;background:#fde8e8;} .oc-st.warn{color:#a16207;background:#fcf1dc;}
.oc-st.ok{color:#15803d;background:#e3f6e9;} .oc-st.ing{color:#1d4ed8;background:#e8eefc;}
.oc-tag{display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;height:var(--chip-h);padding:0 8px;border-radius:4px;
  font-size:12px;color:var(--text2);background:var(--surface2);white-space:nowrap;}

/* ── 2) 섹션 덮어쓰기 — 라운지 ── */
/* 작은 버튼(쿠팡 PL 품목 관리에서 빌려 쓰던 .pl-btn-mini) → 작게 28 */
body[data-oc-section="lounge"] .pl-btn-mini{display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;
  height:var(--btn-sm);padding:0 10px;font-size:12px;font-weight:500;line-height:1;border-radius:6px;}
body[data-oc-section="lounge"] .pl-btn-mini:hover{background:var(--surface2);}
body[data-oc-section="lounge"] .pl-btn-mini.danger:hover{background:var(--red-light);}
/* 저장·취소 → 보통 32, 저장 = 검정 주 버튼 */
body[data-oc-section="lounge"] .btn-save,
body[data-oc-section="lounge"] .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
  height:var(--btn-md);padding-top:0;padding-bottom:0;font-size:13px;font-weight:500;line-height:1;border-radius:6px;
  background:var(--primary);color:var(--primary-fg);border:1px solid var(--primary);}
body[data-oc-section="lounge"] .btn-save:hover,
body[data-oc-section="lounge"] .btn-primary:hover{background:#3f3f46;border-color:#3f3f46;}
body[data-oc-section="lounge"] .btn-cancel{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:var(--btn-md);padding-top:0;padding-bottom:0;font-size:13px;font-weight:500;line-height:1;border-radius:6px;background:var(--surface);}
body[data-oc-section="lounge"] .btn-cancel:hover{background:var(--surface2);}
body[data-oc-section="lounge"] .btn-confirm-del{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--btn-sm);
  padding:0 10px;font-size:12px;font-weight:500;border-radius:6px;}
/* 목표 보드가 빌려 쓰던 장부 버튼 .ldg-btn → 보통 32 / .sm 28, .pri = 검정 */
body[data-oc-section="lounge"] .ldg-btn{box-sizing:border-box;height:var(--btn-md);padding:0 12px;font-size:13px;font-weight:500;border-radius:6px;}
body[data-oc-section="lounge"] .ldg-btn.sm{height:var(--btn-sm);padding:0 10px;font-size:12px;}
body[data-oc-section="lounge"] .ldg-btn.pri{background:var(--primary);border-color:var(--primary);color:var(--primary-fg);}
/* 상품발표·시안 투표 머리 버튼(.lpt-hbtn·.lvt-hbtn 34/29 → 32/28) */
body[data-oc-section="lounge"] .lpt-hbtn,
body[data-oc-section="lounge"] .lvt-hbtn{height:var(--btn-md);padding:0 12px;font-size:13px;font-weight:500;border-radius:6px;}
body[data-oc-section="lounge"] .lpt-hbtn.sm,
body[data-oc-section="lounge"] .lvt-hbtn.sm{height:var(--btn-sm);padding:0 10px;font-size:12px;border-radius:6px;}
body[data-oc-section="lounge"] .lpt-hbtn.pri,
body[data-oc-section="lounge"] .lvt-hbtn.pri{background:var(--primary);border-color:var(--primary);color:var(--primary-fg);font-weight:500;}
/* 입력칸 — 보통 32(라운지 입력칸은 대부분 입력 창 안). 체크박스·라디오·파일은 제외, 여러 줄 칸은 높이 안 건드림 */
body[data-oc-section="lounge"] input.form-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body[data-oc-section="lounge"] select.form-select,
body[data-oc-section="lounge"] select.form-input{box-sizing:border-box;height:var(--btn-md);padding-top:0;padding-bottom:0;padding-left:10px;padding-right:10px;font-size:13px;border-radius:6px;}
body[data-oc-section="lounge"] textarea.form-input,
body[data-oc-section="lounge"] .form-textarea{padding:8px 10px;font-size:13px;border-radius:6px;line-height:1.5;}
body[data-oc-section="lounge"] .form-input:focus,
body[data-oc-section="lounge"] .form-select:focus,
body[data-oc-section="lounge"] .form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
body[data-oc-section="lounge"] .form-label{font-size:12px;}
/* 장부 칩(.ldg-chip, 목표 보드 필터) → 누르는 칩 28 */
body[data-oc-section="lounge"] .ldg-chip{box-sizing:border-box;height:var(--chip-tap);padding:0 10px;font-size:12px;border-radius:999px;}
body[data-oc-section="lounge"] .ldg-chip.on{background:var(--sel-bg);border-color:var(--sel-line);color:var(--sel-text);font-weight:500;}

/* ── 2) 섹션 덮어쓰기 — 디자인(2026-10-26) ──
   디자인 메뉴가 쓰는 공용 클래스만: .pl-btn-mini · .btn-save/.btn-primary · .btn-cancel · 입력칸.
   ⚠ design-impact.js 는 영업 > 변경 효과(sales-impact, 섹션 sales)와 같은 화면이라 이 블록이 안 닿는다 —
     그 파일은 .oc-* 부품 클래스를 직접 써서 두 입구 모양을 맞춘다. */
body[data-oc-section="design"] .pl-btn-mini{display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;
  height:var(--btn-sm);padding:0 10px;font-size:12px;font-weight:500;line-height:1;border-radius:6px;}
body[data-oc-section="design"] .pl-btn-mini:hover{background:var(--surface2);}
body[data-oc-section="design"] .pl-btn-mini.danger:hover{background:var(--red-light);}
body[data-oc-section="design"] .pl-btn-mini:disabled{opacity:.5;cursor:not-allowed;}
body[data-oc-section="design"] .btn-save,
body[data-oc-section="design"] .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
  height:var(--btn-md);padding-top:0;padding-bottom:0;font-size:13px;font-weight:500;line-height:1;border-radius:6px;
  background:var(--primary);color:var(--primary-fg);border:1px solid var(--primary);}
body[data-oc-section="design"] .btn-save:hover,
body[data-oc-section="design"] .btn-primary:hover{background:#3f3f46;border-color:#3f3f46;}
body[data-oc-section="design"] .btn-cancel{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:var(--btn-md);padding-top:0;padding-bottom:0;font-size:13px;font-weight:500;line-height:1;border-radius:6px;background:var(--surface);}
body[data-oc-section="design"] .btn-cancel:hover{background:var(--surface2);}
/* 입력칸 — 보통 32(창 안). 목록 위 도구 줄 검색·필터는 파일에서 .oc-in.oc-sm(28)로 */
body[data-oc-section="design"] input.form-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body[data-oc-section="design"] select.form-select,
body[data-oc-section="design"] select.form-input{box-sizing:border-box;height:var(--btn-md);padding-top:0;padding-bottom:0;padding-left:10px;padding-right:10px;font-size:13px;border-radius:6px;}
body[data-oc-section="design"] textarea.form-input,
body[data-oc-section="design"] .form-textarea{padding:8px 10px;font-size:13px;border-radius:6px;line-height:1.5;}
body[data-oc-section="design"] .form-input:focus,
body[data-oc-section="design"] .form-select:focus,
body[data-oc-section="design"] .form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
body[data-oc-section="design"] .form-label{font-size:12px;}

/* ── 2) 섹션 덮어쓰기 — 쿠팡 PL(2026-10-26) ──
   ⚠ 라운지·디자인과 달리 :where() 로 감싸 우선순위를 낮췄다(클래스 1개 수준). 이유:
     · 새 화면 미리보기(.lap 로그 추가 · .cdp 진행서)는 이미 B안 규격으로 따로 그린 화면이라
       `.cdp .cp-log-filter-pill` 같은 자기 규칙이 이겨야 한다.
     · `.cp-icon-btn.danger`·`.cp-log-filter-pill.star`·`.pl-btn-mini.danger:hover` 처럼 뜻이 있는 변형 색이 살아남는다.
     ui-kit.css 는 기능 CSS 보다 뒤에 로드되므로 같은 우선순위면 이 블록이 이긴다.
   ⚠ tariff.js(관세·HS)는 발주관리 so-tariff 와 같은 화면 — .tf-* 규칙은 쿠팡 PL 쪽에만 적용된다. */
/* 공용 버튼 — 작게 28 / 보통 32, 저장 = 검정 주 버튼 */
:where(body[data-oc-section="pllog"]) .pl-btn-mini,
:where(body[data-oc-section="pllog"]) .btn-edit,
:where(body[data-oc-section="pllog"]) .tf-btn,
:where(body[data-oc-section="pllog"]) .cp-cert-btn,
:where(body[data-oc-section="pllog"]) .cp-cert-add,
:where(body[data-oc-section="pllog"]) .plcal-add-btn,
:where(body[data-oc-section="pllog"]) .cp-due-done-btn,
:where(body[data-oc-section="pllog"]) .cp-imp-pin-btn,
:where(body[data-oc-section="pllog"]) .cp-ai-move-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;
  height:var(--btn-sm);padding:0 10px;font-size:12px;font-weight:500;line-height:1;border-radius:6px;transform:none;}
:where(body[data-oc-section="pllog"]) .btn-edit,
:where(body[data-oc-section="pllog"]) .tf-btn,
:where(body[data-oc-section="pllog"]) .cp-cert-btn,
:where(body[data-oc-section="pllog"]) .cp-cert-add,
:where(body[data-oc-section="pllog"]) .plcal-add-btn,
:where(body[data-oc-section="pllog"]) .cp-due-done-btn,
:where(body[data-oc-section="pllog"]) .cp-imp-pin-btn,
:where(body[data-oc-section="pllog"]) .cp-ai-move-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);}
:where(body[data-oc-section="pllog"]) .pl-btn-mini:hover,
:where(body[data-oc-section="pllog"]) .btn-edit:hover,
:where(body[data-oc-section="pllog"]) .tf-btn:hover,
:where(body[data-oc-section="pllog"]) .cp-cert-btn:hover,
:where(body[data-oc-section="pllog"]) .cp-cert-add:hover,
:where(body[data-oc-section="pllog"]) .plcal-add-btn:hover,
:where(body[data-oc-section="pllog"]) .cp-due-done-btn:hover,
:where(body[data-oc-section="pllog"]) .cp-ai-move-btn:hover{background:var(--surface2);color:var(--text);border-color:var(--border);transform:none;}
/* 중요 고정 핀 = 켜고 끄는 선택 → 켜짐 연청록 */
:where(body[data-oc-section="pllog"]) .cp-imp-pin-btn:hover{background:var(--surface2);color:var(--text);border-color:var(--border);transform:none;}
:where(body[data-oc-section="pllog"]) .cp-imp-pin-btn.on{background:var(--sel-bg);border-color:var(--sel-line);color:var(--sel-text);}
:where(body[data-oc-section="pllog"]) .btn-save,
:where(body[data-oc-section="pllog"]) .btn-primary,
:where(body[data-oc-section="pllog"]) .tf-btn-primary,
:where(body[data-oc-section="pllog"]) .cp-log-add-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
  height:var(--btn-md);padding:0 14px;font-size:13px;font-weight:500;line-height:1;border-radius:6px;
  background:var(--primary);color:var(--primary-fg);border:1px solid var(--primary);filter:none;}
:where(body[data-oc-section="pllog"]) .btn-save:hover,
:where(body[data-oc-section="pllog"]) .btn-primary:hover,
:where(body[data-oc-section="pllog"]) .tf-btn-primary:hover,
:where(body[data-oc-section="pllog"]) .cp-log-add-btn:hover{background:#3f3f46;border-color:#3f3f46;filter:none;}
:where(body[data-oc-section="pllog"]) .btn-cancel,
:where(body[data-oc-section="pllog"]) .btn-export,
:where(body[data-oc-section="pllog"]) .plst-btn,
:where(body[data-oc-section="pllog"]) .plcal-btn,
:where(body[data-oc-section="pllog"]) .cp-detail-back{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
  height:var(--btn-md);padding:0 12px;font-size:13px;font-weight:500;line-height:1;border-radius:6px;
  background:var(--surface);color:var(--text);border:1px solid var(--border);}
:where(body[data-oc-section="pllog"]) .btn-cancel:hover,
:where(body[data-oc-section="pllog"]) .btn-export:hover,
:where(body[data-oc-section="pllog"]) .plst-btn:hover,
:where(body[data-oc-section="pllog"]) .plcal-btn:hover,
:where(body[data-oc-section="pllog"]) .cp-detail-back:hover{background:var(--surface2);color:var(--text);border-color:var(--border);}
:where(body[data-oc-section="pllog"]) .btn-confirm-del{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--btn-sm);padding:0 10px;
  font-size:12px;font-weight:500;border-radius:6px;background:var(--surface);color:#c81e1e;border:1px solid #f0b4b4;}
:where(body[data-oc-section="pllog"]) .btn-confirm-del:hover{background:#fdecec;}
/* 아이콘 버튼 28 정사각 (✏·↑·✕·분할 창 버튼) */
:where(body[data-oc-section="pllog"]) .psch-mini-btn,
:where(body[data-oc-section="pllog"]) .cp-multi-pane-btn,
:where(body[data-oc-section="pllog"]) .cp-checklist-edit-btn{box-sizing:border-box;width:var(--btn-sm);height:var(--btn-sm);padding:0;border-radius:6px;font-size:13px;}
:where(body[data-oc-section="pllog"]) .cp-icon-btn{box-sizing:border-box;height:var(--btn-sm);padding:0 8px;border-radius:6px;font-size:12px;}
/* 누르는 칩(빠른 필터) 28 — 고른 칩 = 연청록 */
:where(body[data-oc-section="pllog"]) .pl-pill,
:where(body[data-oc-section="pllog"]) .tf-tab,
:where(body[data-oc-section="pllog"]) .cp-log-filter-pill,
:where(body[data-oc-section="pllog"]) .cp-voc-filter-pill,
:where(body[data-oc-section="pllog"]) .cpi-guide-chip{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:var(--chip-tap);padding:0 10px;
  border-radius:999px;border:1px solid var(--seg-line);background:var(--surface);color:var(--text2);font-size:12px;font-weight:400;white-space:nowrap;}
:where(body[data-oc-section="pllog"]) .pl-pill:hover:not(.active),
:where(body[data-oc-section="pllog"]) .tf-tab:hover:not(.active),
:where(body[data-oc-section="pllog"]) .cp-log-filter-pill:hover:not(.active),
:where(body[data-oc-section="pllog"]) .cp-voc-filter-pill:hover:not(.active),
:where(body[data-oc-section="pllog"]) .cpi-guide-chip:hover:not(.on){background:var(--surface2);}
:where(body[data-oc-section="pllog"]) .pl-pill.active,
:where(body[data-oc-section="pllog"]) .tf-tab.active,
:where(body[data-oc-section="pllog"]) .cp-log-filter-pill.active,
:where(body[data-oc-section="pllog"]) .cp-voc-filter-pill.active,
:where(body[data-oc-section="pllog"]) .cpi-guide-chip.on{background:var(--sel-bg);border-color:var(--sel-line);color:var(--sel-text);font-weight:500;}
/* 전환(보기 바꾸기) — 회색 트랙 위 흰 칸 (품목 현황·캘린더·제조사 발주·쿠팡 발주서·제품정보 입력 방식) */
:where(body[data-oc-section="pllog"]) .plst-seg,
:where(body[data-oc-section="pllog"]) .plcal-seg,
:where(body[data-oc-section="pllog"]) .plh-seg,
:where(body[data-oc-section="pllog"]) .plcp-seg,
:where(body[data-oc-section="pllog"]) .cpi-mode-toggle{display:inline-flex;align-items:stretch;gap:2px;box-sizing:border-box;height:var(--btn-sm);padding:2px;
  border:1px solid var(--seg-line);border-radius:6px;background:var(--seg-track);overflow:visible;}
:where(body[data-oc-section="pllog"]) .plst-seg-btn,
:where(body[data-oc-section="pllog"]) .plcal-seg button,
:where(body[data-oc-section="pllog"]) .plh-seg span,
:where(body[data-oc-section="pllog"]) .plcp-seg span,
:where(body[data-oc-section="pllog"]) .cpi-mode-toggle span{display:inline-flex;align-items:center;padding:0 10px;border:0;border-radius:4px;
  background:transparent;font-size:12px;font-weight:400;color:var(--text2);}
:where(body[data-oc-section="pllog"]) .plst-seg-btn.on,
:where(body[data-oc-section="pllog"]) .plcal-seg button.on,
:where(body[data-oc-section="pllog"]) .plh-seg span.on,
:where(body[data-oc-section="pllog"]) .plcp-seg span.on,
:where(body[data-oc-section="pllog"]) .cpi-mode-toggle span.on{background:var(--surface);color:var(--text);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.10);}
/* 입력칸 — 보통 32. 체크박스·라디오·파일 제외, 여러 줄 칸은 높이 안 건드림 */
:where(body[data-oc-section="pllog"]) input.form-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:where(body[data-oc-section="pllog"]) select.form-select,
:where(body[data-oc-section="pllog"]) select.form-input{box-sizing:border-box;height:var(--btn-md);padding-top:0;padding-bottom:0;padding-left:10px;padding-right:10px;font-size:13px;border-radius:6px;}
:where(body[data-oc-section="pllog"]) textarea.form-input,
:where(body[data-oc-section="pllog"]) .form-textarea{padding:8px 10px;font-size:13px;border-radius:6px;line-height:1.5;}
:where(body[data-oc-section="pllog"]) .form-input:focus,
:where(body[data-oc-section="pllog"]) .form-select:focus,
:where(body[data-oc-section="pllog"]) .form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
:where(body[data-oc-section="pllog"]) .form-label{font-size:12px;}

/* ── 2-1) 쿠팡 PL 나머지 화면 — 같은 모양으로(2026-10-26) ──
   품목 현황 · 품목 관리 · 상품 제안서 · 관세·HS · 결제 내역 · 휴지통 · 판매량 · 쿠팡 발주서 · 제조사 발주 · 용어 사전.
   기준 = 지금까지 바꾼 화면(로그 추가 새 화면 · 진행서 새 화면 · VOC · 샘플 리스트):
   제목 20/700(이모지 없음) · 표 머리 32 회색 바탕 12px · 줄 패딩 = 44 안팎 · 줄 구분선 옅게 · 카드 모서리 8 ·
   고른 칩 = 연청록 · 일/주/월 같은 전환 = 회색 트랙 위 흰 칸 · 상태 칩 = 22 둥근 칩(뜻 있는 색만).
   판매량·쿠팡 발주서는 JS 가 <head> 끝에 스타일을 넣어서(같은 우선순위면 그쪽이 이김) 페이지 id 로 범위를 잡는다. */
/* 제목 */
:where(body[data-oc-section="pllog"]) .pl-page-title,
:where(body[data-oc-section="pllog"]) .plst-title,
:where(body[data-oc-section="pllog"]) .tf-page-title,
:where(body[data-oc-section="pllog"]) .plh-title,
#page-pl-cp-orders .plcp-title{font-size:20px;font-weight:700;color:var(--text);}
:where(body[data-oc-section="pllog"]) .pl-page-sub,
:where(body[data-oc-section="pllog"]) .plst-sub,
:where(body[data-oc-section="pllog"]) .tf-page-sub,
#page-pl-cp-orders .plcp-sub{font-size:12px;color:var(--text3);}
/* 표 — 머리 32 · 회색 바탕 · 12px 회색 글자 / 칸 안쪽 여백 = 줄 44 안팎 / 줄 구분선 옅게 */
:where(body[data-oc-section="pllog"]) .pl-product-table th,
:where(body[data-oc-section="pllog"]) .tf-table th,
:where(body[data-oc-section="pllog"]) .plp-table th,
:where(body[data-oc-section="pllog"]) .plh-rows th,
#page-pl-sales .pls-table th,
#page-pl-cp-orders .plcp-table th,
#page-pl-cp-orders .plcp-sku-table th{height:32px;padding-top:0;padding-bottom:0;font-size:12px;font-weight:500;color:#71717a;background:#fafafa;border-bottom:1px solid var(--border);}
:where(body[data-oc-section="pllog"]) .pl-product-table td,
:where(body[data-oc-section="pllog"]) .tf-table td,
:where(body[data-oc-section="pllog"]) .plp-table td,
:where(body[data-oc-section="pllog"]) .plh-rows td{padding-top:11px;padding-bottom:11px;font-size:13px;border-bottom-color:#f0f0f2;}
#page-pl-sales .pls-table td,
#page-pl-cp-orders .plcp-table td{padding-top:10px;padding-bottom:10px;border-bottom-color:#f0f0f2;}
:where(body[data-oc-section="pllog"]) .pl-product-table tbody tr:hover td,
:where(body[data-oc-section="pllog"]) .tf-table tbody tr:hover td,
:where(body[data-oc-section="pllog"]) .plp-table tbody tr:hover td,
#page-pl-sales .pls-table tbody tr:hover td,
#page-pl-cp-orders .plcp-table tbody tr:hover td{background:#fafafa;}
/* 품목 관리 — 머리 줄은 고정(sticky) 칸이라 위에 겹치는 줄 숨김 + hover 가 머리까지 칠하던 것 막기 */
:where(body[data-oc-section="pllog"]) .pl-product-table thead th{z-index:1;}
:where(body[data-oc-section="pllog"]) .pl-product-table thead tr:hover{background:transparent;}
/* 표를 담는 카드 — 모서리 8, 테두리 연하게 */
:where(body[data-oc-section="pllog"]) .tf-table-wrap,
:where(body[data-oc-section="pllog"]) .plh-po,
:where(body[data-oc-section="pllog"]) .plst-wrap,
:where(body[data-oc-section="pllog"]) #page-pl-products .pl-form-card{border-radius:8px;border-color:var(--border);}

/* 일/주/월 · 보기 전환 → 회색 트랙 위 흰 칸(청록 채움 대신) */
#page-pl-sales .pls-gran-group,
#page-pl-cp-orders .plcp-seg{display:inline-flex;gap:2px;box-sizing:border-box;height:var(--btn-sm);padding:2px;border:1px solid var(--seg-line);border-radius:6px;background:var(--seg-track);overflow:hidden;}
#page-pl-sales .pls-gran,
#page-pl-cp-orders .plcp-seg span{display:inline-flex;align-items:center;height:100%;padding:0 10px;border:0;border-radius:4px;background:transparent;color:var(--text2);font-size:12px;font-weight:400;box-shadow:none;}
#page-pl-sales .pls-gran.on,
#page-pl-cp-orders .plcp-seg span.on{background:var(--surface);color:var(--text);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.10);}
/* 쿠팡 발주서 일/주/월 버튼 묶음은 버튼이 따로 떨어져 있어 칩으로 — 고른 것 연청록 */
#page-pl-cp-orders .plcp-gran{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;}
#page-pl-cp-orders .plcp-gran.on{background:var(--sel-bg);border-color:var(--sel-line);color:var(--sel-text);font-weight:500;}
/* 요약 숫자 칩(쿠팡 발주서·제조사 발주) — 고른 것 연청록 */
#page-pl-cp-orders .plcp-kpi-btn{border-color:var(--seg-line);}
#page-pl-cp-orders .plcp-kpi-btn.on{background:var(--sel-bg);border-color:var(--sel-line);color:var(--sel-text);}

/* 상태 칩 → 22 둥근 칩. 색은 뜻이 있어 유지하되 '지연'의 빨강 채움은 연한 빨강으로(공용 .oc-st 와 같은 톤) */
:where(body[data-oc-section="pllog"]) .plst-v{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;}
:where(body[data-oc-section="pllog"]) .plst-v.is-late{background:#fde8e8;color:#c81e1e;}
:where(body[data-oc-section="pllog"]) .plst-v.is-warn{background:#fcf1dc;color:#a16207;}
:where(body[data-oc-section="pllog"]) .plst-v.is-ok{background:#e3f6e9;color:#15803d;}
#page-pl-cp-orders .plcp-pill{display:inline-flex;align-items:center;box-sizing:border-box;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:500;}
:where(body[data-oc-section="pllog"]) .tf-src,
:where(body[data-oc-section="pllog"]) .pl-group-chip{border-radius:4px;}

/* 품목 현황 — 검색칸 48px 굵은 청록 테두리 → 32 보통 칸, 숫자 카드 고르면 연청록 */
:where(body[data-oc-section="pllog"]) .plst-search{box-sizing:border-box;height:var(--btn-md);border-width:1px;border-color:var(--border);border-radius:6px;}
:where(body[data-oc-section="pllog"]) .plst-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
:where(body[data-oc-section="pllog"]) .plst-search input{font-size:13px;}
:where(body[data-oc-section="pllog"]) .plst-kpi{border-radius:8px;border-color:var(--border);}
:where(body[data-oc-section="pllog"]) .plst-kpi.on,
:where(body[data-oc-section="pllog"]) .plst-kpi.is-late.on,
:where(body[data-oc-section="pllog"]) .plst-kpi.is-warn.on,
:where(body[data-oc-section="pllog"]) .plst-kpi.is-ok.on{background:var(--sel-bg);border-color:var(--sel-line);color:var(--sel-text);}

/* 관세·HS 검색 34 → 28 / 휴지통 카드 모서리 8 */
:where(body[data-oc-section="pllog"]) .tf-input.tf-search{box-sizing:border-box;height:var(--btn-sm);font-size:12px;border-radius:6px;}
#page-pl-trash .cp-trash-card{border-radius:8px;border-color:var(--border);}

/* 위험 버튼은 마우스를 올려도 빨강 유지(공용 :hover 가 중립색으로 되돌리던 것) */
:where(body[data-oc-section="pllog"]) .pl-btn-mini.danger,
#page-pl-trash .btn-edit.cp-trash-purge,
#page-pl-trash .btn-edit.cp-trash-empty{color:#c81e1e;border-color:#f0b4b4;}
:where(body[data-oc-section="pllog"]) .pl-btn-mini.danger:hover,
#page-pl-trash .btn-edit.cp-trash-purge:hover,
#page-pl-trash .btn-edit.cp-trash-empty:hover{color:#c81e1e;border-color:#f0b4b4;background:#fdecec;}

/* 용어 사전 — 쿠팡 PL·CS 두 곳에서 여는 같은 화면이라 섹션이 아니라 페이지로. 검색 32, 카드 8, 삭제 = 빨간 테두리 28 */
#page-glossary .search-input{box-sizing:border-box;height:var(--btn-md);border-radius:6px;font-size:13px;box-shadow:none;}
#page-glossary .gloss-card{border-radius:8px;}
#page-glossary .btn-del{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--btn-sm);padding:0 10px;border:1px solid #f0b4b4;border-radius:6px;background:var(--surface);color:#c81e1e;font-size:12px;}
#page-glossary .btn-del:hover{background:#fdecec;}

/* ── 3) 페이지 덮어쓰기 — 쿠팡 PL > PL 보드(2026-10-23) ──
   섹션 전체가 아니라 보드 화면만: 상단 툴바(.cp-topbar)와 보드 본문(#cp-board-body = 현황·리스트).
   같은 #cpl-projects-root 에 그려지는 진행서 상세는 범위 밖(.cp-stage-pill 등 클래스를 같이 씀). */
/* 현황|리스트 · SKU|그룹 → 전환(oc-seg) 28 — 회색 트랙 위 흰 칸 */
#cpl-projects-root .cp-topbar .cp-view-toggle{box-sizing:border-box;height:var(--btn-sm);padding:2px;gap:2px;border:1px solid var(--seg-line);border-radius:6px;background:var(--seg-track);}
#cpl-projects-root .cp-topbar .cp-view-toggle-btn{height:100%;padding:0 10px;font-size:12px;border-radius:4px;white-space:nowrap;color:var(--text2);background:transparent;}
#cpl-projects-root .cp-topbar .cp-view-toggle-btn:hover:not(.active){color:var(--text);}
#cpl-projects-root .cp-topbar .cp-view-toggle-btn.active{background:var(--surface);color:var(--text);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.10);}
/* [선택] 은 버튼 1개짜리 켜고 끄기 — 트랙 없이 테두리 버튼, 켜짐 = 연청록(선택 모드) */
#cpl-projects-root .cp-topbar .cp-view-toggle:has(> .cp-select-toggle){padding:0;border:0;background:transparent;}
#cpl-projects-root .cp-topbar .cp-select-toggle{border:1px solid var(--seg-line);border-radius:6px;background:var(--surface);}
#cpl-projects-root .cp-topbar .cp-select-toggle:hover:not(.active){background:var(--surface2);}
#cpl-projects-root .cp-topbar .cp-select-toggle.active{background:var(--sel-bg);border-color:var(--sel-line);color:var(--sel-text);box-shadow:none;}
/* 검색 → 작게 28 / 새 제품 → 보통 32 검정(화면의 주 버튼) */
#cpl-projects-root .cp-topbar .cp-search-input{box-sizing:border-box;height:var(--btn-sm);padding:0 8px;font-size:12px;border-radius:6px;}
#cpl-projects-root .cp-topbar .cp-search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
#cpl-projects-root .cp-topbar .cp-add-btn{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--btn-md);padding:0 12px;font-size:13px;font-weight:500;border-radius:6px;background:var(--primary);color:var(--primary-fg);}
#cpl-projects-root .cp-topbar .cp-add-btn:hover{filter:none;background:#3f3f46;}
/* 현황 확인 리스트 2개 — 새 항목 칸 28 + 추가 = 아이콘 버튼 28(테두리, 주 버튼 아님) */
#cp-board-body .cp-checklist-input{box-sizing:border-box;height:var(--btn-sm);padding:0 8px;font-size:12px;border-radius:6px;}
#cp-board-body .cp-checklist-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
#cp-board-body .cp-checklist-add-btn{box-sizing:border-box;width:var(--btn-sm);height:var(--btn-sm);font-size:15px;font-weight:500;line-height:1;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);}
#cp-board-body .cp-checklist-add-btn:hover{background:var(--surface2);}
/* 리스트 필터 줄(단계·분류·제조사·인증) → 누르는 칩 28, 고른 칩 = 연청록('전체'도 고른 것이면 같은 색) */
#cp-board-body .cp-stage-pill{display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:var(--chip-tap);padding:0 10px;font-size:12px;border-color:var(--seg-line);background:var(--surface);}
#cp-board-body .cp-stage-pill.active{background:var(--sel-bg);border-color:var(--sel-line);color:var(--sel-text);font-weight:500;}
/* 여러 품목 선택 작업 바 → 작게 28, 변경 = 검정 */
#cp-board-body .cp-bulk-btn{box-sizing:border-box;height:var(--btn-sm);padding:0 10px;font-size:12px;font-weight:500;border-radius:6px;}
#cp-board-body .cp-bulk-btn.primary,#cp-board-body .cp-bulk-btn.primary:hover{background:var(--primary);border-color:var(--primary);color:var(--primary-fg);filter:none;}
#cp-board-body .cp-bulk-select{box-sizing:border-box;height:var(--btn-sm);padding:0 8px;font-size:12px;border-radius:6px;}
#cp-board-body .cp-bulk-count{color:var(--text);}