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