/* ─────────────────────────────────────────────
   BUTTON — SLUR Design System × slur-guidelines
   기본형은 보조(중립) 버튼. 변형은 m_, 상태는 data-state.
   높이·패딩은 rem(텍스트와 함께 확대), 값은 시맨틱 토큰만.
   공유 컨트롤 높이: 2/2.5/3rem (32/40/48).
   ───────────────────────────────────────────── */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); height: 2.5rem; padding: 0 var(--space-16); border: 1px solid var(--color-border-default); border-radius: var(--radius-8); background: var(--color-surface-card); text-decoration: none; color: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.btn:hover { background: var(--color-surface-hover); }
.btn:active { background: var(--color-surface-sunken); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 1.125em; height: 1.125em; flex: none; }

/* 색상 변형 */
.btn.m_primary { border-color: transparent; background: var(--color-brand); color: var(--color-on-brand); }
.btn.m_primary:hover { background: var(--color-brand-hover); }
.btn.m_primary:active { background: var(--color-brand-active); }
.btn.m_ghost { border-color: transparent; background: transparent; }
.btn.m_ghost:hover { background: var(--color-surface-hover); }
.btn.m_ghost:active { background: var(--color-surface-sunken); }
.btn.m_danger { border-color: transparent; background: var(--color-danger-solid); color: var(--color-on-danger); }
.btn.m_danger:hover { filter: brightness(0.92); }
.btn.m_danger:active { filter: brightness(0.85); }

/* 크기 변형 — 공유 컨트롤 높이 2/2.5/3rem */
.btn.m_small { gap: var(--space-4); height: 2rem; padding: 0 var(--space-12); font-size: var(--text-xs); }
.btn.m_large { gap: var(--space-12); height: 3rem; padding: 0 var(--space-24); font-size: var(--text-base); }
.btn.m_full { width: 100%; font-weight: var(--weight-semibold); }
/* 아이콘만 있는 정사각 버튼 — 보이는 크기 = 탭 영역. 모바일 단독 탭 타깃이면 m_large(48) */
.btn.m_icon { width: 2.5rem; padding: 0; }
.btn.m_icon.m_small { width: 2rem; }
.btn.m_icon.m_large { width: 3rem; }

/* 햄버거(메뉴) 버튼 — 모바일 내비게이션을 여는 단독 버튼.
   48×48(3rem) 고정: 이 버튼은 보이는 크기 = 실제 탭 영역이라, 모바일 최소
   터치 타깃 권장(Material 48·Apple 44)을 채우려면 48이어야 한다(40은 미달).
   테두리·배경 없이 아이콘만 — 배경 피드백(원형 hover) 없음. */
.btn_menu { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: none; background: transparent; color: inherit; cursor: pointer; }
.btn_menu svg { width: 1.875rem; height: 1.875rem; flex: none; }

/* 상태 */
.btn[data-state="loading"] { opacity: 0.6; pointer-events: none; cursor: wait; }