/* 헤더 요약 배지 (2026-08-14) — DB·실적·후기·사은품 요약 그룹의 공용 골격.
 *
 * ⭐두 가지 축소 규칙이 함께 동작한다:
 *   ① 0값 접기      — 값이 0인 항목은 숨기고, 그룹 전체가 0이면 그룹째 숨긴다(JS 가 폴링 후 재계산)
 *   ② 실제 폭 접기  — 남는 폭을 실측해 우선순위 낮은 그룹부터 「⋯ N」 칩으로 접는다
 *      (종전의 뷰포트 px 미디어쿼리 4단계를 대체 — 회사명 길이·개발자 배지·근태 버튼 유무에 따라
 *       같은 화면폭에서도 실제 여유가 달라 px 임계값으로는 누군가 항상 잘리거나 겹쳤다)
 */

.hs-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  position: relative;
}

/* 요약 그룹 1개 (기존 .ordars-gift-summary 시각 규격 유지) */
.hs-group {
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  white-space: nowrap;
  user-select: none;
  display: inline-flex;
  /* ⚠줄어들면 안 된다 — 폭 계산이 «원래 필요한 폭»을 재야 하는데 flex 가 눌러 버리면
     항상 "들어간다"고 판정해 접히지 않는다(그리고 글자가 잘린다). */
  flex-shrink: 0;
}

/* 그룹 접두 라벨 (2026-08-14) — 축 이름을 그룹 앞에 «한 번만» 말한다.
   종전엔 항목마다 축 이름이 반복됐다(이번달실적·오늘실적). ⋯ 드롭다운에서 그룹을 구분하는 이름이기도 하다. */
.hs-group-label {
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}

/* 항목 = 구분자 + 링크. 숨길 때 구분자가 함께 사라지도록 한 덩어리로 묶는다. */
.hs-item { display: inline-flex; align-items: center; gap: 7px; }
.hs-item-sep { color: #d1d5db; }

/* 폴링이 «이 요약은 이제 대상 아님»으로 판정한 그룹 — 폭 계산에서도 제외된다 */
.hs-group.hs-off { display: none !important; }

/* 「⋯ N」 칩 — 접힌 그룹 수 */
.hs-more {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.hs-more:hover { background: #e2e8f0; }
.hs-more-count {
  background: #64748b;
  color: white;
  border-radius: 7px;
  padding: 0 5px;
  font-size: 10px;
}

/* 접힌 그룹을 펼쳐 보는 드롭다운 — 헤더 회사 선택 드롭다운과 같은 규격(z-index 100) */
.hs-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
  padding: 8px;
  min-width: 190px;
}
.hs-panel .hs-group {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  background: transparent;
  border: none;
  padding: 4px 2px;
}
.hs-panel .hs-group + .hs-group { border-top: 1px solid #f1f5f9; margin-top: 4px; padding-top: 6px; }
.hs-panel .hs-group-label { padding: 0 6px 2px; color: #64748b; }
/* 패널 안에서는 항목을 한 줄씩 — 구분자는 숨기고 라벨↔값을 양끝 정렬 */
.hs-panel .hs-item { display: flex; justify-content: space-between; gap: 14px; padding: 3px 6px; border-radius: 6px; }
.hs-panel .hs-item:hover { background: #f8fafc; }
.hs-panel .hs-item-sep { display: none; }
.hs-panel .hs-item > a { flex: 1; justify-content: space-between; }

/* 모바일 — 요약 전체 미노출 (기존 동작 유지) */
@media (max-width: 900px) {
  .hs-wrap { display: none !important; }
}