/* =====================================================
   버튼 컴포넌트 - 재사용 가능한 버튼 스타일
   
   사용법:
   <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-outline-gray, .btn-ghost
   - 상태: .btn-success, .btn-warning, .btn-danger
   - 크기: .btn-sm, .btn-md, .btn-lg
   - 너비: .btn-full (전체 너비)
   ===================================================== */

/* 기본 버튼 스타일 */
.btn { display: inline-flex; cursor: pointer; align-items: center; justify-content: center; gap: var(--space-8-12); 
    font-weight: 700; letter-spacing: -0.02em; 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); }

/* Outline Gray 버튼 (영수증 버튼 스타일) */
.btn-outline-gray { background-color: transparent; color: var(--text-secondary); border: 1px solid var(--border-medium); font-weight: 500; border-radius: var(--radius-xs); }
.btn-outline-gray:hover:not(:disabled) { background-color: var(--bg-tertiary); border-color: var(--border-medium); }
.btn-outline-gray:active:not(:disabled) { background-color: var(--bg-tertiary); }

/* 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); }

/* Kakao 버튼 (카카오 간편 가입) - 피그마 디자인 기반 */
.btn-kakao { background-color: #FEE500; color: var(--text-primary); border: none; justify-content: space-between; }
.btn-kakao:hover:not(:disabled) { opacity: 0.9; }
.btn-kakao:active:not(:disabled) { opacity: 0.8; }
.btn-kakao .btn-icon { width: 20px; height: 20px; flex-shrink: 0; }
.btn-kakao .btn-text { flex: 1; text-align: center; font-weight: 500; }
.btn-kakao::after { content: ''; width: 20px; flex-shrink: 0; }

/* 버튼 그룹 */
.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; }
}