/* 티음 아이콘 보조 클래스 — 리본 제스처 아이콘(icons.js)용 최소 스타일.
   아이콘 자체는 fill="currentColor"이므로 색은 부모의 color를 상속한다. */

/* 기본: 텍스트 흐름/플렉스 정렬에 자연스럽게 놓이도록 */
.ico {
  display: inline-block;
  vertical-align: -0.14em;   /* 본문 텍스트 베이스라인에 맞춤 */
  flex: 0 0 auto;            /* 플렉스 컨테이너에서 찌그러지지 않게 */
  line-height: 0;
}

/* 버튼·칩 등 플렉스 라인 안에서 텍스트와 나란히 둘 때 */
.btn .ico,
.chip .ico,
.ico-inline {
  vertical-align: middle;
}

/* 브랜드 액센트(오렌지)로 칠하고 싶을 때 — currentColor를 --dot로 */
.ico-accent { color: var(--dot, #FF3D00); }
.ico-muted  { color: var(--ink-3, rgba(28, 29, 43, 0.55)); }

/* 로딩 회전 — loading/hero 등에 부여. reduced-motion이면 정지 */
.ico-spin {
  animation: ico-spin 1.1s cubic-bezier(0.62, 0.09, 0.4, 0.92) infinite;
  transform-origin: 50% 50%;
}
@keyframes ico-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ico-spin { animation: none; }
}