/**
 * Button Component Styles
 * 숨카(SUMCAR) 프로젝트
 */

/* ========================================
   Button Base
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    gap: var(--space-8, 8px);
    padding: 12px 24px;
    font-family: inherit;
    font-size: 16px;
    font-size: var(--fs-body, 16px);
    font-weight: 600;
    font-weight: var(--fw-semibold, 600);
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: 12px;
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: all 250ms ease;
    transition: all var(--transition-base, 250ms ease);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.btn:focus {
    outline: 2px solid #00B8C6;
    outline: 2px solid var(--c-primary, #00B8C6);
    outline-offset: 2px;
}

.btn:focus:not(:focus-visible) {
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid #00B8C6;
    outline: 2px solid var(--c-primary, #00B8C6);
    outline-offset: 2px;
}

/* ========================================
   Button Variants
   ======================================== */

/* Primary */
.btn--primary {
    background-color: #00B8C6;
    background-color: var(--c-primary, #00B8C6);
    color: #FFFFFF;
    border-color: #00B8C6;
    border-color: var(--c-primary, #00B8C6);
}

.btn--primary:hover {
    background-color: #33C9D5;
    background-color: var(--c-primary-light, #33C9D5);
    border-color: #33C9D5;
    border-color: var(--c-primary-light, #33C9D5);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.15));
}

.btn--primary:active {
    background-color: #00A0AD;
    background-color: var(--c-primary-dark, #00A0AD);
    border-color: #00A0AD;
    border-color: var(--c-primary-dark, #00A0AD);
    transform: translateY(0);
}

/* Outline */
.btn--outline {
    background-color: transparent;
    color: #00B8C6;
    color: var(--c-primary, #00B8C6);
    border-color: #00B8C6;
    border-color: var(--c-primary, #00B8C6);
}

.btn--outline:hover {
    background-color: #00B8C6;
    background-color: var(--c-primary, #00B8C6);
    color: #FFFFFF;
}

.btn--outline:active {
    background-color: #00A0AD;
    background-color: var(--c-primary-dark, #00A0AD);
    border-color: #00A0AD;
    border-color: var(--c-primary-dark, #00A0AD);
}

/* Text */
.btn--text {
    background-color: transparent;
    color: #00B8C6;
    color: var(--c-primary, #00B8C6);
    border-color: transparent;
    padding-left: 8px;
    padding-right: 8px;
}

.btn--text:hover {
    color: #33C9D5;
    color: var(--c-primary-light, #33C9D5);
    background-color: rgba(0, 184, 198, 0.1);
}

/* ========================================
   Button Sizes
   ======================================== */

/* Small */
.btn--small {
    padding: 8px 16px;
    font-size: 14px;
    font-size: var(--fs-small, 14px);
}

/* Base (default) */
.btn--base {
    padding: 12px 24px;
}

/* Large */
.btn--large {
    padding: 16px 32px;
    font-size: 18px;
}

/* ========================================
   Button States
   ======================================== */

/* Disabled */
.btn:disabled,
.btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading */
.btn.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    border-top-color: transparent;
    animation: btn-spin 0.6s linear infinite;
}

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

/* ========================================
   Button Icon
   ======================================== */
.btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
}

.btn--small .btn__icon svg {
    width: 16px;
    height: 16px;
}

.btn--large .btn__icon svg {
    width: 24px;
    height: 24px;
}

/* Icon Only Button */
.btn--icon-only {
    padding: 12px;
    aspect-ratio: 1 / 1;
}

.btn--icon-only.btn--small {
    padding: 8px;
}

.btn--icon-only.btn--large {
    padding: 16px;
}

.btn--icon-only .btn__text {
    display: none;
}

/* ========================================
   Button Group
   ======================================== */
.btn-group {
    display: inline-flex;
    gap: 8px;
    gap: var(--space-8, 8px);
}

.btn-group .btn {
    flex: 1 0 auto;
}

/* Attached Buttons */
.btn-group--attached {
    gap: 0;
}

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

.btn-group--attached .btn:first-child {
    border-top-left-radius: 12px;
    border-top-left-radius: var(--radius-md, 12px);
    border-bottom-left-radius: 12px;
    border-bottom-left-radius: var(--radius-md, 12px);
}

.btn-group--attached .btn:last-child {
    border-top-right-radius: 12px;
    border-top-right-radius: var(--radius-md, 12px);
    border-bottom-right-radius: 12px;
    border-bottom-right-radius: var(--radius-md, 12px);
}

.btn-group--attached .btn:not(:last-child) {
    border-right-width: 1px;
}

/* ========================================
   Mobile Adjustments
   ======================================== */
@media (max-width: 767px) {
    .btn {
        width: 100%;
    }

    .btn-group {
        flex-direction: column;
        width: 100%;
    }

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

    /* Mobile에서 가로 배치 유지 옵션 */
    .btn-group--horizontal {
        flex-direction: row;
    }

    .btn-group--horizontal .btn {
        width: auto;
        flex: 1;
    }
}

/* Desktop에서만 inline */
@media (min-width: 768px) {
    .btn--inline {
        width: auto;
    }
}

/* ========================================
   Special Variants
   ======================================== */

/* Success */
.btn--success {
    background-color: #10B981;
    background-color: var(--c-success, #10B981);
    color: #FFFFFF;
    border-color: #10B981;
    border-color: var(--c-success, #10B981);
}

.btn--success:hover {
    background-color: #059669;
    border-color: #059669;
}

/* Warning */
.btn--warning {
    background-color: #F59E0B;
    background-color: var(--c-warning, #F59E0B);
    color: #FFFFFF;
    border-color: #F59E0B;
    border-color: var(--c-warning, #F59E0B);
}

.btn--warning:hover {
    background-color: #D97706;
    border-color: #D97706;
}

/* Error */
.btn--error {
    background-color: #EF4444;
    background-color: var(--c-error, #EF4444);
    color: #FFFFFF;
    border-color: #EF4444;
    border-color: var(--c-error, #EF4444);
}

.btn--error:hover {
    background-color: #DC2626;
    border-color: #DC2626;
}

/* ========================================
   Accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }

    .btn:hover {
        transform: none;
    }
}