/* ========================================
   아이노트 아이콘 시스템 v1.0
   Created: 2026-03-14
   Style: 라인 아이콘, stroke-width 2px
   ======================================== */

/* ========================================
   아이콘 공통 스타일
   ======================================== */
.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vertical-align: middle;
}

/* 아이콘 크기 변형 */
.icon-xs {
    width: 16px;
    height: 16px;
}

.icon-sm {
    width: 20px;
    height: 20px;
}

.icon-md {
    width: 24px;
    height: 24px;
}

.icon-lg {
    width: 32px;
    height: 32px;
}

.icon-xl {
    width: 40px;
    height: 40px;
}

/* 채워진 아이콘 (별, 하트 등) */
.icon-filled {
    fill: currentColor;
    stroke: none;
}

/* 아이콘 색상 변형 */
.icon-primary {
    color: var(--color-primary);
}

.icon-secondary {
    color: var(--color-secondary);
}

.icon-voice {
    color: var(--color-voice);
}

.icon-favorite {
    color: var(--color-favorite);
}

.icon-ai {
    color: var(--color-ai);
}

.icon-success {
    color: var(--color-success);
}

.icon-warning {
    color: var(--color-warning);
}

.icon-error {
    color: var(--color-error);
}

.icon-gray {
    color: var(--color-gray-500);
}

/* 아이콘 호버 효과 */
.icon-hover {
    transition: all var(--transition-fast);
}

.icon-hover:hover {
    transform: scale(1.1);
}

/* ========================================
   아이콘 버튼 스타일
   ======================================== */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-gray-600);
}

.icon-btn:hover {
    background: var(--bg-hover);
    color: var(--color-gray-900);
}

.icon-btn:active {
    transform: scale(0.95);
}

.icon-btn-sm {
    width: 32px;
    height: 32px;
}

.icon-btn-lg {
    width: 48px;
    height: 48px;
}

/* 둥근 아이콘 버튼 */
.icon-btn-circle {
    border-radius: var(--radius-full);
}

/* 색상 아이콘 버튼 */
.icon-btn-primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.icon-btn-primary:hover {
    background: var(--color-primary);
    color: white;
}

.icon-btn-voice {
    background: var(--color-voice-light);
    color: var(--color-voice);
}

.icon-btn-voice:hover {
    background: var(--color-voice);
    color: white;
}

/* ========================================
   레이블이 있는 아이콘
   ======================================== */
.icon-with-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* ========================================
   사용 예시 (주석)
   ======================================== */

/*
<!-- 기본 아이콘 사용 -->
<svg class="icon">
  <use href="/assets/icons/icon-sprite.svg#icon-home"></use>
</svg>

<!-- 크기 변형 -->
<svg class="icon icon-sm">
  <use href="/assets/icons/icon-sprite.svg#icon-star"></use>
</svg>

<!-- 색상 변형 -->
<svg class="icon icon-primary">
  <use href="/assets/icons/icon-sprite.svg#icon-mic"></use>
</svg>

<!-- 채워진 아이콘 -->
<svg class="icon icon-filled icon-favorite">
  <use href="/assets/icons/icon-sprite.svg#icon-star-filled"></use>
</svg>

<!-- 아이콘 버튼 -->
<button class="icon-btn">
  <svg class="icon">
    <use href="/assets/icons/icon-sprite.svg#icon-search"></use>
  </svg>
</button>

<!-- 레이블이 있는 아이콘 -->
<span class="icon-with-label">
  <svg class="icon icon-sm">
    <use href="/assets/icons/icon-sprite.svg#icon-mic"></use>
  </svg>
  <span>음성 메모</span>
</span>
*/