/**
 * WonSpirit 공통 버튼 스타일
 * - 프로젝트 전체에서 사용되는 버튼 스타일을 정의합니다.
 * - 색상은 theme.css에서 정의된 변수 사용
 * - 일관된 호버 효과 적용
 */

/* theme.css에서 색상 변수 로드됨 */

/* ==============================================
   Primary Button (주요 액션 버튼)
   ============================================== */
.btn-ws-primary,
.btn-submit,
.btn-login,
.btn-twitter {
    background-color: var(--ws-primary) !important;
    color: white !important;
    border: 2px solid var(--ws-primary) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    font-weight: 900 !important;
    font-size: 1rem !important;
    letter-spacing: -0.01em !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.btn-ws-primary:hover,
.btn-submit:hover,
.btn-login:hover,
.btn-twitter:hover {
    background-color: var(--ws-primary-hover) !important;
    border-color: var(--ws-primary-hover) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--ws-primary-rgb), 0.25);
    text-decoration: none !important;
}

/* ==============================================
   Secondary Button (부가 액션 버튼)
   ============================================== */
.btn-ws-secondary,
.btn-cancel {
    background-color: transparent !important;
    color: var(--ws-text-secondary) !important;
    border: 2px solid var(--ws-border) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.btn-ws-secondary:hover,
.btn-cancel:hover {
    background-color: var(--ws-bg-soft) !important;
    color: var(--ws-text) !important;
    border-color: var(--ws-border-strong) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--ws-text-rgb), 0.08);
    text-decoration: none !important;
}

/* ==============================================
   Bootstrap 호환성
   ============================================== */
.btn-primary {
    background-color: var(--ws-primary) !important;
    border-color: var(--ws-primary) !important;
    color: white !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.btn-primary:hover {
    background-color: var(--ws-primary) !important;
    border-color: var(--ws-primary) !important;
    color: white !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(var(--ws-primary-rgb), 0.25);
    text-decoration: none !important;
}

/* ==============================================
   Button Size Variants (주요 버튼 한정)
   ============================================== */
.btn-ws-primary.btn-lg,
.btn-submit.btn-lg,
.btn-login.btn-lg,
.btn-twitter.btn-lg,
.btn-ws-secondary.btn-lg,
.btn-cancel.btn-lg {
    padding: 16px 20px !important;
    font-size: 1.1rem !important;
}

.btn-ws-primary.btn-sm,
.btn-submit.btn-sm,
.btn-login.btn-sm,
.btn-twitter.btn-sm,
.btn-ws-secondary.btn-sm,
.btn-cancel.btn-sm {
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
}

/* ==============================================
   Small Button (작은 버튼 전용 - 헤더, 인라인 액션용)
   ============================================== */
.btn-ws-sm-primary {
    background-color: var(--ws-primary) !important;
    color: white !important;
    border: 1.5px solid var(--ws-primary) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    letter-spacing: -0.01em !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.btn-ws-sm-primary:hover {
    background-color: var(--ws-primary-hover) !important;
    border-color: var(--ws-primary-hover) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(var(--ws-primary-rgb), 0.2);
    text-decoration: none !important;
}

.btn-ws-sm-secondary {
    background-color: var(--ws-bg) !important;
    color: var(--ws-text-secondary) !important;
    border: 1.5px solid var(--ws-border) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.btn-ws-sm-secondary:hover {
    background-color: var(--ws-bg-soft) !important;
    color: var(--ws-text) !important;
    border-color: var(--ws-border-strong) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(var(--ws-text-rgb), 0.06);
    text-decoration: none !important;
}

/* ==============================================
   Small Danger Button (삭제 등 위험 액션용)
   ============================================== */
.btn-ws-sm-danger {
    background-color: transparent !important;
    color: var(--ws-danger) !important;
    border: 1.5px solid var(--ws-danger) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    cursor: pointer !important;
}

.btn-ws-sm-danger:hover {
    background-color: var(--ws-danger) !important;
    border-color: var(--ws-danger-hover) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(var(--ws-danger-rgb), 0.25);
    text-decoration: none !important;
}

/* ==============================================
   Disabled State
   ============================================== */
.btn-ws-primary:disabled,
.btn-submit:disabled,
.btn-login:disabled,
.btn-twitter:disabled,
.btn-ws-secondary:disabled,
.btn-cancel:disabled,
.btn-ws-sm-primary:disabled,
.btn-ws-sm-secondary:disabled,
.btn-ws-sm-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}