/* 상품기간설정 모달 — 기간 복사 · 기간 삭제 (2026-09-01). A-4 브랜드 액센트형(차콜블루 #3e6187).
   ⭐두 모달이 **같은 시각 언어**를 쓴다 — 「복사되는 것」과 「삭제되는 것」이 같은 목록이라
     사용자가 두 화면을 같은 것으로 읽는다(삭제는 danger 변형만 덧입힌다).
   개발 규칙 1: 뷰 인라인 <style> 금지 → 이 파일. 토큰은 CLAUDE 규칙 12(A-4 스펙)를 따른다. */

.pcp {
  padding: 16px;
  background: #f6f9fc;
}

/* 헤더 밴드 — 무엇을 복사하는지(원본)를 맨 위에 고정 */
.pcp-band {
  padding: 11px 14px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #f3f7fb, #fff);
  border: 1px solid #dbe6f0;
  border-left: 4px solid #3e6187;
  border-radius: 10px;
}
.pcp-band-title { font-size: 13.5px; font-weight: 700; color: #1f3350; }
.pcp-band-meta { margin-top: 3px; font-size: 11.5px; color: #5b7089; }

/* 섹션 밴드 카드 */
.pcp-sec {
  padding: 13px 14px 14px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid #dbe6f0;
  border-radius: 11px;
}
.pcp-h {
  margin: 0 0 11px;
  padding-bottom: 5px;
  border-bottom: 3px solid #3e6187;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #3e6187;
}
.pcp-count {
  padding: 1px 8px;
  background: #eef4fa;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #3e6187;
}

/* 세그먼트 (대상 모드) */
.pcp-seg { display: flex; gap: 6px; margin-bottom: 13px; flex-wrap: wrap; }
.pcp-seg-btn {
  padding: 7px 15px;
  background: #fff;
  border: 1px solid #cbd9e6;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #5b7089;
  cursor: pointer;
}
.pcp-seg-btn.is-on { background: #3e6187; border-color: #3e6187; color: #fff; }
.pcp-seg-btn:disabled { opacity: .45; cursor: not-allowed; }

/* 입력 */
.pcp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 11px;
}
.pcp-field { display: flex; flex-direction: column; min-width: 0; }
.pcp-label { font-size: 11.5px; font-weight: 700; color: #1f3350; margin-bottom: 5px; }
.pcp-label i { color: #dc2626; font-style: normal; }
.pcp-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd9e6;
  border-radius: 7px;
  font-size: 13px;
  /* ⚠규칙 10 — 배경·글자색을 함께 지정(브라우저 강제 다크가 한쪽만 뒤집는다) */
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
}
.pcp-input:focus {
  outline: none;
  border-color: #3e6187;
  box-shadow: 0 0 0 3px #3e618722;
}
.pcp-hint { margin-top: 4px; font-size: 10.5px; color: #94a3b8; }

/* 체크·라디오 줄 */
.pcp-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 11px;
  padding: 9px 11px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-size: 12px;
  color: #1f3350;
  cursor: pointer;
}
/* ⚠**직속 체크·라디오만** — 자손 선택자(`.pcp-check input`)로 두면 줄 안에 넣은 다른 입력칸까지
   15px 로 눌러 «값은 있는데 칸이 안 보이는» 상태가 된다(2026-09-01 원본 마감 종료일에서 실제 발생). */
.pcp-check > input[type="checkbox"],
.pcp-check > input[type="radio"] { width: 15px; height: 15px; margin-top: 1px; flex-shrink: 0; }
.pcp-check strong { font-weight: 700; }
.pcp-check em { font-style: normal; color: #3e6187; font-weight: 600; }
.pcp-check-amber { background: #fffbeb; border-color: #fde68a; }

/* 원본 마감 — 체크 + 종료일(고를 수 있다) */
.pcp-close { cursor: default; }
.pcp-close-body { min-width: 0; flex: 1; }
.pcp-close-head { display: inline-block; cursor: pointer; }
.pcp-close-row { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.pcp-close-label { font-size: 11.5px; font-weight: 700; color: #92400e; }
/* 폭·높이를 명시한다 — date 입력은 내용 폭이 브라우저마다 달라 auto 로 두면 좁게 잘린다 */
.pcp-close-date { width: 170px; max-width: 100%; height: 34px; padding: 6px 9px; font-size: 12.5px; }
.pcp-close-date:disabled { background: #f1f5f9; color: #94a3b8; }
.pcp-sub { display: block; margin-top: 3px; font-size: 11px; color: #64748b; line-height: 1.55; }
.pcp-radios { margin-top: 2px; }

/* 복사 항목 목록 */
.pcp-items { list-style: none; margin: 0; padding: 0; }
.pcp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #e6eef6;
  border-radius: 9px;
  margin-bottom: 6px;
  background: #fff;
}
.pcp-item.is-empty { opacity: .55; }
.pcp-item-pick { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; cursor: pointer; }
.pcp-item-pick > input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; }
.pcp-item-name { font-size: 12.5px; font-weight: 600; color: #1f3350; }
/* 삭제 모달은 체크박스가 없어 이름이 직접 자식이다 — 건수를 우측으로 밀어낸다 */
.pcp-item > .pcp-item-name { flex: 1; min-width: 0; }
.pcp-item-amount { font-size: 11.5px; font-weight: 700; color: #5b7089; white-space: nowrap; }
.pcp-item-state { font-size: 11.5px; font-weight: 700; white-space: nowrap; min-width: 62px; text-align: right; }
.pcp-item-state.is-running { color: #b45309; }
.pcp-item-state.is-done { color: #15803d; }
.pcp-item-state.is-fail { color: #dc2626; }

.pcp-note {
  margin: 10px 0 0;
  padding: 8px 11px;
  background: #f3f7fb;
  border: 1px solid #dbe6f0;
  border-radius: 8px;
  font-size: 11px;
  color: #4a6480;
  line-height: 1.6;
}

/* 진행 */
.pcp-bar {
  height: 7px;
  background: #e6eef6;
  border-radius: 999px;
  overflow: hidden;
}
.pcp-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: #3e6187;
  border-radius: 999px;
  transition: width .25s ease;
}
.pcp-progress-msg { margin-top: 8px; font-size: 11.5px; color: #3e6187; font-weight: 600; }
.pcp-progress-msg.is-fail { color: #dc2626; }

/* ── 삭제 모달 danger 변형 ── */
.pcp-band-danger { border-left-color: #dc2626; background: linear-gradient(180deg, #fef2f2, #fff); border-color: #fecaca; }
.pcp-h-danger { border-bottom-color: #dc2626; color: #b91c1c; }
.pcp-item-amount.is-danger { color: #b91c1c; }
.pcp-danger-msg {
  margin: 11px 0 0;
  padding: 9px 11px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 11.5px;
  color: #b91c1c;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .pcp { padding: 12px; }
  .pcp-grid { grid-template-columns: 1fr; }
}