/* =====================================================
   버튼 컴포넌트 - 재사용 가능한 버튼 스타일
   
   사용법:
   <button class="btn btn-primary btn-md">버튼</button>
   <a href="/link" class="btn btn-secondary btn-lg btn-full">링크 버튼</a>
   
   클래스 조합:
   - 기본: .btn (필수)
   - 스타일: .btn-primary, .btn-secondary, .btn-outline, .btn-ghost
   - 상태: .btn-success, .btn-warning, .btn-danger
   - 크기: .btn-sm, .btn-md, .btn-lg
   - 너비: .btn-full (전체 너비)
   ===================================================== */

/* 기본 버튼 스타일 */
.btn { cursor: pointer; align-items: center; justify-content: center; gap: var(--space-8-12); 
    font-weight: 700; text-decoration: none; border: 1px solid transparent; 
    border-radius: var(--radius-xs); cursor: pointer; transition: background-color 0.3s ease; 
    user-select: none; outline: none; position: relative; overflow: hidden; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:disabled { cursor: not-allowed; opacity: 0.6; transform: none !important; }

/* 버튼 크기 */
.btn-sm { padding: var(--space-6-10) var(--space-12-16); font-size: var(--fs-12-16); }
.btn-md { padding: var(--space-12-16) var(--space-16-20); font-size: var(--fs-14-18); }
.btn-lg { padding: var(--space-16-20) var(--space-20-24); font-size: var(--fs-16-20); }

/* 버튼 너비 */
.btn-full { width: 100%; height: 56px; padding: 12px 16px; border-radius: 6px; font-size: 16px; }

/* Primary 버튼 */
.btn-primary { background-color: var(--primary); color: var(--bg-primary); border: none; }
.btn-primary:hover { background-color: var(--primary-60); }

/* Secondary 버튼 */
.btn-secondary { background-color: var(--primary-10); color: var(--primary); border: none; }
.btn-secondary:hover { background-color: var(--primary-20); border: none; }

/* Outline 버튼 */
.btn-outline { background-color: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover:not(:disabled) { background-color: var(--primary); color: var(--bg-primary); 
    transform: translateY(-1px); }
.btn-outline:active:not(:disabled) { transform: translateY(0); }

/* Ghost 버튼 */
.btn-ghost { background-color: transparent; color: var(--primary); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background-color: var(--primary-10); transform: translateY(-1px); }
.btn-ghost:active:not(:disabled) { transform: translateY(0); }

/* Success 버튼 */
.btn-success { background-color: var(--success); color: var(--bg-primary); border-color: var(--success); }
.btn-success:hover:not(:disabled) { background-color: #059669; border-color: #059669; transform: translateY(-1px); }

/* Warning 버튼 */
.btn-warning { background-color: var(--warning); color: var(--bg-primary); border-color: var(--warning); }
.btn-warning:hover:not(:disabled) { background-color: #D97706; border-color: #D97706; transform: translateY(-1px); }

/* Danger 버튼 */
.btn-danger { background-color: var(--error); color: var(--bg-primary); border-color: var(--error); }
.btn-danger:hover:not(:disabled) { background-color: #DC2626; border-color: #DC2626; transform: translateY(-1px); }

/* 버튼 그룹 */
.btn-group { display: flex; gap: var(--space-8-12); flex-wrap: wrap; }
.btn-group.vertical { flex-direction: column; }
.btn-group.horizontal { flex-direction: row; }

/* 데스크탑 최적화 */
@media (min-width: 601px) {
  .btn-lg { padding: var(--space-16-20) var(--space-24-32); font-size: var(--fs-18-22); }
  .btn-full { font-size: 17px; }
}