/* ==========================================================================
   button — 시안·블루 그라데이션이 기본. 보조는 연회색
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 1px solid transparent;
  /* 그라데이션이 투명 테두리 위에서 반복되어 양 끝에 1px 다른 색 줄이 생기는 것을 막는다 */
  background-origin: border-box;
  background-repeat: no-repeat;
  font-family: var(--ff-base);
  font-weight: var(--fw-semibold);
  line-height: 1.75;
  text-align: center;
  transition: filter .15s ease, background-color .15s ease, color .15s ease;
}

/* --- variant --------------------------------------------------------------- */

.btn--gradient {
  background-image: var(--g-brand);
  color: var(--c-text-invert);
}
.btn--gradient:hover { filter: brightness(1.08); }

.btn--soft {
  background: var(--c-chip-off);
  color: #666666;
}
.btn--soft:hover { background: #dde4ec; }

.btn--outline {
  background: var(--c-bg);
  border-color: var(--c-navy);
  color: var(--c-navy);
}
.btn--outline:hover { background: var(--c-navy); color: var(--c-text-invert); }

/* 되돌릴 수 없는 동작 — 회원 탈퇴 `[2026-09-22]`.
   평소에는 테두리만 두고 누를 때 채운다. 빨간 버튼이 화면에 늘 떠 있으면
   그 색이 흔해져서, 정작 위험한 순간에 눈에 안 들어온다 */
.btn--danger {
  background: var(--c-bg);
  border-color: var(--c-danger);
  color: var(--c-danger);
}
.btn--danger:hover { background: var(--c-danger); color: var(--c-text-invert); }

/* --- shape ----------------------------------------------------------------- */

.btn--pill { border-radius: var(--radius-pill); }
.btn--boxy { border-radius: var(--radius-sm); }

/* --- size ------------------------------------------------------------------ */

/* 크기는 시안의 padding·행간을 그대로 옮긴 값이다 */

.btn--sm {                       /* 제품 카드 — px 23.467 / py 0 / 행간 24.418 */
  padding: 0 var(--sp-6);
  font-size: var(--fs-sm);
  line-height: 2.04;
}

.btn--md {                       /* 폼 전송 — px 10 / py 12 / 행간 16.2 */
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 0.9;
}

/* 플로팅 CTA. 시안(node 37:1274)은 223×63 인데 화면에서 커 보여 한 단계 줄였다.
   px 40 → 36 / py 10 → 8 / 글자 20 → 18 */
.btn--lg {
  padding: var(--sp-2) 36px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  line-height: 2.15;
}

.btn--block { display: flex; width: 100%; }

/* --- state ----------------------------------------------------------------- */

.btn.is-disabled,
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid var(--c-text-invert);
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
.btn--soft.is-loading::after { border-color: #666666; border-top-color: transparent; }

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* --- 인증 페이지 전용 -------------------------------------------------------- */
/* 시안은 그라데이션이 아니라 단색 파랑을 쓴다 (node 37:1312) */

.btn--solid {
  background: var(--c-blue-deep);
  border-color: var(--c-blue-deep);
  color: var(--c-text-invert);
  font-weight: var(--fw-bold);
}
.btn--solid:hover { filter: brightness(1.08); }

.btn--outline-blue {
  background: var(--c-bg);
  border-color: var(--c-blue-deep);
  color: var(--c-blue-deep);
  font-weight: var(--fw-semibold);
}
.btn--outline-blue:hover { background: var(--c-surface); }

.btn--auth {
  display: flex;
  width: 100%;
  padding: 13px var(--sp-5);
  border-radius: 6.7px;
  font-size: var(--fs-md);
  line-height: 1.4;
}

/* 좁은 화면에서만 한 치수 내린다 `[2026-09-21]` — 높이 48 → 38px, 글자 16 → 14px.
   폭을 꽉 채우는 버튼이 셋이나 세로로 서서, 48px 씩이면 화면 아래 절반이
   버튼 띠로 덮였다. 38px 이어도 폭이 화면 전체라 누를 자리는 넉넉하다.
   넓은 화면은 칸이 여유로워 그대로 둔다 */
@media (max-width: 767px) {
  .btn--auth {
    padding-block: 9px;
    font-size: var(--fs-base);
  }
}