/* ============================================================
   common/button.css — ボタンスタイル
   ============================================================ */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 20px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  border: none;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  width: 100%;
}

.btn-primary {
  background: var(--green);
  color: #fff;
}

.btn-primary:hover {
  background: var(--green-dark);
}

.btn-primary:active {
  transform: scale(.98);
}

.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.btn-outline {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
}

.btn-outline:hover {
  background: var(--green-light);
}

.btn-outline-blue {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
}

.btn-outline-blue:hover {
  background: var(--blue-light);
}

.btn-outline-gray {
  background: transparent;
  color: var(--gray-600);
  border: 2px solid var(--gray-300);
}

.btn-outline-gray:hover {
  background: var(--gray-100);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-ghost {
  background: var(--gray-100);
  color: var(--gray-700);
}

.btn-ghost:hover {
  background: var(--gray-200);
}

.btn-warning {
  background: var(--warning);
  color: #fff;
}

.btn-orange {
  background: var(--orange);
  color: #fff;
}

.btn-orange:hover {
  filter: brightness(.9);
}

.btn-orange:active {
  transform: scale(.98);
}