/* common_pill_btn.css — 표 헤더 옆 '보조 동작' 알약 버튼 (.mk-pill-btn)
   ────────────────────────────────────────────────────────────────
   표 위 제목줄 오른쪽에 붙어 팝업 하나를 여는 작은 버튼들입니다.
   본문의 주된 동작(수정·저장)이 아니라 "옆에서 대조해 보는" 자리라,
   헤더 버튼(.gf3-action-btn)보다 한 단 낮은 회색 알약으로 둡니다.

   지금 쓰는 곳 (2026-08-05 기준)
     입고        [ERP 대조]
     사용량      [ERP 대조]
     재고실사    [ERP 대조] · [전자신문 대조]
     지고 재고   [출고 요약]

   ※ 왜 한 곳으로 모았나
     같은 값의 규칙이 세 파일에 복사돼 있었습니다 — 공통(.erpct-btn) ·
     재고실사(.f1inv-ledger-btn) · 지고재고(.f1jg-out-btn). 셋이 우연히
     같은 게 아니라 '같아야 하는' 것이었는데, 실제로 한 번 갈라져 입고만
     파란 칩으로 남아 있었습니다(2026-08-05 에 고침). 이번엔 아예 한 벌만
     두어 다음에 모양을 바꿀 때 여기만 고치면 되게 했습니다.

   ※ 아이콘을 같이 쓸 때
     <button class="mk-pill-btn">
       <span class="material-symbols-outlined">fact_check</span>ERP 대조
     </button>
     아이콘은 글자보다 한 톤 옅은 회색입니다 — 글자가 먼저 읽혀야 합니다.

   여백은 여기서 주지 않습니다. 버튼이 놓이는 줄(대개 .header-right 의
   flex gap)이 정하도록 둡니다 — 페이지마다 옆에 오는 것이 달라서입니다.
   ──────────────────────────────────────────────────────────────── */
.mk-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 11px 0 8px;
    border: 1px solid #d1d1d6;
    border-radius: 13px;
    background: #f7f8fa;
    color: #1d1d1f;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.mk-pill-btn:hover { background: #f4f4f8; border-color: #a1a1a8; }

.mk-pill-btn:focus-visible {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
    outline: none;
}

.mk-pill-btn .material-symbols-outlined { font-size: 15px; color: #8e8e93; }