/* ============================================================
   상태 표시 (features/ui-state) — 「자료 없음·수집 대기·실패」를 한 모양으로 (2026-09-04 신설)

   ⛔ 호스트 클래스에 기대지 않는다(자족 모듈). 색은 **토큰이 있으면 토큰**, 없으면 폴백.
   ⛔ 전역 button{width:100%}(호스트 app.css) 같은 규칙에 먹히지 않게 .ust-btn이 width를 다시 든다
      — 그걸 빠뜨려 닫기 버튼이 머리 전체를 덮은 사고가 있었다(holding-watch v11).
   ============================================================ */
.ust {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 14px; margin: 0;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, #e4e7ec);
  background: var(--bg-sunken, #f7f9fa);
  color: var(--text-primary, #344054);
  font-size: 12.5px; line-height: 1.5;
}
.ust-ico { flex: none; font-size: 15px; line-height: 1.25; opacity: .9; }
.ust-b { min-width: 0; flex: 1 1 auto; }
.ust-t { font-weight: 700; }
.ust-m { margin-top: 2px; color: var(--text-secondary, #667085); overflow-wrap: anywhere; }
.ust-x { margin-top: 3px; font-size: 11px; color: var(--text-secondary, #98a2b3); }
.ust-a { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.ust-btn {
  width: auto; margin: 0;                       /* ⛔ 호스트 전역 button 규칙을 되돌린다 */
  padding: 3px 10px; border-radius: 5px;
  border: 1px solid var(--border-default, #d0d5dd);
  background: var(--bg-surface, #fff); color: var(--text-primary, #344054);
  font: inherit; font-size: 11.5px; cursor: pointer;
}
.ust-btn:hover { background: var(--bg-sunken, #f2f4f7); }
.ust-why { border-style: dashed; }

/* 색조 — 왼쪽 띠 하나로만 구분한다. 배경까지 물들이면 목록 안에 놓였을 때 시끄럽다.
   ⚠ 「없음(정상)」을 빨강으로 칠하지 않는다 — 빨강이 상시가 되면 진짜 고장을 못 본다
     (admin_health.grade()의 경보 피로 주석과 같은 근거). */
.ust-none { border-left: 3px solid var(--border-default, #d0d5dd); }
.ust-wait { border-left: 3px solid var(--status-info, #1b4fb0); }
.ust-warn { border-left: 3px solid var(--status-warn, #b45309); }
.ust-bad  { border-left: 3px solid var(--status-bad, #b42318); }
.ust-warn .ust-t { color: var(--status-warn, #b45309); }
.ust-bad  .ust-t { color: var(--status-bad, #b42318); }

/* 좁은 자리(목록 행 안·작은 카드)에 넣을 때 — 호스트가 .ust-sm을 함께 준다 */
.ust-sm { padding: 8px 10px; font-size: 12px; }
.ust-sm .ust-ico { font-size: 13px; }

@media (prefers-color-scheme: dark) {
  .ust { background: var(--bg-sunken, #161b26); color: var(--text-primary, #e7ebf0);
         border-color: var(--border-subtle, #2a3242); }
  .ust-btn { background: var(--bg-surface, #232a38); color: var(--text-primary, #e7ebf0);
             border-color: var(--border-default, #384252); }
  .ust-btn:hover { background: var(--bg-sunken, #2b3444); }
}