/* 매칭률 딱지(dream-fit-badge.js) — 매칭률 옆에 뜨는 작은 팝오버. 색은 DESIGN.md 토큰만 쓴다.
   호박색은 쓰지 않는다(DESIGN.md: 주의는 먹색과 문구로) — '검토 필요'는 먹색 점·먹색 면으로 말한다.
   다섯 상태는 색만이 아니라 앞머리 기호(✓ · ● · ? · ✕ · +)와 문구로도 갈린다. */
[data-fit-state]:focus-visible { outline: 3px solid var(--dv-focus, #028c6a); outline-offset: 3px; }
/* 매칭률은 딱지를 여는 누름 자리인데(키보드·손가락) 보이는 알약 높이가 31~37px 이라 44px 손가락 자리에 못 미쳤다
   (2026-10-01 화면 점검: 지원사업 카드 61×36, 입찰 카드 120×31, 입찰 상세 157×37). 보이는 크기·자리는 그대로 두고,
   투명한 ::before 를 가운데 겹쳐 누르는 자리만 가로세로 44px 이상으로 넓힌다.
   ::before 는 매칭률 자신을 기준으로 재야 한다 — 화면 CSS 가 겹침을 피하려고 position:static 을 못 박은 매칭률이 있어
   (지원사업 카드·상세, 입찰 카드) 기준이 카드로 넘어가면 투명 자리가 카드 전체를 덮는다. 그래서 relative 를 important 로 둔다.
   static 일 때 무시되던 위치 값(입찰 카드는 .program-card > .pill 의 top·right 15px)이 relative 에서 살아나 알약이 밀리므로 inset 은 비운다. */
[data-fit-state] { position: relative !important; inset: auto !important; }
[data-fit-state]::before {
  content: ""; position: absolute;
  top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px));
  left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px));
}

.dv-fit-pop {
  position: fixed; left: 0; top: 0; z-index: calc(var(--dv-z-overlay, 90) + 5);
  display: grid; justify-items: start; gap: 6px; box-sizing: border-box;
  width: max-content; max-width: min(320px, calc(100vw - 16px)); padding: 8px 10px;
  border: 1px solid var(--dv-border-strong, #708079); border-radius: var(--dv-radius, 8px);
  background: var(--dv-bg-surface, #ffffff); color: var(--dv-text, #283530);
  box-shadow: var(--dv-shadow-overlay, 0 18px 48px rgba(23, 33, 29, 0.18));
  font: 500 var(--dv-text-sm, 13px)/1.5 var(--dv-font-ui, system-ui, sans-serif);
  word-break: keep-all; overflow-wrap: anywhere; text-align: left;
  pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(-3px);
  transition: opacity .12s ease-out, transform .12s ease-out, visibility 0s linear .12s;
}
.dv-fit-pop[data-side="above"] { transform: translateY(3px); }
.dv-fit-pop[data-open] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.dv-fit-reason[hidden] { display: none; }

.dv-fit-chip {
  display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; min-height: 24px; padding: 2px 9px;
  border: 1px solid transparent; border-radius: var(--dv-radius-pill, 999px);
  font-size: var(--dv-text-xs, 12px); font-weight: 700; line-height: 1.35; white-space: nowrap;
}
.dv-fit-chip b { font-weight: inherit; }
.dv-fit-chip i { font-style: normal; font-weight: 900; }
.dv-fit-chip[data-state="eligible"] {
  border-color: var(--dv-primary, #0d3021); background: var(--dv-primary, #0d3021); color: var(--dv-on-primary, #ffffff);
}
.dv-fit-chip[data-state="eligible"] i::before { content: "✓"; }
.dv-fit-chip[data-state="eligible-review"] {
  border-color: var(--dv-primary, #0d3021); background: var(--dv-bg-surface, #ffffff); color: var(--dv-primary, #0d3021);
}
.dv-fit-chip[data-state="eligible-review"] i { width: 7px; height: 7px; border-radius: 50%; background: var(--dv-warning-accent, #484f4c); }
.dv-fit-chip[data-state="ineligible-review"] {
  border-color: var(--dv-warning-accent, #484f4c); background: var(--dv-warning-surface, #f0f3f2); color: var(--dv-warning-text, #303734);
}
.dv-fit-chip[data-state="ineligible-review"] i::before { content: "?"; }
.dv-fit-chip[data-state="ineligible"] {
  border-color: var(--dv-danger-border, #f2b8b1); background: var(--dv-danger-surface, #fef0ee); color: var(--dv-danger, #b42318);
}
.dv-fit-chip[data-state="ineligible"] i::before { content: "✕"; }
.dv-fit-chip[data-state="consortium"] {
  border: 1px dashed var(--dv-border-strong, #708079); background: var(--dv-bg-surface, #ffffff); color: var(--dv-text-strong, #0e1914);
}
.dv-fit-chip[data-state="consortium"] i::before { content: "+"; }

@media (prefers-reduced-motion: reduce) {
  .dv-fit-pop, .dv-fit-pop[data-side="above"] { transform: none; transition: none; }
}