/* ============================================================
 * scm-stats-bar — stats bar (좌측 카운트/액션 + 우측 toolbar)
 * ------------------------------------------------------------
 * 데이터 리스트 페이지에서 filter-bar 아래 sticky 위치.
 * 좌측: 카운트들 + mini-actions
 * 우측: timestamp + download + pager + pgsize
 *
 * Marker:
 *   <div class="scm-stats-bar">
 *     <div class="scm-stats-bar__left">
 *       <div class="scm-stats-bar__counts">
 *         <span class="scm-stat scm-stat--all">...</span>
 *         <span class="scm-stat-divider"></span>
 *         ...
 *       </div>
 *       <div class="scm-stats-bar__mini-actions">
 *         <button class="scm-mini-action">...</button>
 *       </div>
 *     </div>
 *     <div class="scm-stats-bar__right">
 *       <span class="scm-stats-bar__ts">25.10.24 12:00 업데이트</span>
 *       <button class="scm-download-btn">...</button>
 *       <span class="scm-stats-bar__v-divider"></span>
 *       <span class="scm-pager">...</span>
 *       <span class="scm-pgsize-wrap">...</span>
 *     </div>
 *   </div>
 *
 * Sticky:
 *   기본 non-sticky. 페이지에서 .scm-stats-bar--sticky 추가 시 sticky.
 * ============================================================ */

.scm-stats-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px 28px 10px 30px;   /* 하단 padding 10px — 테이블과의 갭을 stats-bar 본인의 padding 으로 흡수 (스크롤 시 데이터 비침 방지) */
  flex-wrap: wrap;
  background: #fff;
  margin: 0 -28px;             /* 부모 padding 반대로 빼서 풀폭 sticky */
}

/* Sticky variant — filter-bar 아래에 sticky */
.scm-stats-bar--sticky {
  position: sticky;
  top: var(--scm-sticky-stats, calc(var(--scm-sticky-gnb, 64px) + 76px));
  z-index: 11;
}

/* Left section */
.scm-stats-bar__left {
  flex: 1;
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.scm-stats-bar__counts-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.scm-stats-bar__counts {
  display: flex;
  align-items: center;
  gap: 0;
}

.scm-stats-bar__mini-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Right section */
.scm-stats-bar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.scm-stats-bar__ts {
  color: #8A8A8A;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.4px;
  text-align: right;
}

.scm-stats-bar__v-divider {
  width: 1px;
  height: 16px;
  background: #EBEBEB;
  flex-shrink: 0;
}