/* ============================================================
   comp-buttons.css (Lego Block)
   버튼 부품: 일반 CTA(.btn 계열)와 토큰 이코노미 CTA(.unlock-btn).
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700;
  font-size: 16px; text-decoration: none; border-radius: var(--radius-md);
  padding: 14px 32px; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  border: none; cursor: pointer;
}
.btn:hover { transform: translateY(-4px); }

/* Primary CTA — vivid two-tone gradient with a soft color glow, not just a
   flat fill. This is the button that should catch your eye first. */
.btn-primary {
  background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
  color: var(--accent-primary) !important;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent-primary) 25%, transparent);
  border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-primary) 20%, transparent);
  transform: translateY(-3px);
}

/* Secondary CTA — solid dark pill, sits quietly next to the gradient one. */
.btn-ghost {
  background: rgba(255,255,255,0.05); color: var(--text-primary) !important;
  border: 1px solid var(--border-muted);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--accent-primary);
  box-shadow: 0 0 24px rgba(167, 139, 250, 0.15);
}

/* 토큰 이코노미 CTA — 카드 해제/구매 등 돈이 걸린 소형 버튼 */
.unlock-btn {
  font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer;
  border: none; border-radius: 999px; padding: 9px 16px;
  background: var(--red); color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.2s ease;
}
.unlock-btn:hover { background: var(--red-deep); transform: translateY(-1px); }
.unlock-btn.free {
  background: transparent; color: var(--text-secondary); border: 1.5px solid var(--border-muted);
}
.unlock-btn.free:hover { background: rgba(255,255,255,0.1); color: #fff; }
.unlock-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }