/* 브라우저 탭 모양 — 화면 어디서든 같은 탭을 쓰기 위해 한 군데로 모았다.
 *
 * 왜 한 파일로 모았나 — 처음에는 관리자 화면 안에만 적어 두었다. 그러면 센터·작업자 화면에서
 * 같은 탭을 쓸 수 없고, 옮겨 적으면 두 벌이 갈려 「관리자 탭과 센터 탭이 다르게 보이는」 일이
 * 생긴다. 탭 모양은 한 군데에만 있어야 한다.
 *
 * 쓰는 법 — 감싸는 데 .tabs, 단추마다 .tab-btn + aria-selected="true|false".
 *   <div class="tabs" role="tablist" aria-label="…">
 *     <button class="tab-btn" role="tab" aria-selected="true">업체 <span class="tab-n">4</span></button>
 *   </div>
 * 건수는 .tab-n 으로 단추 안에 적는다 — 열어보지 않아도 어느 쪽에 일이 있는지 보인다.
 */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px;
  border-bottom: 1px solid var(--mw-line-strong);
}
.tab-btn {
  padding: 0 16px; min-height: 40px; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; border-bottom-color: transparent;
  border-radius: 10px 10px 0 0;              /* 위만 둥글고 아래는 각진다 — 종이 탭처럼 */
  background: transparent; color: var(--mw-muted);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;                      /* 작업자·센터 화면의 button 기본값을 덮는다 */
}
.tab-btn:hover { background: var(--mw-surface-sunken); color: var(--mw-ink); }
/* 고른 탭 — 바탕을 카드와 같은 색으로 두고 아래 테두리를 지운다. 그래야 밑줄이 그 자리에서
   끊겨 아래 내용과 한 덩어리로 보인다. 위쪽에 굵은 선을 얹어 「여기가 열린 장」임을 못 박는다. */
.tab-btn[aria-selected="true"] {
  background: var(--mw-surface); color: var(--mw-accent-ink);
  border-color: var(--mw-line-strong); border-bottom-color: var(--mw-surface);
  box-shadow: inset 0 2px 0 0 var(--mw-accent);
}
/* 키보드로 옮겨 다닐 때 어디 있는지 보여야 한다 — 탭은 마우스 없이도 쓰는 자리다. */
.tab-btn:focus-visible { outline: 2px solid var(--mw-accent); outline-offset: -2px; }
/* 건수·알림 딱지 */
.tab-btn .tab-n {
  font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px;
  background: var(--mw-neutral-soft); color: var(--mw-muted); font-variant-numeric: tabular-nums;
}
.tab-btn[aria-selected="true"] .tab-n { background: var(--mw-accent-soft); color: var(--mw-accent-ink); }
/* 기다리는 일이 있으면 탭 위에서 알린다 — 장을 열어보기 전에 알아야 한다. */
.tab-btn.has-wait .tab-n { background: var(--mw-warn-soft); color: var(--mw-warn-ink); }
/* 탭이 두 줄로 접히면 -1px 이음새가 윗줄에도 걸려 줄이 어긋나 보인다. 그때는 이음새를 버리고
   밑줄도 지운다 — 좁은 화면에서는 「이어져 보이기」보다 「안 어긋나 보이기」가 낫다. */
@media (max-width: 520px) {
  .tabs { border-bottom: none; gap: 6px; }
  .tab-btn { margin-bottom: 0; border-radius: 10px; border-color: var(--mw-line); }
  .tab-btn[aria-selected="true"] { border-color: var(--mw-line-strong); border-bottom-color: var(--mw-line-strong); }
}
/* 탭이 많아 한 줄을 넘으면 옆으로 밀어 볼 수 있게 한다(작업자 화면처럼 폭이 좁은 곳).
   .tabs.scroll 을 함께 붙여 쓴다 — 접어 내리는 것보다 옆으로 미는 쪽이 나은 자리가 있다. */
.tabs.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.tabs.scroll .tab-btn { flex: 0 0 auto; }