/* 빈 상태 - 규칙은 claude_common/ui/empty-state.md, 그리기 도우미는 empty-state.js
   점선 상자 + 돋보기 + 가운데 글(기준 이미지 EMPTY STATE, 2026-09-26). 안의 할 일은 알약 버튼. 테두리가 있는 칸 안은 .is-plain */
.empty-state {
  list-style: none;
  margin: 1rem; padding: 2rem 1rem;
  border: 2px dashed var(--uk-border); border-radius: var(--uk-r-sm);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  text-align: center; color: var(--uk-muted); word-break: keep-all;
}
.empty-state::before {
  content: ""; width: 48px; height: 48px; background: var(--uk-border);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.empty-state.is-loading::before { display: none; } /* 불러오는 중은 글만 - 다 받으면 목록으로 바뀐다 */
.empty-state.is-plain { margin: 0; border: 0; padding: 1.6rem 1rem; }
.empty-state-title, .empty-state-sub { margin: 0; max-width: 34rem; white-space: pre-line; }
.empty-state-title { font-size: 15px; font-weight: 600; line-height: 1.6; }
.empty-state-sub { font-size: 13px; font-weight: 400; line-height: 1.6; }
.empty-state-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: .2rem; }
.empty-state a, .empty-state-btn {
  display: inline-flex; align-items: center; height: 30px; padding: 0 1rem;
  border: 0; border-radius: var(--uk-r-pill); background: var(--uk-brand); color: var(--uk-on-strong);
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
  box-shadow: var(--uk-up-sm);
}
.empty-state a:hover, .empty-state-btn:hover { background: var(--uk-brand-dark); }
.empty-state a:focus-visible, .empty-state-btn:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: 2px; }
@media (max-width: 767px) { .empty-state { margin: .75rem 0; padding: 1.6rem .75rem; } }