/*
 * 상품정보 모달 (데이터 > 상품정보) — 가격표
 *
 * ⚠인라인 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; }

/* 가격표 헤더 정렬(product-price-sort) — 클릭 = 오름 → 내림 → 원래대로.
   ⚠활성 표시는 색이 아니라 배경+화살표 — 내부전용 항목 헤더의 앰버 글자색(정보)을 덮지 않기 위해. */
.pps-th { cursor: pointer; user-select: none; }
.pps-th:hover { background: #e2e8f0; }
.pps-th.pps-asc, .pps-th.pps-desc { background: #dbeafe; }
.pps-th.pps-asc::after { content: "▲"; margin-left: 3px; font-size: 8px; vertical-align: 1px; color: #2563eb; }
.pps-th.pps-desc::after { content: "▼"; margin-left: 3px; font-size: 8px; vertical-align: 1px; color: #2563eb; }

html.dark .pps-th:hover { background: #1e293b; }
html.dark .pps-th.pps-asc, html.dark .pps-th.pps-desc { background: #1e3a5f; }
html.dark .pps-th.pps-asc::after, html.dark .pps-th.pps-desc::after { color: #60a5fa; }

/*
 * 글자 크기(확대) — 시력이 좋지 않은 상담사를 위한 배율. 보통(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); }

/* === 상품 칩 (PC 전용, 2026-08-17) ==========================================
 * select 를 여닫는 대신 [전체][★상품1][상품2]… 한 클릭 선택(사용자 확정). 모바일(≤768px)은
 * 화면 폭이 좁아 칩이 여러 줄로 쌓이므로 기존 select 유지 — 전환은 미디어쿼리가 한다(JS 분기 없음). */
.pi-product-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pi-pchip { padding: 6px 12px; background: #fff; border: 1px solid #cbd5e1; border-radius: 999px;
            font-size: 12px; font-weight: 600; color: #334155; cursor: pointer; white-space: nowrap; }
.pi-pchip:hover:not(:disabled):not(.on) { border-color: #94a3b8; background: #f8fafc; }
.pi-pchip.on { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 700; }
.pi-pchip:disabled { color: #cbd5e1; cursor: not-allowed; }
.pi-pchip-empty { font-size: 12px; color: #94a3b8; }
@media (max-width: 768px) { .pi-product-chips { display: none; } }
@media (min-width: 769px) { .pi-product-selwrap { display: none; } }
html.dark .pi-pchip { background: #0f172a; border-color: #334155; color: #cbd5e1; }
html.dark .pi-pchip:hover:not(:disabled):not(.on) { background: #1e293b; }
html.dark .pi-pchip.on { background: #2563eb; border-color: #2563eb; color: #fff; }
html.dark .pi-pchip:disabled { color: #475569; }
html.dark .pi-pchip-empty { color: #64748b; }

/* === 상세 설명 항목 톤·박스 (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-17) ================
 * 상품 기준(단위) radio + 상품 목록(내부/몰 × 노출 radio·★인기). 시각 언어는 가격표 구성(.pcl-*)과 통일. */
.pcv-wrap { height: 100%; min-height: 0; overflow-y: auto; padding: 16px 18px 20px; background: #fff; }
.pcv-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; }
.pcv-head { font-size: 12.5px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.pcv-head-gap { margin-top: 18px; }
.pcv-sub { font-size: 11px; color: #64748b; margin-bottom: 9px; line-height: 1.6; }

.pcv-units { display: flex; gap: 8px; flex-wrap: wrap; }
.pcv-unit { flex: 1 1 260px; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
            border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; cursor: pointer; }
.pcv-unit:hover { border-color: #cbd5e1; background: #f8fafc; }
.pcv-unit input { margin: 2px 0 0; accent-color: #2563eb; flex-shrink: 0; }
.pcv-unit span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcv-unit strong { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.pcv-unit em { font-style: normal; font-size: 11px; color: #94a3b8; line-height: 1.5; }
.pcv-unit:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
.pcv-default { display: inline-block; padding: 0 6px; margin-left: 4px; background: #2563eb; color: #fff;
               border-radius: 999px; font-size: 9.5px; font-weight: 700; vertical-align: 1px; }

.pcv-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.pcv-search { flex: 0 1 240px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 7px;
              font-size: 12px; background: #fff; color: #0f172a; }
.pcv-count { font-size: 11px; color: #64748b; }
.pcv-list[aria-busy="true"] { opacity: .5; pointer-events: none; }
.pcv-empty { padding: 24px; text-align: center; color: #94a3b8; font-size: 12.5px;
             border: 1px dashed #e2e8f0; border-radius: 9px; }

.pcv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pcv-th { position: sticky; top: 0; z-index: 1; padding: 8px 10px; background: #f8fafc; text-align: center;
          border-bottom: 1px solid #e2e8f0; font-weight: 700; color: #334155; white-space: nowrap; }
.pcv-th--name { text-align: left; }
.pcv-th-count { font-weight: 600; color: #94a3b8; }
.pcv-th--mall { border-left: 1px solid #e2e8f0; }
.pcv-th-soon { display: inline-block; padding: 0 6px; margin-left: 3px; background: #f1f5f9; color: #94a3b8;
               border-radius: 999px; font-size: 9.5px; font-weight: 700; vertical-align: 1px; }
.pcv-row { border-bottom: 1px solid #f1f5f9; }
.pcv-row:hover { background: #f8fafc; }
.pcv-td { padding: 7px 10px; vertical-align: middle; }
.pcv-td--name { min-width: 220px; }
.pcv-td--vis { text-align: center; white-space: nowrap; }
.pcv-td--star { text-align: center; width: 44px; }
td.pcv-td--vis.pcv-td--mall { border-left: 1px solid #f1f5f9; }
.pcv-path { display: block; font-size: 10.5px; color: #94a3b8; }
.pcv-name { font-weight: 700; color: #0f172a; }
.pcv-models { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: 6px; vertical-align: 1px; }
.pcv-model { padding: 0 7px; background: #0f172a; color: #fff; border-radius: 999px;
             font-size: 10px; font-weight: 700; }

.pcv-radios { display: inline-flex; gap: 10px; }
.pcv-radio { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: #334155; }
.pcv-radio input { accent-color: #2563eb; margin: 0; }
.pcv-radio--off input { accent-color: #dc2626; }
.pcv-radio--off:has(input:checked) span { color: #dc2626; font-weight: 700; }
.pcv-radio:not(.pcv-radio--off):has(input:checked) span { color: #1d4ed8; font-weight: 700; }
/* 미노출 행은 이름을 흐리게 — 목록만 훑어도 상태가 보인다(라디오를 일일이 읽지 않게) */
.pcv-row:has(input[value="hidden"][name$="[internal]"]:checked) .pcv-name { color: #94a3b8; text-decoration: line-through; }

/* 몰 종속 잠금 — 내부 미노출 행의 몰 컨트롤. ⚠disabled 아님(폼 전송 유지) — pointer-events 로만 막는다 */
.pcv-locked { opacity: .4; }
.pcv-locked .pcv-radio, .pcv-locked .pcv-star { pointer-events: none; }

.pcv-star { display: inline-flex; cursor: pointer; }
.pcv-star input { position: absolute; opacity: 0; pointer-events: none; }
.pcv-star span { font-size: 16px; line-height: 1; color: #d1d5db; transition: color .12s, transform .12s; }
.pcv-star:hover span { color: #f59e0b; transform: scale(1.12); }
.pcv-star:has(input:checked) span { color: #f59e0b; }

/* === 자주묻는질문 모달 (데이터 > 상품정보, 2026-08-17) ==========================
 * 탭(질문/히스토리) + 검색 + 아코디언 + (rk2tsw) 인라인 수정·추가. */
/* 모달은 size:fit — 폭은 본문이 정한다(980px, 좁은 화면은 뷰포트에 맞춤) */
.pfq-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0;
            width: min(980px, calc(100vw - 60px)); }
.pfq-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; flex-wrap: wrap; }
.pfq-tabs { display: flex; gap: 6px; }
.pfq-tab { padding: 6px 14px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
           color: #334155; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pfq-tab.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.pfq-search { flex: 0 1 240px; margin-left: auto; padding: 6px 10px; border: 1px solid #cbd5e1;
              border-radius: 7px; font-size: 12px; background: #fff; color: #0f172a; }
.pfq-count { font-size: 11px; color: #64748b; min-width: 56px; }
.pfq-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
/* 본문 폭 상한 — lg 모달 전폭으로 늘어지면 질문 한 줄이 너무 길어 읽기 어렵다 */
.pfq-inner { max-width: 920px; margin: 0 auto; }
.pfq-loading, .pfq-empty { padding: 30px; text-align: center; color: #94a3b8; font-size: 12.5px;
                           border: 1px dashed #e2e8f0; border-radius: 10px; }
.pfq-empty span { font-size: 11.5px; }

/* 출처 노드별 그룹 — 배지 반복 대신 머리글로(대분류 공통 → … → 이 상품 순) */
.pfq-group { margin-bottom: 16px; }
.pfq-group-head { display: flex; align-items: baseline; gap: 7px; padding: 0 2px 6px; }
.pfq-group-name { font-size: 12.5px; font-weight: 800; color: #334155; }

.pfq-items { display: flex; flex-direction: column; gap: 7px; }
.pfq-item { border: 1px solid #e5e7eb; border-radius: 9px; overflow: hidden; background: #fff; }
.pfq-item.open { border-color: #bfdbfe; }
.pfq-q { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; }
.pfq-q:hover { background: #f8fafc; }
.pfq-q-mark { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
              background: #2563eb; color: #fff; border-radius: 6px; font-size: 11px; font-weight: 800; }
.pfq-q-text { font-size: 13px; font-weight: 700; color: #0f172a; }
.pfq-q-arrow { color: #94a3b8; font-size: 11px; transition: transform .12s; }
.pfq-item.open .pfq-q-arrow { transform: rotate(180deg); }
.pfq-actions { margin-left: auto; display: inline-flex; gap: 4px; flex-shrink: 0; }
/* 아이콘 버튼(연필/휴지통) — 라벨은 title 툴팁으로 */
.pfq-act { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
           padding: 0; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
           color: #475569; cursor: pointer; }
.pfq-act:hover { background: #f1f5f9; color: #1d4ed8; border-color: #94a3b8; }
.pfq-act--danger { color: #dc2626; border-color: #fecaca; }
.pfq-act--danger:hover { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }

/* 답변 — Q 배지와 짝인 A 배지 + 본문 + 우측 하단 등록 정보(사용자 요청) */
.pfq-a { display: flex; gap: 8px; padding: 11px 12px 10px; border-top: 1px solid #f1f5f9; background: #f8fafc; }
.pfq-a-mark { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
              background: #10b981; color: #fff; border-radius: 6px; font-size: 11px; font-weight: 800; }
.pfq-a-body { flex: 1; min-width: 0; }
.pfq-a-text { font-size: 12.5px; color: #334155; line-height: 1.7; white-space: pre-line; }
.pfq-a-meta { margin-top: 7px; text-align: right; font-size: 10.5px; color: #94a3b8; }
.pfq-a-meta-sep { margin: 0 4px; color: #cbd5e1; }

.pfq-edit { padding: 11px 12px; border-top: 1px solid #f1f5f9; background: #fffbeb; }
.pfq-warn { margin-bottom: 8px; font-size: 11.5px; color: #b45309; line-height: 1.5; }
.pfq-input { width: 100%; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 7px;
             font-size: 12.5px; background: #fff; color: #0f172a; margin-bottom: 6px; }
.pfq-textarea { width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 7px;
                font-size: 12.5px; background: #fff; color: #0f172a; line-height: 1.6; resize: vertical; }
.pfq-form-btns { margin-top: 7px; display: flex; justify-content: flex-end; gap: 6px; }
.pfq-btn { padding: 6px 14px; background: #fff; border: 1px solid #cbd5e1; border-radius: 7px;
           font-size: 12px; font-weight: 700; color: #475569; cursor: pointer; }
.pfq-btn--primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.pfq-btn--primary:hover { background: #1d4ed8; }

.pfq-add { margin-top: 16px; padding: 13px 14px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; }
.pfq-add-head { font-size: 12.5px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
/* 등록 위치 — 대분류→현재 상품 체인에서 고른다(기본 = 현재 상품) */
.pfq-add-target { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pfq-add-target label { font-size: 11.5px; font-weight: 700; color: #475569; flex-shrink: 0; }
.pfq-select { flex: 0 1 340px; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 7px;
              font-size: 12px; background: #fff; color: #0f172a; }
.pfq-add-target-hint { font-size: 10.5px; color: #94a3b8; }

.pfq-hist { display: flex; flex-direction: column; gap: 8px; }
.pfq-hist-row { padding: 9px 11px; border: 1px solid #e5e7eb; border-radius: 9px; }
.pfq-hist-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pfq-hist-badge { padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.pfq-hist-badge--create { background: #ecfdf5; color: #047857; }
.pfq-hist-badge--update { background: #eff6ff; color: #1d4ed8; }
.pfq-hist-badge--delete { background: #fef2f2; color: #dc2626; }
.pfq-hist-q { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.pfq-hist-node { padding: 1px 7px; background: #f1f5f9; border-radius: 999px; font-size: 10px; font-weight: 700; color: #64748b; }
.pfq-hist-meta { margin-top: 3px; font-size: 11px; color: #94a3b8; }
.pfq-hist-diff { margin-top: 5px; font-size: 11.5px; color: #475569; line-height: 1.7; }
.pfq-hist-diff em { font-style: normal; font-weight: 700; color: #334155; margin-right: 4px; }
.pfq-hist-old { color: #b91c1c; text-decoration: line-through; }
.pfq-hist-new { color: #047857; font-weight: 600; }
.pfq-hist-more { padding: 8px; text-align: center; font-size: 11px; color: #94a3b8; }

/* === 상품세부설정 입력표 — 본문 셀·입력칸 (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-model { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 600; color: #94a3b8; }

/* 인기상품 배지(상품노출 설정) — 상세 제목·전체 나열·비교표 상품 칸 공용 */
.pi-popular { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; margin-left: 2px;
              background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px;
              font-size: 10.5px; font-weight: 700; color: #b45309; vertical-align: 2px; white-space: nowrap; }
/* 펼침 표는 열이 많아 입력칸을 조금 좁게(종전 인라인 값 유지) */
.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; }