/*
 * 상품정보 모달 (데이터 > 상품정보) — 가격표
 *
 * ⚠인라인 style 로는 `:hover` 를 쓸 수 없다 → 행 강조는 여기(규칙 1: 스타일은 CSS 로).
 * 상담사가 스무 줄 넘는 조합표에서 «지금 보는 줄»을 잃지 않도록 hover 배경을 준다.
 */
.pi-price-row { transition: background-color .12s ease; }
.pi-price-row:hover { background: #eff6ff; }

/* 등록 열 = 버튼 폭 + 좌우 여백 고정. 남는 폭은 가격 열이 가져간다 */
.pi-price-table th.pi-reg-col,
.pi-price-table td.pi-reg-col { width: 84px; min-width: 84px; }

html.dark .pi-price-row:hover { background: #1e293b; }

/* 펼침 배치 — 클릭하면 그 조건으로 실적등록이 열리는 칸.
   ⚠펼치면 한 «줄»에 조합이 여럿이라 행 끝 버튼으로는 어느 조합인지 가리킬 수 없다 → 셀이 진입점이다.
   «누를 수 있다»가 보여야 하므로 밑줄+커서로 표시한다(색만 바꾸면 금액 강조와 구분이 안 된다). */
.pi-reg-cell { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-color: #93c5fd; }
.pi-reg-cell:hover { background: #dbeafe; color: #1d4ed8 !important; }

html.dark .pi-reg-cell:hover { background: #1e3a5f; }

/*
 * 글자 크기(확대) — 시력이 좋지 않은 상담사를 위한 배율. 보통(100%)이 «최소»다(사용자 확정).
 *
 * ⚠이 화면은 스타일이 전부 **인라인 px** 이라 부모 `font-size` 를 키워도 자식이 따라오지 않는다.
 *   그래서 `zoom` 으로 패널 전체를 확대한다 — 글자·간격·표가 함께 커져 저시력 사용자에게 더 낫고,
 *   `transform: scale()` 과 달리 레이아웃 폭도 함께 계산돼 가로 스크롤이 깨지지 않는다.
 */
.pi-zoom-115 { zoom: 1.15; }
.pi-zoom-130 { zoom: 1.30; }
.pi-zoom-150 { zoom: 1.50; }

/* 배율 선택 버튼 — 「가」의 크기 자체로 단계를 알린다(숫자보다 빠르게 읽힌다) */
.pi-zoom-btn { padding: 4px 9px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #475569; cursor: pointer; line-height: 1; font-weight: 700; }
.pi-zoom-btn:hover { background: #f1f5f9; }
.pi-zoom-btn.on { background: #2563eb; color: #fff; border-color: #2563eb; }

html.dark .pi-zoom-btn { background: #0f172a; color: #cbd5e1; border-color: #334155; }
html.dark .pi-zoom-btn.on { background: #2563eb; color: #fff; }


/* === 공지 (가격표 위) — 2026-08-16 ==================================
 * 「공통」(기간 전체) / 「{단계이름} 공지」 배지 + 본문.
 * ⚠모바일은 배지와 본문을 «줄바꿈» — 한 줄에 두면 긴 단계 이름이 본문을 밀어내
 *   문구가 몇 글자만 남는다(실제 화면에서 발생).
 */
.pi-notices { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }

.pi-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}
.pi-notice-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  background: #dc2626;
  color: #fff;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pi-notice-body {
  min-width: 0;
  font-size: 11.5px;
  color: #b91c1c;
  white-space: pre-wrap;
  line-height: 1.6;
}

.pi-notice--common { background: #fff7ed; border-color: #fed7aa; }
.pi-notice--common .pi-notice-badge { background: #f97316; }
.pi-notice--common .pi-notice-body { color: #9a3412; }

@media (max-width: 768px) {
  .pi-notice { flex-direction: column; gap: 5px; }
  .pi-notice-badge { max-width: 100%; align-self: flex-start; }
}

html.dark .pi-notice { background: #2a1214; border-color: #7f1d1d; }
html.dark .pi-notice-body { color: #fca5a5; }
html.dark .pi-notice--common { background: #2a1c0e; border-color: #9a3412; }
html.dark .pi-notice--common .pi-notice-body { color: #fdba74; }

/* 모바일 상단(탭+스코프 바) 접기 토글 — 검색영역 공용 토글과 같은 시각 규격(.sa-toggle) */
.pi-scope-toggle { margin: 10px 16px 0; width: calc(100% - 32px); }

/* === 상세 설명 항목 톤·박스 (2026-08-16) ==========================
 * ⭐자유 색상이 아니라 «의미 프리셋» 4종. 색을 자유롭게 주면 다크모드에서 대비가 무너지고
 *   「무슨 색이 무슨 뜻인지」를 아무도 모르게 된다. 조합을 닫아 두면 다크 매핑도 한 번만 한다.
 * ⚠박스 색은 «본문 톤»을 따른다 — 색까지 따로 고르게 하면 주의 톤에 파란 테두리 같은
 *   의미가 어긋난 조합이 생긴다. 모양(굵기·선종류·라운드)만 고른다.
 * ⚠margin·padding 은 설정하지 않는다(사용자 확정) — 박스가 있으면 여백을 자동으로 준다.
 */
.pi-desc { break-inside: avoid; page-break-inside: avoid; margin-bottom: 11px; }

.pi-desc-title { font-size: 11.5px; font-weight: 700; margin-bottom: 2px; }
.pi-desc-body  { font-size: 12.5px; white-space: pre-wrap; line-height: 1.55; }

/* 톤 — 제목 */
.pi-t--default { color: #1e40af; }
.pi-t--strong  { color: #0f172a; font-weight: 800; }
.pi-t--warn    { color: #b91c1c; }
.pi-t--muted   { color: #94a3b8; font-weight: 600; }

/* 톤 — 본문 */
.pi-b--default { color: #334155; }
.pi-b--strong  { color: #0f172a; font-weight: 700; }
.pi-b--warn    { color: #b91c1c; font-weight: 600; }
.pi-b--muted   { color: #94a3b8; font-size: 11.5px; }

/* 박스 — 색은 톤에서, 모양은 옵션에서 */
.pi-desc--boxed {
  --pi-desc-border: #cbd5e1;
  --pi-desc-bg: transparent;
  border: var(--pi-desc-bw, 1px) var(--pi-desc-bs, solid) var(--pi-desc-border);
  background: var(--pi-desc-bg);
  border-radius: var(--pi-desc-br, 8px);
  /* ⚠박스가 있으면 글자가 선에 붙지 않게 여백을 «자동»으로 — 사용자가 값을 정하지 않는다 */
  padding: 9px 11px;
  margin-bottom: 13px;
}
.pi-desc--tone-strong { --pi-desc-border: #94a3b8; --pi-desc-bg: #f8fafc; }
.pi-desc--tone-warn   { --pi-desc-border: #fca5a5; --pi-desc-bg: #fef2f2; }
.pi-desc--tone-muted  { --pi-desc-border: #e2e8f0; }

.pi-desc--bw1 { --pi-desc-bw: 1px; }
.pi-desc--bw2 { --pi-desc-bw: 2px; }
.pi-desc--bw3 { --pi-desc-bw: 3px; }
.pi-desc--bs-solid  { --pi-desc-bs: solid; }
.pi-desc--bs-dashed { --pi-desc-bs: dashed; }
.pi-desc--bs-dotted { --pi-desc-bs: dotted; }
.pi-desc--br-none { --pi-desc-br: 0; }
.pi-desc--br-sm   { --pi-desc-br: 8px; }
.pi-desc--br-lg   { --pi-desc-br: 16px; }

html.dark .pi-t--default { color: #93c5fd; }
html.dark .pi-t--strong  { color: #f1f5f9; }
html.dark .pi-t--warn    { color: #fca5a5; }
html.dark .pi-t--muted   { color: #64748b; }
html.dark .pi-b--default { color: #cbd5e1; }
html.dark .pi-b--strong  { color: #f1f5f9; }
html.dark .pi-b--warn    { color: #fca5a5; }
html.dark .pi-b--muted   { color: #64748b; }
html.dark .pi-desc--boxed      { --pi-desc-border: #334155; }
html.dark .pi-desc--tone-strong { --pi-desc-border: #475569; --pi-desc-bg: #1e293b; }
html.dark .pi-desc--tone-warn   { --pi-desc-border: #7f1d1d; --pi-desc-bg: #2a1214; }
html.dark .pi-desc--tone-muted  { --pi-desc-border: #334155; }

/* === 설명항목 «표시 스타일» 조작 UI (설정 모달) — 2026-08-16 ==========
 * select 5개를 나열하면 무엇이 무엇인지 안 보이고, 고른 결과가 어떻게 생겼는지도 알 수 없다.
 * → 라벨 + 세그먼트 + «라이브 미리보기». 톤 옵션에는 그 톤의 색을 점으로 얹어 글자 없이도 구분된다.
 */
.dis-box { padding: 12px 13px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; }
.dis-head { font-size: 12px; font-weight: 700; color: #0f172a; margin-bottom: 9px; }

.dis-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.dis-label { flex: 0 0 42px; font-size: 11px; font-weight: 700; color: #475569; }

.dis-seg { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.dis-opt { position: relative; }
.dis-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.dis-opt span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #475569;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.dis-opt input:checked + span { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.dis-opt input:focus-visible + span { outline: 2px solid #2563eb; outline-offset: 1px; }

/* 톤 옵션 앞의 색 점 — 「무슨 색이 되는가」가 글자보다 빨리 읽힌다 */
.dis-opt[class*="dis-opt--"] span::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dis-dot, #cbd5e1);
}
.dis-opt--default { --dis-dot: #1e40af; }
.dis-opt--strong  { --dis-dot: #0f172a; }
.dis-opt--warn    { --dis-dot: #dc2626; }
.dis-opt--muted   { --dis-dot: #94a3b8; }

.dis-preview { margin-top: 11px; padding: 10px 11px; background: #fff; border: 1px dashed #cbd5e1; border-radius: 8px; }
.dis-preview-head { font-size: 10.5px; font-weight: 700; color: #94a3b8; margin-bottom: 6px; }
.dis-preview .pi-desc { margin-bottom: 0; }
.dis-note { margin: 8px 0 0; font-size: 11px; color: #94a3b8; line-height: 1.6; }

html.dark .dis-box { background: #0f172a; border-color: #334155; }
html.dark .dis-head { color: #f1f5f9; }
html.dark .dis-label { color: #94a3b8; }
html.dark .dis-opt span { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html.dark .dis-opt input:checked + span { background: #1e3a8a; border-color: #3b82f6; color: #bfdbfe; }
html.dark .dis-preview { background: #1e293b; border-color: #334155; }

/* === 가격표 배치 모달 — 고르면서 결과를 본다 (2026-08-16) ====================
 * ⭐「선택지 3개」만으로는 표가 어떻게 되는지 상상해야 한다. 실제로 몇 열이 되는지는
 *   «값»이 정하므로(같은 브랜드에서도 제품마다 다르다) 설명으로는 알 수 없다.
 *   → 왼쪽에서 고르고 오른쪽에서 «상담사 화면과 같은 표»를 그대로 본다.
 */
.pcl-wrap { display: flex; gap: 0; height: 100%; min-height: 0; }
.pcl-side { flex: 0 0 340px; min-width: 0; padding: 16px 16px 20px; overflow-y: auto;
            border-right: 1px solid #e5e7eb; background: #fff; }
.pcl-main { flex: 1; min-width: 0; display: flex; flex-direction: column;
            background: #f8fafc; }

.pcl-note { padding: 10px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
            font-size: 11.5px; color: #1e40af; line-height: 1.7; margin-bottom: 14px; }
.pcl-head { font-size: 12.5px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.pcl-sub { font-size: 11px; color: #64748b; margin-bottom: 9px; line-height: 1.6; }
.pcl-warn { padding: 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
            font-size: 12px; color: #92400e; }
.pcl-opts { display: flex; flex-direction: column; gap: 5px; }

.pcl-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
           border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; cursor: pointer; }
.pcl-opt:hover { border-color: #cbd5e1; background: #f8fafc; }
.pcl-opt input { margin: 2px 0 0; accent-color: #2563eb; flex-shrink: 0; }
.pcl-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcl-opt strong { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.pcl-opt em { font-style: normal; font-size: 11px; color: #94a3b8; }
.pcl-opt:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
.pcl-opt:has(input:checked) em { color: #3b82f6; }

.pcl-main-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
                padding: 11px 14px; border-bottom: 1px solid #e5e7eb; background: #fff; }
.pcl-main-title { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.pcl-main-sub { font-size: 12px; color: #475569; font-weight: 600; }
.pcl-main-hint { margin-left: auto; font-size: 10.5px; color: #94a3b8; }
.pcl-select { padding: 6px 9px; border: 1px solid #cbd5e1; border-radius: 7px;
              font-size: 12px; background: #fff; color: #0f172a; max-width: 260px; }
/* ⚠표가 가로로 길다 — 여기서 스크롤을 받지 않으면 모달 자체가 가로로 늘어난다 */
.pcl-preview { flex: 1; min-height: 0; overflow: auto; padding: 13px 14px; }
.pcl-loading { padding: 30px; text-align: center; color: #94a3b8; font-size: 12.5px; }

/* === 상품세부설정 입력표 — 본문 셀·입력칸 (2026-08-16 클래스화) ================
 * ⚠칸마다 인라인 style 을 반복하면 쿠쿠(980줄 × 19칸)에서 HTML 이 9MB 가 된다(실측 —
 *   8/14 상품관리 트리 10.3MB 사고와 같은 구조). 행 수만큼 반복되는 tbody 쪽만 클래스로.
 *   thead 는 표당 상수 개수라 그대로 둔다. */
.pcd-tr { border-bottom: 1px solid #f1f5f9; }
.pcd-td-name { position: sticky; left: 0; z-index: 1; background: #fff; padding: 7px 10px;
               border-right: 1px solid #e2e8f0; white-space: nowrap; color: #0f172a; }
.pcd-td-cond { padding: 7px 10px; border-right: 1px solid #e2e8f0; white-space: nowrap; color: #475569; }
.pcd-td-cell { padding: 4px 6px; border-right: 1px solid #e2e8f0; }
/* 구조적으로 없는 조합(예: 3년엔 반값할인 없음) — 입력 대상이 아니다 */
.pcd-td-none { padding: 4px 6px; border-right: 1px solid #e2e8f0; text-align: center;
               color: #cbd5e1; background: #fafbfc; }
.pcd-input { width: 150px; padding: 5px 7px; border: 1px solid #e2e8f0; border-radius: 5px;
             font-size: 12px; color: #0f172a; background: #fff; }
.pcd-input--num { width: 96px; text-align: right; }
.pcd-input--link { width: 180px; }
/* 펼침 표는 열이 많아 입력칸을 조금 좁게(종전 인라인 값 유지) */
.pcd-pivot .pcd-input { width: 130px; }
.pcd-pivot .pcd-input--num { width: 88px; }
.pcd-pivot .pcd-input--link { width: 170px; }

/* === 상품비교설정 카드 — 저장 버튼·저장 안 됨 표시 (2026-08-16) ================
 * change 시 JS(catalog-display)가 form 에 .cdisp-dirty 를 붙인다. 저장(카드 교체)되면 자연 해제. */
.cdisp-save { padding: 8px 16px; background: #2563eb; color: #fff; border: none; border-radius: 7px;
              font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cdisp-save:hover { background: #1d4ed8; }
.cdisp-unsaved { display: none; font-size: 11px; font-weight: 700; color: #b45309;
                 background: #fffbeb; border: 1px solid #fde68a; padding: 3px 9px; border-radius: 999px;
                 white-space: nowrap; }
form.cdisp-dirty .cdisp-unsaved { display: inline-flex; }
form.cdisp-dirty .cdisp-save { background: #d97706; }
form.cdisp-dirty .cdisp-save:hover { background: #b45309; }
html.dark .cdisp-unsaved { background: #451a03; border-color: #92400e; color: #fbbf24; }

/* === 상품세부설정 — 스코프 선택 바 (2026-08-16 개보수) ========================
 * 캠페인 → 대분류 → 기간 3단계 + 관리 버튼. 단계 번호로 고르는 순서를 드러내고,
 * ⚠셀렉트에 폭 상한을 둔다 — 종전 auto-fit 1fr 은 초광폭 모니터에서 화면만큼 늘어났다. */
.pcds-bar { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
            padding: 14px 16px; margin-bottom: 16px; }
.pcds-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pcds-field { flex: 1 1 220px; min-width: 190px; max-width: 340px; }
.pcds-label { display: flex; align-items: center; gap: 6px;
              font-size: 12px; font-weight: 700; color: #0f172a; margin-bottom: 5px; }
.pcds-step { display: inline-flex; align-items: center; justify-content: center;
             width: 16px; height: 16px; border-radius: 999px; flex-shrink: 0;
             background: #e2e8f0; color: #475569; font-size: 10px; font-weight: 800; }
.pcds-select { width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 7px;
               font-size: 13px; background: #fff; color: #0f172a; }
.pcds-select:hover { border-color: #94a3b8; }
.pcds-select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
/* 관리 버튼 — 선택 3종과 시각적으로 갈라 우측 끝에. 표시/숨김은 JS(display) 가 제어 */
.pcds-actions { margin-left: auto; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.pcds-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
            background: #fff; color: #334155; border: 1px solid #cbd5e1; border-radius: 7px;
            font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pcds-btn:hover { background: #f8fafc; border-color: #94a3b8; }
.pcds-btn:active { transform: translateY(1px); }
.pcds-btn svg { color: #64748b; flex-shrink: 0; }
.pcds-hint { margin-top: 9px; font-size: 11px; color: #94a3b8; line-height: 1.6; }

@media (max-width: 760px) {
  .pcds-field { flex-basis: 100%; max-width: none; }
  .pcds-actions { margin-left: 0; width: 100%; }
  .pcds-btn { flex: 1 1 auto; justify-content: center; }
}

html.dark .pcds-bar { background: #0f172a; border-color: #334155; }
html.dark .pcds-label { color: #f1f5f9; }
html.dark .pcds-step { background: #334155; color: #cbd5e1; }
html.dark .pcds-select { background: #1e293b; border-color: #334155; color: #f1f5f9; }
html.dark .pcds-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html.dark .pcds-btn:hover { background: #263449; }
html.dark .pcds-hint { color: #64748b; }

/* 노출 제외 (전시 축) — 옵션 이름 그룹 아래 가지 체크 목록. 체크 = 표에서 숨김 */
.pcl-head-gap { margin-top: 18px; }
.pcl-ex-groups { display: flex; flex-direction: column; gap: 10px; }
.pcl-ex-group { border: 1px solid #e5e7eb; border-radius: 9px; overflow: hidden; }
.pcl-ex-name { padding: 7px 11px; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
               font-size: 11.5px; font-weight: 700; color: #334155; }
.pcl-ex-items { display: flex; flex-direction: column; padding: 4px 0; }
.pcl-ex-item { display: flex; align-items: center; gap: 8px; padding: 6px 11px;
               cursor: pointer; font-size: 12px; }
.pcl-ex-item:hover { background: #f8fafc; }
.pcl-ex-item input { accent-color: #dc2626; flex-shrink: 0; }
.pcl-ex-label { color: #0f172a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcl-ex-count { margin-left: auto; flex-shrink: 0; font-style: normal; font-size: 10.5px;
                color: #94a3b8; padding: 1px 6px; border: 1px solid #e2e8f0; border-radius: 999px; }
/* 체크(제외) 상태 — 줄이 「숨김」으로 읽히게 */
.pcl-ex-item:has(input:checked) { background: #fef2f2; }
.pcl-ex-item:has(input:checked) .pcl-ex-label { color: #b91c1c; text-decoration: line-through; }
.pcl-ex-item:has(input:checked) .pcl-ex-count { color: #b45309; border-color: #fde68a; background: #fffbeb; }

/* 좁은 화면 — 왼쪽/오른쪽을 위아래로 */
@media (max-width: 900px) {
  .pcl-wrap { flex-direction: column; }
  .pcl-side { flex: 0 0 auto; border-right: none; border-bottom: 1px solid #e5e7eb; }
  .pcl-main-hint { margin-left: 0; flex-basis: 100%; }
}

html.dark .pcl-side { background: #0f172a; border-color: #334155; }
html.dark .pcl-main { background: #0f172a; }
html.dark .pcl-main-bar { background: #1e293b; border-color: #334155; }
html.dark .pcl-main-title { color: #f1f5f9; }
html.dark .pcl-opt { background: #1e293b; border-color: #334155; }
html.dark .pcl-opt:hover { background: #263449; }
html.dark .pcl-opt strong { color: #f1f5f9; }
html.dark .pcl-opt:has(input:checked) { background: #1e3a8a; border-color: #3b82f6; }
html.dark .pcl-head { color: #f1f5f9; }
html.dark .pcl-ex-group { border-color: #334155; }
html.dark .pcl-ex-name { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html.dark .pcl-ex-item:hover { background: #1e293b; }
html.dark .pcl-ex-label { color: #e2e8f0; }
html.dark .pcl-ex-count { border-color: #334155; color: #94a3b8; }
html.dark .pcl-ex-item:has(input:checked) { background: #450a0a; }
html.dark .pcl-ex-item:has(input:checked) .pcl-ex-label { color: #fca5a5; }
html.dark .pcl-ex-item:has(input:checked) .pcl-ex-count { color: #fbbf24; border-color: #92400e; background: #451a03; }

/* === 제품군 비교표 — 기준 브랜드를 위로 분리 (2026-08-16) ====================
 * ⭐종전엔 기준 브랜드가 비교 대상 사이에 섞여 「내 기준이 어디 있지」를 눈으로 찾아야 했다
 *   (실측: 얼음정수기 7브랜드 22제품에서 SK 3개가 14번째 줄부터).
 * ⚠표를 둘로 쪼개지 않는다 — 열 너비가 따로 놀면 «나란히 비교»라는 목적이 깨진다.
 *   같은 표 안에서 «행 그룹»으로만 가른다.
 */
.pi-cmp-group td {
  padding: 7px 11px;
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}
.pi-cmp-group td strong { color: #334155; }
.pi-cmp-group td span { font-weight: 500; color: #94a3b8; margin-left: 4px; }
.pi-cmp-group--base td { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.pi-cmp-group--base td strong { color: #3730a3; }
.pi-cmp-group--base td span { color: #818cf8; }

.pi-cmp-row { border-bottom: 1px solid #f1f5f9; }
.pi-cmp-brand { padding: 8px 11px; white-space: nowrap; border-right: 1px solid #e2e8f0; color: #64748b; }
.pi-cmp-product { padding: 8px 11px; border-right: 1px solid #e2e8f0; color: #0f172a; font-weight: 600; }
.pi-cmp-models { margin-top: 2px; font-size: 10.5px; font-weight: 600; color: #64748b; }
.pi-cmp-val { padding: 8px 11px; text-align: right; white-space: nowrap; border-right: 1px solid #e2e8f0; }

/* 기준 행 — 좌측 액센트만(배경을 진하게 칠하면 값이 안 읽힌다) */
.pi-cmp-row--base { background: #fafaff; }
.pi-cmp-row--base .pi-cmp-brand {
  box-shadow: inset 3px 0 0 #6366f1;
  color: #4338ca;
  font-weight: 700;
}

html.dark .pi-cmp-group td { background: #1e293b; border-color: #334155; color: #94a3b8; }
html.dark .pi-cmp-group td strong { color: #e2e8f0; }
html.dark .pi-cmp-group--base td { background: #312e81; border-color: #4338ca; color: #c7d2fe; }
html.dark .pi-cmp-group--base td strong { color: #e0e7ff; }
html.dark .pi-cmp-row--base { background: #1e1b4b; }
html.dark .pi-cmp-row--base .pi-cmp-brand { color: #c7d2fe; }
html.dark .pi-cmp-brand, html.dark .pi-cmp-product { border-color: #334155; }

/* 비교표 — 값이 «어느 조합»의 것인지 (2026-08-16)
 * 🔴조건을 「전체」로 두면 후보가 여럿인데 종전엔 그중 첫 번째를 말없이 보여줬다.
 *   상담사가 그 숫자를 고객에게 그대로 말하면 틀린다 → 조합을 반드시 적는다. */
.pi-cmp-combo { margin-top: 3px; font-size: 10.5px; font-weight: 500; color: #475569; }
.pi-cmp-more {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  background: #fef3c7; color: #92400e; border-radius: 999px;
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
html.dark .pi-cmp-combo { color: #94a3b8; }
html.dark .pi-cmp-more { background: #78350f; color: #fde68a; }

/* 비교표 머리글 — 펼치면 2단(지표 / 선택지) */
.pi-cmp-th { padding: 9px 11px; white-space: nowrap; border-bottom: 1px solid #e2e8f0;
             border-right: 1px solid #e2e8f0; font-weight: 700; color: #334155; text-align: right; }
.pi-cmp-th--l { text-align: left; }
.pi-cmp-th--c { text-align: center; }
.pi-cmp-th--sub { font-size: 11px; font-weight: 600; color: #64748b; }
html.dark .pi-cmp-th { border-color: #334155; color: #e2e8f0; }
html.dark .pi-cmp-th--sub { color: #94a3b8; }

/* === 비교표 «치워 두기» (2026-08-16) ========================================
 * ⭐개별 숨김은 칩으로 되돌린다 — 무엇을 치웠는지 이름이 보여야 실수를 알아챈다.
 * ⚠「값 없는 제품」은 별개 축 — 실측 22개 중 19개가 조합 없음이라 칩으로 나열하면 더 시끄럽다.
 */
.pi-hide-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 11px; margin-bottom: 9px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px;
}
.pi-hide-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
                  color: #334155; font-weight: 600; cursor: pointer; }
.pi-hide-toggle input { accent-color: #2563eb; margin: 0; }
.pi-hide-toggle em { font-style: normal; color: #94a3b8; font-weight: 500; }
.pi-hide-label { margin-left: 6px; font-size: 11px; font-weight: 700; color: #64748b; }

.pi-hide-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 6px; background: #fff; border: 1px solid #cbd5e1;
  border-radius: 999px; font-size: 11px; color: #475569; cursor: pointer; white-space: nowrap;
}
.pi-hide-chip:hover { border-color: #94a3b8; background: #f1f5f9; }
.pi-hide-chip-brand { color: #94a3b8; font-size: 10px; font-weight: 700; }
.pi-hide-x { color: #94a3b8; font-size: 10px; font-weight: 700; }
.pi-hide-chip:hover .pi-hide-x { color: #dc2626; }
.pi-hide-all { margin-left: 2px; padding: 3px 9px; background: none; border: none;
               font-size: 11px; font-weight: 700; color: #2563eb; cursor: pointer; }
.pi-hide-all:hover { text-decoration: underline; }

/* 행의 «치우기» — 제품 칸 왼쪽에 상시 노출(hover 전용은 터치에서 못 누른다) */
.pi-cmp-hide {
  float: right; margin-left: 8px; padding: 1px 5px;
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: #cbd5e1; font-size: 11px; line-height: 1.4; cursor: pointer;
}
.pi-cmp-hide:hover { color: #dc2626; border-color: #fecaca; background: #fef2f2; }

html.dark .pi-hide-bar { background: #1e293b; border-color: #334155; }
html.dark .pi-hide-toggle { color: #e2e8f0; }
html.dark .pi-hide-chip { background: #0f172a; border-color: #334155; color: #cbd5e1; }
html.dark .pi-hide-chip:hover { background: #1e293b; }

/* 조회 중 — 있던 내용을 «지우지 않고» 살짝 흐리게만.
 * ⚠본문을 비웠다 다시 그리면 조건 하나 바꿀 때마다 화면이 하얘져 깜빡임이 된다.
 * ⚠pointer-events 를 끊어 응답 전 연타로 요청이 겹치는 것도 막는다. */
.pi-busy { opacity: .5; pointer-events: none; }
[data-product-info-target="body"] { transition: opacity .12s ease; }

/* 조합 표기 — 「보여준 것」과 「다른 것」을 눈으로 갈라 놓는다.
 * ⚠표의 숫자는 첫 조합의 값이다. 다른 조합을 같은 모양으로 적으면 그 값이 전부에 해당하는
 *   것처럼 읽힌다 → 라벨을 붙이고 색·굵기를 낮춘다. */
.pi-cmp-combo-main { font-weight: 600; color: #334155; }
.pi-cmp-alt-label { margin-left: 6px; font-size: 10px; font-weight: 700; color: #94a3b8; }
.pi-cmp-alt {
  display: inline-block; margin-left: 4px; padding: 0 6px;
  background: #f1f5f9; color: #64748b; border-radius: 999px;
  font-size: 10px; font-weight: 500; white-space: nowrap;
}
html.dark .pi-cmp-combo-main { color: #cbd5e1; }
html.dark .pi-cmp-alt { background: #334155; color: #cbd5e1; }

/* 비교표 — 조합마다 한 행(제품 상세 탭과 같은 구조, 2026-08-16)
 * ⚠제품 칸은 rowspan 으로 묶는다 — 이름을 조합 수만큼 되풀이하면 무엇이 한 제품인지 안 보인다. */
.pi-cmp-axis { padding: 7px 11px; white-space: nowrap; border-right: 1px solid #e2e8f0;
               color: #334155; font-weight: 600; }
.pi-cmp-combo-n { margin-top: 3px; font-size: 10px; font-weight: 700; color: #94a3b8; }
/* 같은 제품의 이어지는 행 — 경계선을 옅게 해 한 묶음으로 읽히게 */
.pi-cmp-row--cont { border-bottom-color: #f8fafc; }
.pi-cmp-brand, .pi-cmp-product { vertical-align: top; }
html.dark .pi-cmp-axis { color: #cbd5e1; border-color: #334155; }

/* 비교표 열 너비 — ⚠브랜드·제품 칸이 남는 폭을 다 먹으면 정작 값 열이 눌린다.
 *   지표 열이 사라졌을 때 실제로 그렇게 됐다(원인은 따로 고쳤지만, 폭 자체도 묶어 둔다). */
.pi-cmp-brand { width: 1%; max-width: 140px; }
.pi-cmp-product { width: 1%; min-width: 190px; max-width: 300px; }
.pi-cmp-axis { width: 1%; }
/* 값 열이 남는 폭을 가져간다 — 표가 좁아지면 여기부터 줄어든다 */
.pi-cmp-val { width: auto; min-width: 84px; }
.pi-cmp-product, .pi-cmp-models { word-break: keep-all; overflow-wrap: anywhere; }

/* 비교표 실적등록 — 제품 상세 탭과 같은 규약(칸 클릭 / 행 더블클릭 + 버튼) */
.pi-cmp-reg {
  padding: 4px 11px; background: #2563eb; color: #fff; border: none; border-radius: 6px;
  font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pi-cmp-reg:hover { background: #1d4ed8; }

/* === 기간 이동 «‹ ›» (제품 상세 탭) — 2026-08-16 ==========================
 * ⭐같은 대분류에 기간이 여럿이면 지난 달 가격표를 볼 수 있어야 한다.
 * ⚠지난/예정 기간에서는 실적등록이 닫힌다 — 배지로 그 사실을 말해 준다.
 */
.pi-pnav { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pi-pnav-btn {
  width: 20px; height: 20px; padding: 0; line-height: 1;
  background: #fff; color: #475569; border: 1px solid #cbd5e1; border-radius: 5px;
  font-size: 12px; cursor: pointer;
}
.pi-pnav-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }
/* ⚠끝에서는 «지우지 않고» 흐리게 — 사라지면 옆 버튼이 자리를 옮겨 잘못 누른다 */
.pi-pnav-btn:disabled { opacity: .35; cursor: default; }
.pi-pnav-label { font-size: 11.5px; font-weight: 700; color: #334155; }
.pi-pnav-range { font-size: 11px; color: #94a3b8; }
.pi-pnav-badge {
  padding: 1px 7px; background: #fef3c7; color: #92400e;
  border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap;
}
.pi-pnav-now {
  padding: 1px 8px; background: none; border: none;
  color: #2563eb; font-size: 10.5px; font-weight: 700; cursor: pointer;
}
.pi-pnav-now:hover { text-decoration: underline; }
html.dark .pi-pnav-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html.dark .pi-pnav-label { color: #e2e8f0; }
html.dark .pi-pnav-badge { background: #78350f; color: #fde68a; }

/* ── 가격표 인라인 수정 (2026-08-16, ere7xw) — price-edit 컨트롤러 ── */
/* 수정 모드: 좌표 있는 칸만 편집 가능 어포던스(점선) — 접힌 열·없는 조합은 그대로 */
.pce-mode td[data-pce-item] { cursor: cell; outline: 1px dashed #cbd5e1; outline-offset: -2px; }
.pce-mode td[data-pce-item]:hover { background: #f0f9ff; }
.pce-mode td.pce-selected { outline: 2px solid #2563eb; outline-offset: -2px; background: #eff6ff; }
.pce-mode td.pce-dirty { background: #fff7ed; color: #9a3412; font-weight: 700; }
/* 수정 모드에서는 실적등록 칸의 클릭 어포던스를 끈다(캡처 리스너가 진입도 막는다) */
.pce-mode .pi-reg-cell { cursor: cell; }
.pce-input {
  width: 100%; min-width: 72px; box-sizing: border-box; padding: 3px 5px;
  border: 1px solid #2563eb; border-radius: 4px; font-size: 12px; text-align: right;
  background: #fff; color: #0f172a;   /* ⚠배경·글자색 함께 지정 — 강제 다크 뒤집힘 방지(규칙 10) */
}
html.dark .pce-mode td[data-pce-item]:hover { background: #1e3a5f; }
html.dark .pce-mode td.pce-selected { background: #1e3a5f; }
html.dark .pce-mode td.pce-dirty { background: #451a03; color: #fdba74; }
html.dark .pce-input { background: #1e293b; color: #e2e8f0; }