/* =========================================================
   table.css - 표 / 정렬 / 관리 셀 / 도구줄 / 페이징 / 세부 규칙 (DESIGN.md 9.3, 9.4, 9.4-c, 9.5, 9.8)
   ========================================================= */
/* --- 표 래퍼 / 머리 / 본문 ---
   table/th/td 요소 규칙은 반드시 .table-wrap 안에서만 적용한다(전역으로 두면 작성 페이지의 th/td 폼 테이블까지 가운데 정렬·여백이 바뀜) */
.table-wrap { border: 1px solid var(--line); border-bottom: 0px; border-radius: var(--r-card); overflow: hidden; background-color: var(--surface); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrap thead tr { background-color: var(--surface-2); }
.table-wrap th {
    text-align: center; font-weight: 600; color: var(--sub); padding: 12px 16px;
    border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 13px; letter-spacing: 0;
}
.table-wrap td {
    text-align: center; padding: 12px 0px; border-bottom: 1px solid var(--line);
    color: var(--ink); vertical-align: middle; font-size: 14px;
}
.table-wrap tbody tr:hover > td { background-color: var(--surface-2); }
.table-wrap .pr-child-row:hover > td { background-color: var(--track); }

/* --- 정렬 헤더 --- */
/* 정렬 가능한 헤더(요청일자·상태) */
th.pr-sort { cursor: pointer; user-select: none; }
th.pr-sort:hover { color: var(--accent-ink); }
/* 위/아래 화살표를 세로로 겹쳐 표시하고, 현재 정렬 방향의 화살표만 파란색으로 강조 */
.pr-sort-ico { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; margin-left: 4px; font-size: 7px; vertical-align: middle; color: var(--disabled); }
.pr-sort-ico .up, .pr-sort-ico .down { display: block; }
.pr-sort-ico.asc .up { color: var(--accent); }
.pr-sort-ico.desc .down { color: var(--accent); }

/* --- 셀 타입 --- */
/* 요청번호(pay_request_id) — 요청자↔결제자 소통용, 읽기 쉬운 모노스페이스 */
.pr-id { font-family: "Consolas","Menlo",monospace; font-weight: 700; color: var(--sub); }

/* 아이디 셀: 가입/로그인 채널 아이콘 + 아이디 — 회원 ID 표준 표기 (일반회원 목록에서 승격, 2026-09-03)
   sns_type 값 매핑은 테이블마다 다르므로 JSP 분기에서 하고, 모양은 여기 클래스만 쓴다 */
.cell-id { display: inline-flex; align-items: center; gap: 6px; }
.cell-muted { color: var(--muted); }
.sns-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 800; font-style: normal; line-height: 1; letter-spacing: 0;
}
.sns-ico svg { width: 11px; height: 11px; }
.sns-basic { background: var(--line); color: var(--muted); }   /* 일반(중달이): 회색 원 + 사람 */
.sns-naver { background: #03c75a; color: #fff; }      /* 네이버 브랜드 그린 */
.sns-kakao { background: #fee500; color: #191919; }   /* 카카오 브랜드 옐로 */

.pr-amount { font-weight: 600; color: var(--ink); }

/* 추가 파이(자식) 행: 부모 아래 들여쓰기 */
.pr-child-row > td { background-color: var(--surface-2); }
.pr-child-mark { color: var(--faint2); margin-right: 4px; font-weight: 700; }

/* 차수 = 견적서 열기 링크. 클릭하면 견적서가 열린다는 걸 알 수 있게 링크처럼 표시 */
.pr-estimate-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--accent-ink); font-weight: 600; cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.pr-estimate-link:hover { color: var(--accent); }
.pr-estimate-link svg { width: 13px; height: 13px; flex: none; }

/* --- 선택 모드 체크박스 열 --- */
/* 체크박스 열: 평소엔 숨기고, 선택 모드(.pr-selecting)에서만 노출 */
.pr-check-col { display: none; }
.pr-selecting .pr-check-col { display: table-cell; }
/* 체크박스를 block 으로: 셀 안에 라인박스가 생기지 않아 열이 나타나도 행 높이가(소수점 포함) 변하지 않음 */
.pr-check-col input[type="checkbox"] { display: block; margin: 0 auto; }

/* --- 관리 셀 --- */
/* 관리 셀: 텍스트 버튼 한 줄 배치 */
.pr-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
/* 해당 건에 쓸 수 없는 관리 버튼: 자리는 유지하되 비활성 표시 */
.pr-actions button:disabled { opacity: .4; cursor: not-allowed; }
.pr-actions button:disabled:hover { background-color: var(--surface); border-color: var(--line); }

/* --- 도구줄(개수 드롭다운 + 액션) — 2026-09-16 테이블 하단 → 상단(검색바와 테이블 사이)으로 전 페이지 이동 --- */
.list-actions { display: flex; justify-content: space-between; align-items: center; margin: 14px 0; }
.list-actions-right { display: inline-flex; align-items: center; gap: 8px; }
.list-actions-left { display: inline-flex; align-items: center; gap: 10px; }
/* 도구줄 왼쪽 건수 표기: "총 N건" (13px muted, 숫자만 fg/600) */
.list-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.list-count b { color: var(--ink); font-weight: 600; }

/* --- 페이징 --- */
.table-footerB { display: flex; justify-content: center; align-items: center; padding-top: 16px; flex-wrap: wrap; row-gap: 12px; }
/* 파이요청 목록 페이징 */
.pr-pagination { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pr-pagination a,
.pr-pagination .pr-pg-cur,
.pr-pagination .pr-pg-disabled {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 35px; height: 35px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background-color: var(--surface);
    color: var(--sub); font-size: 14px; line-height: 1;
    text-decoration: none; cursor: pointer; user-select: none;
    transition: background-color .12s, border-color .12s, color .12s;
}
.pr-pagination a:hover { background-color: var(--track); border-color: var(--faint2); color: var(--ink); }
.pr-pagination .pr-pg-cur { background-color: var(--accent); border-color: var(--accent); color: #ffffff; cursor: default; }
.pr-pagination .pr-pg-disabled { color: var(--disabled); background-color: var(--page); cursor: default; }
.pr-pagination .pr-pg-arrow { font-size: 16px; }

/* --- 세부 규칙 (DESIGN.md 9.4-c) --- */
th.num, td.num { text-align: right; padding-right: 16px; white-space: nowrap; }
th.txt, td.txt { text-align: left; padding-left: 16px; }
td.ellipsis { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td .cell-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--muted); }
.table-wrap.scroll-x { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--line-mid) transparent; }
.table-wrap.scroll-x table { min-width: 1200px; }
.table-wrap.scroll-y { max-height: calc(100vh - 320px); overflow-y: auto; }
.table-wrap.scroll-y thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
th.sticky-col, td.sticky-col { position: sticky; left: 0; z-index: 1; background: inherit; border-right: 1px solid var(--line); }
th.sticky-col-right, td.sticky-col-right { position: sticky; right: 0; z-index: 1; background: inherit; border-left: 1px solid var(--line); }
.table-wrap tbody td.sticky-col, .table-wrap tbody td.sticky-col-right { background: var(--surface); }
tfoot tr.total td { background: var(--surface-2); font-weight: 700; color: var(--ink); border-top: 2px solid var(--line); }
.table-wrap tbody tr.warn > td { background: var(--adm-warning-bg); }
.table-wrap tbody tr.danger > td { background: var(--adm-danger-bg); color: var(--muted); }
.table-wrap tbody tr.selected > td { background: var(--tint-blue); }
/* 흐린 행(취소·비활성 건): 배경을 인라인으로 칠하지 말고 이 클래스를 쓸 것 — 인라인 하드코딩은 다크에서 흰 띠가 된다 */
.table-wrap tbody tr.dim > td { background: var(--surface-2); color: var(--muted); }
.table-wrap tbody tr.clickable { cursor: pointer; }
.col-hidden { display: none !important; }
.table-status-row td { padding: 24px 0; color: var(--muted); text-align: center; }
.table-status-row .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: tblSpin 1s linear infinite; vertical-align: middle; margin-right: 8px; }
@keyframes tblSpin { to { transform: rotate(360deg); } }
.table-status-row.error td { color: var(--danger); }

/* --- 거래처/회원명 셀 공통 (2026-09-11): 회사명(없으면 이름)을 첫 줄에 굵게, 이름을 아랫줄에 —
   매니저가 회사명으로 고객을 관리하므로. 구매대행PRO·LITE·배송대행·단가조사·결제내역·예치금·회원 목록이 같은 마크업을 쓴다 --- */
td .cust-name { display: block; font-size: 15px; font-weight: 700; line-height: 20px; color: var(--ink); letter-spacing: -.01em; }
td .cell-sub.cust-sub { font-size: 13px; line-height: 18px; color: var(--sub); }