/* 데이터 상태 칩 (data-state.js) — 값 없음을 상태로 구분해 인라인 표시 */
.data-state{
  display:inline-block;
  padding:1px 6px;
  border:1px solid #dbe2e0;
  border-radius:4px;
  background:#f3f6f5;
  color:#7c8b88;
  font-size:.82em;
  font-weight:600;
  line-height:1.5;
  white-space:nowrap;
  cursor:help;
  vertical-align:baseline;
}
.data-state:hover{border-color:#b9c6c3;background:#eef2f1}
.data-state:focus-visible{outline:2px solid #9fc7bb;outline-offset:1px}

/* 자료 미등록 / 해당 없음 : 중립 회색 */
.data-state--unregistered,
.data-state--na{color:#7c8b88}

/* 갱신 필요 : 주의(앰버) */
.data-state--stale{
  border-color:#e7d4b0;
  background:#fbf3e3;
  color:#9a7526;
}

/* 불러오는 중 : 옅은 회색 + 점멸 */
.data-state--loading{
  color:#8b9895;
  animation:data-state-pulse 1.2s ease-in-out infinite;
}
@keyframes data-state-pulse{50%{opacity:.5}}

/* 불러오기 실패 : 경고(레드) */
.data-state--failed{
  border-color:#e9c7bf;
  background:#fdeee9;
  color:#a5503a;
}

@media (prefers-reduced-motion:reduce){
  .data-state--loading{animation:none}
}