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

.pcp {
  padding: 16px;
  background: var(--ord-surface-2);
}

/* 헤더 밴드 — 무엇을 복사하는지(원본)를 맨 위에 고정 */
.pcp-band {
  padding: 11px 14px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, var(--ord-band), var(--ord-panel));
  border: 1px solid var(--ord-line);
  border-left: 4px solid var(--ord-accent);
  border-radius: 10px;
}
.pcp-band-title { font-size: 13.5px; font-weight: 700; color: var(--ord-tint-blue-fg); }
.pcp-band-meta { margin-top: 3px; font-size: 11.5px; color: var(--ord-tint-blue-fg); }

/* 섹션 밴드 카드 */
.pcp-sec {
  padding: 13px 14px 14px;
  margin-bottom: 12px;
  background: var(--ord-panel);
  border: 1px solid var(--ord-line);
  border-radius: 11px;
}
.pcp-h {
  margin: 0 0 11px;
  padding-bottom: 5px;
  border-bottom: 3px solid var(--ord-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ord-accent);
}
.pcp-count {
  padding: 1px 8px;
  background: var(--ord-band);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ord-accent);
}

/* 세그먼트 (대상 모드) */
.pcp-seg { display: flex; gap: 6px; margin-bottom: 13px; flex-wrap: wrap; }
.pcp-seg-btn {
  padding: 7px 15px;
  background: var(--ord-panel);
  border: 1px solid var(--ord-line-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ord-tint-blue-fg);
  cursor: pointer;
}
.pcp-seg-btn.is-on { background: var(--ord-head-bg); border-color: var(--ord-head-bg); color: var(--ord-on-solid); }
.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: var(--ord-tint-blue-fg); margin-bottom: 5px; }
.pcp-label i { color: var(--ord-tint-red-fg); font-style: normal; }
.pcp-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ord-line-2);
  border-radius: 7px;
  font-size: 13px;
  /* ⚠규칙 10 — 배경·글자색을 함께 지정(브라우저 강제 다크가 한쪽만 뒤집는다) */
  background: var(--ord-panel);
  color: var(--ord-text);
  box-sizing: border-box;
}
.pcp-input:focus {
  outline: none;
  border-color: var(--ord-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ord-accent) 13%, transparent);
}
.pcp-hint { margin-top: 4px; font-size: 10.5px; color: var(--ord-text-4); }

/* 체크·라디오 줄 */
.pcp-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 11px;
  padding: 9px 11px;
  background: var(--ord-surface-2);
  border: 1px solid var(--ord-line);
  border-radius: 9px;
  font-size: 12px;
  color: var(--ord-tint-blue-fg);
  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: var(--ord-accent); font-weight: 600; }
.pcp-check-amber { background: var(--ord-tint-amber-bg); border-color: var(--ord-tint-amber-line); }

/* 원본 마감 — 체크 + 종료일(고를 수 있다) */
.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: var(--ord-tint-amber-fg); }
/* 폭·높이를 명시한다 — date 입력은 내용 폭이 브라우저마다 달라 auto 로 두면 좁게 잘린다 */
.pcp-close-date { width: 170px; max-width: 100%; height: 34px; padding: 6px 9px; font-size: 12.5px; }
.pcp-close-date:disabled { background: var(--ord-band); color: var(--ord-text-4); }
.pcp-sub { display: block; margin-top: 3px; font-size: 11px; color: var(--ord-text-3); 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 var(--ord-line-soft);
  border-radius: 9px;
  margin-bottom: 6px;
  background: var(--ord-panel);
}
.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: var(--ord-tint-blue-fg); }
/* 삭제 모달은 체크박스가 없어 이름이 직접 자식이다 — 건수를 우측으로 밀어낸다 */
.pcp-item > .pcp-item-name { flex: 1; min-width: 0; }
.pcp-item-amount { font-size: 11.5px; font-weight: 700; color: var(--ord-tint-blue-fg); 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: var(--ord-tint-amber-fg); }
.pcp-item-state.is-done { color: var(--ord-tint-green-fg); }
.pcp-item-state.is-fail { color: var(--ord-tint-red-fg); }

.pcp-note {
  margin: 10px 0 0;
  padding: 8px 11px;
  background: var(--ord-band);
  border: 1px solid var(--ord-line);
  border-radius: 8px;
  font-size: 11px;
  color: var(--ord-tint-blue-fg);
  line-height: 1.6;
}

/* 진행 */
.pcp-bar {
  height: 7px;
  background: var(--ord-band);
  border-radius: 999px;
  overflow: hidden;
}
.pcp-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ord-accent);
  border-radius: 999px;
  transition: width .25s ease;
}
.pcp-progress-msg { margin-top: 8px; font-size: 11.5px; color: var(--ord-accent); font-weight: 600; }
.pcp-progress-msg.is-fail { color: var(--ord-tint-red-fg); }

/* ── 삭제 모달 danger 변형 ── */
.pcp-band-danger { border-left-color: var(--ord-tint-red-fg); background: linear-gradient(180deg, var(--ord-tint-red-bg), var(--ord-panel)); border-color: var(--ord-tint-red-line); }
.pcp-h-danger { border-bottom-color: var(--ord-tint-red-fg); color: var(--ord-tint-red-fg); }
.pcp-item-amount.is-danger { color: var(--ord-tint-red-fg); }
.pcp-danger-msg {
  margin: 11px 0 0;
  padding: 9px 11px;
  background: var(--ord-tint-red-bg);
  border: 1px solid var(--ord-tint-red-line);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--ord-tint-red-fg);
  line-height: 1.6;
}

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