/* =========================================================
   badge.css - 상태/구분 뱃지 / 버튼 위 개수 배지 (DESIGN.md 9.6)
   ========================================================= */
.badge {
    /* 2026-09-08: 13px/5x10 확대안은 일부 표에서 셀 높이가 깨져 12px/4x8 로 원복 */
    display: inline-block; font-size: 12px; line-height: 1.2; font-weight: 600;
    border-radius: var(--r-badge); padding: 4px 8px; border: 1px solid transparent; white-space: nowrap;
}
.badge-green  { background-color: var(--badge-green-bg); color: var(--badge-green-fg); border-color: var(--badge-green-line); }
.badge-orange { background-color: var(--badge-orange-bg); color: var(--badge-orange-fg); border-color: var(--badge-orange-line); }
.badge-red    { background-color: var(--badge-red-bg); color: var(--badge-red-fg); border-color: var(--badge-red-line); font-weight: 700; }
.badge-blue   { background-color: var(--badge-blue-bg); color: var(--badge-blue-fg); border-color: var(--badge-blue-line); }
.badge-gray   { background-color: var(--badge-gray-bg); color: var(--badge-gray-fg); border-color: var(--badge-gray-line); }
.badge-purple { background-color: var(--badge-purple-bg); color: var(--badge-purple-fg); border-color: var(--badge-purple-line); }
.badge-teal   { background-color: var(--badge-green-bg); color: var(--badge-green-fg); border-color: var(--badge-green-line); }

/* --- 버튼 위 개수 배지 --- */
/* 코멘트 뱃지: 개수를 버튼 라벨에 넣으면 자릿수(1자리/2자리)에 따라 버튼 폭이 달라져 행마다 관리 버튼
   정렬이 어긋난다. 그래서 버튼 우상단에 absolute 로 겹쳐 띄워 버튼 폭을 개수와 무관하게 고정한다.
   안읽음 있음 → 빨강 'N' 말풍선 / 다 읽음 → 회색 총 개수 / 0건 → 표시 없음.
   열람하면 JS(syncCommentBadge)가 같은 자리에서 회색 개수로 바꾼다. */
.pr-comment-btn { position: relative; overflow: visible; }

.pr-comment-badge {
    position: absolute; top: -7px; right: -7px;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    background: var(--faint2); color: #ffffff; font-size: 10px; font-weight: 800; line-height: 16px;
    text-align: center; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    z-index: 1;   /* 버튼 밖으로 삐져나온 부분이 뒤에 오는 형제 버튼에 가려지지 않도록 */
}
.pr-comment-badge.unread { background: var(--danger); border-radius: 8px 8px 8px 0; }
.pr-comment-badge.unread::after {
    content: ''; position: absolute; left: 0; bottom: -4px;
    border-width: 4px 5px 0 0; border-style: solid;
    border-color: var(--danger) transparent transparent transparent;
}
/* 코멘트 버튼: 답변대기(마지막 코멘트가 상대측 글, 다 읽음) — 주황 개수. 미확인은 .unread(빨강 N), 완료는 기본 회색 (2026-09-15) */
.pr-comment-badge.wait { background: var(--adm-warning); }
/* 주문내역 버튼 우상단: 미처리 수령확인 요청 수(코멘트 뱃지와 같은 자리).
   파랑(2026-09-16 주황→파랑): 결제대기 뱃지가 주황이 되면서 색이 겹쳐, "확인해 주세요" 알림 성격에 맞는 진행/정보 톤으로 구분.
   행 색 언어 — 빨강=미확인, 주황=처리 대기(결제대기·답변대기), 파랑=수령확인 요청, 초록=완료 */
.pr-comment-badge.pr-receive-badge { background: var(--accent); }
/* 주문내역 버튼 우상단: 이 요청의 주문 중 1688 결제대기인 수. 수령확인 뱃지와 같은 자리를 쓰되 결제대기가 우선 —
   결제대기가 있으면 버튼에 .has-unpaid 가 붙어 수령확인 뱃지를 숨기고, 0이 되면 수령확인 뱃지가 다시 보인다 (2026-09-15).
   색은 코멘트 답변대기와 같은 주황(2026-09-16): 빨강=미확인(새 것), 주황=처리 대기 라는 행 전체 색 언어에 맞춤.
   수령확인 뱃지와 색이 같지만 같은 자리라 동시에 보이지 않고 툴팁으로 구분된다. */
.pr-comment-badge.pr-unpaid-badge { background: var(--adm-warning); }
.pr-comment-btn.has-unpaid .pr-receive-badge { display: none; }