/* 버튼 - 규칙은 claude_common/ui/button.md
   기본(.button) · 주(.is-primary) · 위험(.is-danger, 연하게 .is-light) · 작게(.is-small, 글자만) · 표 안(.is-compact 28px)
   · 폭 전체(.is-block) · 아이콘만(.is-icon) · 보내는 중(.is-loading) · 못 누름([disabled])
   작게 떠 있고 누르면 들어간다. 색·그림자·모서리는 테마 파일(themes/*.css)의 --uk-* 만 쓴다. 줄 버튼(.btn-row)은 table.css */
.button {
  --btn-radius: var(--uk-r-btn); /* 네모·알약은 테마가 정한다 */
  --btn-h: 34px;
  --btn-on: var(--uk-on-strong);              /* 진한 바탕(강조색·빨강) 위 글자 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--btn-h);
  padding: 0 1.05rem;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background: var(--uk-surface);
  box-shadow: var(--uk-up-sm);
  color: var(--uk-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}
.button:hover { color: var(--uk-brand); }
.button:active { box-shadow: var(--uk-down); }
.button:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: 2px; }
.button svg { display: block; flex: none; width: 18px; height: 18px; }
.button[hidden] { display: none !important; } /* .button의 display가 hidden을 이겨서 숨긴 [보내기]가 남았다(2026-09-24) */

/* 크기 - 작은 버튼은 글자만 한 단계 줄이고 높이는 그대로 */
.button.is-small { font-size: 13px; padding: 0 .6rem; }
.button.is-compact { --btn-h: 28px; padding: 0 .7rem; font-size: 13px; }   /* 표 안 */
.button.is-block { display: flex; width: 100%; }
.button.is-icon { width: var(--btn-h); padding: 0; border-radius: 50%; color: var(--uk-muted); }
.button.is-icon:hover { color: var(--uk-fg); }

/* 주 버튼 - 기본 동작(저장·등록·검색·＋ 추가) */
.button.is-primary { background: var(--uk-brand); color: var(--btn-on); }
.button.is-primary:hover { background: var(--uk-brand-dark); color: var(--btn-on); }

/* 위험 버튼 - 삭제는 늘 빨강(테마와 상관없이) */
.button.is-danger { background: var(--uk-danger); color: var(--btn-on); }
.button.is-danger:hover { background: var(--uk-danger-dark); color: var(--btn-on); }
.button.is-danger.is-light { background: var(--uk-danger-light); color: var(--uk-danger); }
.button.is-danger.is-light:hover { color: var(--uk-danger-dark); }

/* 드물게 - 색의 뜻이 맞을 때만 */
.button.is-success { background: var(--uk-ok); color: var(--btn-on); }
.button.is-warning { --btn-warn: var(--uk-warn); background: var(--btn-warn); color: var(--btn-on); } 

/* 못 누름 - 그림자 없는 들어간 면 + 흐린 글자 */
.button[disabled],
.button.is-disabled {
  background: var(--uk-sunk);
  border-color: transparent;
  box-shadow: none;
  color: var(--uk-muted);
  opacity: .7;
  cursor: not-allowed;
  pointer-events: none;
}

/* 보내는 중 - 누른 버튼에 붙인다. 들어간 면 + 도는 표시, 잠겨도 제 색은 지킨다(무엇을 눌렀는지 보이게) */
.button.is-loading,
.button.is-loading[disabled] { background: var(--uk-surface); color: var(--uk-fg); box-shadow: var(--uk-down); opacity: 1; pointer-events: none; cursor: progress; }
.button.is-primary.is-loading,
.button.is-primary.is-loading[disabled] { background: var(--uk-brand-dark); color: var(--btn-on); }
.button.is-danger.is-loading,
.button.is-danger.is-loading[disabled] { background: var(--uk-danger-dark); color: var(--btn-on); }
.button.is-loading::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin .8s linear infinite;
}
@keyframes button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .button.is-loading::before { animation-duration: 2.4s; } }