/* ==========================================
   인라인 SVG 아이콘 스타일 (Font Awesome 대체)
   - Font Awesome의 크기/정렬/애니메이션 동작을 재현
   ========================================== */

/* 기본 SVG 아이콘: 텍스트 크기에 맞춰 자동 스케일 (FontAwesome와 동일한 느낌) */
.svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em; /* 텍스트 baseline 정렬 (FA 기본값과 유사) */
    fill: currentColor;       /* 부모 color를 그대로 상속 → 기존 색상 스타일 유지 */
    overflow: visible;
}

/* data-icon 래퍼(span 등)가 인라인 흐름을 방해하지 않도록 */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* 회전 애니메이션 (fa-spin 대체) — 로딩 스피너용 */
.svg-icon.spin {
    animation: svg-icon-spin 1s linear infinite;
    transform-origin: center;
}

@keyframes svg-icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 접근성: 모션 최소화 설정 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
    .svg-icon.spin {
        animation-duration: 2s; /* 완전 정지 대신 느리게 (로딩 표시는 유지) */
    }
}