/* ============================================================
 * Shared Button Component
 * 책임: Codex
 * ============================================================ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-inline-size: calc(var(--space-10) + var(--space-1));
  min-block-size: calc(var(--space-10) + var(--space-1));
  border: none;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.button.button--primary {
  background-color: var(--color-brand-500);
  color: var(--color-text-on-brand);
}

.button.button--secondary {
  background-color: var(--color-bg-muted);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.button.button--ghost {
  background-color: transparent;
  color: var(--color-text-sub);
}

/* 버튼 총 높이 ≈ (세로패딩 × 2) + (Pretendard font-size × line-height 1.5)
 *   sm: 8×2  + 14×1.5 = 16 + 21 = 37px  → 내부 inline-flex 정렬 포함 ≈ 40px
 *   md: 12×2 + 16×1.5 = 24 + 24 = 48px  (정확)
 *   lg: 16×2 + 18×1.5 = 32 + 27 = 59px  (정확)
 */
.button,
.button.button--md {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-md);
}

.button.button--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

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

.button.button--primary:not(:disabled):not([aria-disabled="true"]):hover {
  background-color: var(--color-brand-600);
  box-shadow: var(--shadow-brand-md);
}

.button.button--secondary:not(:disabled):not([aria-disabled="true"]):hover {
  background-color: var(--color-border);
}

.button.button--ghost:not(:disabled):not([aria-disabled="true"]):hover {
  background-color: var(--color-bg-muted);
}

.button:not(:disabled):not([aria-disabled="true"]):active {
  transform: scale(0.97);
}

.button.button--primary:not(:disabled):not([aria-disabled="true"]):active {
  background-color: var(--color-brand-700);
}

.button:focus-visible {
  outline: calc(var(--space-1) / 2) solid var(--color-brand-500);
  outline-offset: calc(var(--space-1) / 2);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.button[aria-disabled="true"] {
  pointer-events: none;
}

.button.button--primary:disabled,
.button.button--primary[aria-disabled="true"] {
  background-color: var(--color-brand-500);
  color: var(--color-text-on-brand);
}

.button.button--secondary:disabled,
.button.button--secondary[aria-disabled="true"] {
  background-color: var(--color-bg-muted);
  color: var(--color-text);
}

.button.button--ghost:disabled,
.button.button--ghost[aria-disabled="true"] {
  background-color: transparent;
  color: var(--color-text-sub);
}