/* ============================================================
   components/buttons.css
   ボタン全バリアント
   ============================================================ */

/* ------------------------------------------------------------
   ベース
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 2em;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition),
              color var(--transition),
              border-color var(--transition),
              opacity var(--transition),
              transform var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover {
  opacity: 1; /* style.css の a:hover を打ち消す */
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

/* ------------------------------------------------------------
   バリアント
   ------------------------------------------------------------ */

/* 塗りつぶし（メイン） */
.btn--solid {
  background-color: var(--color-primary);
  color: var(--color-btn-solid-text);
  border-color: var(--color-primary);
}
.btn--solid:hover {
  filter: brightness(1.1);
}

/* アウトライン */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ゴースト（白背景向け・薄い枠） */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 白（ダーク背景上で使う） */
.btn--white {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}
.btn--white:hover {
  filter: brightness(0.95);
}

/* ------------------------------------------------------------
   形状バリアント
   ------------------------------------------------------------ */

/* 角丸なし */
.btn--sharp {
  border-radius: 0;
}

/* 完全な丸 */
.btn--pill {
  border-radius: 100px;
}

/* ------------------------------------------------------------
   サイズ
   ------------------------------------------------------------ */
.btn--lg {
  padding: 1em 2.5em;
  font-size: 1.125rem;
}
.btn--sm {
  padding: 0.5em 1.25em;
  font-size: 0.875rem;
}

/* 横幅いっぱい */
.btn--block {
  width: 100%;
}

/* ------------------------------------------------------------
   LINE ボタン（LP・デモ共通で使う）
   ------------------------------------------------------------ */
.btn--line {
  background-color: #06c755;
  color: #ffffff;
  border-color: #06c755;
  gap: 0.6em;
}
.btn--line:hover {
  filter: brightness(1.08);
}
.btn--line .btn__icon {
  width: 1.4em;
  height: 1.4em;
  fill: currentColor;
}

/* ------------------------------------------------------------
   アイコン付き
   ------------------------------------------------------------ */
.btn__icon {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   無効状態
   ------------------------------------------------------------ */
.btn:disabled,
.btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}