/* 버튼 컴포넌트 — 가이드 §8 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    height: 44px;                /* Mobile 기본 */
    padding: 0 var(--spacing-4);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--primary-50);
    color: var(--primary-0);
    cursor: pointer;
    transition: background var(--motion-fast), color var(--motion-fast),
                border-color var(--motion-fast);
    white-space: nowrap;
}

@media (min-width: 768px) {
    .btn { height: 40px; }       /* PC Medium */
}

.btn:disabled {
    cursor: not-allowed;
    background: var(--primary-30);
    color: var(--primary-0);
}

@media (hover: hover) {
    .btn:hover:not(:disabled) { background: var(--primary-40); }
}

.btn:active:not(:disabled) { background: var(--primary-60); }

/* ── Focus 오버라이드 — 채워진 강조 배경 위에서 시인성 확보 ─
   default(.btn) + Primary + Danger : 흰색 outline
   Secondary / Tertiary / Neutral : 기본 dashed-blue 유지 (전역 토큰 그대로) */
.btn:focus-visible {
    outline-color: var(--primary-0);
}

/* ── Variants ────────────────────────────────────────────── */
.btn-primary { /* 기본값과 동일 — 명시용 */ }

.btn-secondary {
    background: transparent;
    border: 1px solid var(--primary-50);
    color: var(--primary-50);
}
.btn-secondary:disabled {
    background: transparent;
    border-color: var(--neutral-disabled-bd);
    color: var(--neutral-disabled-bd);
}
@media (hover: hover) {
    .btn-secondary:hover:not(:disabled) {
        background: var(--primary-5);
    }
}
.btn-secondary:active:not(:disabled) { background: var(--primary-10); }

.btn-tertiary {
    background: transparent;
    color: var(--primary-50);
    border: 0;
}
.btn-tertiary:disabled {
    background: transparent;
    color: var(--neutral-disabled-bd);
}
@media (hover: hover) {
    .btn-tertiary:hover:not(:disabled) { background: var(--primary-5); }
}
.btn-tertiary:active:not(:disabled) { background: var(--primary-10); }

.btn-danger {
    background: var(--status-critical);
    color: var(--primary-0);
}
.btn-danger:disabled {
    background: var(--neutral-disabled-bg);
    color: var(--neutral-disabled-bd);
}
@media (hover: hover) {
    .btn-danger:hover:not(:disabled) { background: #FF7875; }
}
.btn-danger:active:not(:disabled) { background: #D9363E; }

.btn-neutral {
    background: var(--neutral-disabled-bg);
    color: var(--neutral-basic);
}
@media (hover: hover) {
    .btn-neutral:hover:not(:disabled) { background: #D5D9DD; }
}
.btn-neutral:active:not(:disabled) { background: var(--neutral-disabled-bd); }

/* 투명·옅은 배경 variant 는 기본 dashed-blue outline 으로 복원 */
.btn-secondary:focus-visible,
.btn-tertiary:focus-visible,
.btn-neutral:focus-visible {
    outline-color: var(--focus-outline-color);
}

/* ── Sizes ───────────────────────────────────────────────── */
.btn-xl {
    height: 56px;
    padding: 0 var(--spacing-6);
    font-size: 19px;
}
.btn-lg {
    height: 52px;
    padding: 0 var(--spacing-5);
    font-size: 17px;
}
@media (min-width: 768px) {
    .btn-xl { height: 56px; }
    .btn-lg { height: 48px; }
}

.btn-sm {
    height: 36px;
    padding: 0 var(--spacing-3);
    font-size: 13px;
    border-radius: var(--radius-sm);
}
@media (min-width: 768px) {
    .btn-sm { height: 32px; }
}

.btn-xs {
    height: 28px;
    padding: 0 var(--spacing-2);
    font-size: 13px;
    border-radius: var(--radius-xs);
}
@media (min-width: 768px) {
    .btn-xs { height: 24px; }
}

/* ── 아이콘 버튼 (§8.5) ─────────────────────────────────── */
.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .btn-icon { width: 40px; height: 40px; }
}

.btn-icon.btn-sm { width: 36px; height: 36px; }
@media (min-width: 768px) {
    .btn-icon.btn-sm { width: 32px; height: 32px; }
}

.btn-icon.btn-xs { width: 28px; height: 28px; }
@media (min-width: 768px) {
    .btn-icon.btn-xs { width: 24px; height: 24px; }
}

.btn-icon.btn-lg { width: 52px; height: 52px; }
@media (min-width: 768px) {
    .btn-icon.btn-lg { width: 48px; height: 48px; }
}

.btn-icon.btn-xl { width: 56px; height: 56px; }

/* ── Block (full-width) ──────────────────────────────────── */
.btn-block {
    display: flex;
    width: 100%;
}

/* ── Loading 상태 ────────────────────────────────────────── */
.btn[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.7;
}