/**
 * TopCalc 버튼 컴포넌트 - PC 웹
 *
 * 버튼 스타일 정의:
 * - .btn           : 기본 버튼 리셋
 * - .btn-primary   : 그라데이션 메인 버튼
 * - .btn-secondary : 아웃라인 보조 버튼
 * - .btn-text      : 텍스트만 표시
 * - .btn-icon      : 아이콘 전용 원형 버튼
 * - .btn-danger    : 삭제/위험 액션
 * - .btn-success   : 확인/성공 액션
 *
 * @version 1.0.0
 * @date 2026-05-25
 */

/* ==============================================
   기본 버튼 리셋 (.btn)
   ============================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-slow);
    user-select: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 버튼 크기 변형 */
.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
}

.btn--xl {
    padding: var(--space-5) var(--space-10);
    font-size: var(--text-xl);
}

.btn--full {
    width: 100%;
}


/* ==============================================
   Primary 버튼 (메인 CTA)
   ============================================== */
.btn-primary {
    background: var(--gradient-primary);
    color: #FFFFFF;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-primary);
    filter: brightness(1.05);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
    filter: brightness(0.95);
}


/* ==============================================
   Secondary 버튼 (아웃라인)
   ============================================== */
.btn-secondary {
    background: var(--bg-white);
    color: var(--primary-600);
    border: 2px solid var(--primary-500);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
    background: var(--primary-50);
    border-color: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:active {
    background: var(--primary-100);
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}


/* ==============================================
   Text 버튼 (텍스트만)
   ============================================== */
.btn-text {
    background: transparent;
    color: var(--primary-600);
    padding: var(--space-2) var(--space-3);
}

.btn-text:hover {
    background: var(--primary-50);
    color: var(--primary-700);
}

.btn-text:active {
    background: var(--primary-100);
}


/* ==============================================
   Icon 버튼 (아이콘 전용)
   ============================================== */
.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--gray-600);
    font-size: var(--text-lg);
}

.btn-icon:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.btn-icon:active {
    background: var(--gray-200);
}

.btn-icon--sm {
    width: 32px;
    height: 32px;
    font-size: var(--text-sm);
}

.btn-icon--lg {
    width: 48px;
    height: 48px;
    font-size: var(--text-xl);
}


/* ==============================================
   Danger 버튼 (삭제/위험)
   ============================================== */
.btn-danger {
    background: var(--error-500);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.btn-danger:hover {
    background: var(--error-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), var(--shadow-error);
}

.btn-danger:active {
    background: var(--error-700);
    transform: translateY(0);
}


/* ==============================================
   Success 버튼 (확인/성공)
   ============================================== */
.btn-success {
    background: var(--success-500);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.btn-success:hover {
    background: var(--success-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), var(--shadow-success);
}

.btn-success:active {
    background: var(--success-700);
    transform: translateY(0);
}


/* ==============================================
   버튼 그룹
   ============================================== */
.btn-group {
    display: inline-flex;
    gap: var(--space-2);
}

.btn-group--stack {
    flex-direction: column;
}

/* 연결된 버튼 그룹 (간격 없이) */
.btn-group--connected {
    gap: 0;
}

.btn-group--connected .btn {
    border-radius: 0;
}

.btn-group--connected .btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.btn-group--connected .btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}


/* ==============================================
   버튼 내부 아이콘
   ============================================== */
.btn__icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.btn__icon--left {
    margin-right: var(--space-1);
}

.btn__icon--right {
    margin-left: var(--space-1);
}


/* ==============================================
   로딩 상태
   ============================================== */
.btn--loading {
    pointer-events: none;
    opacity: 0.8;
}

.btn--loading::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: var(--space-2);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}