/* 돌림표(불러오는 중) 한 벌 - 규칙은 claude_common/ui/design-system.md "돌림표", React는 components/Spinner.tsx (2026-10-23)
   곳마다 22·36·12px, 선 2·3px로 따로 그리던 것을 하나로. 크기 단계만 고른다:
   기본 22px·선 2px = 본문·칸 자리 "여는 중"(편집기 여는 틀·보기 앱·가져오기 진행 - 같은 '여는 중'은 같은 크기)
   .is-sm 13px·선 2px = 줄 안·글자 옆(트리 줄·띠 안) · .is-lg 36px·선 3px = 화면 가운데 혼자 크게 보여야 할 때만 */
.spinner {
  --spin-size: 22px; --spin-line: 2px;
  display: inline-block; flex: none; box-sizing: border-box; width: var(--spin-size); height: var(--spin-size);
  border: var(--spin-line) solid var(--uk-border); border-top-color: var(--uk-brand); border-radius: 50%;
  animation: uk-spin .7s linear infinite; vertical-align: middle;
}
.spinner.is-sm { --spin-size: 13px; --spin-line: 2px; }
.spinner.is-lg { --spin-size: 36px; --spin-line: 3px; }
/* 진한 바탕(채운 단추) 위 - 색만 바꾼다(크기 단계는 그대로). 멈춘 모양 = .is-still */
.spinner.is-on-strong { border-color: rgba(255, 255, 255, .3); border-top-color: var(--uk-on-strong, #fff); }
.spinner.is-still { animation: none; }
@keyframes uk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.5s; } }