/**
 * 버튼 스타일 - 공통 버튼 컴포넌트
 * styles.css에서 분리됨
 */

/* ===================== */
/* 기본 버튼 스타일 - Neobrutalism */
/* ===================== */
.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-success,
.btn-danger,
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--ui-radius-sm);
  font-weight: 600;
  font-size: var(--ui-font-size-sm);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ui-transition-fast);
  white-space: nowrap;
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-tertiary:disabled,
.btn-success:disabled,
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary 버튼 - Neobrutalism: Only important actions are filled */
.btn-primary {
  background: var(--ui-primary);
  color: #fff;
  border: 1px solid var(--ui-primary-dark);
  box-shadow: var(--ui-shadow-sm);
}

.btn-primary:hover:not(:disabled) {
  background: var(--ui-primary-dark);
  box-shadow: var(--ui-shadow-md);
  transform: translate(-1px, -1px);
}

/* Secondary 버튼 - Outline only, no fill */
.btn-secondary {
  background: transparent;
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--ui-surface-hover);
  border-color: var(--ui-border-hover);
}

/* Tertiary 버튼 - Subtle outline */
.btn-tertiary {
  background: transparent;
  color: var(--ui-text-muted);
  border: 1px solid var(--ui-border);
}

.btn-tertiary:hover:not(:disabled) {
  color: var(--ui-text);
  border-color: var(--ui-border-hover);
}

/* Success 버튼 - Outline style, not filled */
.btn-success {
  background: transparent;
  color: var(--ui-success);
  border: 1px solid var(--ui-success);
}

.btn-success:hover:not(:disabled) {
  background: var(--ui-success-bg);
}

/* Danger 버튼 - Outline style */
.btn-danger {
  background: transparent;
  color: var(--ui-error);
  border: 1px solid var(--ui-error);
}

.btn-danger:hover:not(:disabled) {
  background: var(--ui-error-bg);
}

/* Danger Outline 버튼 */
.btn-danger-outline {
  background: transparent;
  color: var(--ui-error);
  border: 1px solid var(--ui-error-border);
}

.btn-danger-outline:hover:not(:disabled) {
  background: var(--ui-error-bg);
  border-color: var(--ui-error);
}

/* Icon 버튼 - Neobrutalism (square, not circular) */
.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: var(--ui-text-muted);
  border: 1px solid var(--ui-border);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover:not(:disabled) {
  background: var(--ui-surface-hover);
  border-color: var(--ui-border-hover);
  color: var(--ui-text);
}

/* Link 버튼 - 링크 스타일 */
.btn-link {
  color: var(--ui-primary-light);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-weight: 600;
}

.btn-link:hover {
  text-decoration: underline;
  color: var(--ui-primary);
}

/* ===================== */
/* 버튼 크기 변형        */
/* ===================== */
.btn-sm,
.btn-small {
  padding: 0.3rem 0.6rem;
  font-size: var(--ui-font-size-xs);
  min-height: 28px;
}

.btn-lg {
  padding: 0.65rem 1.5rem;
  font-size: 1rem;
}

.btn-xs {
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
}

/* ===================== */
/* 버튼 그룹             */
/* ===================== */
.btn-group {
  display: inline-flex;
  gap: 0;
}

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

.btn-group .btn:first-child {
  border-radius: 0.65rem 0 0 0.65rem;
}

.btn-group .btn:last-child {
  border-radius: 0 0.65rem 0.65rem 0;
}

.btn-group .btn:not(:last-child) {
  border-right: none;
}

/* ===================== */
/* 액션 버튼 영역        */
/* ===================== */
.action-buttons {
  display: flex;
  gap: 0.75rem;
}

.form-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* ===================== */
/* 인라인 폼 버튼        */
/* ===================== */
.inline-form {
  display: inline;
  margin-left: 0.35rem;
}

.table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.table-actions .inline-form {
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}